From c284e071422e2620afe38ee0a1720bbd02c0548c Mon Sep 17 00:00:00 2001
From: Glen Dsouza <dsouzaglen30@gmail.com>
Date: Sat, 2 Mar 2024 14:55:43 +0530
Subject: [PATCH] Fixes Organization Not Found in Left Drawer  (#1592)

* Fixed Organization Not Found in Left Drawer

* Fix State update when MemberDetail is unmounted

* Shifted UseEffect to be called from top level function

* Shift useEffect to be called form top-level

* Add Test Coverage for images in MemberDetail

* Fixed Linting issues & removed unrelated code to current PR from LoginPage

* prettier update

* Fix improper testcase in MemberDetail.test

* State Update on Unmount Resolved in Testing

* Added dicebear url constants

* Revert changes in Readme & package-lock.json

* Added tests for LeftDrawer & MemberDetail for full coverage

* Refactor OrganizationScreen & SuperAdminScreen

* Remove commented line

* Modified tests in OrganizationScreen & SuperAdminScreen

* Revert README.md

---------

Co-authored-by: Peter Harrison <16875803+palisadoes@users.noreply.github.com>
---
 .../LeftDrawer/LeftDrawer.module.css          |   2 +-
 src/components/LeftDrawer/LeftDrawer.test.tsx |  11 +-
 src/components/LeftDrawer/LeftDrawer.tsx      | 146 +++---
 .../LeftDrawerOrg/LeftDrawerOrg.module.css    |   2 +-
 .../LeftDrawerOrg/LeftDrawerOrg.test.tsx      |  55 ++-
 .../LeftDrawerOrg/LeftDrawerOrg.tsx           | 255 +++++------
 .../OrganizationScreen.test.tsx               |  44 +-
 .../OrganizationScreen/OrganizationScreen.tsx |  46 +-
 .../SuperAdminScreen.test.tsx                 |  44 +-
 .../SuperAdminScreen/SuperAdminScreen.tsx     |  46 +-
 .../MemberDetail/MemberDetail.test.tsx        |  71 ++-
 src/screens/MemberDetail/MemberDetail.tsx     | 432 +++++++++---------
 12 files changed, 616 insertions(+), 538 deletions(-)

diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
index b52a1fae2b..27130a4e3b 100644
--- a/src/components/LeftDrawer/LeftDrawer.module.css
+++ b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -60,9 +60,9 @@
 .leftDrawer .profileContainer {
   border: none;
   width: 100%;
+  padding: 2.1rem 0.5rem;
   height: 52px;
   border-radius: 8px;
-  background-color: var(--bs-white);
   display: flex;
   align-items: center;
 }
diff --git a/src/components/LeftDrawer/LeftDrawer.test.tsx b/src/components/LeftDrawer/LeftDrawer.test.tsx
index 85f6a83b27..40efc0186b 100644
--- a/src/components/LeftDrawer/LeftDrawer.test.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.test.tsx
@@ -64,9 +64,11 @@ afterEach(() => {
 });
 
 describe('Testing Left Drawer component for SUPERADMIN', () => {
+  beforeEach(() => {
+    setItem('UserType', 'SUPERADMIN');
+  });
   test('Component should be rendered properly', () => {
     setItem('UserImage', '');
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -104,7 +106,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing in roles screen', () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -127,7 +128,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Drawer when hideDrawer is null', () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -140,7 +140,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing logout functionality', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -157,8 +156,10 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
 });
 
 describe('Testing Left Drawer component for ADMIN', () => {
-  test('Components should be rendered properly', () => {
+  beforeEach(() => {
     setItem('UserType', 'ADMIN');
+  });
+  test('Components should be rendered properly', () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index 51e51f61f5..eaef30008c 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
 import { ReactComponent as LogoutIcon } from 'assets/svgs/logout.svg';
 import { ReactComponent as OrganizationsIcon } from 'assets/svgs/organizations.svg';
@@ -42,75 +42,77 @@ const leftDrawer = ({
   };
 
   return (
-    <>
-      <div
-        className={`${styles.leftDrawer} customScroll ${
-          hideDrawer === null
-            ? styles.hideElemByDefault
-            : hideDrawer
-              ? styles.inactiveDrawer
-              : styles.activeDrawer
-        }`}
-        data-testid="leftDrawerContainer"
-      >
-        <TalawaLogo className={styles.talawaLogo} />
-        <p className={styles.talawaText}>{t('talawaAdminPortal')}</p>
-        <h5 className={styles.titleHeader}>{t('menu')}</h5>
-        <div className={styles.optionList}>
+    <div
+      className={`${styles.leftDrawer} customScroll ${
+        hideDrawer === null
+          ? styles.hideElemByDefault
+          : hideDrawer
+            ? styles.inactiveDrawer
+            : styles.activeDrawer
+      }`}
+      data-testid="leftDrawerContainer"
+    >
+      <TalawaLogo className={styles.talawaLogo} />
+      <p className={styles.talawaText}>{t('talawaAdminPortal')}</p>
+      <h5 className={styles.titleHeader}>{t('menu')}</h5>
+      <div className={styles.optionList}>
+        <Button
+          variant={screenName === 'My Organizations' ? 'success' : 'light'}
+          className={`${
+            screenName === 'My Organizations' ? 'text-white' : 'text-secondary'
+          }`}
+          data-testid="orgsBtn"
+          onClick={(): void => {
+            history.push('/orglist');
+          }}
+        >
+          <div className={styles.iconWrapper}>
+            <OrganizationsIcon
+              stroke={`${
+                screenName === 'My Organizations'
+                  ? 'var(--bs-white)'
+                  : 'var(--bs-secondary)'
+              }`}
+            />
+          </div>
+          {t('my organizations')}
+        </Button>
+        {userType === 'SUPERADMIN' && (
           <Button
-            variant={screenName === 'My Organizations' ? 'success' : 'light'}
+            variant={screenName === 'Users' ? 'success' : 'light'}
             className={`${
-              screenName === 'My Organizations'
-                ? 'text-white'
-                : 'text-secondary'
+              screenName === 'Users' ? 'text-white' : 'text-secondary'
             }`}
-            data-testid="orgsBtn"
             onClick={(): void => {
-              history.push('/orglist');
+              history.push('/users');
             }}
+            data-testid="rolesBtn"
           >
             <div className={styles.iconWrapper}>
-              <OrganizationsIcon
-                stroke={`${
-                  screenName === 'My Organizations'
+              <RolesIcon
+                fill={`${
+                  screenName === 'Users'
                     ? 'var(--bs-white)'
                     : 'var(--bs-secondary)'
                 }`}
               />
             </div>
-            {t('my organizations')}
+            {t('users')}
           </Button>
-          {userType === 'SUPERADMIN' && (
-            <Button
-              variant={screenName === 'Users' ? 'success' : 'light'}
-              className={`${
-                screenName === 'Users' ? 'text-white' : 'text-secondary'
-              }`}
-              onClick={(): void => {
-                history.push('/users');
-              }}
-              data-testid="rolesBtn"
-            >
-              <div className={styles.iconWrapper}>
-                <RolesIcon
-                  fill={`${
-                    screenName === 'Users'
-                      ? 'var(--bs-white)'
-                      : 'var(--bs-secondary)'
-                  }`}
-                />
-              </div>
-              {t('users')}
-            </Button>
-          )}
-        </div>
-        <div style={{ marginTop: 'auto' }}>
-          <button
+        )}
+      </div>
+      <div style={{ marginTop: 'auto' }}>
+        <Link
+          to={{
+            pathname: `/member/id=${userId}`,
+            state: { from: 'orglist' },
+          }}
+        >
+          <Button
+            key={'profileBtn'}
             className={styles.profileContainer}
+            variant={screenName === 'Profile' ? 'success' : 'light'}
             data-testid="profileBtn"
-            onClick={(): void => {
-              history.push(`/member/id=${userId}`);
-            }}
           >
             <div className={styles.imageContainer}>
               {userImage && userImage !== 'null' ? (
@@ -126,27 +128,31 @@ const leftDrawer = ({
               <span className={styles.primaryText}>
                 {firstName} {lastName}
               </span>
-              <span className={styles.secondaryText}>
+              <span
+                className={`${styles.secondaryText} ${
+                  screenName === 'Profile' && 'text-white'
+                }`}
+              >
                 {`${userType}`.toLowerCase()}
               </span>
             </div>
             <AngleRightIcon fill={'var(--bs-secondary)'} />
-          </button>
-
-          <Button
-            variant="light"
-            className={`mt-4 d-flex justify-content-start px-0 w-100 bg-danger text-white  ${styles.logout}`}
-            onClick={(): void => logout()}
-            data-testid="logoutBtn"
-          >
-            <div className={styles.imageContainer}>
-              <LogoutIcon fill={'white'} />
-            </div>
-            {t('logout')}
           </Button>
-        </div>
+        </Link>
+
+        <Button
+          variant="light"
+          className={`mt-4 d-flex justify-content-start px-0 w-100 bg-danger text-white  ${styles.logout}`}
+          onClick={(): void => logout()}
+          data-testid="logoutBtn"
+        >
+          <div className={styles.imageContainer}>
+            <LogoutIcon fill={'white'} />
+          </div>
+          {t('logout')}
+        </Button>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
index aa04d88a02..c169189422 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -87,9 +87,9 @@
   border: none;
   width: 100%;
   margin-top: 5rem;
+  padding: 2.1rem 0.5rem;
   height: 52px;
   border-radius: 8px;
-  background-color: var(--bs-white);
   display: flex;
   align-items: center;
 }
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
index 0ebf3cc42c..0d0efe11d3 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import 'jest-localstorage-mock';
 import { I18nextProvider } from 'react-i18next';
@@ -71,7 +71,11 @@ const MOCKS = [
     request: {
       query: REVOKE_REFRESH_TOKEN,
     },
-    result: {},
+    result: {
+      data: {
+        revokeRefreshTokenForUser: true,
+      },
+    },
   },
   {
     request: {
@@ -196,6 +200,7 @@ const MOCKS_WITH_IMAGE = [
     },
   },
 ];
+
 const MOCKS_EMPTY = [
   {
     request: {
@@ -254,10 +259,39 @@ const link = new StaticMockLink(MOCKS, true);
 const linkImage = new StaticMockLink(MOCKS_WITH_IMAGE, true);
 const linkEmpty = new StaticMockLink(MOCKS_EMPTY, true);
 
-describe('Testing Left Drawer component for SUPERADMIN', () => {
+describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
+  beforeEach(() => {
+    setItem('UserType', 'SUPERADMIN');
+  });
+
+  test('Testing Profile button & its styling when screenName is Profile', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg
+                {...props}
+                screenName="Profile"
+                hideDrawer={false}
+              />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const profileButton = screen.getByTestId('profileBtn');
+    const userTypeSpan = screen.getByText(/Superadmin/i);
+
+    expect(profileButton).toHaveClass('btn-success');
+    expect(profileButton).not.toHaveClass('btn-light');
+    expect(userTypeSpan).toHaveClass('text-white');
+  });
+
   test('Component should be rendered properly', async () => {
     setItem('UserImage', '');
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -279,7 +313,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Profile Page & Organization Detail Modal', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -297,7 +330,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Menu Buttons', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -315,7 +347,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing when image is present for Organization', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={linkImage}>
         <BrowserRouter>
@@ -331,7 +362,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing when Organization does not exists', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={linkEmpty}>
         <BrowserRouter>
@@ -350,7 +380,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Drawer when hideDrawer is null', () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -365,7 +394,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Drawer when hideDrawer is true', () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -380,7 +408,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing logout functionality', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -393,7 +420,9 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
       </MockedProvider>,
     );
     userEvent.click(screen.getByTestId('logoutBtn'));
-    expect(localStorage.clear).toHaveBeenCalled();
-    expect(global.window.location.pathname).toBe('/');
+    await waitFor(() => {
+      expect(localStorage.clear).toHaveBeenCalled();
+      expect(global.window.location.pathname).toBe('/');
+    });
   });
 });
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index 60b5c44871..c9fa021987 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -3,10 +3,10 @@ import { WarningAmberOutlined } from '@mui/icons-material';
 import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
 import CollapsibleDropdown from 'components/CollapsibleDropdown/CollapsibleDropdown';
 import IconComponent from 'components/IconComponent/IconComponent';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import type { TargetsType } from 'state/reducers/routesReducer';
 import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
 import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
@@ -32,8 +32,7 @@ const leftDrawerOrg = ({
   hideDrawer,
 }: InterfaceLeftDrawerProps): JSX.Element => {
   const { t } = useTranslation('translation', { keyPrefix: 'leftDrawerOrg' });
-  const [organization, setOrganization] =
-    useState<InterfaceQueryOrganizationsListObject>();
+
   const {
     data,
     loading,
@@ -46,6 +45,7 @@ const leftDrawerOrg = ({
     variables: { id: orgId },
   });
 
+  const organization = data?.organizations[0];
   const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
 
   const { getItem } = useLocalStorage();
@@ -57,17 +57,6 @@ const leftDrawerOrg = ({
   const userId = getItem('id');
   const history = useHistory();
 
-  // Set organization data
-  useEffect(() => {
-    let isMounted = true;
-    if (data && isMounted) {
-      setOrganization(data?.organizations[0]);
-    }
-    return () => {
-      isMounted = false;
-    };
-  }, [data]);
-
   const logout = (): void => {
     revokeRefreshToken();
     localStorage.clear();
@@ -75,114 +64,116 @@ const leftDrawerOrg = ({
   };
 
   return (
-    <>
-      <div
-        className={`${styles.leftDrawer} customScroll ${
-          hideDrawer === null
-            ? styles.hideElemByDefault
-            : hideDrawer
-              ? styles.inactiveDrawer
-              : styles.activeDrawer
-        }`}
-        data-testid="leftDrawerContainer"
-      >
-        {/* Branding Section */}
-        <div className={styles.brandingContainer}>
-          <TalawaLogo className={styles.talawaLogo} />
-          <span className={styles.talawaText}>{t('talawaAdminPortal')}</span>
-        </div>
+    <div
+      className={`${styles.leftDrawer} customScroll ${
+        hideDrawer === null
+          ? styles.hideElemByDefault
+          : hideDrawer
+            ? styles.inactiveDrawer
+            : styles.activeDrawer
+      }`}
+      data-testid="leftDrawerContainer"
+    >
+      {/* Branding Section */}
+      <div className={styles.brandingContainer}>
+        <TalawaLogo className={styles.talawaLogo} />
+        <span className={styles.talawaText}>{t('talawaAdminPortal')}</span>
+      </div>
 
-        {/* Organization Section */}
-        <div className={styles.organizationContainer}>
-          {loading ? (
-            <>
-              <button
-                className={`${styles.profileContainer} shimmer`}
-                data-testid="orgBtn"
-              />
-            </>
-          ) : organization == undefined ? (
-            <>
-              <button
-                className={`${styles.profileContainer} bg-danger text-start text-white`}
-                disabled
-              >
-                <div className="px-3">
-                  <WarningAmberOutlined />
-                </div>
-                Error Occured while loading the Organization
-              </button>
-            </>
-          ) : (
-            <button className={styles.profileContainer} data-testid="OrgBtn">
-              <div className={styles.imageContainer}>
-                {organization.image ? (
-                  <img src={organization.image} alt={`profile picture`} />
-                ) : (
-                  <Avatar
-                    name={organization.name}
-                    alt={'Dummy Organization Picture'}
-                  />
-                )}
-              </div>
-              <div className={styles.profileText}>
-                <span className={styles.primaryText}>{organization.name}</span>
-                <span className={styles.secondaryText}>
-                  {organization.address.city}, {organization.address.state}
-                  <br />
-                  {organization.address.postalCode},{' '}
-                  {organization.address.countryCode}
-                </span>
+      {/* Organization Section */}
+      <div className={styles.organizationContainer}>
+        {loading ? (
+          <button
+            className={`${styles.profileContainer} shimmer`}
+            data-testid="orgBtn"
+          />
+        ) : organization == undefined ? (
+          <>
+            <button
+              className={`${styles.profileContainer} bg-danger text-start text-white`}
+              disabled
+            >
+              <div className="px-3">
+                <WarningAmberOutlined />
               </div>
+              Error Occured while loading the Organization
             </button>
-          )}
-        </div>
+          </>
+        ) : (
+          <button className={styles.profileContainer} data-testid="OrgBtn">
+            <div className={styles.imageContainer}>
+              {organization.image ? (
+                <img src={organization.image} alt={`profile picture`} />
+              ) : (
+                <Avatar
+                  name={organization.name}
+                  alt={'Dummy Organization Picture'}
+                />
+              )}
+            </div>
+            <div className={styles.profileText}>
+              <span className={styles.primaryText}>{organization.name}</span>
+              <span className={styles.secondaryText}>
+                {organization.address.city}, {organization.address.state}
+                <br />
+                {organization.address.postalCode},{' '}
+                {organization.address.countryCode}
+              </span>
+            </div>
+          </button>
+        )}
+      </div>
 
-        {/* Options List */}
-        <div className={styles.optionList}>
-          <h5 className={styles.titleHeader}>{t('menu')}</h5>
-          {targets.map(({ name, url }, index) => {
-            return url ? (
-              <Button
-                key={name}
-                variant={screenName === name ? 'success' : 'light'}
-                className={`${
-                  screenName === name ? 'text-white' : 'text-secondary'
-                }`}
-                onClick={(): void => {
-                  history.push(url);
-                }}
-              >
-                <div className={styles.iconWrapper}>
-                  <IconComponent
-                    name={name}
-                    fill={
-                      screenName === name
-                        ? 'var(--bs-white)'
-                        : 'var(--bs-secondary)'
-                    }
-                  />
-                </div>
-                {name}
-              </Button>
-            ) : (
-              <CollapsibleDropdown
-                key={name}
-                screenName={screenName}
-                target={targets[index]}
-              />
-            );
-          })}
-        </div>
+      {/* Options List */}
+      <div className={styles.optionList}>
+        <h5 className={styles.titleHeader}>{t('menu')}</h5>
+        {targets.map(({ name, url }, index) => {
+          return url ? (
+            <Button
+              key={name}
+              variant={screenName === name ? 'success' : 'light'}
+              className={`${
+                screenName === name ? 'text-white' : 'text-secondary'
+              }`}
+              onClick={(): void => {
+                history.push(url);
+              }}
+            >
+              <div className={styles.iconWrapper}>
+                <IconComponent
+                  name={name}
+                  fill={
+                    screenName === name
+                      ? 'var(--bs-white)'
+                      : 'var(--bs-secondary)'
+                  }
+                />
+              </div>
+              {name}
+            </Button>
+          ) : (
+            <CollapsibleDropdown
+              key={name}
+              screenName={screenName}
+              target={targets[index]}
+            />
+          );
+        })}
+      </div>
 
-        {/* Profile Section & Logout Btn */}
-        <div style={{ marginTop: 'auto' }}>
-          <button
+      {/* Profile Section & Logout Btn */}
+      <div style={{ marginTop: 'auto' }}>
+        <Link
+          to={{
+            pathname: `/member/id=${userId}`,
+            state: { from: 'orgdash' },
+          }}
+        >
+          <Button
+            key={'profileBtn'}
+            variant={screenName === 'Profile' ? 'success' : 'light'}
             className={styles.profileContainer}
             data-testid="profileBtn"
-            onClick={(): void => {
-              history.push(`/member/id=${userId}`);
-            }}
           >
             <div className={styles.imageContainer}>
               {userImage && userImage !== 'null' ? (
@@ -198,26 +189,30 @@ const leftDrawerOrg = ({
               <span className={styles.primaryText}>
                 {firstName} {lastName}
               </span>
-              <span className={styles.secondaryText}>
+              <span
+                className={`${styles.secondaryText} ${
+                  screenName === 'Profile' && 'text-white'
+                }`}
+              >
                 {`${userType}`.toLowerCase()}
               </span>
             </div>
             <AngleRightIcon fill={'var(--bs-secondary)'} />
-          </button>
-          <Button
-            variant="light"
-            className={`mt-4 d-flex justify-content-start px-0 w-100 ${styles.logout}`}
-            onClick={(): void => logout()}
-            data-testid="logoutBtn"
-          >
-            <div className={styles.imageContainer}>
-              <LogoutIcon fill={'var(--bs-secondary)'} />
-            </div>
-            {t('logout')}
           </Button>
-        </div>
+        </Link>
+        <Button
+          variant="light"
+          className={`mt-4 d-flex justify-content-start px-0 w-100 ${styles.logout}`}
+          onClick={(): void => logout()}
+          data-testid="logoutBtn"
+        >
+          <div className={styles.imageContainer}>
+            <LogoutIcon fill={'var(--bs-secondary)'} />
+          </div>
+          {t('logout')}
+        </Button>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
index ce19b8c91b..d0931e7bae 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.test.tsx
+++ b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import 'jest-location-mock';
 import { Provider } from 'react-redux';
@@ -54,6 +54,15 @@ const MOCKS = [
 ];
 const link = new StaticMockLink(MOCKS, true);
 
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+const clickToggleMenuBtn = (toggleButton: HTMLElement): void => {
+  fireEvent.click(toggleButton);
+};
+
 describe('Testing LeftDrawer in OrganizationScreen', () => {
   test('Testing LeftDrawer in page functionality', async () => {
     setItem('UserType', 'SUPERADMIN');
@@ -69,31 +78,20 @@ describe('Testing LeftDrawer in OrganizationScreen', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
-    // Resize window to trigger handleResize
-    window.innerWidth = 800; // Set a width less than or equal to 820
-    fireEvent(window, new Event('resize'));
-
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('openMenu') as HTMLElement);
-    });
-
-    // sets hideDrawer to true
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('menuBtn') as HTMLElement);
-    });
+    const toggleButton = screen.getByTestId('toggleMenuBtn') as HTMLElement;
+    const icon = toggleButton.querySelector('i');
 
+    // Resize window to a smaller width
+    resizeWindow(800);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-right');
     // Resize window back to a larger width
-    window.innerWidth = 1000; // Set a larger width
-    fireEvent(window, new Event('resize'));
 
-    // sets hideDrawer to false
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('openMenu') as HTMLElement);
-    });
+    resizeWindow(1000);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-left');
 
-    // sets hideDrawer to true
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('menuBtn') as HTMLElement);
-    });
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-right');
   });
 });
diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx
index fcdf0ccd99..23c933f8e0 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.tsx
+++ b/src/components/OrganizationScreen/OrganizationScreen.tsx
@@ -25,41 +25,39 @@ const organizationScreen = ({
   const { targets, configUrl } = appRoutes;
 
   const handleResize = (): void => {
-    if (window.innerWidth <= 820) {
-      setHideDrawer(!hideDrawer);
+    if (window.innerWidth <= 820 && !hideDrawer) {
+      setHideDrawer(true);
     }
   };
+
+  const toggleDrawer = (): void => {
+    setHideDrawer(!hideDrawer);
+  };
+
   useEffect(() => {
     handleResize();
     window.addEventListener('resize', handleResize);
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [hideDrawer]);
 
   return (
     <>
-      {hideDrawer ? (
-        <Button
-          className={styles.opendrawer}
-          onClick={(): void => {
-            setHideDrawer(!hideDrawer);
-          }}
-          data-testid="openMenu"
-        >
-          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
-        </Button>
-      ) : (
-        <Button
-          className={styles.collapseSidebarButton}
-          onClick={(): void => {
-            setHideDrawer(!hideDrawer);
-          }}
-          data-testid="menuBtn"
-        >
-          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
-        </Button>
-      )}
+      <Button
+        className={
+          hideDrawer ? styles.opendrawer : styles.collapseSidebarButton
+        }
+        onClick={toggleDrawer}
+        data-testid="toggleMenuBtn"
+      >
+        <i
+          className={
+            hideDrawer ? 'fa fa-angle-double-right' : 'fa fa-angle-double-left'
+          }
+          aria-hidden="true"
+        ></i>
+      </Button>
       <div className={styles.drawer}>
         <LeftDrawerOrg
           orgId={configUrl}
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx
index e7e21804cd..70eb466385 100644
--- a/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
@@ -19,6 +19,15 @@ const props: InterfaceSuperAdminScreenProps = {
   children: <div>Testing ...</div>,
 };
 
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+const clickToggleMenuBtn = (toggleButton: HTMLElement): void => {
+  fireEvent.click(toggleButton);
+};
+
 describe('Testing LeftDrawer in SuperAdminScreen', () => {
   test('Testing LeftDrawer in page functionality', async () => {
     setItem('UserType', 'SUPERADMIN');
@@ -35,31 +44,20 @@ describe('Testing LeftDrawer in SuperAdminScreen', () => {
       </MockedProvider>,
     );
 
-    // Resize window to trigger handleResize
-    window.innerWidth = 800; // Set a width less than or equal to 820
-    fireEvent(window, new Event('resize'));
-
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('openMenu') as HTMLElement);
-    });
+    const toggleButton = screen.getByTestId('toggleMenuBtn') as HTMLElement;
+    const icon = toggleButton.querySelector('i');
 
-    // sets hideDrawer to true
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('menuBtn') as HTMLElement);
-    });
+    // Resize window to a smaller width
+    resizeWindow(800);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-right');
 
     // Resize window back to a larger width
-    window.innerWidth = 1000; // Set a larger width
-    fireEvent(window, new Event('resize'));
-
-    // sets hideDrawer to false
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('openMenu') as HTMLElement);
-    });
+    resizeWindow(1000);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-left');
 
-    // sets hideDrawer to true
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('menuBtn') as HTMLElement);
-    });
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-right');
   });
 });
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
index 989f1eecfa..9aeb10bec7 100644
--- a/src/components/SuperAdminScreen/SuperAdminScreen.tsx
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
@@ -16,41 +16,39 @@ const superAdminScreen = ({
   const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
 
   const handleResize = (): void => {
-    if (window.innerWidth <= 820) {
-      setHideDrawer(!hideDrawer);
+    if (window.innerWidth <= 820 && !hideDrawer) {
+      setHideDrawer(true);
     }
   };
+
+  const toggleDrawer = (): void => {
+    setHideDrawer(!hideDrawer);
+  };
+
   useEffect(() => {
     handleResize();
     window.addEventListener('resize', handleResize);
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [hideDrawer]);
 
   return (
     <>
-      {hideDrawer ? (
-        <Button
-          className={styles.opendrawer}
-          onClick={(): void => {
-            setHideDrawer(!hideDrawer);
-          }}
-          data-testid="openMenu"
-        >
-          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
-        </Button>
-      ) : (
-        <Button
-          className={styles.collapseSidebarButton}
-          onClick={(): void => {
-            setHideDrawer(!hideDrawer);
-          }}
-          data-testid="menuBtn"
-        >
-          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
-        </Button>
-      )}
+      <Button
+        className={
+          hideDrawer ? styles.opendrawer : styles.collapseSidebarButton
+        }
+        onClick={toggleDrawer}
+        data-testid="toggleMenuBtn"
+      >
+        <i
+          className={
+            hideDrawer ? 'fa fa-angle-double-right' : 'fa fa-angle-double-left'
+          }
+          aria-hidden="true"
+        ></i>
+      </Button>
       <LeftDrawer
         screenName={screenName}
         hideDrawer={hideDrawer}
diff --git a/src/screens/MemberDetail/MemberDetail.test.tsx b/src/screens/MemberDetail/MemberDetail.test.tsx
index 1e123df4f2..0a23385d13 100644
--- a/src/screens/MemberDetail/MemberDetail.test.tsx
+++ b/src/screens/MemberDetail/MemberDetail.test.tsx
@@ -144,6 +144,7 @@ describe('MemberDetail', () => {
   test('should render the elements', async () => {
     const props = {
       id: 'rishav-jha-mech',
+      from: 'orglist',
     };
 
     render(
@@ -218,6 +219,7 @@ describe('MemberDetail', () => {
   test('Should display dicebear image if image is null', async () => {
     const props = {
       id: 'rishav-jha-mech',
+      from: 'orglist',
     };
 
     render(
@@ -231,24 +233,19 @@ describe('MemberDetail', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
-
     expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
 
-    const user = MOCKS1[0].result.data.user;
+    const dicebearUrl = `mocked-data-uri`;
 
-    waitFor(() =>
-      expect(screen.getByTestId('userImageAbsent')).toBeInTheDocument(),
-    );
-    waitFor(() =>
-      expect(screen.getByTestId('userImageAbsent').getAttribute('src')).toBe(
-        `https://api.dicebear.com/5.x/initials/svg?seed=${user?.firstName} ${user?.lastName}`,
-      ),
-    );
+    const userImage = await screen.findByTestId('userImageAbsent');
+    expect(userImage).toBeInTheDocument();
+    expect(userImage.getAttribute('src')).toBe(dicebearUrl);
   });
 
   test('Should display image if image is present', async () => {
     const props = {
       id: 'rishav-jha-mech',
+      from: 'orglist',
     };
 
     render(
@@ -266,15 +263,57 @@ describe('MemberDetail', () => {
     expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
 
     const user = MOCKS2[0].result.data.user;
+    const userImage = await screen.findByTestId('userImagePresent');
+    expect(userImage).toBeInTheDocument();
+    expect(userImage.getAttribute('src')).toBe(user?.image);
+  });
 
-    waitFor(() =>
-      expect(screen.getByTestId('userImagePresent')).toBeInTheDocument(),
+  test('should render LeftDrawer from SuperAdminScreen when member details is called from home page', async () => {
+    const props = {
+      id: 'rishav-jha-mech',
+      from: 'orglist',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <MemberDetail {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
     );
-    waitFor(() =>
-      expect(screen.getByTestId('userImagePresent').getAttribute('src')).toBe(
-        user?.image,
-      ),
+
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('orgsBtn')).toBeInTheDocument();
+    });
+  });
+
+  test('should not render LeftDrawer from SuperAdminScreen when member details is called from Organization Dashboard', async () => {
+    const props = {
+      id: 'rishav-jha-mech',
+      from: 'orgdash',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <MemberDetail {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
     );
+
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByTestId('orgsBtn')).not.toBeInTheDocument();
+    });
   });
 
   test('should call setState with 2 when button is clicked', async () => {
diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
index fb9708fbd0..6b3b61f7df 100644
--- a/src/screens/MemberDetail/MemberDetail.tsx
+++ b/src/screens/MemberDetail/MemberDetail.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import UserUpdate from 'components/UserUpdate/UserUpdate';
 import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen';
+import SuperAdminScreen from 'components/SuperAdminScreen/SuperAdminScreen';
 import { USER_DETAILS } from 'GraphQl/Queries/Queries';
 import styles from './MemberDetail.module.css';
 import { languages } from 'utils/languages';
@@ -20,28 +21,40 @@ import Loader from 'components/Loader/Loader';
 import useLocalStorage from 'utils/useLocalstorage';
 import Avatar from 'components/Avatar/Avatar';
 
-const { getItem } = useLocalStorage();
-
 type MemberDetailProps = {
   id: string; // This is the userId
+  from?: string;
 };
 
-const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
+const MemberDetail: React.FC<MemberDetailProps> = ({
+  id,
+  from,
+}): JSX.Element => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'memberDetail',
   });
 
   const [state, setState] = useState(1);
   const [isAdmin, setIsAdmin] = useState(false);
+  const isMounted = useRef(true);
 
+  const { getItem } = useLocalStorage();
   const location = useLocation<MemberDetailProps>();
   const currentUrl = location.state?.id || getItem('id') || id;
   const orgId = window.location.href.split('=')[1];
+  const calledFrom = location.state?.from || from;
   document.title = t('title');
 
   const [adda] = useMutation(ADD_ADMIN_MUTATION);
   const [updateUserType] = useMutation(UPDATE_USERTYPE_MUTATION);
 
+  useEffect(() => {
+    // check component is mounted or not
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
   const {
     data: userData,
     loading: loading,
@@ -101,7 +114,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
         userData.user.userType === 'ADMIN' ||
         userData.user.userType === 'SUPERADMIN'
       ) {
-        setIsAdmin(true);
+        if (isMounted.current) setIsAdmin(true);
         toast.error(t('alreadyIsAdmin'));
       } else {
         errorHandler(t, error);
@@ -109,213 +122,216 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
     }
   };
 
-  return (
-    <>
-      <OrganizationScreen screenName="User" title={t('title')}>
-        <Row>
-          <Col sm={8}>
-            {state == 1 ? (
-              <div className={styles.mainpageright}>
-                <Row className={styles.flexclm}>
-                  <p
-                    className={styles.logintitle}
-                    data-testid="dashboardTitleBtn"
-                  >
-                    {t('title')}
-                  </p>
-                  <div className={styles.btngroup}>
-                    <Button
-                      className={styles.memberfontcreatedbtn}
-                      data-testid="addAdminBtn"
-                      onClick={addAdmin}
-                      disabled={isAdmin}
-                    >
-                      {t('addAdmin')}
-                    </Button>
+  const memberDetails = (
+    <Row>
+      <Col sm={8}>
+        {state == 1 ? (
+          <div className={styles.mainpageright}>
+            <Row className={styles.flexclm}>
+              <p className={styles.logintitle} data-testid="dashboardTitleBtn">
+                {t('title')}
+              </p>
+              <div className={styles.btngroup}>
+                <Button
+                  className={styles.memberfontcreatedbtn}
+                  data-testid="addAdminBtn"
+                  onClick={addAdmin}
+                  disabled={isAdmin}
+                >
+                  {t('addAdmin')}
+                </Button>
 
-                    <Button
-                      className={styles.memberfontcreatedbtn}
-                      role="stateBtn"
-                      data-testid="stateBtn"
-                      onClick={(): void => {
-                        setState(2);
-                      }}
-                    >
-                      Edit Profile
-                    </Button>
+                <Button
+                  className={styles.memberfontcreatedbtn}
+                  role="stateBtn"
+                  data-testid="stateBtn"
+                  onClick={(): void => {
+                    setState(2);
+                  }}
+                >
+                  Edit Profile
+                </Button>
+              </div>
+            </Row>
+            <Row className={styles.justifysp}>
+              <Col sm={6} lg={4}>
+                <div>
+                  {userData?.user?.image ? (
+                    <img
+                      className={styles.userImage}
+                      src={userData?.user?.image}
+                      data-testid="userImagePresent"
+                    />
+                  ) : (
+                    <Avatar
+                      name={`${userData?.user?.firstName} ${userData?.user?.lastName}`}
+                      alt="User Image"
+                      size={180}
+                      avatarStyle={styles.userImage}
+                      dataTestId="userImageAbsent"
+                    />
+                  )}
+                </div>
+              </Col>
+              <Col sm={6} lg={8}>
+                {/* User section */}
+                <div>
+                  <h2>
+                    <strong>
+                      {userData?.user?.firstName} {userData?.user?.lastName}
+                    </strong>
+                  </h2>
+                  <p>
+                    <strong>{t('role')} :</strong>{' '}
+                    <span>{userData?.user?.userType}</span>
+                  </p>
+                  <p>
+                    <strong>{t('email')} :</strong>{' '}
+                    <span>{userData?.user?.email}</span>
+                  </p>
+                  <p>
+                    <strong>{t('createdOn')} :</strong>{' '}
+                    {prettyDate(userData?.user?.createdAt)}
+                  </p>
+                </div>
+              </Col>
+            </Row>
+            <br />
+            <br />
+            <br />
+            {/* Main Section And Activity section */}
+            <section className="mb-5">
+              <Row className={styles.justifysp}>
+                {/* Main Section */}
+                <Col sm={12} lg={6}>
+                  <div className="card mb-4">
+                    <div className="card-header">
+                      <h5>
+                        <strong>{t('main')}</strong>
+                      </h5>
+                    </div>
+                    <div className="card-body">
+                      <Row className="border-bottom pt-2 pb-3">
+                        <Col sm={6}>{t('firstName')}</Col>
+                        <Col sm={6}>{userData?.user?.firstName}</Col>
+                      </Row>
+                      <Row className="border-bottom py-3">
+                        <Col sm={6}>{t('lastName')}</Col>
+                        <Col sm={6}>{userData?.user?.lastName}</Col>
+                      </Row>
+                      <Row className="border-bottom py-3">
+                        <Col sm={6}>{t('role')}</Col>
+                        <Col sm={6}>{userData?.user?.userType}</Col>
+                      </Row>
+                      <Row className="border-bottom py-3">
+                        <Col sm={6}>{t('language')}</Col>
+                        <Col sm={6}>
+                          {getLanguageName(userData?.user?.appLanguageCode)}
+                        </Col>
+                      </Row>
+                      <Row className="border-bottom py-3">
+                        <Col sm={6}>{t('adminApproved')}</Col>
+                        <Col sm={6} data-testid="adminApproved">
+                          {userData?.user?.adminApproved ? 'Yes' : 'No'}
+                        </Col>
+                      </Row>
+                      <Row className="border-bottom py-3">
+                        <Col sm={6}>{t('pluginCreationAllowed')}</Col>
+                        <Col sm={6} data-testid="pluginCreationAllowed">
+                          {userData?.user?.pluginCreationAllowed ? 'Yes' : 'No'}
+                        </Col>
+                      </Row>
+                      <Row className="pt-3">
+                        <Col sm={6}>{t('createdOn')}</Col>
+                        <Col data-testid="createdOn" sm={6}>
+                          {prettyDate(userData?.user?.createdAt)}
+                        </Col>
+                      </Row>
+                    </div>
                   </div>
-                </Row>
-                <Row className={styles.justifysp}>
-                  <Col sm={6} lg={4}>
-                    <div>
-                      {userData?.user?.image ? (
-                        <img
-                          className={styles.userImage}
-                          src={userData?.user?.image}
-                          data-testid="userImagePresent"
-                        />
-                      ) : (
-                        <Avatar
-                          name={`${userData?.user?.firstName} ${userData?.user?.lastName}`}
-                          alt="User Image"
-                          size={180}
-                          avatarStyle={styles.userImage}
-                          dataTestId="userImageAbsent"
-                        />
-                      )}
+                </Col>
+                {/* Activity Section */}
+                <Col sm={12} lg={6}>
+                  {/* Organizations */}
+                  <div className="card">
+                    <div className="card-header">
+                      <h5>
+                        <strong>{t('organizations')}</strong>
+                      </h5>
                     </div>
-                  </Col>
-                  <Col sm={6} lg={8}>
-                    {/* User section */}
-                    <div>
-                      <h2>
-                        <strong>
-                          {userData?.user?.firstName} {userData?.user?.lastName}
-                        </strong>
-                      </h2>
-                      <p>
-                        <strong>{t('role')} :</strong>{' '}
-                        <span>{userData?.user?.userType}</span>
-                      </p>
-                      <p>
-                        <strong>{t('email')} :</strong>{' '}
-                        <span>{userData?.user?.email}</span>
-                      </p>
-                      <p>
-                        <strong>{t('createdOn')} :</strong>{' '}
-                        {prettyDate(userData?.user?.createdAt)}
-                      </p>
+                    <div className="card-body">
+                      <Row className="border-bottom pt-2 pb-3">
+                        <Col sm={8}>{t('created')}</Col>
+                        <Col sm={4}>
+                          {userData?.user?.createdOrganizations?.length}
+                        </Col>
+                      </Row>
+                      <Row className="border-bottom py-3">
+                        <Col sm={8}>{t('joined')}</Col>
+                        <Col sm={4}>
+                          {userData?.user?.joinedOrganizations?.length}
+                        </Col>
+                      </Row>
+                      <Row className="border-bottom py-3">
+                        <Col sm={8}>{t('adminForOrganizations')}</Col>
+                        <Col sm={4}>{userData?.user?.adminFor?.length}</Col>
+                      </Row>
+                      <Row className="pt-3">
+                        <Col sm={8}>{t('membershipRequests')}</Col>
+                        <Col sm={4}>
+                          {userData?.user?.membershipRequests?.length}
+                        </Col>
+                      </Row>
                     </div>
-                  </Col>
-                </Row>
-                <br />
-                <br />
-                <br />
-                {/* Main Section And Activity section */}
-                <section className="mb-5">
-                  <Row className={styles.justifysp}>
-                    {/* Main Section */}
-                    <Col sm={12} lg={6}>
-                      <div className="card mb-4">
-                        <div className="card-header">
-                          <h5>
-                            <strong>{t('main')}</strong>
-                          </h5>
-                        </div>
-                        <div className="card-body">
-                          <Row className="border-bottom pt-2 pb-3">
-                            <Col sm={6}>{t('firstName')}</Col>
-                            <Col sm={6}>{userData?.user?.firstName}</Col>
-                          </Row>
-                          <Row className="border-bottom py-3">
-                            <Col sm={6}>{t('lastName')}</Col>
-                            <Col sm={6}>{userData?.user?.lastName}</Col>
-                          </Row>
-                          <Row className="border-bottom py-3">
-                            <Col sm={6}>{t('role')}</Col>
-                            <Col sm={6}>{userData?.user?.userType}</Col>
-                          </Row>
-                          <Row className="border-bottom py-3">
-                            <Col sm={6}>{t('language')}</Col>
-                            <Col sm={6}>
-                              {getLanguageName(userData?.user?.appLanguageCode)}
-                            </Col>
-                          </Row>
-                          <Row className="border-bottom py-3">
-                            <Col sm={6}>{t('adminApproved')}</Col>
-                            <Col sm={6} data-testid="adminApproved">
-                              {userData?.user?.adminApproved ? 'Yes' : 'No'}
-                            </Col>
-                          </Row>
-                          <Row className="border-bottom py-3">
-                            <Col sm={6}>{t('pluginCreationAllowed')}</Col>
-                            <Col sm={6} data-testid="pluginCreationAllowed">
-                              {userData?.user?.pluginCreationAllowed
-                                ? 'Yes'
-                                : 'No'}
-                            </Col>
-                          </Row>
-                          <Row className="pt-3">
-                            <Col sm={6}>{t('createdOn')}</Col>
-                            <Col data-testid="createdOn" sm={6}>
-                              {prettyDate(userData?.user?.createdAt)}
-                            </Col>
-                          </Row>
-                        </div>
-                      </div>
-                    </Col>
-                    {/* Activity Section */}
-                    <Col sm={12} lg={6}>
-                      {/* Organizations */}
-                      <div className="card">
-                        <div className="card-header">
-                          <h5>
-                            <strong>{t('organizations')}</strong>
-                          </h5>
-                        </div>
-                        <div className="card-body">
-                          <Row className="border-bottom pt-2 pb-3">
-                            <Col sm={8}>{t('created')}</Col>
-                            <Col sm={4}>
-                              {userData?.user?.createdOrganizations?.length}
-                            </Col>
-                          </Row>
-                          <Row className="border-bottom py-3">
-                            <Col sm={8}>{t('joined')}</Col>
-                            <Col sm={4}>
-                              {userData?.user?.joinedOrganizations?.length}
-                            </Col>
-                          </Row>
-                          <Row className="border-bottom py-3">
-                            <Col sm={8}>{t('adminForOrganizations')}</Col>
-                            <Col sm={4}>{userData?.user?.adminFor?.length}</Col>
-                          </Row>
-                          <Row className="pt-3">
-                            <Col sm={8}>{t('membershipRequests')}</Col>
-                            <Col sm={4}>
-                              {userData?.user?.membershipRequests?.length}
-                            </Col>
-                          </Row>
-                        </div>
-                      </div>
-                      {/* Events */}
-                      <div className="card mt-4">
-                        <div className="card-header">
-                          <h5>
-                            <strong>{t('events')}</strong>
-                          </h5>
-                        </div>
-                        <div className="card-body">
-                          <Row className="border-bottom pt-2 pb-3">
-                            <Col sm={8}>{t('created')}</Col>
-                            <Col sm={4}>
-                              {userData?.user?.createdEvents?.length}
-                            </Col>
-                          </Row>
-                          <Row className="border-bottom py-3">
-                            <Col sm={8}>{t('joined')}</Col>
-                            <Col sm={4}>
-                              {userData?.user?.registeredEvents?.length}
-                            </Col>
-                          </Row>
-                          <Row className="pt-3">
-                            <Col sm={8}>{t('adminForEvents')}</Col>
-                            <Col sm={4}>
-                              {userData?.user?.eventAdmin?.length}
-                            </Col>
-                          </Row>
-                        </div>
-                      </div>
-                    </Col>
-                  </Row>
-                </section>
-              </div>
-            ) : (
-              <UserUpdate id={currentUrl} toggleStateValue={toggleStateValue} />
-            )}
-          </Col>
-        </Row>
-      </OrganizationScreen>
+                  </div>
+                  {/* Events */}
+                  <div className="card mt-4">
+                    <div className="card-header">
+                      <h5>
+                        <strong>{t('events')}</strong>
+                      </h5>
+                    </div>
+                    <div className="card-body">
+                      <Row className="border-bottom pt-2 pb-3">
+                        <Col sm={8}>{t('created')}</Col>
+                        <Col sm={4}>
+                          {userData?.user?.createdEvents?.length}
+                        </Col>
+                      </Row>
+                      <Row className="border-bottom py-3">
+                        <Col sm={8}>{t('joined')}</Col>
+                        <Col sm={4}>
+                          {userData?.user?.registeredEvents?.length}
+                        </Col>
+                      </Row>
+                      <Row className="pt-3">
+                        <Col sm={8}>{t('adminForEvents')}</Col>
+                        <Col sm={4}>{userData?.user?.eventAdmin?.length}</Col>
+                      </Row>
+                    </div>
+                  </div>
+                </Col>
+              </Row>
+            </section>
+          </div>
+        ) : (
+          <UserUpdate id={currentUrl} toggleStateValue={toggleStateValue} />
+        )}
+      </Col>
+    </Row>
+  );
+
+  return (
+    <>
+      {calledFrom === 'orglist' ? (
+        <SuperAdminScreen screenName="Profile" title={t('title')}>
+          {memberDetails}
+        </SuperAdminScreen>
+      ) : (
+        <OrganizationScreen screenName="Profile" title={t('title')}>
+          {memberDetails}
+        </OrganizationScreen>
+      )}
     </>
   );
 };