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

Merge pull request 'ProjectUpdationForOrganizaion : added Two fields inside Project create and update form - Promoter and PMC and added Remember me' (#442) from ProjectUpdationForOrganizaion into Organization_Management

Browse Source 
Reviewed-on: #442
Merged
This commit is contained in:
pramod.mahajan 2025-09-28 18:44:30 +00:00
commit 22514b1fa0
41 changed files with 1630 additions and 1824 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/img/orglogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

2
src/components/Documents/Documents.jsx
View File

@ -118,7 +118,7 @@ const Documents = ({ Document_Entity, Entity }) => {
return ( return (
<DocumentContext.Provider value={contextValues}> <DocumentContext.Provider value={contextValues}>
<div className="mt-5"> <div className="mt-5">
<div className="card d-flex p-2"> <div className="card page-min-h d-flex p-2">
<div className="row align-items-center"> <div className="row align-items-center">
{/* Search */} {/* Search */}
<div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center"> <div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">

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

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

7
src/components/Employee/EmployeeList.jsx
View File

@ -1,7 +0,0 @@
import React from "react";
const EmployeeList = () => {
return <div>EmployeeList</div>;
};
export default EmployeeList;

124
src/components/Employee/EmployeeSchema.jsx Normal file
View File

@ -0,0 +1,124 @@
import { z } from "zod"
const mobileNumberRegex = /^[0-9]\d{9}$/;
export const employeeSchema =
z.object({
firstName: z.string().min(1, { message: "First Name is required" }),
middleName: z.string().optional(),
lastName: z.string().min(1, { message: "Last Name is required" }),
email: z
.string()
.max(80, "Email cannot exceed 80 characters")
.optional()
.refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
message: "Invalid email format",
})
.refine(
(val) => {
if (!val) return true;
const [local, domain] = val.split("@");
return (
val.length <= 320 && local?.length <= 64 && domain?.length <= 255
);
},
{
message: "Email local or domain part is too long",
}
),
currentAddress: z
.string()
.min(1, { message: "Current Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }),
birthDate: z
.string()
.min(1, { message: "Birth Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date();
},
{
message: "Birth date cannot be in the future",
}
),
joiningDate: z
.string()
.min(1, { message: "Joining Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date();
},
{
message: "Joining date cannot be in the future",
}
),
emergencyPhoneNumber: z
.string()
.min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
emergencyContactPerson: z
.string()
.min(1, { message: "Emergency Contact Person is required" })
.regex(/^[A-Za-z\s]+$/, {
message: "Emergency Contact Person must contain only letters",
}),
aadharNumber: z
.string()
.optional()
.refine((val) => !val || /^\d{12}$/.test(val), {
message: "Aadhar card must be exactly 12 digits long",
}),
gender: z
.string()
.min(1, { message: "Gender is required" })
.refine((val) => val !== "Select Gender", {
message: "Please select a gender",
}),
panNumber: z
.string()
.optional()
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
message: "Invalid PAN number",
}),
permanentAddress: z
.string()
.min(1, { message: "Permanent Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }),
phoneNumber: z
.string()
.min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
jobRoleId: z.string().min(1, { message: "Role is required" }),
organizationId:z.string().min(1,{message:"Organization is required"}),
hasApplicationAccess:z.boolean().default(false),
}).refine((data) => {
if (data.hasApplicationAccess) {
return data.email && data.email.trim() !== "";
}
return true;
}, {
message: "Email is required when employee has access",
path: ["email"],
});
export const defatEmployeeObj = {
firstName: "",
middleName: "",
lastName: "",
email: "",
currentAddress: "",
birthDate: "",
joiningDate: "",
emergencyPhoneNumber: "",
emergencyContactPerson: "",
aadharNumber: "",
gender: "",
panNumber: "",
permanentAddress: "",
phoneNumber: "",
jobRoleId: null,
organizationId:"",
hasApplicationAccess:false
}

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

@ -1,36 +1,37 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import showToast from "../../services/toastService";
import EmployeeRepository from "../../repositories/EmployeeRepository";
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 useMaster from "../../hooks/masterHook/useMaster"; import useMaster from "../../hooks/masterHook/useMaster";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice"; import { changeMaster } from "../../slices/localVariablesSlice";
import { Link, useNavigate, useParams } from "react-router-dom"; import { Link, useNavigate, useParams } from "react-router-dom";
import { formatDate } from "../../utils/dateUtils"; import { formatDate } from "../../utils/dateUtils";
import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
import { import {
cacheData, useEmployeeProfile,
clearCacheKey, useUpdateEmployee,
getCachedData, } from "../../hooks/useEmployees";
} from "../../slices/apiDataManager";
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { useMutation } from "@tanstack/react-query";
import Label from "../common/Label"; import Label from "../common/Label";
import DatePicker from "../common/DatePicker"; import DatePicker from "../common/DatePicker";
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
const mobileNumberRegex = /^[0-9]\d{9}$/; import { useOrganizationsList } from "../../hooks/useOrganization";
import { ITEMS_PER_PAGE } from "../../utils/constants";
const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => { const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { mutate: updateEmployee, isPending } = useUpdateEmployee(); const { mutate: updateEmployee, isPending } = useUpdateEmployee();
const {
data: organzationList,
isLoading,
isError,
error: EempError,
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
const { const {
employee, employee,
error, error,
loading: empLoading, loading: empLoading,
refetch refetch,
} = useEmployeeProfile(employeeId); } = useEmployeeProfile(employeeId);
useEffect(() => { useEffect(() => {
@ -38,6 +39,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}, [employeeId]); }, [employeeId]);
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();
@ -45,98 +47,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
const [currentAddressLength, setCurrentAddressLength] = useState(0); const [currentAddressLength, setCurrentAddressLength] = useState(0);
const [permanentAddressLength, setPermanentAddressLength] = useState(0); const [permanentAddressLength, setPermanentAddressLength] = useState(0);
const userSchema = z.object({
...(employeeId ? { id: z.string().optional() } : {}),
firstName: z.string().min(1, { message: "First Name is required" }),
middleName: z.string().optional(),
lastName: z.string().min(1, { message: "Last Name is required" }),
email: z
.string()
.max(80, "Email cannot exceed 80 characters")
.optional()
.refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
message: "Invalid email format",
})
.refine(
(val) => {
if (!val) return true;
const [local, domain] = val.split("@");
return (
val.length <= 320 && local?.length <= 64 && domain?.length <= 255
);
},
{
message: "Email local or domain part is too long",
}
),
currentAddress: z
.string()
.min(1, { message: "Current Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }),
birthDate: z
.string()
.min(1, { message: "Birth Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date();
},
{
message: "Birth date cannot be in the future",
}
),
joiningDate: z
.string()
.min(1, { message: "Joining Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date();
},
{
message: "Joining date cannot be in the future",
}
),
emergencyPhoneNumber: z
.string()
.min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
emergencyContactPerson: z
.string()
.min(1, { message: "Emergency Contact Person is required" })
.regex(/^[A-Za-z\s]+$/, {
message: "Emergency Contact Person must contain only letters",
}),
aadharNumber: z
.string()
.optional()
.refine((val) => !val || /^\d{12}$/.test(val), {
message: "Aadhar card must be exactly 12 digits long",
}),
gender: z
.string()
.min(1, { message: "Gender is required" })
.refine((val) => val !== "Select Gender", {
message: "Please select a gender",
}),
panNumber: z
.string()
.optional()
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
message: "Invalid PAN number",
}),
permanentAddress: z
.string()
.min(1, { message: "Permanent Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }),
phoneNumber: z
.string()
.min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
jobRoleId: z.string().min(1, { message: "Role is required" }),
});
useEffect(() => { useEffect(() => {
refetch() refetch();
}, []) }, []);
const { const {
register, register,
@ -147,25 +60,8 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
reset, reset,
getValues, getValues,
} = useForm({ } = useForm({
resolver: zodResolver(userSchema), resolver: zodResolver(employeeSchema),
defaultValues: { defaultValues: defatEmployeeObj,
id: currentEmployee?.id || null,
firstName: currentEmployee?.firstName || "",
middleName: currentEmployee?.middleName || "",
lastName: currentEmployee?.lastName || "",
email: currentEmployee?.email || "",
currentAddress: currentEmployee?.currentAddress || "",
birthDate: formatDate(currentEmployee?.birthDate) || "",
joiningDate: formatDate(currentEmployee?.joiningDate) || "",
emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "",
emergencyContactPerson: currentEmployee?.emergencyContactPerson || "",
aadharNumber: currentEmployee?.aadharNumber || "",
gender: currentEmployee?.gender || "",
panNumber: currentEmployee?.panNumber || "",
permanentAddress: currentEmployee?.permanentAddress || "",
phoneNumber: currentEmployee?.phoneNumber || "",
jobRoleId: currentEmployee?.jobRoleId.toString() || null,
},
mode: "onChange", mode: "onChange",
}); });
@ -176,7 +72,13 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
data.email = null; data.email = null;
} }
updateEmployee({ ...data, IsAllEmployee }, { const payload = { ...data, IsAllEmployee };
if (employeeId) {
payload.id = employeeId;
}
updateEmployee(payload, {
onSuccess: () => { onSuccess: () => {
reset(); reset();
onClosed(); onClosed();
@ -184,7 +86,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}); });
}; };
useEffect(() => { useEffect(() => {
if (!loading && !error && employee) { if (!loading && !error && employee) {
setCurrentEmployee(employee); setCurrentEmployee(employee);
@ -195,37 +96,47 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
reset( reset(
currentEmployee currentEmployee
? { ? {
id: currentEmployee.id || null, id: currentEmployee.id || null,
firstName: currentEmployee.firstName || "", firstName: currentEmployee.firstName || "",
middleName: currentEmployee.middleName || "", middleName: currentEmployee.middleName || "",
lastName: currentEmployee.lastName || "", lastName: currentEmployee.lastName || "",
email: currentEmployee.email || "", email: currentEmployee.email || "",
currentAddress: currentEmployee.currentAddress || "", currentAddress: currentEmployee.currentAddress || "",
birthDate: formatDate(currentEmployee.birthDate) || "", birthDate: formatDate(currentEmployee.birthDate) || "",
joiningDate: formatDate(currentEmployee.joiningDate) || "", joiningDate: formatDate(currentEmployee.joiningDate) || "",
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "", emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
emergencyContactPerson: emergencyContactPerson:
currentEmployee.emergencyContactPerson || "", currentEmployee.emergencyContactPerson || "",
aadharNumber: currentEmployee.aadharNumber || "", aadharNumber: currentEmployee.aadharNumber || "",
gender: currentEmployee.gender || "", gender: currentEmployee.gender || "",
panNumber: currentEmployee.panNumber || "", panNumber: currentEmployee.panNumber || "",
permanentAddress: currentEmployee.permanentAddress || "", permanentAddress: currentEmployee.permanentAddress || "",
phoneNumber: currentEmployee.phoneNumber || "", phoneNumber: currentEmployee.phoneNumber || "",
jobRoleId: currentEmployee.jobRoleId?.toString() || "", jobRoleId: currentEmployee.jobRoleId?.toString() || "",
} organizationId: currentEmployee.organizationId || "",
hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
}
: {} : {}
); );
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0); setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0); setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
}, [currentEmployee, reset]); }, [currentEmployee, reset]);
const hasAccessAplication = watch("hasApplicationAccess");
return ( return (
<> <>
<form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2"> <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
<div className="text-center"><p className="fs-5 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div> <div className="text-center">
<p className="fs-5 fw-semibold">
{" "}
{employee ? "Update Employee" : "Create Employee"}
</p>{" "}
</div>
<div className="row mb-3"> <div className="row mb-3">
<div className="col-sm-4"> <div className="col-sm-4">
<Label className="form-text text-start" required>First Name</Label> <Label className="form-text text-start" required>
First Name
</Label>
<input <input
type="text" type="text"
name="firstName" name="firstName"
@ -244,7 +155,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}} }}
/> />
{errors.firstName && ( {errors.firstName && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}> <div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.firstName.message} {errors.firstName.message}
</div> </div>
)} )}
@ -267,14 +181,18 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}} }}
/> />
{errors.middleName && ( {errors.middleName && (
<div className="danger-text text-start " style={{ fontSize: "12px" }}> <div
className="danger-text text-start "
style={{ fontSize: "12px" }}
>
{errors.middleName.message} {errors.middleName.message}
</div> </div>
)} )}
</div> </div>
<div className="col-sm-4"> <div className="col-sm-4">
<Label className="form-text text-start" required>Last Name</Label> <Label className="form-text text-start" required>
Last Name
</Label>
<input <input
type="text" type="text"
{...register("lastName", { {...register("lastName", {
@ -291,16 +209,24 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}} }}
/> />
{errors.lastName && ( {errors.lastName && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}> <div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.lastName.message} {errors.lastName.message}
</div> </div>
)} )}
</div> </div>
</div> </div>
<div className="row mb-3"> <div className="row mb-3">
<div className="col-sm-6"> <div className="col-sm-6">
<div className="form-text text-start">Email</div> <Label
htmlFor="email"
className="text-start form-text"
required={hasAccessAplication}
>
Email
</Label>
<input <input
type="email" type="email"
id="email" id="email"
@ -321,7 +247,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
)} )}
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<Label className="form-text text-start" required>Phone Number</Label> <Label className="form-text text-start" required>
Phone Number
</Label>
<input <input
type="text" type="text"
keyboardType="numeric" keyboardType="numeric"
@ -345,7 +273,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
<div className="row mb-3"></div> <div className="row mb-3"></div>
<div className="row mb-3"> <div className="row mb-3">
<div className="col-sm-4"> <div className="col-sm-4">
<Label className="form-text text-start" required>Gender</Label> <Label className="form-text text-start" required>
Gender
</Label>
<div className="input-group"> <div className="input-group">
<select <select
@ -387,7 +317,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
</div> </div>
{errors.birthDate && ( {errors.birthDate && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}> <div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.birthDate.message} {errors.birthDate.message}
</div> </div>
)} )}
@ -408,7 +341,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
</div> </div>
{errors.joiningDate && ( {errors.joiningDate && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}> <div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.joiningDate.message} {errors.joiningDate.message}
</div> </div>
)} )}
@ -416,7 +352,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
</div> </div>
<div className="row mb-3"> <div className="row mb-3">
<div className="col-sm-6"> <div className="col-sm-6">
<Label className="form-text text-start" required>Current Address</Label> <Label className="form-text text-start" required>
Current Address
</Label>
<textarea <textarea
id="currentAddress" id="currentAddress"
@ -428,15 +366,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
maxLength={500} maxLength={500}
onChange={(e) => { onChange={(e) => {
setCurrentAddressLength(e.target.value.length); setCurrentAddressLength(e.target.value.length);
// let react-hook-form still handle it
register("currentAddress").onChange(e); register("currentAddress").onChange(e);
}} }}
></textarea> ></textarea>
<div className="text-end muted"> <div className="text-end muted">
<small> <small> {500 - currentAddressLength} characters left</small>
{" "}
{500 - currentAddressLength} characters left
</small>
</div> </div>
{errors.currentAddress && ( {errors.currentAddress && (
<div <div
@ -466,9 +400,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}} }}
></textarea> ></textarea>
<div className="text-end muted"> <div className="text-end muted">
<small> <small>{500 - permanentAddressLength} characters left</small>
{500 - permanentAddressLength} characters left
</small>
</div> </div>
{errors.permanentAddress && ( {errors.permanentAddress && (
<div <div
@ -480,6 +412,55 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
)} )}
</div> </div>
</div> </div>
{/* -------------- */}
<div className="row mb-3">
<div className="col-sm-6">
<Label className="form-text text-start" required>
Organization
</Label>
<div className="input-group">
<select
className="form-select form-select-sm"
{...register("organizationId")}
id="organizationId"
aria-label=""
>
<option disabled value="">
Select Role
</option>
{organzationList?.data
.sort((a, b) => a?.name?.localeCompare(b?.name))
.map((item) => (
<option value={item?.id} key={item?.id}>
{item?.name}
</option>
))}
</select>
</div>
{errors.organizationId && (
<div
className="danger-text text-start justify-content-center"
style={{ fontSize: "12px" }}
>
{errors.organizationId.message}
</div>
)}
</div>
<div className="col-sm-6 d-flex align-items-center mt-2">
<label className="form-check-label d-flex align-items-center">
<input
type="checkbox"
className="form-check-input me-2"
{...register("hasApplicationAccess")}
/>
Has Application Access ?
</label>
</div>
</div>
{/* --------------- */}
<div className="row mb-3"> <div className="row mb-3">
{" "} {" "}
<div className="divider"> <div className="divider">
@ -488,7 +469,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
</div> </div>
<div className="row mb-3"> <div className="row mb-3">
<div className="col-sm-4"> <div className="col-sm-4">
<Label className="form-text text-start" required>Official Designation</Label> <Label className="form-text text-start" required>
Official Designation
</Label>
<div className="input-group"> <div className="input-group">
<select <select
className="form-select form-select-sm" className="form-select form-select-sm"
@ -601,15 +584,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
)} )}
</div> </div>
</div> </div>
{employeeId && (
<div className="row mb-3 d-none">
<div className="col-sm-12">
<input type="text" name="id" {...register("id")} />
</div>
</div>
)}
<div className="row text-end"> <div className="row text-end">
<div className="col-sm-12"> <div className="col-sm-12">
<button <button
@ -626,18 +600,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
disabled={isPending} disabled={isPending}
> >
{isPending {isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
? "Please Wait..."
: employeeId
? "Update"
: "Create"}
</button> </button>
</div> </div>
</div> </div>
</form> </form>
</> </>
); );
}; };

