Completed the ToDo App

2026-04-25 22:45:00 +06:00
parent c295362495
commit 4e6a1ef71f
12 changed files with 987 additions and 106 deletions
--- a/client/src/pages/DashboardPage.tsx
+++ b/client/src/pages/DashboardPage.tsx
@@ -1,4 +1,86 @@
+// 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 = () => {
-    return <div>Dashboard Page</div>
+    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