Update sponsor booth (#534)

* sidebar fixes + show lsit of hacker attendees

* small ui changes

* Add calendar, fix formatting

---------

Co-authored-by: Jiong Yan Yap <[email protected]>

apps/dashboard/components/events/events-calendar.tsx

@@ -239,7 +239,7 @@ const CalendarGrid = styled.div<CalendarGridProps>`
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-columns: 50px repeat(${(props) => props.columns}, 1fr);
-  width: 70vw;
+  max-width: 70vw;
 
   border-radius: 5px;
 

apps/dashboard/components/nav/side-nav2.tsx

@@ -5,6 +5,7 @@ import ArrowRight from '../../public/arrow-right.svg';
 import { useState } from 'react';
 import { IconType } from 'react-icons';
 import styled from 'styled-components';
+import { logout } from '@hibiscus/sso-client';
 
 interface Props {
   options: { name: string; url: string; image: IconType }[];
@@ -16,6 +17,7 @@ const SideNav = ({ options }: Props) => {
   return (
     <div
       style={{
+        height: '100vh',
         backgroundColor: 'white',
         width: '250px',
         display: 'flex',
@@ -53,10 +55,17 @@ const SideNav = ({ options }: Props) => {
         ))}
       </div>
 
-      <LogoutButton>
-        <div>Log out</div>
-        <Image src={ArrowRight} alt={'->'} width={20} height={20}></Image>
-      </LogoutButton>
+      <div style={{width: '100%'}}>
+        <div style={{ fontSize: 11, margin: 25 }}>
+          <div style={{marginBottom: 5}}>Contact HackSC Support</div>
+          <div>(213)-513-1234</div>
+          <div>[email protected]</div>
+        </div>
+        <LogoutButton onClick={logout}>
+          <div>Log out</div>
+          <Image src={ArrowRight} alt={'->'} width={20} height={20}></Image>
+        </LogoutButton>
+      </div>
     </div>
   );
 };

apps/dashboard/layouts/themeless-layout.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import useHibiscusUser from '../hooks/use-hibiscus-user/use-hibiscus-user';
 import StyledSideNav from '../components/nav/side-nav';
@@ -19,6 +19,7 @@ import {
 } from 'react-icons/md';
 import { FaRegUserCircle } from 'react-icons/fa';
 import { useRouter } from 'next/router';
+import { SponsorServiceAPI } from '../common/api';
 
 export type ThemelessLayoutProps = React.PropsWithChildren;
 
@@ -60,7 +61,33 @@ function ThemelessLayout({ children }: ThemelessLayoutProps) {
           image: MdOutlinePlaylistAddCheck,
         },
       ];
-    return [];
+    if (user.role === HibiscusRole.SPONSOR)
+      return [
+        {
+          name: 'Events',
+          url: '/sponsor-booth',
+          image: MdOutlineCalendarViewMonth,
+        },
+        {
+          name: 'Hacker Attendees',
+          url: '/participant-database',
+          image: MdOutlinePeopleAlt,
+        },
+      ];
+  }, [user]);
+
+  const [companyName, setCompanyName] = useState(null);
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await SponsorServiceAPI.getCompanyIdAndEventId(user.id);
+      if (data.data != null) {
+        setCompanyName(data.data.data.company_name);
+      }
+    };
+
+    if (user != null && user.role === HibiscusRole.SPONSOR) {
+      fetchData();
+    }
   }, [user]);
 
   const router = useRouter();
@@ -72,9 +99,10 @@ function ThemelessLayout({ children }: ThemelessLayoutProps) {
       '/identity-portal/attendee-event-scan': 'Event Check-in',
       '/identity-portal/event-checkin': 'Event Check-in',
       '/hacker-profile': 'Profile',
+      '/sponsor-booth': companyName ? `Welcome ${companyName}` : 'Welcome',
     };
     return map[router.pathname] ?? '';
-  }, [router]);
+  }, [router, companyName]);
 
   if (user == null || router == null) {
     return <></>;

apps/dashboard/pages/api/companies/[userId].ts

@@ -30,17 +30,25 @@ export default async function handler(
         console.log(companyData);
 
         //we know companies can't be null. This indexes down the object tree to get event_id. ASSUMED THAT NOTHING IS NULL OR ANYTHING
-        const event = companyData.data['companies']['events'] as any[];
+        const event = companyData.data['companies']['events'];
         let eventId: number | null;
+        let companyName: string | null;
         console.log(event);
         if (event.length) {
           eventId = event.at(0)['id'];
+          companyName = event.at(0)['name'];
         }
         const companyId = companyData.data['company_id'];
 
         return res
           .status(200)
-          .json({ data: { company_id: companyId, event_id: eventId } });
+          .json({
+            data: {
+              company_id: companyId,
+              event_id: eventId,
+              company_name: companyName,
+            },
+          });
       } else {
         return res.status(401).json({ message: 'Unauthorized access.' });
       }