30
src/components/Organization/AssignOrg.jsx
View File

@ -93,8 +93,15 @@ const AssignOrg = ({ setStep }) => {
<div className="row text-black text-start mb-3"> <div className="row text-black text-start mb-3">
{/* Organization Info Display */} {/* Organization Info Display */}
<div className="col-12 mb-3"> <div className="col-12 mb-3">
<div className="d-flex justify-content-between align-items-center text-start mb-2"> <div className="d-flex justify-content-between align-items-center text-start mb-1">
<div className="fw-semibold text-wrap">{orgData.name}</div> <div className="d-flex flex-row gap-2 align-items-center text-wrap">
<img
src="/public/assets/img/orgLogo.png"
alt="logo"
width={40}
height={40}
/> <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
</div>
<div className="text-end"> <div className="text-end">
<button <button
type="button" type="button"
@ -106,7 +113,7 @@ const AssignOrg = ({ setStep }) => {
</div> </div>
</div> </div>
</div> </div>
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
{/* Contact Info */} {/* Contact Info */}
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
@ -114,7 +121,7 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-2 mb-0 fw-semibold" className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }} style={{ minWidth: "130px" }}
> >
Contact Person : <i className="bx bx-sm bx-user me-1" /> Contact Person :
</label> </label>
<div className="text-muted">{orgData.contactPerson}</div> <div className="text-muted">{orgData.contactPerson}</div>
</div> </div>
@ -125,7 +132,7 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-2 mb-0 fw-semibold" className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }} style={{ minWidth: "130px" }}
> >
Contact Number : <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
</label> </label>
<div className="text-muted">{orgData.contactNumber}</div> <div className="text-muted">{orgData.contactNumber}</div>
</div> </div>
@ -136,7 +143,7 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-2 mb-0 fw-semibold" className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }} style={{ minWidth: "130px" }}
> >
Email Address : <i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
</label> </label>
<div className="text-muted">{orgData.email}</div> <div className="text-muted">{orgData.email}</div>
</div> </div>
@ -147,7 +154,8 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-2 mb-0 fw-semibold" className="form-label me-2 mb-0 fw-semibold"
style={{ maxWidth: "130px" }} style={{ maxWidth: "130px" }}
> >
Service provider Id (SPRID) : <i className="bx bx-sm me-1 bx-barcode"></i>
Service Provider Id (SPRID) :
</label> </label>
<div className="text-muted">{orgData.sprid}</div> <div className="text-muted">{orgData.sprid}</div>
</div> </div>
@ -158,7 +166,7 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-1 mb-0 fw-semibold" className="form-label me-1 mb-0 fw-semibold"
style={{ minWidth: "130px" }} style={{ minWidth: "130px" }}
> >
Address : <i className='bx bx-sm me-1 bx-map'></i> Address :
</label> </label>
<div className="text-muted text-start">{orgData.address}</div> <div className="text-muted text-start">{orgData.address}</div>
</div> </div>
@ -233,11 +241,11 @@ const AssignOrg = ({ setStep }) => {
<div className="d-flex justify-content-between mt-5"> <div className="d-flex justify-content-between mt-5">
<button <button
type="button" type="button"
className="btn btn-xs btn-outline-secondary" className="btn btn-sm btn-outline-secondary"
onClick={handleBack} onClick={handleBack}
disabled={isPending} disabled={isPending}
> >
<i className="bx bx-left-arrow-alt"></i> Back <i className="bx bx-chevron-left"></i>Back
</button> </button>
<button <button
type="submit" type="submit"
@ -247,7 +255,7 @@ const AssignOrg = ({ setStep }) => {
{isPending {isPending
? "Please wait..." ? "Please wait..."
: flowType === "default" : flowType === "default"
? "Assign Organization" ? "Assign to Organization"
: "Assign to Project"} : "Assign to Project"}
</button> </button>
</div> </div>

4
src/components/Organization/ManagOrg.jsx
View File

@ -2,6 +2,7 @@ import React, { useEffect } from "react";
import { FormProvider, useForm } from "react-hook-form"; import { FormProvider, useForm } from "react-hook-form";
import { import {
useCreateOrganization, useCreateOrganization,
useOrganization,
useOrganizationModal, useOrganizationModal,
useUpdateOrganization, useUpdateOrganization,
} from "../../hooks/useOrganization"; } from "../../hooks/useOrganization";
@ -18,6 +19,7 @@ const ManagOrg = () => {
const { data: service, isLoading } = useGlobalServices(); const { data: service, isLoading } = useGlobalServices();
const { flowType, orgData, startStep, onOpen, onClose, prevStep } = const { flowType, orgData, startStep, onOpen, onClose, prevStep } =
useOrganizationModal(); useOrganizationModal();
const {data:organization,isLoading:organizationLoading,isError,error} = useOrganization(orgData?.id);
const method = useForm({ const method = useForm({
resolver: zodResolver(organizationSchema), resolver: zodResolver(organizationSchema),
@ -45,7 +47,7 @@ const ManagOrg = () => {
onOpen({ startStep: 1 }); onOpen({ startStep: 1 });
onClose(); onClose();
}); });
console.log(organization)
// Prefill form if editing // Prefill form if editing
useEffect(() => { useEffect(() => {
if (orgData) { if (orgData) {

2
src/components/Organization/OrgPickerFromSPId.jsx
View File

@ -78,7 +78,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
<div className="d-flex flex-row gap-2 text-start text-black "> <div className="d-flex flex-row gap-2 text-start text-black ">
<div className="mt-1"> <div className="mt-1">
<img <img
src="/public/assets/img/SP-Placeholdeer.svg" src="/public/assets/img/orgLogo.png"
alt="logo" alt="logo"
width={50} width={50}
height={50} height={50}

11
src/components/Organization/OrganizationModal.jsx
View File

@ -19,6 +19,7 @@ import AssignOrg from "./AssignOrg";
import ManagOrg from "./ManagOrg"; import ManagOrg from "./ManagOrg";
import OrgPickerFromSPId from "./OrgPickerFromSPId"; import OrgPickerFromSPId from "./OrgPickerFromSPId";
import OrgPickerfromTenant from "./OrgPickerfromTenant"; import OrgPickerfromTenant from "./OrgPickerfromTenant";
import ViewOrganization from "./ViewOrganization";
const OrganizationModal = () => { const OrganizationModal = () => {
const { isOpen, orgData, startStep, onOpen, onClose, onToggle } = const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
@ -53,7 +54,7 @@ const OrganizationModal = () => {
}; };
const RenderTitle = useMemo(() => { const RenderTitle = useMemo(() => {
if (orgData) { if (orgData && startStep === 3 ) {
return "Assign Organization"; return "Assign Organization";
} }
@ -70,8 +71,11 @@ const OrganizationModal = () => {
if (startStep === 3) { if (startStep === 3) {
return "Assign Organization"; return "Assign Organization";
} }
if(startStep === 5){
return "Organization Details"
}
return "Manage Organization"; return `${orgData ? "Update":"Create"} Organization`;
}, [startStep, orgData]); }, [startStep, orgData]);
const contentBody = ( const contentBody = (
@ -94,6 +98,9 @@ const OrganizationModal = () => {
{/* ---------- STEP 3: Add New Organization ---------- */} {/* ---------- STEP 3: Add New Organization ---------- */}
{startStep === 4 && <ManagOrg />} {startStep === 4 && <ManagOrg />}
{/* ---------- STEP 3: View Organization ---------- */}
{startStep === 5 && <ViewOrganization orgId={orgData}/>}
</div> </div>
); );

79
src/components/Organization/OrganizationSkeleton.jsx
View File

@ -42,3 +42,82 @@ export const OrgCardSkeleton = () => {
</div> </div>
); );
}; };
export const OrgDetailsSkeleton = () => {
return (
<div className="row text-start p-3">
{/* Header */}
<div className="col-12 mb-3">
<div className="d-flex justify-content-between align-items-center">
{/* Logo + Name */}
<div className="d-flex flex-row gap-2 align-items-center">
<SkeletonLine height={40} width={40} className="rounded-circle" />
<SkeletonLine height={18} width="180px" />
</div>
{/* Status Badge */}
<SkeletonLine height={20} width="70px" className="rounded-pill" />
</div>
</div>
{/* Section Title */}
<div className="d-flex text-secondary mb-2">
<SkeletonLine height={16} width="140px" />
</div>
{/* Contact Person */}
<div className="col-md-6 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="140px" />
</div>
</div>
{/* Contact Number */}
<div className="col-md-6 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="140px" />
</div>
</div>
{/* Email */}
<div className="col-md-12 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="220px" />
</div>
</div>
{/* SPRID */}
<div className="col-6 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="160px" />
</div>
</div>
{/* Employees */}
<div className="col-6 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="60px" />
</div>
</div>
{/* Address */}
<div className="col-12 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="100%" />
</div>
</div>
{/* Section Title 2 */}
<div className="d-flex text-secondary mb-2">
<SkeletonLine height={16} width="200px" />
</div>
</div>
);
};

2
src/components/Organization/OrganizationsList.jsx
View File

@ -129,7 +129,7 @@ const OrganizationsList = ({searchText}) => {
))} ))}
<td className="sticky-action-column "> <td className="sticky-action-column ">
<div className="d-flex justify-content-center gap-2"> <div className="d-flex justify-content-center gap-2">
<i className="bx bx-show text-primary cursor-pointer" ></i> <i className="bx bx-show text-primary cursor-pointer" onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
<i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i> <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
<i className="bx bx-trash text-danger cursor-pointer"></i> <i className="bx bx-trash text-danger cursor-pointer"></i>
</div> </div>

103
src/components/Organization/ViewOrganization.jsx Normal file
View File

@ -0,0 +1,103 @@
import React from "react";
import { useOrganization } from "../../hooks/useOrganization";
import { OrgDetailsSkeleton } from "./OrganizationSkeleton";
const VieworgDataanization = ({ orgId }) => {
const { data, isLoading, isError, error } = useOrganization(orgId);
if (isLoading) return <OrgDetailsSkeleton/>;
if (isError) return <div>{error.message}</div>;
return (
<div className="row text-black text-black text-start ">
{/* Header */}
<div className="col-12 mb-3">
<div className="d-flex justify-content-between align-items-center text-start mb-1">
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
<img
src="/public/assets/img/orgLogo.png"
alt="logo"
width={40}
height={40}
/> <p className="fw-semibold fs-6 m-0">{data?.data?.name}</p>
</div>
<div className="text-end">
<span className={`badge bg-label-${data?.data.isActive ? "primary":"secondary"} `}>{data?.data.isActive ? "Active":"In-Active"} </span>
</div>
</div>
</div>
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
{/* Contact Info */}
<div className="col-md-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className="bx bx-sm bx-user me-1" /> Contact Person :
</label>
<div className="text-muted">{data?.data?.contactPerson}</div>
</div>
</div>
<div className="col-md-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
</label>
<div className="text-muted">{data?.data?.contactNumber}</div>
</div>
</div>
<div className="col-md-12 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
</label>
<div className="text-muted">{data?.data?.email}</div>
</div>
</div>
<div className="col-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ maxWidth: "130px" }}
>
<i className="bx bx-sm me-1 bx-barcode"></i>
Service Provider Id (SPRID) :
</label>
<div className="text-muted">{data?.data?.sprid}</div>
</div>
</div>
<div className="col-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ maxWidth: "130px" }}
>
<i className="bx bx-sm me-1 bx-group"></i>
Employees :
</label>
<div className="text-muted">{data?.data?.activeEmployeeCount}</div>
</div>
</div>
<div className="col-12 mb-3">
<div className="d-flex">
<label
className="form-label me-1 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-map'></i> Address :
</label>
<div className="text-muted text-start">{data?.data?.address}</div>
</div>
</div>
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services</div>
</div>
)
};
export default VieworgDataanization;

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

@ -1,11 +1,24 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { projectSchema, projectDefault } from "./ProjectSchema";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import Label from "../common/Label"; import Label from "../common/Label";
import DatePicker from "../common/DatePicker"; import DatePicker from "../common/DatePicker";
import { useCreateProject, useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
const currentDate = new Date().toLocaleDateString('en-CA'); import {
DEFAULT_EMPTY_STATUS_ID,
ITEMS_PER_PAGE,
PROJECT_STATUS,
} from "../../utils/constants";
import {
useOrganizationModal,
useOrganizationsList,
} from "../../hooks/useOrganization";
import { localToUtc } from "../../utils/appUtils";
const currentDate = new Date().toLocaleDateString("en-CA");
const formatDate = (date) => { const formatDate = (date) => {
if (!date) { if (!date) {
return currentDate; return currentDate;
@ -14,56 +27,23 @@ const formatDate = (date) => {
if (isNaN(d.getTime())) { if (isNaN(d.getTime())) {
return currentDate; return currentDate;
} }
return d.toLocaleDateString('en-CA'); return d.toLocaleDateString("en-CA");
}; };
const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) => { const ManageProjectInfo = ({ project, onClose }) => {
const [CurrentProject, setCurrentProject] = useState();
const [addressLength, setAddressLength] = useState(0); const [addressLength, setAddressLength] = useState(0);
const maxAddressLength = 500; const maxAddressLength = 500;
const { onOpen, startStep, flowType } = useOrganizationModal();
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731"; const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
const projectSchema = z const { projects_Details, loading } = useProjectDetails(project);
.object({ const { data, isLoading, isError, error } = useOrganizationsList(
...(project?.id ? { id: z.string().optional() } : {}), ITEMS_PER_PAGE,
name: z.string().min(1, { message: "Project Name is required" }), 1,
shortName: z.string().optional(), true
contactPerson: z );
.string() const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
.min(1, { message: "Contact Person Name is required" }) const {mutate:CeateProject,isPending:isCreating}= useCreateProject(()=>onClose?.())
.regex(/^[A-Za-z\s]+$/, {
message: "Contact Person must contain only letters",
}),
projectAddress: z
.string()
.min(1, { message: "Address is required" })
.max(500, "Address must not exceed 150 characters"),
startDate: z
.string()
.min(1, { message: "Start Date is required" })
.default(currentDate),
endDate: z
.string()
.min(1, { message: "End Date is required" })
.default(currentDate),
projectStatusId: z
.string()
.min(1, { message: "Status is required" }),
promoterId:z.string().min(1,{message:"Promoter is required"}),
pmcId:z.string().min(1,{message:"PMC is required"})
})
.refine(
(data) => {
const start = new Date(data.startDate);
const end = new Date(data.endDate);
return end >= start;
},
{
path: ["endDate"], // attaches the error to the endDate field
message: "End Date must be greater than Start Date",
}
);
const { const {
register, register,
@ -74,81 +54,67 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
getValues, getValues,
} = useForm({ } = useForm({
resolver: zodResolver(projectSchema), resolver: zodResolver(projectSchema),
defaultValues: { defaultValues: projectDefault,
id: project?.id || "",
name: project?.name || "",
shortName: project?.shortName || "",
contactPerson: project?.contactPerson || "",
projectAddress: project?.projectAddress || "",
startDate: formatDate(project?.startDate) || currentDate,
endDate: formatDate(project?.endDate) || currentDate,
projectStatusId: project?.projectStatusId && project.projectStatusId !== DEFAULT_EMPTY_STATUS_ID
? String(project.projectStatusId)
: ACTIVE_STATUS_ID,
promoterId:project.promoterId,
pmcId:project.pmcId
},
mode: "onChange", mode: "onChange",
}); });
useEffect(() => { useEffect(() => {
setCurrentProject(project); if (project && projects_Details)
reset( reset({
project name: projects_Details?.name || "",
? { shortName: projects_Details?.shortName || "",
id: project?.id || "", contactPerson: projects_Details?.contactPerson || "",
name: project?.name || "", projectAddress: projects_Details?.projectAddress || "",
shortName: project?.shortName || "", startDate: formatDate(projects_Details?.startDate) || "",
contactPerson: project?.contactPerson || "", endDate: formatDate(projects_Details?.endDate) || "",
projectAddress: project?.projectAddress || "", projectStatusId:
startDate: formatDate(project?.startDate) || "", String(projects_Details?.projectStatus?.id) ||
endDate: formatDate(project?.endDate) || "", DEFAULT_EMPTY_STATUS_IDF,
projectStatusId: String(project?.projectStatus?.id) || "00000000-0000-0000-0000-000000000000", promoterId: projects_Details.promoter.id || "",
} pmcId: projects_Details.pmc.id || "",
: {} });
); setAddressLength(projects_Details?.projectAddress?.length || 0);
setAddressLength(project?.projectAddress?.length || 0); }, [project, projects_Details, reset]);
}, [project, reset]);
/** const onSubmitForm = (formData) => {
if (project) {
* Handles the form submission. let payload = {
...formData,
* @param {object} updatedProject - The project data from the form. startDate: localToUtc(formData.startDate),
endDate: localToUtc(formData.endDate),
*/ id: project,
};
const onSubmitForm = (updatedProject) => { console.log(payload);
UpdateProject({ projectId: project, payload: payload });
handleSubmitForm(updatedProject); }else{
let payload = {
...formData,
startDate: localToUtc(formData.startDate),
endDate: localToUtc(formData.endDate),
};
CeateProject(payload)
}
}; };
const handleCancel = () => { const handleCancel = () => {
reset({ reset(projectDefault);
id: project?.id || "",
name: project?.name || "",
shortName: project?.shortName || "",
contactPerson: project?.contactPerson || "",
projectAddress: project?.projectAddress || "",
startDate: formatDate(project?.startDate) || currentDate,
endDate: formatDate(project?.endDate) || currentDate,
projectStatusId: String(project?.projectStatus?.id || "00000000-0000-0000-0000-000000000000"),
});
onClose(); onClose();
}; };
const handleOrganizaioFinder = () => {
onClose();
onOpen({ startStep: 2, flowType: "default" });
};
return ( return (
<div className="p-sm-2 p-2"> <div className="p-sm-2 p-2">
<div className="text-center mb-2"> <div className="text-center mb-2">
<h5 className="mb-2"> <h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
{project?.id ? "Edit Project" : "Create Project"}
</h5>
</div> </div>
<form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}> <form
className="row g-2 text-start"
onSubmit={handleSubmit(onSubmitForm)}
>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<Label htmlFor="name" required> <Label htmlFor="name" required>
Project Name Project Name
@ -228,7 +194,10 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
/> />
{errors.startDate && ( {errors.startDate && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}> <div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.startDate.message} {errors.startDate.message}
</div> </div>
)} )}
@ -243,18 +212,21 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
name="endDate" name="endDate"
control={control} control={control}
placeholder="DD-MM-YYYY" placeholder="DD-MM-YYYY"
minDate={getValues("startDate")} // optional: restrict future dates minDate={getValues("startDate")} // optional: restrict future dates
className="w-100" className="w-100"
/> />
{errors.endDate && ( {errors.endDate && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}> <div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.endDate.message} {errors.endDate.message}
</div> </div>
)} )}
</div> </div>
<div className="col-12 col-md-6"> <div className="col-12 ">
<label className="form-label" htmlFor="modalEditUserStatus"> <label className="form-label" htmlFor="modalEditUserStatus">
Status Status
</label> </label>
@ -268,15 +240,11 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
valueAsNumber: false, valueAsNumber: false,
})} })}
> >
{/* <option disabled>Status</option> {PROJECT_STATUS.map((status) => (
<option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> */} <option key={status.id} value={status.id}>
<option value={ACTIVE_STATUS_ID}>Active</option> {status.label}
<option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option> </option>
))}
<option value="cdad86aa-8a56-4ff4-b633-9c629057dfef">In Progress</option>
<option value="ef1c356e-0fe0-42df-a5d3-8daee355492d">Inactive</option>
<option value="33deaef9-9af1-4f2a-b443-681ea0d04f81">Completed</option>
</select> </select>
{errors.projectStatusId && ( {errors.projectStatusId && (
<div <div
@ -287,6 +255,83 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
</div> </div>
)} )}
</div> </div>
<div className="col-12 ">
<label className="form-label" htmlFor="modalEditUserStatus">
Promoter
</label>
<select
className="select2 form-select form-select-sm"
aria-label="Default select example"
{...register("promoterId", {
required: "Promoter is required",
valueAsNumber: false,
})}
>
{isLoading ? (
<option>Loading...</option>
) : (
<>
<option value="">Select Promoter</option>
{data?.data?.map((org) => (
<option key={org.id} value={org.id}>
{org.name}
</option>
))}
</>
)}
</select>
{errors.promoterId && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.promoterId.message}
</div>
)}
</div>
<div className="col-12 ">
<label className="form-label" htmlFor="modalEditUserStatus">
PMC
</label>
<select
className="select2 form-select form-select-sm"
aria-label="Default select example"
{...register("pmcId", {
required: "Promoter is required",
valueAsNumber: false,
})}
>
{isLoading ? (
<option>Loading...</option>
) : (
<>
<option value="">Select PMC</option>
{data?.data?.map((org) => (
<option key={org.id} value={org.id}>
{org.name}
</option>
))}
</>
)}
</select>
{errors.pmcId && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.pmcId.message}
</div>
)}
</div>
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
<span>
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
Pomoter, find through SPRID or create new
</span>
<small className="cursor-pointer" onClick={handleOrganizaioFinder}>
<i className="bx bx-plus-circle text-primary"></i>
</small>
</div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<Label htmlFor="projectAddress" required> <Label htmlFor="projectAddress" required>
@ -304,6 +349,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
}} }}
/> />
</div> </div>
<div className="text-end" style={{ fontSize: "12px" }}> <div className="text-end" style={{ fontSize: "12px" }}>
{maxAddressLength - addressLength} characters left {maxAddressLength - addressLength} characters left
</div> </div>
@ -322,22 +368,21 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
className="btn btn-label-secondary btn-sm me-2" className="btn btn-label-secondary btn-sm me-2"
onClick={handleCancel} onClick={handleCancel}
aria-label="Close" aria-label="Close"
disabled={isPending} disabled={isPending || isCreating}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="btn btn-primary btn-sm" className="btn btn-primary btn-sm"
disabled={isPending} disabled={isPending || isCreating}
> >
{isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"} {isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
</button> </button>
</div> </div>
</form> </form>
</div> </div>
); );
}; };
export default ManageProjectInfo; export default ManageProjectInfo;

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

