event dashbaord
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user