import React, { useState, useRef } from "react" import { useFireproof } from "use-fireproof" export default function App() { const { useDocument, useLiveQuery, database } = useFireproof("habit-tracker"); // Form states const { doc: newHabit, merge: mergeHabit, submit: submitHabit } = useDocument({ name: "", category: "", type: "habit", position: Date.now(), completesTowards: [], scheduleType: "daily", // daily, interval, weekly, monthly, alternating intervalDays: 1, weeklyDays: [], // [0,1,2,3,4,5,6] for Sun-Sat monthlyDay: 1, // day of month (1-31) alternatingGroup: "", // for alternating habits alternatingPattern: [], // which days in the pattern this habit should be active startDate: new Date(2025, 8, 19).toISOString().split('T')[0], // Sept 19, 2025 createdAt: Date.now() }); const { doc: newCategory, merge: mergeCategory, submit: submitCategory } = useDocument({ name: "", color: "#70d6ff", type: "category", position: Date.now(), requiresCompletion: true, createdAt: Date.now() }); // Queries const { docs: habits } = useLiveQuery("type", { key: "habit" }); const { docs: categories } = useLiveQuery("type", { key: "category" }); const { docs: completions } = useLiveQuery("type", { key: "completion" }); // Sort by position const sortedHabits = [...habits].sort((a, b) => a.position - b.position); const sortedCategories = [...categories].sort((a, b) => a.position - b.position); // UI state const [editingHabit, setEditingHabit] = useState(null); const [editingCategory, setEditingCategory] = useState(null); const [draggedItem, setDraggedItem] = useState(null); const [dragOver, setDragOver] = useState(null); const [selectedDate, setSelectedDate] = useState(new Date(2025, 8, 19).toDateString()); // Sept 19, 2025 // Generate date grid (Sept 19, 2025 to Sept 19, 2026) const generateDateGrid = () => { const dates = []; const startDate = new Date(2025, 8, 19); // Sept 19, 2025 for (let i = 0; i < 365; i++) { const date = new Date(startDate); date.setDate(startDate.getDate() + i); dates.push(date); } return dates; }; const dateGrid = generateDateGrid(); // Check if habit is scheduled for a specific date const isHabitScheduledForDate = (habit, date) => { const habitStartDate = new Date(habit.startDate || '2025-09-19'); if (date < habitStartDate) return false; const daysDiff = Math.floor((date - habitStartDate) / (1000 * 60 * 60 * 24)); switch (habit.scheduleType) { case "daily": return true; case "interval": return daysDiff % (habit.intervalDays || 1) === 0; case "weekly": const dayOfWeek = date.getDay(); return (habit.weeklyDays || []).includes(dayOfWeek); case "monthly": return date.getDate() === (habit.monthlyDay || 1); case "alternating": if (!habit.alternatingGroup || !habit.alternatingPattern) return false; const patternLength = habit.alternatingPattern.length; const cycleDay = daysDiff % patternLength; return habit.alternatingPattern[cycleDay]; default: return true; } }; // Get completions for a specific date const getCompletionsForDate = (date) => { const dateString = date.toDateString(); return completions.filter(c => new Date(c.date).toDateString() === dateString); }; // Get scheduled habits for a date const getScheduledHabitsForDate = (date) => { return habits.filter(habit => isHabitScheduledForDate(habit, date)); }; // Get completion color for a date const getCompletionColor = (date) => { const dayCompletions = getCompletionsForDate(date); const scheduledHabits = getScheduledHabitsForDate(date); const totalHabits = scheduledHabits.length; if (totalHabits === 0) return "bg-[#ffffff]"; const completionRatio = dayCompletions.length / totalHabits; if (completionRatio === 0) return "bg-[#ffffff]"; // white - no habits if (completionRatio < 0.5) return "bg-[#e9ff70]"; // green - 1/3 of habits if (completionRatio < 0.67) return "bg-[#70d6ff]"; // blue - half of habits if (completionRatio < 1) return "bg-[#ff9770]"; // orange - 2/3 of habits return "bg-[#ff70a6]"; // pink - all habits }; // Get today's completions (Sept 19, 2025) const today = new Date(2025, 8, 19); const todayString = today.toDateString(); const todayCompletions = completions.filter(c => new Date(c.date).toDateString() === todayString); const todayScheduledHabits = getScheduledHabitsForDate(today); // Check if habit is completed today const isHabitCompleted = (habitId) => { return todayCompletions.some(c => c.habitId === habitId); }; // Check if habit is completed on selected date const isHabitCompletedOnDate = (habitId, date) => { const dateCompletions = getCompletionsForDate(date); return dateCompletions.some(c => c.habitId === habitId); }; // Check if category is completed today const isCategoryCompleted = (categoryId) => { if (!categoryId) return false; const categoryHabits = todayScheduledHabits.filter(h => h.category === categoryId); if (categoryHabits.length === 0) return false; return categoryHabits.some(habit => isHabitCompleted(habit._id)); }; // Get category completion stats for today const getCategoryStats = (categoryId) => { const categoryHabits = todayScheduledHabits.filter(h => h.category === categoryId); const completedHabits = categoryHabits.filter(habit => isHabitCompleted(habit._id)); return { total: categoryHabits.length, completed: completedHabits.length, isComplete: completedHabits.length > 0 }; }; // Get category by id const getCategoryById = (id) => categories.find(c => c._id === id); // Get habits by category (only today's scheduled ones) const getHabitsByCategory = (categoryId) => { return todayScheduledHabits.filter(h => h.category === categoryId).sort((a, b) => a.position - b.position); }; // Get habits without category (only today's scheduled ones) const getHabitsWithoutCategory = () => { return todayScheduledHabits.filter(h => !h.category).sort((a, b) => a.position - b.position); }; // Toggle habit completion const toggleHabitCompletion = async (habitId) => { const existingCompletion = todayCompletions.find(c => c.habitId === habitId); if (existingCompletion) { await database.del(existingCompletion._id); } else { const habit = habits.find(h => h._id === habitId); await database.put({ type: "completion", habitId, habitName: habit.name, categoryId: habit.category, date: today.toISOString(), createdAt: Date.now() }); // Complete related habits if (habit.completesTowards && habit.completesTowards.length > 0) { for (const relatedHabitId of habit.completesTowards) { const alreadyCompleted = todayCompletions.some(c => c.habitId === relatedHabitId); if (!alreadyCompleted) { const relatedHabit = habits.find(h => h._id === relatedHabitId); if (relatedHabit) { await database.put({ type: "completion", habitId: relatedHabitId, habitName: relatedHabit.name, categoryId: relatedHabit.category, date: today.toISOString(), completedVia: habitId, createdAt: Date.now() }); } } } } } }; // Demo data function const generateDemoData = async () => { // Create sample categories const skincareCat = await database.put({ name: "Skincare", color: "#ff70a6", type: "category", position: 1000, requiresCompletion: true, createdAt: Date.now() }); const healthCat = await database.put({ name: "Health", color: "#e9ff70", type: "category", position: 2000, requiresCompletion: true, createdAt: Date.now() }); // Create alternating facial treatments const deepCleansing = await database.put({ name: "Deep Cleansing Facial", category: skincareCat.id, type: "habit", position: 1000, completesTowards: [], scheduleType: "alternating", alternatingGroup: "facial", alternatingPattern: [true, true, true, false, false, false, false], // 3 days on, 4 days off startDate: "2025-09-19", createdAt: Date.now() }); const gentleFacial = await database.put({ name: "Gentle Hydrating Facial", category: skincareCat.id, type: "habit", position: 1100, completesTowards: [], scheduleType: "alternating", alternatingGroup: "facial", alternatingPattern: [false, false, false, true, true, true, true], // 4 days on when deep cleansing is off startDate: "2025-09-19", createdAt: Date.now() }); // Every other day habit await database.put({ name: "Strength Training", category: healthCat.id, type: "habit", position: 2000, completesTowards: [], scheduleType: "interval", intervalDays: 2, startDate: "2025-09-19", createdAt: Date.now() }); // Weekly habit await database.put({ name: "Meal Prep", category: "", type: "habit", position: 3000, completesTowards: [], scheduleType: "weekly", weeklyDays: [0, 3], // Sunday and Wednesday startDate: "2025-09-19", createdAt: Date.now() }); // Monthly habit await database.put({ name: "Deep House Clean", category: "", type: "habit", position: 4000, completesTowards: [], scheduleType: "monthly", monthlyDay: 1, startDate: "2025-09-19", createdAt: Date.now() }); // Daily habit await database.put({ name: "Drink Water", category: healthCat.id, type: "habit", position: 2100, completesTowards: [], scheduleType: "daily", startDate: "2025-09-19", createdAt: Date.now() }); // Create some sample completions const dates = [today]; for (let i = 1; i <= 10; i++) { const pastDate = new Date(today); pastDate.setDate(today.getDate() - i); dates.push(pastDate); } for (const date of dates) { const scheduledHabits = getScheduledHabitsForDate(date); const shouldComplete = Math.random() > 0.3; // 70% chance if (shouldComplete && scheduledHabits.length > 0) { const numToComplete = Math.floor(Math.random() * scheduledHabits.length) + 1; const habitsToComplete = scheduledHabits.slice(0, numToComplete); for (const habit of habitsToComplete) { await database.put({ type: "completion", habitId: habit._id || deepCleansing.id, habitName: habit.name || "Deep Cleansing Facial", categoryId: habit.category || skincareCat.id, date: date.toISOString(), createdAt: Date.now() + Math.random() * 1000 }); } } } }; // Helper function to get schedule description const getScheduleDescription = (habit) => { switch (habit.scheduleType) { case "daily": return "Daily"; case "interval": return `Every ${habit.intervalDays} day${habit.intervalDays > 1 ? 's' : ''}`; case "weekly": const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const selectedDays = (habit.weeklyDays || []).map(d => days[d]).join(', '); return `Weekly: ${selectedDays}`; case "monthly": return `Monthly: ${habit.monthlyDay}${getOrdinalSuffix(habit.monthlyDay)}`; case "alternating": const onDays = (habit.alternatingPattern || []).filter(Boolean).length; const totalDays = (habit.alternatingPattern || []).length; return `Alternating: ${onDays}/${totalDays} days (Group: ${habit.alternatingGroup})`; default: return "Custom"; } }; const getOrdinalSuffix = (num) => { const j = num % 10, k = num % 100; if (j == 1 && k != 11) return "st"; if (j == 2 && k != 12) return "nd"; if (j == 3 && k != 13) return "rd"; return "th"; }; // Drag and drop handlers const handleDragStart = (e, item, itemType) => { setDraggedItem({ item, type: itemType }); e.dataTransfer.effectAllowed = 'move'; }; const handleDragOver = (e, targetItem, itemType) => { e.preventDefault(); if (draggedItem && draggedItem.type === itemType) { setDragOver(targetItem._id); } }; const handleDrop = async (e, targetItem, itemType) => { e.preventDefault(); if (!draggedItem || draggedItem.type !== itemType) return; const items = itemType === 'habit' ? sortedHabits : sortedCategories; const draggedIndex = items.findIndex(item => item._id === draggedItem.item._id); const targetIndex = items.findIndex(item => item._id === targetItem._id); if (draggedIndex === targetIndex) return; let newPosition; if (targetIndex === 0) { newPosition = items[0].position - 1000; } else if (targetIndex === items.length - 1) { newPosition = items[items.length - 1].position + 1000; } else if (draggedIndex < targetIndex) { newPosition = (items[targetIndex].position + items[targetIndex + 1].position) / 2; } else { newPosition = (items[targetIndex - 1].position + items[targetIndex].position) / 2; } await database.put({ ...draggedItem.item, position: newPosition }); setDraggedItem(null); setDragOver(null); }; // Edit handlers const startEditHabit = (habit) => { setEditingHabit({ ...habit, completesTowards: habit.completesTowards || [], scheduleType: habit.scheduleType || "daily", intervalDays: habit.intervalDays || 1, weeklyDays: habit.weeklyDays || [], monthlyDay: habit.monthlyDay || 1, alternatingGroup: habit.alternatingGroup || "", alternatingPattern: habit.alternatingPattern || [], startDate: habit.startDate || "2025-09-19" }); }; const saveEditHabit = async () => { await database.put(editingHabit); setEditingHabit(null); }; const startEditCategory = (category) => { setEditingCategory({ ...category, requiresCompletion: category.requiresCompletion !== false }); }; const saveEditCategory = async () => { await database.put(editingCategory); setEditingCategory(null); }; const deleteHabit = async (habitId) => { if (confirm('Delete this habit? This will also remove all completion records.')) { await database.del(habitId); const habitCompletions = completions.filter(c => c.habitId === habitId); for (const completion of habitCompletions) { await database.del(completion._id); } } }; const deleteCategory = async (categoryId) => { if (confirm('Delete this category? Habits in this category will become uncategorized.')) { await database.del(categoryId); } }; const toggleCompletesTowards = (habitId) => { const current = editingHabit.completesTowards || []; const updated = current.includes(habitId) ? current.filter(id => id !== habitId) : [...current, habitId]; setEditingHabit({ ...editingHabit, completesTowards: updated }); }; const toggleWeeklyDay = (day) => { const current = editingHabit.weeklyDays || []; const updated = current.includes(day) ? current.filter(d => d !== day) : [...current, day].sort(); setEditingHabit({ ...editingHabit, weeklyDays: updated }); }; const toggleAlternatingDay = (index) => { const current = [...(editingHabit.alternatingPattern || [])]; current[index] = !current[index]; setEditingHabit({ ...editingHabit, alternatingPattern: current }); }; const setAlternatingPatternLength = (length) => { const current = editingHabit.alternatingPattern || []; const newPattern = Array(length).fill(false); for (let i = 0; i < Math.min(current.length, length); i++) { newPattern[i] = current[i]; } setEditingHabit({ ...editingHabit, alternatingPattern: newPattern }); }; return (

Habit Tracker

{/* Demo Data Button */} {habits.length === 0 && (

Get Started

)} {/* Today's Schedule Summary */}

Today's Schedule

{todayScheduledHabits.length}

Habits Scheduled

{todayCompletions.length}

Completed

{todayScheduledHabits.length > 0 ? Math.round((todayCompletions.length / todayScheduledHabits.length) * 100) : 0}%

Progress

{/* Selected Day Details */} {selectedDate !== todayString && (

{new Date(selectedDate).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

{getScheduledHabitsForDate(new Date(selectedDate)).map((habit) => { const completed = isHabitCompletedOnDate(habit._id, new Date(selectedDate)); const category = getCategoryById(habit.category); return (

{completed ? '✓' : ''}

{habit.name}

{getScheduleDescription(habit)}

{category && ( {category.name} )}

); })}

)} {/* Categories with Habits */} {sortedCategories.map((category) => { const categoryHabits = getHabitsByCategory(category._id); const stats = getCategoryStats(category._id); const isComplete = category.requiresCompletion !== false && stats.isComplete; if (categoryHabits.length === 0) return null; return (

handleDragStart(e, category, 'category')} onDragOver={(e) => handleDragOver(e, category, 'category')} onDrop={(e) => handleDrop(e, category, 'category')} className={`p-4 border-4 border-[#242424] cursor-move mb-4 ${ dragOver === category._id ? 'bg-[#ffffff]' : '' }`} style={{ backgroundColor: category.color }} > {editingCategory && editingCategory._id === category._id ? (

setEditingCategory({...editingCategory, name: e.target.value})} className="w-full p-2 border-2 border-[#242424] text-[#242424] font-bold" /> setEditingCategory({...editingCategory, requiresCompletion: e.target.checked})} className="w-4 h-4" /> Requires completion tracking

) : (

{category.requiresCompletion !== false && (

{isComplete ? '✓' : ''}

)}

{category.name} {category.requiresCompletion !== false && (

{stats.completed > 0 ? `✓ Complete (${stats.completed}/${stats.total} habits done)` : `${stats.total} habits scheduled today`}

)}

{/* Habits in this category */}

{categoryHabits.map((habit) => { const completed = isHabitCompleted(habit._id); return (

{habit.name}

{getScheduleDescription(habit)}

{habit.completesTowards && habit.completesTowards.length > 0 && (

Also completes: {habit.completesTowards.map(id => { const relatedHabit = habits.find(h => h._id === id); return relatedHabit?.name; }).filter(Boolean).join(', ')}

)}

); })}

); })} {/* Uncategorized Habits */} {getHabitsWithoutCategory().length > 0 && (

Uncategorized Habits (Today)

{getHabitsWithoutCategory().map((habit) => { const completed = isHabitCompleted(habit._id); return (

{habit.name}

{getScheduleDescription(habit)}

); })}

)} {/* Add New Habit with Advanced Scheduling */}

Add Habit

mergeHabit({ name: e.target.value })} placeholder="Habit name (e.g., Deep Cleansing Facial, Strength Training)" className="w-full p-3 border-4 border-[#242424] text-[#242424] font-bold" />

