- {event.start.toLocaleString("default", {
+ {event.startDate.toLocaleString("default", {
month: "long",
weekday: "long",
day: "2-digit",
year: "numeric",
})}
- {event.start.toLocaleString("default", {
+ {event.startDate.toLocaleString("default", {
hour: "numeric",
minute: "2-digit",
})}
diff --git a/src/components/admin/services/calendar/actions.ts b/src/components/admin/services/calendar/actions.ts
new file mode 100644
index 000000000..2b006a362
--- /dev/null
+++ b/src/components/admin/services/calendar/actions.ts
@@ -0,0 +1,50 @@
+import { LABELS, label } from "@/data/admin/Calendar";
+import { api } from "@/utils/api";
+import { Event } from "@/types/calendar";
+const min = new Date(
+ new Date().getTime() - 20 * 7 * 24 * 60 * 60 * 1000,
+).toISOString();
+
+const max = new Date(
+ new Date().getTime() + 20 * 7 * 24 * 60 * 60 * 1000,
+).toISOString();
+
+export const getEvents = async () => {
+ const hackathonResponse = await api({
+ method: "GET",
+ url: `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&singleEvents=true&orderBy=startTime&timeMin=${min}&timeMax=${max}`,
+ });
+
+ const leadsResponse = await api({
+ method: "GET",
+ url: `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_LEADS}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&singleEvents=true&orderBy=startTime&timeMin=${min}&timeMax=${max}`,
+ });
+
+ const items = [...hackathonResponse.items, leadsResponse.items][0];
+ items.forEach((item: Event) => {
+ item.startDate = new Date(item.start.dateTime);
+ item.endDate = new Date(item.end.dateTime);
+ let category: string = "other";
+ let assignee: string = "";
+ if (item.description) {
+ [category, assignee] = item.description
+ .split("\n")[0]
+ .split("#")
+ .map((item: string) => item.trim())
+ .filter((item: string) => item !== "");
+ } else {
+ item.description = "N/A";
+ }
+ if (category in LABELS) {
+ item.color = LABELS[category as keyof label].background;
+ } else {
+ category = "other";
+ item.color = "!bg-hackathon-tags-gray-text";
+ }
+ item.category = category;
+ item.assignee = assignee;
+ item.hidden = false;
+ });
+
+ return items;
+};
diff --git a/src/components/admin/services/calendar/index.tsx b/src/components/admin/services/calendar/index.tsx
new file mode 100644
index 000000000..26b32a869
--- /dev/null
+++ b/src/components/admin/services/calendar/index.tsx
@@ -0,0 +1,13 @@
+import { ReactQuery } from "@/utils/react-query";
+import { getEvents } from "./actions";
+import Calendar from "./Calendar";
+
+const Index = () => {
+ return (
+
+
+
+ );
+};
+
+export default Index;
diff --git a/src/components/admin/services/checkin/CheckIn.jsx b/src/components/admin/services/checkin/CheckIn.jsx
index 1de8a17af..d8f4bd63b 100644
--- a/src/components/admin/services/checkin/CheckIn.jsx
+++ b/src/components/admin/services/checkin/CheckIn.jsx
@@ -1,66 +1,81 @@
"use client";
-import { useEffect, useState } from "react";
+import { useState } from "react";
import Title from "../../Title";
import Scanner from "./Scanner";
import Select from "@/components/Select";
import Button from "../../Button";
import toaster from "@/utils/toaster";
import { api } from "@/utils/api";
+import { getEvents, getUser } from "./actions";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
const CheckIn = () => {
const [event, setEvent] = useState({ name: "No events" });
- const [events, setEvents] = useState(null);
- const [code, setCode] = useState(null);
+ const [code, setCode] = useState("");
+ const queryClient = useQueryClient();
- useEffect(() => {
- api({
- method: "GET",
- url: `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&singleEvents=true&orderBy=startTime`,
- }).then(({ items }) => {
- setEvents(
- items.map((event) => {
- return { id: event.id, name: event.summary, hidden: false };
- }),
- );
- });
- }, []);
- const setResult = async (result) => {
+ const { data: events } = useQuery({
+ queryKey: ["events"],
+ queryFn: async () => getEvents(),
+ refetchOnWindowFocus: false,
+ });
+
+ const mutation = useMutation({
+ mutationFn: (body) =>
+ api({
+ method: "PUT",
+ url: "/api/checkin",
+ body,
+ }),
+ onSuccess: () => {
+ toaster(`Checked in for ${event.name}`, "success");
+ },
+ onError: (error) => {
+ toaster("Error checking in!", error);
+ },
+ });
+
+ const setResult = (result) => {
if (result !== code) {
setCode(result);
toaster("QR Code Scanned", "success");
}
};
- const handleCheckIn = async () => {
+ const handleCheckIn = () => {
if (event.name === "No events") {
toaster("Please select an event!", "error");
return;
}
-
if (!code) {
toaster("Please scan a valid QR code!", "error");
return;
}
- const [user, date] = code.split("&");
- const delta = Math.round((new Date() - new Date(date)) / 1000);
+ const [userId, date] = code.split("&");
+ console.log("HELLO", process.env.NODE_ENV);
+ const delta =
+ process.env.NODE_ENV === "development"
+ ? Math.round(new Date() - new Date(date)) / 1000
+ : Math.round(new Date() - new Date(date));
if (delta < 5000) {
- const { items } = await api({
- method: "GET",
- url: `/api/checkin?uid=${user}`,
- });
-
- if (items.includes(event.id)) {
- toaster("Already Checked In!", "error");
- return;
- }
-
- api({
- method: "PUT",
- url: "/api/checkin",
- body: { uid: user, event: event.id, name: event.name },
- }).then(() => toaster(`Checked in for ${event.name}`, "success"));
+ queryClient
+ .fetchQuery({
+ queryKey: ["/admin/checkin/user", userId],
+ queryFn: () => getUser(userId),
+ staleTime: 0,
+ })
+ .then((userData) => {
+ if (userData.includes(event.id)) {
+ toaster("Already Checked In!", "error");
+ } else {
+ mutation.mutate({ uid: userId, event: event.id, name: event.name });
+ }
+ })
+ .catch((error) => {
+ toaster("Error Fetching User Data!", "error");
+ });
} else {
toaster("Expired QR code!", "error");
return;
diff --git a/src/components/admin/services/checkin/actions.ts b/src/components/admin/services/checkin/actions.ts
new file mode 100644
index 000000000..590df1b73
--- /dev/null
+++ b/src/components/admin/services/checkin/actions.ts
@@ -0,0 +1,24 @@
+import { api } from "@/utils/api";
+import { Event } from "@/types/calendar";
+export const getEvents = async () => {
+ const { items } = await api({
+ method: "GET",
+ url: `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}&singleEvents=true&orderBy=startTime`,
+ });
+
+ return items.map((event: Event) => ({
+ id: event.id,
+ name: event.summary,
+ hidden: false,
+ }));
+};
+
+export const getUser = async (user: string | null) => {
+ const { items } = await api({
+ method: "GET",
+ // TODO: THIS SHOULD BE A DB CALL DIRECTLY NOW SINCE WE ARE IN ACTIONS TERRIROTY
+ url: `/api/checkin?uid=${user}`,
+ });
+
+ return items;
+};
diff --git a/src/components/admin/services/checkin/index.tsx b/src/components/admin/services/checkin/index.tsx
new file mode 100644
index 000000000..2afcee6d7
--- /dev/null
+++ b/src/components/admin/services/checkin/index.tsx
@@ -0,0 +1,13 @@
+import Checkin from "./CheckIn";
+import { getEvents } from "./actions";
+import { ReactQuery } from "@/utils/react-query";
+
+const Index = async () => {
+ return (
+
+
+
+ );
+};
+
+export default Index;
diff --git a/src/components/admin/services/statistics/Charts.jsx b/src/components/admin/services/statistics/Charts.jsx
index 9e0b2f685..42d7e7e34 100644
--- a/src/components/admin/services/statistics/Charts.jsx
+++ b/src/components/admin/services/statistics/Charts.jsx
@@ -2,19 +2,17 @@ import Chart from "./Chart";
const Charts = ({ counts }) => {
return (
- <>
-
- {Object.entries(counts).map(([category, data]) =>
- Object.entries(data)
- .filter(([title, sizes]) =>
- Object.values(sizes).some((count) => count > 0),
- )
- .map(([title, data], index) => (
-
- )),
- )}
-
-
+
+ {Object.entries(counts).map(([category, data]) =>
+ Object.entries(data)
+ .filter(([title, sizes]) =>
+ Object.values(sizes).some((count) => count > 0),
+ )
+ .map(([title, data], index) => (
+
+ )),
+ )}
+
);
};
diff --git a/src/components/admin/services/statistics/Statistics.jsx b/src/components/admin/services/statistics/Statistics.jsx
index 5dc11c8ca..150afeb99 100644
--- a/src/components/admin/services/statistics/Statistics.jsx
+++ b/src/components/admin/services/statistics/Statistics.jsx
@@ -1,21 +1,18 @@
"use client";
import Title from "@/components/admin/Title";
import Subtitle from "@/components/admin/Subtitle";
-import { useEffect, useState } from "react";
import Tabs from "./Tabs";
import Loading from "@/components/Loading";
-import { api } from "@/utils/api";
import Charts from "./Charts";
+import { getStats } from "./actions";
+import { useQuery } from "@tanstack/react-query";
const Statistics = () => {
- const [counts, setCounts] = useState(null);
- useEffect(() => {
- api({
- method: "GET",
- url: "/api/statistics",
- }).then(({ items }) => setCounts(items));
- }, []);
+ const { data: counts } = useQuery({
+ queryKey: ["/admin/statistics"],
+ queryFn: async () => getStats(),
+ });
return (
diff --git a/src/components/admin/services/statistics/actions.ts b/src/components/admin/services/statistics/actions.ts
new file mode 100644
index 000000000..0a27ed4a1
--- /dev/null
+++ b/src/components/admin/services/statistics/actions.ts
@@ -0,0 +1,117 @@
+import { db } from "@/utils/firebase";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+
+type StatusKeys = "pending" | "accepted" | "rejected";
+type StatusValues = -1 | 1 | 0;
+type Status = Record;
+
+type Size = "XS" | "S" | "M" | "L" | "XL" | "XXL";
+type Sizes = Record;
+
+type StatsKeys =
+ | "teams"
+ | "participants"
+ | "volunteers"
+ | "judges"
+ | "mentors"
+ | "committees"
+ | "sponsors"
+ | "panels"
+ | "admins";
+type Stats = Record;
+
+type Event = Record<"attendance", number> & Record<"name", string>;
+
+export const getStats = async () => {
+ const [statistics, events] = await Promise.all([
+ getDoc(doc(db, "statistics", "statistics")),
+ getDocs(collection(db, "events")),
+ ]);
+
+ const {
+ participants,
+ teams,
+ volunteers,
+ judges,
+ mentors,
+ committees,
+ sponsors,
+ panels,
+ admins,
+ } = statistics.data() as Stats;
+
+ const attendees: Record = {};
+
+ events.forEach((doc) => {
+ const { name, attendance } = doc.data() as Event;
+ attendees[name] = attendance;
+ });
+
+ const users = {
+ admins,
+ participants,
+ teams,
+ judges,
+ volunteers,
+ mentors,
+ committees,
+ sponsors,
+ panels,
+ };
+
+ const sizeData = ["XS", "S", "M", "L", "XL", "XXL"];
+ const statusData = ["1", "0", "-1"];
+
+ const defaultShirts: Sizes = {
+ XS: 0,
+ S: 0,
+ M: 0,
+ L: 0,
+ XL: 0,
+ XXL: 0,
+ };
+
+ const size = {
+ teams: defaultShirts,
+ participants: defaultShirts,
+ volunteers: defaultShirts,
+ judges: defaultShirts,
+ mentors: defaultShirts,
+ committees: defaultShirts,
+ sponsors: defaultShirts,
+ panels: defaultShirts,
+ admins: defaultShirts,
+ };
+
+ const defaultRoles: Status = {
+ pending: 0,
+ accepted: 0,
+ rejected: 0,
+ };
+
+ const status = {
+ teams: defaultRoles,
+ participants: defaultRoles,
+ volunteers: defaultRoles,
+ judges: defaultRoles,
+ mentors: defaultRoles,
+ committees: defaultRoles,
+ sponsors: defaultRoles,
+ panels: defaultRoles,
+ admins: defaultRoles,
+ };
+
+ Object.entries(users).forEach(([group, entries]) => {
+ const role = group as keyof Stats;
+
+ size[role] = Object.fromEntries(
+ Object.entries(entries).filter(([key]) => sizeData.includes(key)),
+ ) as Sizes;
+
+ status[role] = Object.fromEntries(
+ Object.entries(entries).filter(([key]) => statusData.includes(key)),
+ ) as Status;
+ });
+
+ return { users: { status, size }, events: attendees };
+};
diff --git a/src/components/admin/services/statistics/index.tsx b/src/components/admin/services/statistics/index.tsx
new file mode 100644
index 000000000..c4ee00192
--- /dev/null
+++ b/src/components/admin/services/statistics/index.tsx
@@ -0,0 +1,13 @@
+import { ReactQuery } from "@/utils/react-query";
+import { getStats } from "./actions";
+import Statistics from "./Statistics";
+
+const Index = () => {
+ return (
+
+
+
+ );
+};
+
+export default Index;
diff --git a/src/data/admin/Calendar.ts b/src/data/admin/Calendar.ts
index f90b428c4..96514d345 100644
--- a/src/data/admin/Calendar.ts
+++ b/src/data/admin/Calendar.ts
@@ -4,7 +4,8 @@ interface types {
type: string;
}
-interface label {
+export interface label {
+ other: types;
directors: types;
marketing: types;
operations: types;
@@ -61,6 +62,11 @@ export const LABELS: label = {
background: "!bg-hackathon-tags-red-text",
type: "leads",
},
+ other: {
+ color: "gray",
+ background: "!bg-hackathon-tags-gray-text",
+ type: "leads",
+ },
workshop: {
color: "grayblue",
background: "!bg-hackathon-tags-grayblue-text",
diff --git a/src/types/calendar.ts b/src/types/calendar.ts
new file mode 100644
index 000000000..d4717fd7c
--- /dev/null
+++ b/src/types/calendar.ts
@@ -0,0 +1,19 @@
+export type Event = {
+ assignee?: string;
+ category?: string;
+ color?: string;
+ description: string;
+ end: {
+ dateTime: string;
+ timeZone: string;
+ };
+ hidden: boolean;
+ id: string;
+ start: {
+ dateTime: string;
+ timeZone: string;
+ };
+ startDate?: Date;
+ endDate?: Date;
+ summary: string;
+};
diff --git a/src/utils/react-query.tsx b/src/utils/react-query.tsx
new file mode 100644
index 000000000..03d5d4f6d
--- /dev/null
+++ b/src/utils/react-query.tsx
@@ -0,0 +1,28 @@
+import {
+ dehydrate,
+ HydrationBoundary,
+ QueryClient,
+ QueryFunction,
+ QueryKey,
+} from "@tanstack/react-query";
+
+export const ReactQuery = async ({
+ children,
+ query,
+ queryKey,
+}: {
+ children: React.ReactNode;
+ query: QueryFunction;
+ queryKey: QueryKey;
+}) => {
+ const client = new QueryClient();
+
+ await client.prefetchQuery({
+ queryKey,
+ queryFn: query,
+ });
+
+ return (
+ {children}
+ );
+};