Adding popup in employees for ManageReporting.

src/components/Employee/EmployeeSchema.jsx

@@ -3,8 +3,8 @@ import { z } from "zod"
 
 const mobileNumberRegex = /^[0-9]\d{9}$/;
 
-export  const employeeSchema = 
-     z.object({
+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" }),
@@ -90,35 +90,44 @@ export  const employeeSchema =
       .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),
+    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"], 
-});
+    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
-    }
+  firstName: "",
+  middleName: "",
+  lastName: "",
+  email: "",
+  currentAddress: "",
+  birthDate: "",
+  joiningDate: "",
+  emergencyPhoneNumber: "",
+  emergencyContactPerson: "",
+  aadharNumber: "",
+  gender: "",
+  panNumber: "",
+  permanentAddress: "",
+  phoneNumber: "",
+  jobRoleId: null,
+  organizationId: "",
+  hasApplicationAccess: false
+}
+
+export const ManageReportingSchema = {
+  
+}
+
+export const defaultManageRportion = {
+
+}
+

src/components/Employee/ManageReporting.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import Label from '../common/Label'
+import PmsEmployeeInputTag from '../common/PmsEmployeeInputTag'
+
+const ManageReporting = ({ onClosed }) => {
+    const { handleSubmit, control, watch, reset } = useForm()
+    
+    const handleClose = () => {
+        reset();
+        onClosed();
+    };
+
+    return (
+        <div>
+            <form onSubmit={handleSubmit()} className="p-sm-0 p-2">
+                <h5 className="m-0 py-1 mb-3">Manage Reporting</h5>
+
+                {/* Primary */}
+                <div className="row mb-6">
+                    <div className="col-12">
+                        <div className="d-flex align-items-center">
+                            <Label className="form-label me-4 mb-0" required>
+                                Primary:
+                            </Label>
+                            <div className="flex-grow-1">
+                                <PmsEmployeeInputTag
+                                    control={control}
+                                    name="primaryNotifyTo"
+                                    placeholder="Type to search users"
+                                    projectId={watch("projectId")}
+                                    forAll={true}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Secondary */}
+                <div className="row mb-6">
+                    <div className="col-12">
+                        <div className="d-flex align-items-center">
+                            <Label className="form-label me-2 mb-0" >
+                                Secondary:
+                            </Label>
+                            <div className="flex-grow-1">
+                                <PmsEmployeeInputTag
+                                    control={control}
+                                    name="secondaryNotifyTo"
+                                    placeholder="Type to search users"
+                                    projectId={watch("projectId")}
+                                    forAll={true}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="d-flex justify-content-end gap-3 mt-3 mb-3">
+                    <button
+                        type="button"
+                        onClick={handleClose}
+                        className="btn btn-label-secondary btn-sm"
+                    >
+                        Cancel
+                    </button>
+
+                    <button type="submit" className="btn btn-primary btn-sm">
+                        Submit
+                    </button>
+                </div>
+            </form>
+        </div>
+    )
+}
+
+export default ManageReporting

src/pages/employee/EmployeeList.jsx

@@ -40,6 +40,7 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import Pagination from "../../components/common/Pagination";
 import handleEmployeeExport from "../../components/Employee/handleEmployeeExport";
 import { SpinnerLoader } from "../../components/common/Loader";
+import ManageReporting from "../../components/Employee/ManageReporting";
 
 const EmployeeList = () => {
   const selectedProjectId = useSelector(
@@ -68,9 +69,10 @@ const EmployeeList = () => {
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
   const [showModal, setShowModal] = useState(false);
-  const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
+  const [selectedEmployeeId, setSelectedEmployeeId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
+  const [showManageReportingModal, setShowManageReportingModal] = useState(false);
   const [employeeLodaing, setemployeeLodaing] = useState(false);
   const ViewTeamMember = useHasUserPermission(VIEW_TEAM_MEMBERS);
   const { mutate: suspendEmployee, isPending: empLodaing } = useSuspendEmployee(
@@ -148,10 +150,15 @@ const EmployeeList = () => {
   };
 
   const handleEmployeeModel = (id) => {
-    setSelecedEmployeeId(id);
+    setSelectedEmployeeId(id);
     setShowModal(true);
   };
 
+  const handleManageReporting = (id) => {
+    setSelectedEmployeeId(id);
+    setShowManageReportingModal(true);
+  };
+
   const handleOpenDelete = (employee) => {
     setSelectedEmpFordelete(employee);
     setIsDeleteModalOpen(true);
@@ -234,6 +241,19 @@ const EmployeeList = () => {
         </GlobalModel>
       )}
 
+      {showManageReportingModal && (
+        <GlobalModel
+          isOpen={showManageReportingModal}
+          // size="lg"
+          closeModal={() => setShowManageReportingModal(false)}
+        >
+          <ManageReporting
+            employeeId={selectedEmployeeId}
+            onClosed={() => setShowManageReportingModal(false)}
+          />
+        </GlobalModel>
+      )}
+
       {IsDeleteModalOpen && (
         <ConfirmModal
           isOpen={IsDeleteModalOpen}
@@ -633,6 +653,18 @@ const EmployeeList = () => {
                                         <i className="bx bx-cog bx-sm"></i>{" "}
                                         Manage Role
                                       </button>
+                                      <button
+                                        className="dropdown-item py-1"
+                                        type="button"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#managerole-modal"
+                                        onClick={() =>
+                                          handleManageReporting(item.id)
+                                        }
+                                      >
+                                        <i className="bx bx-git-branch bx-sm"></i>{" "}
+                                        Manage Reporting
+                                      </button>
                                     </>
                                   )}