@ -1,211 +0,0 @@
import React, { useState, useEffect } from "react";
import EmployeeRepository from "../../repositories/EmployeeRepository";
import { useAllEmployees } from "../../hooks/useEmployees";
import useSearch from "../../hooks/useSearch";
import AssignEmployeeTable from "./AssignEmployeeTable";
import showToast from "../../services/toastService";
import "./MapUser.css";
const MapUsers = ({
projectId,
onClose,
empJobRoles,
onSubmit,
allocation,
assignedLoading,
setAssignedLoading,
}) => {
const {
employeesList,
loading: employeeLoading,
error,
} = useAllEmployees(false);
const [selectedEmployees, setSelectedEmployees] = useState([]);
const [searchText, setSearchText] = useState("");
const handleAllocationData = Array.isArray(allocation) ? allocation : [];
const allocationEmployees = employeesList.map((employee) => {
const allocationItem = handleAllocationData.find(
(alloc) => alloc.employeeId === employee.id
);
return {
...employee,
isActive: allocationItem ? allocationItem.isActive : false,
jobRoleId: allocationItem ? allocationItem.jobRoleId : employee.jobRoleId,
};
});
function parseDate(dateStr) {
return new Date(dateStr.split(".")[0]);
}
const latestAllocations = handleAllocationData.reduce((acc, alloc) => {
const existingAlloc = acc[alloc.employeeId];
if (!existingAlloc) {
acc[alloc.employeeId] = alloc;
} else {
const existingDate = parseDate(
existingAlloc.reAllocationDate || existingAlloc.allocationDate
);
const newDate = parseDate(alloc.reAllocationDate || alloc.allocationDate);
if (newDate > existingDate) {
acc[alloc.employeeId] = alloc;
}
}
return acc;
}, {});
const allocationEmployeesData = employeesList
.map((employee) => {
const allocationItem = latestAllocations[employee.id];
return {
...employee,
isActive: allocationItem ? allocationItem.isActive : false,
};
})
.filter((employee) => employee.isActive === false);
const { filteredData, setSearchQuery } = useSearch(
allocationEmployeesData,
searchText
);
const handleRoleChange = (employeeId, newRoleId) => {
setSelectedEmployees((prevSelectedEmployees) =>
prevSelectedEmployees.map((emp) =>
emp.id === employeeId ? { ...emp, jobRoleId: newRoleId } : emp
)
);
};
const handleCheckboxChange = (employeeId) => {
setSelectedEmployees((prevSelectedEmployees) => {
const updatedEmployees = [...prevSelectedEmployees];
const employeeIndex = updatedEmployees.findIndex(
(emp) => emp.id === employeeId
);
if (employeeIndex !== -1) {
const isSelected = !updatedEmployees[employeeIndex].isSelected;
updatedEmployees[employeeIndex].isSelected = isSelected;
} else {
updatedEmployees.push({
id: employeeId,
isSelected: true,
});
}
return updatedEmployees;
});
};
const handleSubmit = () => {
setAssignedLoading(true);
const selected = selectedEmployees
.filter((emp) => emp.isSelected)
.map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
if (selected.length > 0) {
onSubmit(selected);
setSelectedEmployees([]);
} 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 text-center">
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<p className="m-0 fw-semibold fs-5">Add Employee To Project</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 "
id="DataTables_Table_0"
aria-describedby="DataTables_Table_0_info"
style={{ width: "100%" }}
>
<tbody>
{employeeLoading && allocationEmployeesData.length === 0 && (
<tr>
<td>Loading..</td>
</tr>
)}
{!employeeLoading &&
allocationEmployeesData.length === 0 &&
filteredData.length === 0 && (
<tr>
<td>All employee assigned to Project.</td>
</tr>
)}
{!employeeLoading &&
allocationEmployeesData.length > 0 &&
filteredData.length === 0 && (
<tr>
<td>No matching employees found.</td>
</tr>
)}
{(filteredData.length > 0 ||
allocationEmployeesData.length > 0) &&
filteredData.map((emp) => (
<AssignEmployeeTable
key={emp.id}
employee={emp}
jobRoles={empJobRoles}
isChecked={emp.isSelected}
onRoleChange={handleRoleChange}
onCheckboxChange={handleCheckboxChange}
/>
))}
</tbody>
</table>
</div>
<div className="modal-footer mt-5 d-flex justify-content-end gap-0">
<button
type="button"
className="btn btn-sm btn-label-secondary"
data-dismiss="modal"
aria-label="Close"
onClick={onClose}
>
Cancel
</button>
{(filteredData.length > 0 || allocationEmployeesData.length > 0) && (
<button className="btn btn-sm btn-primary" onClick={handleSubmit}>
{assignedLoading ? "Please Wait..." : "Assign to Project"}
</button>
)}
</div>
</div>
</div>
</>
);
};
export default MapUsers;

