From 2ffa1329e56c1e74f4e6d38420d3eb29f0da2eae Mon Sep 17 00:00:00 2001
From: nitishkumar333 <ae.nitishkumar@gmail.com>
Date: Sat, 6 Jan 2024 15:31:55 +0530
Subject: [PATCH 1/3] fixed Organization not found error in left drawer

---
 .../LeftDrawer/LeftDrawer.module.css          |  16 +-
 src/components/LeftDrawer/LeftDrawer.tsx      |  70 +--
 .../LeftDrawerOrg/LeftDrawerOrg.module.css    |  17 +-
 .../LeftDrawerOrg/LeftDrawerOrg.tsx           |  74 +--
 .../MemberDetail/MemberDetail.test.tsx        |  26 ++
 src/screens/MemberDetail/MemberDetail.tsx     | 427 +++++++++---------
 6 files changed, 368 insertions(+), 262 deletions(-)

diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
index a75b674b41..0ec1f97e9f 100644
--- a/src/components/LeftDrawer/LeftDrawer.module.css
+++ b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -66,14 +66,14 @@
   width: 100%;
   height: 52px;
   border-radius: 8px;
-  background-color: var(--bs-white);
   display: flex;
   align-items: center;
+  padding: 2.5rem 1rem 2.5rem 1rem;
 }
 
 .leftDrawer .profileContainer:focus {
   outline: none;
-  background-color: var(--bs-gray-100);
+  background-color: #5ac989;
 }
 
 .leftDrawer .imageContainer {
@@ -96,6 +96,10 @@
   font-weight: 600;
 }
 
+.leftDrawer .profileContainer .profileText .primaryText .primaryTextWhite {
+  color: white;
+}
+
 .leftDrawer .profileContainer .profileText .secondaryText {
   font-size: 0.8rem;
   font-weight: 400;
@@ -104,6 +108,14 @@
   text-transform: capitalize;
 }
 
