admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge branch 'Issue_Jun_1W' of https://git.marcoaiot.com/admin/marco.pms.web into pramod_Bug-#215

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-31 19:45:08 +05:30
commit cd9a02430e
59 changed files with 3165 additions and 1659 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/css/default.css
View File

@ -189,3 +189,7 @@
text-align: left;
padding-left: 50px;
} */
.small-text{
font-size: 12px;
}

2
public/assets/vendor/css/core.css vendored
View File

@ -29002,7 +29002,6 @@ li:not(:first-child) .dropdown-item,
/* Only for menu example */
.menu-collapsed:not(:hover) {
inline-size: var(--bs-menu-collapsed-width);
/* Custom for sneat only */
}
.menu-collapsed:not(:hover) .menu-inner > .menu-item {
inline-size: var(--bs-menu-collapsed-width);
@ -29682,7 +29681,6 @@ li:not(:first-child) .dropdown-item,
)
.layout-menu.menu-vertical {
inline-size: var(--bs-menu-collapsed-width);
/* Custom for sneat only */
}
.layout-menu-collapsed:not(
.layout-menu-hover,

5
public/scss/_components/_menu.scss
View File

@ -186,7 +186,6 @@
> .menu-item {
margin: $menu-item-spacer 0;
// Sneat menu-link spacing
.menu-link {
margin: $menu-vertical-link-margin-y $menu-vertical-link-margin-x;
}
@ -197,7 +196,6 @@
.menu-block {
padding: $menu-vertical-link-padding-y $menu-vertical-link-padding-x;
}
// Sneat menu-header spacing
.menu-header {
margin: $menu-vertical-header-margin-y 0 $menu-vertical-header-margin-y * 0.5 0;
padding: $menu-vertical-link-padding-y $menu-vertical-link-padding-x * 2 $menu-vertical-link-padding-y
@ -276,7 +274,7 @@
// Vertical Menu Collapsed
// *******************************************************************************
// ! Updated menu collapsed styles for sneat in this mixin
// ! Updated menu collapsed styles for in this mixin
@mixin layout-menu-collapsed() {
width: $menu-collapsed-width;
@ -312,7 +310,6 @@
top: 1.1875rem;
}
}
// Custom for sneat only
.menu-block {
&::before {
bottom: 0.75rem;

23
src/components/Activities/Attendance.jsx
View File

@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
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 : [];
@ -41,6 +42,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
@ -126,9 +134,8 @@ 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
className="page-link btn-xs"
@ -140,9 +147,8 @@ 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
className="page-link "
@ -153,9 +159,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link "

310
src/components/Activities/AttendcesLogs.jsx
View File

@ -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,19 +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";
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;
@ -41,59 +57,68 @@ 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,
10
);
useEffect(() => {
const { startDate, endDate } = dateRange;
if (startDate && endDate) {
dispatch(
fetchAttendanceData({
projectId,
fromDate: startDate,
toDate: endDate,
})
);
}
}, [dateRange, projectId, isRefreshing]);
dispatch(
fetchAttendanceData({
projectId,
fromDate: startDate,
toDate: endDate,
})
);
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);
}
}, [data]);
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);
}
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,
20
);
// Reset to the first page whenever processedData changes (due to switch on/off)
useEffect(() => {
resetPage();
}, [processedData, resetPage]);
return (
<>
@ -102,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>
@ -124,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
@ -134,107 +157,96 @@ 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>
</tr>
)}
{currentItems
?.filter((item) => item.checkInTime.includes(date))
.map((attendance, index) => (
<tr key={index}>
<td colSpan={2}>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={attendance.firstName}
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a
href="#"
className="text-heading text-truncate"
>
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{" "}
{moment(attendance.checkInTime).format(
"DD-MMM-YYYY"
)}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
{attendance.checkOutTime
? convertShortTime(attendance.checkOutTime)
: "--"}
</td>
<td className="text-center">
<RenderAttendanceStatus
attendanceData={attendance}
handleModalData={handleModalData}
Tab={2}
currentDate={currentDate}
/>
</td>
</tr>
))}
</React.Fragment>
{(loading || isRefreshing) && (
<tr>
<td colSpan={6}>Loading...</td>
</tr>
)}
{!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("DD-MM-YYYY")}</strong>
</td>
</tr>
);
}
acc.push(
<tr key={index}>
<td colSpan={2}>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={attendance.firstName}
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a
href="#"
className="text-heading text-truncate"
>
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
{attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
</td>
<td className="text-center">
<RenderAttendanceStatus
attendanceData={attendance}
handleModalData={handleModalData}
Tab={2}
currentDate={today.toLocaleDateString("en-CA")}
/>
</td>
</tr>
);
})}
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)}
>
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
&laquo;
</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" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
>
<button
className="page-link "
onClick={() => paginate(currentPage + 1)}
>
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
&raquo;
</button>
</li>
@ -245,4 +257,4 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
);
};
export default AttendanceLog;
export default AttendanceLog;

152
src/components/Activities/CheckCheckOutForm.jsx
View File

@ -7,20 +7,29 @@ import { usePositionTracker } from "../../hooks/usePositionTracker";
import { useDispatch, useSelector } from "react-redux";
import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice";
import showToast from "../../services/toastService";
import {checkIfCurrentDate} from "../../utils/dateUtils";
import { checkIfCurrentDate } from "../../utils/dateUtils";
const schema = z.object({
markTime: z.string().nonempty({message:"Time is required"}),
description:z.string().max(200,"description should less than 200 chracters").optional()
markTime: z.string().nonempty({ message: "Time is required" }),
description: z.string().max(200, "description should less than 200 chracters").optional()
});
const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
const projectId = useSelector((store)=>store.localVariables.projectId)
const projectId = useSelector((store) => store.localVariables.projectId)
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,
@ -29,60 +38,78 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
reset,
setValue,
} = useForm({
resolver: zodResolver( schema ),
mode:"onChange"
resolver: zodResolver(schema),
mode: "onChange"
});
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
{
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 {
// if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
// {
dispatch(markAttendance(record))
.unwrap()
.then( ( data ) =>
{
showToast("Attendance Marked Successfully", "success");
})
.catch( ( error ) =>
{
// if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
// {
dispatch(markAttendance(record))
.unwrap()
.then((data) => {
showToast(error, "error" );
showToast("Attendance Marked Successfully", "success");
})
.catch((error) => {
showToast(error, "error");
});
// } else
// {
// let formData = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,projectId:projectId,action:modeldata.action,id:modeldata?.id || null}
// }
}
});
// } else
// {
// let formData = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,projectId:projectId,action:modeldata.action,id:modeldata?.id || null}
// }
}
closeModal()
};
return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<TimePicker
label="Choose a time"
onChange={(e) => setValue("markTime", e)}
interval={10}
checkOutTime={modeldata?.checkOutTime}
checkInTime={modeldata?.checkInTime}
/>
{errors. markTime && <p className="text-danger">{errors.markTime.message}</p>}
<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)}
interval={10}
checkOutTime={modeldata?.checkOutTime}
checkInTime={modeldata?.checkInTime}
/>
{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
@ -91,7 +118,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
rows="3"
name="description"
className="form-control"
{...register( "description" )}
{...register("description")}
maxLength={200}
/>
{errors.description && (
@ -99,7 +126,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
@ -109,7 +136,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={()=>closeModal()}
onClick={() => closeModal()}
>
Cancel
</button>
@ -124,15 +151,15 @@ export default CheckCheckOutmodel;
const schemaReg = z.object({
description:z.string().min(1,{message:"please give reason!"})
} );
description: z.string().min(1, { message: "please give reason!" })
});
export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
const [isLoading, setIsLoading] = useState(false);
const coords = usePositionTracker();
const {
register,
handleSubmit,
@ -146,22 +173,21 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
return today.toLocaleDateString('en-CA');
};
const onSubmit = ( data ) =>
{
let record = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude, }
const onSubmit = (data) => {
let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, }
handleSubmitForm(record)
closeModal()
};
return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<p>Regularize Attendance</p>
<p>Regularize Attendance</p>
<label className="form-label" htmlFor="description">
Description
</label>
@ -176,7 +202,7 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
@ -186,7 +212,7 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={()=>closeModal()}
onClick={() => closeModal()}
>
Cancel
</button>

18
src/components/Activities/InfraPlanning.jsx
View File

