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