Implementing ManageReporting at Employee.

src/components/Employee/EmployeeSchema.jsx

@@ -123,11 +123,13 @@ export const defatEmployeeObj = {
   hasApplicationAccess: false
 }
 
-export const ManageReportingSchema = {
+export const ManageReportingSchema = z.object({
+  primaryNotifyTo: z.array(z.string()).min(1, "Primary Reporting Manager is required"),
+  secondaryNotifyTo: z.array(z.string()).optional(),
+});
 
-}
+export const defaultManageReporting = {
-
+  primaryNotifyTo: [],
-export const defaultManageRportion = {
+  secondaryNotifyTo: [],
-
+};
-}
 

src/components/Employee/ManageReporting.jsx

@@ -1,77 +1,153 @@
-import React from 'react'
+import React, { useEffect } from "react";
-import { useForm } from 'react-hook-form'
+import { useForm } from "react-hook-form";
-import Label from '../common/Label'
+import { zodResolver } from "@hookform/resolvers/zod";
-import PmsEmployeeInputTag from '../common/PmsEmployeeInputTag'
+import Label from "../common/Label";
+import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
+import { useManageEmployeeHierarchy, useOrganizationHierarchy } from "../../hooks/useEmployees";
+import { ManageReportingSchema, defaultManageReporting } from "./EmployeeSchema";
 
-const ManageReporting = ({ onClosed }) => {
+const ManageReporting = ({ onClosed, employeeId }) => {
-    const { handleSubmit, control, watch, reset } = useForm()
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+    watch,
+  } = useForm({
+    resolver: zodResolver(ManageReportingSchema),
+    defaultValues: defaultManageReporting,
+  });
+
+  const { data, isLoading } = useOrganizationHierarchy(employeeId);
+
+  // mutation hook
+  const { mutate: manageHierarchy, isPending } = useManageEmployeeHierarchy(
+    employeeId,
+    onClosed
+  );
+
+  const primaryValue = watch("primaryNotifyTo");
+  const secondaryValue = watch("secondaryNotifyTo");
+
+  // Prefill hierarchy data
+  useEffect(() => {
+    if (data && Array.isArray(data)) {
+      const primary = data.find((r) => r.isPrimary);
+      const secondary = data.filter((r) => !r.isPrimary);
+
+      reset({
+        primaryNotifyTo: primary ? [primary.reportTo.id] : [],
+        secondaryNotifyTo: secondary.map((r) => r.reportTo.id),
+      });
+    }
+  }, [data, reset]);
 
   const handleClose = () => {
-        reset();
+    reset(defaultManageReporting);
     onClosed();
   };
 
+  const onSubmit = (formData) => {
+    // Build set of currently selected IDs
+    const selectedIds = new Set([
+      ...(formData.primaryNotifyTo || []),
+      ...(formData.secondaryNotifyTo || []),
+    ]);
+
+    // Build payload including previous assignments, setting isActive true/false accordingly
+    const payload = (data || []).map((item) => ({
+      reportToId: item.reportTo.id,
+      isPrimary: item.isPrimary,
+      isActive: selectedIds.has(item.reportTo.id),
+    }));
+
+    // Add any new IDs that were not previously assigned
+    if (formData.primaryNotifyTo?.length) {
+      const primaryId = formData.primaryNotifyTo[0];
+      if (!data?.some((d) => d.reportTo.id === primaryId)) {
+        payload.push({
+          reportToId: primaryId,
+          isPrimary: true,
+          isActive: true,
+        });
+      }
+    }
+
+    if (formData.secondaryNotifyTo?.length) {
+      formData.secondaryNotifyTo.forEach((id) => {
+        if (!data?.some((d) => d.reportTo.id === id)) {
+          payload.push({
+            reportToId: id,
+            isPrimary: false,
+            isActive: true,
+          });
+        }
+      });
+    }
+
+    console.log("🚀 Final Payload:", payload);
+    manageHierarchy(payload);
+  };
+
   return (
     <div>
-            <form onSubmit={handleSubmit()} className="p-sm-0 p-2">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
-                <h5 className="m-0 py-1 mb-3">Manage Reporting</h5>
+        <h5 className="m-0 py-1 mb-3">Update Reporting Manager</h5>
 
         {/* Primary */}
-                <div className="row mb-6">
+        <div className="mb-4 text-start">
-                    <div className="col-12">
+          <Label className="form-label" required>
-                        <div className="d-flex align-items-center">
+            Primary Reporting Manager
-                            <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"
+            placeholder="Select primary report-to"
-                                    projectId={watch("projectId")}
             forAll={true}
+            disabled={primaryValue?.length > 0}
           />
+          {errors.primaryNotifyTo && (
+            <div className="text-danger small mt-1">
+              {errors.primaryNotifyTo.message}
             </div>
-                        </div>
+          )}
-                    </div>
         </div>
 
         {/* Secondary */}
-                <div className="row mb-6">
+        <div className="mb-4 text-start">
-                    <div className="col-12">
+          <Label className="form-label">
-                        <div className="d-flex align-items-center">
+            Secondary Reporting Manager
-                            <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"
+            placeholder="Select secondary report-to(s)"
-                                    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"
+            disabled={isPending}
           >
             Cancel
           </button>
 
-                    <button type="submit" className="btn btn-primary btn-sm">
+          <button
-                        Submit
+            type="submit"
+            className="btn btn-primary btn-sm"
+            disabled={isPending}
+          >
+            {isPending ? "Saving..." : "Submit"}
           </button>
         </div>
       </form>
     </div>
-    )
+  );
-}
+};
 
