Yashwanth individual permission change show

src/components/PermissionsManagement/PermissionChangeLogTable.jsx

@@ -22,6 +22,13 @@ function PermissionChangeLogTable({ changeLogs, darkMode }) {
     }
   };
 
+  const formatName = name => {
+    if (name.startsWith('INDIVIDUAL:')) {
+      return name.replace('INDIVIDUAL:', '').trim();
+    }
+    return name;
+  };
+
   const renderPageNumbers = () => {
     const pageNumbers = [];
     const maxPageNumbersToShow = 5;
@@ -95,7 +102,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,8 +118,13 @@ 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
+                  className={`permission-change-log-table--cell ${bgYinmnBlue}`}
+                  style={{
+                    fontWeight: log.name.startsWith('INDIVIDUAL:') ? 'bold' : 'normal',
+                  }}
+                >
+                  {formatName(log.name)}
                 </td>
                 <td className={`permission-change-log-table--cell permissions ${bgYinmnBlue}`}>
                   {renderPermissions(log.permissions, log._id)}

src/components/PermissionsManagement/PermissionsManagement.jsx

@@ -60,7 +60,6 @@ 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));
@@ -243,7 +242,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 />