Merge branch 'main' into main

.eslintignore

@@ -1,7 +1,17 @@
-# don't ever lint node_modules
-node_modules
-# don't lint build output (make sure it's set to your correct build folder name)
-dist
-# don't lint nyc coverage output
-coverage
-public
+# .eslintignore
+*.json
+*.rc
+*.config.ts
+*.node.json
+.eslint*
+.prettier*
+.vscode/*
+.settings.json
+.gitignore
+.gitattributes
+/coverage
+/public
+/node_modules
+/build
+/dist
+/tests

.prettierrc

@@ -1,8 +1,27 @@
 {
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false,
-  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 4,
+  "useTabs": true,
   "arrowParens": "always",
-  "trailingComma": "none"
-}
+  "endOfLine": "lf",
+  "overrides": [
+      {
+          "files": "*.json",
+          "options": {
+              "singleQuote": false
+          }
+      },
+      {
+          "files": ".*rc",
+          "options": {
+              "singleQuote": false,
+              "parser": "json"
+          }
+      }
+  ]
+}

pages/admin.tsx

@@ -3,6 +3,7 @@ import { ReactElement } from "react"
 import AdminDialog from "src/components/admin/AdminDialog"
 import ScottyLabsHeader from "src/components/design/ScottyLabsHeader"
 import WaveBackground from "src/components/design/WaveBackground"
+import WaveHeader from "src/components/design/WaveHeader"
 import Menu from "src/components/menu/Menu"
 import AdminLayout from "src/layouts/AdminLayout"
 import styles from "styles/Home.module.scss"
@@ -11,9 +12,9 @@ const AdminPage: NextPage = (): ReactElement => {
   return (
     <>
       <WaveBackground />
+      <WaveHeader variant="light" />
       <Menu />
       <div>
-        <ScottyLabsHeader />
         <div className={styles.dialog}>
           <AdminDialog />
         </div>

pages/teams.tsx

@@ -172,13 +172,15 @@ export default function ViewTeams(props: SSRDataAuth<TeamData>["props"]) {
           {emptyMessage}
           <table className={styles.tableData}>
             <tbody>
-              {teams.map((team, idx) => (
-                <TeamTableEntry
-                  team={team}
-                  key={idx}
-                  callback={checkJoinErrorCallback}
-                />
-              ))}
+              {teams
+                .sort((a, b) => +a._id - +b._id)
+                .map((team, idx) => (
+                  <TeamTableEntry
+                    team={team}
+                    key={idx}
+                    callback={checkJoinErrorCallback}
+                  />
+                ))}
             </tbody>
           </table>
         </FloatingDiv>

src/_types/CheckIn.ts

@@ -0,0 +1,6 @@
+export interface CheckIn {
+  _id: string
+  name: string
+  points: string
+  checkinCount: string
+}

src/actions/checkin.ts

@@ -0,0 +1,13 @@
+import { DispatchActionType } from "enums/DispatchActionType"
+import { RequestStatus } from "enums/RequestStatus"
+import { RemoteDispatchAction } from "types/DispatchAction"
+
+export const allCheckInItems = (): RemoteDispatchAction => ({
+  type: DispatchActionType.USER_GET_TEAM,
+  useAPI: true,
+  request: {
+    path: "/check-in",
+    method: "GET"
+  },
+  status: RequestStatus.PENDING
+})

src/actions/index.ts

@@ -7,6 +7,7 @@ import * as settings from "./settings"
 import * as requests from "./requests"
 import * as recruiters from "./recruiters"
 import * as analytics from "./analytics"
+import * as checkin from "./checkin"
 
 export default {
   auth,
@@ -17,5 +18,6 @@ export default {
   settings,
   requests,
   recruiters,
-  analytics
+  analytics,
+  checkin
 }

src/components/admin/AdminDialog/index.tsx

@@ -9,6 +9,7 @@ import Teams from "../Teams"
 import ParticipantTable from "../ParticipantTable"
 import RecruiterCreationForm from "../RecruiterCreationForm"
 import SponsorCreationForm from "../SponsorCreationForm"
+import CheckInTable from "../CheckInTable"
 import styles from "./index.module.scss"
 import axios from "axios"
 
@@ -41,6 +42,7 @@ const AdminDialog = (): ReactElement => {
             <Tab label="Recruiters" value="2" />
             <Tab label="Sponsors" value="3" />
             <Tab label="Analytics" value="4" />
+            <Tab label="Check-in Items" value="5" />
           </TabList>
         </Box>
         <TabPanel value="0" className={styles.tabPanel}>
@@ -58,6 +60,9 @@ const AdminDialog = (): ReactElement => {
         <TabPanel value="4" className={styles.tabPanel}>
           <AnalyticsTab />
         </TabPanel>
+        <TabPanel value="4" className={styles.tabPanel}>
+          <CheckInTable />
+        </TabPanel>
       </TabContext>
     </FloatingDiv>
   )

src/components/admin/Analytics/Stats.tsx

@@ -140,11 +140,11 @@ const Stats = ({
         </Typography>
         <Typography className={styles.entry}>
           <CheckCircle className={styles.icon} htmlColor="green" />
-          Confirmed (CMU) {data.confirmedCmu}
+          Confirmed (CMU): {data.confirmedCmu}
         </Typography>
         <Typography className={styles.entry}>
           <Cancel className={styles.icon} htmlColor="red" />
-          Declined {data.declined}
+          Declined: {data.declined}
         </Typography>
       </div>
       <div className={styles.subsection}>

src/components/admin/CheckInTable/index.module.scss

@@ -0,0 +1,42 @@
+@import "~/styles/variables.scss";
+@import "~/styles/mixins.scss";
+
+.dialog {
+  display: flex;
+  align-items: center;
+  width: 75%;
+  border-radius: 25px;
+  padding: 2rem;
+  margin: 0 auto;
+  flex-direction: column;
+  background-image: $dialog-container-gradient;
+  box-shadow: $dialog-container-box-shadow;
+  backdrop-filter: blur(4px);
+
+  max-height: 70%;
+  overflow: scroll;
+
+  @include down($breakpoint-md) {
+    width: 80%;
+  }
+
+  @include down($breakpoint-sm) {
+    width: 70%;
+  }
+}
+
+.dialogContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.spinnerContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.table {
+  width: 100%;
+}

src/components/admin/CheckInTable/index.tsx

@@ -0,0 +1,157 @@
+import {
+  CircularProgress,
+  Collapse,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow
+} from "@mui/material"
+import React, { ReactElement, useEffect, useMemo, useState } from "react"
+import { useDispatch } from "react-redux"
+import { Column, useTable } from "react-table"
+import actions from "src/actions"
+import styles from "./index.module.scss"
+import { CheckIn } from "types/CheckIn"
+
+const CheckInTable = (): ReactElement => {
+  const dispatch = useDispatch()
+  const [loading, setLoading] = useState(true)
+
+  const [checkIns, setCheckIns] = useState([])
+
+  useEffect(() => {
+    const getCheckIn = async () => {
+      setLoading(true)
+      try {
+        const { data } = await dispatch(actions.checkin.allCheckInItems())
+        data.sort((a: { startTime: number }, b: { startTime: number }) => {
+          return a.startTime > b.startTime
+        })
+        setCheckIns(data)
+      } catch (err) {
+        console.error(err)
+      }
+      setLoading(false)
+    }
+    getCheckIn()
+  }, [dispatch])
+
+  const columns: Column<CheckIn>[] = useMemo(
+    () => [
+      {
+        Header: "ID",
+        accessor: "_id"
+      },
+      {
+        Header: "Name",
+        accessor: "name"
+      },
+      {
+        Header: () => (
+          <div
+            style={{
+              textAlign: "center"
+            }}
+          >
+            Points
+          </div>
+        ),
+        accessor: "points",
+        Cell: (row) => <div style={{ textAlign: "center" }}>{row.value}</div>
+      },
+      {
+        Header: () => (
+          <div
+            style={{
+              textAlign: "center"
+            }}
+          >
+            Check-In Count
+          </div>
+        ),
+        accessor: "checkinCount",
+        Cell: (row) => <div style={{ textAlign: "center" }}>{row.value}</div>
+      }
+    ],
+    []
+  )
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable<CheckIn>({
+      columns,
+      data: checkIns,
+      initialState: {
+        hiddenColumns: ["_id"]
+      }
+    })
+
+  return (
+    <>
+      <div className={styles.dialogContent}>
+        <Collapse in={loading}>
+          <div className={styles.spinnerContainer}>
+            <CircularProgress />
+          </div>
+        </Collapse>
+        <TableContainer>
+          <Table {...getTableProps()}>
+            <TableHead>
+              {
+                // Loop over the header rows
+                headerGroups.map((headerGroup, headerIdx) => (
+                  // Apply the header row props
+                  <TableRow
+                    {...headerGroup.getHeaderGroupProps()}
+                    key={headerIdx}
+                  >
+                    {
+                      // Loop over the headers in each row
+                      headerGroup.headers.map((column, cellIdx) => (
+                        // Apply the header cell props
+                        <TableCell {...column.getHeaderProps()} key={cellIdx}>
+                          {
+                            // Render the header
+                            column.render("Header")
+                          }
+                        </TableCell>
+                      ))
+                    }
+                  </TableRow>
+                ))
+              }
+            </TableHead>
+            {/* Apply the table body props */}
+            <TableBody {...getTableBodyProps()}>
+              {rows.map((row, rowIdx) => {
+                // Prepare the row for display
+                prepareRow(row)
+                return (
+                  // Apply the row props
+                  <TableRow {...row.getRowProps()} key={rowIdx}>
+                    {
+                      // Loop over the rows cells
+                      row.cells.map((cell, cellIdx) => {
+                        // Apply the cell props
+                        return (
+                          <TableCell {...cell.getCellProps()} key={cellIdx}>
+                            {
+                              // Render the cell contents
+                              cell.render("Cell")
+                            }
+                          </TableCell>
+                        )
+                      })
+                    }
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </div>
+    </>
+  )
+}
+
+export default CheckInTable