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

Employee data is now sent as JSON instead of multipart/form-data during creation and update, with the form shown in a popup and Aadhar/PAN fields removed. #86

Merged
vikas.nale merged 2 commits from Ashutosh_Enhancement#199_Manage_Employee_FromBody into Issue_May_2W 2025-05-09 06:36:26 +00:00
Conversation 0 Commits 2 Files Changed 6 +129 -169
6 changed files with 129 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,17 +15,19 @@ import { clearApiCacheKey } from "../../slices/apiCacheSlice";
const mobileNumberRegex = /^[7-9]\d{9}$/; const mobileNumberRegex = /^[7-9]\d{9}$/;
const ManageEmployee = () => { const ManageEmployee = ({ employeeId, onClosed }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { employeeId } = useParams(); // const { employeeId } = useParams();
const { const {
employee, employee,
error, error,
loading: empLoading, loading: empLoading,
} = useEmployeeProfile(employeeId); } = useEmployeeProfile(employeeId);
dispatch(changeMaster("Job Role")); useEffect(() => {
dispatch(changeMaster("Job Role"));
}, [employeeId]);
const [disabledEmail, setDisabledEmail] = useState(false); const [disabledEmail, setDisabledEmail] = useState(false);
const { data: job_role, loading } = useMaster(); const { data: job_role, loading } = useMaster();
@ -36,11 +38,11 @@ const ManageEmployee = () => {
const [permanentAddressLength, setPermanentAddressLength] = useState(0); const [permanentAddressLength, setPermanentAddressLength] = useState(0);
const userSchema = z.object({ const userSchema = z.object({
...(employeeId ? { Id: z.string().optional() } : {}), ...(employeeId ? { id: z.string().optional() } : {}),
FirstName: z.string().min(1, { message: "First Name is required" }), firstName: z.string().min(1, { message: "First Name is required" }),
MiddleName: z.string().optional(), middleName: z.string().optional(),
LastName: z.string().min(1, { message: "Last Name is required" }), lastName: z.string().min(1, { message: "Last Name is required" }),
Email: z email: z
.string() .string()
.max(80, "Email cannot exceed 80 characters") .max(80, "Email cannot exceed 80 characters")
.optional() .optional()
@ -59,11 +61,11 @@ const ManageEmployee = () => {
message: "Email local or domain part is too long", message: "Email local or domain part is too long",
} }
), ),
CurrentAddress: z currentAddress: z
.string() .string()
.min(1, { message: "Current Address is required" }) .min(1, { message: "Current Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }), .max(500, { message: "Address cannot exceed 500 characters" }),
BirthDate: z birthDate: z
.string() .string()
.min(1, { message: "Birth Date is required" }) .min(1, { message: "Birth Date is required" })
.refine( .refine(
@ -74,7 +76,7 @@ const ManageEmployee = () => {
message: "Birth date cannot be in the future", message: "Birth date cannot be in the future",
} }
), ),
JoiningDate: z joiningDate: z
.string() .string()
.min(1, { message: "Joining Date is required" }) .min(1, { message: "Joining Date is required" })
.refine( .refine(
@ -85,43 +87,43 @@ const ManageEmployee = () => {
message: "Joining date cannot be in the future", message: "Joining date cannot be in the future",
} }
), ),
EmergencyPhoneNumber: z emergencyPhoneNumber: z
.string() .string()
.min(1, { message: "Phone Number is required" }) .min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }), .regex(mobileNumberRegex, { message: "Invalid phone number " }),
EmergencyContactPerson: z emergencyContactPerson: z
.string() .string()
.min(1, { message: "Emergency Contact Person is required" }) .min(1, { message: "Emergency Contact Person is required" })
.regex(/^[A-Za-z\s]+$/, { .regex(/^[A-Za-z\s]+$/, {
message: "Emergency Contact Person must contain only letters", message: "Emergency Contact Person must contain only letters",
}), }),
AadharNumber: z aadharNumber: z
.string() .string()
.optional() .optional()
.refine((val) => !val || /^\d{12}$/.test(val), { .refine((val) => !val || /^\d{12}$/.test(val), {
message: "Aadhar card must be exactly 12 digits long", message: "Aadhar card must be exactly 12 digits long",
}), }),
Gender: z gender: z
.string() .string()
.min(1, { message: "Gender is required" }) .min(1, { message: "Gender is required" })
.refine((val) => val !== "Select Gender", { .refine((val) => val !== "Select Gender", {
message: "Please select a gender", message: "Please select a gender",
}), }),
PanNumber: z panNumber: z
.string() .string()
.optional() .optional()
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), { .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
message: "Invalid PAN number", message: "Invalid PAN number",
}), }),
PermanentAddress: z permanentAddress: z
.string() .string()
.min(1, { message: "Permanent Address is required" }) .min(1, { message: "Permanent Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }), .max(500, { message: "Address cannot exceed 500 characters" }),
PhoneNumber: z phoneNumber: z
.string() .string()
.min(1, { message: "Phone Number is required" }) .min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }), .regex(mobileNumberRegex, { message: "Invalid phone number " }),
JobRoleId: z.string().min(1, { message: "Role is required" }), jobRoleId: z.string().min(1, { message: "Role is required" }),
}); });
const { const {
@ -135,22 +137,22 @@ const ManageEmployee = () => {
} = useForm({ } = useForm({
resolver: zodResolver(userSchema), resolver: zodResolver(userSchema),
defaultValues: { defaultValues: {
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: currentEmployee?.emergencyContactPerson || "", 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() || null, jobRoleId: currentEmployee?.jobRoleId.toString() || null,
}, },
mode: "onChange", mode: "onChange",
}); });
@ -160,29 +162,8 @@ const ManageEmployee = () => {
const onSubmit = (data) => { const onSubmit = (data) => {
setLoading(true); setLoading(true);
const formData = getValues(); console.log(data);
EmployeeRepository.manageEmployee(data)
const formDataToSend = new FormData();
if (!employeeId) {
delete formData["Id"];
}
for (const key in formData) {
formDataToSend.append(key, formData[key]);
// if (key === "Documents") {
// formData[key]?.forEach((file, index) => {
// formDataToSend.append(`Documents`, file);
// });
// } else if (key === "Photo" && formData[key]) {
// formDataToSend.append("Photo", formData[key]);
// } else{
// formDataToSend.append(key, formData[key]);
// }
}
EmployeeRepository.manageEmployee(formDataToSend)
.then((response) => { .then((response) => {
showToast("Employee details updated successfully.", "success"); showToast("Employee details updated successfully.", "success");
clearCacheKey("employeeListByProject"); clearCacheKey("employeeListByProject");
@ -194,7 +175,10 @@ const ManageEmployee = () => {
navigation("/employees"); navigation("/employees");
}) })
.catch((error) => { .catch((error) => {
const message = error?.response?.data?.message || error?.message || "Error occured during api calling" const message =
error?.response?.data?.message ||
error?.message ||
"Error occured during api calling";
showToast(message, "error"); showToast(message, "error");
setLoading(false); setLoading(false);
}); });
@ -206,29 +190,27 @@ const ManageEmployee = () => {
} }
}, [loading, error, employee]); }, [loading, error, employee]);
dispatch(changeMaster("Job Role"));
useEffect(() => { useEffect(() => {
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() || "",
} }
: {} // Empty object resets the form : {} // Empty object resets the form
); );
@ -238,9 +220,9 @@ const ManageEmployee = () => {
return ( return (
<> <>
<div className="row"> <div className=" row">
<div className="col-xxl"> <div className="col-xl">
<div className="card mb-4"> <div className="card">
<div className="card-header d-flex align-items-center justify-content-between"> <div className="card-header d-flex align-items-center justify-content-between">
<h6 className="mb-0"> <h6 className="mb-0">
{employee ? "Update Employee" : "Create Employee"} {employee ? "Update Employee" : "Create Employee"}
@ -248,15 +230,9 @@ const ManageEmployee = () => {
<span <span
className="cursor-pointer fs-6" className="cursor-pointer fs-6"
data-htm="true" onClick={() => onClosed()}
data-bs-toggle="tooltip"
data-bs-offset="0,6"
data-bs-placement="top"
data-bs-html="true"
title="Move Back"
onClick={() => navigation("/employees")}
> >
<i className="bx bxs-chevron-left"></i> Back <i className='bx bx-x'></i>
</span> </span>
</div> </div>
<div className="card-body"> <div className="card-body">
@ -272,7 +248,7 @@ const ManageEmployee = () => {
<input <input
type="text" type="text"
name="FirstName" name="FirstName"
{...register("FirstName")} {...register("firstName")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="FirstName" id="FirstName"
placeholder="First Name" placeholder="First Name"
@ -291,7 +267,7 @@ const ManageEmployee = () => {
<input <input
type="text" type="text"
{...register("MiddleName")} {...register("middleName")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="MiddleName" id="MiddleName"
placeholder="Middle Name" placeholder="Middle Name"
@ -309,7 +285,7 @@ const ManageEmployee = () => {
<div className="form-text text-start">Last Name</div> <div className="form-text text-start">Last Name</div>
<input <input
type="text" type="text"
{...register("LastName")} {...register("lastName")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="LastName" id="LastName"
placeholder="Last Name" placeholder="Last Name"
@ -330,7 +306,7 @@ const ManageEmployee = () => {
<input <input
type="email" type="email"
id="Email" id="Email"
{...register("Email")} {...register("email")}
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="example@domain.com" placeholder="example@domain.com"
maxLength={80} maxLength={80}
@ -352,7 +328,7 @@ const ManageEmployee = () => {
type="text" type="text"
keyboardType="numeric" keyboardType="numeric"
id="PhoneNumber" id="PhoneNumber"
{...register("PhoneNumber")} {...register("phoneNumber")}
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Phone Number" placeholder="Phone Number"
inputMode="numeric" inputMode="numeric"
@ -376,7 +352,7 @@ const ManageEmployee = () => {
<div className="input-group input-group-merge "> <div className="input-group input-group-merge ">
<select <select
className="form-select form-select-sm " className="form-select form-select-sm "
{...register("Gender")} {...register("gender")}
id="Gender" id="Gender"
aria-label="" aria-label=""
> >
@ -404,7 +380,7 @@ const ManageEmployee = () => {
<input <input
className="form-control form-control-sm" className="form-control form-control-sm"
type="date" type="date"
{...register("BirthDate")} {...register("birthDate")}
id="BirthDate" id="BirthDate"
/> />
</div> </div>
@ -424,7 +400,7 @@ const ManageEmployee = () => {
<input <input
className="form-control form-control-sm" className="form-control form-control-sm"
type="date" type="date"
{...register("JoiningDate")} {...register("joiningDate")}
id="JoiningDate" id="JoiningDate"
/> />
</div> </div>
@ -448,7 +424,7 @@ const ManageEmployee = () => {
placeholder="Current Address" placeholder="Current Address"
aria-label="Current Address" aria-label="Current Address"
aria-describedby="basic-icon-default-message2" aria-describedby="basic-icon-default-message2"
{...register("CurrentAddress")} {...register("currentAddress")}
maxLength={500} maxLength={500}
onChange={(e) => { onChange={(e) => {
setCurrentAddressLength(e.target.value.length); setCurrentAddressLength(e.target.value.length);
@ -482,7 +458,7 @@ const ManageEmployee = () => {
placeholder="Permanent Address" placeholder="Permanent Address"
aria-label="Permanent Address" aria-label="Permanent Address"
aria-describedby="basic-icon-default-message2" aria-describedby="basic-icon-default-message2"
{...register("PermanentAddress")} {...register("permanentAddress")}
maxLength={500} maxLength={500}
onChange={(e) => { onChange={(e) => {
setPermanentAddressLength(e.target.value.length); setPermanentAddressLength(e.target.value.length);
@ -516,7 +492,7 @@ const ManageEmployee = () => {
<div className="input-group input-group-merge "> <div className="input-group input-group-merge ">
<select <select
className="form-select form-select-sm" className="form-select form-select-sm"
{...register("JobRoleId")} {...register("jobRoleId")}
id="JobRoleId" id="JobRoleId"
aria-label="" aria-label=""
> >
@ -545,7 +521,7 @@ const ManageEmployee = () => {
</div> </div>
<input <input
type="text" type="text"
{...register("EmergencyContactPerson")} {...register("emergencyContactPerson")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="EmergencyContactPerson" id="EmergencyContactPerson"
maxLength={50} maxLength={50}
@ -566,7 +542,7 @@ const ManageEmployee = () => {
</div> </div>
<input <input
type="text" type="text"
{...register("EmergencyPhoneNumber")} {...register("emergencyPhoneNumber")}
className="form-control form-control-sm phone-mask" className="form-control form-control-sm phone-mask"
id="EmergencyPhoneNumber" id="EmergencyPhoneNumber"
placeholder="Phone Number" placeholder="Phone Number"
@ -583,13 +559,13 @@ const ManageEmployee = () => {
)} )}
</div> </div>
</div> </div>
<div className="row mb-3"> <div className="row mb-3 d-none">
<div className="col-sm-6"> <div className="col-sm-6">
<div className="form-text text-start">AADHAR Number</div> <div className="form-text text-start">AADHAR Number</div>
<input <input
type="text" type="text"
{...register("AadharNumber")} {...register("aadharNumber")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="AadharNumber" id="AadharNumber"
placeholder="AADHAR Number" placeholder="AADHAR Number"
@ -602,12 +578,12 @@ const ManageEmployee = () => {
</div> </div>
)} )}
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6 d-none">
<div className="form-text text-start">PAN Number</div> <div className="form-text text-start">PAN Number</div>
<input <input
type="text" type="text"
{...register("PanNumber")} {...register("panNumber")}
className="form-control form-control-sm" className="form-control form-control-sm"
id="PanNumber" id="PanNumber"
placeholder="PAN Number" placeholder="PAN Number"
@ -627,7 +603,7 @@ const ManageEmployee = () => {
{employeeId && ( {employeeId && (
<div className="row mb-3 d-none"> <div className="row mb-3 d-none">
<div className="col-sm-12"> <div className="col-sm-12">
<input type="text" name="id" {...register("Id")} /> <input type="text" name="id" {...register("id")} />
</div> </div>
</div> </div>
)} )}

2
src/components/Employee/ManageRole.jsx
View File

@ -17,7 +17,9 @@ const ManageRole = ( {employeeId, onClosed} ) =>
{ {
const disptach = useDispatch(); const disptach = useDispatch();
useEffect(()=>{
disptach(changeMaster("Application Role")); disptach(changeMaster("Application Role"));
},[disptach])
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const { employeeRoles, loading } = useEmployeeRoles(employeeId); const { employeeRoles, loading } = useEmployeeRoles(employeeId);
const { data, loading: roleLoading } = useMaster(); const { data, loading: roleLoading } = useMaster();

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

@ -20,13 +20,14 @@ import {
exportToPDF, exportToPDF,
} from "../../utils/tableExportUtils"; } from "../../utils/tableExportUtils";
import EmployeeRepository from "../../repositories/EmployeeRepository"; import EmployeeRepository from "../../repositories/EmployeeRepository";
import ManageEmployee from "../../components/Employee/ManageEmployee";
const EmployeeList = () => { const EmployeeList = () => {
const { profile: loginUser } = useProfile(); const { profile: loginUser } = useProfile();
const [selectedProject, setSelectedProject] = useState(""); const [selectedProject, setSelectedProject] = useState("");
const { projects, loading: projectLoading } = useProjects(); const { projects, loading: projectLoading } = useProjects();
const [showInactive, setShowInactive] = useState(false); const [showInactive, setShowInactive] = useState(false);
const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES); const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
const { employees, loading, setLoading, error, recallEmployeeData } = const { employees, loading, setLoading, error, recallEmployeeData } =
useEmployeesAllOrByProjectId(selectedProject, showInactive); useEmployeesAllOrByProjectId(selectedProject, showInactive);
@ -37,9 +38,11 @@ const EmployeeList = () => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(15); const [itemsPerPage] = useState(15);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const [filteredData, setFilteredData] = useState([]); const [filteredData, setFilteredData] = useState([]);
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [selectedEmployeeId, setSelecedEmployeeId] = useState();
const navigate = useNavigate(); const navigate = useNavigate();
@ -91,13 +94,15 @@ const EmployeeList = () => {
const closeModal = () => { const closeModal = () => {
setIsCreateModalOpen(false); setIsCreateModalOpen(false);
const modalElement = document.getElementById("managerole-modal"); const modalElement = document.getElementById("managerole-modal");
if (modalElement) { if (modalElement && !showModal) {
modalElement.classList.remove("show"); modalElement.classList.remove("show");
modalElement.style.display = "none"; modalElement.style.display = "none";
document.body.classList.remove("modal-open"); document.body.classList.remove("modal-open");
document.querySelector(".modal-backdrop").remove(); document.querySelector(".modal-backdrop").remove();
} }
setShowModal(false);
}; };
const handleShow = () => setShowModal(true); const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false); const handleClose = () => setShowModal(false);
@ -160,20 +165,34 @@ const EmployeeList = () => {
recallEmployeeData(e.target.checked); recallEmployeeData(e.target.checked);
}; };
const handleEmployeeModel = (id) => {
setSelecedEmployeeId(id);
setShowModal(true);
};
return ( return (
<> <>
{isCreateModalOpen && ( {isCreateModalOpen && (
<ManageEmp employeeId={modelConfig} onClosed={closeModal} /> <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
)} )}
<div <div
className={`modal fade ${showModal ? "show" : ""}`} className={`modal fade ${showModal ? "show" : ""} `}
tabIndex="-1" tabIndex="-1"
role="dialog" role="dialog"
style={{ display: showModal ? "block" : "none" }} style={{ display: showModal ? "block" : "none" }}
aria-hidden={!showModal} aria-hidden={!showModal}
> >
<SuspendEmp onClose={handleClose} /> <div
className="modal-dialog modal-xl modal-dialog-centered "
>
<div className="modal-content overflow-y-auto overflow-x-hidden"
style={{ maxHeight: "90vh" }}>
<ManageEmployee
employeeId={selectedEmployeeId}
onClosed={closeModal}
/>
</div>
</div>
</div> </div>
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
@ -301,21 +320,19 @@ const EmployeeList = () => {
</ul> </ul>
<button <button
className={`btn btn-sm add-new btn-primary ${ className={`btn btn-sm add-new btn-primary ${
!ManageEmployee && "d-none" !Manage_Employee && "d-none"
}`} }`}
tabIndex="0" tabIndex="0"
type="button" type="button"
onClick={() => {
handleEmployeeModel(null);
}}
> >
<span> <span>
<Link <i className="bx bx-plus-circle me-2"></i>
to="/employee/manage" <span className="d-none d-md-inline-block">
className="dropdown-item" Add New Employee
> </span>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">
Add New Employee
</span>
</Link>
</span> </span>
</button>{" "} </button>{" "}
</div> </div>
@ -332,12 +349,8 @@ const EmployeeList = () => {
onChange={handleToggle} onChange={handleToggle}
/> />
<span className="switch-toggle-slider"> <span className="switch-toggle-slider">
<span className="switch-on"> <span className="switch-on"></span>
<i className="icon-base bx bx-check"></i> <span className="switch-off"></span>
</span>
<span className="switch-off">
<i className="icon-base bx bx-x"></i>
</span>
</span> </span>
<span className="switch-label"> <span className="switch-label">
Show Inactive Employees Show Inactive Employees
@ -420,7 +433,7 @@ const EmployeeList = () => {
</th> </th>
<th <th
className={`sorting_disabled ${ className={`sorting_disabled ${
!ManageEmployee && "d-none" !Manage_Employee && "d-none"
}`} }`}
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
@ -535,7 +548,7 @@ const EmployeeList = () => {
</span> </span>
)} )}
</td> </td>
{ManageEmployee && ( {Manage_Employee && (
<td className="text-end"> <td className="text-end">
<div className="dropdown"> <div className="dropdown">
<button <button
@ -553,12 +566,14 @@ const EmployeeList = () => {
> >
<i className="bx bx-detail bx-sm"></i> View <i className="bx bx-detail bx-sm"></i> View
</button> </button>
<Link <button
to={`/employee/manage/${item.id}`}
className="dropdown-item py-1" className="dropdown-item py-1"
onClick={() => {
handleEmployeeModel(item.id);
}}
> >
<i className="bx bx-edit bx-sm"></i> Edit <i className="bx bx-edit bx-sm"></i> Edit
</Link> </button>
{!item.isSystem && ( {!item.isSystem && (
<> <>
<button <button

31
src/pages/employee/ManageEmp.jsx
View File

@ -1,31 +0,0 @@
import React from "react";
import ManageEmployee from "../../components/Employee/ManageEmployee";
import Breadcrumb from "../../components/common/Breadcrumb";
import { getCachedData } from "../../slices/apiDataManager";
const ManageEmp = () => {
const onEmployeeSubmt = () => {
// console.log("employee submit clicked");
};
return (
<div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Employees", link: "/employees" },
{ label: "Manage", link: null },
]}
></Breadcrumb>
<div>
<ManageEmployee
employee={null}
onSubmit={onEmployeeSubmt}
></ManageEmployee>
</div>
</div>
);
};
export default ManageEmp;

4
src/repositories/EmployeeRepository.jsx
View File

@ -7,9 +7,7 @@ const EmployeeRepository = {
searchEmployees: (query) => searchEmployees: (query) =>
api.get(`/api/employee/search/${query}`), api.get(`/api/employee/search/${query}`),
manageEmployee: (data) => manageEmployee: (data) =>
api.post("/api/employee/manage", data, { api.post("/api/employee/manage", data),
"Content-Type": "multipart/form-data",
}),
updateEmployee: (id, data) => api.put(`/users/${id}`, data), updateEmployee: (id, data) => api.put(`/users/${id}`, data),
// deleteEmployee: ( id ) => api.delete( `/users/${ id }` ), // deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
getEmployeeProfile:(id)=>api.get(`/api/employee/profile/get/${id}`), getEmployeeProfile:(id)=>api.get(`/api/employee/profile/get/${id}`),

6
src/router/AppRoutes.jsx
View File

@ -18,7 +18,7 @@ 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";
import ManageEmp from "../pages/employee/ManageEmp"; // import ManageEmp from "../pages/employee/ManageEmp";
import EmployeeProfile from "../pages/employee/EmployeeProfile"; import EmployeeProfile from "../pages/employee/EmployeeProfile";
import Inventory from "../pages/project/Inventory"; import Inventory from "../pages/project/Inventory";
import AttendancePage from "../pages/Activities/AttendancePage"; import AttendancePage from "../pages/Activities/AttendancePage";
@ -63,8 +63,8 @@ const router = createBrowserRouter(
{ path: "/project/manage/:projectId", element: <ManageProject /> }, { path: "/project/manage/:projectId", element: <ManageProject /> },
{ path: "/employees", element: <EmployeeList /> }, { path: "/employees", element: <EmployeeList /> },
{ path: "/employee/:employeeId", element: <EmployeeProfile /> }, { path: "/employee/:employeeId", element: <EmployeeProfile /> },
{ path: "/employee/manage", element: <ManageEmp /> }, // { path: "/employee/manage", element: <ManageEmp /> },
{path: "/employee/manage/:employeeId", element: <ManageEmp />}, // {path: "/employee/manage/:employeeId", element: <ManageEmp />},
{ path: "/directory", element: <Directory /> }, { path: "/directory", element: <Directory /> },
{ path: "/inventory", element: <Inventory /> }, { path: "/inventory", element: <Inventory /> },
{ path: "/activities/attendance", element: <AttendancePage /> }, { path: "/activities/attendance", element: <AttendancePage /> },