event dashbaord

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

@@ -1,20 +1,24 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import EventInfoDisplay from '@/components/EventInfoDisplay'
+import EventDashboard from '@/components/events/EventDashboard'
 import { queries } from '@/lib/queries'
 import React from 'react'
 
 export default async function SingleEventPage({ params }: { params: { eventId: string }}) {
     const data = await queries.singleEvent(params.eventId)
-    console.log(data)
     
     return (
-        <div className=''>
+        <>
+        <EventDashboard 
+            event={data}
+        />
+        {/* <div className=''>
+            
             {data ? (
                 // @ts-ignore
                 <EventInfoDisplay event={data} />
             ) : (
                 <p className="text-center text-gray-500 mt-10">Event not found.</p>
             )}
-        </div>
+        </div> */}
+        </>
     )
 }

components/EventInfoDisplay.tsx

@@ -50,7 +50,7 @@ export default function EventInfoDisplay({ event }: Props) {
     const [todos, setTodos] = useState(event.todos)
 
     const eventGuests = event.eventGuests
-    console.log(eventGuests)
+    // console.log(eventGuests)
     
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')

components/EventNotesEditor.tsx

@@ -66,9 +66,6 @@ export default function EventNotesEditor({ eventId, initialNotes, canEdit }: Pro
 
     return (
         <div>
-            <p className='text-sm font-semibold mb-1 flex gap-1 items-center'>
-                Notes 
-            </p>
             <div
                 className="prose prose-brand rounded-lg textarea-bordered p-4 w-full min-h-[120px] cursor-text"
                 onClick={() => {

components/ToDoList.tsx

@@ -1,5 +1,7 @@
 'use client'
 import React, { useState } from 'react'
+import { Card, CardContent } from './ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
 
 interface Todo {
     id: string
@@ -88,9 +90,9 @@ export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
     }
 
     return (
-        <div className="space-y-4">
-            <h2 className="text-xl font-semibold">To Do List</h2>
-
+        <Card className='py-0'>
+            <CardContent className="p-4">
+                <h2 className="text-xl font-semibold">To-Do List</h2>
                 <div className="flex gap-2">
                     <input
                         className="input input-bordered w-full"
@@ -108,12 +110,17 @@ export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
                         Add
                     </button>
                 </div>
-
-            <ul className="space-y-2">
+                <Tabs defaultValue="list" className="w-full mt-2">
+                    <TabsList className="mb-4">
+                        <TabsTrigger value="list">List View</TabsTrigger>
+                        <TabsTrigger value="calendar">Calendar View</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="list">
+                        <div className="space-y-2">
                             {todos.map(todo => (
-                    <li
+                                <div
                                     key={todo.id}
-                        className="flex flex-col gap-1 p-3 bg-[#00000010] rounded-lg"
+                                    className="border p-2 rounded-md"
                                 >
                                     <div className="flex items-center justify-between">
                                         <div className="flex items-center gap-2">
@@ -183,9 +190,17 @@ export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
                                             </div>
                                         )}
                                     </div>
-                    </li>
-                ))}
-            </ul>
                                 </div>
+                            ))}
+                        </div>
+                    </TabsContent>
+                    <TabsContent value='calendar'>
+                        <div className="grid grid-cols-7 gap-1 text-xs">
+                            
+                        </div>
+                    </TabsContent>
+                </Tabs>
+            </CardContent>
+        </Card>
     )
 }

components/events/EventDashboard.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import React, { useState } from 'react'
+import EventInfo from './EventInfo'
+import EventRsvpTracking from './EventRsvpTracking'
+import EventToDoList from './EventToDoList'
+import ToDoList from '../ToDoList'
+import { fetchEventTodos } from '@/lib/helper/fetchTodos'
+
+interface Props {
+    event: EventData
+}
+
+export default function EventDashboard({ event }: Props) {
+    const [todos, setTodos] = useState(event.todos)
+
+     async function refreshTodos() {
+        try {
+            const data = await fetchEventTodos(event.id)
+            setTodos(data)
+        } catch (err) {
+            console.error('Failed to refresh todos:', err)
+        }
+    }
+
+    return (
+        <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
+            <EventInfo event={event} />
+            <div className='lg:col-span-2 space-y-4'>
+                <EventRsvpTracking eventGuests={event.eventGuests} />
+                {/* <EventToDoList tasks={event.todos} /> */}
+                <ToDoList 
+                    eventId={event.id}
+                    initialTodos={todos}
+                    onUpdate={refreshTodos}
+                />
+            </div>
+        </div>
+    )
+}