Schedule Type:

{newHabit.scheduleType === "interval" && (

Every how many days? mergeHabit({ intervalDays: parseInt(e.target.value) || 1 })} className="w-full p-3 border-4 border-[#242424] text-[#242424] font-bold" />

)} {newHabit.scheduleType === "weekly" && (

Days of the week:

{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day, index) => ( { const current = newHabit.weeklyDays || []; const updated = current.includes(index) ? current.filter(d => d !== index) : [...current, index].sort(); mergeHabit({ weeklyDays: updated }); }} className="w-4 h-4" /> {day} ))}

)} {newHabit.scheduleType === "monthly" && (

Day of month (1-31): mergeHabit({ monthlyDay: parseInt(e.target.value) || 1 })} className="w-full p-3 border-4 border-[#242424] text-[#242424] font-bold" />

)} {newHabit.scheduleType === "alternating" && (

Alternating Group Name: mergeHabit({ alternatingGroup: e.target.value })} placeholder="e.g., facial, workout" className="w-full p-3 border-4 border-[#242424] text-[#242424] font-bold" />

Pattern Length:

{(newHabit.alternatingPattern || []).length > 0 && (

Active Days:

{(newHabit.alternatingPattern || []).map((active, index) => ( ))}

)}

Start Date: mergeHabit({ startDate: e.target.value })} className="w-full p-3 border-4 border-[#242424] text-[#242424] font-bold" />

