From 84d4bfdc2d86bf7970aad8bb87510c1f16b55ac5 Mon Sep 17 00:00:00 2001
From: adilmp1 <115640364+adilmp1@users.noreply.github.com>
Date: Sat, 3 Feb 2024 21:55:13 +0530
Subject: [PATCH] feat(web-admin): Update participants, organizations and
 events page (#261)

* Updated Organizations

* Updated events

* Updated participants

* Updated participant format
---
 .../participants/[participantId]/index.jsx    | 37 ++++++++++++++++++-
 .../events/[eventId]/participants/index.jsx   | 16 +++++++-
 .../organizations/[orgId]/events/index.jsx    | 17 ++++++++-
 .../src/pages/organizations/index.jsx         | 18 +++++++--
 4 files changed, 81 insertions(+), 7 deletions(-)

diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/[participantId]/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/[participantId]/index.jsx
index 59e22dcd..6d2e5158 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/[participantId]/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/[participantId]/index.jsx
@@ -56,7 +56,42 @@ export default function Events() {
           </Text>
         </Box>
         <Box width="100%" height="100%">
-          {JSON.stringify(participant)}
+          <Table variant="striped" colorScheme="">
+            <Tbody>
+              <Tr>
+                <Td>id</Td>
+                <Td>{participant.id}</Td>
+              </Tr>
+              <Tr>
+                <Td>createdAt</Td>
+                <Td>{participant.createdAt}</Td>
+              </Tr>
+              <Tr>
+                <Td>firstName</Td>
+                <Td>{participant.firstName}</Td>
+              </Tr>
+              <Tr>
+                <Td>lastName</Td>
+                <Td>{participant.lastName}</Td>
+              </Tr>
+              <Tr>
+                <Td>eventId</Td>
+                <Td>{participant.eventId}</Td>
+              </Tr>
+              <Tr>
+                <Td>organizationId</Td>
+                <Td>{participant.organizationId}</Td>
+              </Tr>
+              <Tr>
+                <Td>participantCheckIn</Td>
+                <Td>{JSON.stringify(participant.participantCheckIn)}</Td>
+              </Tr>
+              <Tr>
+                <Td>updatedAt</Td>
+                <Td>{participant.updatedAt}</Td>
+              </Tr>
+            </Tbody>
+          </Table>
         </Box>
       </Flex>
     </DashboardLayout>
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/index.jsx
index 42f10b54..4dec9d7c 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/index.jsx
@@ -13,6 +13,7 @@ import {
   Tr,
   TableContainer,
   Text,
+  Button,
 } from '@chakra-ui/react';
 
 import { useFetch } from '@/hooks/useFetch';
@@ -28,6 +29,9 @@ export default function Events() {
   const { loading, get } = useFetch();
 
   const [participants, setParticipants] = useState([]);
+  const handleClick = () => {
+    router.push(`/organizations/${orgId}/events/${eventId}/participants/new/`);
+  };
 
   useEffect(() => {
     const fetchParticipants = async () => {
@@ -50,10 +54,20 @@ export default function Events() {
         justifyContent="center"
         gap={8}
       >
-        <Box width="100%" p={8}>
+        <Box width="100%" p={8} display="flex" justifyContent="space-between">
           <Text fontSize="4xl" fontWeight="bold">
             Participants
           </Text>
+          <Button
+            padding="4"
+            minWidth="-moz-initial"
+            bgColor="rgb(128, 90, 213)"
+            color="white"
+            _hover={{ bgColor: 'rgb(100, 70, 183)' }}
+            onClick={handleClick}
+          >
+            Add Participant
+          </Button>
         </Box>
         <Box width="100%" height="100%">
           <TableContainer width="100%" height="100%">
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/index.jsx
index 2007c62b..8bc8d25f 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/index.jsx
@@ -13,6 +13,7 @@ import {
   Tr,
   TableContainer,
   Text,
+  Button,
 } from '@chakra-ui/react';
 
 import { useFetch } from '@/hooks/useFetch';
@@ -28,7 +29,9 @@ export default function Events() {
   const { loading, get } = useFetch();
 
   const [events, setEvents] = useState([]);
-
+  const handleClick = () => {
+    router.push(`/organizations/${orgId}/events/new/`);
+  };
   useEffect(() => {
     const fetchEvents = async () => {
       const { data, status } = await get(`/core/organizations/${orgId}/events`);
@@ -48,10 +51,20 @@ export default function Events() {
         justifyContent="center"
         gap={8}
       >
-        <Box width="100%" p={8}>
+        <Box width="100%" p={8} display="flex" justifyContent="space-between">
           <Text fontSize="4xl" fontWeight="bold">
             Events
           </Text>
+          <Button
+            padding="4"
+            minWidth="-moz-initial"
+            bgColor="rgb(128, 90, 213)"
+            color="white"
+            _hover={{ bgColor: 'rgb(100, 70, 183)' }}
+            onClick={handleClick}
+          >
+            Add Event
+          </Button>
         </Box>
         <Box width="100%" height="100%">
           <TableContainer width="100%" height="100%">
diff --git a/apps/web-admin/src/pages/organizations/index.jsx b/apps/web-admin/src/pages/organizations/index.jsx
index f2dfe8f8..9cf6aded 100644
--- a/apps/web-admin/src/pages/organizations/index.jsx
+++ b/apps/web-admin/src/pages/organizations/index.jsx
@@ -1,5 +1,4 @@
 import { useRouter } from 'next/router';
-
 import {
   Box,
   Flex,
@@ -13,6 +12,7 @@ import {
   Tr,
   TableContainer,
   Text,
+  Button,
 } from '@chakra-ui/react';
 
 import { useFetch } from '@/hooks/useFetch';
@@ -36,7 +36,9 @@ export default function Organizations() {
     };
     fetchOrganizations();
   }, []);
-
+  const handleClick = () => {
+    router.push('organizations/new');
+  };
   return (
     <DashboardLayout>
       <Flex
@@ -47,10 +49,20 @@ export default function Organizations() {
         justifyContent="center"
         gap={8}
       >
-        <Box width="100%" p={8}>
+        <Box width="100%" p={8} display="flex" justifyContent="space-between">
           <Text fontSize="4xl" fontWeight="bold">
             Organizations
           </Text>
+          <Button
+            padding="4"
+            minWidth="-moz-initial"
+            bgColor="rgb(128, 90, 213)"
+            color="white"
+            _hover={{ bgColor: 'rgb(100, 70, 183)' }}
+            onClick={handleClick}
+          >
+            Add Organization
+          </Button>
         </Box>
         <Box width="100%" height="100%">
           <TableContainer width="100%" height="100%">