+.leftDrawer .profileContainer .profileText .secondaryTextBlack {
+  color: var(--bs-secondary);
+}
+
+.leftDrawer .profileContainer .profileText .secondaryTextWhite {
+  color: rgb(230, 230, 230);
+}
+
 .logout {
   margin-bottom: 50px;
 }
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index 94cbbf0367..ca0bce0aa5 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';
@@ -137,33 +137,51 @@ 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={'orglistBtn'}
+              data-testid="profileBtn"
+              variant={screenName === 'orglist' ? 'success' : 'light'}
+              className={styles.profileContainer}
+            >
+              <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} 
+                  ${screenName === 'orglist' ? styles.primaryTextWhite : ''}`}
+                >
+                  {firstName} {lastName}
+                </span>
+                <span
+                  className={`${styles.secondaryText} 
+                  ${screenName === 'orglist' ? styles.secondaryTextWhite : ''}`}
+                >
+                  {`${userType}`.toLowerCase()}
+                </span>
+              </div>
+              <AngleRightIcon
+                fill={
+                  screenName === 'orglist'
+                    ? 'var(--bs-white)'
+                    : 'var(--bs-secondary)'
+                }
+              />
+            </Button>
+          </Link>
 
           <Button
             variant="light"
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
index 635592653d..f7c8e0f678 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -110,9 +110,13 @@
   margin-top: 5rem;
   height: 52px;
   border-radius: 8px;
-  background-color: var(--bs-white);
   display: flex;
   align-items: center;
+  padding: 2.5rem 1rem 2.5rem 1rem;
+}
+
+.leftDrawer .profileContainer:focus {
+  background-color: #5ac989 !important;
 }
 
 .leftDrawer .profileContainer:focus {
@@ -139,6 +143,9 @@
   font-size: 1.1rem;
   font-weight: 600;
 }
+.leftDrawer .profileContainer .profileText .primaryText .primaryTextWhite {
+  color: white;
+}
 
 .leftDrawer .profileContainer .profileText .secondaryText {
   font-size: 0.8rem;
@@ -148,6 +155,14 @@
   text-transform: capitalize;
 }
 
+.leftDrawer .profileContainer .profileText .secondaryTextBlack {
+  color: var(--bs-secondary);
+}
+
+.leftDrawer .profileContainer .profileText .secondaryTextWhite {
+  color: rgb(230, 230, 230);
+}
+
 .logout {
   margin-bottom: 50px;
 }
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index e13a64086e..ef701a3ef9 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 { Link, useHistory } 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';
@@ -183,33 +183,55 @@ 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={'orgdashBtn'}
+              variant={screenName === 'orgdash' ? '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} 
+                  ${screenName === 'orgdash' ? styles.primaryTextWhite : ''}`}
+                >
+                  {firstName} {lastName}
+                </span>
+                <span
+                  className={`${styles.secondaryText} 
+                  ${
+                    screenName === 'orgdash'
+                      ? styles.secondaryTextWhite
+                      : styles.secondaryTextBlack
+                  }`}
+                >
+                  {`${userType}`.toLowerCase()}
+                </span>
+              </div>
+              <AngleRightIcon
+                fill={
+                  screenName === 'orgdash'
+                    ? 'var(--bs-white)'
+                    : '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 2647adf0fb..2e9366df67 100644
--- a/src/screens/MemberDetail/MemberDetail.test.tsx
+++ b/src/screens/MemberDetail/MemberDetail.test.tsx
@@ -175,6 +175,32 @@ describe('MemberDetail', () => {
     userEvent.click(screen.getByTestId('stateBtn'));
   });
 
+  test('should render OrganizationScreen if from is from is orgdash', 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('prettyDate function should work properly', () => {
     // If the date is provided
     const datePretty = jest.fn(prettyDate);
diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
index 0bad4fadc7..6aff556673 100644
--- a/src/screens/MemberDetail/MemberDetail.tsx
+++ b/src/screens/MemberDetail/MemberDetail.tsx
@@ -8,6 +8,7 @@ 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';
@@ -18,19 +19,29 @@ import Loader from 'components/Loader/Loader';
 
 type MemberDetailProps = {
   id: string; // This is the userId
+  from?: string;
+};
+type LocationStateProps = {
+  id: string;
+  from: string; // stores from where this component is called
 };
 
-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 location = useLocation<MemberDetailProps>();
+  const location = useLocation<LocationStateProps>();
   const currentUrl = location.state?.id || localStorage.getItem('id') || id;
   document.title = t('title');
 
+  const calledFrom = location.state?.from || from;
+
   const [adda] = useMutation(ADD_ADMIN_MUTATION);
   const {
     data: userData,
@@ -79,215 +90,217 @@ 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')}
+  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}
+                  onClick={addAdmin}
+                >
+                  {t('addAdmin')}
+                </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>
-                  <div className={styles.btngroup}>
-                    <Button
-                      className={styles.memberfontcreatedbtn}
-                      onClick={addAdmin}
-                    >
-                      {t('addAdmin')}
-                    </Button>
-                    <Button
-                      className={styles.memberfontcreatedbtn}
-                      role="stateBtn"
-                      data-testid="stateBtn"
-                      onClick={(): void => {
-                        setState(2);
-                      }}
-                    >
-                      Edit Profile
-                    </Button>
+                  <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('memberOfOrganization')}</Col>
+                        <Col sm={6}>
+                          {userData?.user?.organizationUserBelongsTo ?? 'None'}
+                        </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('memberOfOrganization')}</Col>
-                            <Col sm={6}>
-                              {userData?.user?.organizationUserBelongsTo ??
-                                'None'}
-                            </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="orgdash" title={t('title')}>
+          {memberDetails}
+        </OrganizationScreen>
+      ) : (
+        <SuperAdminScreen screenName="orglist" title={t('title')}>
+          {memberDetails}
+        </SuperAdminScreen>
+      )}
     </>
   );
 };

From f66df72df4362eaa5759b4447d3718ce5db6ea52 Mon Sep 17 00:00:00 2001
From: nitishkumar333 <ae.nitishkumar@gmail.com>
Date: Sat, 6 Jan 2024 18:15:09 +0530
Subject: [PATCH 2/3] removed redundant css and type

---
 src/components/LeftDrawer/LeftDrawer.module.css | 13 ++-----------
 .../LeftDrawerOrg/LeftDrawerOrg.module.css      | 17 ++---------------
 src/components/LeftDrawerOrg/LeftDrawerOrg.tsx  |  6 +-----
 src/screens/MemberDetail/MemberDetail.tsx       |  8 ++------
 4 files changed, 7 insertions(+), 37 deletions(-)

diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
index 0ec1f97e9f..81b309a187 100644
--- a/src/components/LeftDrawer/LeftDrawer.module.css
+++ b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -71,11 +71,6 @@
   padding: 2.5rem 1rem 2.5rem 1rem;
 }
 
