📊

\n No Dashboard Data\n

\n Set your first tasks to see your progress dashboard.\n

\n );\n }\n\n const handleManualCompletion = async (completed: boolean) => {\n setIsRecording(true);\n try {\n const response = await fetch(\"/api/complete\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n email: data.user.email,\n completed,\n }),\n });\n\n const result = await response.json();\n if (result.success) {\n setRecordingSuccess(true);\n setTimeout(() => {\n setRecordingSuccess(false);\n onRefresh();\n }, 2000);\n }\n } catch (error) {\n console.error(\"Error recording completion:\", error);\n } finally {\n setIsRecording(false);\n }\n };\n\n const today = new Date().toISOString().split('T')[0];\n const todayTaskSet = data.recentTaskSets.find(ts => ts.date === today);\n const todayCompletion = data.completions.find(c => c.completion_date === today);\n\n const getStreakEmoji = (streak: number) => {\n if (streak >= 30) return \"🔥\";\n if (streak >= 14) return \"⚡\";\n if (streak >= 7) return \"🌟\";\n if (streak >= 3) return \"💪\";\n return \"🌱\";\n };\n\n const formatDate = (dateStr: string) => {\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', { \n weekday: 'short', \n month: 'short', \n day: 'numeric' \n });\n };\n\n if (recordingSuccess) {\n return (\n

🎉

\n Progress Recorded!\n

\n Your completion status has been saved successfully.\n

\n );\n }\n\n return (\n

\n {/* Welcome Header */}\n

\n Welcome back, {data.user.name}! 👋\n

\n Here's your task consistency journey\n

\n\n {/* Stats Cards */}\n

📈

{data.stats.completionRate}%

Completion Rate

\n \n

{getStreakEmoji(data.stats.currentStreak)}

{data.stats.currentStreak}

Current Streak

\n \n

✅

{data.stats.completedDays}

Days Completed

\n \n

📅

{data.stats.totalDays}

Total Days

\n\n {/* Today's Tasks */}\n {todayTaskSet && (\n

\n 🎯\n Today's Tasks\n

\n \n

\n {[todayTaskSet.task1, todayTaskSet.task2, todayTaskSet.task3].map((task, index) => (\n

\n {index + 1}\n

{task}

\n {todayCompletion && (\n

\n {todayCompletion.completed ? \"✅\" : \"❌\"}\n

\n )}\n

\n ))}\n

\n\n {!todayCompletion && (\n

\n How did you do with your tasks today?\n

\n handleManualCompletion(true)}\n disabled={isRecording}\n className=\"bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-xl font-semibold transition-all disabled:opacity-50\"\n >\n ✅ Completed All Tasks\n \n handleManualCompletion(false)}\n disabled={isRecording}\n className=\"bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 rounded-xl font-semibold transition-all disabled:opacity-50\"\n >\n ❌ Missed Some Tasks\n \n

\n )}\n\n {todayCompletion && (\n

\n \n {todayCompletion.completed ? \"🎉\" : \"💪\"}\n \n \n {todayCompletion.completed \n ? \"Great job! You completed your tasks today!\" \n : \"No worries! Tomorrow is a fresh start!\"}\n \n

\n )}\n

\n )}\n\n {/* Recent Activity */}\n

\n 📊\n Recent Activity\n

\n \n {data.completions.length === 0 ? (\n

🌱

\n Your journey starts here! Complete your first day to see your progress.\n

\n ) : (\n

\n {data.completions.slice(0, 10).map((completion) => {\n const taskSet = data.recentTaskSets.find(ts => ts.id === completion.task_set_id);\n return (\n

\n {completion.completed ? \"✅\" : \"❌\"}\n

\n {formatDate(completion.completion_date)}\n

\n {taskSet && (\n

\n {taskSet.task1.substring(0, 50)}\n {taskSet.task1.length > 50 ? \"...\" : \"\"}\n

\n )}\n

\n {completion.completed ? \"Completed\" : \"Missed\"}\n

\n );\n })}\n

\n )}\n

\n\n {/* Refresh Button */}\n

\n \n 🔄 Refresh Data\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/aishatopeyemi/VA-TASK-TIDY/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]