managing rsvps

README.md

@@ -13,17 +13,17 @@ My goal for this project is to be an all-in-one self hosted event planner for ma
     - [x] Invite users via email (smtp) users can be COUPLE, PLANNER, GUEST
     - [x] Create local accounts (no use of SMTP)
 - [x] Creating and Editing custom events
-    - [ ] Information about each event
+    - [x] Information about each event
         - Date/Time
         - Event type
         - Details
         - Location
 - [x] Guest book (contact information)
     - [x] Ability to switch between table or card view
-    - [ ] Add Guests to events
+    - [x] Add Guests to events
     - [ ] Invite guests via email
     - [ ] Create local account for guest
-- [ ] Managing RSVP lists
+- [x] Managing RSVP lists
 - [ ] Guest accounts
 - [ ] Gift Registries
     - [ ] Ability for guests to mark an item as purchased
@@ -55,6 +55,12 @@ My goal for this project is to be an all-in-one self hosted event planner for ma
 - added ability to add and edit guests to guest book
 - save guest infomation (name, email, phone, address, side (which side of the couple), notes)
 
+#### 6.28.25
+### RSVP List
+- add guests from GuestBook to any event
+- search GuestBook to add guests
+- change status of RSVP
+
 ## Getting Started
 This is very much a work in progress but this `README` will stay up to date on working features and steps to get it running **in its current state**. That being said if you're interested in starting it as is, you can follow these instructions.
 

app/(auth)/dashboard/page.tsx

@@ -1,3 +1,7 @@
+import AddFirstGuestBookEntryClient from '@/components/AddFirstGuestBookEntryClient'
+import AddGuestBookEntryModal from '@/components/AddGuestBookEntryModal'
+import CreateEventClient from '@/components/CreateEventClient'
+import DashboardNavbar from '@/components/DashboardNavbar'
 import EventInfoQuickView from '@/components/EventInfoQuickView'
 import GuestBookQuickView from '@/components/GuestBookQuickView'
 import { prisma } from '@/lib/prisma'
