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

change class= to className=

Browse Source
This commit is contained in:
Vikas Nale 2025-04-08 09:37:38 +05:30
parent 984efe207b
commit 5995c74ae6
15 changed files with 1148 additions and 969 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -84,8 +84,8 @@
<script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script> <script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
<script src="/assets/vendor/libs/select2/select2.js"></script> <script src="/assets/vendor/libs/select2/select2.js"></script>
<script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script> <script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script>
<script src="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js" ></script> <!-- <script src="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js" ></script> -->
<script src="/assets/vendor/libs/flatpickr/flatpickr.js" ></script> <script src="/assets/vendor/libs/flatpickr/flatpickr.js"></script>
<!-- Main JS --> <!-- Main JS -->
<script src="/assets/js/main.js"></script> <script src="/assets/js/main.js"></script>
@ -94,15 +94,15 @@
<script src="/assets/js/dashboards-analytics.js"></script> <script src="/assets/js/dashboards-analytics.js"></script>
<!-- component --> <!-- component -->
<script src="./public/js/timppick.js"></script> <!-- <script src="./public/js/timppick.js"></script> -->
<script src="/assets/vendor/libs/sweetalert2/sweetalert2.js" ></script> <script src="/assets/vendor/libs/sweetalert2/sweetalert2.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> -->
<!-- Flatpickr JS --> <!-- Flatpickr JS -->
</body> </body>

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

