brian/wedding-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

event dashbaord

Browse Source
This commit is contained in:
Brian Nelson
2025-07-05 10:07:17 -04:00
parent 725752e39a
commit 2d62fb7d48
8 changed files with 278 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
components/EventInfoDisplay.tsx
View File

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

3
components/EventNotesEditor.tsx
View File

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

203
components/ToDoList.tsx
View File

@@ -1,5 +1,7 @@
'use client' 'use client'
import React, { useState } from 'react' import React, { useState } from 'react'
import { Card, CardContent } from './ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
interface Todo { interface Todo {
id: string id: string
@@ -15,7 +17,7 @@ interface Props {
onUpdate: () => void onUpdate: () => void
} }
export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) { export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
const [todos, setTodos] = useState(initialTodos) const [todos, setTodos] = useState(initialTodos)
const [newName, setNewName] = useState('') const [newName, setNewName] = useState('')
const [newDueDate, setNewDueDate] = useState('') const [newDueDate, setNewDueDate] = useState('')
@@ -88,104 +90,117 @@ export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
} }
return ( return (
<div className="space-y-4"> <Card className='py-0'>
<h2 className="text-xl font-semibold">To Do List</h2> <CardContent className="p-4">
<h2 className="text-xl font-semibold">To-Do List</h2>
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
className="input input-bordered w-full" className="input input-bordered w-full"
placeholder="New To Do..." placeholder="New To Do..."
value={newName} value={newName}
onChange={e => setNewName(e.target.value)} onChange={e => setNewName(e.target.value)}
/> />
<input <input
type="date" type="date"
className="input input-bordered" className="input input-bordered"
value={newDueDate} value={newDueDate}
onChange={e => setNewDueDate(e.target.value)} onChange={e => setNewDueDate(e.target.value)}
/> />
<button className="btn btn-primary" onClick={handleAdd}> <button className="btn btn-primary" onClick={handleAdd}>
Add Add
</button> </button>
</div> </div>
<Tabs defaultValue="list" className="w-full mt-2">
<ul className="space-y-2"> <TabsList className="mb-4">
{todos.map(todo => ( <TabsTrigger value="list">List View</TabsTrigger>
<li <TabsTrigger value="calendar">Calendar View</TabsTrigger>
key={todo.id} </TabsList>
className="flex flex-col gap-1 p-3 bg-[#00000010] rounded-lg" <TabsContent value="list">
> <div className="space-y-2">
<div className="flex items-center justify-between"> {todos.map(todo => (
<div className="flex items-center gap-2"> <div
<input key={todo.id}
type="checkbox" className="border p-2 rounded-md"
checked={todo.complete} >
onChange={e => toggleComplete(todo.id, e.target.checked)} <div className="flex items-center justify-between">
/> <div className="flex items-center gap-2">
<span className={todo.complete ? 'line-through text-gray-400' : ''}> <input
{todo.name} type="checkbox"
</span> checked={todo.complete}
{todo.dueDate && ( onChange={e => toggleComplete(todo.id, e.target.checked)}
<span className="text-sm text-gray-500 ml-2"> />
(Due {new Date(todo.dueDate).toLocaleDateString()}) <span className={todo.complete ? 'line-through text-gray-400' : ''}>
</span> {todo.name}
)} </span>
</div> {todo.dueDate && (
<button <span className="text-sm text-gray-500 ml-2">
className="text-red-500 text-sm" (Due {new Date(todo.dueDate).toLocaleDateString()})
onClick={() => handleDelete(todo.id)} </span>
> )}
Delete </div>
</button>
</div>
{/* Notes Section */}
<div className="mt-1 text-sm text-gray-700">
{editingNoteId === todo.id ? (
<div className="space-y-1">
<textarea
className="textarea textarea-bordered w-full"
value={noteDraft}
onChange={e => setNoteDraft(e.target.value)}
rows={2}
/>
<div className="flex gap-2">
<button <button
className="btn btn-sm btn-primary" className="text-red-500 text-sm"
onClick={() => saveNote(todo.id)} onClick={() => handleDelete(todo.id)}
> >
Save Delete
</button>
<button
className="btn btn-sm"
onClick={() => {
setEditingNoteId(null)
setNoteDraft('')
}}
>
Cancel
</button> </button>
</div> </div>
{/* Notes Section */}
<div className="mt-1 text-sm text-gray-700">
{editingNoteId === todo.id ? (
<div className="space-y-1">
<textarea
className="textarea textarea-bordered w-full"
value={noteDraft}
onChange={e => setNoteDraft(e.target.value)}
rows={2}
/>
<div className="flex gap-2">
<button
className="btn btn-sm btn-primary"
onClick={() => saveNote(todo.id)}
>
Save
</button>
<button
className="btn btn-sm"
onClick={() => {
setEditingNoteId(null)
setNoteDraft('')
}}
>
Cancel
</button>
</div>
</div>
) : (
<div
className="cursor-pointer text-gray-600"
onClick={() => {
setEditingNoteId(todo.id)
setNoteDraft(todo.notes || '')
}}
>
{todo.notes ? (
<span>{todo.notes}</span>
) : (
<span className="italic text-gray-400">Add note...</span>
)}
</div>
)}
</div>
</div> </div>
) : ( ))}
<div
className="cursor-pointer text-gray-600"
onClick={() => {
setEditingNoteId(todo.id)
setNoteDraft(todo.notes || '')
}}
>
{todo.notes ? (
<span>{todo.notes}</span>
) : (
<span className="italic text-gray-400">Add note...</span>
)}
</div>
)}
</div> </div>
</li> </TabsContent>
))} <TabsContent value='calendar'>
</ul> <div className="grid grid-cols-7 gap-1 text-xs">
</div>
</div>
</TabsContent>
</Tabs>
</CardContent>
</Card>
) )
} }

40
components/events/EventDashboard.tsx Normal file
View File

@@ -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>
)
}

50
components/events/EventInfo.tsx Normal file
View File

@@ -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>
)
}

36
components/events/EventRsvpTracking.tsx Normal file
View File

@@ -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>
)
}

34
types.d.ts vendored
View File

@@ -20,4 +20,36 @@ interface EventProps {
createdAt: Date; date: Date | null; createdAt: Date; date: Date | null;
creatorId: string; creatorId: string;
key: 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[]
}