components/events/EventInfo.tsx

@@ -0,0 +1,50 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import { Card, CardContent } from '../ui/card'
+import { getDaysUntilEvent } from '@/lib/helper/getDaysUntilEvent'
+import { Button } from '../ui/button'
+import EventNotesEditor from '../EventNotesEditor'
+
+interface EventProps {
+    event: EventData
+}
+
+export default function EventInfo({ event }: EventProps) {
+    const [daysLeft, setDaysLeft] = useState<number | null>(null)
+
+    useEffect(() => {
+        if (event.date) {
+            const diff = getDaysUntilEvent(event.date);
+            setDaysLeft(diff)
+        }
+    }, [event.date])
+
+    return (
+        <div className='lg:col-span-1 space-y-4'>
+            <Card className='py-0'>
+                <CardContent className='p-4'>
+                    <h2 className='text-xl font-semibold'>Event Info</h2>
+                    <p className='text-sm mt-2'>Nmae: {event.name}</p>
+                    <p className='text-sm'>Date: {event.date ? event.date.toDateString() : 'Upcoming'}</p>
+                    <p className='text-sm'>Location: {event.location ? event.location : 'No location yet'}</p>
+                    {daysLeft !== null && (
+                        <p className='text-sm mt-2 font-medium text-brand-primary-400'>
+                            {daysLeft} days until this event!
+                        </p>
+                    )}
+                    <Button className="mt-4 w-full bg-brand-primary-600 hover:bg-brand-primary-400">Edit Event</Button>
+                </CardContent>
+            </Card>
+            <Card className='py-0'>
+                <CardContent className='p-4'>
+                    <h2 className='text-xl font-semibold mb-2'>General Notes</h2>
+                    <EventNotesEditor
+                        eventId={event.id}
+                        initialNotes={event.notes || ''}
+                        canEdit={['COUPLE', 'PLANNER'].includes(event.creator.role)}
+                    />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

components/events/EventRsvpTracking.tsx

@@ -0,0 +1,36 @@
+'use client'
+import React from 'react'
+import { Card, CardContent } from '../ui/card'
+import { Button } from '../ui/button'
+
+export default function EventRsvpTracking({ eventGuests }: EventData) {
+    const attendingGuests = eventGuests.filter((g) => g.rsvp === 'YES');
+    const notAttendingGuests = eventGuests.filter((g) => g.rsvp === 'NO');
+    const pendingGuests = eventGuests.filter((g) => g.rsvp === 'PENDING');
+    return (
+        <Card className='py-0'>
+            <CardContent className='p-4'>
+                <h2 className="text-xl font-semibold">RSVP Tracking</h2>
+                <div className='grid grid-cols-4 gap-4 text-sm mt-4'>
+                    <div>
+                        <p className='text-muted-foreground'>Invited</p>
+                        <p className='text-2xl font-bold'>{eventGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Confirmed</p>
+                        <p className='text-2xl font-bold'>{attendingGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Declined</p>
+                        <p className='text-2xl font-bold'>{notAttendingGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Pending</p>
+                        <p className='text-2xl font-bold'>{pendingGuests.length}</p>
+                    </div>
+                </div>
+                <Button variant="secondary" className="mt-4 hover:cursor-pointer hover:bg-brand-primary-900">Manage Guest List</Button>
+            </CardContent>
+        </Card>
+    )
+}

types.d.ts

@@ -21,3 +21,35 @@ interface EventProps {
     creatorId: string; 
     key: string;
 }
+
+interface Creator {
+    id: string
+    email: string
+    name: string | null
+    role: 'COUPLE' | 'PLANNER' | 'GUEST'
+}
+
+interface Todo {
+    id: string
+    name: string
+    complete: boolean
+    dueDate?: string | null
+    createdAt: string
+    updatedAt?: string
+    dueDate?: string | null
+    notes?: string | null
+}
+
+interface EventData {
+    id: string
+    name: string
+    date: Date | null
+    location: string | null
+    creatorId: string
+    createdAt: string
+    creator: Creator
+    guests: any[]
+    notes?: string
+    eventGuests: any[]
+    todos: Todo[] 
+}