@ -6,9 +6,8 @@ import { z } from "zod";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { TasksRepository } from "../../repositories/TaskRepository"; import { TasksRepository } from "../../repositories/TaskRepository";
export const ReportTask = ({ report,closeModal,refetch }) => { export const ReportTask = ({ report, closeModal, refetch }) => {
const [ loading, setloading ] = useState( false ); const [loading, setloading] = useState(false);
const schema = z.object({ const schema = z.object({
completedTask: z completedTask: z
@ -32,21 +31,18 @@ export const ReportTask = ({ report,closeModal,refetch }) => {
}); });
const onSubmit = async (data) => { const onSubmit = async (data) => {
try try {
{ setloading(true);
setloading(true)
const reportData = { const reportData = {
...data, ...data,
id: report?.id, id: report?.id,
reportedDate: new Date().toISOString(), reportedDate: new Date().toISOString(),
}; };
let response = await TasksRepository.reportTsak(reportData);
let response = await TasksRepository.reportTsak( reportData ) showToast("succesfully", "success");
showToast( "succesfully", "success" ) refetch();
refetch() closeModal();
closeModal()
} catch (error) { } catch (error) {
showToast("Somthing wrog", "error"); showToast("Somthing wrog", "error");
} }
@ -56,29 +52,31 @@ export const ReportTask = ({ report,closeModal,refetch }) => {
}; };
return ( return (
<div
className="modal-dialog modal-md modal-simple report-task-modal"
<div className="modal-dialog modal-md modal-simple report-task-modal" role="document"> role="document"
>
<div className="modal-content"> <div className="modal-content">
<div className="modal-body px-1"> <div className="modal-body px-1">
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
onClick={handleClose} onClick={handleClose}
aria-label="Close" aria-label="Close"
></button> ></button>
<div className="container m-0"> <div className="container m-0">
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<figure className="text-start p-0 m-0">
<figure class="text-start p-0 m-0"> <blockquote className="blockquote">
<blockquote class="blockquote"> <small>
<small> Assigned Date : {formatDate(report?.assignmentDate)}</small> {" "}
Assigned Date : {formatDate(report?.assignmentDate)}
</small>
</blockquote> </blockquote>
</figure> </figure>
<figure class="text-end p-0 m-0"> <figure className="text-end p-0 m-0">
<blockquote class="blockquote"> <blockquote className="blockquote">
<small>Assigned By</small> <small>Assigned By</small>
</blockquote> </blockquote>
<figcaption className="blockquote-footer mb-0"> <figcaption className="blockquote-footer mb-0">
@ -94,23 +92,27 @@ export const ReportTask = ({ report,closeModal,refetch }) => {
<div className="d-flex p-0 m-0"> <div className="d-flex p-0 m-0">
<div className="flex-shrink-0 mt-1 mx-sm-0 px-2 mx-auto"> <div className="flex-shrink-0 mt-1 mx-sm-0 px-2 mx-auto">
<i class="bx bx-buildings"></i> <i className="bx bx-buildings"></i>
</div> </div>
<p class="lead">{report?.workItem?.workArea?.floor?.building?.name}</p> <p className="lead">
<p class="lead ms-12">{report?.workItem?.workArea?.floor?.floorName}</p> {report?.workItem?.workArea?.floor?.building?.name}
</p>
<p className="lead ms-12">
{report?.workItem?.workArea?.floor?.floorName}
</p>
</div> </div>
<dl class="row text-start ms-3"> <dl className="row text-start ms-3">
<dt class="col-sm-6"> <dt className="col-sm-6">
Work Area : {report?.workItem?.workArea?.areaName} Work Area : {report?.workItem?.workArea?.areaName}
</dt> </dt>
<dd class="col-sm-6"> <dd className="col-sm-6">
<small> {report?.workItem?.activityMaster.activityName}</small> <small> {report?.workItem?.activityMaster.activityName}</small>
</dd> </dd>
</dl> </dl>
<dl class="row text-start ms-3"> <dl className="row text-start ms-3">
<dt class="col-sm-4">Team</dt> <dt className="col-sm-4">Team</dt>
<dd class="col-sm-4 d-flex align-items-center avatar-group justify-content-start"> <dd className="col-sm-4 d-flex align-items-center avatar-group justify-content-start">
{report?.teamMembers.map((member) => ( {report?.teamMembers.map((member) => (
<> <>
<div <div
@ -121,7 +123,7 @@ export const ReportTask = ({ report,closeModal,refetch }) => {
title={`${member.firstName} ${member.lastName}`} title={`${member.firstName} ${member.lastName}`}
className="avatar avatar-xs" className="avatar avatar-xs"
> >
{/* <img src="..." alt="Avatar" class="rounded-circle pull-up" /> */} {/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
<span className="avatar-initial rounded-circle bg-label-primary"> <span className="avatar-initial rounded-circle bg-label-primary">
{member?.firstName.slice(0, 1)} {member?.firstName.slice(0, 1)}
</span> </span>
@ -129,7 +131,9 @@ export const ReportTask = ({ report,closeModal,refetch }) => {
</> </>
))} ))}
</dd> </dd>
<dt class="col-sm-4 text-start">Planned : {report?.plannedTask}</dt> <dt className="col-sm-4 text-start">
Planned : {report?.plannedTask}
</dt>
</dl> </dl>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="row p-0"> <div className="row p-0">
@ -142,7 +146,9 @@ export const ReportTask = ({ report,closeModal,refetch }) => {
placeholder="Completed Work" placeholder="Completed Work"
/> />
{errors.completedTask && ( {errors.completedTask && (
<div className="text-danger">{errors.completedTask.message}</div> <div className="text-danger">
{errors.completedTask.message}
</div>
)} )}
</div> </div>
<div className="col-8"> <div className="col-8">
@ -161,7 +167,7 @@ export const ReportTask = ({ report,closeModal,refetch }) => {
<div className="col-12 text-center my-2"> <div className="col-12 text-center my-2">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{loading ? "Please wait":"Submit Report"} {loading ? "Please wait" : "Submit Report"}
</button> </button>
<button <button
type="button" type="button"

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

@ -1,62 +1,54 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {useProfile} from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile";
import moment from "moment"; import moment from "moment";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
import {TasksRepository} from "../../repositories/TaskRepository"; import { TasksRepository } from "../../repositories/TaskRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
const schema = z.object({ const schema = z.object({
comment: z.string().min(1, "Comment cannot be empty"), comment: z.string().min(1, "Comment cannot be empty"),
}); });
const ReportTaskComments = ( {commentsData, closeModal} ) => const ReportTaskComments = ({ commentsData, closeModal }) => {
{ const [loading, setloading] = useState(false);
const [loading,setloading]=useState(false) const { profile } = useProfile();
const {profile} = useProfile() const [comments, setComment] = useState([]);
const [comments,setComment] = useState([])
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors },reset formState: { errors },
reset,
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
}); });
useEffect( () => useEffect(() => {
{ setComment(commentsData?.comments);
setComment(commentsData?.comments }, [commentsData]);
) const isLoggedUser = (usrId) => profile?.employeeInfo.id;
}, [commentsData] )
const isLoggedUser = ( usrId ) => profile?.employeeInfo.id;
const onSubmit = async(data) => const onSubmit = async (data) => {
{
let sendComment = { let sendComment = {
...data, ...data,
taskAllocationId: commentsData?.id, taskAllocationId: commentsData?.id,
commentDate: new Date().toISOString(), commentDate: new Date().toISOString(),
};
} try {
setloading(true);
try
{
setloading(true)
// const resp = await TasksRepository.taskComments( sendComment ); // const resp = await TasksRepository.taskComments( sendComment );
// console.timeLog( resp ) // console.timeLog( resp )
reset() reset();
setloading(false) setloading(false);
showToast( "Successfully Sent", "success" ) showToast("Successfully Sent", "success");
closeModal() closeModal();
} catch ( err ) } catch (err) {
{ setloading(false);
setloading(false) showToast(error.response.data?.message || "Something wrong", "error");
showToast(error.response.data?.message || "Something wrong","error")
}
} }
};
return ( return (
<div <div
className="modal-dialog modal-md modal-simple report-task-comments-modal" className="modal-dialog modal-md modal-simple report-task-comments-modal"
@ -71,39 +63,49 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
aria-label="Close" aria-label="Close"
></button> ></button>
<div className="container "> <div className="container ">
{comments &&
{ comments.map((data) => (
comments && comments.map( ( data ) =>
(
<div className="text-start" key={data.id}> <div className="text-start" key={data.id}>
<div class={`li-wrapper d-flex justify-content-${isLoggedUser(data?.employee?.id) ? "end":"start"} align-items-start`}> <div
<div class="avatar avatar-xs me-1"> className={`li-wrapper d-flex justify-content-${
<span class="avatar-initial rounded-circle bg-label-success"> isLoggedUser(data?.employee?.id) ? "end" : "start"
} align-items-start`}
>
<div className="avatar avatar-xs me-1">
<span className="avatar-initial rounded-circle bg-label-success">
M M
</span> </span>
</div> </div>
<div class="text-start py-0"> <div className="text-start py-0">
<p class="mb-0"> <p className="mb-0">
<strong>{ `${data?.employee?.firstName} ${data?.employee?.lastName}`}</strong> <strong>{`${data?.employee?.firstName} ${data?.employee?.lastName}`}</strong>
</p> </p>
<small style={{fontSize: "10px"}}>{ moment(data?.commentDate).fromNow()}</small> <small style={{ fontSize: "10px" }}>
{moment(data?.commentDate).fromNow()}
</small>
</div> </div>
</div> </div>
<p className={`ms-${ isLoggedUser( data?.employee?.id ) ? "0 text-end me-6" : "6 " } mt-1`}>{ data?.comment <p
}</p> className={`ms-${
isLoggedUser(data?.employee?.id)
? "0 text-end me-6"
: "6 "
} mt-1`}
>
{data?.comment}
</p>
</div> </div>
)) ))}
}
{/* by other users */} {/* by other users */}
{/* <div className="text-start"> {/* <div className="text-start">
<div class="li-wrapper d-flex justify-content-start align-items-start"> <div className="li-wrapper d-flex justify-content-start align-items-start">
<div class="avatar avatar-xs me-1"> <div className="avatar avatar-xs me-1">
<span class="avatar-initial rounded-circle bg-label-success"> <span className="avatar-initial rounded-circle bg-label-success">
M M
</span> </span>
</div> </div>
<div class="text-start py-0"> <div className="text-start py-0">
<p class="mb-0"> <p className="mb-0">
<strong>Mahajan</strong> <strong>Mahajan</strong>
</p> </p>
<small style={{ fontSize: "10px" }}>2 hour ago</small> <small style={{ fontSize: "10px" }}>2 hour ago</small>
@ -114,14 +116,14 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
{/* by login usrer */} {/* by login usrer */}
{/* <div className="text-start"> {/* <div className="text-start">
<div class="li-wrapper d-flex justify-content-end align-items-start"> <div className="li-wrapper d-flex justify-content-end align-items-start">
<div class="avatar avatar-xs me-1"> <div className="avatar avatar-xs me-1">
<span class="avatar-initial rounded-circle bg-label-success"> <span className="avatar-initial rounded-circle bg-label-success">
M M
</span> </span>
</div> </div>
<div class="text-start py-0"> <div className"text-start py-0">
<p class="mb-0"> <p className="mb-0">
<strong>Pramod Mahajan</strong> <strong>Pramod Mahajan</strong>
</p> </p>
<small style={{ fontSize: "10px" }}>2 hour ago</small> <small style={{ fontSize: "10px" }}>2 hour ago</small>
@ -129,7 +131,7 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
</div> </div>
<p className="ms-6 mt-1">Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hov </p> <p className="ms-6 mt-1">Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hov </p>
</div> */} </div> */}
<form onSubmit={handleSubmit( onSubmit )}> <form onSubmit={handleSubmit(onSubmit)}>
<textarea <textarea
{...register("comment")} {...register("comment")}
className="form-control" className="form-control"
@ -140,14 +142,20 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
{errors.comment && ( {errors.comment && (
<div className="danger-text">{errors.comment.message}</div> <div className="danger-text">{errors.comment.message}</div>
)} )}
<div class="text-end my-1"> <div className="text-end my-1">
<button
<button type="button" class="btn btn-sm btn-secondary" onClick={closeModal} data-bs-dismiss="modal">Close</button> type="button"
<button type="submit" class="btn btn-sm btn-primary ms-2">{ loading ? "Sending...":"Comment"}</button> className="btn btn-sm btn-secondary"
onClick={closeModal}
data-bs-dismiss="modal"
>
Close
</button>
<button type="submit" className="btn btn-sm btn-primary ms-2">
{loading ? "Sending..." : "Comment"}
</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>

161
src/components/Employee/DemoTable.jsx
View File

@ -1,13 +1,12 @@
import React from 'react' import React from "react";
const DemoTable = () => { const DemoTable = () => {
return ( return (
<div class="content-wrapper"> <div className="content-wrapper">
<div className="container-xxl flex-grow-1 container-p-y">
<div class="container-xxl flex-grow-1 container-p-y"> <div className="card">
<div class="card"> <div className="card-datatable table-responsive">
<div class="card-datatable table-responsive"> <table className="datatables-basic table border-top">
<table class="datatables-basic table border-top">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -24,112 +23,150 @@ const DemoTable = () => {
</table> </table>
</div> </div>
</div> </div>
<div class="offcanvas offcanvas-end" id="add-new-record"> <div className="offcanvas offcanvas-end" id="add-new-record">
<div class="offcanvas-header border-bottom"> <div className="offcanvas-header border-bottom">
<h5 class="offcanvas-title" id="exampleModalLabel">New Record</h5> <h5 className="offcanvas-title" id="exampleModalLabel">
New Record
</h5>
<button <button
type="button" type="button"
class="btn-close text-reset" className="btn-close text-reset"
data-bs-dismiss="offcanvas" data-bs-dismiss="offcanvas"
aria-label="Close"></button> aria-label="Close"
></button>
</div> </div>
<div class="offcanvas-body flex-grow-1"> <div className="offcanvas-body flex-grow-1">
<form class="add-new-record pt-0 row g-2" id="form-add-new-record" onsubmit="return false"> <form
<div class="col-sm-12"> className="add-new-record pt-0 row g-2"
<label class="form-label" for="basicFullname">Full Name</label> id="form-add-new-record"
<div class="input-group input-group-merge"> onsubmit="return false"
<span id="basicFullname2" class="input-group-text"><i class="bx bx-user"></i></span> >
<div className="col-sm-12">
<label className="form-label" for="basicFullname">
Full Name
</label>
<div className="input-group input-group-merge">
<span id="basicFullname2" className="input-group-text">
<i className="bx bx-user"></i>
</span>
<input <input
type="text" type="text"
id="basicFullname" id="basicFullname"
class="form-control dt-full-name" className="form-control dt-full-name"
name="basicFullname" name="basicFullname"
placeholder="John Doe" placeholder="John Doe"
aria-label="John Doe" aria-label="John Doe"
aria-describedby="basicFullname2" /> aria-describedby="basicFullname2"
/>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div className="col-sm-12">
<label class="form-label" for="basicPost">Post</label> <label className="form-label" for="basicPost">
<div class="input-group input-group-merge"> Post
<span id="basicPost2" class="input-group-text"><i class="bx bxs-briefcase"></i></span> </label>
<div className="input-group input-group-merge">
<span id="basicPost2" className="input-group-text">
<i className="bx bxs-briefcase"></i>
</span>
<input <input
type="text" type="text"
id="basicPost" id="basicPost"
name="basicPost" name="basicPost"
class="form-control dt-post" className="form-control dt-post"
placeholder="Web Developer" placeholder="Web Developer"
aria-label="Web Developer" aria-label="Web Developer"
aria-describedby="basicPost2" /> aria-describedby="basicPost2"
/>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div className="col-sm-12">
<label class="form-label" for="basicEmail">Email</label> <label className="form-label" for="basicEmail">
<div class="input-group input-group-merge"> Email
<span class="input-group-text"><i class="bx bx-envelope"></i></span> </label>
<div className="input-group input-group-merge">
<span className="input-group-text">
<i className="bx bx-envelope"></i>
</span>
<input <input
type="text" type="text"
id="basicEmail" id="basicEmail"
name="basicEmail" name="basicEmail"
class="form-control dt-email" className="form-control dt-email"
placeholder="john.doe@example.com" placeholder="john.doe@example.com"
aria-label="john.doe@example.com" /> aria-label="john.doe@example.com"
/>
</div> </div>
<div class="form-text">You can use letters, numbers & periods</div> <div className="form-text">
You can use letters, numbers & periods
</div> </div>
<div class="col-sm-12"> </div>
<label class="form-label" for="basicDate">Joining Date</label> <div className="col-sm-12">
<div class="input-group input-group-merge"> <label className="form-label" for="basicDate">
<span id="basicDate2" class="input-group-text"><i class="bx bx-calendar"></i></span> Joining Date
</label>
<div className="input-group input-group-merge">
<span id="basicDate2" className="input-group-text">
<i className="bx bx-calendar"></i>
</span>
<input <input
type="text" type="text"
class="form-control dt-date" className="form-control dt-date"
id="basicDate" id="basicDate"
name="basicDate" name="basicDate"
aria-describedby="basicDate2" aria-describedby="basicDate2"
placeholder="MM/DD/YYYY" placeholder="MM/DD/YYYY"
aria-label="MM/DD/YYYY" /> aria-label="MM/DD/YYYY"
/>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div className="col-sm-12">
<label class="form-label" for="basicSalary">Salary</label> <label className="form-label" for="basicSalary">
<div class="input-group input-group-merge"> Salary
<span id="basicSalary2" class="input-group-text"><i class="bx bx-dollar"></i></span> </label>
<div className="input-group input-group-merge">
<span id="basicSalary2" className="input-group-text">
<i className="bx bx-dollar"></i>
</span>
<input <input
type="number" type="number"
id="basicSalary" id="basicSalary"
name="basicSalary" name="basicSalary"
class="form-control dt-salary" className="form-control dt-salary"
placeholder="12000" placeholder="12000"
aria-label="12000" aria-label="12000"
aria-describedby="basicSalary2" /> aria-describedby="basicSalary2"
/>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div className="col-sm-12">
<button type="submit" class="btn btn-primary data-submit me-sm-4 me-1">Submit</button> <button
<button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button> type="submit"
className="btn btn-primary data-submit me-sm-4 me-1"
>
Submit
</button>
<button
type="reset"
className="btn btn-outline-secondary"
data-bs-dismiss="offcanvas"
>
Cancel
</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<hr class="my-12" /> <hr className="my-12" />
<hr class="my-12" />
<hr class="my-12" />
<hr className="my-12" />
<hr className="my-12" />
</div> </div>
<div class="content-backdrop fade"></div> <div className="content-backdrop fade"></div>
</div> </div>
) );
} };
export default DemoTable export default DemoTable;

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

@ -11,7 +11,7 @@ import { Link, useNavigate, useParams } from "react-router-dom";
import { formatDate } from "../../utils/dateUtils"; import { formatDate } from "../../utils/dateUtils";
import { useEmployeeProfile } from "../../hooks/useEmployees"; import { useEmployeeProfile } from "../../hooks/useEmployees";
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager"; import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
import {clearApiCacheKey} from "../../slices/apiCacheSlice"; import { clearApiCacheKey } from "../../slices/apiCacheSlice";
const mobileNumberRegex = /^[7-9]\d{9}$/; const mobileNumberRegex = /^[7-9]\d{9}$/;
@ -24,16 +24,14 @@ const ManageEmployee = () => {
error, error,
loading: empLoading, loading: empLoading,
} = useEmployeeProfile(employeeId); } = useEmployeeProfile(employeeId);
dispatch( changeMaster( "Job Role" ) ); dispatch(changeMaster("Job Role"));
const [disabledEmail,setDisabledEmail] = useState(false) const [disabledEmail, setDisabledEmail] = useState(false);
const { data: job_role, loading } = useMaster(); const { data: job_role, loading } = useMaster();
const [isloading, setLoading] = useState(false); const [isloading, setLoading] = useState(false);
const navigation = useNavigate(); const navigation = useNavigate();
const [currentEmployee, setCurrentEmployee] = useState(); const [currentEmployee, setCurrentEmployee] = useState();
const userSchema = z.object({
const userSchema = z
.object({
...(employeeId ? { Id: z.number().optional() } : {}), ...(employeeId ? { Id: z.number().optional() } : {}),
FirstName: z.string().min(1, { message: "First Name is required" }), FirstName: z.string().min(1, { message: "First Name is required" }),
MiddleName: z.string().optional(), MiddleName: z.string().optional(),
@ -41,17 +39,30 @@ const ManageEmployee = () => {
Email: z.string().optional(), Email: z.string().optional(),
CurrentAddress: z CurrentAddress: z
.string() .string()
.min(1, { message: "Current Address is required" }).max(150, { message: "Address cannot exceed 150 characters" }), .min(1, { message: "Current Address is required" })
BirthDate: z.string().min(1, { message: "Birth Date is required" }).refine((date, ctx) => { .max(150, { message: "Address cannot exceed 150 characters" }),
BirthDate: z
.string()
.min(1, { message: "Birth Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date(); return new Date(date) <= new Date();
}, { },
{
message: "Birth date cannot be in the future", message: "Birth date cannot be in the future",
}), }
JoiningDate: z.string().min(1, { message: "Joining Date is required" }).refine((date, ctx) => { ),
JoiningDate: z
.string()
.min(1, { message: "Joining Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date(); return new Date(date) <= new Date();
}, { },
{
message: "Joining date cannot be in the future", message: "Joining date cannot be in the future",
}), }
),
EmergencyPhoneNumber: z EmergencyPhoneNumber: z
.string() .string()
.min(1, { message: "Phone Number is required" }) .min(1, { message: "Phone Number is required" })
@ -59,7 +70,8 @@ const ManageEmployee = () => {
EmergencyContactPerson: z EmergencyContactPerson: z
.string() .string()
.min(1, { message: "Emergency Contact Person is required" }), .min(1, { message: "Emergency Contact Person is required" }),
AadharNumber: z.string() AadharNumber: z
.string()
.regex(/^\d{12}$/, "Aadhar card must be exactly 12 digits long") .regex(/^\d{12}$/, "Aadhar card must be exactly 12 digits long")
.nonempty("Aadhar card is required"), .nonempty("Aadhar card is required"),
Gender: z Gender: z
@ -76,14 +88,14 @@ const ManageEmployee = () => {
}), }),
PeramnentAddress: z PeramnentAddress: z
.string() .string()
.min(1, { message: "Permanent Address is required" }).max(150, { message: "Address cannot exceed 150 characters" }), .min(1, { message: "Permanent Address is required" })
.max(150, { message: "Address cannot exceed 150 characters" }),
PhoneNumber: z PhoneNumber: z
.string() .string()
.min(1, { message: "Phone Number is required" }) .min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }), .regex(mobileNumberRegex, { message: "Invalid phone number " }),
JobRoleId: z.string().min(1, { message: "Role is required" }), JobRoleId: z.string().min(1, { message: "Role is required" }),
}) });
const { const {
register, register,
@ -140,11 +152,10 @@ const ManageEmployee = () => {
} }
EmployeeRepository.manageEmployee(formDataToSend) EmployeeRepository.manageEmployee(formDataToSend)
.then( ( response ) => .then((response) => {
{ showToast("Employee details updated successfully.", "success");
showToast("Employee details updated successfully.", "success" ); clearCacheKey("employeeListByProject");
clearCacheKey("employeeListByProject") clearCacheKey("allEmployeeList");
clearCacheKey( "allEmployeeList" )
setLoading(false); setLoading(false);
navigation("/employees"); navigation("/employees");
}) })
@ -198,10 +209,18 @@ const ManageEmployee = () => {
{employee ? "Update Employee" : "Create Employee"} {employee ? "Update Employee" : "Create Employee"}
</h6> </h6>
<span className="cursor-pointer fs-6" data-htm="true" data-bs-toggle="tooltip" <span
className="cursor-pointer fs-6"
data-htm="true"
data-bs-toggle="tooltip"
data-bs-offset="0,6" data-bs-offset="0,6"
data-bs-placement="top" data-bs-placement="top"
data-bs-html="true" title="Move Back" onClick={()=>navigation("/employees")}><i class='bx bxs-chevron-left'></i> Back</span> data-bs-html="true"
title="Move Back"
onClick={() => navigation("/employees")}
>
<i className="bx bxs-chevron-left"></i> Back
</span>
</div> </div>
<div className="card-body"> <div className="card-body">
{!currentEmployee && empLoading && ( {!currentEmployee && empLoading && (
@ -289,8 +308,6 @@ const ManageEmployee = () => {
{errors.Email.message} {errors.Email.message}
</div> </div>
)} )}
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<div className="form-text text-start">Phone Number</div> <div className="form-text text-start">Phone Number</div>
@ -444,7 +461,9 @@ const ManageEmployee = () => {
Select Role Select Role
</option> </option>
{job_role?.map((item) => ( {job_role?.map((item) => (
<option value={item?.id} key={item.id}>{item?.name} </option> <option value={item?.id} key={item.id}>
{item?.name}{" "}
</option>
))} ))}
</select> </select>
</div> </div>
@ -525,7 +544,14 @@ const ManageEmployee = () => {
id="PanNumber" id="PanNumber"
placeholder="PAN Number" placeholder="PAN Number"
/> />
{errors.PanNumber && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.PanNumber.message}</div>} {errors.PanNumber && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.PanNumber.message}
</div>
)}
</div> </div>
</div> </div>

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

@ -1,9 +1,8 @@
import React,{useState} from "react"; import React, { useState } from "react";
import moment from "moment"; import moment from "moment";
import { ProjectStatus } from "../../utils/projectStatus"; import { ProjectStatus } from "../../utils/projectStatus";
const AboutProject = ( {data} ) => const AboutProject = ({ data }) => {
{ const [CurrentProject, setCurrentProject] = useState(data);
const [CurrentProject,setCurrentProject] = useState(data)
return ( return (
<> <>
@ -24,7 +23,7 @@ const AboutProject = ( {data} ) =>
</span> </span>
</li> </li>
<li className="d-flex align-items-center mb-4"> <li className="d-flex align-items-center mb-4">
<i class="bx bx-stop-circle"></i>{" "} <i className="bx bx-stop-circle"></i>{" "}
<span className="fw-medium mx-2">End Date:</span>{" "} <span className="fw-medium mx-2">End Date:</span>{" "}
<span> <span>
{data.endDate {data.endDate
@ -33,7 +32,7 @@ const AboutProject = ( {data} ) =>
</span> </span>
</li> </li>
<li className="d-flex align-items-center mb-2"> <li className="d-flex align-items-center mb-2">
<i class="bx bx-trophy"></i> <i className="bx bx-trophy"></i>
<span className="fw-medium mx-2">Status:</span>{" "} <span className="fw-medium mx-2">Status:</span>{" "}
<span>{ProjectStatus(data.projectStatusId)}</span> <span>{ProjectStatus(data.projectStatusId)}</span>
</li> </li>

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

@ -1,4 +1,4 @@
import React, { useState,useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice"; import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster"; import useMaster from "../../hooks/masterHook/useMaster";
@ -6,61 +6,63 @@ import { employee } from "../../data/masters";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { getCachedData } from "../../slices/apiDataManager"; import { getCachedData } from "../../slices/apiDataManager";
import {useModal} from "../../ModalContext"; import { useModal } from "../../ModalContext";
import {useProjects} from "../../hooks/useProjects"; import { useProjects } from "../../hooks/useProjects";
import {useEmployeesAllOrByProjectId} from "../../hooks/useEmployees"; import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
import {TasksRepository} from "../../repositories/ProjectRepository"; import { TasksRepository } from "../../repositories/ProjectRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
const schema = z.object({ const schema = z.object({
selectedEmployees: z.array( z.number() ).min( 1, {message: "At least one employee must be selected"} ), selectedEmployees: z
description: z.string().min( 1, {message: "description required"} ), .array(z.number())
.min(1, { message: "At least one employee must be selected" }),
description: z.string().min(1, { message: "description required" }),
});
}) const AssignRoleModel = ({ assignData, onClose }) => {
const [plannedTask, setPlannedTask] = useState();
const { openModal, closeModal } = useModal();
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const { employees } = useEmployeesAllOrByProjectId(selectedProject);
const dispatch = useDispatch();
const { data, loading } = useMaster();
const jobRoleData = getCachedData("Job Role");
const AssignRoleModel = ( {assignData,onClose}) => { const [selectedRole, setSelectedRole] = useState("all");
const [ plannedTask, setPlannedTask ] = useState() const [selectedEmployees, setSelectedEmployees] = useState([]);
const { openModal, closeModal } = useModal()
const selectedProject = useSelector((store)=>store.localVariables.projectId)
const {employees} = useEmployeesAllOrByProjectId( selectedProject )
const dispatch = useDispatch() const {
const {data,loading} = useMaster() handleSubmit,
const jobRoleData = getCachedData("Job Role") control,
setValue,
watch,
const [selectedRole, setSelectedRole] = useState("all"); formState: { errors },
const [selectedEmployees, setSelectedEmployees] = useState([]); } = useForm({
const { handleSubmit, control, setValue, watch, formState: { errors } } = useForm({
defaultValues: { defaultValues: {
selectedEmployees: [], selectedEmployees: [],
description:"" description: "",
}, },
resolver: (data) => { resolver: (data) => {
const validation = schema.safeParse(data); const validation = schema.safeParse(data);
if (validation.success) return { values: data, errors: {} }; if (validation.success) return { values: data, errors: {} };
return { values: {}, errors: validation.error.formErrors.fieldErrors }; return { values: {}, errors: validation.error.formErrors.fieldErrors };
}, },
}); });
const handleRoleChange = (event) => { const handleRoleChange = (event) => {
setSelectedRole(event.plannedTask.value); setSelectedRole(event.plannedTask.value);
}; };
const filteredEmployees =
const filteredEmployees = selectedRole === "all" selectedRole === "all"
? employees ? employees
: employees.filter((emp) => emp.JobRoleId.toString() === selectedRole); : employees.filter((emp) => emp.JobRoleId.toString() === selectedRole);
// not need currently for this fun
// not need currently for this fun const handleEmployeeSelection = (employeeId, field) => {
const handleEmployeeSelection = (employeeId,field) => {
setSelectedEmployees((prevSelected) => { setSelectedEmployees((prevSelected) => {
let updatedSelection; let updatedSelection;
if (!prevSelected.includes(employeeId)) { if (!prevSelected.includes(employeeId)) {
@ -71,47 +73,40 @@ const handleEmployeeSelection = (employeeId,field) => {
field.onChange(updatedSelection); field.onChange(updatedSelection);
return updatedSelection; return updatedSelection;
}); });
}; };
const removeEmployee = (employeeId) => {
const removeEmployee = (employeeId) => {
setSelectedEmployees((prevSelected) => { setSelectedEmployees((prevSelected) => {
const updatedSelection = prevSelected.filter((id) => id !== employeeId); const updatedSelection = prevSelected.filter((id) => id !== employeeId);
setValue("selectedEmployees", updatedSelection); // Ensure form state is updated setValue("selectedEmployees", updatedSelection); // Ensure form state is updated
return updatedSelection; return updatedSelection;
}); });
}; };
const onSubmit = async (data) => {
const onSubmit = async(data) => {
const formattedData = { const formattedData = {
taskTeam: data.selectedEmployees, taskTeam: data.selectedEmployees,
plannedTask: parseInt( plannedTask, 10 ), plannedTask: parseInt(plannedTask, 10),
description: data.description, description: data.description,
assignmentDate: new Date().toISOString(), assignmentDate: new Date().toISOString(),
workItemId:assignData?.workItem?.workItem.id workItemId: assignData?.workItem?.workItem.id,
}; };
try try {
{ let response = await TasksRepository.assignTask(formattedData);
let response = await TasksRepository.assignTask( formattedData ); console.log(response);
console.log( response ) showToast("Task Successfully Assigend", "success");
showToast( "Task Successfully Assigend", "success" ) closeModal();
closeModal() } catch (error) {
} catch ( error ) showToast("something wrong", "error");
{
showToast("something wrong","error")
} }
};
useEffect(() => {
dispatch(changeMaster("Job Role"));
return () => setSelectedRole("all");
}, [dispatch]);
}; return (
useEffect(()=>{ <>
dispatch(changeMaster("Job Role"))
return ()=> setSelectedRole("all")
},[dispatch])
return (<>
<div className="container my-1"> <div className="container my-1">
<div className="mb-2"> <div className="mb-2">
<div className="bs-stepper wizard-numbered d-flex justify-content-center align-items-center flex-wrap"> <div className="bs-stepper wizard-numbered d-flex justify-content-center align-items-center flex-wrap">
@ -119,9 +114,12 @@ useEffect(()=>{
assignData?.building?.name, assignData?.building?.name,
assignData?.floor?.floorName, assignData?.floor?.floorName,
assignData?.workArea?.areaName, assignData?.workArea?.areaName,
assignData?.workItem?.workItem?.activityMaster?.activityName assignData?.workItem?.workItem?.activityMaster?.activityName,
].map((item, index, array) => ( ].map((item, index, array) => (
<div key={index} className="col d-flex justify-content-center align-items-center"> <div
key={index}
className="col d-flex justify-content-center align-items-center"
>
<div className="bs-stepper-header p-1 text-center"> <div className="bs-stepper-header p-1 text-center">
<span className="fs-5">{item}</span> <span className="fs-5">{item}</span>
@ -148,10 +146,12 @@ useEffect(()=>{
onChange={handleRoleChange} onChange={handleRoleChange}
aria-label="" aria-label=""
> >
{loading && data ? "Loading..." : ( {loading && data ? (
"Loading..."
) : (
<> <>
<option value="all">All</option> <option value="all">All</option>
{ jobRoleData?.map((item) => ( {jobRoleData?.map((item) => (
<option key={item.id} value={item.id}> <option key={item.id} value={item.id}>
{item.name} {item.name}
</option> </option>
@ -162,18 +162,23 @@ useEffect(()=>{
</div> </div>
</div> </div>
</div> </div>
<div class="divider text-start"> <div className="divider text-start">
<div class="divider-text">Employee</div> <div className="divider-text">Employee</div>
</div> </div>
{selectedRole !== "" && ( {selectedRole !== "" && (
<div className="row mb-2"> <div className="row mb-2">
<div className="col-sm-12"> <div className="col-sm-12">
<div className="row"> <div className="row">
{filteredEmployees.map((emp) => { {filteredEmployees.map((emp) => {
const jobRole = jobRoleData?.find((role) => role.id === emp.jobRoleId); const jobRole = jobRoleData?.find(
(role) => role.id === emp.jobRoleId
);
return ( return (
<div key={emp.id} className="col-6 col-sm-4 col-md-4 col-lg-3 mb-1"> <div
key={emp.id}
className="col-6 col-sm-4 col-md-4 col-lg-3 mb-1"
>
<div className="form-check text-start p-0"> <div className="form-check text-start p-0">
<div className="li-wrapper d-flex justify-content-start align-items-start"> <div className="li-wrapper d-flex justify-content-start align-items-start">
<Controller <Controller
@ -188,17 +193,25 @@ useEffect(()=>{
value={emp.id} value={emp.id}
checked={field.value.includes(emp.id)} // Ensure the checkbox reflects the current form state checked={field.value.includes(emp.id)} // Ensure the checkbox reflects the current form state
onChange={() => { onChange={() => {
handleEmployeeSelection( emp.id, field ) handleEmployeeSelection(emp.id, field);
}} }}
/> />
)} )}
/> />
<div className="list-content"> <div className="list-content">
<h6 className="mb-0">{emp.firstName <h6 className="mb-0">
} {emp.lastName}</h6> {emp.firstName} {emp.lastName}
</h6>
<small className="text-muted"> <small className="text-muted">
{loading && (<p className="skeleton para" style={{height:"7px"}}></p>)} {loading && (
{data && !loading && (jobRole ? jobRole.name : 'Unknown Role')} <p
className="skeleton para"
style={{ height: "7px" }}
></p>
)}
{data &&
!loading &&
(jobRole ? jobRole.name : "Unknown Role")}
</small> </small>
</div> </div>
</div> </div>
@ -211,25 +224,31 @@ useEffect(()=>{
</div> </div>
)} )}
{selectedEmployees.length > 0 && ( {selectedEmployees.length > 0 && (
<div className="mt-1"> <div className="mt-1">
<div className="text-start px-2"> <div className="text-start px-2">
{selectedEmployees.map((empId) => { {selectedEmployees.map((empId) => {
const emp = employees.find((emp) => emp.id === empId); const emp = employees.find((emp) => emp.id === empId);
return ( return (
<span key={empId} className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-2 mb-2"> <span
{emp.firstName key={empId}
} {emp.lastName} className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-2 mb-2"
>
{emp.firstName} {emp.lastName}
<p <p
type="button" type="button"
className=" btn-close-white p-0 m-0" className=" btn-close-white p-0 m-0"
aria-label="Close" aria-label="Close"
onClick={() => { onClick={() => {
removeEmployee(empId); removeEmployee(empId);
setValue("selectedEmployees", selectedEmployees.filter(id => id !== empId)); setValue(
"selectedEmployees",
selectedEmployees.filter((id) => id !== empId)
);
}} }}
><i className="icon-base bx bx-x icon-md "></i></p> >
<i className="icon-base bx bx-x icon-md "></i>
</p>
</span> </span>
); );
})} })}
@ -237,14 +256,28 @@ useEffect(()=>{
</div> </div>
)} )}
<div class="col-md text-start mx-0 px-0"> <div className="col-md text-start mx-0 px-0">
<div class="form-check form-check-inline mt-4 px-1"> <div className="form-check form-check-inline mt-4 px-1">
<label className="form-text fs-6" for="inlineCheckbox1">Pending Work</label> <label className="form-text fs-6" for="inlineCheckbox1">
<label className="form-check-label ms-2" for="inlineCheckbox1">{ assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}</label> Pending Work
</label>
<label className="form-check-label ms-2" for="inlineCheckbox1">
{assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork}
</label>
</div> </div>
<div className="form-check form-check-inline col-sm-2 col"> <div className="form-check form-check-inline col-sm-2 col">
<label for="defaultFormControlInput" className="form-label">Target</label> <label for="defaultFormControlInput" className="form-label">
<input type="text" className="form-control form-control-sm " value={plannedTask} onChange={(e)=>setPlannedTask(e.target.value)} id="defaultFormControlInput" aria-describedby="defaultFormControlHelp" /> Target
</label>
<input
type="text"
className="form-control form-control-sm "
value={plannedTask}
onChange={(e) => setPlannedTask(e.target.value)}
id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp"
/>
</div> </div>
</div> </div>
{errors.selectedEmployees && ( {errors.selectedEmployees && (
@ -253,7 +286,9 @@ useEffect(()=>{
</div> </div>
)} )}
<label for="exampleFormControlTextarea1" className="form-label">Description</label> <label for="exampleFormControlTextarea1" className="form-label">
Description
</label>
<Controller <Controller
name="description" name="description"
control={control} control={control}
@ -266,21 +301,26 @@ useEffect(()=>{
/> />
)} )}
/> />
{errors.description && ( <div>{errors.description.message }</div>)} {errors.description && <div>{errors.description.message}</div>}
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1"> <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="submit" className="btn btn-sm btn-primary ">
<button type="reset" className="btn btn-sm btn-label-secondary" data-bs-dismiss="modal" aria-label="Close" onClick={closeModal}> Submit
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={closeModal}
>
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</>
</>
); );
}; };
export default AssignRoleModel export default AssignRoleModel;

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

@ -1,4 +1,4 @@
import React, { useState,useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useModal } from "../../../ModalContext"; import { useModal } from "../../../ModalContext";
import AssignRoleModel from "../AssignRole"; import AssignRoleModel from "../AssignRole";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
@ -6,8 +6,8 @@ import GlobalModel from "../../common/GlobalModel";
const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => { const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
const { projectId } = useParams(); const { projectId } = useParams();
const [ itemName, setItemName ] = useState( "" ); const [itemName, setItemName] = useState("");
const [NewWorkItem,setNewWorkItem] = useState() const [NewWorkItem, setNewWorkItem] = useState();
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => setIsModalOpen(true); const openModal = () => setIsModalOpen(true);
@ -17,7 +17,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
}; };
const handleAssignTask = () => { const handleAssignTask = () => {
setItemName(""); setItemName("");
}; };
@ -29,8 +28,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
// }; // };
useEffect(() => { useEffect(() => {
setNewWorkItem(workItem);
setNewWorkItem(workItem)
}, [workItem]); // This hook will run whenever the workItem prop changes }, [workItem]); // This hook will run whenever the workItem prop changes
let assigndata = { let assigndata = {
@ -40,7 +38,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
workItem, workItem,
}; };
const hasWorkItem = NewWorkItem && NewWorkItem const hasWorkItem = NewWorkItem && NewWorkItem;
return ( return (
<> <>
@ -57,21 +55,32 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
<td className="text-start table-cell-small"> <td className="text-start table-cell-small">
<i className="bx bx-right-arrow-alt"></i> <i className="bx bx-right-arrow-alt"></i>
<span className="fw-medium"> <span className="fw-medium">
{hasWorkItem ? ( NewWorkItem?.workItem?.activityMaster?.activityName || workItem.activityMaster?.activityName ) :"NA" {hasWorkItem
} ? NewWorkItem?.workItem?.activityMaster?.activityName ||
workItem.activityMaster?.activityName
: "NA"}
</span> </span>
</td> </td>
{/* for mobile view */} {/* for mobile view */}
<td className="text-center d-sm-none d-sm-table-cell"> <td className="text-center d-sm-none d-sm-table-cell">
{hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork) :"NA" }/{" "} {hasWorkItem
{ hasWorkItem ? (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork) : "NA"} ? NewWorkItem?.workItem?.completedWork || workItem?.completedWork
: "NA"}
/{" "}
{hasWorkItem
? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
: "NA"}
</td> </td>
{/* for greather than mobile view ************* */} {/* for greather than mobile view ************* */}
<td className="text-center d-none d-md-table-cell"> <td className="text-center d-none d-md-table-cell">
{hasWorkItem ? (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork): "NA"} {hasWorkItem
? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
: "NA"}
</td> </td>
<td className="text-center d-none d-md-table-cell"> <td className="text-center d-none d-md-table-cell">
{hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork) : "NA"} {hasWorkItem
? NewWorkItem?.workItem?.completedWork || workItem?.completedWork
: "NA"}
</td> </td>
{/* ************************************************ */} {/* ************************************************ */}
<td className="text-center" style={{ width: "15%" }}> <td className="text-center" style={{ width: "15%" }}>
@ -81,17 +90,23 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
role="progressbar" role="progressbar"
style={{ style={{
width: getProgress( width: getProgress(
(NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork), NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
(NewWorkItem?.workItem?.completedWork || workItem?.completedWork) NewWorkItem?.workItem?.completedWork ||
workItem?.completedWork
), ),
height: "10px", height: "10px",
}} }}
aria-valuenow={ aria-valuenow={
hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork) : 0 hasWorkItem
? NewWorkItem?.workItem?.completedWork ||
workItem?.completedWork
: 0
} }
aria-valuemin="0" aria-valuemin="0"
aria-valuemax={ aria-valuemax={
hasWorkItem ? (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork) : 0 hasWorkItem
? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
: 0
} }
></div> ></div>
</div> </div>

38
src/components/common/Loader.jsx
View File

@ -2,33 +2,33 @@ import React from "react";
const Loader = () => { const Loader = () => {
return ( return (
<div class="demo-inline-spacing"> <div className="demo-inline-spacing">
<div class="spinner-grow" role="status"> <div className="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow text-primary" role="status"> <div className="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow text-secondary" role="status"> <div className="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow text-success" role="status"> <div className="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow text-danger" role="status"> <div className="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow text-warning" role="status"> <div className="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow text-info" role="status"> <div className="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow text-light" role="status"> <div className="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow text-dark" role="status"> <div className="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span> <span className="visually-hidden">Loading...</span>
</div> </div>
</div> </div>
); );

16
src/components/master/DeleteMaster.jsx
View File

@ -3,18 +3,18 @@ import axios from "axios";
const API_URL = "http://localhost:5000/mastersdata"; const API_URL = "http://localhost:5000/mastersdata";
const DeleteMaster = ({ master, onClose }) => {
const DeleteMaster = ({ master,onClose}) => {
const [loader, setLoader] = useState(false); const [loader, setLoader] = useState(false);
const handleDelete = () => { const handleDelete = () => {
const index = mastersdata[master?.masterType]?.findIndex(item => String(item?.id) === String(master?.item?.id)); const index = mastersdata[master?.masterType]?.findIndex(
console.log(index) (item) => String(item?.id) === String(master?.item?.id)
);
console.log(index);
if (index !== -1) { if (index !== -1) {
mastersdata[master?.masterType].splice(index, 1); mastersdata[master?.masterType].splice(index, 1);
} }
onClose() onClose();
}; };
return ( return (
@ -27,8 +27,8 @@ const DeleteMaster = ({ master,onClose}) => {
onClick={handleDelete} onClick={handleDelete}
> >
{loader ? ( {loader ? (
<div class="spinner-border text-primary" role="status"> <div className="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
</div> </div>
) : ( ) : (
"Delete" "Delete"

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

@ -1,5 +1,9 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { cacheData, getCachedData, getCachedProfileData } from "../../slices/apiDataManager"; import {
cacheData,
getCachedData,
getCachedProfileData,
} from "../../slices/apiDataManager";
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
import AttendanceLog from "../../components/Activities/AttendcesLogs"; import AttendanceLog from "../../components/Activities/AttendcesLogs";
import Attendance from "../../components/Activities/Attendance"; import Attendance from "../../components/Activities/Attendance";
@ -10,23 +14,22 @@ import Regularization from "../../components/Activities/Regularization";
import { useAttendace } from "../../hooks/useAttendance"; import { useAttendace } from "../../hooks/useAttendance";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice"; import { setProjectId } from "../../slices/localVariablesSlice";
import {markCurrentAttendance} from "../../slices/apiSlice/attendanceAllSlice"; import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
import { hasUserPermission } from "../../utils/authUtils"; import { hasUserPermission } from "../../utils/authUtils";
import {useHasUserPermission} from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {REGULARIZE_ATTENDANCE} from "../../utils/constants"; import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
const AttendancePage = () => const AttendancePage = () => {
{ const loginUser = getCachedProfileData();
const loginUser = getCachedProfileData() var selectedProject = useSelector((store) => store.localVariables.projectId);
var selectedProject = useSelector( ( store ) => store.localVariables.projectId ) const { projects, loading: projectLoading } = useProjects();
const {projects,loading:projectLoading} = useProjects() const { attendance, loading: attLoading } = useAttendace(selectedProject);
const {attendance,loading:attLoading} = useAttendace(selectedProject) const [attendances, setAttendances] = useState();
const[attendances,setAttendances] = useState()
const [empRoles, setEmpRoles] = useState(null); const [empRoles, setEmpRoles] = useState(null);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [ modelConfig, setModelConfig ] = useState(); const [modelConfig, setModelConfig] = useState();
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE) const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
const dispatch = useDispatch() const dispatch = useDispatch();
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
time: "", time: "",
@ -34,7 +37,6 @@ const AttendancePage = () =>
date: new Date().toLocaleDateString(), date: new Date().toLocaleDateString(),
}); });
const getRole = (roleId) => { const getRole = (roleId) => {
if (!empRoles) return "Unassigned"; if (!empRoles) return "Unassigned";
if (!roleId) return "Unassigned"; if (!roleId) return "Unassigned";
@ -46,55 +48,53 @@ const AttendancePage = () =>
setIsCreateModalOpen(true); setIsCreateModalOpen(true);
}; };
const handleModalData = (employee) => {
const handleModalData =(employee)=>{
setModelConfig(employee); setModelConfig(employee);
} };
const closeModal = () => { const closeModal = () => {
setModelConfig(null); setModelConfig(null);
setIsCreateModalOpen(false); setIsCreateModalOpen(false);
const modalElement = document.getElementById("check-Out-modal"); const modalElement = document.getElementById("check-Out-modal");
if (modalElement) { if (modalElement) {
modalElement.classList.remove('show'); modalElement.classList.remove("show");
modalElement.style.display = 'none'; modalElement.style.display = "none";
document.body.classList.remove('modal-open'); document.body.classList.remove("modal-open");
document.querySelector('.modal-backdrop').remove(); document.querySelector(".modal-backdrop").remove();
} }
}; };
const handleSubmit = (formData) => {
const handleSubmit = ( formData ) =>{ dispatch(markCurrentAttendance(formData))
dispatch( markCurrentAttendance( formData ) ).then( ( action ) => .then((action) => {
{ const updatedAttendance = attendances.map((item) =>
const updatedAttendance = attendances.map(item =>
item.employeeId === action.payload.employeeId item.employeeId === action.payload.employeeId
? { ...item, ...action.payload } ? { ...item, ...action.payload }
: item : item
); );
cacheData("Attendance", { data: updatedAttendance, projectId: selectedProject }) cacheData("Attendance", {
setAttendances(updatedAttendance) data: updatedAttendance,
showToast("Attedance Marked Successfully","success") projectId: selectedProject,
});
setAttendances(updatedAttendance);
showToast("Attedance Marked Successfully", "success");
}) })
.catch( ( error ) => .catch((error) => {
{ showToast(error.message, "error");
showToast(error.message,"error")
}); });
}; };
useEffect(() => { useEffect(() => {
if (modelConfig !== null) { if (modelConfig !== null) {
openModel(); openModel();
} }
}, [modelConfig,isCreateModalOpen]); }, [modelConfig, isCreateModalOpen]);
useEffect(()=>{ useEffect(() => {
setAttendances(attendance) setAttendances(attendance);
},[attendance]) }, [attendance]);
useEffect( () => useEffect(() => {
{ dispatch(setProjectId(projects[0]?.id));
dispatch(setProjectId(projects[0]?.id)) }, [projects]);
},[projects])
return ( return (
<> <>
@ -106,7 +106,11 @@ const AttendancePage = () =>
tabindex="-1" tabindex="-1"
aria-hidden="true" aria-hidden="true"
> >
<AttendanceModel modelConfig={modelConfig} closeModal={closeModal} handleSubmitForm={handleSubmit}/> <AttendanceModel
modelConfig={modelConfig}
closeModal={closeModal}
handleSubmitForm={handleSubmit}
/>
</div> </div>
)} )}
@ -117,59 +121,69 @@ const AttendancePage = () =>
{ label: "Attendance", link: null }, { label: "Attendance", link: null },
]} ]}
></Breadcrumb> ></Breadcrumb>
<div class="nav-align-top nav-tabs-shadow"> <div className="nav-align-top nav-tabs-shadow">
<ul class="nav nav-tabs" role="tablist"> <ul className="nav nav-tabs" role="tablist">
<div <div
className="dataTables_length text-start py-2 px-2" className="dataTables_length text-start py-2 px-2"
id="DataTables_Table_0_length" id="DataTables_Table_0_length"
> >
{ {loginUser && loginUser?.projects.length > 1 && (
((loginUser && loginUser?.projects.length > 1) ) && (<label> <label>
<select <select
name="DataTables_Table_0_length" name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
className="form-select form-select-sm" className="form-select form-select-sm"
value={selectedProject} value={selectedProject}
onChange={(e)=>dispatch(setProjectId(e.target.value))} onChange={(e) => dispatch(setProjectId(e.target.value))}
aria-label="" aria-label=""
> >
{!projectLoading && projects?.filter(project => {!projectLoading &&
loginUser?.projects?.map(Number).includes(project.id)).map((project)=>( projects
?.filter((project) =>
loginUser?.projects?.map(Number).includes(project.id)
)
.map((project) => (
<option value={project.id}>{project.name}</option> <option value={project.id}>{project.name}</option>
))} ))}
{projectLoading && <option value="Loading..." disabled>Loading...</option> } {projectLoading && (
<option value="Loading..." disabled>
Loading...
</option>
)}
</select> </select>
</label>) </label>
} )}
</div> </div>
</ul> </ul>
<ul class="nav nav-tabs" role="tablist"> <ul className="nav nav-tabs" role="tablist">
<li class="nav-item"> <li className="nav-item">
<button <button
type="button" type="button"
class="nav-link active" className="nav-link active"
role="tab" role="tab"
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target="#navs-top-home" data-bs-target="#navs-top-home"
aria-controls="navs-top-home" aria-controls="navs-top-home"
aria-selected="true"> aria-selected="true"
>
All All
</button> </button>
</li> </li>
<li class="nav-item"> <li className="nav-item">
<button <button
type="button" type="button"
class="nav-link" className="nav-link"
role="tab" role="tab"
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target="#navs-top-profile" data-bs-target="#navs-top-profile"
aria-controls="navs-top-profile" aria-controls="navs-top-profile"
aria-selected="false"> aria-selected="false"
>
Logs Logs
</button> </button>
</li> </li>
<li className={`nav-item ${!DoRegularized && 'd-none'}`}> <li className={`nav-item ${!DoRegularized && "d-none"}`}>
<button <button
type="button" type="button"
className="nav-link " className="nav-link "
@ -177,42 +191,54 @@ const AttendancePage = () =>
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target="#navs-top-messages" data-bs-target="#navs-top-messages"
aria-controls="navs-top-messages" aria-controls="navs-top-messages"
aria-selected="false"> aria-selected="false"
>
Regularization Regularization
</button> </button>
</li> </li>
</ul> </ul>
<div class="tab-content attedanceTabs py-2"> <div className="tab-content attedanceTabs py-2">
{projectLoading && (<span>Loading..</span>)} {projectLoading && <span>Loading..</span>}
{(!projectLoading && !attendances) && <span>Not Found</span>} {!projectLoading && !attendances && <span>Not Found</span>}
{ (projects && projects.length > 0 ) && ( {projects && projects.length > 0 && (
<> <>
<div className="tab-pane fade show active py-0" id="navs-top-home" role="tabpanel" key={projects.id}> <div
className="tab-pane fade show active py-0"
<Attendance attendance={attendances} handleModalData={handleModalData} getRole={getRole} /> id="navs-top-home"
role="tabpanel"
key={projects.id}
>
<Attendance
attendance={attendances}
handleModalData={handleModalData}
getRole={getRole}
/>
</div> </div>
<div class="tab-pane fade" id="navs-top-profile" role="tabpanel"> <div
className="tab-pane fade"
id="navs-top-profile"
role="tabpanel"
>
<AttendanceLog <AttendanceLog
attendance={attendances} attendance={attendances}
handleModalData={handleModalData} handleModalData={handleModalData}
projectId={selectedProject} projectId={selectedProject}
/> />
</div> </div>
<div className="tab-pane fade" id="navs-top-messages" role="tabpanel"> <div
className="tab-pane fade"
id="navs-top-messages"
role="tabpanel"
>
<Regularization <Regularization
attendance={attendances} attendance={attendances}
handleRequest ={handleSubmit} handleRequest={handleSubmit}
/> />
</div> </div>
</> </>
)} )}
</div> </div>
</div> </div>
</div> </div>
</> </>
); );

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

@ -6,10 +6,10 @@ import { useProjects } from "../../hooks/useProjects";
import { setProjectId } from "../../slices/localVariablesSlice"; import { setProjectId } from "../../slices/localVariablesSlice";
import { useProfile } from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import {formatDate} from "../../utils/dateUtils"; import { formatDate } from "../../utils/dateUtils";
import GlobalModel from "../../components/common/GlobalModel"; import GlobalModel from "../../components/common/GlobalModel";
import AssignRoleModel from "../../components/Project/AssignRole"; import AssignRoleModel from "../../components/Project/AssignRole";
import {ReportTask} from "../../components/Activities/ReportTask"; import { ReportTask } from "../../components/Activities/ReportTask";
import ReportTaskComments from "../../components/Activities/ReportTaskComments"; import ReportTaskComments from "../../components/Activities/ReportTaskComments";
const DailyTask = () => { const DailyTask = () => {
@ -22,59 +22,63 @@ const DailyTask = () => {
const selectedProject = useSelector( const selectedProject = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
); );
const dispatch = useDispatch( selectedProject ); const dispatch = useDispatch(selectedProject);
const { const {
TaskList, TaskList,
loading: task_loading, loading: task_loading,
error: task_error, error: task_error,
refetch refetch,
} = useTaskList(selectedProject); } = useTaskList(selectedProject);
const [TaskLists, setTaskLists] = useState([]); const [TaskLists, setTaskLists] = useState([]);
useEffect(() => { useEffect(() => {
setTaskLists(TaskList); setTaskLists(TaskList);
}, [ TaskList, selectedProject ] ); }, [TaskList, selectedProject]);
const [ selectedTask, selectTask ] = useState( null ) const [selectedTask, selectTask] = useState(null);
const [comments,setComment] = useState(null) const [comments, setComment] = useState(null);
const [ isModalOpen, setIsModalOpen ] = useState( false ); const [isModalOpen, setIsModalOpen] = useState(false);
const [ isModalOpenComment, setIsModalOpenComment ] = useState( false ) const [isModalOpenComment, setIsModalOpenComment] = useState(false);
const openModal = () => setIsModalOpen(true); const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen( false ); const closeModal = () => setIsModalOpen(false);
const openComment = () =>setIsModalOpenComment(true) const openComment = () => setIsModalOpenComment(true);
const closeCommentModal =()=>setIsModalOpenComment(false) const closeCommentModal = () => setIsModalOpenComment(false);
const handletask = (task) => const handletask = (task) => {
{ selectTask(task);
selectTask(task) openModal();
openModal() };
}
return ( return (
<> <>
<div <div
className={`modal fade ${isModalOpen ? 'show' : ''}`} className={`modal fade ${isModalOpen ? "show" : ""}`}
tabIndex="-1" tabIndex="-1"
role="dialog" role="dialog"
style={{ display: isModalOpen ? 'block' : 'none' }} style={{ display: isModalOpen ? "block" : "none" }}
aria-hidden={!isModalOpen} aria-hidden={!isModalOpen}
> >
<ReportTask report={selectedTask} closeModal={ closeModal} refetch={refetch} /> <ReportTask
report={selectedTask}
closeModal={closeModal}
refetch={refetch}
/>
</div> </div>
<div <div
className={`modal fade ${isModalOpenComment ? 'show' : ''}`} className={`modal fade ${isModalOpenComment ? "show" : ""}`}
tabIndex="-1" tabIndex="-1"
role="dialog" role="dialog"
style={{ display: isModalOpenComment ? 'block' : 'none' }} style={{ display: isModalOpenComment ? "block" : "none" }}
aria-hidden={!isModalOpenComment} aria-hidden={!isModalOpenComment}
> >
<ReportTaskComments commentsData={comments} closeModal={ closeCommentModal} /> <ReportTaskComments
commentsData={comments}
closeModal={closeCommentModal}
/>
</div> </div>
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb <Breadcrumb
data={[ data={[
@ -147,9 +151,11 @@ const DailyTask = () => {
return ( return (
<React.Fragment key={index}> <React.Fragment key={index}>
{/* Main Row */} {/* Main Row */}
<tr > <tr>
<td> <td>
<div className="d-flex justify-content-center align-items-center" data-bs-toggle="collapse" <div
className="d-flex justify-content-center align-items-center"
data-bs-toggle="collapse"
data-bs-target={`#${accordionId}`} data-bs-target={`#${accordionId}`}
aria-expanded="false" aria-expanded="false"
aria-controls={accordionId} aria-controls={accordionId}
@ -158,26 +164,35 @@ const DailyTask = () => {
<a <a
href="#" href="#"
className="text-heading text-truncate" className="text-heading text-truncate"
> >
<i class='bx bx-chevron-right'></i> <i className="bx bx-chevron-right"></i>
</a> </a>
</div> </div>
</div> </div>
</td> </td>
<td className="flex-wrap"> <td className="flex-wrap">
{task.workItem.activityMaster.activityName || "No Activity Name"} {task.workItem.activityMaster.activityName ||
"No Activity Name"}
</td> </td>
<td>{task.plannedTask || "NA"}</td> <td>{task.plannedTask || "NA"}</td>
<td>{task.completedTask}</td> <td>{task.completedTask}</td>
<td>{formatDate( task.assignmentDate )}</td> <td>{formatDate(task.assignmentDate)}</td>
<td className="text-center"> <td className="text-center">
<div class="d-flex align-items-center avatar-group justify-content-center"> <div className="d-flex align-items-center avatar-group justify-content-center">
{task.teamMembers.map( ( member ) => ( {task.teamMembers.map((member) => (
<div
<div key={member.id} data-bs-toggle="tooltip" data-bs-html="true" data-popup="tooltip-custom" data-bs-placement="top" title={`${member.firstName} ${member.lastName}`} className="avatar avatar-xs"> key={member.id}
{/* <img src="..." alt="Avatar" class="rounded-circle pull-up" /> */} data-bs-toggle="tooltip"
<span className="avatar-initial rounded-circle bg-label-primary">{member?.firstName.slice(0,1) }</span> data-bs-html="true"
data-popup="tooltip-custom"
data-bs-placement="top"
title={`${member.firstName} ${member.lastName}`}
className="avatar avatar-xs"
>
{/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
<span className="avatar-initial rounded-circle bg-label-primary">
{member?.firstName.slice(0, 1)}
</span>
</div> </div>
))} ))}
</div> </div>
@ -187,10 +202,9 @@ const DailyTask = () => {
<button <button
type="button" type="button"
className="btn btn-xs btn-primary" className="btn btn-xs btn-primary"
onClick={() => onClick={() => {
{ selectTask(task);
selectTask( task ) openModal();
openModal()
}} }}
> >
Report Report
@ -198,16 +212,14 @@ const DailyTask = () => {
<button <button
type="button" type="button"
className="btn btn-xs btn-primary ms-2" className="btn btn-xs btn-primary ms-2"
onClick={() => onClick={() => {
{ setComment(task);
setComment( task ) openComment();
openComment()
}} }}
> >
Comment Comment
</button> </button>
</div> </div>
</td> </td>
</tr> </tr>

2
src/pages/authentication/LoginPage.jsx
View File

@ -107,7 +107,7 @@ const LoginPage = () => {
aria-describedby="password" aria-describedby="password"
/> />
<span <span
class="input-group-text cursor-pointer" className="input-group-text cursor-pointer"
onClick={() => setHidepass(!hidepass)} onClick={() => setHidepass(!hidepass)}
> >
{hidepass ? ( {hidepass ? (

4
src/pages/authentication/ResetPasswordPage.jsx
View File

@ -118,7 +118,7 @@ const ResetPasswordPage = () => {
aria-describedby="password" aria-describedby="password"
/> />
<span <span
class="input-group-text lcursor-pointer" className="input-group-text lcursor-pointer"
onClick={() => setHidepass(!hidepass)} onClick={() => setHidepass(!hidepass)}
> >
{hidepass ? ( {hidepass ? (
@ -154,7 +154,7 @@ const ResetPasswordPage = () => {
aria-describedby="password" aria-describedby="password"
/> />
<span <span
class="input-group-text cursor-pointer" className="input-group-text cursor-pointer"
onClick={() => setHidepass(!hidepass)} onClick={() => setHidepass(!hidepass)}
> >
{hidepass ? ( {hidepass ? (

26
src/utils/axiosClient.jsx
View File

@ -44,17 +44,25 @@ axiosClient.interceptors.response.use(
originalRequest._toastShown = true; originalRequest._toastShown = true;
if (error.code === "ERR_CONNECTION_REFUSED") { if (error.code === "ERR_CONNECTION_REFUSED") {
console.error("Connection refused. Please ensure the server is running."); console.error(
showToast("Unable to connect to the server. Please try again later.", "error"); "Connection refused. Please ensure the server is running."
);
showToast(
"Unable to connect to the server. Please try again later.",
"error"
);
} else if (error.code === "ERR_NETWORK") { } else if (error.code === "ERR_NETWORK") {
console.error("Network error: Unable to reach the server."); console.error("Network error: Unable to reach the server.");
showToast("Server is unreachable. Try again later!", "error"); showToast("Server is unreachable. Try again later!", "error");
redirectToLogin(); redirectToLogin();
} else if (error.code === "ECONNABORTED") { } else if (error.code === "ECONNABORTED") {
console.error("Request timed out."); console.error("Request timed out.");
showToast("The request took too long. Please try again later.", "error"); showToast(
"The request took too long. Please try again later.",
"error"
);
} else if (error.response) { } else if (error.response) {
showToast(error.response.data.message,"error") showToast(error.response.data.message, "error");
if (error.response.status === 401 && !originalRequest._retry) { if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true; originalRequest._retry = true;
@ -89,10 +97,12 @@ axiosClient.interceptors.response.use(
redirectToLogin(); redirectToLogin();
return Promise.reject(err); return Promise.reject(err);
} }
} else } else {
{ showToast(
error.response.data?.message ||
showToast(error.response.data?.message || "An error occurred. Please try again.", "error"); "An error occurred. Please try again.",
"error"
);
} }
} else { } else {
console.error("An unknown error occurred:", error.message); console.error("An unknown error occurred:", error.message);