pagination

app/(auth)/dashboard/page.tsx

@@ -8,7 +8,9 @@ import React from 'react'
 
 export default async function DashboardPage() {
     const events = await queries.fetchEvents();
-    const guestBookEntries = await queries.fetchGuestBookEntries(5);
+    const guestBookData = await queries.fetchGuestBookEntries({ takeOnlyRecent: 5 });
+
+    const guestBookEntries = Array.isArray(guestBookData) ? guestBookData : guestBookData.entries;
 
     return (
         <div className='grid grid-cols-1 md:grid-cols-7 gap-4'>

app/(auth)/guest-book/page.tsx

@@ -3,11 +3,26 @@ import { queries } from '@/lib/queries'
 import { getServerSession } from 'next-auth'
 import GuestBookPageClient from '@/components/GuestBookPageClient'
 
-export default async function GuestBookPage() {
+export default async function GuestBookPage({ searchParams }: { searchParams: { page?: string } }) {
     const session = await getServerSession(authOptions)
     if (!session?.user) return <p className='text-center mt-10'>Unauthorized</p>
 
-    const entries = await queries.fetchGuestBookEntries()
+    const currentPage = Number(searchParams.page) || 1
 
-    return <GuestBookPageClient entries={entries} />
+    const guestBookData = await queries.fetchGuestBookEntries({
+        page: currentPage,
+        pageSize: 10,
+    })
+
+    const { entries, totalPages, currentPage: verifiedPage } = !Array.isArray(guestBookData)
+        ? guestBookData
+        : { entries: guestBookData, totalPages: 1, currentPage: 1 }
+
+    return (
+        <GuestBookPageClient
+            entries={entries}
+            totalPages={totalPages}
+            currentPage={verifiedPage}
+        />
+    )
 }

app/api/guestbook/paginate/route.ts

@@ -0,0 +1,24 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+
+export async function GET(req: NextRequest) {
+    const { searchParams } = new URL(req.url)
+    const cursor = searchParams.get('cursor') ?? undefined
+    const take = parseInt(searchParams.get('take') || '10', 10)
+
+    try {
+        const entries = await prisma.guestBookEntry.findMany({
+            take,
+            skip: cursor ? 1 : 0,
+            ...(cursor && { cursor: { id: cursor } }),
+            orderBy: [{ lName: 'asc' }, { fName: 'asc' }],
+        })
+
+        const nextCursor = entries.length === take ? entries[entries.length - 1].id : null
+
+        return NextResponse.json({ entries, nextCursor })
+    } catch (error) {
+        console.error('[GET GUESTBOOK PAGINATE]', error)
+        return NextResponse.json({ message: 'Failed to fetch paginated entries' }, { status: 500 })
+    }
+}

components/EventInfoDisplay.tsx

@@ -7,6 +7,8 @@ import AddGuestFromGuestBook from './AddGuestFromGuestBook'
 import EventNotesEditor from './EventNotesEditor'
 import ToDoList from './ToDoList'
 import { fetchEventTodos } from '@/lib/helper/fetchTodos'
+import EventHeader from './events/EventHeader'
+import { getDaysUntilEvent } from '@/lib/helper/getDaysUntilEvent'
 
 interface Creator {
     id: string
@@ -48,6 +50,7 @@ export default function EventInfoDisplay({ event }: Props) {
     const [todos, setTodos] = useState(event.todos)
 
     const eventGuests = event.eventGuests
+    console.log(eventGuests)
     
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')
@@ -109,11 +112,26 @@ export default function EventInfoDisplay({ event }: Props) {
         return `${d.toLocaleDateString()} ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
     }
 
+    const attendingGuests = eventGuests.filter((g) => g.rsvp === 'YES');
+    const notAttendingGuests = eventGuests.filter((g) => g.rsvp === 'NO');
+    const pendingGuests = eventGuests.filter((g) => g.rsvp === 'PENDING');
+
+    let daysLeft
+
+    if (event.date !== null) {
+        daysLeft = getDaysUntilEvent(event.date);
+    }
+
     return (
         <div className="*:bg-[#00000008] *:p-6 *:rounded-lg *:space-y-4 grid grid-cols-1 md:grid-cols-6 gap-4">
             <div className='md:col-span-6 order-first'>
+                {/* <EventHeader
+                    name={event.name}
+                    date={event.date}
+                    location={event.location}
+                /> */}
                 <div className="flex justify-between items-start col-span-6">
-                    <h2 className="text-2xl font-bold">{event.name}</h2>
+                    <h2 className="text-3xl font-bold">{event.name}</h2>
                     <button
                         onClick={() => setIsEditing(prev => !prev)}
                         className="text-sm text-brand-primary-600 underline"
@@ -134,7 +152,7 @@ export default function EventInfoDisplay({ event }: Props) {
                                 onChange={(e) => setDateTime(e.target.value)}
                             />
                         ) : (
-                            <p>{event.date ? formatDate(event.date.toDateString()) : 'N/A'}</p>
+                            <p>{event.date ? event.date.toDateString() : 'N/A'}</p>
                         )}
                     </div>
 
@@ -153,17 +171,45 @@ export default function EventInfoDisplay({ event }: Props) {
                             <p>{event.location || 'N/A'}</p>
                         )}
                     </div>
-
+                    {/* <div className="md:col-span-2 flex gap-1 text-xs w-full justify-end">
-                    {/* Creator Email */}
+                        <label>Created by</label>
-                    <div>
-                        <label className="block text-sm font-semibold">Creator Email</label>
                         <p>{event.creator.email}</p>
-                    </div>
+                        <label>at</label>
-
-                    {/* Created At */}
-                    <div className="md:col-span-2">
-                        <label className="block text-sm font-semibold">Created At</label>
                         <p>{formatDate(event.createdAt)}</p>
+                    </div> */}
+                    <div className='grid grid-cols-2 gap-2'>
+                        <div className='border border-brand-text-800 rounded-lg p-2 col-span-1'>
+                            <h3 className='text-lg font-semibold'>Guest Summary</h3>
+                            <div className=''>
+                                <div className='flex justify-between'>
+                                    <p>Invited</p>
+                                    <p className='font-bold'>{eventGuests.length}</p>
+                                </div>
+                                <div className='flex justify-between'>
+                                    <p>Attending</p>
+                                    <p className='font-bold'>{attendingGuests.length}</p>
+                                </div>
+                                <div className='flex justify-between'>
+                                    <p>Declined</p>
+                                    <p className='font-bold'>{notAttendingGuests.length}</p>
+                                </div>
+                                <div className='flex justify-between'>
+                                    <p>No Response</p>
+                                    <p className='font-bold'>{pendingGuests.length}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className='border border-brand-text-800 rounded-lg p-2 col-span-1'>
+                            <h3 className='text-lg font-semibold'>Countdown</h3>
+                            <div className=''>
+                                {daysLeft && daysLeft > 0 
+                                    ? `${daysLeft} day${daysLeft !== 1 ? 's' : ''} until the event`
+                                    : daysLeft === 0 
+                                        ? 'Today is the big day!'
+                                        : `This event happened ${Math.abs(daysLeft)} day${Math.abs(daysLeft) !== 1 ? 's' : ''} ago`
+                                }
+                            </div>
+                        </div>
                     </div>
                 </div>
                 {error && <p className="text-red-500 text-sm">{error}</p>}
@@ -178,13 +224,6 @@ export default function EventInfoDisplay({ event }: Props) {
                         </button>
                     </div>
                 )}
-                <div className='col-span-6'>
-                    <EventNotesEditor
-                        eventId={event.id}
-                        initialNotes={event.notes || ''}
-                        canEdit={['COUPLE', 'PLANNER'].includes(event.creator.role)}
-                    />
-                </div>
             </div>
             <div className='md:col-span-3 order-3 md:order-2'>
                 <div className='flex justify-between items-center'>
@@ -245,6 +284,13 @@ export default function EventInfoDisplay({ event }: Props) {
                     onUpdate={refreshTodos}
                 />
             </div>
+            <div className='col-span-6 order-last'>
+                <EventNotesEditor
+                    eventId={event.id}
+                    initialNotes={event.notes || ''}
+                    canEdit={['COUPLE', 'PLANNER'].includes(event.creator.role)}
+                />
+            </div>
         </div>
     )
 }

components/EventNotesEditor.tsx

@@ -47,7 +47,7 @@ export default function EventNotesEditor({ eventId, initialNotes, canEdit }: Pro
 
     if (!canEdit) {
         return (
-            <div className="p-4 rounded shadow">
+            <div className="p-4 rounded shadow w-full order-last">
                 <h3 className="font-semibold text-lg mb-2">Event Notes</h3>
                 <div className='prose prose-sm dark:prose-invertse'>
                     <ReactMarkdown remarkPlugins={[remarkGfm]}>{notes || '_No notes yet._'}</ReactMarkdown>

components/GuestBookPageClient.tsx

@@ -6,6 +6,7 @@ import GuestBookList from '@/components/GuestBookList'
 import TableIcon from './icons/TableIcon'
 import GuestCardIcon from './icons/GuestCardIcon'
 import BulkUploadGuest from './BulkUploadGuest'
+import { useRouter } from 'next/navigation'
 
 interface GuestBookEntry {
     id: string
@@ -18,9 +19,22 @@ interface GuestBookEntry {
     notes?: string | null
 }
 
-export default function GuestBookPageClient({ entries }: { entries: GuestBookEntry[] }) {
+export default function GuestBookPageClient({ 
+    entries,
+    totalPages,
+    currentPage, 
+}: { 
+    entries: GuestBookEntry[]
+    totalPages: number
+    currentPage: number
+}) {
     const [isOpen, setIsOpen] = useState(false);
     const [view, setView] = useState<'CARD' | 'TABLE'>('TABLE')
+    const router = useRouter()
+
+    const handlePageChange = (page: number) => {
+        router.push(`/guest-book?page=${page}`)
+    }
 
     async function handleAddGuest(data: {
         fName: string
@@ -71,6 +85,25 @@ export default function GuestBookPageClient({ entries }: { entries: GuestBookEnt
 
             <GuestBookList view={view} entries={entries} />
 
+            {totalPages > 1 && (
+                <div className='flex justify-center gap-2 mt-6'>
+                    {[...Array(totalPages)].map((_, idx) => {
+                        const pageNum = idx + 1
+                        return (
+                        <button
+                            key={pageNum}
+                            onClick={() => handlePageChange(pageNum)}
+                            className={`px-3 py-1 border rounded hover:cursor-pointer ${
+                            currentPage === pageNum ? 'bg-brand-primary-600 text-white' : 'bg-white'
+                            }`}
+                        >
+                            {pageNum}
+                        </button>
+                        )
+                    })}
+                </div>
+            )}
+
             <AddGuestBookEntryModal
                 isOpen={isOpen}
                 onClose={() => setIsOpen(false)}

components/events/EventHeader.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function EventHeader({ name, date, location }: { name: string, date?: Date | null, location?: string | null }) {
+    return (
+        <div className='w-full space-y-2'>
+            <h1 className='text-3xl font-bold'>{name}</h1>
+            <div className='flex w-full justify-between'>
+                <p className='text-sm'>{date ? date?.toDateString() : "Upcoming"} | {location}</p>
+                <button>Edit</button>
+            </div>
+        </div>
+    )
+}

lib/helper/getDaysUntilEvent.ts

@@ -0,0 +1,13 @@
+export function getDaysUntilEvent(eventDate: Date): number {
+    const today = new Date();
+    const target = new Date(eventDate);
+    
+    // Clear time from both dates to ensure accurate full-day difference
+    today.setHours(0, 0, 0, 0);
+    target.setHours(0, 0, 0, 0);
+
+    const diffInMs = target.getTime() - today.getTime();
+    const diffInDays = Math.ceil(diffInMs / (1000 * 60 * 60 * 24));
+
+    return diffInDays;
+}

lib/queries.ts

@@ -79,12 +79,47 @@ export const queries = {
         return event
     },
 
-    async fetchGuestBookEntries(amount?: number) {
+    async fetchGuestBookEntries({
-        return await prisma.guestBookEntry.findMany({
+        page,
-            orderBy: amount 
+        pageSize = 10,
-                ? { createdAt: 'desc'}
+        newestFirst = false,
-                : [{ lName: 'asc' }, { fName: 'asc' }],
+        takeOnlyRecent,
-            ...(amount ? {take: amount} : {})
+    }: {
+        page?: number
+        pageSize?: number
+        newestFirst?: boolean
+        takeOnlyRecent?: number // Optional: Just get the latest N
+    }) {
+        // ⏱ Quick recent entries (e.g., homepage)
+        if (takeOnlyRecent) {
+        const entries = await prisma.guestBookEntry.findMany({
+            take: takeOnlyRecent,
+            orderBy: { createdAt: 'desc' },
         })
+        return entries
+        }
+
+        // 📄 Paginated GuestBook view
+        const skip = ((page ?? 1) - 1) * pageSize
+
+        const [entries, totalCount] = await Promise.all([
+        prisma.guestBookEntry.findMany({
+            skip,
+            take: pageSize,
+            orderBy: newestFirst
+            ? { createdAt: 'desc' }
+            : [{ lName: 'asc' }, { fName: 'asc' }],
+        }),
+        prisma.guestBookEntry.count(),
+        ])
+
+        const totalPages = Math.ceil(totalCount / pageSize)
+
+        return {
+        entries,
+        totalPages,
+        currentPage: page ?? 1,
+        }
     },
+
 }