-export default ManageReporting
+export default ManageReporting;

src/components/common/PmsEmployeeInputTag.jsx

@@ -11,6 +11,7 @@ const PmsEmployeeInputTag = ({
   projectId,
   forAll,
   isApplicationUser = false,
+  disabled
 }) => {
   const {
     field: { value = [], onChange },
@@ -215,6 +216,7 @@ const PmsEmployeeInputTag = ({
         autoComplete="off"
         aria-expanded={showDropdown}
         aria-haspopup="listbox"
+        disabled={disabled}
       />
 
       {showDropdown && (

src/hooks/useEmployees.js

@@ -341,3 +341,41 @@ export const useUpdateEmployeeRoles = ({
     error: mutation.error,
   };
 };
+
+
+export const useOrganizationHierarchy=(employeeId)=>{
+return useQuery({
+  queryKey:["organizationHierarchy",employeeId],
+  queryFn:async()=> {
+    const resp = await EmployeeRepository.getOrganizaionHierarchy(employeeId);
+    return resp.data;
+  },
+  enabled:!!employeeId
+})
+}
+
+
+
+export const useManageEmployeeHierarchy = (employeeId, onSuccessCallBack) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) => {
+      return await EmployeeRepository.manageOrganizationHierarchy(employeeId, payload);
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["organizationHierarchy", employeeId],
+      });
+      showToast("Reporting hierarchy updated successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Something went wrong, please try again!",
+        "error"
+      );
+    },
+  });
+};

src/repositories/EmployeeRepository.jsx

@@ -10,18 +10,20 @@ const EmployeeRepository = {
   updateEmployee: (id, data) => api.put(`/users/${id}`, data),
   // deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
   getEmployeeProfile: (id) => api.get(`/api/employee/profile/get/${id}`),
-  deleteEmployee: (id,active) => api.delete(`/api/employee/${id}?active=${active}`),
+  deleteEmployee: (id, active) => api.delete(`/api/employee/${id}?active=${active}`),
- getEmployeeName: (projectId, search,allEmployee) => {
+  getEmployeeName: (projectId, search, allEmployee) => {
     const params = new URLSearchParams();
 
     if (projectId) params.append("projectId", projectId);
     if (search) params.append("searchString", search);
-  if(allEmployee) params.append("allEmployee",allEmployee)
+    if (allEmployee) params.append("allEmployee", allEmployee)
 
     const query = params.toString();
     return api.get(`/api/Employee/basic${query ? `?${query}` : ""}`);
-}
+  },
 
+  getOrganizaionHierarchy: (employeeId) => api.get(`/api/organization/hierarchy/list/${employeeId}`),
+  manageOrganizationHierarchy: (employeeId, data) => api.post(`/api/organization/hierarchy/manage/${employeeId}`, data),
 };
 
 export default EmployeeRepository;