\n {/* Header */}\n

Habit Tracker

\n Track your daily habits and build consistency\n

\n setShowForm(true)}\n className=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center space-x-2\"\n >\n ➕\n Add Habit\n \n

\n\n {/* Quick stats */}\n {habits.length > 0 && (\n

{habits.length}

Active Habits

\n {Math.round(habits.reduce((sum, h) => sum + h.completion_rate, 0) / habits.length)}%\n

Avg. Completion Rate

\n {Math.max(...habits.map(h => h.current_streak), 0)}\n

Longest Streak

\n )}\n

\n\n {/* Habit form */}\n {(showForm || editingHabit) && (\n

\n {editingHabit ? 'Edit Habit' : 'Add New Habit'}\n

\n \n Habit Name *\n \n setFormData({ ...formData, name: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"e.g., Drink 8 glasses of water\"\n required\n />\n

\n \n Description\n \n setFormData({ ...formData, description: e.target.value })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Optional description or motivation...\"\n rows={2}\n />\n

\n \n Target Frequency (days per week)\n \n setFormData({ ...formData, target_frequency: parseInt(e.target.value) })}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {[1, 2, 3, 4, 5, 6, 7].map(num => (\n \n ))}\n \n

\n \n Color\n \n

\n setFormData({ ...formData, color: e.target.value })}\n className=\"w-12 h-10 border border-gray-300 rounded cursor-pointer\"\n />\n

\n {predefinedColors.map(color => (\n setFormData({ ...formData, color })}\n className={`w-6 h-6 rounded border-2 ${\n formData.color === color ? 'border-gray-800' : 'border-gray-300'\n }`}\n style={{ backgroundColor: color }}\n />\n ))}\n

\n \n {loading &&

}\n {editingHabit ? 'Update Habit' : 'Add Habit'}\n \n {\n setShowForm(false);\n setEditingHabit(null);\n }}\n className=\"bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors\"\n >\n Cancel\n \n

\n )}\n\n {/* Habits list */}\n

\n {habits.length === 0 ? (\n

🎯

No habits yet

\n Start building great habits by creating your first one!\n

\n setShowForm(true)}\n className=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors\"\n >\n Add Your First Habit\n \n

\n ) : (\n habits.map((habit) => (\n

{habit.name}

\n {habit.description && (\n

{habit.description}

\n )}\n

\n Target: {habit.target_frequency}/week\n \n Streak: {getStreakEmoji(habit.current_streak)} {habit.current_streak} days\n \n This week: {habit.completion_rate}%\n

\n \n

\n setEditingHabit(habit)}\n className=\"text-gray-400 hover:text-blue-600 transition-colors\"\n title=\"Edit habit\"\n >\n ✏️\n \n deleteHabit(habit.id)}\n className=\"text-gray-400 hover:text-red-600 transition-colors\"\n title=\"Delete habit\"\n >\n 🗑️\n \n

\n\n {/* 7-day calendar */}\n

\n {last7Days.map((day) => {\n const isCompleted = isHabitCompletedOnDate(habit, day.date);\n return (\n

{day.dayName}

\n toggleHabitCompletion(habit.id, day.date, isCompleted)}\n className={`w-10 h-10 rounded-lg border-2 transition-all duration-200 flex items-center justify-center text-sm font-medium ${\n isCompleted\n ? 'border-green-500 text-white habit-complete'\n : day.isToday\n ? 'border-blue-500 text-blue-600 hover:bg-blue-50'\n : 'border-gray-300 text-gray-600 hover:border-gray-400'\n }`}\n style={{\n backgroundColor: isCompleted ? habit.color : 'transparent'\n }}\n title={`${day.dayName} ${day.dayNumber} - ${isCompleted ? 'Completed' : 'Not completed'}`}\n >\n {isCompleted ? '✓' : day.dayNumber}\n \n

\n );\n })}\n

\n\n {/* Progress bar for the week */}\n

\n Weekly Progress\n {habit.completion_rate}%\n

\n ))\n )}\n \n \n );\n}","deleted","label",[175,176,158],"frontend","components","permalink","https://www.val.town/x/nezha/To-do_Tracker/code/frontend/components/HabitTracker.tsx","extension","actionData","errors"]