access management for manager added

src/components/MembersDetails/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Avatar, Typography, Tag } from '@navi/web-ui/lib/primitives';
 
@@ -11,6 +11,7 @@ const MembersDetails = (props: any) => {
   const { data } = props;
   const totalMembers = data?.participants?.length;
   const [showTotalMembers, setShowTotalMembers] = useState(10);
+  const [showRemoveButton, setShowRemoveButton] = useState(false);
 
   const handleRemoveUser = (participant: any) => {
     // Add logic to remove the user here
@@ -23,14 +24,22 @@ const MembersDetails = (props: any) => {
   const userRoles = userData.roles || [];
   console.log('userRoles', userRoles);
 
-  const sortedParticipants = data?.participants?.sort((a, b) => {
-    // If "a" is a manager and "b" is not, "a" comes first
-    if (a.manager && !b.manager) return -1;
-    // If "b" is a manager and "a" is not, "b" comes first
-    if (b.manager && !a.manager) return 1;
-    // Otherwise, maintain the existing order
-    return 0;
-  });
+  useEffect(() => {
+    // Check if the manager's email matches the one stored in local storage
+    const managerEmail = data?.participants?.find(
+      participant => participant.manager,
+    )?.email;
+    const storedEmail = localStorage.getItem('email-id');
+    const isAdmin = userRoles.includes('admin');
+
+    if (managerEmail === storedEmail || isAdmin) {
+      // Display the remove button
+      setShowRemoveButton(true);
+    } else {
+      // Hide the remove button
+      setShowRemoveButton(false);
+    }
+  }, [data]);
 
   return (
     <div>
@@ -65,22 +74,28 @@ const MembersDetails = (props: any) => {
 
                 <div className={styles['participant-detail']}>
                   <div className={styles['participant-detail-nest']}>
-                    <div className={styles[`mark-as-manager`]}>
-                      <Tag
-                        color="blue"
-                        label="Mark as manager"
-                        variant="transparent"
-                      />
-                    </div>
-                    <img src={person_logo} alt="person_logo" />
+                    {showRemoveButton && (
+                      <div className={styles[`mark-as-manager`]}>
+                        <Tag
+                          color="blue"
+                          label="Mark as manager"
+                          variant="transparent"
+                        />
+                      </div>
+                    )}
+                    {showRemoveButton && (
+                      <img src={person_logo} alt="person_logo" />
+                    )}
                   </div>
                   &nbsp;&nbsp;&nbsp;&nbsp;
-                  <Button
-                    variant="text"
-                    onClick={() => handleRemoveUser(participant)}
-                  >
-                    Remove
-                  </Button>
+                  {showRemoveButton && (
+                    <Button
+                      variant="text"
+                      onClick={() => handleRemoveUser(participant)}
+                    >
+                      Remove
+                    </Button>
+                  )}
                 </div>
               </div>
             ))}
@@ -125,4 +140,14 @@ export default MembersDetails;
                     ''
                   )}
                 </div>
+
+
+  const sortedParticipants = data?.participants?.sort((a, b) => {
+    // If "a" is a manager and "b" is not, "a" comes first
+    if (a.manager && !b.manager) return -1;
+    // If "b" is a manager and "a" is not, "b" comes first
+    if (b.manager && !a.manager) return 1;
+    // Otherwise, maintain the existing order
+    return 0;
+  });
 */