feat(web-admin): Update participants, organizations and events page (#…

…261) * Updated Organizations * Updated events * Updated participants * Updated participant format
IEDCMEC · Feb 3, 2024 · 84d4bfd · 84d4bfd
1 parent 19cc985
commit 84d4bfd
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 7 deletions.
diff --git a/...n/src/pages/organizations/[orgId]/events/[eventId]/participants/[participantId]/index.jsx b/...n/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
@@ -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
@@ -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
@@ -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%">