86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
// src/pages/DashboardPage.tsx
|
|
import { useState } from 'react'
|
|
import { useAuth } from '../context/AuthContext'
|
|
import { useTodos } from '../hooks/useTodos'
|
|
import Navbar from '../components/Navbar'
|
|
import TodoForm from '../components/todos/TodoForm'
|
|
import TodoList from '../components/todos/TodoList'
|
|
|
|
type FilterType = 'all' | 'pending' | 'completed'
|
|
|
|
const DashboardPage = () => {
|
|
const { user } = useAuth()
|
|
const { todos, isLoading, createTodo, toggleTodo, deleteTodo, updateTodo } = useTodos()
|
|
const [filter, setFilter] = useState<FilterType>('all')
|
|
|
|
const filteredTodos = todos.filter(todo => {
|
|
if (filter === 'completed') return todo.completed
|
|
if (filter === 'pending') return !todo.completed
|
|
return true
|
|
})
|
|
|
|
const filters: { label: string; value: FilterType; count: number }[] = [
|
|
{ label: 'All', value: 'all', count: todos.length },
|
|
{ label: 'Pending', value: 'pending', count: todos.filter(t => !t.completed).length },
|
|
{ label: 'Completed', value: 'completed', count: todos.filter(t => t.completed).length },
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<Navbar />
|
|
|
|
<main className="max-w-3xl mx-auto px-4 py-8">
|
|
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
Good day, {user?.name}!
|
|
</h1>
|
|
<p className="text-gray-500 text-sm mt-1">
|
|
You have {todos.filter(t => !t.completed).length} pending todos
|
|
</p>
|
|
</div>
|
|
|
|
<TodoForm onSubmit={createTodo} />
|
|
|
|
<div className="flex gap-2 mb-4">
|
|
{filters.map(f => (
|
|
<button
|
|
key={f.value}
|
|
onClick={() => setFilter(f.value)}
|
|
className={`
|
|
px-4 py-2 rounded-lg text-sm font-medium transition
|
|
flex items-center gap-2
|
|
${filter === f.value
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-white text-gray-600 border border-gray-200 hover:border-gray-300'
|
|
}
|
|
`}
|
|
>
|
|
{f.label}
|
|
<span className={`
|
|
text-xs px-1.5 py-0.5 rounded-full
|
|
${filter === f.value
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-100 text-gray-500'
|
|
}
|
|
`}>
|
|
{f.count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<TodoList
|
|
todos={filteredTodos}
|
|
onToggle={toggleTodo}
|
|
onDelete={deleteTodo}
|
|
onUpdate={updateTodo}
|
|
isLoading={isLoading}
|
|
/>
|
|
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DashboardPage |