From 62be97696430449f4e370291d334f93fecbf7429 Mon Sep 17 00:00:00 2001
From: Allen Shibu <93600615+alllenshibu@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:20:28 +0000
Subject: [PATCH] fix: A lot of urgent stuff

---
 apps/core-admin/src/controllers/attributes.ts |  50 +++++-
 .../src/controllers/participants.ts           | 113 ++++++-------
 apps/core-admin/src/routes.ts                 |  22 ++-
 .../web-admin/src/layouts/DashboardLayout.jsx |   4 -
 .../attributes/[attributeId]/index.jsx        | 106 +++++++++++-
 .../events/[eventId]/attributes/new/index.jsx |  64 ++++----
 .../[orgId]/events/[eventId]/index.jsx        |  51 +++++-
 .../participants/[participantId]/index.jsx    | 152 ++++++++++--------
 .../[eventId]/participants/check-in/index.jsx |   2 +-
 .../events/[eventId]/participants/index.jsx   |   2 +-
 .../[eventId]/participants/new/index.jsx      |   2 +-
 .../participants/new/upload-csv/index.jsx     |  22 ++-
 .../src/pages/organizations/[orgId]/index.jsx |   4 +-
 .../organizations/[orgId]/members/index.jsx   |  32 +---
 .../src/pages/organizations/index.jsx         |  46 +-----
 apps/web-admin/src/pages/settings/index.jsx   |   2 -
 16 files changed, 420 insertions(+), 254 deletions(-)

