Yashwanth individual permission change show

src/components/PermissionsManagement/PermissionChangeLogTable.jsx

@@ -95,7 +95,7 @@ function PermissionChangeLogTable({ changeLogs, darkMode }) {
               <th className={`permission-change-log-table--header${addDark}`}>
                 Log Date and Time (PST)
               </th>
-              <th className={`permission-change-log-table--header${addDark}`}>Role Name</th>
+              <th className={`permission-change-log-table--header${addDark}`}>Name</th>
               <th className={`permission-change-log-table--header${addDark}`}>Permissions</th>
               <th className={`permission-change-log-table--header${addDark}`}>Permissions Added</th>
               <th className={`permission-change-log-table--header${addDark}`}>
@@ -111,9 +111,7 @@ function PermissionChangeLogTable({ changeLogs, darkMode }) {
                 <td className={`permission-change-log-table--cell ${bgYinmnBlue}`}>{`${formatDate(
                   log.logDateTime,
                 )} ${formattedAmPmTime(log.logDateTime)}`}</td>
-                <td className={`permission-change-log-table--cell ${bgYinmnBlue}`}>
-                  {log.roleName}
-                </td>
+                <td className={`permission-change-log-table--cell ${bgYinmnBlue}`}>{log.name}</td>
                 <td className={`permission-change-log-table--cell permissions ${bgYinmnBlue}`}>
                   {renderPermissions(log.permissions, log._id)}
                 </td>

src/components/PermissionsManagement/PermissionsManagement.jsx

@@ -60,10 +60,11 @@ function PermissionsManagement({ roles, auth, getUserRole, userProfile, darkMode
 
     getInfoCollections();
     getUserRole(auth?.user.userid);
-
     const getChangeLogs = async () => {
       try {
-        const response = await axios.get(ENDPOINTS.PERMISSION_CHANGE_LOGS(auth?.user.userid));
+        const response = await axios.get(
+          ENDPOINTS.GET_USER_PERMISSION_CHANGE_LOGS(auth?.user.userid),
+        );
         setChangeLogs(response.data);
         setLoading(false);
       } catch (error) {
@@ -243,7 +244,7 @@ function PermissionsManagement({ roles, auth, getUserRole, userProfile, darkMode
       </div>
       {loading && <p className="loading-message">Loading...</p>}
       {changeLogs?.length > 0 && (
-        <PermissionChangeLogTable changeLogs={changeLogs.slice().reverse()} darkMode={darkMode} />
+        <PermissionChangeLogTable changeLogs={changeLogs} darkMode={darkMode} />
       )}
       <br />
       <br />

src/components/PermissionsManagement/UserPermissionsPopUp.jsx

@@ -64,6 +64,16 @@ function UserPermissionsPopUp({
     }
   }, [actualUserProfile]);
 
+  const logPermissionChanges = async (logPermissionChangesUrl, permissionChangeLog) => {
+    try {
+      await axios.post(logPermissionChangesUrl, permissionChangeLog);
+    } catch (error) {
+      toast.error('Error logging permissions:', {
+        autoClose: 10000,
+      });
+    }
+  };
+
   const updateProfileOnSubmit = async e => {
     e.preventDefault();
     const shouldPreventEdit = cantUpdateDevAdminDetails(actualUserProfile?.email, authUser.email);
@@ -80,9 +90,40 @@ function UserPermissionsPopUp({
     const userId = actualUserProfile?._id;
 
     const url = ENDPOINTS.USER_PROFILE(userId);
+    const logPermissionChangesUrl = ENDPOINTS.POST_USER_PERMISSION_CHANGE_LOGS;
     const allUserInfo = await axios.get(url).then(res => res.data);
     const newUserInfo = { ...allUserInfo, permissions: { frontPermissions: userPermissions } };
 
+    let existingPermissions = allUserInfo.permissions?.frontPermissions || [];
+    const existingPermissionsSet = new Set(existingPermissions || []);
+    const newPermissionsSet = new Set(userPermissions || []);
+    const addedPermissions = (userPermissions || []).filter(
+      permission => !existingPermissionsSet.has(permission),
+    );
+    const removedPermissions = (existingPermissions || []).filter(
+      permission => !newPermissionsSet.has(permission),
+    );
+
+    existingPermissions = [
+      ...existingPermissions.filter(permission => !removedPermissions.includes(permission)),
+      ...addedPermissions,
+    ];
+
+    const permissionChangeLog = {
+      actualUserProfile: {
+        firstName: actualUserProfile.firstName,
+        lastName: actualUserProfile.lastName,
+      },
+      authUser: {
+        email: authUser.email,
+        role: authUser.role,
+      },
+      userId,
+      existingPermissions, // Existing permissions before change
+      addedPermissions, // New permissions added
+      removedPermissions, // Permissions removed
+    };
+
     await axios
       .put(url, newUserInfo)
       .then(() => {
@@ -94,6 +135,7 @@ function UserPermissionsPopUp({
             autoClose: 10000,
           });
           setToastShown(true);
+          logPermissionChanges(logPermissionChangesUrl, permissionChangeLog);
         }
         toggle();
       })

src/utils/URL.js

@@ -5,6 +5,8 @@ const APIEndpoint =
 export const ENDPOINTS = {
   APIEndpoint: () => APIEndpoint,
   USER_PROFILE: userId => `${APIEndpoint}/userprofile/${userId}`,
+  POST_USER_PERMISSION_CHANGE_LOGS: `${APIEndpoint}/logPermissionChanges`,
+  GET_USER_PERMISSION_CHANGE_LOGS: userId => `${APIEndpoint}/logPermissionChanges/${userId}`,
   USER_PROFILE_PROPERTY: userId => `${APIEndpoint}/userprofile/${userId}/property`,
   USER_PROFILES: `${APIEndpoint}/userprofile/`,
   UPDATE_REHIREABLE_STATUS: userId => `${APIEndpoint}/userprofile/${userId}/rehireable`,