Added Check-In Items Table in Admin Page

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

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

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