Sponsor Dashboard (#583)

* sponsor dashboard

* fixed widget layout

* stats + announcements oops

components/hackerDashboard/SponsorDashboard.tsx

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import Image from "next/image";
+
+// Layout
+import Navbar from "./layout/SponsorNavbar";
+import Sidebar from "./layout/Sidebar";
+import Footer from "./layout/Footer";
+import Header from "./layout/Header";
+import WidgetFrame from "./HackerWidgetFrame";
+import Logo from "@/assets/hackscFox.png";
+
+// Widgets
+import SponsorActionsWidget from "./widgets/admin/sponsor";
+import UpdatesWidget from "./widgets/updates";
+
+type Props = {
+  profile: Profile;
+  events: Array<any>;
+  hackathonConstants: any;
+};
+
+const SponsorDashboard = (props: Props) => {
+  const { profile, events, hackathonConstants } = props;
+
+  return (
+    <Container>
+      <FoxLogo />
+      <Navbar hackathonConstants={hackathonConstants} activePage="dashboard" />
+      <Header text={"Sponsor Dashboard"} />
+      <WidgetFrame
+        widget="one"
+        component={
+          <>
+            <h3>Welcome to the Sponsor Dashboard!</h3>
+            <p>
+            Here you can access actions and data for HackSC. If you have any questions or find any errors, let the organizers know in {" "}
+              <b>#sponsors</b>
+            </p>
+          </>
+        }
+      />
+      <WidgetFrame widget="two" component={<SponsorActionsWidget />} />
+      <WidgetFrame widget="three" component={<UpdatesWidget />} />
+      <Sidebar view={"sponsor"} events={events} />
+      <Footer />
+    </Container>
+  );
+};
+
+const FoxLogo = () => (
+  <MenuLogo>
+    <Image src={Logo} width="75%" height="75%" alt="" />
+  </MenuLogo>
+);  
+
+const MenuLogo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  margin: 20px auto;
+`;
+
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: 0.5fr 1.5fr 0.5fr;
+  grid-template-rows: 0.2fr 0.2fr 0.5fr 1fr 0.6fr;
+  gap: 0px;
+  grid-template-areas:
+    "FoxLogo Header Header Empty"
+    "Navbar WidgetArea1 WidgetArea1 Sidebar"
+    "Navbar WidgetArea2 WidgetArea2 Sidebar"
+    "Navbar BigWidget BigWidget Sidebar"
+    "Footer Footer Footer Footer";
+  background-color: #1d2c3f;
+  color: #fff;
+`;
+
+export default SponsorDashboard;

components/hackerDashboard/index.ts

@@ -4,6 +4,7 @@ export * from "./widgets";
 
 // * Files
 export { default as AdminDashboard } from "./AdminDashboard";
+export { default as SponsorDashboard } from "./SponsorDashboard";
 export { default as Application } from "./Application";
 export { default as Dash } from "./Dashboard";
 export { default as HackerWidgetFrame } from "./HackerWidgetFrame";

components/hackerDashboard/layout/Sidebar.tsx

@@ -41,7 +41,7 @@ const Sidebar = (props: Props) => {
     <HackathonEvents events={events} />,
   ];
   // TODO: Generalize
-  const widgets = view === "admin" ? adminWidgets : hackerWidgets;
+  const widgets = (view === "admin" || view === "sponsor") ? adminWidgets : hackerWidgets;
   return (
     <SidebarContainer>
       {widgets.map((e, i) => (

components/hackerDashboard/layout/SponsorNavbar.tsx

@@ -0,0 +1,122 @@
+import styled from "styled-components";
+
+const MenuItems = [
+  { title: "Dashboard", route: "dashboard", constant: "showDash" },
+  { title: "Maps", route: "maps", constant: "showMaps" },
+  { title: "Resources", route: "resources", constant: "showAPI" },
+];
+
+type Item = {
+  title: string;
+  route: string;
+  constant: string;
+};
+
+type HackathonConstant = {
+  id: number;
+  name: string;
+  boolean: boolean;
+  date: string;
+  type: any;
+};
+
+type NavbarProps = {
+  activePage: string;
+  hackathonConstants: Array<HackathonConstant>;
+};
+
+type MenuItemProps = {
+  activePage: string;
+  item: Item;
+  hackathonConstants: Array<HackathonConstant>;
+};
+
+const MenuItem = ({ activePage, item, hackathonConstants }: MenuItemProps) => {
+  let show = true;
+  hackathonConstants.forEach((c) => {
+    if (item.constant == c.name) show = c.boolean;
+  });
+
+  return show ? (
+    <BoxShadowWrapper>
+      <NavbarMenuItem
+        href={"/" + item.route}
+        active={activePage === item.route || activePage === item.title}
+      >
+        <NavbarMenuItemLabel>{item.title}</NavbarMenuItemLabel>
+      </NavbarMenuItem>
+    </BoxShadowWrapper>
+  ) : (
+    ""
+  );
+};
+
+const SponsorNavbar = ({ activePage, hackathonConstants }: NavbarProps) => {
+  return (
+    <NavbarContainer>
+      <NavbarMenu>
+        {MenuItems.map((item) =>
+          MenuItem({ activePage, item: item, hackathonConstants })
+        )}
+      </NavbarMenu>
+    </NavbarContainer>
+  );
+};
+
+const NavbarContainer = styled.div`
+  grid-area: Navbar;
+  background-color: #1d2c3f;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  font-family: "Work Sans", sans-serif;
+`;
+
+const NavbarMenu = styled.ul`
+  display: flex;
+  align-items: left;
+  flex-direction: column;
+  list-style: none;
+  width: 100%;
+  margin: 0.5rem 0 0 0;
+`;
+
+const BoxShadowWrapper = styled.div`
+  padding: 0.1rem;
+  margin: 0.5rem;
+  box-shadow: 8px 8px 0 0 #132235;
+  border-radius: 4px 10px 10px 4px;
+`;
+
+type AProps = {
+  active: boolean;
+};
+
+const NavbarMenuItem = styled.a<AProps>`
+  display: flex;
+  height: 60px;
+  width: auto;
+  padding: 0.5rem;
+  align-items: center;
+  border-radius: 4px 10px 10px 4px;
+  box-shadow: inset 3px 0 0 0 #4a96f0;
+  &:hover {
+    background: rgba(255, 255, 255, 0.03);
+    box-shadow: inset 3px 0 0 0 #4a96f0;
+    cursor: pointer;
+  }
+  background-color: ${({ active }) =>
+    active ? "rgba(255, 255, 255, 0.03)" : "#2d4158"};
+`;
+
+const NavbarMenuItemLabel = styled.p`
+  font-family: "Work Sans", sans-serif;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.3;
+  text-align: left;
+  color: #ffffff;
+  margin-left: 8px;
+`;
+
+export default SponsorNavbar;

components/hackerDashboard/widgets/admin/sponsor.tsx

@@ -0,0 +1,76 @@
+import { sendSlackMessage } from "@/lib";
+import styled from "styled-components";
+
+const send_slack_msg = async (e) => {
+  let start_and_end_date =
+    new Date(new Date().getTime() - 480 * 1000 * 60).toISOString() + "";
+  await sendSlackMessage(
+    ":hot_pepper: Admin Metabase accessed!",
+    "",
+    start_and_end_date,
+    start_and_end_date
+  );
+};
+
+const SponsorActionsWidget = () => {
+  return (
+    <Wrapper>
+      <Subheader> Actions </Subheader>
+      <Actions>
+        <Action
+          id="metabase-page"
+          href="https://metabase.hacksc.com/"
+          target="_blank"
+          onClick={(e) => send_slack_msg(e)}
+        >
+          <ActionTitle>Access Metabase</ActionTitle>
+        </Action>
+        <Action id="hacker-manager-page" href="/admin/hackerManager">
+          <ActionTitle> Manage Hackers </ActionTitle>
+        </Action>
+      </Actions>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 75%;
+  margin: 0 auto;
+`;
+
+const Actions = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Subheader = styled.h3`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const Action = styled.a`
+  color: #4a96f0;
+  box-sizing: border-box;
+  padding: 14px 16px;
+  border-radius: 4px;
+  text-align: center;
+  flex-basis: 47%;
+  box-shadow: 0 0 6px rgba(74, 150, 240, 0.4);
+  transition: 0.25s all;
+
+  min-width: 200px;
+  margin: 16px 0;
+  &:hover {
+    box-shadow: 0 0 8px rgba(74, 150, 240, 0.6);
+  }
+`;
+
+const ActionTitle = styled.h3`
+  font-size: 16px;
+  padding-bottom: 0;
+`;
+
+export default SponsorActionsWidget;

pages/dashboard.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Dash, AdminDashboard } from "@/components/hackerDashboard";
+import { Dash, AdminDashboard, SponsorDashboard } from "@/components/hackerDashboard";
 
 import {
   handleLoginRedirect,
@@ -18,7 +18,11 @@ const Dashboard = ({ profile, events, hackathonConstants }) => {
   const switchRole = () => {
     if (view === "admin") {
       setView("hacker");
-    } else {
+    } 
+    else if (view === "hacker") {
+      setView("sponsor");
+    }
+    else if (view === "sponsor") {
       setView("admin");
     }
   };
@@ -32,7 +36,16 @@ const Dashboard = ({ profile, events, hackathonConstants }) => {
           hackathonConstants={hackathonConstants}
         />
       );
-    } else {
+    } 
+    else if (view === "sponsor") {
+      return (
+        <SponsorDashboard
+          profile={profile}
+          events={events}
+          hackathonConstants={hackathonConstants} />
+      );
+    }
+    else {
       return (
         <Dash
           profile={profile}