fixed permission add and remove updation

src/components/Project/ProjectPermission.jsx

@@ -43,67 +43,62 @@ const ProjectPermission = () => {
     selectedProject
   );
 
-  useEffect(() => {
-    if (!employees.length) return;
+useEffect(() => {
+  if (!selectedEmployee) return;
 
-    const enabledPerms =
-      selectedEmpPermissions?.permissions
-        ?.filter((perm) => perm.isEnabled)
-        ?.map((perm) => perm.id) || [];
+  const enabledPerms =
+    selectedEmpPermissions?.permissions
+      ?.filter((perm) => perm.isEnabled)
+      ?.map((perm) => perm.id) || [];
+
+  reset((prev) => ({
+    ...prev,
+    selectedPermissions: enabledPerms,
+  }));
+}, [selectedEmpPermissions, reset, selectedEmployee]);
 
-    reset({
-      employeeId: selectedEmployee || employees[0]?.id || "",
-      selectedPermissions: enabledPerms,
-    });
-  }, [selectedEmpPermissions, reset, selectedEmployee, employees]);
 
   const { mutate: updatePermission, isPending } =
     useUpdateProjectLevelEmployeePermission();
 
-  const onSubmit = (formData) => {
-    if (!formData.employeeId) {
-      showToast("Please select an employee", "warn");
-      return;
-    }
+ const onSubmit = (formData) => {
+  if (!formData.employeeId) {
+    showToast("Please select an employee", "warn");
+    return;
+  }
 
-    const existingPermissions = selectedEmpPermissions?.permissions || [];
+  const existingPermissions = selectedEmpPermissions?.permissions || [];
+  const existingEnabledIds = existingPermissions
+    .filter((p) => p.isEnabled)
+    .map((p) => p.id);
 
-    const payloadPermissions =
-      existingPermissions.length > 0
-        ? existingPermissions.map((perm) => ({
-            id: perm.id,
-            isEnabled: formData.selectedPermissions?.includes(perm.id) || false,
-          }))
-        : (formData.selectedPermissions || []).map((id) => ({
-            id,
-            isEnabled: true,
-          }));
+  const newSelectedIds = formData.selectedPermissions || [];
 
-    if (payloadPermissions.length === 0) {
-      showToast("No permissions selected", "warn");
-      return;
-    }
+  const removed = existingEnabledIds
+    .filter((id) => !newSelectedIds.includes(id))
+    .map((id) => ({ id, isEnabled: false }));
 
-    const hasChanges = existingPermissions.some(
-      (perm) =>
-        perm.isEnabled !==
-        (formData.selectedPermissions?.includes(perm.id) || false)
-    );
+  const added = newSelectedIds
+    .filter((id) => !existingEnabledIds.includes(id))
+    .map((id) => ({ id, isEnabled: true }));
 
-    if (!hasChanges && existingPermissions.length > 0) {
-      showToast("No changes detected", "info");
-      return;
-    }
+  const payloadPermissions = [...removed, ...added];
 
-    const payload = {
-      employeeId: formData.employeeId,
-      projectId: selectedProject,
-      permission: payloadPermissions,
-    };
+  if (payloadPermissions.length === 0) {
+    showToast("No changes detected", "info");
+    return;
+  }
 
-    updatePermission(payload);
+  const payload = {
+    employeeId: formData.employeeId,
+    projectId: selectedProject,
+    permission: payloadPermissions,
   };
 
+  updatePermission(payload);
+};
+
+
   return (
     <div className="row px-2 py-1">
       <form className="row" onSubmit={handleSubmit(onSubmit)}>
@@ -120,22 +115,31 @@ const ProjectPermission = () => {
                 <option value="">Loading...</option>
               ) : (
                 <>
-                  <option value="">-- Select --</option>
-                  {employees.map((emp) => (
-                    <option key={emp.id} value={emp.id}>
-                      {emp.firstName} {emp.lastName}
-                    </option>
-                  ))}
+                  <option value="">-- Select Employee --</option>
+                  {[...employees]?.sort((a, b) =>
+                      `${a.firstName} ${a.firstName}`?.localeCompare(
+                        `${b.firstName} ${b.lastName}`
+                      )
+                    )
+                    ?.map((emp) => (
+                      <option key={emp.id} value={emp.id}>
+                        {emp.firstName} {emp.lastName}
+                      </option>
+                    ))}
                 </>
               )}
             </select>
+
             {errors.employeeId && (
               <div className="text-danger small">
                 {errors.employeeId.message}
               </div>
             )}
           </div>
-          <button className="btn btn-sm btn-primary" disabled={isPending || loading}>
+          <button
+            className="btn btn-sm btn-primary"
+            disabled={isPending || loading}
+          >
             {isPending ? "Please Wait..." : "Update Permission"}
           </button>
         </div>
@@ -149,10 +153,7 @@ const ProjectPermission = () => {
             <div className="col-12">
               <div className="row">
                 {feature.featurePermissions?.map((perm) => (
-                  <div
-                    className="col-12 col-sm-6 col-md-4 mb-2"
-                    key={perm.id}
-                  >
+                  <div className="col-12 col-sm-6 col-md-4 mb-2" key={perm.id}>
                     <label
                       className="form-check-label d-flex align-items-center"
                       htmlFor={perm.id}

src/components/Project/ProjectSetting.jsx

@@ -32,8 +32,8 @@ const ProjectSetting = () => {
   return (
     <div className="w-100">
       <div className="card py-2 px-5">
-        <div className="col-4">
-          <div className="dropdown text-start">
+        <div className="col-12">
+          <div className="dropdown text-end">
             <button
               className="btn btn-sm btn-outline-primary dropdown-toggle"
               type="button"