From 11071451a3a1aa0a4c964578e89acf2c201d1145 Mon Sep 17 00:00:00 2001
From: J ATULYA <109218299+jatulya@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:24:18 +0530
Subject: [PATCH] Events Navbar persistent (#579)

---
 .../events/[eventId]/attributes/index.jsx     |  4 +-
 .../[orgId]/events/[eventId]/extras/index.jsx |  2 +
 .../pages/[orgId]/events/[eventId]/index.jsx  |  9 +-
 .../events/[eventId]/navigationmenu.jsx       | 91 +++++++++++++++++++
 .../[eventId]/participants/check-in/index.jsx |  4 +
 .../events/[eventId]/participants/index.jsx   |  2 +
 6 files changed, 108 insertions(+), 4 deletions(-)
 create mode 100644 apps/web-admin/src/pages/[orgId]/events/[eventId]/navigationmenu.jsx

diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx
index dca351ac..369b7175 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx
@@ -105,6 +105,7 @@ import { useAlert } from '@/hooks/useAlert';
 import DataDisplay from '@/components/DataDisplay';
 import NewAttributeForm from './new';
 import useWrapper from '@/hooks/useWrapper';
+import NavigationMenu from '../navigationmenu';
 
 const columns = [
   { field: 'name', headerName: 'Name', width: 200 },
@@ -149,12 +150,13 @@ export default function Attributes() {
       headerButton={
         <>
           <Button onClick={onOpen} isLoading={loading}>
-            Add Attribute
+             Attribute
           </Button>
         </>
       }
       debugInfo={JSON.stringify(attributes)}
     >
+      <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay
         loading={loading}
         columns={columns}
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx
index 0039df07..78efe1ce 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx
@@ -111,6 +111,7 @@ import { useAlert } from '@/hooks/useAlert';
 import DataDisplay from '@/components/DataDisplay';
 import NewExtraForm from './new'; // Import the form component
 import useWrapper from '@/hooks/useWrapper';
+import NavigationMenu from '../navigationmenu';
 
 const columns = [
   { field: 'name', headerName: 'Name', width: 200 },
@@ -166,6 +167,7 @@ export default function Extras() {
       }
       debugInfo={extras}
     >
+      <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay
         loading={loading}
         columns={columns}
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/index.jsx
index 2e87d2cd..8d26ab7a 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/index.jsx
@@ -28,6 +28,7 @@ import DashboardLayout from '@/layouts/DashboardLayout';
 // import { useFetch } from '@/hooks/useFetch';
 import { useAlert } from '@/hooks/useAlert';
 import useWrapper from '@/hooks/useWrapper';
+import NavigationMenu from './navigationmenu';
 
 export default function EventById() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -134,7 +135,7 @@ export default function EventById() {
       }
     >
       <Flex flexDirection="column" height="100%" px={{ base: 4, md: 0 }}>
-        <Box
+        {/*<Box
           width="100%"
           backgroundColor="#e6f7f5"
           py={2}
@@ -185,7 +186,9 @@ export default function EventById() {
               </Button>
             ))}
           </Flex>
-        </Box>
+        </Box> */}
+
+        <NavigationMenu orgId={orgId} eventId={eventId} />
 
         <Flex
           height="100%"
@@ -196,7 +199,7 @@ export default function EventById() {
           py={6}
         >
           <Text fontSize={{ base: 'xl', md: '3xl' }}>
-            Total Participants:{' '}
+             Participants:{' '}
             <span style={{ fontWeight: 'bold' }}>{event.numberOfParticipants}</span>
           </Text>
 
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/navigationmenu.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/navigationmenu.jsx
new file mode 100644
index 00000000..5b28c814
--- /dev/null
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/navigationmenu.jsx
@@ -0,0 +1,91 @@
+/*
+ // the idea with menu
+import { Menu, MenuButton, MenuList, MenuItem, Button } from '@chakra-ui/react';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import { useRouter } from 'next/router';
+
+const NavigationMenu = ({ orgId, eventId }) => {
+  const router = useRouter();
+  const menuLabels = ['Participants', 'Participants Check In', 'Attributes', 'Extras'];
+  console.log("navigation menu loaded")
+  return (
+    <>
+    <Menu>
+      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+        Go to ...
+      </MenuButton>
+      <MenuList>
+        {menuLabels.map((label) => {
+            const path = `/${orgId}/events/${eventId}/${
+            label === 'Participants Check In' ? 'participants/check-in' : label.toLowerCase()
+            }`;
+            return (
+            <MenuItem key={label} onClick={() => router.push(path)}>
+                {label}
+            </MenuItem>
+            );
+        })}
+      </MenuList>
+    </Menu>
+    </>
+  );
+};*/
+
+
+const NavigationMenu = ({orgId, eventId}) => {
+  return (
+    <Box
+          width="100%"
+          backgroundColor="#e6f7f5"
+          py={2}
+          px={2}
+          borderRadius="8px"
+          display={{ base: 'block', md: 'flex' }}
+        >
+          <VStack spacing={2} align="stretch" display={{ base: 'flex', md: 'none' }}>
+            {['participants', 'check-in', 'attributes', 'extras'].map((tab) => (
+              <Button
+                key={tab}
+                style={tabStyle(activeTab === tab)}
+                onClick={() => {
+                  setActiveTab(tab);
+                  const element = tab === 'check-in' ? 'participants/check-in' : tab;
+                  router.push(`/${orgId}/events/${eventId}/${element}`);
+                }}
+              >
+                {tab === 'check-in'
+                  ? 'Participant Check In'
+                  : tab.replace(/(^\w|\s\w)/g, (m) => m.toUpperCase())}
+              </Button>
+            ))}
+          </VStack>
+
+          <Flex
+            justifyContent="space-evenly"
+            alignItems="center"
+            width="100%"
+            display={{ base: 'none', md: 'flex' }} // Horizontal layout on desktop
+          >
+            {['participants', 'check-in', 'attributes', 'extras'].map((tab) => (
+              <Button
+                key={tab}
+                style={tabStyle(activeTab === tab)}
+                onClick={() => {
+                  setActiveTab(tab);
+                  const element = tab === 'check-in' ? 'participants/check-in' : tab;
+                  router.push(
+                    `/${orgId}/events/${eventId}/${element}
+                `,
+                  );
+                }}
+              >
+                {tab === 'check-in'
+                  ? 'Participant Check In'
+                  : tab.replace(/(^\w|\s\w)/g, (m) => m.toUpperCase())}
+              </Button>
+            ))}
+          </Flex>
+        </Box>
+  )
+}
+export default NavigationMenu;
\ No newline at end of file
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx
index bb22e16e..9a405e58 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx
@@ -11,6 +11,8 @@ import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 import useWrapper from '@/hooks/useWrapper';
 
+import NavigationMenu from '../../navigationmenu';
+
 const columns = [
   { field: 'firstName', headerName: 'First Name', width: 200 },
   { field: 'lastName', headerName: 'Last Name', width: 200 },
@@ -95,10 +97,12 @@ export default function ParticipantsCheckIn() {
               Open Scanner
             </Button>
           </Flex>
+         {/* <NavigationMenu orgId={orgId} eventId={eventId} />*/} 
         </>
       }
       debugInfo={participantsCheckIn}
     >
+      <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay
         loading={loading}
         rows={participantsCheckIn}
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/index.jsx
index ffacf7e2..6911866f 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/index.jsx
@@ -12,6 +12,7 @@ import { useContext } from 'react';
 import { account } from '@/contexts/MyContext';
 import axios from 'axios';
 import useWrapper from '@/hooks/useWrapper';
+import NavigationMenu from '../navigationmenu';
 
 const columns = [
   { field: 'firstName', headerName: 'First Name', width: 200 },
@@ -172,6 +173,7 @@ export default function Participants() {
       }
       debugInfo={participants}
     >
+      <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay loading={loading} rows={participants} columns={columns} />
       <MultiStepModal
         isOpen={qrIsOpen}