156
src/components/Project/ProjectCard.jsx
View File

@ -16,39 +16,13 @@ import {
import GlobalModel from "../common/GlobalModel"; import GlobalModel from "../common/GlobalModel";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice"; import { setProjectId } from "../../slices/localVariablesSlice";
import { useProjectContext } from "../../pages/project/ProjectPage";
const ProjectCard = ({ projectData, recall }) => { const ProjectCard = ({ project }) => {
const [projectInfo, setProjectInfo] = useState(projectData); const dispatch = useDispatch();
const { projects_Details, loading, error, refetch } = useProjectDetails(
projectInfo?.id, false
);
const [showModal, setShowModal] = useState(false);
const dispatch = useDispatch()
const navigate = useNavigate(); const navigate = useNavigate();
const ManageProject = useHasUserPermission(MANAGE_PROJECT); const ManageProject = useHasUserPermission(MANAGE_PROJECT);
const { const { setMangeProject } = useProjectContext();
mutate: updateProject,
isPending,
isSuccess,
isError,
} = useUpdateProject({
onSuccessCallback: () => {
setShowModal(false);
},
})
useEffect(() => {
setProjectInfo(projectData);
}, [projectData])
const handleShow = async () => {
try {
const { data } = await refetch();
setShowModal(true);
} catch (err) {
showToast("Failed to load project details", "error");
}
};
const getProgress = (planned, completed) => { const getProgress = (planned, completed) => {
return (completed * 100) / planned + "%"; return (completed * 100) / planned + "%";
@ -60,39 +34,18 @@ const ProjectCard = ({ projectData, recall }) => {
const handleClose = () => setShowModal(false); const handleClose = () => setShowModal(false);
const handleViewProject = () => { const handleViewProject = () => {
dispatch(setProjectId(projectInfo.id)) dispatch(setProjectId(project.id));
navigate(`/projects/details`); navigate(`/projects/details`);
}; };
const handleViewActivities = () => { const handleViewActivities = () => {
dispatch(setProjectId(projectInfo.id)) dispatch(setProjectId(project.id));
navigate(`/activities/records?project=${projectInfo.id}`); navigate(`/activities/records?project=${project.id}`);
};
const handleFormSubmit = (updatedProject) => {
if (projectInfo?.id) {
updateProject({
projectId: projectInfo.id,
updatedData: updatedProject,
});
}
}; };
return ( return (
<> <>
{showModal && projects_Details && (
<GlobalModel isOpen={showModal} closeModal={handleClose}>
<ManageProjectInfo
project={projects_Details}
handleSubmitForm={handleFormSubmit}
onClose={handleClose}
isPending={isPending}
/>
</GlobalModel>
)}
<div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4"> <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
<div className={`card cursor-pointer ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}> <div className={`card cursor-pointer`}>
<div className="card-header pb-4"> <div className="card-header pb-4">
<div className="d-flex align-items-start"> <div className="d-flex align-items-start">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
@ -107,12 +60,10 @@ const ProjectCard = ({ projectData, recall }) => {
className="mb-0 stretched-link text-heading text-start" className="mb-0 stretched-link text-heading text-start"
onClick={handleViewProject} onClick={handleViewProject}
> >
{projectInfo.shortName {project?.shortName ? project?.shortName : project?.name}
? projectInfo.shortName
: projectInfo.name}
</h5> </h5>
<div className="client-info text-body"> <div className="client-info text-body">
<span>{projectInfo.shortName ? projectInfo.name : ""}</span> <span>{project.shortName ? project.name : ""}</span>
</div> </div>
</div> </div>
</div> </div>
@ -124,23 +75,14 @@ const ProjectCard = ({ projectData, recall }) => {
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
{loading ? ( <i
<div className="bx bx-dots-vertical-rounded bx-sm text-muted"
className="spinner-border spinner-border-sm text-secondary" data-bs-toggle="tooltip"
role="status" data-bs-offset="0,8"
> data-bs-placement="top"
<span className="visually-hidden">Loading...</span> data-bs-custom-class="tooltip-dark"
</div> title="More Action"
) : ( ></i>
<i
className="bx bx-dots-vertical-rounded bx-sm text-muted"
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
title="More Action"
></i>
)}
</button> </button>
<ul className="dropdown-menu dropdown-menu-end"> <ul className="dropdown-menu dropdown-menu-end">
<li> <li>
@ -154,15 +96,18 @@ const ProjectCard = ({ projectData, recall }) => {
</a> </a>
</li> </li>
<li onClick={handleShow}> <li>
<a className="dropdown-item"> <a className="dropdown-item" onClick={() =>
setMangeProject({
isOpen: true,
Project: project.id,
})
}>
<i className="bx bx-pencil me-2"></i> <i className="bx bx-pencil me-2"></i>
<span className="align-left">Modify</span> <span className="align-left">Modify</span>
</a> </a>
</li> </li>
<li <li onClick={handleViewActivities}>
onClick={handleViewActivities}
>
<a className="dropdown-item"> <a className="dropdown-item">
<i className="bx bx-task me-2"></i> <i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span> <span className="align-left">Activities</span>
@ -180,22 +125,22 @@ const ProjectCard = ({ projectData, recall }) => {
<span className="text-heading fw-medium"> <span className="text-heading fw-medium">
Contact Person:{" "} Contact Person:{" "}
</span> </span>
{projectInfo.contactPerson ? projectInfo.contactPerson : "NA"} {project.contactPerson ? project.contactPerson : "NA"}
</p> </p>
<p className="mb-1"> <p className="mb-1">
<span className="text-heading fw-medium">Start Date: </span> <span className="text-heading fw-medium">Start Date: </span>
{projectInfo.startDate {project.startDate
? moment(projectInfo.startDate).format("DD-MMM-YYYY") ? moment(project.startDate).format("DD-MMM-YYYY")
: "NA"} : "NA"}
</p> </p>
<p className="mb-1"> <p className="mb-1">
<span className="text-heading fw-medium">Deadline: </span> <span className="text-heading fw-medium">Deadline: </span>
{projectInfo.endDate {project.endDate
? moment(projectInfo.endDate).format("DD-MMM-YYYY") ? moment(project.endDate).format("DD-MMM-YYYY")
: "NA"} : "NA"}
</p> </p>
<p className="mb-0">{projectInfo.projectAddress}</p> <p className="mb-0">{project.projectAddress}</p>
</div> </div>
</div> </div>
</div> </div>
@ -205,36 +150,37 @@ const ProjectCard = ({ projectData, recall }) => {
<span <span
className={ className={
`badge rounded-pill ` + `badge rounded-pill ` +
getProjectStatusColor(projectInfo.projectStatusId) getProjectStatusColor(project.projectStatusId)
} }
> >
{getProjectStatusName(projectInfo.projectStatusId)} {getProjectStatusName(project.projectStatusId)}
</span> </span>
</p>{" "} </p>{" "}
{getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && ( {getDateDifferenceInDays(project.endDate, Date()) >= 0 && (
<span className="badge bg-label-success ms-auto"> <span className="badge bg-label-success ms-auto">
{projectInfo.endDate && {project.endDate &&
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "} getDateDifferenceInDays(project.endDate, Date())}{" "}
Days left Days left
</span> </span>
)} )}
{getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && ( {getDateDifferenceInDays(project.endDate, Date()) < 0 && (
<span className="badge bg-label-danger ms-auto"> <span className="badge bg-label-danger ms-auto">
{projectInfo.endDate && {project.endDate &&
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "} getDateDifferenceInDays(project.endDate, Date())}{" "}
Days overdue Days overdue
</span> </span>
)} )}
</div> </div>
<div className="d-flex justify-content-between align-items-center mb-2"> <div className="d-flex justify-content-between align-items-center mb-2">
<small className="text-body"> <small className="text-body">
Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)} Task: {formatNumber(project.completedWork)} /{" "}
{formatNumber(project.plannedWork)}
</small> </small>
<small className="text-body"> <small className="text-body">
{Math.floor( {Math.floor(
getProgressInNumber( getProgressInNumber(
projectInfo.plannedWork, project.plannedWork,
projectInfo.completedWork project.completedWork
) )
) || 0}{" "} ) || 0}{" "}
% Completed % Completed
@ -246,22 +192,20 @@ const ProjectCard = ({ projectData, recall }) => {
role="progressbar" role="progressbar"
style={{ style={{
width: getProgress( width: getProgress(
projectInfo.plannedWork, project.plannedWork,
projectInfo.completedWork project.completedWork
), ),
}} }}
aria-valuenow={projectInfo.completedWork} aria-valuenow={project.completedWork}
aria-valuemin="0" aria-valuemin="0"
aria-valuemax={projectInfo.plannedWork} aria-valuemax={project.plannedWork}
></div> ></div>
</div> </div>
<div className="d-flex align-items-center justify-content-between"> <div className="d-flex align-items-center justify-content-between">
{/* <div className="d-flex align-items-center ">
</div> */}
<div> <div>
<a className="text-muted d-flex " alt="Active team size"> <a className="text-muted d-flex " alt="Active team size">
<i className="bx bx-group bx-sm me-1_5"></i> <i className="bx bx-group bx-sm me-1_5"></i>
{projectInfo?.teamSize} Members {project?.teamSize} Members
</a> </a>
</div> </div>
<div> <div>
@ -278,4 +222,4 @@ const ProjectCard = ({ projectData, recall }) => {
); );
}; };
export default ProjectCard; export default ProjectCard;

70
src/components/Project/ProjectCardView.jsx Normal file
View File

@ -0,0 +1,70 @@
import React from 'react'
import { useProjects } from '../../hooks/useProjects'
import Loader from '../common/Loader'
import ProjectCard from './ProjectCard'
const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
return (
<div className="row page-min-h">
{ currentItems.length === 0 && (
<p className="text-center text-muted">No projects found.</p>
)}
{currentItems.map((project) => (
<ProjectCard
key={project.id}
project={project}
/>
))}
{ totalPages > 1 && (
<nav>
<ul className="pagination pagination-sm justify-content-end py-2">
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
<button
className="page-link"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, i) => (
<li
key={i}
className={`page-item ${currentPage === i + 1 && "active"}`}
>
<button
className="page-link"
onClick={() => setCurrentPage(i + 1)}
>
{i + 1}
</button>
</li>
))}
<li
className={`page-item ${currentPage === totalPages && "disabled"
}`}
>
<button
className="page-link"
onClick={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
>
&raquo;
</button>
</li>
</ul>
</nav>
)}
</div>
)
}
export default ProjectCardView

280
src/components/Project/ProjectListView.jsx Normal file
View File

@ -0,0 +1,280 @@
import React, { useState } from "react";
import { MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
import { useProjects } from "../../hooks/useProjects";
import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
import ProgressBar from "../common/ProgressBar";
import {
getProjectStatusColor,
getProjectStatusName,
} from "../../utils/projectStatus";
import { useDispatch } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
import { useNavigate } from "react-router-dom";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { useProjectContext } from "../../pages/project/ProjectPage";
import usePagination from "../../hooks/usePagination";
const ProjectListView = ({
currentItems,
selectedStatuses,
handleStatusChange,
setCurrentPage,
totalPages,
isLoading,
}) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { setMangeProject } = useProjectContext();
// const { data, isLoading, isError, error } = useProjects();
// check Permissions
const canManageProject = useHasUserPermission(MANAGE_PROJECT);
const projectColumns = [
{
key: "projectName",
label: "Project Name",
className: "text-start py-3",
getValue: (p) => (
<div
className="text-primary cursor-pointer fw-bold py-3"
onClick={() => {
dispatch(setProjectId(p.id));
navigate(`/projects/details`);
}}
>
{p.shortName ? `${p.name} (${p.shortName})` : p.name}
</div>
),
},
{
key: "contactPerson",
label: "Contact Person",
className: "text-start small",
getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A",
},
{
key: "startDate",
label: "Start Date",
className: "text-center small",
getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A",
},
{
key: "deadline",
label: "Deadline",
className: "text-center small",
getValue: (p) => formatUTCToLocalTime(p?.endDate) || "N/A",
},
{
key: "task",
label: "Task",
colSpan: 2,
className: "text-center small",
getValue: (p) => formatNumber(p?.plannedWork) || "0",
},
{
key: "progress",
label: "Progress",
className: "text-start small",
getValue: (p) => (
<ProgressBar
plannedWork={p.plannedWork}
completedWork={p.completedWork}
className="mb-0"
height="6px"
/>
),
},
{
key: "status",
label: "Status",
className: "text-center small",
isFilter: true,
customRender: (_, selectedStatuses, handleStatusChange) => (
<div className="dropdown">
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Status <i className="bx bx-filter bx-sm"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{PROJECT_STATUS.map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input"
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">{label}</label>
</div>
</li>
))}
</ul>
</div>
),
getValue: (p) => (
<span className={`badge ${getProjectStatusColor(p.projectStatusId)}`}>
{getProjectStatusName(p.projectStatusId)}
</span>
),
},
];
const handleViewActivities = (project) => {
dispatch(setProjectId(project));
navigate(`/activities/records?project=${project}`);
};
return (
<div className="card page-min-h py-4 px-6 shadow-sm">
<table className="table table-hover align-middle m-0">
<thead className="border-bottom">
<tr>
{projectColumns.map((col) => (
<th key={col.key} colSpan={col.colSpan} className={col.className}>
{col.label}
</th>
))}
<th className="text-center py-3">Action</th>
</tr>
</thead>
<tbody>
{currentItems?.map((project) => (
<tr key={project.id}>
{projectColumns.map((col) => (
<td
key={col.key}
colSpan={col.colSpan}
className={`${col.className} py-5`}
style={{ paddingTop: "20px", paddingBottom: "20px" }}
>
{col.getValue
? col.getValue(project)
: project[col.key] || "N/A"}
</td>
))}
<td
className={`mx-2 ${
canManageProject ? "d-sm-table-cell" : "d-none"
}`}
>
<div className="dropdown z-2">
<button
type="button"
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i
className="bx bx-dots-vertical-rounded bx-sm text-muted"
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
title="More Action"
></i>
</button>
<ul className="dropdown-menu dropdown-menu-end">
<li>
<a
aria-label="click to View details"
className="dropdown-item cursor-pointer"
>
<i className="bx bx-detail me-2"></i>
<span className="align-left">View details</span>
</a>
</li>
<li>
<a
className="dropdown-item cursor-pointer"
onClick={() =>
setMangeProject({
isOpen: true,
Project: project.id,
})
}
>
<i className="bx bx-pencil me-2"></i>
<span className="align-left">Modify</span>
</a>
</li>
<li onClick={() => handleViewActivities(project.id)}>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span>
</a>
</li>
</ul>
</div>
</td>
</tr>
))}
</tbody>
</table>
{isLoading && (
<div className="py-4">
{" "}
{isLoading && <p className="text-center">Loading...</p>}
{!isLoading && filteredProjects.length === 0 && (
<p className="text-center text-muted">No projects found.</p>
)}
</div>
)}
{!isLoading && currentItems.length === 0 && (
<div className="py-6">
<p className="text-center text-muted">No projects found.</p>
</div>
)}
{!isLoading && totalPages > 1 && (
<nav>
<ul className="pagination pagination-sm justify-content-end py-2">
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
<button
className="page-link"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, i) => (
<li
key={i}
className={`page-item ${currentPage === i + 1 && "active"}`}
>
<button
className="page-link"
onClick={() => setCurrentPage(i + 1)}
>
{i + 1}
</button>
</li>
))}
<li
className={`page-item ${
currentPage === totalPages && "disabled"
}`}
>
<button
className="page-link"
onClick={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
>
&raquo;
</button>
</li>
</ul>
</nav>
)}
</div>
);
};
export default ProjectListView;

63
src/components/Project/ProjectModal.jsx
View File

@ -1,36 +1,35 @@
import React from 'react' import React from "react";
import AssignRole from './AssignTask' import AssignRole from "./AssignTask";
const ProjectModal = ({modalConfig,closeModal}) => { const ProjectModal = ({ modalConfig, closeModal }) => {
return ( return (
<div <div
className="modal fade" className="modal fade"
id="project-modal" id="project-modal"
tabindex="-1" tabindex="-1"
aria-hidden="true" aria-hidden="true"
role="dialog" role="dialog"
> >
<div className="modal-dialog modal-lg modal-simple"> <div className="modal-dialog modal-lg modal-simple">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body"> <div className="modal-body">
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
onClick={closeModal} onClick={closeModal}
></button> ></button>
<div className="text-center mb-2"></div> <div className="text-center mb-2"></div>
{modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
</div>
</div>
</div>
</div>
)
}
export default ProjectModal {modalConfig?.type === "assignRole" && (
<AssignRole assignData={modalConfig?.data} onClose={closeModal} />
)}
</div>
</div>
</div>
</div>
);
};
export default ProjectModal;

2
src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
View File

@ -67,7 +67,7 @@ const ProjectAssignedOrgs = () => {
return ( return (
<div> <div>
<div className="dataTables_wrapper no-footer mx-5 pb-2"> <div className="dataTables_wrapper no-footer mx-5 pb-2 page">
<table className="table dataTable text-nowrap"> <table className="table dataTable text-nowrap">
<thead> <thead>
<tr className="table_header_border"> <tr className="table_header_border">

6
src/components/Project/ProjectOverview.jsx
View File

@ -10,9 +10,9 @@ import ReactApexChart from "react-apexcharts";
import Chart from "react-apexcharts"; import Chart from "react-apexcharts";
const ProjectOverview = ({ project }) => { const ProjectOverview = ({ project }) => {
const { projects } = useProjects(); const { data } = useProjects();
const [current_project, setCurrentProject] = useState( const [current_project, setCurrentProject] = useState(
projects.find((pro) => pro.id == project) data?.find((pro) => pro.id == project)
); );
const selectedProject = useSelector( const selectedProject = useSelector(
@ -154,7 +154,7 @@ const ProjectOverview = ({ project }) => {
}, [current_project]); }, [current_project]);
useEffect(() => { useEffect(() => {
setCurrentProject(projects.find((pro) => pro.id == selectedProject)); setCurrentProject(data?.find((pro) => pro.id == selectedProject));
if (current_project) { if (current_project) {
let val = getProgressInPercentage( let val = getProgressInPercentage(
current_project.plannedWork, current_project.plannedWork,

59
src/components/Project/ProjectSchema.jsx Normal file
View File

@ -0,0 +1,59 @@
import { z } from "zod";
import { DEFAULT_EMPTY_STATUS_ID } from "../../utils/constants";
const currentDate = new Date()
export const projectDefault = {
name: "",
shortName: "",
contactPerson: "",
projectAddress: "",
startDate: currentDate.toISOString().split("T")[0],
endDate: currentDate.toISOString().split("T")[0],
projectStatusId: DEFAULT_EMPTY_STATUS_ID,
promoterId: "",
pmcId: "",
};
export const projectSchema = z
.object({
name: z.string().min(1, { message: "Project Name is required" }),
shortName: z.string().optional(),
contactPerson: z
.string()
.min(1, { message: "Contact Person Name is required" })
.regex(/^[A-Za-z\s]+$/, {
message: "Contact Person must contain only letters",
}),
projectAddress: z
.string()
.min(1, { message: "Address is required" })
.max(500, "Address must not exceed 150 characters"),
startDate: z
.string()
.min(1, { message: "Start Date is required" })
.default(projectDefault),
endDate: z
.string()
.min(1, { message: "End Date is required" })
.default(projectDefault),
projectStatusId: z.string().min(1, { message: "Status is required" }),
promoterId: z.string().min(1, { message: "Promoter is required" }),
pmcId: z.string().min(1, { message: "PMC is required" }),
})
.refine(
(data) => {
const start = new Date(data.startDate);
const end = new Date(data.endDate);
return end >= start;
},
{
path: ["endDate"],
message: "End Date must be greater than Start Date",
}
);

1
src/components/Project/Team/Teams.jsx
View File

@ -1,5 +1,4 @@
import React, { useState, useEffect, useCallback, useMemo } from "react"; import React, { useState, useEffect, useCallback, useMemo } from "react";
import MapUsers from "../MapUsers";
import { Link, NavLink, useNavigate, useParams } from "react-router-dom"; import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
import showToast from "../../../services/toastService"; import showToast from "../../../services/toastService";

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

@ -1,14 +1,13 @@
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { useController } from "react-hook-form"; import { useController } from "react-hook-form";
const DatePicker = ({ const DatePicker = ({
name, name,
control, control,
placeholder = "DD-MM-YYYY", placeholder = "DD-MM-YYYY",
className = "", className = "",
allowText = false, allowText = false,
maxDate, // removed default new Date() maxDate,
minDate, minDate,
...rest ...rest
}) => { }) => {
@ -22,43 +21,43 @@ const DatePicker = ({
}); });
useEffect(() => { useEffect(() => {
if (inputRef.current) { if (!inputRef.current) return;
flatpickr(inputRef.current, {
dateFormat: "d-m-Y", const fp = flatpickr(inputRef.current, {
allowInput: allowText, dateFormat: "d-m-Y",
defaultDate: value allowInput: allowText,
? flatpickr.parseDate(value, "Y-m-d") defaultDate: value ? new Date(value) : null, // safely convert to Date
: null, maxDate: maxDate ? new Date(maxDate) : undefined,
maxDate: maxDate ?? undefined, // only applied if passed minDate: minDate ? new Date(minDate) : undefined,
minDate: minDate ? new Date(minDate.split("T")[0]) : undefined, onChange: (selectedDates) => {
onChange: function (selectedDates) { if (selectedDates.length > 0) {
if (selectedDates.length > 0) { onChange(flatpickr.formatDate(selectedDates[0], "Y-m-d"));
// store in YYYY-MM-DD } else {
const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d"); onChange("");
onChange(formatted); }
} else { },
onChange(""); ...rest
} });
},
...rest return () => {
}); fp.destroy(); // clean up on unmount
} };
}, [inputRef, value, allowText, maxDate, minDate, rest, onChange]); }, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
return ( return (
<div className={` position-relative ${className}`}> <div className={`position-relative ${className}`}>
<input <input
type="text" type="text"
className="form-control form-control-sm " className="form-control form-control-sm"
placeholder={placeholder} placeholder={placeholder}
defaultValue={ value={displayValue}
value onChange={(e) => {
? flatpickr.formatDate( if (allowText) {
flatpickr.parseDate(value, "Y-m-d"), onChange(e.target.value); // allow manual typing if enabled
"d-m-Y" }
) }}
: ""
}
ref={(el) => { ref={(el) => {
inputRef.current = el; inputRef.current = el;
ref(el); ref(el);
@ -70,7 +69,7 @@ const DatePicker = ({
<span <span
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer" className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
onClick={() => { onClick={() => {
if (inputRef.current && inputRef.current._flatpickr) { if (inputRef.current?._flatpickr) {
inputRef.current._flatpickr.open(); inputRef.current._flatpickr.open();
} }
}} }}

40
src/hooks/useAuth.jsx
View File

@ -12,6 +12,7 @@ import {
closeAuthModal, closeAuthModal,
openAuthModal, openAuthModal,
} from "../slices/localVariablesSlice.jsx"; } from "../slices/localVariablesSlice.jsx";
import { removeSession } from "../utils/authUtils.js";
export const useTenants = () => { export const useTenants = () => {
return useQuery({ return useQuery({
@ -28,18 +29,24 @@ export const useSelectTenant = (onSuccessCallBack) => {
const res = await AuthRepository.selectTenant(tenantId); const res = await AuthRepository.selectTenant(tenantId);
return res.data; return res.data;
}, },
onSuccess: (data) => { onSuccess: (data) => {
localStorage.setItem("jwtToken", data.token); if (localStorage.getItem("jwtToken")) {
localStorage.setItem("refreshToken", data.refreshToken); localStorage.setItem("jwtToken", data.token);
localStorage.setItem("refreshToken", data.refreshToken);
} else {
sessionStorage.setItem("jwtToken", data.token);
sessionStorage.setItem("refreshToken", data.refreshToken);
}
if (onSuccessCallBack) onSuccessCallBack(); if (onSuccessCallBack) onSuccessCallBack();
}, },
onError: (error) => { onError: (error) => {
showToast(error.message || "Error while creating project", "error"); showToast(error.message || "Error while creating project", "error");
localStorage.removeItem("jwtToken"); localStorage.removeItem("jwtToken");
localStorage.removeItem("refreshToken") localStorage.removeItem("refreshToken");
localStorage.removeItem("ctnt") localStorage.removeItem("ctnt");
}, },
}); });
}; };
@ -55,29 +62,26 @@ export const useAuthModal = () => {
}; };
}; };
export const useLogout = ()=>{
export const useLogout = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationFn: async () => { mutationFn: async () => {
let payload = {refreshToken: localStorage.getItem("refreshToken")} let payload = { refreshToken: localStorage.getItem("refreshToken") || sessionStorage.getItem("refreshToken") };
return await AuthRepository.logout(payload); return await AuthRepository.logout(payload);
}, },
onSuccess: (data) => { onSuccess: (data) => {
localStorage.removeItem("jwtToken"); removeSession()
localStorage.removeItem("refreshToken");
localStorage.removeItem("ctnt"); window.location.href = "/auth/login";
localStorage.clear();
window.location.href = "/auth/login";
if (onSuccessCallBack) onSuccessCallBack(); if (onSuccessCallBack) onSuccessCallBack();
}, },
onError: (error) => { onError: (error) => {
showToast(error.message || "Error while creating project", "error"); showToast(error.message || "Error while creating project", "error");
localStorage.removeItem("jwtToken"); removeSession()
localStorage.removeItem("refreshToken")
localStorage.removeItem("ctnt")
}, },
}); });
} };

2
src/hooks/useEmployees.js
View File

@ -221,7 +221,7 @@ export const useUpdateEmployee = () => {
mutationFn: (employeeData) => mutationFn: (employeeData) =>
EmployeeRepository.manageEmployee(employeeData), EmployeeRepository.manageEmployee(employeeData),
onSuccess: (_, variables) => { onSuccess: (_, variables) => {
const id = variables.id || variables.employeeId; const id = variables?.id || variables?.employeeId;
const isAllEmployee = variables.IsAllEmployee; const isAllEmployee = variables.IsAllEmployee;
// Cache invalidation // Cache invalidation

15
src/hooks/useOrganization.js
View File

@ -37,6 +37,13 @@ export const useOrganizationModal = () => {
// ================================Query============================================================= // ================================Query=============================================================
export const useOrganization=(id)=>{
return useQuery({
queryKey:["organization",id],
queryFn:async()=> await OrganizationRepository.getOrganizaion(id),
enabled:!!id
})
}
export const useOrganizationBySPRID = (sprid) => { export const useOrganizationBySPRID = (sprid) => {
return useQuery({ return useQuery({
queryKey: ["organization by", sprid], queryKey: ["organization by", sprid],
@ -167,11 +174,11 @@ export const useAssignOrgToTenant = (onSuccessCallback) => {
export const useUpdateOrganization = () => { export const useUpdateOrganization = () => {
const useClient = useQueryClient(); const useClient = useQueryClient();
return useMutation({ return useMutation({
mutationFn: async (payload) => mutationFn: async ({orgId,payload}) =>
await OrganizationRepository.assignOrganizationToProject(payload), await OrganizationRepository.updateOrganizaion(orgId,payload),
onSuccess: (_, variables) => { onSuccess: (_, variables) => {
// useClient.invalidateQueries({ queryKey: ["organizationList"] }); useClient.invalidateQueries({ queryKey: ["organizationList"] });
showToast("Organization successfully", "success"); showToast("Organization Updated successfully", "success");
if (onSuccessCallback) onSuccessCallback(); if (onSuccessCallback) onSuccessCallback();
}, },
onError: (error) => { onError: (error) => {

99
src/hooks/useProjects.js
View File

@ -14,27 +14,15 @@ import {
} from "@tanstack/react-query"; } from "@tanstack/react-query";
import showToast from "../services/toastService"; import showToast from "../services/toastService";
export const useCurrentService = () => {
return useSelector((store) => store.globalVariables.selectedServiceId);
export const useCurrentService = ()=>{ };
return useSelector((store)=>store.globalVariables.selectedServiceId)
}
// ------------------------------Query------------------- // ------------------------------Query-------------------
export const useProjects = () => { export const useProjects = () => {
const loggedUser = useSelector((store) => store.globalVariables.loginUser); const loggedUser = useSelector((store) => store.globalVariables.loginUser);
return useQuery({
const {
data: projects = [],
isLoading: loading,
error,
refetch,
} = useQuery({
queryKey: ["ProjectsList"], queryKey: ["ProjectsList"],
queryFn: async () => { queryFn: async () => {
const response = await ProjectRepository.getProjectList(); const response = await ProjectRepository.getProjectList();
@ -42,19 +30,13 @@ export const useProjects = () => {
}, },
enabled: !!loggedUser, enabled: !!loggedUser,
}); });
return {
projects,
loading,
error,
refetch,
};
}; };
export const useEmployeesByProjectAllocated = ( export const useEmployeesByProjectAllocated = (
projectId, projectId,
serviceId, serviceId,
organizationId,emloyeeeStatus organizationId,
emloyeeeStatus
) => { ) => {
const { const {
data = [], data = [],
@ -62,16 +44,23 @@ export const useEmployeesByProjectAllocated = (
refetch, refetch,
error, error,
} = useQuery({ } = useQuery({
queryKey: ["empListByProjectAllocated", projectId, serviceId,organizationId,emloyeeeStatus], queryKey: [
"empListByProjectAllocated",
projectId,
serviceId,
organizationId,
emloyeeeStatus,
],
queryFn: async () => { queryFn: async () => {
const res = await ProjectRepository.getProjectAllocation( const res = await ProjectRepository.getProjectAllocation(
projectId, serviceId, projectId,
serviceId,
organizationId, organizationId,
emloyeeeStatus emloyeeeStatus
); );
return res?.data || res; return res?.data || res;
}, },
enabled: !!projectId, enabled: !!projectId,
onError: (error) => { onError: (error) => {
showToast( showToast(
error.message || "Error while fetching project allocated employees", error.message || "Error while fetching project allocated employees",
@ -190,17 +179,20 @@ export const useProjectName = () => {
}; };
}; };
export const useProjectInfra = (projectId,serviceId) => { export const useProjectInfra = (projectId, serviceId) => {
const { const {
data: projectInfra, data: projectInfra,
isLoading, isLoading,
error, error,
isFetched, isFetched,
} = useQuery({ } = useQuery({
queryKey: ["ProjectInfra", projectId,serviceId], queryKey: ["ProjectInfra", projectId, serviceId],
queryFn: async () => { queryFn: async () => {
if (!projectId) return null; if (!projectId) return null;
const res = await ProjectRepository.getProjectInfraByproject(projectId,serviceId); const res = await ProjectRepository.getProjectInfraByproject(
projectId,
serviceId
);
return res.data; return res.data;
}, },
enabled: !!projectId, enabled: !!projectId,
@ -212,11 +204,18 @@ export const useProjectInfra = (projectId,serviceId) => {
return { projectInfra, isLoading, error, isFetched }; return { projectInfra, isLoading, error, isFetched };
}; };
export const useProjectTasks = (workAreaId, serviceId = null, isExpandedArea = false) => { export const useProjectTasks = (
workAreaId,
serviceId = null,
isExpandedArea = false
) => {
const { data, isLoading, error } = useQuery({ const { data, isLoading, error } = useQuery({
queryKey: ["WorkItems", workAreaId, serviceId], queryKey: ["WorkItems", workAreaId, serviceId],
queryFn: async () => { queryFn: async () => {
const res = await ProjectRepository.getProjectTasksByWorkArea(workAreaId, serviceId); const res = await ProjectRepository.getProjectTasksByWorkArea(
workAreaId,
serviceId
);
return res.data; // return actual task list return res.data; // return actual task list
}, },
enabled: !!workAreaId && isExpandedArea, // only fetch if workAreaId exists and area is expanded enabled: !!workAreaId && isExpandedArea, // only fetch if workAreaId exists and area is expanded
@ -308,13 +307,21 @@ export const useProjectAssignedServices = (projectId) => {
}); });
}; };
export const useEmployeeForTaskAssign = (
export const useEmployeeForTaskAssign = (projectId,serviceId,organizationId)=>{ projectId,
return useQuery({ serviceId,
queryKey:["EmployeeForTaskAssign",projectId,serviceId,organizationId], organizationId
queryFn:async()=> await ProjectRepository.getEmployeeForTaskAssign(projectId,serviceId,organizationId) ) => {
}) return useQuery({
} queryKey: ["EmployeeForTaskAssign", projectId, serviceId, organizationId],
queryFn: async () =>
await ProjectRepository.getEmployeeForTaskAssign(
projectId,
serviceId,
organizationId
),
});
};
// -- -------------Mutation------------------------------- // -- -------------Mutation-------------------------------
@ -322,8 +329,8 @@ export const useCreateProject = ({ onSuccessCallback }) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationFn: async (newProject) => { mutationFn: async (payload) => {
const res = await ProjectRepository.manageProject(newProject); const res = await ProjectRepository.manageProject(payload);
return res.data; return res.data;
}, },
onSuccess: (data) => { onSuccess: (data) => {
@ -349,11 +356,11 @@ export const useCreateProject = ({ onSuccessCallback }) => {
}); });
}; };
export const useUpdateProject = ({ onSuccessCallback }) => { export const useUpdateProject = ( onSuccessCallback ) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { mutate, isPending, isSuccess, isError } = useMutation({ const { mutate, isPending, isSuccess, isError } = useMutation({
mutationFn: async ({ projectId, updatedData }) => { mutationFn: async ({ projectId, payload }) => {
return await ProjectRepository.updateProject(projectId, updatedData); return await ProjectRepository.updateProject(projectId, payload);
}, },
onSuccess: (data, variables) => { onSuccess: (data, variables) => {
@ -413,7 +420,7 @@ export const useManageProjectAllocation = ({
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { mutate, isPending, isSuccess, isError } = useMutation({ const { mutate, isPending, isSuccess, isError } = useMutation({
mutationFn: async ({payload}) => { mutationFn: async ({ payload }) => {
const response = await ProjectRepository.manageProjectAllocation(payload); const response = await ProjectRepository.manageProjectAllocation(payload);
return response.data; return response.data;
}, },

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

@ -16,13 +16,13 @@ const LoginPage = () => {
const loginSchema = IsLoginWithOTP const loginSchema = IsLoginWithOTP
? z.object({ ? z.object({
username: z.string().trim().email({ message: "Valid email required" }), username: z.string().trim().email({ message: "Valid email required" }),
}) })
: z.object({ : z.object({
username: z.string().trim().email({ message: "Valid email required" }), username: z.string().trim().email({ message: "Valid email required" }),
password: z.string().trim().min(1, { message: "Password required" }), password: z.string().trim().min(1, { message: "Password required" }),
rememberMe: z.boolean(), rememberMe: z.boolean(),
}); });
const { const {
register, register,
@ -41,8 +41,13 @@ const LoginPage = () => {
password: data.password, password: data.password,
}; };
const response = await AuthRepository.login(userCredential); const response = await AuthRepository.login(userCredential);
localStorage.setItem("jwtToken", response.data.token); if (data.rememberMe) {
localStorage.setItem("refreshToken", response.data.refreshToken); localStorage.setItem("jwtToken", response.data.token);
localStorage.setItem("refreshToken", response.data.refreshToken);
} else {
sessionStorage.setItem("jwtToken", response.data.token);
sessionStorage.setItem("refreshToken", response.data.refreshToken);
}
setLoading(false); setLoading(false);
navigate("/auth/switch/org"); navigate("/auth/switch/org");
} else { } else {
@ -69,6 +74,16 @@ const LoginPage = () => {
} }
}, [IsLoginWithOTP]); }, [IsLoginWithOTP]);
useEffect(() => {
const token =
localStorage.getItem("jwtToken") ||
sessionStorage.getItem("jwtToken");
if (token) {
navigate("/dashboard", { replace: true });
}
}, []);
return ( return (
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60"> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}> <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
@ -106,36 +121,6 @@ const LoginPage = () => {
{/* Password */} {/* Password */}
{!IsLoginWithOTP && ( {!IsLoginWithOTP && (
<> <>
{/* <div className="mb-3 text-start">
<label htmlFor="password" className="form-label">
Password
</label>
<div className="input-group input-group-merge">
<input
type={hidepass ? "password" : "text"}
id="password"
className={`form-control ${errors.password ? "is-invalid" : ""
}`}
placeholder="••••••••"
{...register("password")}
/>
<span
className="input-group-text cursor-pointer"
onClick={() => setHidepass(!hidepass)}
>
<i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`}></i>
</span>
</div>
{errors.password && (
<div
className="invalid-feedback text-start"
style={{ fontSize: "12px" }}
>
{errors.password.message}
</div>
)}
</div> */}
<div className="mb-3 form-password-toggle text-start"> <div className="mb-3 form-password-toggle text-start">
<label htmlFor="password" className="form-label"> <label htmlFor="password" className="form-label">
Password Password
@ -146,8 +131,9 @@ const LoginPage = () => {
type={hidepass ? "password" : "text"} type={hidepass ? "password" : "text"}
autoComplete="new-password" autoComplete="new-password"
id="password" id="password"
className={`form-control form-control-xl shadow-none ${errors.password ? "is-invalid" : "" className={`form-control form-control-xl shadow-none ${
}`} errors.password ? "is-invalid" : ""
}`}
name="password" name="password"
{...register("password")} {...register("password")}
placeholder="••••••••••••" placeholder="••••••••••••"
@ -168,15 +154,16 @@ const LoginPage = () => {
</span> </span>
</div> </div>
{/* ✅ Error message */}
{errors.password && ( {errors.password && (
<div className="invalid-feedback text-start" style={{ fontSize: "12px" }}> <div
className="invalid-feedback text-start"
style={{ fontSize: "12px" }}
>
{errors.password.message} {errors.password.message}
</div> </div>
)} )}
</div> </div>
{/* Remember Me + Forgot Password */} {/* Remember Me + Forgot Password */}
<div className="mb-3 d-flex justify-content-between align-items-center"> <div className="mb-3 d-flex justify-content-between align-items-center">
<div className="form-check"> <div className="form-check">
@ -209,8 +196,8 @@ const LoginPage = () => {
{loading {loading
? "Please Wait..." ? "Please Wait..."
: IsLoginWithOTP : IsLoginWithOTP
? "Send OTP" ? "Send OTP"
: "Sign In"} : "Sign In"}
</button> </button>
{/* Login With OTP Button */} {/* Login With OTP Button */}
@ -254,4 +241,4 @@ const LoginPage = () => {
); );
}; };
export default LoginPage; export default LoginPage;

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

@ -18,7 +18,7 @@ const TenantSelectionPage = () => {
chooseTenant(tenantId); chooseTenant(tenantId);
}; };
const {mutate:handleLogout,isPending:isLogouting} = useLogout(()=>{}) const {mutate:handleLogout,isPending:isLogouting} = useLogout()
useEffect(() => { useEffect(() => {

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

@ -751,7 +751,6 @@ const EmployeeList = () => {
</div> </div>
</div> </div>
) : ( ) : (
// </div>
<div className="card"> <div className="card">
<div className="text-center"> <div className="text-center">
<i className="fa-solid fa-triangle-exclamation fs-5"></i> <i className="fa-solid fa-triangle-exclamation fs-5"></i>

419
src/pages/project/ProjectList.jsx
View File

@ -1,419 +0,0 @@
import React, { useState, useEffect, useCallback } from "react";
import ProjectCard from "../../components/Project/ProjectCard";
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
import Breadcrumb from "../../components/common/Breadcrumb";
import ProjectRepository from "../../repositories/ProjectRepository";
import { useProjects, useCreateProject } from "../../hooks/useProjects";
import showToast from "../../services/toastService";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { useProfile } from "../../hooks/useProfile";
import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
import ProjectListView from "./ProjectListView";
import eventBus from "../../services/eventBus";
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { defaultCheckBoxAppearanceProvider } from "pdf-lib";
import { useMutation } from "@tanstack/react-query";
import usePagination from "../../hooks/usePagination";
import GlobalModel from "../../components/common/GlobalModel";
import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
const ProjectList = () => {
const { profile: loginUser } = useProfile();
const [listView, setListView] = useState(false);
const [showModal, setShowModal] = useState(false);
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const dispatch = useDispatch();
const { projects, loading, error, refetch } = useProjects();
const [projectList, setProjectList] = useState([]);
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
const [HasManageProject, setHasManageProject] = useState(
HasManageProjectPermission
);
const { mutate: createProject, isPending } = useCreateProject({
onSuccessCallback: () => {
setShowModal(false);
},
});
const [searchTerm, setSearchTerm] = useState("");
const [selectedStatuses, setSelectedStatuses] = useState([
"b74da4c2-d07e-46f2-9919-e75e49b12731",
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
"ef1c356e-0fe0-42df-a5d3-8daee355492d",
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
"33deaef9-9af1-4f2a-b443-681ea0d04f81",
]);
const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false);
useEffect(() => {
dispatch(setProjectId(null));
}, []);
const sortingProject = (projects) => {
if (!loading && Array.isArray(projects)) {
const grouped = {};
projects.forEach((project) => {
const statusId = project.projectStatusId;
if (!grouped[statusId]) grouped[statusId] = [];
grouped[statusId].push(project);
});
const sortedGrouped = selectedStatuses
.filter((statusId) => grouped[statusId])
.flatMap((statusId) =>
grouped[statusId].sort((a, b) =>
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
)
);
setProjectList((prev) => {
const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
return isSame ? prev : sortedGrouped;
});
}
};
useEffect(() => {
if (!loading && projects) {
sortingProject(projects);
}
}, [projects, loading, selectedStatuses]);
useEffect(() => {
setHasManageProject(loginUser ? HasManageProjectPermission : false);
}, [loginUser, HasManageProjectPermission]);
const handleSubmitForm = (newProject) => {
createProject(newProject);
};
const handleStatusChange = (statusId) => {
setCurrentPage(1);
setSelectedStatuses((prev) =>
prev.includes(statusId)
? prev.filter((id) => id !== statusId)
: [...prev, statusId]
);
};
const handleStatusFilterFromChild = (statusesFromChild) => {
setSelectedStatuses(statusesFromChild);
};
const filteredProjects = projectList.filter((project) => {
const matchesStatus = selectedStatuses.includes(project.projectStatusId);
const matchesSearch = project.name
.toLowerCase()
.includes(searchTerm.toLowerCase());
return matchesStatus && matchesSearch;
});
const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
const { currentItems, currentPage, paginate, setCurrentPage } = usePagination(
filteredProjects,
ITEMS_PER_PAGE
);
useEffect(() => {
const tooltipTriggerList = Array.from(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []);
return (
<>
{showModal && (
<GlobalModel isOpen={showModal} closeModal={handleClose}>
<ManageProjectInfo
project={null}
handleSubmitForm={handleSubmitForm}
onClose={handleClose}
isPending={isPending}
/>
</GlobalModel>
)}
<div className="container-fluid">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Projects", link: null },
]}
/>
<div className="card cursor-pointer mb-5">
<div className="card-body p-2 pb-1">
<div className="d-flex flex-wrap justify-content-between align-items-start">
<div className="d-flex flex-wrap align-items-start">
<div className="flex-grow-1 me-2 mb-2">
<input
type="search"
className="form-control form-control-sm"
placeholder="Search projects..."
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
setCurrentPage(1);
}}
/>
</div>
<div className="d-flex gap-2 mb-2">
<button
type="button"
className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(false)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="Card View"
>
<i className="bx bx-grid-alt fs-5"></i>
</button>
<button
type="button"
className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(true)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="List View"
>
<i className="bx bx-list-ul fs-5"></i>
</button>
</div>
<div className="dropdown mt-1">
<a
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-custom-class="tooltip"
title="Filter"
>
<i className="bx bx-slider-alt ms-1"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{[
{
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active",
},
{
id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
label: "In Progress",
},
{
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "On Hold",
},
{
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Inactive",
},
{
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
label: "Completed",
},
].map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">{label}</label>
</div>
</li>
))}
</ul>
</div>
</div>
<div>
<button
className="btn btn-sm btn-primary"
type="button"
onClick={handleShow}
>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">
Add New Project
</span>
</button>
</div>
</div>
</div>
</div>
{loading && <p className="text-center">Loading...</p>}
{!loading && filteredProjects.length === 0 && !listView && (
<p className="text-center text-muted">No projects found.</p>
)}
{listView ? (
<div className="card cursor-pointer">
<div className="card-body p-2">
<div
className="table-responsive text-nowrap py-2 mx-2"
style={{ minHeight: "200px" }}
>
<table className="table m-0">
<thead>
<tr>
<th className="text-start" colSpan={5}>
Project Name
</th>
<th className="mx-2 text-start">Contact Person</th>
<th className="mx-2">START DATE</th>
<th className="mx-2">DEADLINE</th>
<th className="mx-2">Task</th>
<th className="mx-2">Progress</th>
<th className="mx-2">
<div className="dropdown">
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Status <i className="bx bx-filter bx-sm"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{[
{
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active",
},
{
id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
label: "In Progress",
},
{
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "On Hold",
},
{
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Inactive",
},
{
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
label: "Completed",
},
].map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">
{label}
</label>
</div>
</li>
))}
</ul>
</div>
</th>
<th
className={`mx-2 ${HasManageProject ? "d-sm-table-cell" : "d-none"
}`}
>
Action
</th>
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto ">
{currentItems.length === 0 ? (
<tr className="text-center">
<td
colSpan="12"
rowSpan="12"
style={{ height: "200px" }}
>
No projects found
</td>
</tr>
) : (
currentItems.map((project) => (
<ProjectListView
key={project.id}
projectData={project}
recall={sortingProject}
/>
))
)}
</tbody>
</table>
</div>{" "}
</div>{" "}
</div>
) : (
<div className="row">
{currentItems.map((project) => (
<ProjectCard
key={project.id}
projectData={project}
recall={sortingProject}
/>
))}
</div>
)}
{!loading && totalPages > 1 && (
<nav>
<ul className="pagination pagination-sm justify-content-end py-2">
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
<button
className="page-link"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, i) => (
<li
key={i}
className={`page-item ${currentPage === i + 1 && "active"}`}
>
<button
className="page-link"
onClick={() => setCurrentPage(i + 1)}
>
{i + 1}
</button>
</li>
))}
<li
className={`page-item ${currentPage === totalPages && "disabled"
}`}
>
<button
className="page-link"
onClick={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
>
&raquo;
</button>
</li>
</ul>
</nav>
)}
</div>
</>
);
};
export default ProjectList;

206
src/pages/project/ProjectListView.jsx
View File

@ -1,206 +0,0 @@
import React, { useState, useEffect } from "react";
import moment from "moment";
import {
useProjectDetails,
useProjects,
useUpdateProject,
} from "../../hooks/useProjects";
import {
getProjectStatusName,
getProjectStatusColor,
} from "../../utils/projectStatus";
import ProgressBar from "../../components/common/ProgressBar";
import { useNavigate } from "react-router-dom";
import ManageProject from "../../components/Project/ManageProject";
import ProjectRepository from "../../repositories/ProjectRepository";
import { MANAGE_PROJECT } from "../../utils/constants";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
import showToast from "../../services/toastService";
import { getCachedData, cacheData } from "../../slices/apiDataManager";
import GlobalModel from "../../components/common/GlobalModel";
import { formatNumber } from "../../utils/dateUtils";
import { setProjectId } from "../../slices/localVariablesSlice";
import { useDispatch } from "react-redux";
const ProjectListView = ({ projectData, recall }) => {
const [projectInfo, setProjectInfo] = useState(projectData);
const dispatch = useDispatch()
const { projects_Details, loading, error, refetch } = useProjectDetails(
projectInfo?.id, false
);
const [showModal, setShowModal] = useState(false);
const navigate = useNavigate();
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
useEffect(() => {
setProjectInfo(projectData);
}, [projectData]);
const {
mutate: updateProject,
isPending,
isSuccess,
isError,
} = useUpdateProject({
onSuccessCallback: () => {
setShowModal(false);
},
})
const handleShow = async () => {
try {
const { data } = await refetch();
setShowModal(true);
} catch (err) {
showToast("Failed to load project details", "error");
}
};
const getProgress = (planned, completed) => {
return (completed * 100) / planned + "%";
};
const getProgressInNumber = (planned, completed) => {
return (completed * 100) / planned;
};
const handleClose = () => setShowModal(false);
const handleViewProject = () => {
dispatch(setProjectId(projectInfo.id))
navigate(`/projects/details`);
};
const handleViewActivities = () => {
dispatch(setProjectId(projectInfo.id))
navigate(`/activities/records?project=${projectInfo.id}`);
};
const handleFormSubmit = (updatedProject) => {
if (projectInfo?.id) {
updateProject({
projectId: projectInfo.id,
updatedData: updatedProject,
});
}
};
return (
<>
{showModal && projects_Details && (
<GlobalModel isOpen={showModal} closeModal={handleClose}> <ManageProjectInfo
project={projects_Details}
handleSubmitForm={handleFormSubmit}
onClose={handleClose}
isPending={isPending}
/></GlobalModel>
)}
<tr className={`py-8 ${isPending ? "bg-light opacity-50 pointer-events-none" : ""} `}>
<td className="text-start" colSpan={5}>
<span
className="text-primary cursor-pointer"
onClick={() => {
dispatch(setProjectId(projectInfo.id))
navigate(`/projects/details`)
}}
>
{projectInfo.shortName
? `${projectInfo.name} (${projectInfo.shortName})`
: projectInfo.name}
</span>
</td>
<td className="text-start small">{projectInfo.contactPerson}</td>
<td className="small text-center">
<small>
{projectInfo.startDate
? moment(projectInfo.startDate).format("DD-MMM-YYYY")
: "NA"}
</small>
</td>
<td className="mx-2 text-center small">
{projectInfo.endDate
? moment(projectInfo.endDate).format("DD-MMM-YYYY")
: "NA"}
</td>
<td className="mx-2 text-center small">{formatNumber(projectInfo.plannedWork)}</td>
<td className="py-6 mx-2 text-start small align-items-center">
<ProgressBar
plannedWork={projectInfo.plannedWork}
completedWork={projectInfo.completedWork}
className="mb-0"
height="4px"
/>
</td>
<td className="mx-3">
<p className="mb-0">
<span
className={`badge ${getProjectStatusColor(
projectInfo.projectStatusId
)}`}
>
{getProjectStatusName(projectInfo.projectStatusId)}
</span>
</p>
</td>
<td className={`mx-2 ${ManageProject ? "d-sm-table-cell" : "d-none"}`}>
<div className="dropdown z-2">
<button
type="button"
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{loading ? (
<div
className="spinner-border spinner-border-sm text-secondary"
role="status"
>
<span className="visually-hidden">Loading...</span>
</div>
) : (
<i
className="bx bx-dots-vertical-rounded bx-sm text-muted"
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
title="More Action"
></i>
)}
</button>
<ul className="dropdown-menu dropdown-menu-end">
<li>
<a
aria-label="click to View details"
className="dropdown-item"
onClick={handleViewProject}
>
<i className="bx bx-detail me-2"></i>
<span className="align-left">View details</span>
</a>
</li>
<li onClick={handleShow}>
<a className="dropdown-item">
<i className="bx bx-pencil me-2"></i>
<span className="align-left">Modify</span>
</a>
</li>
<li
onClick={handleViewActivities}
>
<a className="dropdown-item">
<i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span>
</a>
</li>
</ul>
</div>
</td>
</tr>
</>
);
};
export default ProjectListView;

235
src/pages/project/ProjectPage.jsx Normal file
View File

@ -0,0 +1,235 @@
import React, { createContext, useContext, useEffect, useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import { ITEMS_PER_PAGE, MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
import ProjectListView from "../../components/Project/ProjectListView";
import GlobalModel from "../../components/common/GlobalModel";
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
import ProjectCardView from "../../components/Project/ProjectCardView";
import usePagination from "../../hooks/usePagination";
import { useProjects } from "../../hooks/useProjects";
import Loader from "../../components/common/Loader";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
const ProjectContext = createContext();
export const useProjectContext = () => {
const context = useContext(ProjectContext);
if (!context) {
throw new Error("useProjectContext must be used within an ProjectProvider");
}
return context;
};
const ProjectPage = () => {
const [manageProject, setMangeProject] = useState({
isOpen: false,
Project: null,
});
const [projectList, setProjectList] = useState([]);
const [listView, setListView] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
const [selectedStatuses, setSelectedStatuses] = useState(
PROJECT_STATUS.map((s) => s.id)
);
const { data, isLoading, isError, error } = useProjects();
const contextDispatcher = {
setMangeProject,
};
const filteredProjects = projectList.filter((project) => {
const matchesStatus = selectedStatuses.includes(project.projectStatusId);
const matchesSearch = project.name
.toLowerCase()
.includes(searchTerm.toLowerCase());
return matchesStatus && matchesSearch;
});
const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
const { currentItems, currentPage, paginate, setCurrentPage } = usePagination(
filteredProjects,
ITEMS_PER_PAGE
);
const handleStatusChange = (statusId) => {
setCurrentPage(1);
setSelectedStatuses((prev) =>
prev.includes(statusId)
? prev.filter((id) => id !== statusId)
: [...prev, statusId]
);
};
const sortingProject = (projects) => {
if (!isLoading && Array.isArray(projects)) {
const grouped = {};
projects.forEach((project) => {
const statusId = project.projectStatusId;
if (!grouped[statusId]) grouped[statusId] = [];
grouped[statusId].push(project);
});
const sortedGrouped = selectedStatuses
.filter((statusId) => grouped[statusId])
.flatMap((statusId) =>
grouped[statusId].sort((a, b) =>
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
)
);
setProjectList((prev) => {
const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
return isSame ? prev : sortedGrouped;
});
}
};
useEffect(() => {
if (!isLoading && data) {
sortingProject(data);
}
}, [data, isLoading, selectedStatuses]);
if(isLoading) return <div className="page-min-h"><Loader/></div>
if(isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
return (
<ProjectContext.Provider value={contextDispatcher}>
<div className="container-fluid">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Projects", link: null },
]}
/>
<div className="card cursor-pointer mb-5">
<div className="card-body p-2 pb-1">
<div className="d-flex flex-wrap justify-content-between align-items-start">
<div className="d-flex flex-wrap align-items-start">
<div className="flex-grow-1 me-2 mb-2">
<input
type="search"
className="form-control form-control-sm"
placeholder="Search projects..."
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
setCurrentPage(1);
}}
/>
</div>
<div className="d-flex gap-2 mb-2">
<button
type="button"
className={`btn btn-sm p-1 ${
!listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(false)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="Card View"
>
<i className="bx bx-grid-alt fs-5"></i>
</button>
<button
type="button"
className={`btn btn-sm p-1 ${
listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(true)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="List View"
>
<i className="bx bx-list-ul fs-5"></i>
</button>
</div>
<div className="dropdown mt-1">
<a
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-custom-class="tooltip"
title="Filter"
>
<i className="bx bx-slider-alt ms-1"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{PROJECT_STATUS.map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">{label}</label>
</div>
</li>
))}
</ul>
</div>
</div>
<div>
{HasManageProject && ( <button
className="btn btn-sm btn-primary"
type="button"
onClick={() =>
setMangeProject({ isOpen: true, Project: null })
}
>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">
Add New Project
</span>
</button>)}
</div>
</div>
</div>
</div>
{/* Project Render here */}
{listView ? (
<ProjectListView
currentItems={currentItems}
selectedStatuses={selectedStatuses}
handleStatusChange={handleStatusChange}
setCurrentPage={setCurrentPage}
totalPages={totalPages}
isLoading={isLoading}
/>
) : (
<ProjectCardView currentItems={currentItems} setCurrentPage={setCurrentPage} totalPages={totalPages} />
)}
{/* ------------------ */}
{/* Project Manage UPdate or create */}
{manageProject.isOpen && (
<GlobalModel
isOpen={manageProject.isOpen}
closeModal={() => setMangeProject({ isOpen: false, Project: null })}
>
<ManageProjectInfo
project={manageProject.Project}
onClose={() => setMangeProject({ isOpen: false, Project: null })}
/>
</GlobalModel>
)}
</div>
</ProjectContext.Provider>
);
};
export default ProjectPage;

105
src/pages/project/ProjectsPage.jsx
View File

@ -1,105 +0,0 @@
import React from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import { PROJECt_STATUS } from "../../utils/constants";
const ProjectsPage = () => {
return (
<div className="container-fluid">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Projects", link: null },
]}
/>
<div className="card cursor-pointer mb-5">
<div className="card-body p-2 pb-1">
<div className="d-flex flex-wrap justify-content-between align-items-start">
<div className="d-flex flex-wrap align-items-start">
<div className="flex-grow-1 me-2 mb-2">
<input
type="search"
className="form-control form-control-sm"
placeholder="Search projects..."
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
setCurrentPage(1);
}}
/>
</div>
<div className="d-flex gap-2 mb-2">
<button
type="button"
className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(false)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="Card View"
>
<i className="bx bx-grid-alt fs-5"></i>
</button>
<button
type="button"
className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(true)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="List View"
>
<i className="bx bx-list-ul fs-5"></i>
</button>
</div>
<div className="dropdown mt-1">
<a
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-custom-class="tooltip"
title="Filter"
>
<i className="bx bx-slider-alt ms-1"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{PROJECt_STATUS.map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">{label}</label>
</div>
</li>
))}
</ul>
</div>
</div>
<div>
<button
className="btn btn-sm btn-primary"
type="button"
onClick={handleShow}
>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">
Add New Project
</span>
</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default ProjectsPage;

