\n No tracking data available\n

\n );\n }\n\n if (trackingData.habits.length === 0) {\n return (\n

🎯

\n No habits yet\n

\n Add your first habit to start tracking your progress!\n

\n );\n }\n\n const completedCount = trackingData.habits.filter(h => h.completed_today).length;\n const totalCount = trackingData.habits.length;\n const completionPercentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0;\n\n return (\n

\n {/* Progress Summary */}\n

\n Today's Progress\n

\n {completedCount} of {totalCount} habits completed\n

\n \n

\n \n {Math.round(completionPercentage)}%\n \n

\n\n {/* Habits List */}\n

\n {trackingData.habits.map((habit) => (\n \n ))}\n

\n );\n}\n\ninterface HabitCardProps {\n habit: HabitWithCompletion;\n onToggle: (habitId: number, completed: boolean) => void;\n onEdit: (habit: HabitWithCompletion) => void;\n onDelete: (habitId: number) => void;\n}\n\nfunction HabitCard({ habit, onToggle, onEdit, onDelete }: HabitCardProps) {\n const handleToggle = () => {\n onToggle(habit.id, !habit.completed_today);\n };\n\n return (\n

\n {/* Completion Checkbox */}\n \n {habit.completed_today && (\n \n )}\n \n\n {/* Habit Info */}\n

\n {habit.name}\n

\n {habit.description && (\n

{habit.description}

\n )}\n

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

\n {habit.current_streak !== undefined && habit.current_streak > 0 && (\n

\n 🔥 {habit.current_streak} day{habit.current_streak !== 1 ? 's' : ''}\n

\n )}\n {habit.total_completions !== undefined && (\n

\n {habit.total_completions} total\n

\n )}\n

\n\n {/* Actions */}\n

\n onEdit(habit)}\n className=\"text-gray-400 hover:text-gray-600 p-1\"\n title=\"Edit habit\"\n >\n \n \n onDelete(habit.id)}\n className=\"text-gray-400 hover:text-red-600 p-1\"\n title=\"Delete habit\"\n >\n \n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/pfsthaps/Habits/code/frontend/components/DailyTracker.tsx","extension","actionData","errors"]