@ -13,7 +13,7 @@ import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {MANAGE_PROJECT_INFRA} from "../../utils/constants";
import {useDispatch, useSelector} from "react-redux";
import {useProfile} from "../../hooks/useProfile";
import {setProjectId} from "../../slices/localVariablesSlice";
import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
import InfraTable from "../Project/Infrastructure/InfraTable";
@ -25,11 +25,23 @@ const InfraPlanning = () =>
const selectedProject = useSelector((store)=>store.localVariables.projectId)
const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA )
const {projects_Details, loading: project_deatilsLoader, error: project_error} = useProjectDetails(selectedProject)
const {projects_Details, loading: project_deatilsLoader, error: project_error,refetch} = useProjectDetails( selectedProject )
const reloadedData = useSelector( ( store ) => store.localVariables.reload )
useEffect( () =>
{
dispatch(setProjectId(projects[0]?.id))
},[projects])
}, [ projects ] )
useEffect( () =>
{
if (reloadedData)
{
refetch()
dispatch( refreshData( false ) )
}
},[reloadedData])
return (
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">

37
src/components/Activities/ReportTask.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState,useEffect } from "react";
import { formatDate } from "../../utils/dateUtils";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
@ -13,15 +13,23 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
report?.workItem?.plannedWork - report?.workItem?.completedWork;
const schema = z.object({
completedTask: z
.number()
.min(0, "Completed Work must be greater than 0")
.max(maxPending, {
message: `Completed task cannot exceed total pending tasks: ${maxPending}`,
})
.optional(),
comment: z.string().min(1, "Comment cannot be empty"),
});
completedTask: z
.preprocess(
(val) => (val === "" || val === null || Number.isNaN(val) ? undefined : Number(val)),
z
.number({
required_error: "Completed Work must be a number",
invalid_type_error: "Completed Work must be a number",
})
.min(1, "Completed Work must be greater than 0")
.max(maxPending, {
message: `Completed task cannot exceed total pending tasks: ${maxPending}`,
})
),
comment: z.string().min(1, "Comment cannot be empty"),
});
const {
register,
handleSubmit,
@ -32,6 +40,14 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
defaultValues: { completedTask: 0, comment: "" },
});
useEffect(() => {
if (report) {
reset({ completedTask: 0, comment: "" }); // optional: customize default if needed
}
}, [report, reset]);
const onSubmit = async (data) => {
try {
setloading(true);
@ -56,6 +72,7 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
};
const handleClose = () => {
closeModal();
reset();
};
return (

223
src/components/Activities/ReportTaskComments.jsx
View File

@ -13,29 +13,52 @@ const schema = z.object({
comment: z.string().min(1, "Comment cannot be empty"),
});
/**
* ReportTaskComments component for displaying and adding comments to a task.
* It also shows a summary of the activity and task details.
*
* @param {object} props - The component props.
* @param {object} props.commentsData - Data related to the task and its comments, including the description.
* @param {function} props.closeModal - Callback function to close the modal.
*/
const ReportTaskComments = ({ commentsData, closeModal }) => {
const [loading, setloading] = useState(false);
const [comments, setComment] = useState([]);
const [bgClass, setBgClass] = useState("");
const {
register,
handleSubmit,
formState: { errors },
reset,
reset, // Destructure reset from useForm
} = useForm({
resolver: zodResolver(schema),
});
const containerRef = useRef(null);
const firstRender = useRef(true);
useEffect(() => {
setComment(commentsData?.comments);
const taskList = getCachedData("taskList");
if (taskList && taskList.data && commentsData?.id) {
const currentTask = taskList.data.find(task => task.id === commentsData.id);
if (currentTask && currentTask.comments) {
setComment(currentTask.comments);
} else {
setComment(commentsData?.comments || []);
}
} else {
setComment(commentsData?.comments || []);
}
firstRender.current = true;
}, [commentsData]);
useEffect(() => {
if (containerRef.current) {
if (!firstRender.current && containerRef.current) {
containerRef.current.scrollTop = containerRef.current.scrollHeight;
} else {
firstRender.current = false;
}
}, [comments]);
}, [comments]);
const onSubmit = async (data) => {
let sendComment = {
@ -46,33 +69,40 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
try {
setloading(true);
const resp = await TasksRepository.taskComments(sendComment);
setComment((prevItems) => [...prevItems, resp.data]);
const taskList = getCachedData("taskList");
const updatedTaskList = taskList.data.map((task) => {
if (task.id === resp.data.taskAllocationId) {
const existingComments = Array.isArray(task.comments)
? task.comments
: [];
return {
...task,
comments: [...existingComments, resp.data],
};
}
return task;
});
cacheData("taskList", {
data: updatedTaskList,
projectId: taskList.projectId,
});
reset();
if (taskList && taskList.data) {
const updatedTaskList = taskList.data.map((task) => {
if (task.id === resp.data.taskAllocationId) {
const existingComments = Array.isArray(task.comments)
? task.comments
: [];
return {
...task,
comments: [...existingComments, resp.data],
};
}
return task;
});
cacheData("taskList", {
data: updatedTaskList,
projectId: taskList.projectId,
});
}
reset();
setloading(false);
showToast("Successfully Sent", "success");
// closeModal();
} catch (error) {
setloading(false);
showToast(error.response.data?.message || "Something wrong", "error");
showToast(error.response.data?.message || "Something went wrong", "error");
}
};
return (
<div
className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
@ -86,66 +116,64 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
onClick={closeModal}
aria-label="Close"
></button>
<p className="fs-6 text-dark text-start">
{`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
<i className="bx bx-chevron-right"></i>{" "}
{`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
<i className="bx bx-chevron-right"></i>
{`${commentsData?.workItem?.workArea?.areaName}`}
<i className="bx bx-chevron-right"></i>
{` ${commentsData?.workItem?.activityMaster?.activityName}`}
<h5 className=" text-center mb-2">
Activity Summary
</h5>
<p className="small-text text-start my-2">
{commentsData?.workItem?.workArea?.floor?.building?.description}
</p>
<ul
className="list-grouph px-0 mx-0 overflow-auto"
ref={containerRef}
style={{ maxHeight: "400px" }}
>
{comments &&
comments?.map((data) => {
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
const bgClass = getBgClassFromHash(fullName);
return (
<li
className={`list-group-item list-group-item-action my-2 p-1`}
>
<div
className={`li-wrapper d-flex justify-content-start align-items-start my-0 `}
>
<div className="avatar avatar-xs me-1">
<span
className={`avatar-initial rounded-circle bg-label-primary}`}
>
{`${data?.employee?.firstName?.slice(
0,
1
)} ${data?.employee?.lastName?.slice(0, 1)}`}
</span>
</div>
<p className="fw-bold my-2 text-start">
Assigned By :
<span className=" ms-2">
{commentsData?.assignedBy?.firstName +
" " +
commentsData?.assignedBy?.lastName}
</span>{" "}
</p>
<div className={` text-start py-0 `}>
<p className={`mb-0 text-${bgClass}`}>{fullName}</p>
<p
className=" text-muted m-0 "
style={{ fontSize: "10px" }}
>
{moment.utc(data?.commentDate).local().fromNow()}
</p>
</div>
</div>
<p className={`ms-6 text-start mb-0 text-body`}>
{data?.comment}
</p>
</li>
);
})}
</ul>
<form onSubmit={handleSubmit(onSubmit)}>
<p className="fw-bold my-2 text-start">
Loaction :
<span className="fw-normal ms-2 text-start">
{`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
<i className="bx bx-chevron-right"></i>{" "}
{`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
<i className="bx bx-chevron-right"></i>
{`${commentsData?.workItem?.workArea?.areaName}`}
<i className="bx bx-chevron-right"></i>
{` ${commentsData?.workItem?.activityMaster?.activityName}`}
</span>
</p>
<p className="fw-bold my-2 text-start">
Planned Work: {commentsData?.plannedTask}
</p>
<p className="fw-bold my-2 text-start">
{" "}
Completed Work : {commentsData?.completedTask}
</p>
<div className="d-flex align-items-center flex-wrap">
<p className="fw-bold text-start m-0 me-1">Team :</p>
<div className="d-flex flex-wrap align-items-center gap-2">
{commentsData?.teamMembers?.map((member, idx) => (
<span key={idx} className="d-flex align-items-center">
<Avatar
firstName={member?.firstName}
lastName={member?.lastName}
size="xs"
/>
{member?.firstName + " " + member?.lastName}
</span>
))}
</div>
</div>
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
<label className="fw-bold text-start my-1">Add comment :</label>
<textarea
{...register("comment")}
className="form-control"
id="exampleFormControlTextarea1"
rows="1"
placeholder="Enter comment"
/>
{errors.comment && (
@ -160,11 +188,50 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
>
Close
</button>
<button type="submit" className="btn btn-sm btn-primary ms-2">
<button type="submit" className="btn btn-sm btn-primary ms-2" disabled={loading}>
{loading ? "Sending..." : "Comment"}
</button>
</div>
</form>
<ul
className="list-group px-0 mx-0 overflow-auto border-0"
ref={containerRef}
>
{comments &&
comments
?.slice()
.reverse()
.map((data, idx) => {
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
return (
<li
className={`list-group-item list-group-item-action border-none my-1 p-1`}
key={idx}
>
<div
className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
>
<div className="avatar avatar-xs me-1">
<span
className={`avatar-initial rounded-circle bg-label-primary`}
>
{`${data?.employee?.firstName?.slice(0, 1)} ${data?.employee?.lastName?.slice(0, 1)}`}
</span>
</div>
<div className={`d-flex align-items-center justify-content-start`}>
<p className={`mb-0 text-muted me-2`}>{fullName}</p>
<p className={`text-secondary m-0`} style={{ fontSize: "10px" }}>
{moment.utc(data?.commentDate).local().fromNow()}
</p>
</div>
</div>
<p className={`ms-6 text-start mb-0 text-body`}>{data?.comment}</p>
</li>
);
})}
</ul>
</div>
</div>
</div>

80
src/components/Charts/Circle.jsx Normal file
View File

@ -0,0 +1,80 @@
import React from "react";
import ReactApexChart from "react-apexcharts";
const ApexChart = ({ completed = 0, planned = 1 }) => {
const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;
const options = {
chart: {
height: 200,
type: "radialBar",
toolbar: { show: false },
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: "60%",
background: "#fff",
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 3,
opacity: 0.45,
},
},
track: {
background: "#f5f5f5",
strokeWidth: "67%",
dropShadow: { enabled: false },
},
dataLabels: {
show: true,
name: {
offsetY: -10,
color: "#888",
fontSize: "14px",
},
value: {
formatter: (val) => `${val}%`,
color: "#111",
fontSize: "24px",
show: true,
},
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#ABE5A1"],
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100],
},
},
stroke: {
lineCap: "round",
},
labels: ["Progress"],
};
return (
<div id="chart">
<ReactApexChart
options={options}
series={[percentage]}
type="radialBar"
height={200}
/>
</div>
);
};
export default ApexChart;

85
src/components/Charts/Circlechart.jsx Normal file
View File

@ -0,0 +1,85 @@
import React from "react";
import ReactApexChart from "react-apexcharts";
const ApexChart = () => {
const [state] = React.useState({
series: [75], // Replace this with dynamic value if needed
options: {
chart: {
height: 200, // Smaller height
type: "radialBar",
toolbar: {
show: false, // Hide toolbar
},
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: "60%", // Smaller inner circle
background: "#fff",
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 3,
opacity: 0.45,
},
},
track: {
background: "#f5f5f5",
strokeWidth: "67%",
dropShadow: {
enabled: false,
},
},
dataLabels: {
show: true,
name: {
offsetY: -10,
color: "#888",
fontSize: "14px",
},
value: {
formatter: (val) => parseInt(val),
color: "#111",
fontSize: "24px", // Smaller number
show: true,
},
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#ABE5A1"],
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100],
},
},
stroke: {
lineCap: "round",
},
labels: ["Percent"],
},
});
return (
<div id="chart">
<ReactApexChart
options={state.options}
series={state.series}
type="radialBar"
height={200} // Also apply to component
/>
</div>
);
};
export default ApexChart;

194
src/components/Dashboard/Activity.jsx Normal file
View File

@ -0,0 +1,194 @@
import React, { useState, useEffect } from "react";
import LineChart from "../Charts/LineChart";
import { useProjects } from "../../hooks/useProjects";
import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
import ApexChart from "../Charts/Circlechart";
const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
const Activity = () => {
const { projects } = useProjects();
const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
const [selectedDate, setSelectedDate] = useState(today);
const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
const initialProjectId = storedProjectId || "all";
const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
const [activeTab, setActiveTab] = useState("all");
const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
useDashboard_ActivityData(selectedDate, selectedProjectId);
useEffect(() => {
if (selectedProjectId === "all") {
setDisplayedProjectName("All Projects");
} else if (projects) {
const foundProject = projects.find((p) => p.id === selectedProjectId);
setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
} else {
setDisplayedProjectName("Select Project");
}
localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
}, [selectedProjectId, projects]);
const handleProjectSelect = (projectId) => {
setSelectedProjectId(projectId);
};
const handleDateChange = (e) => {
setSelectedDate(e.target.value);
};
return (
<div className="card h-100">
<div className="card-header">
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Activity</h5>
<p className="card-subtitle">Activity Progress Chart</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"
>
{displayedProjectName}
</button>
<ul className="dropdown-menu">
<li>
<button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
All Projects
</button>
</li>
{projects?.map((project) => (
<li key={project.id}>
<button
className="dropdown-item"
onClick={() => handleProjectSelect(project.id)}
>
{project.name}
</button>
</li>
))}
</ul>
</div>
</div>
</div>
{/* ✅ Date Picker Aligned Left with Padding */}
<div className="d-flex justify-content-start ps-3 mb-3">
<div style={{ width: "150px" }}>
<input
type="date"
className="form-control"
value={selectedDate}
onChange={handleDateChange}
/>
</div>
</div>
{/* Tabs */}
<ul className="nav nav-tabs " role="tablist">
<li className="nav-item">
<button
type="button"
className={`nav-link ${activeTab === "all" ? "active" : ""}`}
onClick={() => setActiveTab("all")}
data-bs-toggle="tab"
>
Summary
</button>
</li>
<li className="nav-item">
<button
type="button"
className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
onClick={() => setActiveTab("logs")}
data-bs-toggle="tab"
>
Details
</button>
</li>
</ul>
<div className="card-body">
{activeTab === "all" && (
<div className="row justify-content-between">
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
{isLoading ? (
<p>Loading activity data...</p>
) : isError ? (
<p>No data available.</p>
) : (
ActivityData && (
<>
<h5 className="fw-bold mb-0 text-start w-80">
<i className="bx bx-task text-info"></i> Allocated Task
</h5>
<h4 className="mb-0 fw-bold">
{ActivityData.totalCompletedWork?.toLocaleString()}/
{ActivityData.totalPlannedWork?.toLocaleString()}
</h4>
<small className="text-muted">Completed / Assigned</small>
<div style={{ maxWidth: "180px" }}>
<ApexChart />
</div>
</>
)
)}
</div>
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
{!isLoading && !isError && ActivityData && (
<>
<h5 className="fw-bold mb-0 text-start w-110">
<i className="bx bx-task text-info"></i> Activities
</h5>
<h4 className="mb-0 fw-bold">
{ActivityData.totalCompletedWork?.toLocaleString()}/
{ActivityData.totalPlannedWork?.toLocaleString()}
</h4>
<small className="text-muted ">Pending / Assigned</small>
<div style={{ maxWidth: "180px" }}>
<ApexChart />
</div>
</>
)}
</div>
</div>
)}
{activeTab === "logs" && (
<div className="table-responsive">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th>Activity / Location</th>
<th>Assigned / Completed</th>
</tr>
</thead>
<tbody>
{[{
activity: "Code Review / Remote",
assignedToday: 3,
completed: 2
}].map((log, index) => (
<tr key={index}>
<td>{log.activity}</td>
<td>{log.assignedToday} / {log.completed}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
);
};
export default Activity;

218
src/components/Dashboard/Attendance.jsx Normal file
View File

@ -0,0 +1,218 @@
import React, { useState, useEffect } from "react";
import LineChart from "../Charts/LineChart";
import { useProjects } from "../../hooks/useProjects";
import { useDashboard_AttendanceData } from "../../hooks/useDashboard_Data";
import ApexChart from "../Charts/Circle";
const LOCAL_STORAGE_PROJECT_KEY = "selectedAttendanceProjectId";
const Attendance = () => {
const { projects } = useProjects();
const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
const [selectedDate, setSelectedDate] = useState(today);
const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
const initialProjectId = storedProjectId || "all";
const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
const [displayedProjectName, setDisplayedProjectName] =
useState("Select Project");
const [activeTab, setActiveTab] = useState("Summary");
const {
dashboard_Attendancedata: AttendanceData,
isLoading,
error: isError,
} = useDashboard_AttendanceData(selectedDate, selectedProjectId);
useEffect(() => {
if (selectedProjectId === "all") {
setDisplayedProjectName("All Projects");
} else if (projects) {
const foundProject = projects.find((p) => p.id === selectedProjectId);
setDisplayedProjectName(
foundProject ? foundProject.name : "Select Project"
);
} else {
setDisplayedProjectName("Select Project");
}
localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
}, [selectedProjectId, projects]);
const handleProjectSelect = (projectId) => {
setSelectedProjectId(projectId);
};
const handleDateChange = (e) => {
setSelectedDate(e.target.value);
};
return (
<div className="card h-100">
<div className="card-header mb-1 pb-0 ">
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0 pb-0 ">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Attendance</h5>
<p className="card-subtitle">Daily Attendance Data</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"
>
{displayedProjectName}
</button>
<ul className="dropdown-menu">
<li>
<button
className="dropdown-item"
onClick={() => handleProjectSelect("all")}
>
All Projects
</button>
</li>
{projects?.map((project) => (
<li key={project.id}>
<button
className="dropdown-item"
onClick={() => handleProjectSelect(project.id)}
>
{project.name}
</button>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0 mt-0 me-5 ms-5">
{/* Tabs */}
<div>
<ul className="nav nav-tabs " role="tablist">
<li className="nav-item">
<button
type="button"
className={`nav-link ${
activeTab === "Summary" ? "active" : ""
}`}
onClick={() => setActiveTab("Summary")}
data-bs-toggle="tab"
>
Summary
</button>
</li>
<li className="nav-item">
<button
type="button"
className={`nav-link ${
activeTab === "Details" ? "active" : ""
}`}
onClick={() => setActiveTab("Details")}
data-bs-toggle="tab"
>
Details
</button>
</li>
</ul>
</div>
{/* ✅ Date Picker Aligned Left with Padding */}
<div className="ps-6 mb-3 mt-0">
<div style={{ width: "120px" }}>
<input
type="date"
className="form-control p-1"
// style={{ fontSize: "1rem" }}
value={selectedDate}
onChange={handleDateChange}
/>
</div>
</div>
</div>
<div className="card-body">
{activeTab === "Summary" && (
<div className="row justify-content-center">
<div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
{isLoading ? (
<p>Loading Attendance data...</p>
) : isError ? (
<p>No data available.</p>
) : (
AttendanceData && (
<>
<h5 className="fw-bold mb-0 text-center w-100">
<i className="bx bx-task text-info"></i> Attendance
</h5>
<h4 className="mb-0 fw-bold">
{AttendanceData.checkedInEmployee?.toLocaleString()}/
{AttendanceData.assignedEmployee?.toLocaleString()}
</h4>
<small className="text-muted">Checked-In / Assigned</small>
<div style={{ maxWidth: "180px" }}>
<ApexChart
completed={AttendanceData.checkedInEmployee}
planned={AttendanceData.assignedEmployee}
/>
</div>
</>
)
)}
</div>
</div>
)}
{activeTab === "Details" && (
<div
className="table-responsive"
style={{ maxHeight: "300px", overflowY: "auto" }}
>
<table className="table table-hover mb-0 text-start">
<thead>
<tr>
<th>Name</th>
<th>Checkin</th>
<th>Checkout</th>
</tr>
</thead>
<tbody>
{AttendanceData?.attendanceTable &&
AttendanceData.attendanceTable.length > 0 ? (
AttendanceData.attendanceTable.map((record, index) => (
<tr key={index}>
<td>
{record.firstName} {record.lastName}
</td>
<td>
{new Date(record.inTime).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}
</td>
<td>
{new Date(record.outTime).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}
</td>
</tr>
))
) : (
<tr>
<td colSpan="3" className="text-center">
No attendance data available
</td>
</tr>
)}
</tbody>
</table>
</div>
)}
</div>
</div>
);
};
export default Attendance;

254
src/components/Dashboard/Dashboard.jsx
View File

@ -1,271 +1,55 @@
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";
// import Attendance from "./Attendance";
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 className="col-xxl-6 col-lg-6">
<Attendance />
</div> */}
</div>
</div>
);
};
export default Dashboard;
export default Dashboard;

32
src/components/Dashboard/PendingAttendance.jsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import { useDashboardPendingAttendenceData } from "../../hooks/useDashboard_Data";
const PendingAttendance = () => {
const { PendingAttendenceData } = useDashboardPendingAttendenceData();
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> Pending Attendence
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{PendingAttendenceData.pendingCheckOut?.toLocaleString()}
</h4>
<small className="text-muted">Checkout</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{PendingAttendenceData.pendingRegularization?.toLocaleString()}
</h4>
<small className="text-muted">Regularization</small>
</div>
</div>
</div>
);
};
export default PendingAttendance;

37
src/components/Dashboard/ProjectCompletionChart.jsx Normal file
View 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
View 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
View 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
View 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
View 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;

120
src/components/Employee/ManageEmployee.jsx
View File

@ -10,7 +10,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
import { Link, useNavigate, useParams } from "react-router-dom";
import { formatDate } from "../../utils/dateUtils";
import { useEmployeeProfile } from "../../hooks/useEmployees";
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
import { cacheData, clearCacheKey, getCachedData } from "../../slices/apiDataManager";
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
const mobileNumberRegex = /^[0-9]\d{9}$/;
@ -33,7 +33,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
const { data: job_role, loading } = useMaster();
const [isloading, setLoading] = useState(false);
const navigation = useNavigate();
const [currentEmployee, setCurrentEmployee] = useState();
const [currentEmployee, setCurrentEmployee] = useState(null);
const [currentAddressLength, setCurrentAddressLength] = useState(0);
const [permanentAddressLength, setPermanentAddressLength] = useState(0);
@ -157,22 +157,32 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
mode: "onChange",
});
const AadharNumberValue = watch("AadharNumber") || "";
const AadharNumberValue = watch("aadharNumber") || "";
const onSubmit = (data) => {
setLoading(true);
console.log(data);
if (data.email == "") {
data.email = null;
}
EmployeeRepository.manageEmployee(data)
.then((response) => {
showToast("Employee details updated successfully.", "success");
cacheData("employeeProfileInfo", data);
showToast(
`Employee details ${
data.id == null ? "created" : "updated"
} successfully.`,
"success"
);
clearCacheKey("employeeListByProject");
clearCacheKey("allEmployeeList");
clearCacheKey("allInactiveEmployeeList");
clearCacheKey("employeeProfile");
setLoading(false);
reset();
navigation("/employees");
// navigation("/employees");
onClosed();
})
.catch((error) => {
const message =
@ -232,7 +242,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
className="cursor-pointer fs-6"
onClick={() => onClosed()}
>
<i className='bx bx-x'></i>
<i className="bx bx-x"></i>
</span>
</div>
<div className="card-body">
@ -250,15 +260,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
name="FirstName"
{...register("firstName")}
className="form-control form-control-sm"
id="FirstName"
id="firstName"
placeholder="First Name"
/>
{errors.FirstName && (
{errors.firstName && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.FirstName.message}
{errors.firstName.message}
</div>
)}
</div>{" "}
@ -269,15 +279,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text"
{...register("middleName")}
className="form-control form-control-sm"
id="MiddleName"
id="middleName"
placeholder="Middle Name"
/>
{errors.MiddleName && (
{errors.middleName && (
<div
className="danger-text text-start "
style={{ fontSize: "12px" }}
>
{errors.MiddleName.message}
{errors.middleName.message}
</div>
)}
</div>
@ -287,15 +297,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text"
{...register("lastName")}
className="form-control form-control-sm"
id="LastName"
id="lastName"
placeholder="Last Name"
/>
{errors.LastName && (
{errors.lastName && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.LastName.message}
{errors.lastName.message}
</div>
)}
</div>
@ -305,7 +315,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<div className="form-text text-start">Email</div>
<input
type="email"
id="Email"
id="email"
{...register("email")}
className="form-control form-control-sm"
placeholder="example@domain.com"
@ -313,12 +323,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
aria-describedby="Email"
disabled={!!currentEmployee?.email}
/>
{errors.Email && (
{errors.email && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.Email.message}
{errors.email.message}
</div>
)}
</div>
@ -327,19 +337,19 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<input
type="text"
keyboardType="numeric"
id="PhoneNumber"
id="phoneNumber"
{...register("phoneNumber")}
className="form-control form-control-sm"
placeholder="Phone Number"
inputMode="numeric"
maxLength={10}
/>
{errors.PhoneNumber && (
{errors.phoneNumber && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.PhoneNumber.message}
{errors.phoneNumber.message}
</div>
)}
</div>
@ -353,7 +363,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<select
className="form-select form-select-sm "
{...register("gender")}
id="Gender"
id="gender"
aria-label=""
>
<option disabled value="">
@ -364,12 +374,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<option value="Other">Other</option>
</select>
</div>
{errors.Gender && (
{errors.gender && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.Gender.message}
{errors.gender.message}
</div>
)}
</div>
@ -381,15 +391,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
className="form-control form-control-sm"
type="date"
{...register("birthDate")}
id="BirthDate"
id="birthDate"
/>
</div>
{errors.BirthDate && (
{errors.birthDate && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.BirthDate.message}
{errors.birthDate.message}
</div>
)}
</div>
@ -401,15 +411,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
className="form-control form-control-sm"
type="date"
{...register("joiningDate")}
id="JoiningDate"
id="joiningDate"
/>
</div>
{errors.JoiningDate && (
{errors.joiningDate && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.JoiningDate.message}
{errors.joiningDate.message}
</div>
)}
</div>
@ -419,7 +429,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<div className="form-text text-start">Current Address</div>
<textarea
id="CurrentAddress"
id="currentAddress"
className="form-control form-control-sm"
placeholder="Current Address"
aria-label="Current Address"
@ -429,7 +439,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
onChange={(e) => {
setCurrentAddressLength(e.target.value.length);
// let react-hook-form still handle it
register("CurrentAddress").onChange(e);
register("currentAddress").onChange(e);
}}
></textarea>
<div className="text-end muted">
@ -438,12 +448,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
{500 - currentAddressLength} characters left
</small>
</div>
{errors.CurrentAddress && (
{errors.currentAddress && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.CurrentAddress.message}
{errors.currentAddress.message}
</div>
)}
</div>
@ -453,7 +463,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
</div>
<textarea
id="PermanentAddress"
id="permanentAddress"
className="form-control form-control-sm"
placeholder="Permanent Address"
aria-label="Permanent Address"
@ -462,7 +472,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
maxLength={500}
onChange={(e) => {
setPermanentAddressLength(e.target.value.length);
register("PermanentAddress").onChange(e);
register("permanentAddress").onChange(e);
}}
></textarea>
<div className="text-end muted">
@ -470,12 +480,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
{500 - permanentAddressLength} characters left
</small>
</div>
{errors.PermanentAddress && (
{errors.permanentAddress && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.PermanentAddress.message}
{errors.permanentAddress.message}
</div>
)}
</div>
@ -493,7 +503,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<select
className="form-select form-select-sm"
{...register("jobRoleId")}
id="JobRoleId"
id="jobRoleId"
aria-label=""
>
<option disabled value="">
@ -506,12 +516,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
))}
</select>
</div>
{errors.JobRoleId && (
{errors.jobRoleId && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.JobRoleId.message}
{errors.jobRoleId.message}
</div>
)}
</div>
@ -523,16 +533,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text"
{...register("emergencyContactPerson")}
className="form-control form-control-sm"
id="EmergencyContactPerson"
id="emergencyContactPerson"
maxLength={50}
placeholder="Contact Person"
/>
{errors.EmergencyContactPerson && (
{errors.emergencyContactPerson && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.EmergencyContactPerson.message}
{errors.emergencyContactPerson.message}
</div>
)}
</div>
@ -544,17 +554,17 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text"
{...register("emergencyPhoneNumber")}
className="form-control form-control-sm phone-mask"
id="EmergencyPhoneNumber"
id="emergencyPhoneNumber"
placeholder="Phone Number"
inputMode="numeric"
maxLength={10}
/>
{errors.EmergencyPhoneNumber && (
{errors.emergencyPhoneNumber && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.EmergencyPhoneNumber.message}
{errors.emergencyPhoneNumber.message}
</div>
)}
</div>
@ -567,14 +577,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text"
{...register("aadharNumber")}
className="form-control form-control-sm"
id="AadharNumber"
id="aadharNumber"
placeholder="AADHAR Number"
maxLength={12}
inputMode="numeric"
/>
{errors.AadharNumber && (
{errors.aadharNumber && (
<div className="danger-text text-start">
{errors.AadharNumber.message}
{errors.aadharNumber.message}
</div>
)}
</div>
@ -585,16 +595,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="text"
{...register("panNumber")}
className="form-control form-control-sm"
id="PanNumber"
id="panNumber"
placeholder="PAN Number"
maxLength={10}
/>
{errors.PanNumber && (
{errors.panNumber && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.PanNumber.message}
{errors.panNumber.message}
</div>
)}
</div>

2
src/components/Layout/LayoutMenu.tsx
View File

@ -58,7 +58,7 @@ const LayoutMenu = () => {
</g>
</svg>
</span>
<span className="app-brand-text demo menu-text fw-bolder ms-2">Sneat</span>
<span className="app-brand-text demo menu-text fw-bolder ms-2">Marco</span>
</a>
<a href="javascript:void(0);" className="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">

34
src/components/Project/AboutProject.jsx
View File

@ -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">
<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>{data.projectAddress}</span>
<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>
{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>

698
src/components/Project/AssignRole.jsx
View File

@ -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];
} else {
updatedSelection = prevSelected.filter((id) => id !== employeeId);
if (isChecked) {
// Add employee if checked and not already in the list
if (!updatedSelectedEmployees.includes(user.id)) {
updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
}
field.onChange(updatedSelection);
return updatedSelection;
});
};
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");
} else {
// Remove employee if unchecked
updatedSelectedEmployees = updatedSelectedEmployees.filter(
(id) => id !== user.id
);
}
// Update the form state with the new list of selected employees
setValue("selectedEmployees", updatedSelectedEmployees);
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation here
};
// 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,260 +199,353 @@ 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">
{[
assignData?.building?.name,
assignData?.floor?.floorName,
assignData?.workArea?.areaName,
assignData?.workItem?.workItem?.activityMaster?.activityName,
]
.filter(Boolean)
.map((item, index, array) => (
<span key={index} className="d-flex align-items-center">
{item}
{index < array.length - 1 && (
<i className="bx bx-chevron-right mx-2"></i>
)}
</span>
))}
</p>
<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,
]
.filter(Boolean) // Filter out any undefined/null values
.map((item, index, array) => (
<span key={index} className="d-flex align-items-center">
{item}
{index < array.length - 1 && (
<i className="bx bx-chevron-right mx-2"></i>
)}
</span>
))}
</span>
</p>
<form onSubmit={handleSubmit(onSubmit)}>
<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=""
>
{loading && data ? (
"Loading..."
) : (
<>
<option value="all">All</option>
{jobRoleData?.map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
))}
</>
)}
</select>
</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>
)}
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-label text-start">
<div className="row mb-1">
<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"
>
<i className="bx bx-filter bx-lg text-primary"></i>
</a>
<div className="row">
<div className="col-12 col-md-8 h-sm-25 overflow-auto">
{selectedRole !== "" && (
<div className="row mb-2">
<div className="col-sm-12">
<div className="row">
{filteredEmployees?.map((emp) => {
const jobRole = jobRoleData?.find(
(role) => role?.id === emp?.jobRoleId
);
return (
<div
key={emp.id}
className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
<ul className="dropdown-menu p-2 text-capitalize">
<li key="all">
<button
type="button"
className="dropdown-item py-1"
onClick={() =>
handleRoleChange({
target: { value: "all" },
})
}
>
<div className="form-check text-start p-0">
<div className="li-wrapper d-flex justify-content-start align-items-start">
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>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 h-sm-25 overflow-auto mt-2">
{selectedRole !== "" && (
<div className="row">
{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
);
return (
<div
key={emp.id}
className="col-6 col-md-4 col-lg-3 mb-3"
>
<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 className="col-12">
<p className="text-center">No employees found for the selected role.</p>
</div>
)}
</div>
)}
</div>
</div>
<div
className="col-12 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{watch("selectedEmployees")?.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{watch("selectedEmployees")?.map((empId) => {
const emp = employees.find(
(emp) => emp.id === empId
);
return (
emp && (
<span
key={empId}
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
>
{emp.firstName} {emp.lastName}
<p
type="button"
className=" btn-close-white p-0 m-0"
aria-label="Close"
onClick={() => {
const updatedSelected = watch(
"selectedEmployees"
).filter((id) => id !== empId);
setValue(
"selectedEmployees",
updatedSelected
);
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation on removing badge
}}
>
<i className="icon-base bx bx-x icon-md "></i>
</p>
</span>
)
);
})}
</div>
</div>
</div>
)}
</div>
<div
className="col-12 col-md-4 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{selectedEmployees.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{selectedEmployees.map((empId) => {
const emp = employees.find(
(emp) => emp.id === empId
);
return (
<span
key={empId}
className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-1 mb-2"
>
{emp.firstName} {emp.lastName}
<p
type="button"
className=" btn-close-white p-0 m-0"
aria-label="Close"
onClick={() => {
removeEmployee(empId);
setValue(
"selectedEmployees",
selectedEmployees.filter(
(id) => id !== empId
)
);
}}
>
<i className="icon-base bx bx-x icon-md "></i>
</p>
</span>
);
})}
</div>
</div>
)}
</div>
</div>
)}
</div>
<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>
{!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" }}
>
&nbsp;
<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-2 px-1 mb-2 text-start">
<label
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
htmlFor="inlineCheckbox1"
>
<span>Target for Today</span>&nbsp;<span style={{ marginLeft: '46px' }}>:</span>
</label>
</div>
<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-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" }}
>
&nbsp;
<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>
)}
{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-check-label ms-2"
for="inlineCheckbox1"
className="form-text fs-7 m-1 text-lg text-dark"
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
>
{assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork}
</label>
</div>
<div className="form-check form-check-inline col-sm-2 col">
<label for="defaultFormControlInput" className="form-label">
Target
Description
</label>
<Controller
name="plannedTask"
name="description"
control={control}
render={({ field }) => (
<input
type="text"
className="form-control form-control-xs"
<textarea
{...field}
id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp"
className="form-control"
id="descriptionTextarea" // Changed id for better accessibility
rows="2"
/>
)}
/>
{errors.description && (
<div className="danger-text">
{errors.description.message}
</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>
)}
<label for="exampleFormControlTextarea1" className="form-label">
Description
</label>
<Controller
name="description"
control={control}
render={({ field }) => (
<textarea
{...field}
className="form-control"
id="exampleFormControlTextarea1"
rows="2"
/>
)}
/>
{errors.description && (
<div className="danger-text">
{errors.description.message}
{/* 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
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={closedModel}
>
Cancel
</button>
</div>
)}
<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
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={closedModel}
>
Cancel
</button>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
@ -398,4 +553,5 @@ const AssignRoleModel = ({ assignData, onClose }) => {
</div>
);
};
export default AssignRoleModel;

14
src/components/Project/Infrastructure/BuildingModel.jsx
View File

@ -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;

90
src/components/Project/Infrastructure/EditActivityModal.jsx
View File

@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useActivitiesMaster } from "../../../hooks/masterHook/useMaster";
import { useActivitiesMaster, useWorkCategoriesMaster } from "../../../hooks/masterHook/useMaster";
import { useProjectDetails } from "../../../hooks/useProjects";
import { useDispatch, useSelector } from "react-redux";
import ProjectRepository from "../../../repositories/ProjectRepository";
@ -18,6 +18,7 @@ import showToast from "../../../services/toastService";
const taskSchema = z
.object({
activityID: z.string().min(1, "Activity is required"),
workCategoryId: z.string().min(1, "Work Category is required"),
plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
completedWork: z.number().min(0, "Completed Work must be greater than 0"),
})
@ -43,17 +44,21 @@ const EditActivityModal = ({
);
const defaultModel = {
activityID: 0,
workCategoryId: 0,
plannedWork: 0,
completedWork: 0,
};
const {projects_Details, refetch} = useProjectDetails( selectedProject );
const [ActivityUnit,setActivityUnit]= useState("")
const { projects_Details, refetch } = useProjectDetails(selectedProject);
const [ActivityUnit, setActivityUnit] = useState("");
const { activities, loading, error } = useActivitiesMaster();
const { categories, categoryLoading, categoryError } =
useWorkCategoriesMaster();
const [formData, setFormData] = useState(defaultModel);
const [selectedActivity, setSelectedActivity] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [activityData, setActivityData] = useState([]);
const [categoryData, setCategoryData] = useState([]);
const dispatch = useDispatch();
const {
@ -70,13 +75,22 @@ const EditActivityModal = ({
});
const handleActivityChange = (e) => {
const selectedId = Number(e.target.value);
const selectedId = String(e.target.value);
const selected = activityData.find((a) => a.id === selectedId);
setSelectedActivity(selected || null);
setValue("activityID", selectedId);
};
const onSubmitForm = async (data) => {
const handleCategoryChange = (e) => {
const selectedId = String(e.target.value);
const category = categoryData.find((b) => b.id === selectedId);
setSelectedCategory(category || null);
setValue("workCategoryId", selectedId);
};
const onSubmitForm = async ( data ) =>
{
setIsSubmitting(true)
const updatedProject = { ...projects_Details };
const finalData = {
...data,
@ -142,13 +156,17 @@ const EditActivityModal = ({
});
resetForm();
dispatch( refreshData( true ) );
setIsSubmitting(false)
showToast("Activity Updated Successfully","success")
onClose();
}
})
.catch((error) => {
showToast(error.message, "error");
.catch( ( error ) =>
{
setIsSubmitting(false)
const message = error.response.data.message || error.message || "Error Occured During Api Call"
showToast( message, "error" );
});
};
@ -161,6 +179,8 @@ const EditActivityModal = ({
useEffect(() => {
reset({
activityID: workItem?.workItem?.activityId || workItem?.activityId || 0,
workCategoryId:
workItem?.workItem?.workCategoryId || workItem?.workCategoryId || 0,
plannedWork:
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
completedWork:
@ -171,14 +191,13 @@ const EditActivityModal = ({
const ISselectedActivity = watch("activityID");
useEffect(() => {
if( ISselectedActivity ){
if (ISselectedActivity) {
const selected = activities.find((a) => a.id === ISselectedActivity);
setSelectedActivity( selected || null );
setActivityUnit(selected?.unitOfMeasurement)
}
}, [ ISselectedActivity,activities] );
setSelectedActivity(selected || null);
setActivityUnit(selected?.unitOfMeasurement);
}
}, [ISselectedActivity, activities]);
return (
<div className="modal-dialog modal-lg modal-simple modal-edit-user">
<div className="modal-content">
@ -273,6 +292,45 @@ const EditActivityModal = ({
)}
</div>
{/* Select Category */}
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="activityID">
Select Work Category
</label>
<select
id="workCategoryId"
className="form-select form-select-sm"
{...register("workCategoryId")}
>
{loading ? (
<option value="">Loading...</option>
) : (
<option disabled>Select Category</option>
)}
{categories &&
categories.length > 0 &&
categories
.slice()
.sort((a, b) =>
(a.name || "").localeCompare(
b.name || ""
)
)
.map((category) => (
<option key={category.id} value={category.id}>
{category.name}
</option>
))}
{!loading && categories.length === 0 && (
<option disabled>No categories available</option>
)}
</select>
{errors.workCategoryId && (
<p className="danger-text">{errors.workCategoryId.message}</p>
)}
</div>
{/* Planned Work */}
{/* {ISselectedActivity && ( */}
<div className="col-5 col-md-5">
@ -327,7 +385,7 @@ const EditActivityModal = ({
{/* )} */}
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3" disabled={activities.length === 0}>
<button type="submit" className="btn btn-sm btn-primary me-3" disabled={activities.length === 0 || isSubmitting}>
{isSubmitting ? "Please Wait.." : "Edit Task"}
</button>
<button

13
src/components/Project/Infrastructure/Floor.jsx
View File

@ -13,10 +13,17 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
/>
))
) : (
<tr>
<tr>
<td colSpan="4" className="text-start table-cell">
<div className="row ps-2">
<div className="col-6">
<div className="row ps-2">
{/* <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
<button
className="btn me-2"
>
</button>
</div> */}
<div className="col-12 ps-8">
<div className="row">
<div className="col">
{" "}

147
src/components/Project/Infrastructure/FloorModel.jsx
View File

@ -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,63 +157,57 @@ const FloorModel = ({
</div>
{formData.buildingId !== "0" && (
<div className="col-12 col-md-12">
<label className="form-label">Select Floor</label>
<select
id="id"
className="select2 form-select form-select-sm"
aria-label="Select Floor"
{...register("id")}
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]
.filter((floor) => floor?.floorName)
.sort((a, b) => {
const nameA = a.floorName || "";
const nameB = b.floorName || "";
return nameA?.localeCompare(nameB);
})
.map((floor) => (
<option key={floor.id} value={floor.id}>
{floor.floorName}
</option>
))}
{selectedBuilding?.floors?.length === 0 && (
<option disabled>No floors found</option>
<>
<div className="col-12 col-md-12">
<label className="form-label">Select Floor</label>
<select
id="id"
className="select2 form-select form-select-sm"
aria-label="Select Floor"
{...register("id")}
onChange={handleFloorChange}
>
<option value="0">Add New Floor</option>
{selectedBuilding?.floors?.length > 0 &&
[...selectedBuilding.floors]
.filter((floor) => floor?.floorName)
.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>
)}
</select>
{errors.id && (
<p className="text-danger">{errors.id.message}</p>
)}
</select>
{errors.id && (
<p className="text-danger">{errors.id.message}</p>
)}
</div>
)}
</div>
{formData.buildingId !== "0" && (
<div className="col-12 col-md-12">
<label className="form-label" >
{formData.id !== "0" ? "Modify " : "Enter "} Floor Name
</label>
<input
type="text"
id="floorName"
className="form-control form-control-sm me-2"
placeholder="Floor Name"
{...register("floorName")}
/>
{errors.floorName && (
<p className="text-danger">{errors.floorName.message}</p>
)}
</div>
<div className="col-12 col-md-12">
<label className="form-label">
{formData.id !== "0" ? "Modify " : "Enter "} Floor Name
</label>
<input
type="text"
id="floorName"
className="form-control form-control-sm me-2"
placeholder="Floor Name"
{...register("floorName")}
/>
{errors.floorName && (
<p className="text-danger">
{errors.floorName.message}
</p>
)}
</div>
</>
)}
<div className="col-12 text-center">

2
src/components/Project/Infrastructure/InfraTable.jsx
View File

@ -31,7 +31,7 @@ const InfraTable = ({ buildings }) => {
{
building: null,
floor: {
id: data.id || "0",
id: data.id || null,
floorName: data.floorName,
buildingId: data.buildingId,
},

125
src/components/Project/Infrastructure/TaskModel.jsx
View File

@ -2,23 +2,28 @@ import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {useActivitiesMaster} from "../../../hooks/masterHook/useMaster";
import {
useActivitiesMaster,
useWorkCategoriesMaster,
} from "../../../hooks/masterHook/useMaster";
const taskSchema = z.object({
buildingID: z.string().min(1, "Building is required"),
floorId: z.string().min(1, "Floor is required"),
workAreaId: z.string().min(1, "Work Area is required"),
activityID: z.string().min(1, "Activity is required"),
workCategoryId: z.string().min(1, "Work Category is required"),
plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
completedWork: z.number().min(0, "Completed Work must be greater than 0"),
});
const defaultModel = {
id: null,
buildingID:"0",
buildingID: "0",
floorId: "0",
workAreaId: "0",
activityID: null,
workCategoryId: "",
plannedWork: 0,
completedWork: 0,
};
@ -30,15 +35,18 @@ const TaskModel = ({
onClearComplete,
onClose,
}) => {
const [formData, setFormData] = useState(defaultModel);
const [selectedBuilding, setSelectedBuilding] = useState(null);
const [selectedFloor, setSelectedFloor] = useState(null);
const [selectedWorkArea, setSelectedWorkArea] = useState(null);
const [selectedActivity, setSelectedActivity] = useState(null);
const [selectedCategory, setSelectedCategory] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [activityData, setActivityData] = useState([]);
const {activities, loading, error} = useActivitiesMaster();
const [categoryData, setCategoryData] = useState([]);
const { activities, loading, error } = useActivitiesMaster();
const { categories, categoryLoading, categoryError } =
useWorkCategoriesMaster();
const {
register,
@ -79,6 +87,7 @@ const TaskModel = ({
floorId: value,
workAreaId: 0,
activityID: 0,
workCategoryId: categoryData?.[0]?.id?.toString() ?? "",
}));
};
@ -104,13 +113,24 @@ const TaskModel = ({
}));
};
const onSubmitForm = async ( data ) =>
{
const handleCategoryChange = (e) => {
const { value } = e.target;
const category = categoryData.find((b) => b.id === String(value));
setSelectedCategory(category);
reset((prev) => ({
...prev,
workCategoryId: String(value),
}));
};
const onSubmitForm = async (data) => {
console.log(data);
setIsSubmitting(true);
await onSubmit(data);
setValue("plannedWork", 0);
setValue( "completedWork", 0 );
setValue("activityID",0)
setValue("completedWork", 0);
setValue("activityID", 0);
setValue("workCategoryId", categoryData?.[0]?.id?.toString() ?? "");
setIsSubmitting(false);
};
@ -120,15 +140,32 @@ const TaskModel = ({
setSelectedFloor(null);
setSelectedWorkArea(null);
setSelectedActivity(null);
setSelectedCategory(categoryData?.[0]?.id?.toString() ?? "");
reset(defaultModel);
};
useEffect(() => {
if (!loading && Array.isArray(activities) && activities.length > 0) {
setActivityData(activities);
}
}, [activities, loading]);
useEffect(() => {
if (
!categoryLoading &&
Array.isArray(categories) &&
categories.length > 0
) {
const newCategories = categories?.slice()?.sort((a, b) => {
const nameA = a?.name || "";
const nameB = b?.name || "";
return nameA.localeCompare(nameB);
});
setCategoryData(newCategories);
setSelectedCategory(newCategories[0])
}
}, [categories, categoryLoading]);
return (
<div className="modal-dialog modal-lg modal-simple modal-edit-user">
<div className="modal-content">
@ -247,9 +284,7 @@ const TaskModel = ({
{selectedWorkArea && (
<div className="col-12 col-md-12">
<label className="form-label" >
Select Activity
</label>
<label className="form-label">Select Activity</label>
<select
id="activityID"
className="form-select form-select-sm"
@ -257,28 +292,25 @@ const TaskModel = ({
onChange={handleActivityChange}
>
<option value="0">Select Activity</option>
{activityData && activityData.length > 0 && (
{activityData &&
activityData.length > 0 &&
activityData
?.slice()
?.sort( ( a, b ) =>
{
?.sort((a, b) => {
const nameA = a?.activityName || "";
const nameB = b?.activityName || "";
return nameA.localeCompare( nameB );
} )
?.map( ( activity ) => (
return nameA.localeCompare(nameB);
})
?.map((activity) => (
<option key={activity.id} value={activity.id}>
{
activity.activityName ||
`Unnamed (id: ${ activity.id })`}
{activity.activityName ||
`Unnamed (id: ${activity.id})`}
</option>
) )
) }
{(!loading && activities.length === 0 )&& (
))}
{!loading && activities.length === 0 && (
<option disabled>No activities available</option>
)}
{loading && ( <option disabled>Loading...</option>)}
{loading && <option disabled>Loading...</option>}
</select>
{errors.activityID && (
@ -287,7 +319,38 @@ const TaskModel = ({
</div>
)}
{selectedActivity && (
{selectedWorkArea && (
<div className="col-12 col-md-12">
<label className="form-label">Select Work Category</label>
<select
id="workCategoryId"
className="form-select form-select-sm"
{...register("workCategoryId")}
onChange={handleCategoryChange}
>
{categoryData &&
categoryData.length > 0 &&
categoryData
?.map((category) => (
<option key={category.id} value={category.id}>
{category.name || `Unnamed (id: ${category.id})`}
</option>
))}
{!categoryLoading && categories.length === 0 && (
<option disabled>No activities available</option>
)}
{categoryLoading && <option disabled>Loading...</option>}
</select>
{errors.workCategoryId && (
<p className="danger-text">
{errors.workCategoryId.message}
</p>
)}
</div>
)}
{selectedActivity && selectedCategory && (
<div className="col-5 col-md-5">
<label className="form-label" htmlFor="plannedWork">
{formData.id !== "0" ? "Modify " : "Enter "} Planned Work
@ -304,7 +367,7 @@ const TaskModel = ({
</div>
)}
{selectedActivity && (
{selectedActivity && selectedCategory && (
<div className="col-5 col-md-5">
<label className="form-label" htmlFor="completedWork">
{formData.id !== "0" ? "Modify " : "Enter "} Completed Work
@ -324,7 +387,7 @@ const TaskModel = ({
)}
{/* Unit */}
{selectedActivity && (
{selectedActivity && selectedCategory && (
<div className="col-2 col-md-2">
<label className="form-label" htmlFor="unit">
Unit
@ -340,9 +403,7 @@ const TaskModel = ({
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isSubmitting
? "Please Wait.."
: "Add Task"}
{isSubmitting ? "Please Wait.." : "Add Task"}
</button>
<button
type="button"

255
src/components/Project/Infrastructure/WorkArea.jsx
View File

@ -2,34 +2,40 @@ import React, { useEffect, useState } from "react";
import WorkItem from "./WorkItem";
import { useProjectDetails } from "../../../hooks/useProjects";
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
import {useDispatch} from "react-redux";
import {refreshData} from "../../../slices/localVariablesSlice";
import { useDispatch } from "react-redux";
import { refreshData } from "../../../slices/localVariablesSlice";
import ProjectRepository from "../../../repositories/ProjectRepository";
import showToast from "../../../services/toastService";
import {useHasUserPermission} from "../../../hooks/useHasUserPermission";
import {ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA, MANAGE_TASK} from "../../../utils/constants";
import {useParams} from "react-router-dom";
const WorkArea = ({ workArea, floor, forBuilding }) => {
const [ workItems, setWorkItems ] = useState( [] );
const dispatch = useDispatch()
const [Project,setProject] = useState()
const [workItems, setWorkItems] = useState([]);
const dispatch = useDispatch();
const [ Project, setProject ] = useState();
const {projectId} = useParams();
const ManageTasks = useHasUserPermission(MANAGE_TASK);
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
const ManageAndAssignTak = useHasUserPermission( ASSIGN_REPORT_TASK );
useEffect(() => {
const project = getCachedData( "projectInfo" );
setProject(project)
const project = getCachedData("projectInfo");
setProject(project);
if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
const building = project.buildings?.find((b) => b.id === forBuilding.id);
const floors = building?.floors?.find((f) => f.id === floor.id);
const workAreas = floor?.workAreas?.find((wa) => wa.id === workArea.id);
setWorkItems(workAreas?.workItems || []);
}, [ workArea, floor, floor ] );
}, [workArea, floor, floor]);
const HanldeDeleteActivity = async (workItemId) => {
try
{
const HanldeDeleteActivity = async (workItemId) => {
try {
const updatedProject = { ...Project.data };
const response = await ProjectRepository.deleteProjectTask( workItemId);
const response = await ProjectRepository.deleteProjectTask(workItemId);
const newProject = {
...updatedProject,
buildings: updatedProject?.buildings.map((building) =>
@ -59,107 +65,166 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
: building
),
};
cacheData("projectInfo", {
projectId: newProject.id,
data: newProject,
} );
});
dispatch(refreshData(true));
showToast("Activity Deleted Successfully", "success");
} catch (error) {
const message =
error.response?.data?.message ||
error.message ||
"An unexpected error occurred";
showToast(message, "error");
showToast(message, "error");
}
};
useEffect(() => {
const toggleButtons = document.querySelectorAll(".accordion-button");
toggleButtons.forEach((btn) => {
const icon = btn.querySelector(".toggle-icon");
btn.addEventListener("click", () => {
setTimeout(() => {
if (btn.classList.contains("collapsed")) {
icon.classList.remove("bx-minus-circle");
icon.classList.add("bx-plus-circle");
} else {
icon.classList.remove("bx-plus-circle");
icon.classList.add("bx-minus-circle");
}
}, 300); // allow Bootstrap collapse to complete
});
});
return () => {
toggleButtons.forEach((btn) => {
btn.removeEventListener("click", () => {});
});
};
}, []);
return (
<React.Fragment key={workArea.id}>
<tr>
<td colSpan="4" className="text-start table-cell">
<div className="row ps-2">
<div className="col-6">
<div className="row">
<div className="col">
{" "}
<span className="fw-semibold text-primary">
Floor:&nbsp;
</span>{" "}
<span className="fw-normal text-darkgreen">
{floor.floorName}
</span>
<td colSpan="4" className="p-0">
<div
className="accordion border-none"
id={`accordion-${workArea.id}`}
>
<div className="accordion-item background border-0">
{/* Accordion Header */}
<p
className="accordion-header mb-0"
id={`heading-${workArea.id}`}
>
<button
className={`accordion-button text-start px-2 py-2 custom-accordion-btn ${
workItems && workItems.length > 0 ? "collapsed" : "disabled"
}`}
type="button"
data-bs-toggle={
workItems && workItems.length > 0 ? "collapse" : ""
}
data-bs-target={
workItems && workItems.length > 0
? `#collapse-${workArea.id}`
: undefined
}
aria-expanded="false"
aria-controls={`collapse-${workArea.id}`}
disabled={!(workItems && workItems.length > 0)}
>
<i
className={`bx me-2 toggle-icon ${
workItems && workItems.length > 0
? "bx-plus-circle"
: "bx-block"
}`}
style={{
fontSize: "1.2rem",
color:
workItems && workItems.length > 0 ? "" : "transparent",
}}
></i>
<div className="d-flex justify-content-start gap-12">
<div className="d-flex">
<span className="fw-semibold small">Floor:&nbsp;</span>
<span className="fw-normal text-darkgreen small">
{floor.floorName}
</span>
</div>
<div className="text-start ">
<span className="fw-semibold text-primary small">
Work Area:&nbsp;
</span>
<span className="fw-normal text-darkgreen small">
{workArea.areaName}
</span>
</div>
</div>
</button>
</p>
{/* Accordion Body */}
{workItems && workItems.length > 0 && (
<div
id={`collapse-${workArea.id}`}
className="accordion-collapse collapse"
aria-labelledby={`heading-${workArea.id}`}
>
<div className="accordion-body px-1">
<table className="table table-sm mx-1">
<thead>
<tr>
<th className="infra-activity-table-header-first">
Activity
</th>
<th className="infra-activity-table-header d-sm-table-cell d-md-none">
Status
</th>
<th className="infra-activity-table-header d-none d-md-table-cell">
Category
</th>
<th className="infra-activity-table-header d-none d-md-table-cell">
Completed/Planned
</th>
<th className="infra-activity-table-header">
Progress
</th>
{( ManageInfra || ( !projectId && ManageAndAssignTak ) ) && (
<th className="infra-activity-table-header text-end">
<span className="px-2">Actions</span>
</th>
)}
</tr>
</thead>
<tbody className="table-border-bottom-0">
{workArea.workItems.map((workItem) => (
<WorkItem
key={workItem.workItemId}
workItem={workItem}
forBuilding={forBuilding}
forFloor={floor}
forWorkArea={workArea}
deleteHandleTask={HanldeDeleteActivity}
/>
))}
</tbody>
</table>
</div>
</div>
<div className="col">
<span className="ms-10 fw-semibold text-primary">
Work Area:&nbsp;
</span>{" "}
<span className=" fw-normal text-darkgreen">
{workArea.areaName}
</span>
</div>
</div>
)}
</div>
</div>
</td>
</tr>
{workItems && workItems.length > 0 && (
<tr className="overflow-auto">
<td colSpan={4}>
<table className="table mx-1">
<thead>
<tr>
<th className="infra-activity-table-header-first">
Activity
</th>
{/* for mobile view */}
<th className="infra-activity-table-header d-sm-none d-sm-table-cell">
Status
</th>
{/* for greather than mobile view ************* */}
<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
</th>
{/* ************************** */}
<th className="infra-activity-table-header">Progress</th>
<th className="infra-activity-table-header text-end ">
<span className="px-3">Actions</span>
</th>
</tr>
</thead>
<tbody className="table-border-bottom-0">
{workArea?.workItems && workArea.workItems.length > 0 ? (
workArea.workItems.map((workItem) => (
<WorkItem
key={workItem.workItemId}
workItem={workItem}
forBuilding={forBuilding}
forFloor={floor}
forWorkArea={workArea}
deleteHandleTask={HanldeDeleteActivity}
/>
))
) : (
<tr>
<td colSpan="4" className="text-center">
No Data
</td>
</tr>
)}
</tbody>
</table>
</td>
</tr>
)}
{!workItems && <p>No item</p>}
</React.Fragment>
);
};

199
src/components/Project/Infrastructure/WorkItem.jsx
View File

@ -3,8 +3,11 @@ import AssignRoleModel from "../AssignRole";
import { useParams } from "react-router-dom";
import EditActivityModal from "./EditActivityModal";
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";
import {
ASSIGN_REPORT_TASK,
MANAGE_PROJECT_INFRA,
MANAGE_TASK,
} from "../../../utils/constants";
import ConfirmModal from "../../common/ConfirmModal";
import ProjectRepository from "../../../repositories/ProjectRepository";
import { useProjectDetails } from "../../../hooks/useProjects";
@ -17,7 +20,7 @@ import {
import { useDispatch } from "react-redux";
import { refreshData } from "../../../slices/localVariablesSlice";
const WorkItem = ( {
const WorkItem = ({
key,
workItem,
forBuilding,
@ -33,6 +36,7 @@ const WorkItem = ( {
const [showModal2, setShowModal2] = useState(false);
const ManageTasks = useHasUserPermission(MANAGE_TASK);
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
const [loadingDelete, setLoadingDelete] = useState(false);
const project = getCachedData("projectInfo");
const dispatch = useDispatch();
@ -74,10 +78,9 @@ const WorkItem = ( {
const handleSubmit = async () => {
setLoadingDelete(true);
let WorkItemId = workItem.workItemId || workItem.id;
deleteHandleTask( WorkItemId );
deleteHandleTask(WorkItemId);
setLoadingDelete(false);
closeModalDelete();
};
const PlannedWork =
@ -139,6 +142,7 @@ const WorkItem = ( {
)}
<tr key={key}>
{/* Activity Name - always visible */}
<td className="text-start table-cell-small">
<i className="bx bx-right-arrow-alt"></i>
<span className="fw-light">
@ -148,8 +152,9 @@ const WorkItem = ( {
: "NA"}
</span>
</td>
{/* for mobile view */}
<td className="text-center d-sm-none d-sm-table-cell">
{/* Status - visible only on small screens */}
<td className="text-center d-sm-table-cell d-md-none">
{hasWorkItem
? NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
@ -160,22 +165,34 @@ const WorkItem = ( {
? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
: "NA"}
</td>
{/* for greather than mobile view ************* */}
{/* Category - visible on medium and above */}
<td className="text-center table-cell-small d-none d-md-table-cell">
<span className="fw-light">
{hasWorkItem
? NewWorkItem?.workItem?.workCategoryMaster?.name ||
workItem.workCategoryMaster?.name ||
"NA"
: "NA"}
</span>
</td>
<td className="text-center d-none d-md-table-cell">
{hasWorkItem
? NewWorkItem?.workItem?.plannedWork ??
workItem?.plannedWork ??
"NA"
? `${
NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
"0"
}/${
NewWorkItem?.workItem?.plannedWork ??
workItem?.plannedWork ??
"0"
}`
: "NA"}
</td>
<td className="text-center d-none d-md-table-cell">
{hasWorkItem
? NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
"NA"
: "NA"}
</td>
<td className="text-center" style={{ width: "15%" }}>
{/* Progress Bar - always visible */}
<td className="text-center " style={{ width: "15%" }}>
<div className="progress p-0">
<div
className="progress-bar"
@ -188,7 +205,9 @@ const WorkItem = ( {
),
height: "5px",
}}
aria-valuenow={NewWorkItem?.workItem?.completedWor}
aria-valuenow={
NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork
}
aria-valuemin="0"
aria-valuemax={
hasWorkItem
@ -198,66 +217,92 @@ const WorkItem = ( {
></div>
</div>
</td>
<td className="text-end align-middle">
<div className="dropdown w-auto d-inline-flex align-items-center gap-1">
{/* Reserve space for Assign button */}
<div style={{ width: "auto", minWidth: "60px" }}>
{!projectId && ManageTasks && PlannedWork !== CompletedWork ? (
<button
aria-label="Modify"
type="button"
className="btn p-0"
data-bs-toggle="modal"
data-bs-target="#project-modal"
onClick={openModal}
>
<span className="badge badge-md bg-label-primary me-1">
Assign
</span>
</button>
) : (
// Hidden placeholder to preserve layout
<span className="invisible">
<span className="badge badge-md bg-label-primary me-1">
Assign
</span>
</span>
{/* Actions - always visible */}
{(ManageInfra ||
(!projectId &&
ManageAndAssignTak &&
PlannedWork !== CompletedWork)) && (
<td className="text-end align-items-middle border-top">
{/* Desktop (md and up): inline icons */}
<div className="d-none d-md-flex justify-content-end gap-1 px-2">
{!projectId &&
ManageAndAssignTak &&
PlannedWork !== CompletedWork && (
<i
className="bx bx-user-plus text-primary cursor-pointer"
title="Assign"
onClick={openModal}
role="button"
></i>
)}
{ManageInfra && (
<>
<i
className="bx bxs-edit text-secondary cursor-pointer"
title="Edit"
onClick={showModal1}
role="button"
></i>
<i
className="bx bx-trash text-danger cursor-pointer"
title="Delete"
onClick={showModalDelete}
role="button"
></i>
</>
)}
</div>
{/* Edit and Delete buttons */}
{ManageInfra && (
<>
<button
aria-label="Modify"
type="button"
className="btn p-0"
onClick={showModal1}
>
<i
className="bx bxs-edit me-2 text-primary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Edit Activity"
></i>
</button>
<button
aria-label="Delete"
type="button"
className="btn p-0"
onClick={showModalDelete}
>
<i
className="bx bx-trash me-1 text-danger"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Delete Activity"
></i>
</button>
</>
)}
</div>
</td>
{/* Mobile (sm only): dropdown with icons */}
<div className="dropdown d-md-none text-center">
<i
className="bx bx-dots-vertical-rounded"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
title="Actions"
></i>
<ul className="dropdown-menu dropdown-menu-start">
{!projectId &&
ManageAndAssignTak &&
PlannedWork !== CompletedWork && (
<li>
<a
className="dropdown-item d-flex align-items-center"
onClick={openModal}
>
<i className="bx bx-user-plus text-primary me-2"></i>{" "}
Assign
</a>
</li>
)}
{ManageInfra && (
<>
<li>
<a
className="dropdown-item d-flex align-items-center"
onClick={showModal1}
>
<i className="bx bxs-edit text-secondary me-2"></i> Edit
</a>
</li>
<li>
<a
className="dropdown-item d-flex align-items-center"
onClick={showModalDelete}
>
<i className="bx bx-trash text-danger me-2"></i> Delete
</a>
</li>
</>
)}
</ul>
</div>
</td>
)}
</tr>
</>
);

20
src/components/Project/ManageProjectInfo.jsx
View File

@ -102,13 +102,21 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
const onSubmitForm = (updatedProject) => {
setLoading(true);
handleSubmitForm( updatedProject, setLoading,reset );
};
const handleCancel = () => {
reset({
id: project?.id || "",
name: project?.name || "",
contactPerson: project?.contactPerson || "",
projectAddress: project?.projectAddress || "",
startDate: formatDate(project?.startDate) || currentDate,
endDate: formatDate(project?.endDate) || currentDate,
projectStatusId: String(project?.projectStatusId || "00000000-0000-0000-0000-000000000000"),
});
onClose();
};
return (
<div
className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
@ -119,7 +127,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
<button
type="button"
className="btn-close"
onClick={onClose}
onClick={handleCancel}
aria-label="Close"
></button>
<div className="text-center mb-2">
@ -280,7 +288,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
<button
type="button"
className="btn btn-sm btn-label-secondary"
onClick={onClose}
onClick={handleCancel}
aria-label="Close"
>
Cancel

81
src/components/Project/MapUsers.jsx
View File

@ -14,9 +14,13 @@ const MapUsers = ({
assignedLoading,
setAssignedLoading,
}) => {
const { employeesList, loading: employeeLoading, error } = useAllEmployees(false);
const {
employeesList,
loading: employeeLoading,
error,
} = useAllEmployees(false);
const [selectedEmployees, setSelectedEmployees] = useState([]);
const [ searchText, setSearchText ] = useState( "" );
const [searchText, setSearchText] = useState("");
const handleAllocationData = Array.isArray(allocation) ? allocation : [];
@ -96,9 +100,8 @@ const MapUsers = ({
});
};
const handleSubmit = () =>
{
setAssignedLoading(true)
const handleSubmit = () => {
setAssignedLoading(true);
const selected = selectedEmployees
.filter((emp) => emp.isSelected)
.map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
@ -108,27 +111,33 @@ const MapUsers = ({
} else {
showToast("Please select Employee", "error");
}
};
return (
<>
<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">
{(filteredData.length > 0 ||
allocationEmployeesData.length > 0)&& (
<div className="input-group">
<input
type="search"
className="form-control form-control-sm"
placeholder="Search employees..."
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
)}
</div>
<div className="modal-header text-center">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<p className="m-0 fw-semibold fs-5">Assign Employee</p>
<div className="px-4 mt-4 col-md-4 text-start">
{(filteredData.length > 0 ||
allocationEmployeesData.length > 0) && (
<div className="input-group input-group-sm mb-2">
<input
type="search"
className="form-control"
placeholder="Search employees..."
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
)}
<p className="mb-0 small text-muted fw-semibold">Select Employee</p>
</div>
<div className="modal-body p-sm-4 p-0">
<table
className="datatables-users table border-top dataTable no-footer dtr-column "
@ -136,21 +145,28 @@ const MapUsers = ({
aria-describedby="DataTables_Table_0_info"
style={{ width: "100%" }}
>
<thead></thead>
<tbody>
{employeeLoading && allocationEmployeesData.length === 0 && (
<p>Loading...</p>
<tr>
<td>Loading..</td>
</tr>
)}
{!employeeLoading &&
allocationEmployeesData.length === 0 &&
filteredData.length === 0 && (
<p>All employee assigned to Project.</p>
<tr>
<td>All employee assigned to Project.</td>
</tr>
)}
{!employeeLoading && allocationEmployeesData.length > 0 && filteredData.length === 0 && (
<p>No matching employees found.</p>
)}
{!employeeLoading &&
allocationEmployeesData.length > 0 &&
filteredData.length === 0 && (
<tr>
<td>No matching employees found.</td>
</tr>
)}
{(filteredData.length > 0 ||
allocationEmployeesData.length > 0) &&
@ -169,14 +185,11 @@ const MapUsers = ({
</div>
<div className="modal-footer">
{(filteredData.length > 0 ||
allocationEmployeesData.length > 0) && (
<button
className="btn btn-sm btn-success"
onClick={handleSubmit}
>
{assignedLoading ? "Please Wait...":"Assign to Project"}
</button>
)}
allocationEmployeesData.length > 0) && (
<button className="btn btn-sm btn-success" onClick={handleSubmit}>
{assignedLoading ? "Please Wait..." : "Assign to Project"}
</button>
)}
<button
type="button"

9
src/components/Project/Teams.jsx
View File

@ -16,7 +16,7 @@ import ConfirmModal from "../common/ConfirmModal";
const Teams = ({ project }) => {
const dispatch = useDispatch();
dispatch(changeMaster("Job Role"));
const { data, loading } = useMaster();
const [isModalOpen, setIsModelOpen] = useState(false);
const [error, setError] = useState("");
@ -43,11 +43,9 @@ const Teams = ({ project }) => {
.then((response) => {
setEmployees(response.data);
setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
console.log(response)
setEmployeeLoading(false);
})
.catch((error) => {
console.error(error);
setError("Failed to fetch data.");
setEmployeeLoading(false);
});
@ -133,6 +131,11 @@ const Teams = ({ project }) => {
document.body.style.overflow = "auto";
};
useEffect(() => {
dispatch(changeMaster("Job Role"));
}, [dispatch]);
useEffect(() => {
fetchEmployees();
}, []);

4
src/components/common/DatePicker.jsx
View File

@ -23,9 +23,9 @@ const DatePicker = ({ onDateChange }) => {
return (
<div className="container mt-3">
<div className="mb-3">
<label htmlFor="flatpickr-single" className="form-label">
{/* <label htmlFor="flatpickr-single" className="form-label">
Select Date
</label>
</label> */}
<input
type="text"
id="flatpickr-single"

10
src/components/common/DateRangePicker.jsx
View File

@ -1,16 +1,20 @@
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, {
mode: "range",
dateFormat: "Y-m-d",
dateFormat: "Y-m-d", // Format for backend (actual input value)
altInput: true, // Enables a visually different field
altFormat: "d-m-Y",
defaultDate: [fifteenDaysAgo, today],
static: true,
clickOpens: true,

4
src/components/master/CreateJobRole.jsx
View File

@ -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"

307
src/components/master/CreateRole.jsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import { useFeatures } from "../../hooks/useMasterRole";
import { useForm } from 'react-hook-form';
@ -16,7 +16,7 @@ import showToast from "../../services/toastService";
const schema = z.object({
role: z.string().min(1, { message: "Role is required" }),
description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }),
.max(255, { message: "Description cannot exceed 255 characters" }),
selectedPermissions: z
.array(z.string())
@ -24,78 +24,94 @@ const schema = z.object({
});
const CreateRole = ({modalType,onClose}) => {
const[isLoading,setIsLoading] = useState(false)
const {masterFeatures} = useFeatures()
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
role: "",
description: "",
selectedPermissions: [],
},
});
const CreateRole = ({ modalType, onClose }) => {
const [isLoading, setIsLoading] = useState(false)
const popoverRefs = useRef([]);
const { masterFeatures } = useFeatures()
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
role: "",
description: "",
selectedPermissions: [],
},
});
const onSubmit = (values) => {
setIsLoading(true)
const result = {
role: values.role,
description: values.description,
featuresPermission: values.selectedPermissions.map((id) => ({
id,
isEnabled: true,
})),
};
MasterRespository.createRole(result).then((resp) => {
setIsLoading(false)
const cachedData = getCachedData("Application Role");
const updatedData = [...cachedData, resp.data];
cacheData("Application Role", updatedData);
showToast("Application Role Added successfully.", "success");
onClose()
}).catch((err) => {
showToast(err?.response?.data?.message, "error");
setIsLoading(false)
onClose()
})
const onSubmit = (values) => {
setIsLoading(true)
const result = {
role: values.role,
description: values.description,
featuresPermission: values.selectedPermissions.map((id) => ({
id,
isEnabled: true,
})),
};
const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255;
useEffect(() => {
setDescriptionLength(0);
}, []);
useEffect(() => {
popoverRefs.current.forEach((el) => {
if (el) {
new bootstrap.Popover(el, {
trigger: "focus",
placement: "right",
html: true,
content: el.getAttribute("data-bs-content"), // use inline content from attribute
});
}
});
}, [masterFeatures]);
MasterRespository.createRole(result).then((resp)=>{
setIsLoading(false)
const cachedData = getCachedData( "Application Role" );
const updatedData = [...cachedData, resp.data];
cacheData("Application Role", updatedData);
showToast( "Application Role Added successfully.", "success" );
onClose()
} ).catch( ( err ) =>
{
showToast(err?.response?.data?.message, "error");
setIsLoading( false )
onClose()
})
};
const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255;
useEffect(() => {
setDescriptionLength(0);
}, []);
return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="form-label">Role</label>
<input type="text"
{...register("role")}
className={`form-control ${errors.role ? 'is-invalids' : ''}`}
/>
{errors.role && <p className="text-danger">{errors.role.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<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"
{...register("role")}
className={`form-control ${errors.role ? 'is-invalids' : ''}`}
/>
{errors.role && <p className="text-danger">{errors.role.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<textarea
rows="3"
{...register("description")}
@ -110,75 +126,106 @@ useEffect(() => {
{maxDescriptionLength - descriptionLength} characters left
</div>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
<div className="col-12 col-md-12 border">
{masterFeatures.map((feature) => (
<React.Fragment key={feature.id}>
<div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
<div className="col-12 col-md-3 d-flex text-start align-items-start" style={{ wordWrap: 'break-word' }}>
<span className="fs">{feature.name}</span>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
<div className="col-12 col-md-1"></div>
<div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
{feature.featurePermissions.map((perm) => (
<div className="d-flex me-3 mb-2" key={perm.id}>
<label className="form-check-label" htmlFor={perm.id}>
<input
type="checkbox"
className="form-check-input mx-2"
id={perm.id}
value={perm.id}
{...register("selectedPermissions")}
/>
{perm.name}
</label>
</div>
<div className="col-12 col-md-12 border">
{masterFeatures.map((feature, featureIndex) => (
<React.Fragment key={feature.id}>
<div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
<div className="col-12 col-md-3 d-flex text-start align-items-start" style={{ wordWrap: 'break-word' }}>
<span className="fs">{feature.name}</span>
</div>
<div className="col-12 col-md-1"></div>
<div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
{feature.featurePermissions.map((perm, permIndex) => {
const refIndex = (featureIndex * 10) + permIndex;
return (
<div className="d-flex me-3 mb-2" key={perm.id}>
<label className="form-check-label" htmlFor={perm.id}>
<input
type="checkbox"
className="form-check-input mx-2"
id={perm.id}
value={perm.id}
{...register("selectedPermissions")}
/>
{perm.name}
</label>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div
key={refIndex}
ref={(el) =>
(popoverRefs.current[refIndex] = el)
}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center"
data-bs-toggle="popover" refIndex
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
data-bs-content={`
<div class="border border-secondary rounded custom-popover p-2 px-3">
${perm.description}
</div>
`}
>
&nbsp;
<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>
</div>
<hr className="hr my-1 py-1" />
</React.Fragment>
))}
{errors.selectedPermissions && (
<p className="text-danger">{errors.selectedPermissions.message}</p>
)}
{!masterFeatures && <p>Loading...</p>}
</div>
</div>
<hr className="hr my-1 py-1" />
</React.Fragment>
))}
{errors.selectedPermissions && (
<p className="text-danger">{errors.selectedPermissions.message}</p>
)}
{!masterFeatures && <p>Loading...</p>}
</div>
{
masterFeatures && (
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
>
Cancel
</button>
</div>
)
}
{
masterFeatures && (
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
>
Cancel
</button>
</div>
)
}
</form>
);
};

3
src/components/master/CreateWorkCategory.jsx
View File

@ -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>

3
src/components/master/EditJobRole.jsx
View File

@ -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"

217
src/components/master/EditRole.jsx
View File

@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
import { useForm ,Controller} from 'react-hook-form';
import React, { useEffect, useState, useRef } from "react";
import { useForm, Controller } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useFeatures} from "../../hooks/useMasterRole";
import { useFeatures } from "../../hooks/useMasterRole";
import { MasterRespository } from "../../repositories/MastersRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
@ -18,17 +18,18 @@ import showToast from "../../services/toastService";
const updateSchema = z.object({
role: z.string().min(1, { message: "Role is required" }),
description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }),
.max(255, { message: "Description cannot exceed 255 characters" }),
permissions: z.record(z.boolean()).refine((permission) => Object.values(permission).includes(true), {
message: "At least one permission must be selected",
message: "At least one permission must be selected",
}),
});
const EditMaster=({master,onClose})=> {
const [isLoading,setIsLoading] = useState(false)
const {masterFeatures} = useFeatures()
const EditMaster = ({ master, onClose }) => {
const [isLoading, setIsLoading] = useState(false)
const { masterFeatures } = useFeatures()
const popoverRefs = useRef([]);
const buildDefaultPermissions = () => {
const defaults = {};
@ -41,20 +42,16 @@ const EditMaster=({master,onClose})=> {
});
});
return defaults;
};
const initialPermissions = buildDefaultPermissions();
const {
register,
handleSubmit,
formState: { errors, dirtyFields },
setError,reset
setError, reset
} = useForm({
resolver: zodResolver(updateSchema),
defaultValues: {
@ -65,16 +62,16 @@ const EditMaster=({master,onClose})=> {
});
const onSubmit = (data) => {
setIsLoading(true)
setIsLoading(true)
const existingIds = new Set(
master?.item?.featurePermission?.map((p) => p.id)
);
const updatedPermissions = Object.entries(data.permissions)
.filter(([id, value]) => {
if (existingIds.has(id)) return true;
return (
value === true ||
(dirtyFields.permissions && dirtyFields.permissions[id])
@ -82,7 +79,7 @@ const EditMaster=({master,onClose})=> {
})
.map(([id, value]) => ({ id, isEnabled: value }));
if (updatedPermissions.length === 0) {
setError("permissions", {
type: "manual",
@ -92,30 +89,30 @@ const EditMaster=({master,onClose})=> {
}
const updatedRole = {
id:master?.item?.id,
id: master?.item?.id,
role: data.role,
description: data.description,
featuresPermission: updatedPermissions,
};
MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp)=>{
setIsLoading( false )
MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
setIsLoading(false)
const cachedData = getCachedData("Application Role");
if (cachedData) {
const updatedData = cachedData.map((role) =>
role.id === resp.data?.id ? { ...role, ...resp.data } : role
);
cacheData("Application Role", updatedData);
}
showToast( "Application Role Updated successfully.", "success" );
if (cachedData) {
const updatedData = cachedData.map((role) =>
role.id === resp.data?.id ? { ...role, ...resp.data } : role
);
cacheData("Application Role", updatedData);
}
showToast("Application Role Updated successfully.", "success");
setIsLoading(false)
onClose()
}).catch((Err)=>{
showToast( Err.message, "error" );
}).catch((Err) => {
showToast(Err.message, "error");
setIsLoading(false)
})
@ -129,26 +126,40 @@ const EditMaster=({master,onClose})=> {
});
setDescriptionLength(master?.item?.description?.length || 0);
}, [master, reset]);
const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
const maxDescriptionLength = 255;
useEffect(() => {
popoverRefs.current.forEach((el) => {
if (el) {
new bootstrap.Popover(el, {
trigger: "focus",
placement: "right",
html: true,
content: el.getAttribute("data-bs-content"), // use inline content from attribute
});
}
});
}, [masterFeatures]);
return (
<form className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="form-label">Role</label>
<input type="text"
{...register("role")}
className={`form-control ${errors.role ? 'is-invalid' : ''}`}
/>
{errors.role && <p className="text-danger">{errors.role.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<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"
{...register("role")}
className={`form-control ${errors.role ? 'is-invalid' : ''}`}
/>
{errors.role && <p className="text-danger">{errors.role.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<textarea
rows="3"
{...register("description")}
@ -164,47 +175,81 @@ const EditMaster=({master,onClose})=> {
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
</div>
<div className="col-12 col-md-12 mx-2s " >
{masterFeatures.map((feature, featureIndex) => (
<div className="row my-3" key={feature.id} style={{ marginLeft: "0px" }}>
<div className="col-12 col-md-12 mx-2s " >
{masterFeatures.map((feature) => (
<div className="row my-3" key={feature.id} style={{marginLeft:"0px"}}>
<div className="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
<span className="fs">{feature.name}</span>
</div>
<div className="col-12 col-md-1">
</div>
<div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
{feature.featurePermissions.map((perm) => (
<span className="fs">{feature.name}</span>
</div>
<div className="col-12 col-md-1">
</div>
<div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
{feature.featurePermissions.map((perm, permIndex) => {
const refIndex = (featureIndex * 10) + permIndex;
return (
<div className="d-flex me-3 mb-2" key={perm.id}>
<label className="form-check-label" htmlFor={perm.id}>
<input
type="checkbox"
className="form-check-input mx-2"
id={perm.id}
{...register(`permissions.${perm.id}`, {
value: initialPermissions[perm.id] || false
})}
/>
<label className="form-check-label" htmlFor={perm.id}>
<input
type="checkbox"
className="form-check-input mx-2"
id={perm.id}
{...register(`permissions.${perm.id}`, {
value: initialPermissions[perm.id] || false
})}
/>
{perm.name}
</label>
</div>
))}
</div>
</div>
))}
{errors.permissions && (
<p className="text-danger">{errors.permissions.message}</p>
)}
</div>
<div className="col-12 text-center">
<div style={{ display: 'flex', alignItems: 'center' }}>
<div
key={refIndex}
ref={(el) =>
(popoverRefs.current[refIndex] = el)
}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center"
data-bs-toggle="popover" refIndex
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
data-bs-content={`
<div class="border border-secondary rounded custom-popover p-2 px-3">
${perm.description}
</div>
`}
>
&nbsp;
<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>
</div>
))}
{errors.permissions && (
<p className="text-danger">{errors.permissions.message}</p>
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> {isLoading ? "Please Wait..." : "Submit"}</button>
<button
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
@ -213,9 +258,9 @@ const EditMaster=({master,onClose})=> {
Cancel
</button>
</div>
</form>
</form>
);
}

4
src/components/master/EditWorkCategory.jsx
View File

@ -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"

2
src/data/menuData.json
View File

@ -48,7 +48,7 @@
"link": "/activities/task"
},
{
"text": "Daily Task",
"text": "Daily Progress Report",
"available": true,
"link": "/activities/records"
},

35
src/hooks/masterHook/useMaster.js
View File

@ -116,4 +116,37 @@ export const useActivitiesMaster = () =>
}, [] )
return {activities,loading,error}
}
}
export const useWorkCategoriesMaster = () =>
{
const [ categories, setCategories ] = useState( [] )
const [ categoryLoading, setloading ] = useState( false );
const [ categoryError, setError ] = useState( "" )
const fetchCategories =async () => {
const cacheddata = getCachedData("Work Category");
if (!cacheddata) {
setloading(true);
try {
const response = await MasterRespository.getWorkCategory();
setCategories(response.data);
cacheData("Work Category", response.data);
} catch (err) {
setError(err);
console.log(err);
} finally {
setloading(false);
}
} else {
setCategories(cacheddata);
}
}
useEffect( () =>
{
fetchCategories()
}, [] )
return {categories,categoryLoading,categoryError}
}

224
src/hooks/useAttendanceStatus.js
View File

@ -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',
});
}
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 )
{
setStatus({
status: "Requested",
action: ACTIONS.REQUESTED,
disabled: true,
text: "Requested",
color: 'btn-info',
});
}else if(activity === 5 && checkInTime !== null ){
setStatus({
status: "Rejected",
action: ACTIONS.REJECTED,
disabled: true,
text: "Rejected",
color: 'btn-danger',
});
}else {
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 === 4 && new Date(checkOutTime) < now) {
setStatus({
status: "Approved",
action: ACTIONS.APPROVED,
disabled: true,
text: "Approved",
color: "btn-success",
});
} 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",
});
} 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',
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) {
setStatus({
status: "Requested",
action: ACTIONS.REQUESTED,
disabled: true,
text: "Requested",
color: "btn-info",
});
} else if (activity === 5 && checkInTime !== null) {
setStatus({
status: "Rejected",
action: ACTIONS.REJECTED,
disabled: true,
text: "Rejected",
color: "btn-danger",
});
} else {
setStatus({
status: "Approved",
action: ACTIONS.APPROVED,
disabled: true,
text: "Approved",
color: "btn-success",
});
}
}, [attendanceData]);
return status;

31
src/hooks/useDashboard_Data.jsx
View File

@ -37,6 +37,37 @@ export const useDashboard_Data = ({ days, FromDate, projectId }) => {
return { dashboard_data, loading: isLineChartLoading, error };
};
export const useDashboard_AttendanceData = (date, projectId) => {
const [dashboard_Attendancedata, setDashboard_AttendanceData] = useState([]);
const [isLineChartLoading, setLoading] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
const fetchData = async () => {
setLoading(true);
setError("");
try {
const response = await GlobalRepository.getDashboardAttendanceData(date,projectId); // date in 2nd param
setDashboard_AttendanceData(response.data);
} catch (err) {
setError("Failed to fetch dashboard data.");
console.error(err);
} finally {
setLoading(false);
}
};
if (date && projectId !== null) {
fetchData();
}
}, [date, projectId]);
return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error };
};
// 🔹 Dashboard Projects Card Data Hook
export const useDashboardProjectsCardData = () => {
const [projectsCardData, setProjectsData] = useState([]);

12
src/hooks/useEmployees.js
View File

@ -209,9 +209,15 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
export const useEmployeeProfile = (employeeId) => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState();
const [employee, setEmployees] = useState();
const [employee, setEmployees] = useState(null);
const fetchData = async () => {
if (!employeeId) {
// Reset the state if no employeeId (e.g., opening for 'add' mode)
setEmployees(null);
setLoading(false);
return;
}
const Employee_cache = getCachedData("employeeProfile");
if (!Employee_cache || Employee_cache.employeeId !== employeeId) {
EmployeeRepository.getEmployeeProfile(employeeId)
@ -231,9 +237,7 @@ export const useEmployeeProfile = (employeeId) => {
};
useEffect(() => {
if (employeeId) {
fetchData(employeeId);
}
fetchData();
}, [employeeId]);
return { employee, loading, error };

74
src/hooks/useProfile.js
View File

@ -3,46 +3,40 @@ import AuthRepository from "../repositories/AuthRepository";
import {cacheProfileData, getCachedProfileData} from "../slices/apiDataManager";
import {useSelector} from "react-redux";
export const useProfile = () =>
{
const loggedUser = useSelector((store)=>store.globalVariables.loginUser)
const [profile, setProfile] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const fetchData = async () =>
{
try
{
setLoading( true )
let hasFetched = false;
export const useProfile = () => {
const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
const [profile, setProfile] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const fetchData = async () => {
try {
setLoading(true);
let response = await AuthRepository.profile();
setProfile( response.data )
cacheProfileData( response.data )
setLoading( false );
} catch ( error )
{
setLoading( false )
console.error( error );
setError( "Failed to fetch data." );
};
}
useEffect( () => {
if (!loggedUser )
{
fetchData()
} else
{
setProfile(loggedUser)
setProfile(response.data);
cacheProfileData(response.data);
} catch (error) {
setError("Failed to fetch data.");
} finally {
setLoading(false);
}
};
useEffect(() => {
if (!hasFetched) {
hasFetched = true;
if (!loggedUser) {
fetchData();
} else {
setProfile(loggedUser);
}
}
},[])
return { profile,loading,error}
}
setProfile(loggedUser);
}, [loggedUser]);
return { profile, loading, error };
};

12
src/hooks/useProjects.js
View File

@ -2,17 +2,18 @@ import { useEffect, useState } from "react";
import { cacheData, getCachedData } from "../slices/apiDataManager";
import ProjectRepository from "../repositories/ProjectRepository";
import { useProfile } from "./useProfile";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../slices/localVariablesSlice";
export const useProjects = () => {
const { profile } = useProfile();
const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser )
const [projects, setProjects] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const fetchData = async () => {
const projectIds = profile?.projects || [];
const projectIds = loggedUser?.projects || [];
const filterProjects = (projectsList) => {
return projectsList
@ -43,12 +44,11 @@ export const useProjects = () => {
}
}
};
useEffect(() => {
if (profile) {
if (loggedUser) {
fetchData();
}
}, [profile]);
}, [loggedUser]);
return { projects, loading, error, refetch: fetchData };
};

27
src/index.css
View File

@ -137,4 +137,31 @@ button:focus-visible {
max-height: 100px;
overflow: auto;
}
.small-text{
font-size: 12px;
}
.custom-accordion-btn {
padding: 1px !important;
transition: background-color 0.3s ease;
}
.accordion-button::after {
display: none;
padding: 0px;
}
.accordion-header {
position: relative;
border-bottom: none;
}
.accordion-button.collapsed .toggle-icon {
content: "\f10b"; /* plus-circle */
}
.accordion-button:not(.collapsed) .toggle-icon {
content: "\f146"; /* minus-circle */
}

45
src/pages/Activities/AttendancePage.jsx
View File

@ -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>
)}

43
src/pages/Activities/DailyTask.jsx
View File

@ -6,7 +6,7 @@ import { useTaskList } from "../../hooks/useTasks";
import { useProjects } from "../../hooks/useProjects";
import { setProjectId } from "../../slices/localVariablesSlice";
import { useProfile } from "../../hooks/useProfile";
import { formatDate } from "../../utils/dateUtils";
// import { formatDate } from "../../utils/dateUtils"; // Removed this import
import GlobalModel from "../../components/common/GlobalModel";
import AssignRoleModel from "../../components/Project/AssignRole";
import { ReportTask } from "../../components/Activities/ReportTask";
@ -14,6 +14,7 @@ import ReportTaskComments from "../../components/Activities/ReportTaskComments";
import DateRangePicker from "../../components/common/DateRangePicker";
import DatePicker from "../../components/common/DatePicker";
import { useSearchParams } from "react-router-dom";
import moment from "moment";
const DailyTask = () => {
const [searchParams] = useSearchParams();
@ -141,6 +142,7 @@ const DailyTask = () => {
<DateRangePicker
onRangeChange={setDateRange}
DateDifference="6"
dateFormat="DD-MM-YYYY"
/>
</div>
<div className="col-sm-3 col-6 text-end mb-1">
@ -187,12 +189,19 @@ 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}>
<tr className="table-row-header">
<td colSpan={7} className="text-start">
<strong>{date}</strong>
<strong>{moment(date).format("DD-MM-YYYY")}</strong>
</td>
</tr>
{TaskLists.filter((task) =>
@ -239,7 +248,7 @@ const DailyTask = () => {
task.workItem.completedWork}
</td>
<td>{task.completedTask}</td>
<td>{formatDate(task.assignmentDate)}</td>
<td>{moment(task.assignmentDate).format("DD-MM-YYYY")}</td>
<td className="text-center">
<div
key={refIndex}
@ -257,23 +266,23 @@ const DailyTask = () => {
${task.teamMembers
.map(
(member) => `
<div class="d-flex align-items-center gap-2 mb-2">
<div class="avatar avatar-xs">
<span class="avatar-initial rounded-circle bg-label-primary">
${
member?.firstName?.charAt(
0
) || ""
}${
<div class="d-flex align-items-center gap-2 mb-2">
<div class="avatar avatar-xs">
<span class="avatar-initial rounded-circle bg-label-primary">
${
member?.firstName?.charAt(
0
) || ""
}${
member?.lastName?.charAt(0) || ""
}
</span>
</div>
<span>${member.firstName} ${
</span>
</div>
<span>${member.firstName} ${
member.lastName
}</span>
</div>
`
</div>
`
)
.join("")}
</div>
@ -355,4 +364,4 @@ const DailyTask = () => {
</>
);
};
export default DailyTask;
export default DailyTask;

5
src/pages/authentication/AuthWrapper.jsx
View File

@ -15,11 +15,8 @@ export const AuthWrapper = ({ children }) => {
className="app-brand-link gap-2"
>
<span className="app-brand-logo demo">
<img src="/img/brand/marco.png" alt="sneat-logo" />
<img src="/img/brand/marco.png" alt="marco-logo" />
</span>
{/* <span className="app-brand-text demo text-body fw-bold">
Sneat
</span> */}
</Link>
</div>
{children}

8
src/pages/employee/EmployeeList.jsx
View File

@ -43,7 +43,7 @@ const EmployeeList = () => {
const [searchText, setSearchText] = useState("");
const [filteredData, setFilteredData] = useState([]);
const [showModal, setShowModal] = useState(false);
const [selectedEmployeeId, setSelecedEmployeeId] = useState();
const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
const [employeeLodaing, setemployeeLodaing] = useState(false);
@ -111,6 +111,8 @@ const EmployeeList = () => {
document.querySelector(".modal-backdrop").remove();
}
setShowModal(false);
clearCacheKey("employeeProfile");
recallEmployeeData(showInactive);
};
const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false);
@ -193,7 +195,7 @@ const EmployeeList = () => {
{isCreateModalOpen && (
<ManageEmp employeeId={modelConfig} onClosed={closeModal} />
)}
<div
{showModal && (<div
className={`modal fade ${showModal ? "show" : ""} `}
tabIndex="-1"
role="dialog"
@ -211,7 +213,7 @@ const EmployeeList = () => {
/>
</div>
</div>
</div>
</div>)}
{IsDeleteModalOpen && (
<div

32
src/pages/employee/EmployeeProfile.jsx
View File

@ -16,6 +16,7 @@ import { ComingSoonPage } from "../Misc/ComingSoonPage";
import { useNavigate } from "react-router-dom";
import Avatar from "../../components/common/Avatar";
import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
import ManageEmployee from "../../components/Employee/ManageEmployee";
const EmployeeProfile = () => {
const projectID = useSelector((store) => store.localVariables.projectId);
const { employeeId } = useParams();
@ -26,11 +27,18 @@ const EmployeeProfile = () => {
const tab = SearchParams.get("for");
const [activePill, setActivePill] = useState(tab);
const [currentEmployee, setCurrentEmployee] = useState();
const [showModal, setShowModal] = useState(false);
const handlePillClick = (pillKey) => {
setActivePill(pillKey);
};
const closeModal = () => {
setShowModal(false);
fetchEmployeeProfile(employeeId);
};
const handleShow = () => setShowModal(true);
const fetchEmployeeProfile = async (employeeID) => {
try {
const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
@ -89,6 +97,26 @@ const EmployeeProfile = () => {
}
return (
<> {showModal && (<div
className={`modal fade ${showModal ? "show" : ""} `}
tabIndex="-1"
role="dialog"
style={{ display: showModal ? "block" : "none" }}
aria-hidden={!showModal}
>
<div className="modal-dialog modal-xl modal-dialog-centered ">
<div
className="modal-content overflow-y-auto overflow-x-hidden"
style={{ maxHeight: "90vh" }}
>
<ManageEmployee
employeeId={employeeId}
onClosed={closeModal}
/>
</div>
</div>
</div>)}
<div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb
data={[
@ -212,7 +240,7 @@ const EmployeeProfile = () => {
<button
className="btn btn-primary btn-block"
onClick={() =>
navigate(`/employee/manage/${currentEmployee?.id}`)
handleShow()
}
>
Edit Profile
@ -238,6 +266,8 @@ const EmployeeProfile = () => {
</div>
</div>
</div>
</>
);
};

5
src/repositories/GlobalRepository.jsx
View File

@ -18,6 +18,11 @@ const GlobalRepository = {
return api.get(`/api/Dashboard/Progression?${params.toString()}`);
},
getDashboardAttendanceData: ( date,projectId ) => {
return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
},
getDashboardProjectsCardData: () => {
return api.get(`/api/Dashboard/projects`);
},

6
src/router/AppRoutes.jsx
View File

@ -51,7 +51,7 @@ const router = createBrowserRouter(
},
{
element: <ProtectedRoute />,
errorElement:<ErrorPage/>,
errorElement: <ErrorPage />,
children: [
{
element: <HomeLayout />,
@ -90,6 +90,10 @@ const router = createBrowserRouter(
future: {
v7_relativeSplatPath: true,
v7_startTransition: true,
v7_fetcherPersist: true,
v7_normalizeFormMethod: true,
v7_partialHydration: true,
v7_skipActionErrorRevalidation: true,
},
}
);

5
src/utils/constants.jsx
View File

@ -16,9 +16,12 @@ export const VIEW_PROJECT_INFRA = "c7b68e33-72f0-474f-bd96-77636427ecc8"
export const REGULARIZE_ATTENDANCE ="57802c4a-00aa-4a1f-a048-fd2f70dd44b6"
export const ASSIGN_TO_PROJECT = "fbd213e0-0250-46f1-9f5f-4b2a1e6e76a3";
export const ASSIGN_TO_PROJECT = "b94802ce-0689-4643-9e1d-11c86950c35b";
export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"