From 30e280d8b3535dd1c4a952a8d7f7d0b4b42bfe7b Mon Sep 17 00:00:00 2001
From: Noble Mittal <62551163+beingnoble03@users.noreply.github.com>
Date: Wed, 4 Oct 2023 21:47:01 +0530
Subject: [PATCH] Add My Tasks screen and Fix UI bugs [User Portal] (#978)

* Create login and register page for user portal

* Lint public locales

* Create tests for login page components

* Add react import in tests

* Create organizations screen for user portal

* Fix failing tests and lint code

* fix failing tests

* Add tests for organization screen and componenets

* Fix non-null assertions

* Fix non-null assertions in organizations test

* Fix bootstrap migration changes

* Add Home Screen along with other components

* Fix failing tests

* Add required tests and Offcanvas navbar

* Remove unused variables from tests

* Sync the Mutations with talawa-api

* Add Settings and Donate Screen

* Add multilingual support for the screens

* Add events screen without calendar view

* Add multilingual support to Events screen

* Fix failing tests due to merge

* Add Post Comment functionality

* Refactor Events tests

* Deprecate event registrants from query

* Add my tasks screen for user portal

* Remove unnecessary comments from test files
---
 public/locales/en.json                        |  19 +-
 public/locales/fr.json                        |  19 +-
 public/locales/hi.json                        |  19 +-
 public/locales/sp.json                        |  19 +-
 public/locales/zh.json                        |  19 +-
 src/App.tsx                                   |   2 +
 src/GraphQl/Queries/Queries.ts                |  36 ++++
 .../OrganizationCard.test.tsx                 |   2 +-
 .../OrganizationNavbar/OrganizationNavbar.tsx |  33 +++-
 .../UserPortal/PeopleCard/PeopleCard.test.tsx |   2 +-
 .../UserPortal/TaskCard/TaskCard.module.css   |  41 +++++
 .../UserPortal/TaskCard/TaskCard.test.tsx     |  95 ++++++++++
 .../UserPortal/TaskCard/TaskCard.tsx          | 131 +++++++++++++
 .../UserPortal/UserNavbar/UserNavbar.tsx      |  11 +-
 .../Organizations/Organizations.module.css    |   4 +
 .../Organizations/Organizations.tsx           |   5 +-
 src/screens/UserPortal/Tasks/Tasks.module.css |  48 +++++
 src/screens/UserPortal/Tasks/Tasks.test.tsx   | 130 +++++++++++++
 src/screens/UserPortal/Tasks/Tasks.tsx        | 173 ++++++++++++++++++
 19 files changed, 787 insertions(+), 21 deletions(-)
 create mode 100644 src/components/UserPortal/TaskCard/TaskCard.module.css
 create mode 100644 src/components/UserPortal/TaskCard/TaskCard.test.tsx
 create mode 100644 src/components/UserPortal/TaskCard/TaskCard.tsx
 create mode 100644 src/screens/UserPortal/Tasks/Tasks.module.css
 create mode 100644 src/screens/UserPortal/Tasks/Tasks.test.tsx
 create mode 100644 src/screens/UserPortal/Tasks/Tasks.tsx

diff --git a/public/locales/en.json b/public/locales/en.json
index 7f6771f1e9..a8c22f0102 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -528,7 +528,8 @@
     "joinedOrganizations": "Joined Organizations",
     "createdOrganizations": "Created Organizations",
     "search": "Search",
-    "nothingToShow": "Nothing to show here."
+    "nothingToShow": "Nothing to show here.",
+    "selectOrganization": "Select Organization"
   },
   "userSidebar": {
     "yourOrganizations": "Your Organizations",
@@ -594,5 +595,21 @@
     "creator": "Creator",
     "alreadyRegistered": "Already registered",
     "register": "Register"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "Your assigned tasks",
+    "nothingToShow": "Nothing to show here."
+  },
+  "userTaskCard": {
+    "description": "Description",
+    "deadline": "Deadline",
+    "created": "Created",
+    "assignees": "Assignees",
+    "completed": "Completed",
+    "incomplete": "Incomplete",
+    "taskCompleted": "The task has been completed",
+    "taskNotCompleted": "The task has not been completed yet",
+    "event": "Event",
+    "organization": "Organization"
   }
 }
