diff --git a/src/_types/CheckIn.ts b/src/_types/CheckIn.ts
new file mode 100644
index 0000000..d9b2309
--- /dev/null
+++ b/src/_types/CheckIn.ts
@@ -0,0 +1,6 @@
+export interface CheckIn {
+ _id: string
+ name: string
+ points: string
+ checkinCount: string
+}
diff --git a/src/actions/checkin.ts b/src/actions/checkin.ts
new file mode 100644
index 0000000..1329c0c
--- /dev/null
+++ b/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
+})
diff --git a/src/actions/index.ts b/src/actions/index.ts
index d90bb34..99ddfce 100644
--- a/src/actions/index.ts
+++ b/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
}
diff --git a/src/components/admin/AdminDialog/index.tsx b/src/components/admin/AdminDialog/index.tsx
index 027fa14..5466982 100644
--- a/src/components/admin/AdminDialog/index.tsx
+++ b/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 => {
+
@@ -53,6 +55,9 @@ const AdminDialog = (): ReactElement => {
+
+
+
)
diff --git a/src/components/admin/CheckInTable/index.module.scss b/src/components/admin/CheckInTable/index.module.scss
new file mode 100644
index 0000000..9bb5546
--- /dev/null
+++ b/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%;
+}
diff --git a/src/components/admin/CheckInTable/index.tsx b/src/components/admin/CheckInTable/index.tsx
new file mode 100644
index 0000000..23f7f4c
--- /dev/null
+++ b/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[] = useMemo(
+ () => [
+ {
+ Header: "ID",
+ accessor: "_id"
+ },
+ {
+ Header: "Name",
+ accessor: "name"
+ },
+ {
+ Header: () => (
+
+ Points
+
+ ),
+ accessor: "points",
+ Cell: (row) => {row.value}
+ },
+ {
+ Header: () => (
+
+ Check-In Count
+
+ ),
+ accessor: "checkinCount",
+ Cell: (row) => {row.value}
+ }
+ ],
+ []
+ )
+ const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+ useTable({
+ columns,
+ data: checkIns,
+ initialState: {
+ hiddenColumns: ["_id"]
+ }
+ })
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {
+ // Loop over the header rows
+ headerGroups.map((headerGroup, headerIdx) => (
+ // Apply the header row props
+
+ {
+ // Loop over the headers in each row
+ headerGroup.headers.map((column, cellIdx) => (
+ // Apply the header cell props
+
+ {
+ // Render the header
+ column.render("Header")
+ }
+
+ ))
+ }
+
+ ))
+ }
+
+ {/* Apply the table body props */}
+
+ {rows.map((row, rowIdx) => {
+ // Prepare the row for display
+ prepareRow(row)
+ return (
+ // Apply the row props
+
+ {
+ // Loop over the rows cells
+ row.cells.map((cell, cellIdx) => {
+ // Apply the cell props
+ return (
+
+ {
+ // Render the cell contents
+ cell.render("Cell")
+ }
+
+ )
+ })
+ }
+
+ )
+ })}
+
+
+
+
+ >
+ )
+}
+
+export default CheckInTable