Fix/not attending list

src/app/(main)/lag/[id]/_components/confirm-event-attendance.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { RegistrationType } from "@prisma/client";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
@@ -24,14 +24,61 @@ import { api } from "~/trpc/react";
 
 type UserPreview = { id: string; name: string; image: string | null };
 
+type AbsenceReason = "overridden" | "not_attending" | "no_response";
+
 type RegistrationRow = {
 	id: string;
 	type: RegistrationType;
 	confirmedAbsent: boolean;
 	attendedWithoutRsvp: boolean;
+	absenceReason: AbsenceReason | null;
+	comment: string | null;
 	user: UserPreview;
 };
 
+const absenceLabel: Record<AbsenceReason, string> = {
+	overridden: "Møtte ikke likevel",
+	not_attending: "Meldte fravær",
+	no_response: "Svarte ikke",
+};
+
+function ExpandableComment({
+	id,
+	comment,
+	expanded,
+	onToggle,
+}: {
+	id: string;
+	comment: string;
+	expanded: boolean;
+	onToggle: () => void;
+}) {
+	const ref = useRef<HTMLParagraphElement>(null);
+	const [isClamped, setIsClamped] = useState(false);
+
+	useEffect(() => {
+		const el = ref.current;
+		if (el) setIsClamped(el.scrollHeight > el.clientHeight);
+	}, [id, comment]);
+
+	return (
+		<div className="text-muted-foreground text-xs">
+			<p ref={ref} className={expanded ? undefined : "line-clamp-1"}>
+				{comment}
+			</p>
+			{(isClamped || expanded) && (
+				<button
+					type="button"
+					className="underline-offset-2 hover:underline"
+					onClick={onToggle}
+				>
+					{expanded ? "Vis mindre" : "Les mer"}
+				</button>
+			)}
+		</div>
+	);
+}
+
 interface ConfirmEventAttendanceProps {
 	eventId: string;
 	eventName: string;
@@ -52,6 +99,9 @@ export default function ConfirmEventAttendance({
 	const [tab, setTab] = useState<Tab>("present");
 	const [selectedWithoutRsvpUserId, setSelectedWithoutRsvpUserId] =
 		useState<string>("");
+	const [expandedComments, setExpandedComments] = useState<Set<string>>(
+		new Set(),
+	);
 	const utils = api.useUtils();
 
 	const { data: registrations, isLoading } =
@@ -94,14 +144,27 @@ export default function ConfirmEventAttendance({
 			},
 		});
 
-	const attending = (registrations ?? []).filter(
-		(r: RegistrationRow) => r.type === "ATTENDING",
+	const present = (registrations ?? []).filter(
+		(r: RegistrationRow) => r.absenceReason === null,
+	);
+	const absent = (registrations ?? []).filter(
+		(r: RegistrationRow) => r.absenceReason !== null,
 	);
-	const present = attending.filter((r: RegistrationRow) => !r.confirmedAbsent);
-	const absent = attending.filter((r: RegistrationRow) => r.confirmedAbsent);
 
 	const list = tab === "present" ? present : absent;
 
+	function toggleComment(id: string) {
+		setExpandedComments((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) {
+				next.delete(id);
+			} else {
+				next.add(id);
+			}
+			return next;
+		});
+	}
+
 	return (
 		<Dialog
 			open={open}
@@ -110,6 +173,7 @@ export default function ConfirmEventAttendance({
 				if (!next) {
 					setTab("present");
 					setSelectedWithoutRsvpUserId("");
+					setExpandedComments(new Set());
 				}
 			}}
 		>
@@ -166,7 +230,7 @@ export default function ConfirmEventAttendance({
 											key={row.id}
 											className="flex flex-col gap-2 rounded-lg border bg-card p-3"
 										>
-											<div className="flex items-center gap-3">
+											<div className="flex items-start gap-3">
 												<Avatar>
 													<AvatarImage
 														src={row.user.image ?? undefined}
@@ -183,6 +247,19 @@ export default function ConfirmEventAttendance({
 															Uten påmelding
 														</div>
 													)}
+													{row.absenceReason && (
+														<div className="text-muted-foreground text-xs">
+															{absenceLabel[row.absenceReason]}
+														</div>
+													)}
+													{tab === "absent" && row.comment && (
+														<ExpandableComment
+															id={row.id}
+															comment={row.comment}
+															expanded={expandedComments.has(row.id)}
+															onToggle={() => toggleComment(row.id)}
+														/>
+													)}
 												</div>
 											</div>
 											{isAdmin && tab === "present" && (
@@ -203,24 +280,26 @@ export default function ConfirmEventAttendance({
 													Møtte ikke
 												</Button>
 											)}
-											{isAdmin && tab === "absent" && (
-												<Button
-													type="button"
-													size="sm"
-													variant="outline"
-													className="w-full"
-													disabled={isPending}
-													onClick={() =>
-														setConfirmedAbsentMutation({
-															eventId,
-															userId: row.user.id,
-															confirmedAbsent: false,
-														})
-													}
-												>
-													Opphev (møtte likevel)
-												</Button>
-											)}
+											{isAdmin &&
+												tab === "absent" &&
+												row.absenceReason === "overridden" && (
+													<Button
+														type="button"
+														size="sm"
+														variant="outline"
+														className="w-full"
+														disabled={isPending}
+														onClick={() =>
+															setConfirmedAbsentMutation({
+																eventId,
+																userId: row.user.id,
+																confirmedAbsent: false,
+															})
+														}
+													>
+														Opphev (møtte likevel)
+													</Button>
+												)}
 										</div>
 									))}
 								</div>

src/components/navigation/footer.tsx

@@ -5,7 +5,7 @@ import TihldeLogo from "../logo";
 
 const Footer = () => {
 	const attributes = [
-		{ id: "email", key: "E-post", value: "hs@tihlde.org" },
+		{ id: "email", key: "E-post", value: "idkom@tihlde.org" },
 		{ id: "orgNumber", key: "Organisasjonsnummer", value: "989 684 183" },
 		{ id: "location", key: "Lokasjon", value: "c/o IDI NTNU" },
 	];

src/server/api/registration/controller/get-all-by-event.ts

@@ -28,7 +28,7 @@ const handler: Controller<
 		"USER",
 	]);
 
-	const [registrations, attendances] = await Promise.all([
+	const [registrations, attendances, teamMembers] = await Promise.all([
 		db.registration.findMany({
 			where: { eventId: input.eventId },
 			include: {
@@ -42,6 +42,12 @@ const handler: Controller<
 				user: { select: { id: true, name: true, image: true } },
 			},
 		}),
+		db.teamMember.findMany({
+			where: { teamId: event.teamId },
+			include: {
+				user: { select: { id: true, name: true, image: true } },
+			},
+		}),
 	]);
 
 	const absentUserIds = new Set(
@@ -50,12 +56,26 @@ const handler: Controller<
 	const attendingUserIds = new Set(
 		registrations.filter((r) => r.type === "ATTENDING").map((r) => r.userId),
 	);
+	const registeredUserIds = new Set(registrations.map((r) => r.userId));
+	const manualAttendanceUserIds = new Set(
+		attendances.filter((a) => a.source === "MANUAL").map((a) => a.userId),
+	);
+
+	const now = new Date();
 
 	return [
-		...registrations.map((reg) => ({
+		...registrations
+		.filter((reg) => !manualAttendanceUserIds.has(reg.userId))
+		.map((reg) => ({
 			...reg,
 			confirmedAbsent: absentUserIds.has(reg.userId),
 			attendedWithoutRsvp: false,
+			absenceReason:
+				reg.type === "NOT_ATTENDING"
+					? ("not_attending" as const)
+					: absentUserIds.has(reg.userId)
+						? ("overridden" as const)
+						: null,
 		})),
 		...attendances
 			.filter((a) => a.source === "MANUAL" && !attendingUserIds.has(a.userId))
@@ -64,13 +84,33 @@ const handler: Controller<
 				type: "ATTENDING" as const,
 				confirmedAbsent: a.status === "ABSENT",
 				attendedWithoutRsvp: true,
+				absenceReason: a.status === "ABSENT" ? ("overridden" as const) : (null as null),
 				userId: a.userId,
 				eventId: a.eventId,
 				comment: null,
 				user: a.user,
 				createdAt: a.createdAt,
 				updatedAt: a.updatedAt,
 			})),
+		...teamMembers
+			.filter(
+				(m) =>
+					!registeredUserIds.has(m.userId) &&
+					!manualAttendanceUserIds.has(m.userId),
+			)
+			.map((m) => ({
+				id: m.id,
+				type: "NOT_ATTENDING" as const,
+				confirmedAbsent: false,
+				attendedWithoutRsvp: false,
+				absenceReason: "no_response" as const,
+				userId: m.userId,
+				eventId: input.eventId,
+				comment: null,
+				user: m.user,
+				createdAt: now,
+				updatedAt: now,
+			})),
 	].sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
 };