diff --git a/public/locales/fr.json b/public/locales/fr.json
index 786c133520..39550fdb81 100644
--- a/public/locales/fr.json
+++ b/public/locales/fr.json
@@ -521,7 +521,8 @@
     "joinedOrganizations": "Organisations jointes",
     "createdOrganizations": "Organisations créées",
     "search": "Recherche",
-    "nothingToShow": "Rien à montrer ici."
+    "nothingToShow": "Rien à montrer ici.",
+    "selectOrganization": "Sélectionnez une organisation"
   },
   "userSidebar": {
     "yourOrganizations": "Vos organisations",
@@ -587,5 +588,21 @@
     "creator": "Créatrice",
     "alreadyRegistered": "Déjà enregistré",
     "register": "Registre"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "Vos tâches assignées",
+    "nothingToShow": "Rien à montrer ici."
+  },
+  "userTaskCard": {
+    "description": "Description",
+    "deadline": "Date limite",
+    "created": "Créé",
+    "assignees": "Destinataires",
+    "completed": "Complété",
+    "incomplete": "Incomplète",
+    "taskCompleted": "La tâche est terminée",
+    "taskNotCompleted": "La tâche n'est pas encore terminée",
+    "event": "Événement",
+    "organization": "Organisation"
   }
 }
diff --git a/public/locales/hi.json b/public/locales/hi.json
index 5f5654b884..be82066a74 100644
--- a/public/locales/hi.json
+++ b/public/locales/hi.json
@@ -522,7 +522,8 @@
     "joinedOrganizations": "संगठन शामिल हुए",
     "createdOrganizations": "संगठन बनाये गये",
     "search": "खोज",
-    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है."
+    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है.",
+    "selectOrganization": "संगठन का चयन करें"
   },
   "userSidebar": {
     "yourOrganizations": "आपके संगठन",
@@ -588,5 +589,21 @@
     "creator": "निर्माता",
     "alreadyRegistered": "पहले से ही पंजीकृत",
     "register": "पंजीकरण करवाना"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "आपके असाइन किए गए कार्य",
+    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है."
+  },
+  "userTaskCard": {
+    "description": "विवरण",
+    "deadline": "अंतिम तारीख",
+    "created": "बनाया",
+    "assignees": "असाइनी",
+    "completed": "पुरा",
+    "incomplete": "अधूरा",
+    "taskCompleted": "काम पूरा हो गया",
+    "taskNotCompleted": "कार्य अभी तक पूरा नहीं हुआ है",
+    "event": "आयोजन",
+    "organization": "संगठन"
   }
 }
diff --git a/public/locales/sp.json b/public/locales/sp.json
index 85f3492c02..27f0968470 100644
--- a/public/locales/sp.json
+++ b/public/locales/sp.json
@@ -522,7 +522,8 @@
     "joinedOrganizations": "Organizaciones unidas",
     "createdOrganizations": "Organizaciones creadas",
     "search": "Buscar",
-    "nothingToShow": "Nada que mostrar aquí."
+    "nothingToShow": "Nada que mostrar aquí.",
+    "selectOrganization": "Seleccionar organización"
   },
   "userSidebar": {
     "yourOrganizations": "Tus Organizaciones",
@@ -588,5 +589,21 @@
     "creator": "Creadora",
     "alreadyRegistered": "Ya registrado",
     "register": "Registro"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "Tus tareas asignadas",
+    "nothingToShow": "No hay nada que mostrar aquí."
+  },
+  "userTaskCard": {
+    "description": "Descripción",
+    "deadline": "Fecha límite",
+    "created": "Creado",
+    "assignees": "Cesionarias",
+    "completed": "Terminada",
+    "incomplete": "Incompleta",
+    "taskCompleted": "La tarea ha sido completada",
+    "taskNotCompleted": "La tarea aún no se ha completado",
+    "event": "Evento",
+    "organization": "Organización"
   }
 }
diff --git a/public/locales/zh.json b/public/locales/zh.json
index 055bb709b2..d4a2a5ea7c 100644
--- a/public/locales/zh.json
+++ b/public/locales/zh.json
@@ -522,7 +522,8 @@
     "joinedOrganizations": "加入組織",
     "createdOrganizations": "創建的組織",
     "search": "搜索",