@@ -9,32 +13,21 @@ import React from 'react'
 export default async function DashboardPage() {
     const events = await queries.fetchEvents();
     const guestBookEntries = await queries.fetchGuestBookEntries(5);
-    const session = await getServerSession()
+    const session = await getServerSession();
 
     const user = await prisma.user.findUnique({
         where: { email: session?.user.email }
     })
-    // console.log(events)
 
     return (
-        <div className='max-w-[100rem] mx-auto'>
-            <div className='grid grid-cols-5 grid-rows-5 gap-4'>
-                <div className='row-span-5 bg-[#00000008] rounded-xl p-6'>
-                    <div className='py-4'>
-                        <h2 className='text-lg font-semibold'>Hello, {user?.username}</h2>
-                    </div>
-                    <div className='bg-brand-primary-800 p-4 rounded-lg'>Overview</div>
-                </div>
-                <div className='col-span-3 row-span-3 bg-[#00000008] rounded-xl p-6 relative'>
+        <div className='grid grid-cols-7 gap-4'>
+            <div className='col-span-5 row-span-3 bg-[#00000008] rounded-xl p-6 relative'>
                     <div>
                         <div className='w-full flex items-center justify-between'>
                             <h2 className='text-lg font-semibold py-4'>Your Events</h2>
-                            <button
-                                className='btn btn-primary h-fit'
-                            >
-                                Create Event
-                            </button>
+                            <CreateEventClient />
                         </div>
+                        {!events.length && <>You don&apos;t have any events yet. Create your first event.</>}
                         <div className='grid grid-cols-3'>
                             {events.map((item) => (
                                 <EventInfoQuickView key={item.id} {...item} />
@@ -45,7 +38,7 @@ export default async function DashboardPage() {
                         View all
                     </Link>
                 </div>
-                <div className='row-span-5 col-start-5 bg-[#00000008] rounded-xl p-6'>
+                <div className='row-span-5 col-start-6 col-span-2 bg-[#00000008] rounded-xl p-6'>
                     <div className='py-4 flex justify-between'>
                         <h2 className='text-lg font-semibold'>Guest Book</h2>
                         <Link 
@@ -56,34 +49,12 @@ export default async function DashboardPage() {
                         </Link>
                     </div>
                     <div className='space-y-2'>
+                        {!guestBookEntries.length && <AddFirstGuestBookEntryClient />}
                         {guestBookEntries.map(entry => (
                             <GuestBookQuickView key={entry.id} {...entry} />
                         ))}
                     </div>
                 </div>
-            </div>
-            {/* <div className='border rounded-lg max-w-6xl mx-auto p-6 space-y-4'>
-                <h2 className='text-xl font-bold'>Your Events</h2>
-                {events.map((item) => (
-                    <Link key={item.id} href={`/events/${item.id}`} >
-                        <div className='hover:cursor-pointer border rounded-xl p-2'>
-                            <p>ID: {item.id}</p>
-                            <p>Name: <strong>{item.name}</strong></p>
-                            <p>Date: {item.date ? item.date.toISOString() : 'null'}</p>
-                            <p>Location: {item.location ? item.location : 'null'}</p>
-                            <p>Created By: {item.creator.username}</p>
-                            <p>Created At: {item.createdAt.toISOString()}</p>
-                            
-                        </div>
-                    </Link>
-                ))}
-                <Link
-                    href={'/events'}
-                    className='underline'
-                >
-                    See all events
-                </Link>
-            </div> */}
         </div>
     )
 }

app/(auth)/events/[eventId]/page.tsx

@@ -9,16 +9,13 @@ export default async function SingleEventPage({ params }: { params: { eventId: s
     console.log(data)
     
     return (
-        <div>
+        <div className='max-w-[100rem] mx-auto'>
             {data ? (
                 // @ts-ignore
                 <EventInfoDisplay event={data} />
             ) : (
                 <p className="text-center text-gray-500 mt-10">Event not found.</p>
             )}
-            {data?.name && (
-                <HeadingWithEdit title={data?.name} eventId={data.id} />
-            )}
         </div>
     )
 }

app/(auth)/events/create/page.tsx

@@ -1,32 +0,0 @@
-'use client'
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-
-export default function CreateEventPage() {
-    const [name, setName] = useState('');
-    const router = useRouter();
-
-    async function handleSubmit(e: React.FormEvent) {
-        e.preventDefault();
-        const res = await fetch('/api/events', {
-            method: 'POST',
-            body: JSON.stringify({ name }),
-        });
-        const data = await res.json();
-        router.push(`/events/${data.id}`);
-    }
-
-    return (
-        <form onSubmit={handleSubmit} className="max-w-md space-y-4">
-            <h2 className="text-xl font-bold">Create Event</h2>
-            <input
-                type="text"
-                placeholder="Event Name"
-                className="input input-bordered w-full"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-            />
-            <button className="btn btn-primary">Create</button>
-        </form>
-    );
-}

app/(auth)/layout.tsx

@@ -1,19 +1,22 @@
 'use client'
 
-import { SessionProvider, useSession } from 'next-auth/react'
+import { SessionProvider } from 'next-auth/react'
 import { redirect } from 'next/navigation'
 import { ReactNode } from 'react'
-import Navbar from '@/components/Navbar'
+import DashboardNavbar from '@/components/DashboardNavbar'
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
     
     return (
         <>
             <SessionProvider>
-                <Navbar />
-                <main className="p-4">
-                    {/* Could also add a private header here */}
-                    {children}
+                <main className="p-4 max-w-[100rem] mx-auto">
+                    <div className='grid grid-cols-5 gap-4'>
+                        <DashboardNavbar />
+                        <section className="col-span-4">
+                        {children}
+                        </section>
+                    </div>
                 </main>
             </SessionProvider>
         </>

app/(public)/setup/page.tsx

@@ -14,11 +14,11 @@ export default function SetupPage() {
 
         const res = await fetch('/api/setup', {
             method: 'POST',
-            body: JSON.stringify({ email, password, role }),
+            body: JSON.stringify({ username, email, password, role }),
         });
 
         if (res.ok) {
-            await signIn('credentials', { email, password, callbackUrl: '/' });
+            await signIn('credentials', { username, email, password, callbackUrl: '/' });
         } else {
             alert('Error setting up user');
         }

app/api/events/[eventId]/guests/add/route.ts

@@ -3,14 +3,14 @@ import { mutations } from '@/lib/mutations'
 
 export async function POST(req: NextRequest, { params }: { params: { eventId: string } }) {
     const eventId = params.eventId
-    const { guestBookEntryId } = await req.json()
+    const { guestId } = await req.json() // ← match client
 
-    if (!eventId || !guestBookEntryId) {
-        return NextResponse.json({ message: 'Missing eventId or guestBookEntryId' }, { status: 400 })
+    if (!eventId || !guestId) {
+        return NextResponse.json({ message: 'Missing eventId or guestId' }, { status: 400 })
     }
 
     try {
-        const added = await mutations.addEventGuest({ eventId, guestBookEntryId })
+        const added = await mutations.addEventGuest({ eventId, guestBookEntryId: guestId }) // ← match expected arg
         return NextResponse.json(added)
     } catch (error) {
         console.error('Add Event Guest Error:', error)

app/api/events/create/route.ts

@@ -0,0 +1,24 @@
+import { getServerSession } from 'next-auth'
+import { NextRequest, NextResponse } from 'next/server'
+import { authOptions } from '@/app/api/auth/[...nextauth]/route'
+import { prisma } from '@/lib/prisma'
+
+export async function POST(req: NextRequest) {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.id) {
+        return new NextResponse('Unauthorized', { status: 403 })
+    }
+
+    const { name, date, location } = await req.json()
+
+    const event = await prisma.event.create({
+        data: {
+            name,
+            date: date ? new Date(date) : undefined,
+            location,
+            creatorId: session.user.id,
+        },
+    })
+
+    return NextResponse.json(event)
+}

app/api/events/route.ts

@@ -1,21 +0,0 @@
-import { getServerSession } from 'next-auth'
-import { authOptions } from '@/app/api/auth/[...nextauth]/route'
-import { mutations } from '@/lib/mutations';
-import { NextRequest, NextResponse } from 'next/server';
-
-export async function POST(req: NextRequest) {
-    const session = await getServerSession(authOptions)
-    if (!session?.user) return new NextResponse('Unauthorized', { status: 401 });
-
-    const body = await req.json();
-    const { name, date, location } = body;
-
-    const event = await mutations.createEvent({
-        name,
-        date,
-        location,
-        creatorId: session.user.id,
-    });
-
-    return NextResponse.json(event)
-}

app/api/guestbook/search/route.ts

@@ -0,0 +1,29 @@
+// api/guestbook/search/route.ts
+import { prisma } from '@/lib/prisma'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(req: NextRequest) {
+    const { searchParams } = new URL(req.url)
+    const query = searchParams.get('search') // ✅ Match the client-side key
+
+    if (!query || query.length < 2) {
+        return NextResponse.json([], { status: 200 })
+    }
+
+    const results = await prisma.guestBookEntry.findMany({
+        where: {
+            OR: [
+                { fName: { contains: query, mode: 'insensitive' } },
+                { lName: { contains: query, mode: 'insensitive' } },
+                { email: { contains: query, mode: 'insensitive' } },
+            ]
+        },
+        orderBy: [
+            { lName: 'asc' },
+            { fName: 'asc' },
+        ],
+        take: 10
+    })
+
+    return NextResponse.json(results)
+}

components/AddFirstGuestBookEntryClient.tsx

@@ -0,0 +1,24 @@
+'use client'
+import React, { useState } from 'react'
+import AddGuestBookEntryModal from './AddGuestBookEntryModal';
+import { handleAddGuest } from '@/lib/helper/addGuest';
+
+export default function AddFirstGuestBookEntryClient() {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+       <div className='w-full flex flex-col gap-2'>
+            <p className='text-sm'>You haven&apos;t added anyone to your guest book yet.</p>
+            <button
+                className='btn btn-primary'
+                onClick={() => setIsOpen(true)}
+            >
+                Add your first guest
+            </button>
+            <AddGuestBookEntryModal
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                onSubmit={handleAddGuest}
+            />
+        </div>
+    )
+}

components/AddGuestFromGuestBook.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+interface GuestBookEntry {
+    id: string
+    fName: string
+    lName: string
+    email?: string | null
+    side?: string
+}
+
+interface Props {
+    eventId: string
+    onGuestAdded?: (guestId: string) => void
+}
+
+export default function AddGuestFromGuestBook({ eventId, onGuestAdded }: Props) {
+    const [searchTerm, setSearchTerm] = useState('')
+    const [filteredGuests, setFilteredGuests] = useState<GuestBookEntry[]>([])
+    const [allGuests, setAllGuests] = useState<GuestBookEntry[]>([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState('')
+
+    useEffect(() => {
+        if (searchTerm.length < 2) {
+            setFilteredGuests([])
+            return
+        }
+
+        async function fetchGuests() {
+            setIsLoading(true)
+            try {
+                const res = await fetch(`/api/guestbook/search?search=${encodeURIComponent(searchTerm)}`)
+                const data = await res.json()
+                setAllGuests(data)
+            } catch (err) {
+                console.error(err)
+                setError('Failed to fetch guest book entries.')
+            } finally {
+                setIsLoading(false)
+            }
+        }
+
+        fetchGuests()
+    }, [searchTerm])
+
+
+    useEffect(() => {
+            const filtered = allGuests.filter((guest) => {
+            const fullName = `${guest.fName} ${guest.lName}`.toLowerCase()
+            return fullName.includes(searchTerm.toLowerCase())
+        })
+        setFilteredGuests(filtered)
+    }, [searchTerm, allGuests])
+
+    async function handleAdd(guestId: string) {
+        try {
+            const res = await fetch(`/api/events/${eventId}/guests/add`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ guestId }),
+            })
+
+            if (!res.ok) {
+                const data = await res.json()
+                throw new Error(data.message || 'Failed to add guest to event')
+            }
+
+            if (onGuestAdded) onGuestAdded(guestId)
+
+            setSearchTerm('')
+        } catch (err) {
+            console.error(err)
+            setError('Could not add guest to event.')
+        }
+    }
+
+    return (
+        <div className="relative mt-2">
+            <input
+                type="text"
+                className="input border border-brand-primary-900 bg-white rounded-lg p-1 w-full"
+                placeholder="Search guest book..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+            />
+
+            {searchTerm && (
+                <ul className="absolute z-10 mt-2 w-full bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto">
+                    {isLoading ? (
+                        <li className="p-2 text-sm text-gray-500">Loading...</li>
+                    ) : filteredGuests.length === 0 ? (
+                        <li className="p-2 text-sm text-gray-500">No matches found</li>
+                    ) : (
+                        filteredGuests.map((guest) => (
+                        <li
+                            key={guest.id}
+                            className="p-2 hover:bg-gray-100 cursor-pointer text-sm"
+                            onClick={() => handleAdd(guest.id)}
+                        >
+                            {guest.fName} {guest.lName} {guest.side ? `(${guest.side})` : ''}
+                            {guest.email ? ` – ${guest.email}` : ''}
+                        </li>
+                        ))
+                    )}
+                </ul>
+            )}
+
+            {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
+        </div>
+    )
+}

components/CreateEventClient.tsx

@@ -0,0 +1,23 @@
+'use client'
+import React, { useState } from 'react'
+import CreateEventModal from './CreateEventModal'
+import { handleCreateEvent } from '@/lib/helper/createEvent';
+
+export default function CreateEventClient() {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <>
+            <button
+                className='btn btn-primary h-fit'
+                onClick={() => setIsOpen(true)}
+            >
+                Create Event
+            </button>
+            <CreateEventModal
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                onSubmit={handleCreateEvent}
+            />
+        </>
+    )
+}

components/CreateEventModal.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
+import { Fragment, useState } from 'react'
+
+export default function CreateEventModal({
+    isOpen,
+    onClose,
+    onSubmit
+}: {
+    isOpen: boolean
+    onClose: () => void
+    onSubmit: (data: { name: string; date?: string; location?: string }) => void
+}) {
+    const [name, setName] = useState('')
+    const [date, setDate] = useState('')
+    const [location, setLocation] = useState('')
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault()
+        onSubmit({ name, date, location })
+        setName('')
+        setDate('')
+        setLocation('')
+        onClose()
+    }
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-50" onClose={onClose}>
+                <TransitionChild
+                    as={Fragment}
+                    enter="ease-out duration-200"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-150"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-black bg-opacity-30" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 flex items-center justify-center p-4">
+                    <TransitionChild
+                        as={Fragment}
+                        enter="ease-out duration-200"
+                        enterFrom="opacity-0 scale-95"
+                        enterTo="opacity-100 scale-100"
+                        leave="ease-in duration-150"
+                        leaveFrom="opacity-100 scale-100"
+                        leaveTo="opacity-0 scale-95"
+                    >
+                        <DialogPanel className="w-full max-w-lg transform overflow-hidden rounded bg-white p-6 text-left shadow-xl transition-all">
+                            <DialogTitle className="text-lg font-bold mb-4">Create New Event</DialogTitle>
+                            <form onSubmit={handleSubmit} className="space-y-4">
+                                <input
+                                    className="input input-bordered w-full"
+                                    type="text"
+                                    placeholder="Event Name"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    required
+                                />
+                                <input
+                                    className="input input-bordered w-full"
+                                    type="datetime-local"
+                                    placeholder="Date"
+                                    value={date}
+                                    onChange={(e) => setDate(e.target.value)}
+                                />
+                                <input
+                                    className="input input-bordered w-full"
+                                    type="text"
+                                    placeholder="Location"
+                                    value={location}
+                                    onChange={(e) => setLocation(e.target.value)}
+                                />
+                                <div className="flex justify-end space-x-2">
+                                    <button type="button" onClick={onClose} className="btn btn-outline">
+                                        Cancel
+                                    </button>
+                                    <button type="submit" className="btn btn-primary">
+                                        Create
+                                    </button>
+                                </div>
+                            </form>
+                        </DialogPanel>
+                    </TransitionChild>
+                </div>
+            </Dialog>
+        </Transition>
+    )
+}

components/DashboardNavbar.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { useSession } from 'next-auth/react'
+import Link from 'next/link'
+import React from 'react'
+
+export default function DashboardNavbar() {
+    const session = useSession()
+    console.log(session)
+    return (
+        <div className='bg-[#00000008] rounded-xl p-6 flex flex-col gap-2'>
+            <h2 className='text-lg font-semibold'>Hello, {session.data?.user.username}</h2>
+            <div className='*:bg-[#00000010] *:hover:bg-brand-primary-700 *:transition-colors *:duration-200 *:p-4 *:rounded-lg *:w-full flex flex-col gap-2'>
+                <Link href={'/dashboard'} className='bg-brand-primary-800'>Overview</Link>
+                <Link href={'/events'} className=''>Events</Link>
+                <Link href={'/guest-book'} className=''>Guest Book</Link>
+            </div>
+        </div>
+    )
+}

components/EventInfoDisplay.tsx

@@ -3,6 +3,7 @@
 'use client'
 
 import React, { useState } from 'react'
+import AddGuestFromGuestBook from './AddGuestFromGuestBook'
 
 interface Creator {
     id: string
@@ -20,6 +21,7 @@ interface EventData {
     createdAt: string
     creator: Creator
     guests: any[]
+    eventGuests: any[]
 }
 
 interface Props {
@@ -27,7 +29,11 @@ interface Props {
 }
 
 export default function EventInfoDisplay({ event }: Props) {
-    const [isEditing, setIsEditing] = useState(false)
+    const [isEditing, setIsEditing] = useState(false);
+    const [showSearch, setShowSearch] = useState(false);
+
+    const eventGuests = event.eventGuests
+    console.log(eventGuests)
     
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')
@@ -75,98 +81,160 @@ export default function EventInfoDisplay({ event }: Props) {
         }
     }
 
+    // async function handleChangeRsvp(e: any) {
+    //     const newRsvp = e.target.value as 'YES' | 'NO' | 'PENDING';
+
+    //     try {
+    //         const res = await fetch(
+    //             `/api/events/${guest.eventId}/guests/${guest.guestBookEntryId}/rsvp`,
+    //             {
+    //                 method: 'PATCH',
+    //                 headers: { 'Content-Type': 'application/json' },
+    //                 body: JSON.stringify({ rsvp: newRsvp }),
+    //             }
+    //         );
+
+    //         if (!res.ok) {
+    //             throw new Error('Failed to update RSVP');
+    //         }
+
+    //         // Optionally trigger re-fetch or state update here
+    //     } catch (err) {
+    //         console.error('RSVP update error:', err);
+    //         // Optionally show error message in UI
+    //     }
+    // }
+
     function formatDate(date: string) {
         const d = new Date(date)
         return `${d.toLocaleDateString()} ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
     }
 
     return (
-        <div className="border p-6 rounded-lg shadow bg-white space-y-4">
-            <div className="flex justify-between items-start">
-                <h2 className="text-2xl font-bold">Event Info</h2>
-                <button
-                onClick={() => setIsEditing(prev => !prev)}
-                className="text-sm text-blue-600 underline"
-                >
-                {isEditing ? 'Cancel' : 'Edit'}
-                </button>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {/* Event Name */}
-                <div>
-                    <label className="block text-sm font-semibold">Event Name</label>
-                    {isEditing ? (
-                        <input
-                            name="name"
-                            type="text"
-                            className="input input-bordered w-full"
-                            value={form.name}
-                            onChange={handleChange}
-                            required
-                        />
-                    ) : (
-                        <p>{event.name}</p>
-                    )}
-                </div>
-
-                {/* Event Date */}
-                <div>
-                    <label className="block text-sm font-semibold">Date</label>
-                    {isEditing ? (
-                        <input
-                            type="datetime-local"
-                            className="input input-bordered w-full"
-                            value={dateTime}
-                            onChange={(e) => setDateTime(e.target.value)}
-                        />
-                    ) : (
-                        <p>{event.date ? formatDate(event.date.toDateString()) : 'N/A'}</p>
-                    )}
-                </div>
-
-                {/* Location */}
-                <div>
-                    <label className="block text-sm font-semibold">Location</label>
-                    {isEditing ? (
-                        <input
-                            name="location"
-                            type="text"
-                            className="input input-bordered w-full"
-                            value={form.location}
-                            onChange={handleChange}
-                        />
-                    ) : (
-                        <p>{event.location || 'N/A'}</p>
-                    )}
-                </div>
-
-                {/* Creator Email */}
-                <div>
-                    <label className="block text-sm font-semibold">Creator Email</label>
-                    <p>{event.creator.email}</p>
-                </div>
-
-                {/* 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>
-
-            {error && <p className="text-red-500 text-sm">{error}</p>}
-
-            {isEditing && (
-                <div className="text-right">
+        <div className="*:bg-[#00000008] *:p-6 *:rounded-lg *:space-y-4 grid grid-cols-6 gap-4">
+            <div className='col-span-6'>
+                <div className="flex justify-between items-start col-span-6">
+                    <h2 className="text-2xl font-bold">{event.name}</h2>
                     <button
-                        onClick={handleSave}
-                        disabled={saving}
-                        className="btn btn-primary"
+                        onClick={() => setIsEditing(prev => !prev)}
+                        className="text-sm text-brand-primary-600 underline"
                     >
-                        {saving ? 'Saving...' : 'Save Changes'}
+                        {isEditing ? 'Cancel' : 'Edit'}
                     </button>
                 </div>
-            )}
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 col-span-6">
+                    {/* Event Date */}
+                    <div>
+                        <label className="block text-sm font-semibold">Date</label>
+                        {isEditing ? (
+                            <input
+                                type="datetime-local"
+                                className="input input-bordered w-full"
+                                value={dateTime}
+                                onChange={(e) => setDateTime(e.target.value)}
+                            />
+                        ) : (
+                            <p>{event.date ? formatDate(event.date.toDateString()) : 'N/A'}</p>
+                        )}
+                    </div>
+
+                    {/* Location */}
+                    <div>
+                        <label className="block text-sm font-semibold">Location</label>
+                        {isEditing ? (
+                            <input
+                                name="location"
+                                type="text"
+                                className="input input-bordered w-full"
+                                value={form.location}
+                                onChange={handleChange}
+                            />
+                        ) : (
+                            <p>{event.location || 'N/A'}</p>
+                        )}
+                    </div>
+
+                    {/* Creator Email */}
+                    <div>
+                        <label className="block text-sm font-semibold">Creator Email</label>
+                        <p>{event.creator.email}</p>
+                    </div>
+
+                    {/* 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>
+                 {error && <p className="text-red-500 text-sm">{error}</p>}
+                {isEditing && (
+                    <div className="text-right">
+                        <button
+                            onClick={handleSave}
+                            disabled={saving}
+                            className="btn btn-primary"
+                        >
+                            {saving ? 'Saving...' : 'Save Changes'}
+                        </button>
+                    </div>
+                )}
+            </div>
+            <div className='col-span-3'>
+                <div className='flex justify-between items-center'>
+                    <h2 className='text-xl font-semibold'>Guest List</h2>
+                    <button
+                        className='btn btn-primary'
+                        onClick={() => setShowSearch(true)}
+                    >
+                        Add Guests
+                    </button>
+                </div>
+                {showSearch && <AddGuestFromGuestBook eventId={event.id} />}
+                <ul className='space-y-2'>
+                    {eventGuests.length && eventGuests.map(guest => (
+                        <li key={guest.id} className='bg-brand-primary-900 rounded-lg p-4 flex justify-between'>
+                            <p>{guest.guestBookEntry.fName + " " + guest.guestBookEntry.lName}</p>
+                            <select 
+                                value={guest.rsvp}
+                                onChange={
+                                    async (e) => {
+                                        const newRsvp = e.target.value as 'YES' | 'NO' | 'PENDING';
+
+                                        try {
+                                            const res = await fetch(
+                                                `/api/events/${guest.eventId}/guests/${guest.guestBookEntryId}/rsvp`,
+                                                {
+                                                    method: 'PATCH',
+                                                    headers: { 'Content-Type': 'application/json' },
+                                                    body: JSON.stringify({ rsvp: newRsvp }),
+                                                }
+                                            );
+
+                                            if (!res.ok) {
+                                                throw new Error('Failed to update RSVP');
+                                            }
+
+                                            // Optionally trigger re-fetch or state update here
+                                        } catch (err) {
+                                            console.error('RSVP update error:', err);
+                                            // Optionally show error message in UI
+                                        }
+                                    }
+                                }
+                            >
+                                <option value="PENDING">Pending</option>
+                                <option value="YES">Yes</option>
+                                <option value="NO">No</option>
+                            </select>
+                        </li>
+                    ))}
+                </ul>
+                
+            </div>
+            <div>
+                Vendors
+            </div>
         </div>
     )
 }

lib/helper/addGuest.ts

@@ -0,0 +1,26 @@
+export async function handleAddGuest(data: {
+    fName: string
+    lName: string
+    email?: string
+    phone?: string
+    address?: string
+    side: string
+    notes?: string
+}) {
+    try {
+        const res = await fetch('/api/guestbook/add', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+        })
+
+        if (!res.ok) {
+            const { message } = await res.json()
+            throw new Error(message || 'Failed to add guest')
+        }
+
+        // Optionally: re-fetch entries or mutate state here
+    } catch (err) {
+        console.error('Error adding guest:', err)
+    }
+}

lib/helper/createEvent.ts

@@ -0,0 +1,23 @@
+export async function handleCreateEvent(data: {
+    name: string
+    date?: string
+    location?: string
+}) {
+    try {
+        const res = await fetch('/api/events/create', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+        })
+
+        if (!res.ok) {
+            const { message } = await res.json()
+            throw new Error(message || 'Failed to create event')
+        }
+
+        // Optionally return or mutate data
+        return await res.json()
+    } catch (err) {
+        console.error('Error creating event:', err)
+    }
+}

lib/queries.ts

@@ -12,7 +12,7 @@ export const queries = {
                 }
             }
         })
-        console.log(allEvents)
+        
         return allEvents;
     },
 
@@ -65,7 +65,12 @@ export const queries = {
                 creator: {
                     select: { id: true, email: true, name: true, role: true },
                 },
-                guests: true
+                guests: true,
+                eventGuests: {
+                    include: {
+                        guestBookEntry: true,
+                    }
+                },
             }
         })
         return event