{/* Edit Habit Modal */} {editingHabit && (

Edit Habit

setEditingHabit({...editingHabit, name: e.target.value})} className="w-full p-2 border-2 border-[#242424] text-[#242424] font-bold" />

Schedule Type:

{editingHabit.scheduleType === "interval" && (

Every how many days? setEditingHabit({...editingHabit, intervalDays: parseInt(e.target.value) || 1})} className="w-full p-2 border-2 border-[#242424] text-[#242424] font-bold" />

)} {editingHabit.scheduleType === "weekly" && (

Days of the week:

{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day, index) => ( toggleWeeklyDay(index)} className="w-4 h-4" /> {day} ))}

)} {editingHabit.scheduleType === "monthly" && (

Day of month: setEditingHabit({...editingHabit, monthlyDay: parseInt(e.target.value) || 1})} className="w-full p-2 border-2 border-[#242424] text-[#242424] font-bold" />

)} {editingHabit.scheduleType === "alternating" && (

Group: setEditingHabit({...editingHabit, alternatingGroup: e.target.value})} className="w-full p-2 border-2 border-[#242424] text-[#242424] font-bold" />

Pattern Length:

{(editingHabit.alternatingPattern || []).length > 0 && (

Active Days:

{(editingHabit.alternatingPattern || []).map((active, index) => ( ))}

)}

Start Date: setEditingHabit({...editingHabit, startDate: e.target.value})} className="w-full p-2 border-2 border-[#242424] text-[#242424] font-bold" />

Completing this also completes:

{habits.filter(h => h._id !== editingHabit._id).map(otherHabit => ( toggleCompletesTowards(otherHabit._id)} className="w-4 h-4" /> {otherHabit.name} ))}

)} {/* Add New Category */}

Add Category

mergeCategory({ name: e.target.value })} placeholder="Category name (e.g., Skincare, Health)" className="flex-1 p-3 border-4 border-[#242424] text-[#242424] font-bold" />

mergeCategory({ requiresCompletion: e.target.checked })} className="w-5 h-5" /> Count towards daily category completion

{/* Year Progress Grid */}

Year Progress Grid (Sept 19, 2025 - Sept 19, 2026)

Legend:

None

1/3

1/2

2/3

All

{dateGrid.map((date) => { const dayCompletions = getCompletionsForDate(date); const scheduledHabits = getScheduledHabitsForDate(date); const isToday = date.toDateString() === todayString; const isSelected = date.toDateString() === selectedDate; return ( ); })}

Click any day to view scheduled habits • Today marked with ●

); }