2
src/repositories/OrganizationRespository.jsx
View File

@ -2,6 +2,8 @@ import { api } from "../utils/axiosClient";
const OrganizationRepository = { const OrganizationRepository = {
createOrganization: (data) => api.post("/api/Organization/create", data), createOrganization: (data) => api.post("/api/Organization/create", data),
updateOrganizaion:(id,data)=>api.put(`/api/Organization/edit/${id}`),
getOrganizaion:(id)=>api.get(`/api/Organization/details/${id}`),
getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => { getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
return api.get( return api.get(
`/api/Organization/list?pageSize=${pageSize}&pageNumber=${pageNumber}&active=${active}&${ `/api/Organization/list?pageSize=${pageSize}&pageNumber=${pageNumber}&active=${active}&${

4
src/router/AppRoutes.jsx
View File

@ -13,7 +13,6 @@ import ChangePasswordPage from "../pages/authentication/ChangePassword";
// Home & Protected Pages // Home & Protected Pages
import Dashboard from "../components/Dashboard/Dashboard"; import Dashboard from "../components/Dashboard/Dashboard";
import ProjectList from "../pages/project/ProjectList";
import ProjectDetails from "../pages/project/ProjectDetails"; import ProjectDetails from "../pages/project/ProjectDetails";
import ManageProject from "../components/Project/ManageProject"; import ManageProject from "../components/Project/ManageProject";
import EmployeeList from "../pages/employee/EmployeeList"; import EmployeeList from "../pages/employee/EmployeeList";
@ -52,6 +51,7 @@ import OrganizationPage from "../pages/Organization/OrganizationPage";
import LandingPage from "../pages/Home/LandingPage"; import LandingPage from "../pages/Home/LandingPage";
import TenantSelectionPage from "../pages/authentication/TenantSelectionPage"; import TenantSelectionPage from "../pages/authentication/TenantSelectionPage";
import DailyProgrssReport from "../pages/DailyProgressReport/DailyProgrssReport"; import DailyProgrssReport from "../pages/DailyProgressReport/DailyProgrssReport";
import ProjectPage from "../pages/project/ProjectPage";
const router = createBrowserRouter( const router = createBrowserRouter(
[ [
{ {
@ -79,7 +79,7 @@ const router = createBrowserRouter(
element: <HomeLayout />, element: <HomeLayout />,
children: [ children: [
{ path: "/dashboard", element: <Dashboard /> }, { path: "/dashboard", element: <Dashboard /> },
{ path: "/projects", element: <ProjectList /> }, { path: "/projects", element: <ProjectPage /> },
{ path: "/projects/details", element: <ProjectDetails /> }, { path: "/projects/details", element: <ProjectDetails /> },
{ path: "/project/manage/:projectId", element: <ManageProject /> }, { path: "/project/manage/:projectId", element: <ManageProject /> },
{ path: "/employees", element: <EmployeeList /> }, { path: "/employees", element: <EmployeeList /> },

138
src/router/ProtectedRoute.jsx
View File

@ -2,13 +2,69 @@ import React, { useState, useEffect } from "react";
import { Navigate, Outlet } from "react-router-dom"; import { Navigate, Outlet } from "react-router-dom";
import { jwtDecode } from "jwt-decode"; import { jwtDecode } from "jwt-decode";
import AuthRepository from "../repositories/AuthRepository"; import AuthRepository from "../repositories/AuthRepository";
import { removeSession } from "../utils/authUtils";
const isTokenExpired = (token) => {
if (!token) return true;
try {
const { exp } = jwtDecode(token);
return exp * 1000 < Date.now();
} catch {
return true;
}
};
const validateToken = async () => {
const token =
localStorage.getItem("jwtToken") ||
sessionStorage.getItem("jwtToken");
const refreshTokenStored =
localStorage.getItem("refreshToken") ||
sessionStorage.getItem("refreshToken");
if (!refreshTokenStored){
console.log("no refrh tokem");
removeSession()
return false
};
if (isTokenExpired(token)) {
return await attemptTokenRefresh(refreshTokenStored);
}
return true;
};
const attemptTokenRefresh = async (storedRefreshToken) => {
try {
const currentToken =
localStorage.getItem("jwtToken") ||
sessionStorage.getItem("jwtToken");
const response = await AuthRepository.refreshToken({
token: currentToken,
refreshToken: storedRefreshToken,
});
const { token: newToken, refreshToken: newRefreshToken } = response.data;
if (localStorage.getItem("jwtToken")) {
localStorage.setItem("jwtToken", newToken);
localStorage.setItem("refreshToken", newRefreshToken);
} else {
sessionStorage.setItem("jwtToken", newToken);
sessionStorage.setItem("refreshToken", newRefreshToken);
}
return true;
} catch (error) {
console.error("Token refresh failed:", error);
return false;
}
};
const ProtectedRoute = () => { const ProtectedRoute = () => {
// const isAuthenticated = localStorage.getItem("jwtToken"); // Example authentication check
// // const isAuthenticated = true;
// isTokenValid();
// return isAuthenticated ? <Outlet /> : <Navigate to="/auth/login" />
const [isAuthenticated, setIsAuthenticated] = useState(null); const [isAuthenticated, setIsAuthenticated] = useState(null);
useEffect(() => { useEffect(() => {
@ -21,80 +77,10 @@ const ProtectedRoute = () => {
}, []); }, []);
if (isAuthenticated === null) { if (isAuthenticated === null) {
return <div>Loading...</div>; // Show a loader while checking return <div>Loading...</div>;
} }
return isAuthenticated ? <Outlet /> : <Navigate to="/auth/login" replace />; return isAuthenticated ? <Outlet /> : <Navigate to="/auth/login" replace />;
}; };
// Function to check if the token is expired
const isTokenExpired = (token) => {
if (!token) return true;
try {
const { exp } = jwtDecode(token);
return exp * 1000 < Date.now(); // Check if expired
} catch (error) {
return true; // If decoding fails, treat as expired
}
};
// Function to validate and refresh the token if expired
export const validateToken = async () => {
const token = localStorage.getItem("jwtToken");
const refreshTokenStored = localStorage.getItem("refreshToken");
// If refresh token is absent, cannot proceed
if (!refreshTokenStored) {
console.warn("No refresh token available. Redirecting to login.");
return false;
}
// If access token expired, try to refresh
if (isTokenExpired(token)) {
return await attemptTokenRefresh(refreshTokenStored);
}
return true;
};
// Attempt to refresh the access token
const attemptTokenRefresh = async (storedRefreshToken) => {
try {
const response = await AuthRepository.refreshToken({
token: localStorage.getItem("jwtToken"),
refreshToken: storedRefreshToken,
});
localStorage.setItem("jwtToken", response.data.token);
localStorage.setItem("refreshToken", response.data.refreshToken);
return true;
// api
// .post("/api/auth/refresh-token", {
// token: localStorage.getItem("jwtToken"),
// refreshToken: refreshToken,
// })
// .then((data) => {
// localStorage.setItem("jwtToken", response.data.token);
// localStorage.setItem("refreshToken", response.data.refreshToken);
// return true;
// })
// .catch((error) => {
// console.error("Token refresh failed:", error);
// });
// const refreshToken = localStorage.getItem("refreshToken");
// const response = await axiosClient.post(`/api/auth/refresh-token`, {
// token: localStorage.getItem("jwtToken"),
// refreshToken: refreshToken,
// });
// if (response.status === 200) {
// localStorage.setItem("jwtToken", response.data.token);
// localStorage.setItem("refreshToken", response.data.refreshToken);
// return true;
// }
} catch (error) {
console.error("Token refresh failed:", error);
return false;
}
};
export default ProtectedRoute; export default ProtectedRoute;

7
src/utils/authUtils.js
View File

@ -0,0 +1,7 @@
export const removeSession = () => {
localStorage.removeItem("jwtToken");
localStorage.removeItem("refreshToken");
sessionStorage.removeItem("jwtToken");
sessionStorage.removeItem("refreshToken");
localStorage.removeItem("ctnt");
};

18
src/utils/axiosClient.jsx
View File

@ -16,14 +16,15 @@ export const axiosClient = axios.create({
// Auto retry failed requests (e.g., network issues) // Auto retry failed requests (e.g., network issues)
axiosRetry(axiosClient, { retries: 3 }); axiosRetry(axiosClient, { retries: 3 });
debugger
// Request Interceptor — Add Bearer token if required // Request Interceptor — Add Bearer token if required
axiosClient.interceptors.request.use( axiosClient.interceptors.request.use(
async (config) => { async (config) => {
const requiresAuth = config.authRequired !== false; // default to true const requiresAuth = config.authRequired !== false; // default to true
if (requiresAuth) { if (requiresAuth) {
const token = localStorage.getItem("jwtToken"); const token =
localStorage.getItem("jwtToken") || sessionStorage.getItem("jwtToken");
if (token) { if (token) {
config.headers["Authorization"] = `Bearer ${token}`; config.headers["Authorization"] = `Bearer ${token}`;
config._retry = true; config._retry = true;
@ -72,7 +73,7 @@ axiosClient.interceptors.response.use(
if (status === 401 && !isRefreshRequest) { if (status === 401 && !isRefreshRequest) {
originalRequest._retry = true; originalRequest._retry = true;
const refreshToken = localStorage.getItem("refreshToken"); const refreshToken = localStorage.getItem("refreshToken") || sessionStorage.getItem("refreshToken");
if ( if (
!refreshToken || !refreshToken ||
@ -87,15 +88,20 @@ axiosClient.interceptors.response.use(
try { try {
// Refresh token call // Refresh token call
const res = await axiosClient.post("/api/Auth/refresh-token", { const res = await axiosClient.post("/api/Auth/refresh-token", {
token: localStorage.getItem("jwtToken"), token: localStorage.getItem("jwtToken") || sessionStorage.getItem("jwtToken"),
refreshToken, refreshToken,
}); });
const { token, refreshToken: newRefreshToken } = res.data.data; const { token, refreshToken: newRefreshToken } = res.data.data;
// Save updated tokens // Save updated tokens
localStorage.setItem("jwtToken", token); if (localStorage.getItem("jwtToken")) {
localStorage.setItem("refreshToken", newRefreshToken); localStorage.setItem("jwtToken", token);
localStorage.setItem("refreshToken", newRefreshToken);
} else {
sessionStorage.setItem("jwtToken", token);
sessionStorage.setItem("refreshToken", newRefreshToken);
}
startSignalR(); startSignalR();
// Set Authorization header // Set Authorization header

3
src/utils/constants.jsx
View File

@ -118,7 +118,7 @@ export const orgSize = [
{ val: "500+", name: "500+" }, { val: "500+", name: "500+" },
]; ];
export const PROJECt_STATUS = [ export const PROJECT_STATUS = [
{ {
id: "b74da4c2-d07e-46f2-9919-e75e49b12731", id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active", label: "Active",
@ -140,6 +140,7 @@ export const PROJECt_STATUS = [
label: "Completed", label: "Completed",
}, },
]; ];
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
export const BASE_URL = process.env.VITE_BASE_URL; export const BASE_URL = process.env.VITE_BASE_URL;