Minor event selector restyle

package.json

@@ -62,7 +62,8 @@
     "typescript": "^4.3.5",
     "use-axios-client": "^2.0.0",
     "victory-pie": "^36.5.3",
-    "web-vitals": "^0.2.2"
+    "web-vitals": "^0.2.2",
+    "xlsx": "^0.18.5"
   },
   "resolutions": {
     "chakra-react-select": "^4.2.1"

src/App.css

@@ -1,8 +1,16 @@
+
+/* DM Sans */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+
 /* Make rjsf <form> component full width */
 .rjsf {
   width: 100%;
 }
 
+body {
+  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 /* Reduce spacing in email editor */
 .public-DraftStyleDefault-block {
   margin: 0.5em 0 !important;

src/components/admin/statistics/RenderStatistics.tsx

@@ -12,6 +12,7 @@ import {
   Spinner,
   Center,
 } from "@chakra-ui/react";
+
 import AccordionSection from "./AccordionSection";
 import GraphAccordionSection from "./GraphAccordionSection";
 import TreeMapView from "./graphs/TreeMapView";
@@ -45,7 +46,7 @@ export const RenderStatistics = ({
   } = data;
 
   return (
-    <Accordion allowToggle allowMultiple defaultIndex={[0]}>
+    <Accordion allowMultiple defaultIndex={[0]}>
       <AccordionSection name="Overall Users" small="filterable by branch">
         <Tbody>
           <Tr>
@@ -112,18 +113,18 @@ export const RenderStatistics = ({
       </AccordionSection>
       <AccordionSection name="Application Type" small="not filterable">
         <Thead>
-          <Th>Branch</Th>
-          <Th>Draft</Th>
-          <Th>Applied</Th>
-          <Th>Total</Th>
-          <Th>Accepted</Th>
-          <Th>Waitlisted</Th>
-          <Th>Denied</Th>
-          <Th>Decision Pending</Th>
+          <Th key="Branch">Branch</Th>
+          <Th key="Draft">Draft</Th>
+          <Th key="Applied">Applied</Th>
+          <Th key="Total">Total</Th>
+          <Th key="Accepted">Accepted</Th>
+          <Th key="Waitlisted">Waitlisted</Th>
+          <Th key="Denied">Denied</Th>
+          <Th key="Decision_Pending">Decision Pending</Th>
         </Thead>
         <Tbody>
           {Object.entries(applicationStatistics).map(([key, branchData]: [string, any]) => (
-            <Tr>
+            <Tr key={`appStats-${key}`}>
               <Td>{key}</Td>
               <Td>{branchData.draft}</Td>
               <Td>{branchData.applied}</Td>
@@ -145,7 +146,7 @@ export const RenderStatistics = ({
         </Thead>
         <Tbody>
           {Object.entries(confirmationStatistics).map(([key, branchData]: [string, any]) => (
-            <Tr>
+            <Tr key={`confirmationStats-${key}`}>
               <Td>{key}</Td>
               <Td>{branchData.confirmed}</Td>
               <Td>{branchData.notAttending}</Td>

src/components/admin/statistics/StatisticsPage.tsx

@@ -1,36 +1,35 @@
 import React from "react";
 import {
-  Accordion,
-  Alert,
-  AlertIcon,
   Box,
   HStack,
+  Button,
   Heading,
   Select,
   Spinner,
   Stack,
-  Tbody,
-  Td,
   Text,
-  Th,
-  Thead,
-  Tr,
   VStack,
 } from "@chakra-ui/react";
 import { apiUrl, ErrorScreen, LoadingScreen, Service } from "@hex-labs/core";
 import { useParams } from "react-router-dom";
 import useAxios from "axios-hooks";
+import { DownloadIcon } from "@chakra-ui/icons";
 
+/*
 import AccordionSection from "./AccordionSection";
 import GraphAccordionSection from "./GraphAccordionSection";
 import TreeMapView from "./graphs/TreeMapView";
+*/
 import { Branch, BranchType } from "../branchSettings/BranchSettingsPage";
 import { RenderStatistics } from "./RenderStatistics";
+import XLSXExporter from "../../../util/xlsxExport";
+import { useCurrentHexathon } from "../../../contexts/CurrentHexathonContext";
 
 const StatisticsPage: React.FC = () => {
   const [selectedBranch, setSelectedBranch] = React.useState<Branch | null>(null);
   const [selectedStatus, setSelectedStatus] = React.useState<string | null>("CONFIRMED");
   const { hexathonId } = useParams();
+  const { currentHexathon } = useCurrentHexathon();
 
   // Enable manual mode
   const [{ data, loading, error }, refetchStatistics] = useAxios({
@@ -41,6 +40,39 @@ const StatisticsPage: React.FC = () => {
     },
   });
 
+  const exportToXLSX = React.useCallback(() => {
+
+    if (!hexathonId) { return; }
+
+    // whitespaces bad
+    const noWhitespaceName = (currentHexathon.name as string).replaceAll(" ", "_");
+
+    const exporter = new XLSXExporter({name: noWhitespaceName, id: hexathonId});
+    exporter.addKeyValueData(data.userStatistics, "Overall User Statistics");
+    exporter.addTableData(data.applicationStatistics, "Branch", "Application Statistics");
+    exporter.addTableData(data.confirmationStatistics, "Branch", "Confirmation Statistics");
+
+    // eslint-disable-next-line guard-for-in
+    for (const key in data.applicationDataStatistics) {
+      const branchData = data.applicationDataStatistics[key];
+      exporter.addKeyValueData(branchData, `${key}`);
+    }
+
+    const url = exporter.getDownloadURL();
+    const a = document.createElement("a");
+
+    let downloadName = noWhitespaceName;
+    if (selectedBranch) downloadName = downloadName.concat(`_filterBranch-${selectedBranch.name}`);
+    if (selectedStatus) downloadName = downloadName.concat(`_filterStatus-${selectedStatus}`);
+
+    a.download = downloadName.concat(".xlsx");
+    a.href = url;
+    a.click();
+
+    exporter.cleanupDownloadURL();
+
+  }, [currentHexathon.name, data, hexathonId, selectedBranch, selectedStatus]);
+
   // Fetch statistics whenever selectedBranchId changes
   React.useEffect(() => {
     if (hexathonId) {
@@ -71,7 +103,10 @@ const StatisticsPage: React.FC = () => {
     },
   });
 
+  if (!hexathonId) return <ErrorScreen error={new Error("Hexathon ID invalid!")} />;
+  if (loading) return <LoadingScreen />;
   if (error) return <ErrorScreen error={error} />;
+  if (branchError) return <ErrorScreen error={branchError} />
 
   return (
     <Box w="100%" p={5}>
@@ -81,8 +116,12 @@ const StatisticsPage: React.FC = () => {
           <Text fontSize="lg" color="grey">
             All of the data crunched into this page from all of the applications we recieved.
           </Text>
+          <Box>
+            <Button colorScheme="blue" onClick={exportToXLSX}><DownloadIcon />&nbsp;&nbsp;Export to XLSX</Button>
+            <Text fontSize="sm" textAlign="center" opacity={0.5}>(Filters will be reflected)</Text>
+          </Box>
 
-          {branchLoading ? (
+          {branchLoading? (
             <Spinner />
           ) : (
             <HStack>

src/components/admin/statistics/graphs/TableView.tsx

@@ -13,7 +13,7 @@ const TableView: React.FC<IProps> = props => (
     <Table variant="simple">
       <Tbody>
         {Object.keys(props.data).map(key => (
-          <Tr>
+          <Tr key={key}>
             <Td style={{ width: "315px", maxWidth: "315px", fontSize: "13px" }}>{key}</Td>
             <Td style={{ fontSize: "13px" }}>{props.data[key]}</Td>
           </Tr>

src/components/outline/AppOutline.tsx

@@ -2,6 +2,7 @@ import { LoadingScreen, ErrorScreen, apiUrl, Service, Footer } from "@hex-labs/c
 import useAxios from "axios-hooks";
 import React from "react";
 import { Navigate, Outlet, useLocation, useParams } from "react-router-dom";
+import { Box } from "@chakra-ui/react";
 
 import Navigation from "./Navigation";
 import { CurrentHexathonProvider } from "../../contexts/CurrentHexathonContext";
@@ -22,7 +23,9 @@ const AppOutline: React.FC = () => {
       <Navigation />
       {!currentHexathon && location.pathname !== "/" ? <Navigate to="/" /> : <Outlet />}
       <HelpScoutBeacon />
-      <Footer />
+      <Box backgroundColor="white">
+        <Footer />
+      </Box>
     </CurrentHexathonProvider>
   );
 };

src/components/selectEvent/EmptyEventCard.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
+
+import { CARD_HEIGHT, CARD_HEIGHT_SM } from "./EventCard";
+
+const EmptyEventCard = (props: {noEvents?: boolean}) => (
+	<Flex
+	direction="column"
+	position="relative"
+	w="100%"
+	alignItems="center"
+	justifyContent="center"
+	color="white"
+	border="1px"
+	borderColor="gray.200"
+	borderRadius={6}
+	overflow="hidden"
+	shadow="sm"
+	padding={{base: 3, lg: 5}}
+	height={{base: CARD_HEIGHT_SM, lg: CARD_HEIGHT}}>
+		<Heading textAlign="center" fontSize={{base: 'xl', lg: '4xl'}} fontFamily="DM Sans, system-ui">
+			{props.noEvents? "No Events at the Moment..." : "... And More to Come!"}
+		</Heading>
+		<Text textAlign="center" fontSize={{base: 'xs', lg: 'lg'}} fontFamily="DM Sans, system-ui">
+			Check out our social media to stay up to date on new events!
+		</Text>
+	</Flex>
+);
+
+export default EmptyEventCard;

src/components/selectEvent/EventCard.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { Box, Heading, HStack, Image } from "@chakra-ui/react";
+import { Box, Flex, Heading, Image, Text } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
 import { apiUrl, ErrorScreen, LoadingScreen, Service } from "@hex-labs/core";
 import useAxios from "axios-hooks";
+import { CalendarIcon } from "@chakra-ui/icons";
 
 interface Props {
   name: string;
@@ -11,6 +12,9 @@ interface Props {
   image?: string;
 }
 
+export const CARD_HEIGHT = "12rem";
+export const CARD_HEIGHT_SM = "min(25vw, 6rem)";
+
 const EventCard: React.FC<Props> = props => {
   const navigate = useNavigate();
 
@@ -35,38 +39,55 @@ const EventCard: React.FC<Props> = props => {
   return (
     <Box
       position="relative"
-      marginBottom={3}
       bg="white"
-      w="90%"
-      p={4}
+      w="100%"
       color="black"
       border="1px"
       borderColor="gray.200"
+      borderRadius={6}
+      overflow="hidden"
       shadow="sm"
-      h="150px"
+      height={{base: CARD_HEIGHT_SM, lg: CARD_HEIGHT}}
       cursor="pointer"
-      transition=".5s"
+      transition=".1s"
       _hover={{
-        shadow: "md",
+        shadow: "lg",
       }}
       onClick={handleClick}
     >
-      <HStack>
-        <Heading>{props.name}</Heading>
+      <Flex w="full">
+        <Box flexGrow={1} padding={{base: 3, lg: 5}}> 
+
+          {/* I HATE RESPONSIVE DESIGN WHY DOES EVERYONE HAVE DIFFERENT SCREEN SIZES
+          these font sizes are scuffed but they work (tested on 500% browser zoom + iphone 12)
+          theres nothing else we can do about long titles cuz of the image on the right...
+          this WILL break if name.length is big so PLEASE DONT LET THAT HAPPEN */}
+          <Heading fontSize={{base: `min(1.4rem, ${6-props.name.length/20}vw)`, lg: '4xl'}} fontFamily="DM Sans, system-ui">
+            {props.name}
+          </Heading>
+
+          <Box fontSize={{base: `min(0.7rem, ${3-props.name.length/40}vw)`, lg: 'md'}} opacity={0.6}> 
+            <CalendarIcon verticalAlign="-0.1em" />&nbsp;&nbsp;
+            <Text display="inline" fontFamily="DM Sans, system-ui">
+              {new Date(data.startDate).toLocaleDateString("en-US", {
+                month: "long", day: "numeric", year: "numeric"
+              })}
+            </Text>
+          </Box>
+        </Box>
         <Image
-          position="absolute"
-          right="0px"
-          top="0px"
-          height="148px"
+          height={{base: CARD_HEIGHT_SM, lg: CARD_HEIGHT}}
+          width={{base: CARD_HEIGHT_SM, lg: CARD_HEIGHT}}
+          objectFit="cover"
           src={data.coverImage ?? "/events/default-event-logo.jpeg"}
           onError={(e: any) => {
             // add fallback if no logo exists
             e.target.onError = null;
             e.target.src = "/events/default-event-logo.jpeg";
           }}
-          alt="hexathon event logo"
+          alt={`${props.name} event logo`}
         />
-      </HStack>
+      </Flex>
     </Box>
   );
 };