-    "nothingToShow": "這裡沒有什麼可展示的。"
+    "nothingToShow": "這裡沒有什麼可展示的。",
+    "selectOrganization": "選擇組織"
   },
   "userSidebar": {
     "yourOrganizations": "您的組織",
@@ -588,5 +589,21 @@
     "creator": "創作者",
     "alreadyRegistered": "已經註冊",
     "register": "登記"
+  },
+  "userTasks": {
+    "yourAssignedTasks": "您指派的任務",
+    "nothingToShow": "這裡沒有什麼可顯示的。"
+  },
+  "userTaskCard": {
+    "description": "描述",
+    "deadline": "最後期限",
+    "created": "已創建",
+    "assignees": "受讓人",
+    "completed": "完全的",
+    "incomplete": "不完整",
+    "taskCompleted": "任務已完成",
+    "taskNotCompleted": "任務還沒完成",
+    "event": "事件",
+    "organization": "組織"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 31e97bdc64..9b32d4ba59 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,6 +31,7 @@ import People from 'screens/UserPortal/People/People';
 import Settings from 'screens/UserPortal/Settings/Settings';
 import Donate from 'screens/UserPortal/Donate/Donate';
 import Events from 'screens/UserPortal/Events/Events';
+import Tasks from 'screens/UserPortal/Tasks/Tasks';
 
 function app(): JSX.Element {
   /*const { updatePluginLinks, updateInstalled } = bindActionCreators(
@@ -125,6 +126,7 @@ function app(): JSX.Element {
         <SecuredRouteForUser path="/user/settings" component={Settings} />
         <SecuredRouteForUser path="/user/donate" component={Donate} />
         <SecuredRouteForUser path="/user/events" component={Events} />
+        <SecuredRouteForUser path="/user/tasks" component={Tasks} />
 
         <Route exact path="*" component={PageNotFound} />
       </Switch>
diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
index ef8aa20a2b..d426a4bfb5 100644
--- a/src/GraphQl/Queries/Queries.ts
+++ b/src/GraphQl/Queries/Queries.ts
@@ -663,3 +663,39 @@ export const ORGANIZATION_EVENTS_CONNECTION = gql`
     }
   }
 `;
+
+export const USER_TASKS_LIST = gql`
+  query User($id: ID!) {
+    user(id: $id) {
+      _id
+      assignedTasks {
+        _id
+        title
+        description
+        deadline
+        volunteers {
+          _id
+          firstName
+          lastName
+          email
+        }
+        createdAt
+        completed
+        event {
+          _id
+          title
+          organization {
+            _id
+            name
+            image
+          }
+        }
+        creator {
+          _id
+          firstName
+          lastName
+        }
+      }
+    }
+  }
+`;
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
index f04c87b526..fa4339e810 100644
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
@@ -27,7 +27,7 @@ let props = {
   description: 'organizationDescription',
 };
 
-describe('Testing Organization Card Component [User Portal]', () => {
+describe('Testing OrganizationCard Component [User Portal]', () => {
   test('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
index 3e748e2856..d1d72847bf 100644
--- a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
@@ -81,34 +81,49 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
             <Offcanvas.Title>Talawa</Offcanvas.Title>
           </Offcanvas.Header>
           <Offcanvas.Body>
-            <Nav className="me-auto flex-grow-1 pe-3" variant="dark">
+            <Nav className="me-auto flex-grow-1 pe-3 pt-1" variant="dark">
               <Nav.Link
                 active={props.currentPage === 'home'}
-                onClick={(): void => history.push(homeLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(homeLink)
+                }
               >
                 {t('home')}
               </Nav.Link>
               <Nav.Link
                 active={props.currentPage === 'events'}
-                onClick={(): void => history.push(eventsLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(eventsLink)
+                }
               >
                 {t('events')}
               </Nav.Link>
               <Nav.Link
                 active={props.currentPage === 'people'}
-                onClick={(): void => history.push(peopleLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(peopleLink)
+                }
               >
                 {t('people')}
               </Nav.Link>
               <Nav.Link
                 active={props.currentPage === 'chat'}
-                onClick={(): void => history.push(chatLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(chatLink)
+                }
               >
                 {t('chat')}
               </Nav.Link>
               <Nav.Link
                 active={props.currentPage === 'donate'}
-                onClick={(): void => history.push(donationLink)}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => history.push(donationLink)
+                }
               >
                 {t('donate')}
               </Nav.Link>
@@ -167,7 +182,11 @@ function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
                       {t('settings')}
                     </Link>
                   </Dropdown.Item>
-                  <Dropdown.Item>{t('myTasks')}</Dropdown.Item>
+                  <Dropdown.Item>
+                    <Link to="/user/tasks" className={styles.link}>
+                      {t('myTasks')}
+                    </Link>
+                  </Dropdown.Item>
                   <Dropdown.Item
                     onClick={handleLogout}
                     data-testid={`logoutBtn`}
diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx b/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
index 281cd8d84d..d0bad51b11 100644
--- a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
+++ b/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
@@ -27,7 +27,7 @@ let props = {
   email: 'first@last.com',
 };
 
-describe('Testing Organization Card Component [User Portal]', () => {
+describe('Testing PeopleCard Component [User Portal]', () => {
   test('Component should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
diff --git a/src/components/UserPortal/TaskCard/TaskCard.module.css b/src/components/UserPortal/TaskCard/TaskCard.module.css
new file mode 100644
index 0000000000..bf11a53e48
--- /dev/null
+++ b/src/components/UserPortal/TaskCard/TaskCard.module.css
@@ -0,0 +1,41 @@
+.mainContainer {
+  width: 100%;
+  padding: 15px;
+  cursor: pointer;
+  border-radius: 10px;
+  /* box-shadow: 2px 2px 8px 0px #c8c8c8; */
+  overflow: hidden;
+  background-color: rgba(50, 187, 107, 0.15);
+}
+
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+}
+
+.cardDetail {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin: 5px;
+}
+
+.fillPrimary {
+  fill: var(--bs-primary) !important;
+}
+
+.badge {
+  display: flex;
+  width: fit-content;
+  background-color: var(--bs-secondary) !important;
+  justify-content: center;
+  align-items: center;
+}
+
+.fitContent {
+  width: fit-content;
+}
+
+.marginTop {
+  margin-top: 10px;
+}
diff --git a/src/components/UserPortal/TaskCard/TaskCard.test.tsx b/src/components/UserPortal/TaskCard/TaskCard.test.tsx
new file mode 100644
index 0000000000..1dcec3179c
--- /dev/null
+++ b/src/components/UserPortal/TaskCard/TaskCard.test.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import TaskCard from './TaskCard';
+
+const link = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+let props = {
+  id: '1',
+  title: 'Test Task Card',
+  deadline: '2023-09-28T16:25:47.000Z',
+  description: 'Test Description',
+  volunteers: [
+    {
+      id: '1',
+      firstName: 'Test',
+      lastName: 'User',
+      email: 'test@user.com',
+    },
+  ],
+  creator: {
+    id: '2',
+    firstName: 'Test',
+    lastName: 'User',
+  },
+  event: {
+    id: '3',
+    title: 'Test Event',
+    organization: {
+      id: '1',
+      name: 'Test Organization',
+      image: '',
+    },
+  },
+  createdAt: '2023-09-21T13:24:31.217Z',
+  completed: false,
+};
+
+describe('Testing TaskCard Component [User Portal]', () => {
+  test('Component should be rendered properly if task.completed === false', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <TaskCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(screen.queryAllByText('Test Task Card')).not.toBe([]);
+  });
+
+  test('Component should be rendered properly if task.completed === true', async () => {
+    props = {
+      ...props,
+      completed: true,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <TaskCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(screen.queryAllByText('Test Task Card')).not.toBe([]);
+  });
+});
diff --git a/src/components/UserPortal/TaskCard/TaskCard.tsx b/src/components/UserPortal/TaskCard/TaskCard.tsx
new file mode 100644
index 0000000000..72b8cfd66a
--- /dev/null
+++ b/src/components/UserPortal/TaskCard/TaskCard.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import styles from './TaskCard.module.css';
+import TimerIcon from '@mui/icons-material/Timer';
+import DescriptionIcon from '@mui/icons-material/Description';
+import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
+import CreateIcon from '@mui/icons-material/Create';
+import EventIcon from '@mui/icons-material/Event';
+import CorporateFareIcon from '@mui/icons-material/CorporateFare';
+import { Badge } from 'react-bootstrap';
+import { Tooltip } from '@mui/material';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+
+interface InterfaceTaskCardProps {
+  id: string;
+  title: string;
+  deadline: string;
+  description: string;
+  volunteers: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  }[];
+  creator: {
+    id: string;
+    firstName: string;
+    lastName: string;
+  };
+  event: {
+    id: string;
+    title: string;
+    organization: {
+      id: string;
+      name: string;
+      image: string | null;
+    };
+  };
+  createdAt: string;
+  completed: boolean;
+}
+
+function taskCard(props: InterfaceTaskCardProps): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userTaskCard',
+  });
+
+  const creatorName = `${props.creator.firstName} ${props.creator.lastName}`;
+
+  return (
+    <div className={styles.mainContainer}>
+      <div className={styles.cardDetails}>
+        <h5>
+          <b>{props.title}</b>
+        </h5>
+
+        <div className={styles.cardDetail}>
+          <Tooltip title={t('event')}>
+            <EventIcon className={styles.fillPrimary} />
+          </Tooltip>{' '}
+          {props.event.title}
+        </div>
+
+        <div className={styles.cardDetail}>
+          <Tooltip title={t('organization')}>
+            <CorporateFareIcon className={styles.fillPrimary} />
+          </Tooltip>{' '}
+          {props.event.organization.name}
+        </div>
+
+        <div className={styles.cardDetail}>
+          <Tooltip title={t('description')}>
+            <DescriptionIcon className={styles.fillPrimary} />
+          </Tooltip>{' '}
+          {props.description}
+        </div>
+
+        <div className={styles.cardDetail}>
+          <Tooltip title={t('deadline')}>
+            <TimerIcon className={styles.fillPrimary} />
+          </Tooltip>{' '}
+          {dayjs(props.deadline).format('llll')}
+        </div>
+
+        <div className={styles.cardDetail}>
+          <Tooltip title={t('created')}>
+            <CreateIcon className={styles.fillPrimary} />
+          </Tooltip>{' '}
+          {`${dayjs(props.createdAt).format('llll')} by ${creatorName}`}
+        </div>
+
+        <div className={styles.cardDetail}>
+          <Tooltip title={t('assignees')}>
+            <AssignmentIndIcon className={styles.fillPrimary} />
+          </Tooltip>
+          {props.volunteers.map((volunteer: any, index) => {
+            const name = `${volunteer.firstName} ${volunteer.lastName}`;
+
+            return (
+              <Tooltip key={index} title={volunteer.email}>
+                <Badge className={styles.badge}>{name}</Badge>
+              </Tooltip>
+            );
+          })}
+        </div>
+
+        {props.completed ? (
+          <Tooltip title={t('taskCompleted')}>
+            <Badge
+              bg="success"
+              className={`${styles.fitContent} ${styles.marginTop}`}
+            >
+              {t('completed')}
+            </Badge>
+          </Tooltip>
+        ) : (
+          <Tooltip title={t('taskNotCompleted')}>
+            <Badge
+              bg="danger"
+              className={`${styles.fitContent} ${styles.marginTop}`}
+            >
+              {t('incomplete')}
+            </Badge>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default taskCard;
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
index ed297f03af..79779cb514 100644
--- a/src/components/UserPortal/UserNavbar/UserNavbar.tsx
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
@@ -29,10 +29,7 @@ function userNavbar(): JSX.Element {
   const userName = localStorage.getItem('name');
 
   return (
-    <Navbar
-      variant="dark"
-      className={`${styles.boxShadow} ${styles.colorPrimary}`}
-    >
+    <Navbar variant="dark" className={`${styles.colorPrimary}`}>
       <Container fluid>
         <Navbar.Brand href="#">
           <img
@@ -98,7 +95,11 @@ function userNavbar(): JSX.Element {
                   {t('settings')}
                 </Link>
               </Dropdown.Item>
-              <Dropdown.Item>{t('myTasks')}</Dropdown.Item>
+              <Dropdown.Item>
+                <Link to="/user/tasks" className={styles.link}>
+                  {t('myTasks')}
+                </Link>
+              </Dropdown.Item>
               <Dropdown.Item onClick={handleLogout} data-testid={`logoutBtn`}>
                 {t('logout')}
               </Dropdown.Item>
diff --git a/src/screens/UserPortal/Organizations/Organizations.module.css b/src/screens/UserPortal/Organizations/Organizations.module.css
index 76f443ca37..1f49c0d158 100644
--- a/src/screens/UserPortal/Organizations/Organizations.module.css
+++ b/src/screens/UserPortal/Organizations/Organizations.module.css
@@ -42,3 +42,7 @@
 .colorPrimary {
   background: #31bb6b;
 }
+
+.backgroundWhite {
+  background-color: white;
+}
diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx
index 11497ae5c0..144701d75b 100644
--- a/src/screens/UserPortal/Organizations/Organizations.tsx
+++ b/src/screens/UserPortal/Organizations/Organizations.tsx
@@ -118,14 +118,15 @@ export default function organizations(): JSX.Element {
       <div className={`d-flex flex-row ${styles.containerHeight}`}>
         <UserSidebar />
         <div className={`${styles.colorLight} ${styles.mainContainer}`}>
+          <h3>{t('selectOrganization')}</h3>
           <div
-            className={`d-flex flex-row justify-content-between flex-wrap ${styles.gap}`}
+            className={`d-flex flex-row justify-content-between pt-3 flex-wrap ${styles.gap}`}
           >
             <InputGroup className={styles.maxWidth}>
               <Form.Control
                 placeholder={t('search')}
                 type="text"
-                className={styles.borderNone}
+                className={`${styles.borderNone} ${styles.backgroundWhite}`}
                 value={filterName}
                 onChange={handleSearch}
                 data-testid="searchInput"
diff --git a/src/screens/UserPortal/Tasks/Tasks.module.css b/src/screens/UserPortal/Tasks/Tasks.module.css
new file mode 100644
index 0000000000..1f49c0d158
--- /dev/null
+++ b/src/screens/UserPortal/Tasks/Tasks.module.css
@@ -0,0 +1,48 @@
+.borderNone {
+  border: none;
+}
+
+.colorWhite {
+  color: white;
+}
+
+.maxWidth {
+  max-width: 300px;
+}
+
+.colorLight {
+  background-color: #f5f5f5;
+}
+
+.mainContainer {
+  width: 50%;
+  flex-grow: 3;
+  padding: 40px;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.content {
+  height: fit-content;
+  min-height: calc(100% - 40px);
+}
+
+.gap {
+  gap: 20px;
+}
+
+.paddingY {
+  padding: 30px 0px;
+}
+
+.containerHeight {
+  height: calc(100vh - 66px);
+}
+
+.colorPrimary {
+  background: #31bb6b;
+}
+
+.backgroundWhite {
+  background-color: white;
+}
diff --git a/src/screens/UserPortal/Tasks/Tasks.test.tsx b/src/screens/UserPortal/Tasks/Tasks.test.tsx
new file mode 100644
index 0000000000..208a1ca4e8
--- /dev/null
+++ b/src/screens/UserPortal/Tasks/Tasks.test.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
+import { USER_TASKS_LIST } from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import Tasks from './Tasks';
+
+const MOCKS = [
+  {
+    request: {
+      query: UPDATE_USER_MUTATION,
+      variables: {
+        firstName: 'Noble',
+        lastName: 'Mittal',
+      },
+      result: {
+        data: {
+          updateUserProfile: {
+            _id: '453',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TASKS_LIST,
+      variables: {
+        id: localStorage.getItem('userId'),
+      },
+    },
+    result: {
+      data: {
+        user: {
+          _id: '63d6064458fce20ee25c3bf7',
+          assignedTasks: [
+            {
+              _id: '650c440f2b5f121b9ceeaa88',
+              title: 'Volunteer catering system',
+              description: 'Lorem ipsum dolor sit amet',
+              deadline: '2023-09-28T16:25:47.000Z',
+              volunteers: [
+                {
+                  _id: '63d6064458fce20ee25c3bf7',
+                  firstName: 'Noble',
+                  lastName: 'Mittal',
+                  email: 'test@gmail.com',
+                  __typename: 'User',
+                },
+              ],
+              createdAt: '2023-09-21T13:24:31.217Z',
+              completed: false,
+              event: {
+                _id: '650982592328d374ba2881bc',
+                title: 'sadas',
+                organization: {
+                  _id: '6493e4570ee6c913d7199291',
+                  name: 'Test Organization',
+                  image: null,
+                  __typename: 'Organization',
+                },
+                __typename: 'Event',
+              },
+              creator: {
+                _id: '63d6064458fce20ee25c3bf7',
+                firstName: 'Noble',
+                lastName: 'Mittal',
+                __typename: 'User',
+              },
+              __typename: 'Task',
+            },
+          ],
+          __typename: 'User',
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Tasks Screen [User Portal]', () => {
+  // Mocks required for media queries for UserNavbar
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  test('Screen should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Tasks />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(screen.queryAllByText('Your assigned tasks')).not.toBe([]);
+  });
+});
diff --git a/src/screens/UserPortal/Tasks/Tasks.tsx b/src/screens/UserPortal/Tasks/Tasks.tsx
new file mode 100644
index 0000000000..af02593b38
--- /dev/null
+++ b/src/screens/UserPortal/Tasks/Tasks.tsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import UserNavbar from 'components/UserPortal/UserNavbar/UserNavbar';
+import TaskCard from 'components/UserPortal/TaskCard/TaskCard';
+import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
+import PaginationList from 'components/PaginationList/PaginationList';
+import { USER_TASKS_LIST } from 'GraphQl/Queries/Queries';
+import { useQuery } from '@apollo/client';
+import styles from './Tasks.module.css';
+import { useTranslation } from 'react-i18next';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+
+interface InterfaceTaskCardProps {
+  id: string;
+  title: string;
+  deadline: string;
+  description: string;
+  volunteers: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  }[];
+  creator: {
+    id: string;
+    firstName: string;
+    lastName: string;
+  };
+  event: {
+    id: string;
+    title: string;
+    organization: {
+      id: string;
+      name: string;
+      image: string | null;
+    };
+  };
+  createdAt: string;
+  completed: boolean;
+}
+
+export default function tasks(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userTasks',
+  });
+
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [tasks, setTasks] = React.useState([]);
+
+  const userId: string | null = localStorage.getItem('userId');
+
+  const { data: tasksData, loading: loadingTasks } = useQuery(USER_TASKS_LIST, {
+    variables: { id: userId },
+  });
+
+  /* istanbul ignore next */
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ): void => {
+    setPage(newPage);
+  };
+
+  /* istanbul ignore next */
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
+    const newRowsPerPage = event.target.value;
+
+    setRowsPerPage(parseInt(newRowsPerPage, 10));
+    setPage(0);
+  };
+
+  /* istanbul ignore next */
+  React.useEffect(() => {
+    if (tasksData) {
+      setTasks(tasksData.user.assignedTasks);
+    }
+  }, [tasksData]);
+
+  return (
+    <>
+      <UserNavbar />
+      <div className={`d-flex flex-row ${styles.containerHeight}`}>
+        <UserSidebar />
+        <div className={`${styles.colorLight} ${styles.mainContainer}`}>
+          <h3>{t('yourAssignedTasks')}</h3>
+          <div
+            className={`d-flex flex-column justify-content-between ${styles.content}`}
+          >
+            <div
+              className={`d-flex flex-column ${styles.gap} ${styles.paddingY}`}
+            >
+              {loadingTasks ? (
+                <div className={`d-flex flex-row justify-content-center`}>
+                  <HourglassBottomIcon /> <span>Loading...</span>
+                </div>
+              ) : (
+                <>
+                  {tasks && tasks.length > 0 ? (
+                    (rowsPerPage > 0
+                      ? tasks.slice(
+                          page * rowsPerPage,
+                          page * rowsPerPage + rowsPerPage
+                        )
+                      : /* istanbul ignore next */
+                        tasks
+                    ).map((task: any, index) => {
+                      const volunteers: any = task.volunteers.map(
+                        (volunteer: any) => {
+                          return {
+                            id: volunteer._id,
+                            firstName: volunteer.firstName,
+                            lastName: volunteer.lastName,
+                            email: volunteer.email,
+                          };
+                        }
+                      );
+
+                      const cardProps: InterfaceTaskCardProps = {
+                        title: task.title,
+                        id: task._id,
+                        description: task.description,
+                        deadline: task.deadline,
+                        volunteers,
+                        createdAt: task.createdAt,
+                        completed: task.completed,
+                        creator: {
+                          id: task.creator._id,
+                          firstName: task.creator.firstName,
+                          lastName: task.creator.lastName,
+                        },
+                        event: {
+                          id: task.event._id,
+                          title: task.event.title,
+                          organization: {
+                            id: task.event.organization._id,
+                            name: task.event.organization.name,
+                            image: task.event.organization.image,
+                          },
+                        },
+                      };
+
+                      return <TaskCard key={index} {...cardProps} />;
+                    })
+                  ) : (
+                    <span>{t('nothingToShow')}</span>
+                  )}
+                </>
+              )}
+            </div>
+            <table>
+              <tbody>
+                <tr>
+                  <PaginationList
+                    count={
+                      /* istanbul ignore next */
+                      tasks ? tasks.length : 0
+                    }
+                    rowsPerPage={rowsPerPage}
+                    page={page}
+                    onPageChange={handleChangePage}
+                    onRowsPerPageChange={handleChangeRowsPerPage}
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}