fixed permission add and remove updation

src/components/Project/ProjectPermission.jsx

@@ -43,19 +43,20 @@ const ProjectPermission = () => {
     selectedProject
   );
 
-  useEffect(() => {
+useEffect(() => {
-    if (!employees.length) return;
+  if (!selectedEmployee) return;
 
   const enabledPerms =
     selectedEmpPermissions?.permissions
       ?.filter((perm) => perm.isEnabled)
       ?.map((perm) => perm.id) || [];
 
-    reset({
+  reset((prev) => ({
-      employeeId: selectedEmployee || employees[0]?.id || "",
+    ...prev,
     selectedPermissions: enabledPerms,
-    });
+  }));
-  }, [selectedEmpPermissions, reset, selectedEmployee, employees]);
+}, [selectedEmpPermissions, reset, selectedEmployee]);
+
 
   const { mutate: updatePermission, isPending } =
     useUpdateProjectLevelEmployeePermission();
@@ -67,30 +68,23 @@ const ProjectPermission = () => {
   }
 
   const existingPermissions = selectedEmpPermissions?.permissions || [];
+  const existingEnabledIds = existingPermissions
+    .filter((p) => p.isEnabled)
+    .map((p) => p.id);
 
-    const payloadPermissions =
+  const newSelectedIds = formData.selectedPermissions || [];
-      existingPermissions.length > 0
+
-        ? existingPermissions.map((perm) => ({
+  const removed = existingEnabledIds
-            id: perm.id,
+    .filter((id) => !newSelectedIds.includes(id))
-            isEnabled: formData.selectedPermissions?.includes(perm.id) || false,
+    .map((id) => ({ id, isEnabled: false }));
-          }))
+
-        : (formData.selectedPermissions || []).map((id) => ({
+  const added = newSelectedIds
-            id,
+    .filter((id) => !existingEnabledIds.includes(id))
-            isEnabled: true,
+    .map((id) => ({ id, isEnabled: true }));
-          }));
+
+  const payloadPermissions = [...removed, ...added];
 
   if (payloadPermissions.length === 0) {
-      showToast("No permissions selected", "warn");
-      return;
-    }
-
-    const hasChanges = existingPermissions.some(
-      (perm) =>
-        perm.isEnabled !==
-        (formData.selectedPermissions?.includes(perm.id) || false)
-    );
-
-    if (!hasChanges && existingPermissions.length > 0) {
     showToast("No changes detected", "info");
     return;
   }
@@ -102,7 +96,8 @@ const ProjectPermission = () => {
   };
 
   updatePermission(payload);
-  };
+};
+
 
   return (
     <div className="row px-2 py-1">
@@ -120,8 +115,13 @@ const ProjectPermission = () => {
                 <option value="">Loading...</option>
               ) : (
                 <>
-                  <option value="">-- Select --</option>
+                  <option value="">-- Select Employee --</option>
-                  {employees.map((emp) => (
+                  {[...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>
@@ -129,13 +129,17 @@ const ProjectPermission = () => {
                 </>
               )}
             </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
+                  <div className="col-12 col-sm-6 col-md-4 mb-2" key={perm.id}>
-                    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="col-12">
-          <div className="dropdown text-start">
+          <div className="dropdown text-end">
             <button
               className="btn btn-sm btn-outline-primary dropdown-toggle"
               type="button"