feat: ✨ adding queries for meeting cards + styling page UI

src/app/summary/page.tsx

@@ -1,13 +1,11 @@
-import { Add } from "@mui/icons-material";
-import { Button } from "@mui/material";
-import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
-// import { GroupsDisplay } from "@/components/summary/GroupsDisplay";
 import { Meetings } from "@/components/summary/meetings";
 import { getCurrentSession } from "@/lib/auth";
+import { buildScheduledLabel } from "@/lib/meetings/utils";
 import {
 	getMeetings,
-	getScheduledTimeBlocks,
+	getResponderCountsByMeetingIds,
+	getScheduledMeetingsByMeetingIds,
 } from "@/server/data/meeting/queries";
 
 export default async function Page() {
@@ -22,24 +20,46 @@ export default async function Page() {
 	}
 
 	const meetings = await getMeetings(memberId);
-	// Fetch scheduled time blocks for each meeting
-	const scheduledTimeBlocksByMeetingId = Object.fromEntries(
-		await Promise.all(
-			meetings.map(async (meeting) => {
-				const blocks = meeting.scheduled
-					? await getScheduledTimeBlocks(meeting.id)
-					: [];
-				return [meeting.id, blocks] as const;
-			}),
+	const meetingIds = meetings.map((m) => m.id);
+	const [meetingCounts, scheduledMeetingMap] = await Promise.all([
+		getResponderCountsByMeetingIds(meetingIds),
+		getScheduledMeetingsByMeetingIds(
+			meetings.filter((m) => m.scheduled).map((m) => m.id),
 		),
+	]);
+
+	const scheduledLabels: Record<string, string> = {};
+	const scheduledDates: Record<string, number> = {};
+	for (const [id, sm] of Object.entries(scheduledMeetingMap)) {
+		scheduledLabels[id] = buildScheduledLabel(
+			sm.scheduledDate,
+			sm.scheduledFromTime,
+			sm.scheduledToTime,
+		);
+		scheduledDates[id] = sm.scheduledDate.getTime();
+	}
+
+	const startOfToday = new Date();
+	startOfToday.setUTCHours(0, 0, 0, 0);
+	const threeDaysLater = new Date(
+		startOfToday.getTime() + 3 * 24 * 60 * 60 * 1000,
 	);
+	const upcomingMeetingIds = Object.entries(scheduledMeetingMap)
+		.filter(
+			([, sm]) =>
+				sm.scheduledDate >= startOfToday && sm.scheduledDate <= threeDaysLater,
+		)
+		.map(([id]) => id);
 
 	return (
-		<div className="px-8 py-8">
+		<div className="px-4 py-8 sm:px-8">
 			<Meetings
 				meetings={meetings}
 				userId={memberId}
-				scheduledTimeBlocksByMeetingId={scheduledTimeBlocksByMeetingId}
+				meetingCounts={meetingCounts}
+				scheduledLabels={scheduledLabels}
+				scheduledDates={scheduledDates}
+				upcomingMeetingIds={upcomingMeetingIds}
 			/>
 		</div>
 	);

src/components/groups/group-member-list.tsx

@@ -26,6 +26,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { useMemo, useState, useTransition } from "react";
+import { FilterChip } from "@/components/ui/filter-chip";
 import {
 	Select,
 	SelectContent,
@@ -41,7 +42,6 @@ import { isAnchorDateString, WEEKDAYS } from "@/lib/types/chrono";
 import { createGroupInvite } from "@/server/actions/group/invite/create/action";
 import { updateMemberRole } from "@/server/actions/group/update-member-role/action";
 import type { MeetingWithStats } from "@/server/data/groups/queries";
-import { FilterChip } from "./groups-page";
 
 type Member = {
 	userId: string;

src/components/groups/groups-page.tsx

@@ -6,6 +6,7 @@ import { Search } from "lucide-react";
 import { useMemo, useState } from "react";
 import { CreateGroupDialog } from "@/components/groups/create-group-dialog";
 import { GroupCard } from "@/components/groups/group-card";
+import { FilterChip } from "@/components/ui/filter-chip";
 import type { GroupWithDetails } from "@/server/data/groups/queries";
 import { InviteDecision } from "./invite-decisions";
 
@@ -285,35 +286,3 @@ export function GroupsPage({ groups }: GroupsPageProps) {
 		</Box>
 	);
 }
-
-export function FilterChip({
-	label,
-	count,
-	active,
-	onClick,
-}: {
-	label: string;
-	count: number;
-	active: boolean;
-	onClick: () => void;
-}) {
-	return (
-		<Button
-			onClick={onClick}
-			disableElevation
-			sx={{
-				bgcolor: active ? "secondary.main" : "action.hover",
-				color: active ? "secondary.contrastText" : "text.primary",
-				"&:hover": {
-					bgcolor: active ? "secondary.dark" : "action.selected",
-				},
-				boxShadow: "none",
-				borderRadius: 1,
-				fontWeight: 600,
-				fontSize: "1rem",
-			}}
-		>
-			{label} {count}
-		</Button>
-	);
-}