-.leftDrawer .profileContainer:focus {
-  outline: none;
-  background-color: #5ac989;
-}
-
 .leftDrawer .imageContainer {
   width: 68px;
 }
@@ -97,7 +92,7 @@
 }
 
 .leftDrawer .profileContainer .profileText .primaryText .primaryTextWhite {
-  color: white;
+  color: var(--bs-white);
 }
 
 .leftDrawer .profileContainer .profileText .secondaryText {
@@ -108,12 +103,8 @@
   text-transform: capitalize;
 }
 
-.leftDrawer .profileContainer .profileText .secondaryTextBlack {
-  color: var(--bs-secondary);
-}
-
 .leftDrawer .profileContainer .profileText .secondaryTextWhite {
-  color: rgb(230, 230, 230);
+  color: var(--bs-gray-100);
 }
 
 .logout {
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
index f7c8e0f678..a6a7e2ef53 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -115,15 +115,6 @@
   padding: 2.5rem 1rem 2.5rem 1rem;
 }
 
-.leftDrawer .profileContainer:focus {
-  background-color: #5ac989 !important;
-}
-
-.leftDrawer .profileContainer:focus {
-  outline: none;
-  background-color: var(--bs-gray-100);
-}
-
 .leftDrawer .imageContainer {
   width: 68px;
 }
@@ -144,7 +135,7 @@
   font-weight: 600;
 }
 .leftDrawer .profileContainer .profileText .primaryText .primaryTextWhite {
-  color: white;
+  color: var(--bs-white);
 }
 
 .leftDrawer .profileContainer .profileText .secondaryText {
@@ -155,12 +146,8 @@
   text-transform: capitalize;
 }
 
-.leftDrawer .profileContainer .profileText .secondaryTextBlack {
-  color: var(--bs-secondary);
-}
-
 .leftDrawer .profileContainer .profileText .secondaryTextWhite {
-  color: rgb(230, 230, 230);
+  color: var(--bs-gray-100);
 }
 
 .logout {
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index ef701a3ef9..bc38154de1 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -214,11 +214,7 @@ const leftDrawerOrg = ({
                 </span>
                 <span
                   className={`${styles.secondaryText} 
-                  ${
-                    screenName === 'orgdash'
-                      ? styles.secondaryTextWhite
-                      : styles.secondaryTextBlack
-                  }`}
+                  ${screenName === 'orgdash' ? styles.secondaryTextWhite : ''}`}
                 >
                   {`${userType}`.toLowerCase()}
                 </span>
diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
index 6aff556673..1c6d834699 100644
--- a/src/screens/MemberDetail/MemberDetail.tsx
+++ b/src/screens/MemberDetail/MemberDetail.tsx
@@ -19,11 +19,7 @@ import Loader from 'components/Loader/Loader';
 
 type MemberDetailProps = {
   id: string; // This is the userId
-  from?: string;
-};
-type LocationStateProps = {
-  id: string;
-  from: string; // stores from where this component is called
+  from?: string; // stores from where this component was called
 };
 
 const MemberDetail: React.FC<MemberDetailProps> = ({
@@ -36,7 +32,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({
 
   const [state, setState] = useState(1);
 
-  const location = useLocation<LocationStateProps>();
+  const location = useLocation<MemberDetailProps>();
   const currentUrl = location.state?.id || localStorage.getItem('id') || id;
   document.title = t('title');
 

From 30d88c861bebc494acb3abef6e1f06763f6db19a Mon Sep 17 00:00:00 2001
From: nitishkumar333 <ae.nitishkumar@gmail.com>
Date: Mon, 22 Jan 2024 15:46:32 +0530
Subject: [PATCH 3/3] escape characters

---
 src/components/LeftDrawer/LeftDrawer.tsx           | 2 +-
 src/components/LeftDrawerEvent/LeftDrawerEvent.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index ca0bce0aa5..72b3ff5215 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -154,7 +154,7 @@ const leftDrawer = ({
                   <img src={userImage} alt={`profile picture`} />
                 ) : (
                   <img
-                    src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                    src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName} ${lastName}`}
                     alt={`dummy picture`}
                   />
                 )}
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
index 795f6016cb..dae4deaf87 100644
--- a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
+++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
@@ -164,7 +164,7 @@ const leftDrawerEvent = ({
                 <img src={userImage} alt={`Profile Picture`} />
               ) : (
                 <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName} ${lastName}`}
                   alt={`Dummy User Picture`}
                 />
               )}