Merge remote-tracking branch 'origin/dev' into cf-stable

Author: christianhelp

apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/web/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.1.2",

apps/web/src/actions/checkin.ts

@@ -6,14 +6,43 @@ import { UNIQUE_KEY_CONSTRAINT_VIOLATION_CODE } from "@/lib/constants/";
 import { checkInUserClient, checkInUserList } from "@/lib/queries/checkins";
 import { adminCheckinSchema, universityIDSplitter } from "db/zod";
 import { CheckinResult } from "@/lib/types/events";
-import { revalidatePath } from "next/cache";
 import { headers } from "next/headers";
+import { getEventById } from "@/lib/queries/events";
+import { returnValidationErrors } from "next-safe-action";
+import z from "zod";
+import { isWithinInterval } from "date-fns";
 
-const { ALREADY_CHECKED_IN, SUCCESS, FAILED, SOME_FAILED } = CheckinResult;
+const {
+	ALREADY_CHECKED_IN,
+	SUCCESS,
+	FAILED,
+	SOME_FAILED,
+	EVENT_NOT_FOUND,
+	CHECKIN_NOT_AVAILABLE,
+} = CheckinResult;
 
 export const checkInUserAction = userAction
 	.schema(userCheckinSchemaFormified)
 	.action(async ({ parsedInput }) => {
+		const { eventID } = parsedInput;
+		const event = await getEventById(eventID);
+		if (!event) {
+			returnValidationErrors(z.null(), {
+				_errors: [EVENT_NOT_FOUND],
+			});
+		}
+
+		const currentDateUTC = new Date();
+		const isCheckinAvailable = isWithinInterval(currentDateUTC, {
+			start: event.checkinStart,
+			end: event.checkinEnd,
+		});
+		if (!isCheckinAvailable) {
+			returnValidationErrors(z.null(), {
+				_errors: [CHECKIN_NOT_AVAILABLE],
+			});
+		}
+
 		try {
 			await checkInUserClient(parsedInput);
 		} catch (e) {

apps/web/src/app/settings/page.tsx

@@ -36,13 +36,6 @@ export default async function UserSettingsProfilePage() {
 	const authClient = await clerkClient();
 	const user = await authClient.users.getUser(userId);
 
-	const params = new URLSearchParams({
-		height: "112",
-		width: "112",
-		quality: "100",
-		fit: "crop",
-	});
-
 	return (
 		<div className="flex flex-col gap-10">
 			<Card id="account">
@@ -80,9 +73,7 @@ export default async function UserSettingsProfilePage() {
 					<Separator />
 				</div>
 				<CardContent className="space-y-12">
-					<ChangeProfilePictureForm
-						profilePicture={`${user.imageUrl}?${params.toString()}`}
-					/>
+					<ChangeProfilePictureForm profilePicture={user.imageUrl} />
 					<ChangeResumeForm
 						resume={userSettings.data.resume ?? undefined}
 					/>

apps/web/src/components/dash/UserDash.tsx

@@ -140,7 +140,7 @@ export default async function UserDash({
 								<GraduationCapIcon className="mr-2 h-4 w-4" />
 								{`${userData.major}, ${userData.graduationYear}`}
 							</p>
-							<p className="mt-2 flex items-center text-balance text-base text-muted-foreground">
+							<p className="text-balance mt-2 flex items-center text-base text-muted-foreground">
 								{`Member since ${joinedDate}`}
 							</p>
 							{/* come back and configure wrangler json */}

apps/web/src/components/dash/admin/events/EditEventForm.tsx

@@ -29,8 +29,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Switch } from "@/components/ui/switch";
 import { useState, useEffect } from "react";
-import { cn } from "@/lib/utils";
-import { format } from "date-fns";
+import { isAfter, addHours, isBefore } from "date-fns";
 import { getLocalTimeZone, parseAbsolute } from "@internationalized/date";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -126,6 +125,30 @@ export default function EditEventForm({
 		return true;
 	}
 
+	const eventStartTime = form.watch("start");
+	const eventEndTime = form.watch("end");
+	const checkinStartTime = form.watch("checkinStart");
+	const checkinEndTime = form.watch("checkinEnd");
+
+	useEffect(() => {
+		if (isAfter(eventStartTime, eventEndTime)) {
+			form.setValue("end", addHours(eventStartTime, 1));
+		}
+	}, [eventStartTime]);
+
+	useEffect(() => {
+		if (isAfter(checkinStartTime, checkinEndTime)) {
+			form.setValue("checkinEnd", addHours(checkinStartTime, 1));
+		}
+	}, [checkinStartTime]);
+
+	useEffect(() => {
+		if (isBefore(checkinEndTime, eventEndTime)) {
+			form.setValue("checkinStart", eventStartTime);
+			form.setValue("checkinEnd", eventEndTime);
+		}
+	}, [eventEndTime]);
+
 	useEffect(() => {
 		if (Object.keys(form.formState.errors).length > 0) {
 			console.log("Errors: ", form.formState.errors);

apps/web/src/components/dash/admin/events/NewEventForm.tsx

@@ -45,7 +45,6 @@ import { useAction } from "next-safe-action/hooks";
 import { put } from "@/lib/client/file-upload";
 import { createEvent } from "@/actions/events/createNewEvent";
 import { ONE_HOUR_IN_MILLISECONDS } from "@/lib/constants";
-import { bucketEventThumbnailBaseUrl } from "config";
 import type { NewEventFormProps } from "@/lib/types/events";
 import {
 	Select,
@@ -54,6 +53,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { isAfter, isBefore, addHours } from "date-fns";
 
 const formSchema = insertEventSchemaFormified;
 
@@ -116,6 +116,33 @@ export default function NewEventForm({
 		return true;
 	}
 
+	const eventStartTime = form.watch("start");
+	const eventEndTime = form.watch("end");
+	const checkinStartTime = form.watch("checkinStart");
+	const checkinEndTime = form.watch("checkinEnd");
+
+	useEffect(() => {
+		if (isAfter(eventStartTime, eventEndTime)) {
+			form.setValue("end", addHours(eventStartTime, 1));
+		}
+	}, [eventStartTime]);
+
+	useEffect(() => {
+		if (
+			isAfter(checkinStartTime, checkinEndTime) &&
+			hasDifferentCheckinTime
+		) {
+			form.setValue("checkinEnd", addHours(checkinStartTime, 1));
+		}
+	}, [checkinStartTime]);
+
+	useEffect(() => {
+		if (isBefore(checkinEndTime, eventEndTime) && hasDifferentCheckinTime) {
+			form.setValue("checkinStart", eventStartTime);
+			form.setValue("checkinEnd", eventEndTime);
+		}
+	}, [eventEndTime]);
+
 	const {
 		execute: runCreateEvent,
 		status: actionStatus,

apps/web/src/components/dash/admin/members/MemberStatsSheet.tsx

@@ -16,6 +16,8 @@ async function MemberStatsSheet({}: Props) {
 		{
 			label: "Active Members",
 			value: stats.activeMembers,
+			description:
+				"An active member is defined as a member who has checked in at least once this semester.",
 		},
 	];
 

apps/web/src/components/dash/admin/overview/KeyMetrics.tsx

@@ -10,6 +10,7 @@ import {
 	CheckCircleIcon,
 	BarChart,
 	ArrowUpIcon,
+	ArrowDownIcon,
 	UsersIcon,
 	TrendingUpIcon,
 } from "lucide-react";
@@ -117,7 +118,11 @@ export default async function KeyMetrics() {
 						<div className="text-xl font-bold sm:text-2xl">
 							{growthRate}%
 						</div>
-						<ArrowUpIcon className="h-3 w-3 text-green-500 sm:h-4 sm:w-4" />
+						{growthRate > 0 ? (
+							<ArrowUpIcon className="h-4 w-4 text-green-500" />
+						) : growthRate < 0 ? (
+							<ArrowDownIcon className="h-4 w-4 text-red-500" />
+						) : null}
 					</div>
 					<p className="text-xs text-muted-foreground">
 						vs last month

apps/web/src/components/dash/shared/StatItem.tsx

@@ -1,17 +1,35 @@
 import React from "react";
-
+import {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Info } from "lucide-react";
 export type StatItemProps = {
 	label: string;
 	value: number | string;
+	description?: string;
 };
 
 /**
  * Reusable component for displaying a single statistic with a label and value
  */
-function StatItem({ label, value }: StatItemProps) {
+function StatItem({ label, value, description }: StatItemProps) {
 	return (
 		<div className="flex flex-col p-1">
-			<span className="text-xs text-muted-foreground">{label}</span>
+			<div className="flex flex-row items-center space-x-1">
+				<span className="text-xs text-muted-foreground">{label}</span>
+				{description && (
+					<HoverCard>
+						<HoverCardTrigger className="">
+							<Info className="h-3 w-3" />
+						</HoverCardTrigger>
+						<HoverCardContent className="text-xs">
+							{description}
+						</HoverCardContent>
+					</HoverCard>
+				)}
+			</div>
 			<span className="text-lg font-semibold">{value}</span>
 		</div>
 	);