diff --git a/apps/core-admin/src/controllers/attributes.ts b/apps/core-admin/src/controllers/attributes.ts
index 9a06a8f3..5d02bccb 100644
--- a/apps/core-admin/src/controllers/attributes.ts
+++ b/apps/core-admin/src/controllers/attributes.ts
@@ -28,7 +28,7 @@ export const getAttributeById = async (req: Request, res: Response) => {
   try {
     const { orgId, eventId, attributeId } = req?.params;
 
-    const attribute = await prisma.attributes.findMany({
+    const attribute = await prisma.attributes.findFirst({
       where: {
         organizationId: orgId,
         eventId,
@@ -54,6 +54,29 @@ export const getAttributeById = async (req: Request, res: Response) => {
   }
 };
 
+export const editAttribute = async (req: Request, res: Response) => {
+  try {
+    const { orgId, eventId, attributeId } = req?.params;
+    const { name } = req?.body;
+
+    if (!name) return res.status(400).json({ error: 'Name is required' });
+
+    const updatedAttribute = await prisma.attributes.update({
+      where: {
+        id: attributeId,
+      },
+      data: {
+        name,
+      },
+    });
+
+    return res.status(200).json({ updatedAttribute });
+  } catch (err: any) {
+    console.error(err);
+    return res.status(500).json({ error: 'Something went wrong' });
+  }
+};
+
 export const addNewAttribute = async (req: Request, res: Response) => {
   try {
     const { orgId, eventId } = req?.params;
@@ -73,3 +96,28 @@ export const addNewAttribute = async (req: Request, res: Response) => {
     return res.status(500).json({ error: 'Something went wrong' });
   }
 };
+
+export const getAttributeParticipants = async (req: Request, res: Response) => {
+  try {
+    const { orgId, eventId, attributeId } = req?.params;
+
+    const participants = await prisma.participant.findMany({
+      where: {
+        eventId,
+        organizationId: orgId,
+      },
+      include: {
+        participantAttributes: {
+          where: {
+            attributeId,
+          },
+        },
+      },
+    });
+
+    return res.status(200).json({ participants });
+  } catch (err: any) {
+    console.error(err);
+    return res.status(500).json({ error: 'Something went wrong' });
+  }
+};
diff --git a/apps/core-admin/src/controllers/participants.ts b/apps/core-admin/src/controllers/participants.ts
index e1eb22a1..0192a744 100644
--- a/apps/core-admin/src/controllers/participants.ts
+++ b/apps/core-admin/src/controllers/participants.ts
@@ -10,6 +10,10 @@ export const addNewParticipant = async (req: Request, res: Response) => {
     if (isBulk === 'true') {
       const { participants } = req?.body;
 
+      if (!participants || participants.length === 0) {
+        return res.status(400).json({ error: 'No participants provided' });
+      }
+
       const newParticipants = await prisma.participant.createMany({
         data: participants.map((p: any) => {
           return {
@@ -45,71 +49,36 @@ export const addNewParticipant = async (req: Request, res: Response) => {
   }
 };
 
-export const addNewParticipantInBulk = async (req: Request, res: Response) => {
+export const editParticipant = async (req: Request, res: Response) => {
   try {
-    const { orgId, eventId } = req?.params;
-    const { participants } = req?.body;
+    const { orgId, eventId, participantId } = req?.params;
+    const { firstName, lastName } = req?.body;
 
-    const newParticipants = await prisma.participant.createMany({
-      data: participants.map((participant: any) => {
-        return {
-          firstName: participant.firstName,
-          lastName: participant.lastName,
-          organizationId: orgId,
-          eventId,
-        };
-      }),
+    if (!firstName || !lastName) {
+      return res.status(400).json({ error: 'First name and last name are required' });
+    }
+
+    const updatedParticipant = await prisma.participant.update({
+      where: {
+        id: participantId,
+      },
+      data: {
+        firstName,
+        lastName,
+      },
     });
-    return res.status(200).json(newParticipants);
+
+    if (!updatedParticipant) {
+      return res.status(500).json({ error: 'Something went wrong' });
+    }
+
+    return res.status(200).json({ updatedParticipant });
   } catch (err: any) {
     console.error(err);
     return res.status(500).json({ error: 'Something went wrong' });
   }
 };
 
-// export const addParticipantsInBulk = async (req: Request, res: Response) => {
-//   try {
-//     const { orgId, eventId } = req?.params;
-//     const { participants } = req?.body;
-
-//     const newParticipants = [];
-//     const failedParticipants = [];
-
-//     for (const participant of participants) {
-//       try {
-//         const newParticipant = await prisma.participant.create({
-//           data: {
-//             firstName: participant.firstName,
-//             lastName: participant.lastName,
-//             email: participant.email,
-//             phone: participant.phoneNumber,
-//             organizationId: orgId,
-//             eventId,
-//           },
-//         });
-//         newParticipants.push(newParticipant);
-//       } catch (error) {
-//         console.error(
-//           `Failed to add participant: ${participant.firstName} ${participant.lastName}`,
-//         );
-//         failedParticipants.push(participant);
-//       }
-//     }
-
-//     if (failedParticipants.length > 0) {
-//       return res.status(201).json({
-//         message: 'Some participants were not added',
-//         success: newParticipants,
-//         failed: failedParticipants,
-//       });
-//     }
-//     return res.status(200).json({ newParticipants });
-//   } catch (err: any) {
-//     console.error(err);
-//     return res.status(500).json({ error: 'Something went wrong' });
-//   }
-// };
-
 export const getAllParticipants = async (req: Request, res: Response) => {
   try {
     const { orgId, eventId } = req?.params;
@@ -298,6 +267,34 @@ export const setParticipantAttribute = async (req: Request, res: Response) => {
   }
 };
 
+export const updateParticipantAttribute = async (req: Request, res: Response) => {
+  try {
+    const { orgId, eventId, participantId, attributeId } = req?.params;
+    const { value } = req?.body;
+
+    const participantAttribute = await prisma.participantAttributes.update({
+      where: {
+        participantId_attributeId: {
+          participantId,
+          attributeId,
+        },
+      },
+      data: {
+        value,
+      },
+    });
+
+    if (!participantAttribute) {
+      return res.status(500).json({ error: 'Something went wrong' });
+    }
+
+    return res.status(200).json({ participantAttribute });
+  } catch (err: any) {
+    console.error(err);
+    return res.status(500).json({ error: 'Something went wrong' });
+  }
+};
+
 export const checkInParticipant = async (req: Request, res: Response) => {
   try {
     const userId = req?.auth?.payload?.sub;
@@ -306,6 +303,10 @@ export const checkInParticipant = async (req: Request, res: Response) => {
 
     const { checkedInAt } = req?.body;
 
+    if (!checkedInAt) {
+      return res.status(400).json({ error: 'checkedInAt is required' });
+    }
+
     const participantAlreadyCheckedIn = await prisma.participantCheckIn.findFirst({
       where: {
         participantId,
diff --git a/apps/core-admin/src/routes.ts b/apps/core-admin/src/routes.ts
index 520161f9..eb5f79a5 100644
--- a/apps/core-admin/src/routes.ts
+++ b/apps/core-admin/src/routes.ts
@@ -15,9 +15,16 @@ import {
   getParticipantAttributes,
   setParticipantAttribute,
   checkOutParticipant,
-  addNewParticipantInBulk,
+  editParticipant,
+  updateParticipantAttribute,
 } from './controllers/participants';
-import { addNewAttribute, getAllAttributes, getAttributeById } from './controllers/attributes';
+import {
+  addNewAttribute,
+  editAttribute,
+  getAllAttributes,
+  getAttributeById,
+  getAttributeParticipants,
+} from './controllers/attributes';
 import { fetchAccountDetails, updateAccountDetails } from './controllers/users';
 
 const router: Router = express.Router();
@@ -45,7 +52,7 @@ router.post('/organizations/:orgId/events', createNewEvent);
 
 router.get('/organizations/:orgId/events/:eventId/participants', getAllParticipants);
 router.post('/organizations/:orgId/events/:eventId/participants', addNewParticipant);
-router.post('/organizations/:orgId/events/:eventId/bulkParticipants', addNewParticipantInBulk);
+router.put('/organizations/:orgId/events/:eventId/participants/:participantId', editParticipant);
 
 router.get(
   '/organizations/:orgId/events/:eventId/participants/check-in',
@@ -69,9 +76,18 @@ router.post(
   '/organizations/:orgId/events/:eventId/participants/:participantId/attributes',
   setParticipantAttribute,
 );
+router.put(
+  '/organizations/:orgId/events/:eventId/participants/:participantId/attributes/:attributeId',
+  updateParticipantAttribute,
+);
 
 router.get('/organizations/:orgId/events/:eventId/attributes', getAllAttributes);
 router.get('/organizations/:orgId/events/:eventId/attributes/:attributeId', getAttributeById);
+router.get(
+  '/organizations/:orgId/events/:eventId/attributes/:attributeId/participants',
+  getAttributeParticipants,
+);
+router.put('/organizations/:orgId/events/:eventId/attributes/:attributeId', editAttribute);
 router.post('/organizations/:orgId/events/:eventId/attributes', addNewAttribute);
 
 export default router;
diff --git a/apps/web-admin/src/layouts/DashboardLayout.jsx b/apps/web-admin/src/layouts/DashboardLayout.jsx
index e2f4ade1..d6a589b9 100644
--- a/apps/web-admin/src/layouts/DashboardLayout.jsx
+++ b/apps/web-admin/src/layouts/DashboardLayout.jsx
@@ -7,10 +7,6 @@ export default function DashboardLayout({ children }) {
   const [isMobile] = useMediaQuery('(max-width: 768px)');
   const [isSidebarOpen, setSidebarOpen] = useState(isMobile);
 
-  const toggleSidebar = () => {
-    setSidebarOpen(!isSidebarOpen);
-  };
-
   return (
     <Box
       sx={{
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/[attributeId]/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/[attributeId]/index.jsx
index 18c6083b..3fc75176 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/[attributeId]/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/[attributeId]/index.jsx
@@ -3,6 +3,12 @@ import { useRouter } from 'next/router';
 import {
   Box,
   Flex,
+  Card,
+  CardBody,
+  FormControl,
+  FormLabel,
+  Input,
+  Button,
   Table,
   TableCaption,
   Tbody,
@@ -25,19 +31,51 @@ export default function Events() {
 
   const { orgId, eventId, attributeId } = router.query;
 
-  const { loading, get } = useFetch();
+  const { loading, get, put } = useFetch();
 
   const [attribute, setAttribute] = useState({});
+  const [participants, setParticipants] = useState([
+    {
+      participantAttributes: [{}],
+    },
+  ]);
+
+  const handleSubmit = async () => {
+    const { status } = await put(
+      `/core/organizations/${orgId}/events/${eventId}/attributes/${attributeId}`,
+      {},
+      { name: attribute.name },
+    );
+
+    if (status === 200) {
+      alert('Attribute updated successfully');
+    } else {
+      alert('Failed to update attribute');
+    }
+  };
 
   useEffect(() => {
     const fetchAttribute = async () => {
       const { data, status } = await get(
         `/core/organizations/${orgId}/events/${eventId}/attributes/${attributeId}`,
       );
-      setAttribute(data.attribute || []);
+      setAttribute(data.attribute || {});
       console.log(data);
     };
+    const fetchAttributeParticipants = async () => {
+      const { data, status } = await get(
+        `/core/organizations/${orgId}/events/${eventId}/attributes/${attributeId}/participants`,
+      );
+      setParticipants(
+        data.participants || [
+          {
+            participantAttributes: [{}],
+          },
+        ],
+      );
+    };
     fetchAttribute();
+    fetchAttributeParticipants();
   }, [orgId, eventId, attributeId]);
 
   return (
@@ -47,7 +85,7 @@ export default function Events() {
         height="100%"
         width="100%"
         alignItems="center"
-        justifyContent="center"
+        justifyContent="start"
         gap={8}
       >
         <Box width="100%" p={8}>
@@ -55,9 +93,65 @@ export default function Events() {
             Attribute Details
           </Text>
         </Box>
-        <Box width="100%" height="100%">
-          {JSON.stringify(attribute)}
-        </Box>
+        <Flex width="100%" height="auto">
+          <Flex flexDirection="row" justifyContent="start" alignItems="center" gap={4}>
+            <Input
+              type="text"
+              name="name"
+              minWidth={500}
+              fontWeight={600}
+              value={attribute.name}
+              onChange={(e) => {
+                setAttribute({ ...attribute, name: e.target.value });
+              }}
+            />
+            <Button
+              type="submit"
+              width="100%"
+              isLoading={loading}
+              onClick={handleSubmit}
+              loadingText="Please Wait"
+            >
+              Edit
+            </Button>
+          </Flex>
+        </Flex>
+        <TableContainer width="100%" height="100%">
+          <Table variant="simple">
+            <TableCaption>Participants</TableCaption>
+            <Thead>
+              <Tr>
+                <Th>ID</Th>
+                <Th>First Name</Th>
+                <Th>Last Name</Th>
+                <Th>Value</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {participants.map((participant) => (
+                <Tr
+                  key={participant?.id}
+                  onClick={() => {
+                    router.push(
+                      `/organizations/${orgId}/events/${eventId}/participants/${participant?.id}`,
+                    );
+                  }}
+                  cursor="pointer"
+                >
+                  <Td>{participant?.id}</Td>
+                  <Td>{participant?.firstName}</Td>
+                  <Td>{participant?.lastName}</Td>
+                  <Td>{participant?.participantAttributes[0]?.value || 'null'}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+            <Tfoot>
+              <Tr>
+                <Th>{participants.length} participants</Th>
+              </Tr>
+            </Tfoot>
+          </Table>
+        </TableContainer>
       </Flex>
     </DashboardLayout>
   );
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/new/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/new/index.jsx
index 49ebb393..9d897fbe 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/new/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/new/index.jsx
@@ -49,41 +49,43 @@ export default function NewOrganization() {
         direction="column"
         height="100%"
         width="100%"
-        alignItems="center"
-        justifyContent="center"
+        alignItems="start"
+        justifyContent="start"
         gap={8}
       >
-        <Box textAlign="center">
-          <Text fontSize="3xl" fontWeight="bold">
-            Add new attribute
+        <Box width="100%" p={8} display="flex" justifyContent="space-between">
+          <Text fontSize="4xl" fontWeight="bold">
+            Add New Attribute
           </Text>
         </Box>
-        <Card width="100%" maxWidth="400px" height="auto">
-          <CardBody>
-            <form onSubmit={handleSubmit}>
-              <FormControl isRequired my={4}>
-                <FormLabel>Name</FormLabel>
-                <Input
-                  type="text"
-                  name="name"
-                  value={name}
-                  onChange={(e) => {
-                    setName(e.target.value);
-                  }}
-                />
-              </FormControl>
-              <Button
-                type="submit"
-                width="100%"
-                my="4"
-                isLoading={loading}
-                loadingText="Please Wait"
-              >
-                Add
-              </Button>
-            </form>
-          </CardBody>
-        </Card>
+        <Flex width="100%" justifyContent="center">
+          <Card width="100%" maxWidth="400px" height="auto">
+            <CardBody>
+              <form onSubmit={handleSubmit}>
+                <FormControl isRequired my={4}>
+                  <FormLabel>Name</FormLabel>
+                  <Input
+                    type="text"
+                    name="name"
+                    value={name}
+                    onChange={(e) => {
+                      setName(e.target.value);
+                    }}
+                  />
+                </FormControl>
+                <Button
+                  type="submit"
+                  width="100%"
+                  my="4"
+                  isLoading={loading}
+                  loadingText="Please Wait"
+                >
+                  Add
+                </Button>
+              </form>
+            </CardBody>
+          </Card>
+        </Flex>
       </Flex>
     </DashboardLayout>
   );
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/index.jsx
index 1a642e5a..2ee7b14d 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/index.jsx
@@ -1,12 +1,57 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import DashboardLayout from '@/layouts/DashboardLayout';
+
 export default function Event() {
   const router = useRouter();
 
   const { orgId, eventId } = router.query;
 
-  useEffect(() => {
-    router.push(`/organizations/${orgId}/events/${eventId}/participants`);
-  }, [orgId, eventId]);
+  // useEffect(() => {
+  //   router.push(`/organizations/${orgId}/events/${eventId}/participants`);
+  // }, [orgId, eventId]);
+
+  return (
+    <DashboardLayout>
+      <Flex
+        direction="column"
+        height="100%"
+        width="100%"
+        alignItems="center"
+        justifyContent="center"
+        gap={8}
+      >
+        <Box width="100%" p={8} display="flex" justifyContent="space-between">
+          <Text fontSize="4xl" fontWeight="bold">
+            {eventId}
+          </Text>
+        </Box>
+        <Flex width="100%" height="100%" gap={4}>
+          <Button
+            onClick={() => {
+              router.push(`/organizations/${orgId}/events/${eventId}/participants`);
+            }}
+          >
+            Participants
+          </Button>
+          <Button
+            onClick={() => {
+              router.push(`/organizations/${orgId}/events/${eventId}/attributes`);
+            }}
+          >
+            Attributes
+          </Button>
+          <Button
+            onClick={() => {
+              router.push(`/organizations/${orgId}/events/${eventId}/participants/check-in`);
+            }}
+          >
+            Check-in
+          </Button>
+        </Flex>
+      </Flex>
+    </DashboardLayout>
+  );
 }
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 89df2615..11d9fbf5 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
@@ -5,6 +5,7 @@ import {
   Flex,
   FormControl,
   FormLabel,
+  Button,
   Input,
   Table,
   TableCaption,
@@ -33,25 +34,24 @@ export default function Events() {
 
   const { orgId, eventId, participantId } = router.query;
 
-  const { loading, get } = useFetch();
+  const { loading, get, put } = useFetch();
 
   const [participant, setParticipant] = useState({});
   const [participantAttributes, setParticipantAttributes] = useState([]);
 
-  const attributeColumns = [
-    {
-      field: 'name',
-      headerName: 'Name',
-      width: 150,
-      valueGetter: (params) => params.row.attribute?.name,
-    },
-    {
-      field: 'value',
-      headerName: 'Value',
-      width: 150,
-      valueGetter: (params) => params.value || 'null',
-    },
-  ];
+  const handleSubmit = async () => {
+    const { status } = await put(
+      `/core/organizations/${orgId}/events/${eventId}/participants/${participantId}`,
+      {},
+      { firstName: participant.firstName, lastName: participant.lastName },
+    );
+
+    if (status === 200) {
+      alert('Participant updated successfully');
+    } else {
+      alert('Failed to update participant');
+    }
+  };
 
   useEffect(() => {
     const fetchParticipant = async () => {
@@ -75,60 +75,76 @@ export default function Events() {
         gap={8}
       >
         <Box width="100%" p={8}>
-          <Text fontSize="4xl" fontWeight="bold">
-            Participant Details
-          </Text>
-        </Box>
-        <Box width="100%" height="100%">
-          <Text>ID: {participant.id}</Text>
-          <FormControl
-            my={4}
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              gap: 4,
-            }}
-          >
-            <FormLabel>First Name</FormLabel>
-            <Input type="text" name="participant.firstName" value={participant.firstName} />
-          </FormControl>
-          <FormControl
-            my={4}
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              gap: 4,
-            }}
-          >
-            <FormLabel>Last Name</FormLabel>
-            <Input type="text" name="participant.lastName" value={participant.lastName} />
-          </FormControl>
-          <Text fontSize="3xl">Attributes</Text>
-
-          <ThemeProvider theme={MuiTheme}>
-            <DataGrid
-              rows={participantAttributes}
-              columns={attributeColumns}
-              slotProps={{
-                toolbar: {
-                  showQuickFilter: true,
-                  quickFilterProps: { debounceMs: 500 },
-                },
-              }}
-              slots={{
-                toolbar: GridToolbar,
-              }}
-              getRowId={(row) => {
-                return row.attributeId;
-              }}
-              autoHeight
-            />
-          </ThemeProvider>
+          <Flex justifyContent="space-between" alignItems="center">
+            <Text fontSize="4xl" fontWeight="bold">
+              Participant Details
+            </Text>
+            <Button onClick={handleSubmit}>Save</Button>
+          </Flex>
         </Box>
+        <Flex width="100%" height="100%" flexDirection="column" gap={4}>
+          <Flex flexDirection="column" justifyContent="center" alignItems="start" gap={4}>
+            <Text>ID: {participant.id}</Text>
+            <Flex alignItems="center" gap={4}>
+              <Text fontWeight={500}>First Name</Text>
+              <Input
+                type="text"
+                name="firstName"
+                width="auto"
+                value={participant.firstName}
+                onChange={(e) => {
+                  setParticipant({ ...participant, firstName: e.target.value });
+                }}
+              />
+            </Flex>
+            <Flex alignItems="center" gap={4}>
+              <Text fontWeight={500}>Last Name</Text>
+              <Input
+                type="text"
+                name="lastName"
+                width="auto"
+                value={participant.lastName}
+                onChange={(e) => {
+                  setParticipant({ ...participant, lastName: e.target.value });
+                }}
+              />
+            </Flex>
+          </Flex>
+          <Text fontSize="3xl" fontWeight={500}>
+            Attributes
+          </Text>
+          <TableContainer width="100%" height="100%">
+            <Table variant="simple">
+              <TableCaption>Attributes</TableCaption>
+              <Thead>
+                <Tr>
+                  <Th>ID</Th>
+                  <Th>Name</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {participantAttributes.map((participantAttribute) => (
+                  <Tr key={participantAttribute?.id}>
+                    <Td>{participantAttribute?.attribute?.name}</Td>
+                    <Td>
+                      <Input
+                        type="text"
+                        name="lastName"
+                        width="auto"
+                        value={participantAttribute?.value}
+                      />
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+              <Tfoot>
+                <Tr>
+                  <Th>{participantAttributes.length} attributes</Th>
+                </Tr>
+              </Tfoot>
+            </Table>
+          </TableContainer>
+        </Flex>
       </Flex>
     </DashboardLayout>
   );
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/check-in/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/check-in/index.jsx
index 12cb1789..4f123e2f 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/check-in/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/check-in/index.jsx
@@ -47,7 +47,7 @@ export default function Events() {
         height="100%"
         width="100%"
         alignItems="center"
-        justifyContent="center"
+        justifyContent="start "
         gap={8}
       >
         <Box width="100%" p={8}>
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 978ab25f..38f8a78c 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
@@ -32,7 +32,7 @@ export default function Events() {
 
   const [participants, setParticipants] = useState([]);
   const columns = [
-    { field: 'id', headerName: 'ID', width: 150 },
+    { field: 'id', headerName: 'ID', width: 300 },
     { field: 'firstName', headerName: 'First Name', width: 200 },
     { field: 'lastName', headerName: 'Last Name', width: 200 },
   ];
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/index.jsx
index 614c22a6..1764a79f 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/index.jsx
@@ -64,7 +64,7 @@ export default function NewOrganization() {
           <CardBody>
             <form onSubmit={handleSubmit}>
               <FormControl isRequired my={4}>
-                <FormLabel>Name</FormLabel>
+                <FormLabel>First Name</FormLabel>
                 <Input
                   type="text"
                   name="firstName"
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/upload-csv/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/upload-csv/index.jsx
index 7c5172a1..362b2fb7 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/upload-csv/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/upload-csv/index.jsx
@@ -5,7 +5,7 @@ import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 import { useFetch } from '@/hooks/useFetch';
 
 import { useRouter } from 'next/router';
-import { Flex, Button } from '@chakra-ui/react';
+import { Flex, Button, Box, Text } from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import { ThemeProvider, createTheme } from '@mui/material';
@@ -68,10 +68,22 @@ export default function NewOrganization() {
         height="100%"
         width="100%"
         alignItems="center"
-        justifyContent="center"
+        justifyContent="start"
         gap={8}
       >
-        <div>
+        <Box width="100%" p={8} display="flex" justifyContent="space-between">
+          <Text fontSize="4xl" fontWeight="bold">
+            Participants
+          </Text>
+        </Box>
+        <Box
+          height="100%"
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          gap={8}
+        >
           <h1>CSV Uploader</h1>
           <input type="file" accept=".csv" onChange={handleFileUpload} />
           {csvData && (
@@ -92,8 +104,8 @@ export default function NewOrganization() {
               />
             </ThemeProvider>
           )}
-        </div>
-        <Button onClick={handleSubmit}>Confirm and Add</Button>
+          <Button onClick={handleSubmit}>Confirm and Add</Button>
+        </Box>
       </Flex>
     </DashboardLayout>
   );
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/index.jsx
index 432b9057..36164a06 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/index.jsx
@@ -24,7 +24,7 @@ export default function Organization() {
             {orgId}
           </Text>
         </Box>
-        <Box width="100%" height="100%">
+        <Flex width="100%" height="100%" gap={4}>
           <Button
             onClick={() => {
               router.push(`/organizations/${orgId}/events`);
@@ -39,7 +39,7 @@ export default function Organization() {
           >
             Members
           </Button>
-        </Box>
+        </Flex>
       </Flex>
     </DashboardLayout>
   );
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/members/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/members/index.jsx
index 204a8b9c..f6147ec0 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/members/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/members/index.jsx
@@ -37,7 +37,7 @@ export default function Members() {
     {
       field: 'email',
       headerName: 'Email',
-      width: 150,
+      width: 250,
       valueGetter: (params) => params.row.user.email,
     },
     {
@@ -110,36 +110,6 @@ export default function Members() {
               autoHeight
             />
           </ThemeProvider>
-          {/*<TableContainer width="100%" height="100%">
-            <Table variant="simple">
-              <TableCaption>members</TableCaption>
-              <Thead>
-                <Tr>
-                  <Th>ID</Th>
-                  <Th>Name</Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {members.map((event) => (
-                  <Tr
-                    key={event?.id}
-                    onClick={() => {
-                      router.push(`/organizations/${orgId}/members/${event?.id}`);
-                    }}
-                    cursor="pointer"
-                  >
-                    <Td>{event?.id}</Td>
-                    <Td>{event?.name}</Td>
-                  </Tr>
-                ))}
-              </Tbody>
-              <Tfoot>
-                <Tr>
-                  <Th>{members.length} members</Th>
-                </Tr>
-              </Tfoot>
-            </Table>
-                  </TableContainer>*/}
         </Box>
       </Flex>
     </DashboardLayout>
diff --git a/apps/web-admin/src/pages/organizations/index.jsx b/apps/web-admin/src/pages/organizations/index.jsx
index 47b21231..8ddc56c1 100644
--- a/apps/web-admin/src/pages/organizations/index.jsx
+++ b/apps/web-admin/src/pages/organizations/index.jsx
@@ -32,9 +32,6 @@ export default function Organizations() {
   const { loading, get } = useFetch();
 
   const [organizations, setOrganizations] = useState([]);
-  const handleRowClick = (row) => {
-    router.push(`/organizations/${row.id}/events`);
-  };
 
   const columns = [
     { field: 'id', headerName: 'ID', width: 150 },
@@ -62,9 +59,7 @@ export default function Organizations() {
     };
     fetchOrganizations();
   }, []);
-  const handleClick = () => {
-    router.push('organizations/new');
-  };
+
   return (
     <DashboardLayout>
       <Flex
@@ -85,7 +80,9 @@ export default function Organizations() {
             bgColor="rgb(128, 90, 213)"
             color="white"
             _hover={{ bgColor: 'rgb(100, 70, 183)' }}
-            onClick={handleClick}
+            onClick={() => {
+              router.push('organizations/new');
+            }}
           >
             Add Organization
           </Button>
@@ -115,41 +112,12 @@ export default function Organizations() {
                   cursor: 'pointer',
                 },
               }}
-              onRowClick={handleRowClick}
+              onRowClick={(row) => {
+                router.push(`/organizations/${row.id}/events`);
+              }}
             />
           </ThemeProvider>
         </Box>
-        {/* <TableContainer width="100%" height="100%">
-          <Table variant="simple">
-            <TableCaption>Organizations</TableCaption>
-            <Thead>
-              <Tr>
-                <Th>ID</Th>
-                <Th>Name</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {organizations.map((organization) => (
-                <Tr
-                  key={organization?.id}
-                  onClick={() => {
-                    router.push(`/organizations/${organization.id}`);
-                  }}
-                  cursor="pointer"
-                >
-                  <Td>{organization?.id}</Td>
-                  <Td>{organization?.name}</Td>
-                </Tr>
-              ))}
-            </Tbody>
-            <Tfoot>
-              <Tr>
-                <Th>{organizations.length} organizations</Th>
-              </Tr>
-            </Tfoot>
-          </Table>
-        </TableContainer> */}
-        {/* </Box> */}
       </Flex>
     </DashboardLayout>
   );
diff --git a/apps/web-admin/src/pages/settings/index.jsx b/apps/web-admin/src/pages/settings/index.jsx
index 32983cfb..9c4ff3f8 100644
--- a/apps/web-admin/src/pages/settings/index.jsx
+++ b/apps/web-admin/src/pages/settings/index.jsx
@@ -61,7 +61,6 @@ export default function Settings() {
             <Text fontSize="2xl" fontWeight="bold">
               Account Settings
             </Text>
-            {JSON.stringify(accountDetails)}
             <Box width="100%" display="flex" flexDirection="column" justifyContent="start" gap={4}>
               <FormControl
                 isRequired
@@ -84,7 +83,6 @@ export default function Settings() {
                   }}
                 />
               </FormControl>
-
               <FormControl
                 isRequired
                 my={4}