fixed prevent removed existen permission whenever add new one

src/components/Project/ProjectPermission.jsx

@@ -6,7 +6,7 @@ import {
 } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useEmployeesByProject } from "../../hooks/useEmployees";
-import { useForm } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import showToast from "../../services/toastService";
@@ -27,6 +27,7 @@ const ProjectPermission = () => {
     watch,
     handleSubmit,
     reset,
+    control,
     formState: { errors, isDirty },
   } = useForm({
     resolver: zodResolver(ProjectPermissionSchema),
@@ -73,15 +74,15 @@ const ProjectPermission = () => {
 
     const newSelectedIds = formData.selectedPermissions || [];
 
-    const removed = existingEnabledIds
-      .filter((id) => !newSelectedIds.includes(id))
-      .map((id) => ({ id, isEnabled: false }));
-
     const added = newSelectedIds
       .filter((id) => !existingEnabledIds.includes(id))
       .map((id) => ({ id, isEnabled: true }));
 
-    const payloadPermissions = [...removed, ...added];
+    const removed = existingEnabledIds
+      .filter((id) => !newSelectedIds.includes(id))
+      .map((id) => ({ id, isEnabled: false }));
+
+    const payloadPermissions = [...added, ...removed];
 
     if (payloadPermissions.length === 0) {
       showToast("No changes detected", "info");
@@ -94,21 +95,24 @@ const ProjectPermission = () => {
       permission: payloadPermissions,
     };
 
+    console.log("Final payload:", payload);
     updatePermission(payload);
   };
 
-  const useOnClick = useCallback((event) => {}, []);
   return (
     <div className="w-100  p py-1 ">
       <form className="row" onSubmit={handleSubmit(onSubmit)}>
         <div className="d-flex justify-content-between align-items-end gap-2 mb-3">
           <div className="text-start d-flex align-items-center gap-2">
-            <div className="d-block"><label className="form-label">Select Employee</label></div>
+            <div className="d-block">
-           <div className="d-block"> <select
+              <label className="form-label">Select Employee</label>
+            </div>
+            <div className="d-block">
+              {" "}
+              <select
                 className="form-select form-select-sm"
                 {...register("employeeId")}
                 disabled={isPending}
-              dd
               >
                 {loading ? (
                   <option value="">Loading...</option>
@@ -128,7 +132,8 @@ const ProjectPermission = () => {
                       ))}
                   </>
                 )}
-            </select></div>
+              </select>
+            </div>
 
             {errors.employeeId && (
               <div className="text-danger small">
@@ -136,7 +141,7 @@ const ProjectPermission = () => {
               </div>
             )}
           </div>
-          {isDirty && (
+
           <div className="mt-3 text-end">
             <button
               type="submit"
@@ -146,7 +151,6 @@ const ProjectPermission = () => {
               {isPending ? "Please Wait..." : "Save Permission"}
             </button>
           </div>
-          )}
         </div>
 
         {ProjectModules.map((feature) => (
@@ -157,9 +161,17 @@ const ProjectPermission = () => {
             <div className="card text-start border-1 p-1">
               <p className="card-title fs-6 fw-semibold">{feature.name}</p>
               <div className="px-2">
-                <ul class="list-unstyled">
+                <ul className="list-unstyled">
                   {feature.featurePermissions?.map((perm) => (
                     <div className="d-flex my-2" key={perm.id}>
+                      <Controller
+                        name="selectedPermissions"
+                        control={control}
+                        render={({ field }) => {
+                          const value = field.value || [];
+                          const isChecked = value.includes(perm.id);
+
+                          return (
                             <label
                               className="form-check-label d-flex align-items-center"
                               htmlFor={perm.id}
@@ -168,11 +180,22 @@ const ProjectPermission = () => {
                                 type="checkbox"
                                 className="form-check-input me-2"
                                 id={perm.id}
-                          value={perm.id}
+                                checked={isChecked}
-                          {...register("selectedPermissions")}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    field.onChange([...value, perm.id]); // add
+                                  } else {
+                                    field.onChange(
+                                      value.filter((v) => v !== perm.id)
+                                    ); // remove
+                                  }
+                                }}
                               />
                               {perm.name}
                             </label>
+                          );
+                        }}
+                      />
                     </div>
                   ))}
                 </ul>