event dashbaord
This commit is contained in:
@@ -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> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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('')
|
||||
|
||||
@@ -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={() => {
|
||||
|
||||
@@ -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
|
||||
@@ -15,7 +17,7 @@ interface Props {
|
||||
onUpdate: () => void
|
||||
}
|
||||
|
||||
export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
|
||||
export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
|
||||
const [todos, setTodos] = useState(initialTodos)
|
||||
const [newName, setNewName] = useState('')
|
||||
const [newDueDate, setNewDueDate] = useState('')
|
||||
@@ -88,104 +90,117 @@ export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold">To Do List</h2>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="input input-bordered w-full"
|
||||
placeholder="New To Do..."
|
||||
value={newName}
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
className="input input-bordered"
|
||||
value={newDueDate}
|
||||
onChange={e => setNewDueDate(e.target.value)}
|
||||
/>
|
||||
<button className="btn btn-primary" onClick={handleAdd}>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-2">
|
||||
{todos.map(todo => (
|
||||
<li
|
||||
key={todo.id}
|
||||
className="flex flex-col gap-1 p-3 bg-[#00000010] rounded-lg"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={todo.complete}
|
||||
onChange={e => toggleComplete(todo.id, e.target.checked)}
|
||||
/>
|
||||
<span className={todo.complete ? 'line-through text-gray-400' : ''}>
|
||||
{todo.name}
|
||||
</span>
|
||||
{todo.dueDate && (
|
||||
<span className="text-sm text-gray-500 ml-2">
|
||||
(Due {new Date(todo.dueDate).toLocaleDateString()})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="text-red-500 text-sm"
|
||||
onClick={() => handleDelete(todo.id)}
|
||||
>
|
||||
Delete
|
||||
</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">
|
||||
<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"
|
||||
placeholder="New To Do..."
|
||||
value={newName}
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
className="input input-bordered"
|
||||
value={newDueDate}
|
||||
onChange={e => setNewDueDate(e.target.value)}
|
||||
/>
|
||||
<button className="btn btn-primary" onClick={handleAdd}>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<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 => (
|
||||
<div
|
||||
key={todo.id}
|
||||
className="border p-2 rounded-md"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={todo.complete}
|
||||
onChange={e => toggleComplete(todo.id, e.target.checked)}
|
||||
/>
|
||||
<span className={todo.complete ? 'line-through text-gray-400' : ''}>
|
||||
{todo.name}
|
||||
</span>
|
||||
{todo.dueDate && (
|
||||
<span className="text-sm text-gray-500 ml-2">
|
||||
(Due {new Date(todo.dueDate).toLocaleDateString()})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => saveNote(todo.id)}
|
||||
className="text-red-500 text-sm"
|
||||
onClick={() => handleDelete(todo.id)}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => {
|
||||
setEditingNoteId(null)
|
||||
setNoteDraft('')
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
Delete
|
||||
</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
|
||||
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
|
||||
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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value='calendar'>
|
||||
<div className="grid grid-cols-7 gap-1 text-xs">
|
||||
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
40
components/events/EventDashboard.tsx
Normal file
40
components/events/EventDashboard.tsx
Normal 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
50
components/events/EventInfo.tsx
Normal 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
36
components/events/EventRsvpTracking.tsx
Normal 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
34
types.d.ts
vendored
@@ -20,4 +20,36 @@ interface EventProps {
|
||||
createdAt: Date; date: Date | null;
|
||||
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[]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user