From 08c3fe44fb70bdcc2cb45dfb3d648862cf7014c9 Mon Sep 17 00:00:00 2001
From: Glen <dsouzaglen30@gmail.com>
Date: Sat, 17 Feb 2024 01:18:09 +0530
Subject: [PATCH] Fixed Organization Not Found in Left Drawer

---
 package-lock.json                             |  99 -----
 .../LeftDrawer/LeftDrawer.module.css          |   2 +-
 src/components/LeftDrawer/LeftDrawer.tsx      |  63 +--
 .../LeftDrawerOrg/LeftDrawerOrg.module.css    |   2 +-
 .../LeftDrawerOrg/LeftDrawerOrg.tsx           |  62 +--
 .../MemberDetail/MemberDetail.test.tsx        |  26 ++
 src/screens/MemberDetail/MemberDetail.tsx     | 413 +++++++++---------
 7 files changed, 311 insertions(+), 356 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ff21bf2838..60c340f5a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5914,12 +5914,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ansi-sequence-parser": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz",
-      "integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==",
-      "peer": true
-    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -14313,12 +14307,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonc-parser": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
-      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
-      "peer": true
-    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -15098,12 +15086,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lunr": {
-      "version": "2.3.9",
-      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
-      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
-      "peer": true
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -15250,18 +15232,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/marked": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
-      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
-      "peer": true,
-      "bin": {
-        "marked": "bin/marked.js"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -20199,18 +20169,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/shiki": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.7.tgz",
-      "integrity": "sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==",
-      "peer": true,
-      "dependencies": {
-        "ansi-sequence-parser": "^1.1.0",
-        "jsonc-parser": "^3.2.0",
-        "vscode-oniguruma": "^1.7.0",
-        "vscode-textmate": "^8.0.0"
-      }
-    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -21717,27 +21675,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typedoc": {
-      "version": "0.25.7",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.7.tgz",
-      "integrity": "sha512-m6A6JjQRg39p2ZVRIN3NKXgrN8vzlHhOS+r9ymUYtcUP/TIQPvWSq7YgE5ZjASfv5Vd5BW5xrir6Gm2XNNcOow==",
-      "peer": true,
-      "dependencies": {
-        "lunr": "^2.3.9",
-        "marked": "^4.3.0",
-        "minimatch": "^9.0.3",
-        "shiki": "^0.14.7"
-      },
-      "bin": {
-        "typedoc": "bin/typedoc"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "peerDependencies": {
-        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x"
-      }
-    },
     "node_modules/typedoc-plugin-markdown": {
       "version": "3.17.1",
       "resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-3.17.1.tgz",
@@ -21749,30 +21686,6 @@
         "typedoc": ">=0.24.0"
       }
     },
-    "node_modules/typedoc/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "peer": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/typedoc/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "peer": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/typescript": {
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
@@ -22140,18 +22053,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/vscode-oniguruma": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
-      "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==",
-      "peer": true
-    },
-    "node_modules/vscode-textmate": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
-      "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==",
-      "peer": true
-    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
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.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index 8b29863e70..cbd93b26e8 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';
@@ -104,34 +104,43 @@ const leftDrawer = ({
           )}
         </div>
         <div style={{ marginTop: 'auto' }}>
-          <button
-            className={styles.profileContainer}
-            data-testid="profileBtn"
-            onClick={(): void => {
-              history.push(`/member/id=${userId}`);
+          <Link
+            to={{
+              pathname: `/member/id=${userId}`,
+              state: { from: 'orglist' },
             }}
           >
-            <div className={styles.imageContainer}>
-              {userImage && userImage !== 'null' ? (
-                <img src={userImage} alt={`profile picture`} />
-              ) : (
-                <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
-                  alt={`dummy picture`}
-                />
-              )}
-            </div>
-            <div className={styles.profileText}>
-              <span className={styles.primaryText}>
-                {firstName} {lastName}
-              </span>
-              <span className={styles.secondaryText}>
-                {`${userType}`.toLowerCase()}
-              </span>
-            </div>
-            <AngleRightIcon fill={'var(--bs-secondary)'} />
-          </button>
-
+            <Button
+              key={'profileBtn'}
+              className={styles.profileContainer}
+              variant={screenName === 'Profile' ? 'success' : 'light'}
+              data-testid="profileBtn"
+            >
+              <div className={styles.imageContainer}>
+                {userImage && userImage !== 'null' ? (
+                  <img src={userImage} alt={`profile picture`} />
+                ) : (
+                  <img
+                    src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                    alt={`dummy picture`}
+                  />
+                )}
+              </div>
+              <div className={styles.profileText}>
+                <span className={styles.primaryText}>
+                  {firstName} {lastName}
+                </span>
+                <span
+                  className={`${styles.secondaryText} ${
+                    screenName === 'Profile' && 'text-white'
+                  }`}
+                >
+                  {`${userType}`.toLowerCase()}
+                </span>
+              </div>
+              <AngleRightIcon fill={'var(--bs-secondary)'} />
+            </Button>
+          </Link>
           <Button
             variant="light"
             className={`mt-4 d-flex justify-content-start px-0 w-100 bg-danger text-white  ${styles.logout}`}
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
index d3026ce5c9..4ac6527246 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -104,9 +104,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.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index 490eb8b77c..35343176f0 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -6,7 +6,7 @@ import IconComponent from 'components/IconComponent/IconComponent';
 import React, { useEffect, useState } 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';
@@ -176,33 +176,43 @@ const leftDrawerOrg = ({
 
         {/* Profile Section & Logout Btn */}
         <div style={{ marginTop: 'auto' }}>
-          <button
-            className={styles.profileContainer}
-            data-testid="profileBtn"
-            onClick={(): void => {
-              history.push(`/member/id=${userId}`);
+          <Link
+            to={{
+              pathname: `/member/id=${userId}`,
+              state: { from: 'orgdash' },
             }}
           >
-            <div className={styles.imageContainer}>
-              {userImage && userImage !== 'null' ? (
-                <img src={userImage} alt={`profile picture`} />
-              ) : (
-                <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
-                  alt={`dummy picture`}
-                />
-              )}
-            </div>
-            <div className={styles.profileText}>
-              <span className={styles.primaryText}>
-                {firstName} {lastName}
-              </span>
-              <span className={styles.secondaryText}>
-                {`${userType}`.toLowerCase()}
-              </span>
-            </div>
-            <AngleRightIcon fill={'var(--bs-secondary)'} />
-          </button>
+            <Button
+              key={'profileBtn'}
+              variant={screenName === 'Profile' ? 'success' : 'light'}
+              className={styles.profileContainer}
+              data-testid="profileBtn"
+            >
+              <div className={styles.imageContainer}>
+                {userImage && userImage !== 'null' ? (
+                  <img src={userImage} alt={`profile picture`} />
+                ) : (
+                  <img
+                    src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                    alt={`dummy picture`}
+                  />
+                )}
+              </div>
+              <div className={styles.profileText}>
+                <span className={styles.primaryText}>
+                  {firstName} {lastName}
+                </span>
+                <span
+                  className={`${styles.secondaryText} ${
+                    screenName === 'Profile' && 'text-white'
+                  }`}
+                >
+                  {`${userType}`.toLowerCase()}
+                </span>
+              </div>
+              <AngleRightIcon fill={'var(--bs-secondary)'} />
+            </Button>
+          </Link>
           <Button
             variant="light"
             className={`mt-4 d-flex justify-content-start px-0 w-100 ${styles.logout}`}
diff --git a/src/screens/MemberDetail/MemberDetail.test.tsx b/src/screens/MemberDetail/MemberDetail.test.tsx
index 83d59d4856..962eb7c1f5 100644
--- a/src/screens/MemberDetail/MemberDetail.test.tsx
+++ b/src/screens/MemberDetail/MemberDetail.test.tsx
@@ -215,6 +215,32 @@ describe('MemberDetail', () => {
     expect(getLangName('')).toBe('Unavailable');
   });
 
+  test('should render OrganizationScreen if 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 wait();
+    expect(screen.getAllByText(/People/i)).toBeTruthy();
+    expect(screen.getAllByText(/Events/i)).toBeTruthy();
+    expect(screen.getAllByText(/Posts/i)).toBeTruthy();
+    expect(screen.getAllByText(/Advertisement/i)).toBeTruthy();
+  });
+
   test('Should display dicebear image if image is null', async () => {
     const props = {
       id: 'rishav-jha-mech',
diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
index d0c572ba32..87044e9654 100644
--- a/src/screens/MemberDetail/MemberDetail.tsx
+++ b/src/screens/MemberDetail/MemberDetail.tsx
@@ -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';
@@ -23,9 +24,13 @@ 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',
   });
@@ -36,6 +41,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
   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);
@@ -108,211 +114,214 @@ 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"
+                    />
+                  ) : (
+                    <img
+                      className={styles.userImage}
+                      src={`https://api.dicebear.com/5.x/initials/svg?seed=${userData?.user?.firstName} ${userData?.user?.lastName}`}
+                      data-testid="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"
-                        />
-                      ) : (
-                        <img
-                          className={styles.userImage}
-                          src={`https://api.dicebear.com/5.x/initials/svg?seed=${userData?.user?.firstName} ${userData?.user?.lastName}`}
-                          data-testid="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 == 'orgdash' ? (
+        <OrganizationScreen screenName="Profile" title={t('title')}>
+          {memberDetails}
+        </OrganizationScreen>
+      ) : (
+        <SuperAdminScreen screenName="Profile" title={t('title')}>
+          {memberDetails}
+        </SuperAdminScreen>
+      )}
     </>
   );
 };