\n {label}\n

\n {[1, 2, 3, 4, 5].map(rating => (\n onChange(rating)}\n className={`rating-button ${value === rating ? 'selected' : ''}`}\n >\n {rating}\n \n ))}\n

\n {labels[0]}\n {labels[1]}\n

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

\n {!compact && (\n

💭 Track Daily Symptoms

\n )}\n\n {message && (\n

\n {message.text}\n

\n )}\n\n

\n {/* Date */}\n {!compact && (\n

\n Date\n setFormData(prev => ({ ...prev, date: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n )}\n\n {/* Rating Scales */}\n

\n setFormData(prev => ({ ...prev, mood: value }))}\n labels={['😢 Low', '😊 Great']}\n />\n \n setFormData(prev => ({ ...prev, pain_level: value }))}\n labels={['😌 None', '😣 Severe']}\n />\n \n setFormData(prev => ({ ...prev, energy_level: value }))}\n labels={['😴 Exhausted', '⚡ Energetic']}\n />\n \n setFormData(prev => ({ ...prev, sleep_quality: value }))}\n labels={['😵 Poor', '😴 Excellent']}\n />\n

\n\n {/* Symptoms */}\n

\n \n Symptoms (select all that apply)\n \n

\n {SYMPTOM_OPTIONS.map(symptom => (\n handleSymptomToggle(symptom)}\n >\n {}} // Handled by onClick\n className=\"w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500\"\n />\n {symptom}\n

\n ))}\n

\n\n {/* Notes */}\n

\n \n Notes (optional)\n \n setFormData(prev => ({ ...prev, notes: e.target.value }))}\n rows={compact ? 2 : 3}\n placeholder=\"How are you feeling today? Any additional notes...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n\n {/* Submit Button */}\n \n {loading ? 'Saving...' : 'Save Symptoms'}\n \n \n

\n\n {/* Recent Symptoms (only show in non-compact mode) */}\n {!compact && (\n

📊 Recent Entries

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

\n No symptoms tracked yet. Start logging your daily symptoms above.\n

\n ) : (\n

\n {symptoms.slice(0, 7).map(symptom => (\n

\n {new Date(symptom.date).toLocaleDateString()}\n

\n Mood: {symptom.mood}/5\n Pain: {symptom.pain_level}/5\n Energy: {symptom.energy_level}/5\n Sleep: {symptom.sleep_quality}/5\n

\n \n {symptom.symptoms && symptom.symptoms.length > 0 && (\n

\n {symptom.symptoms.map(s => (\n \n {s}\n \n ))}\n

\n )}\n \n {symptom.notes && (\n

\n \"{symptom.notes}\"\n

\n )}\n

\n ))}\n

\n )}\n

\n )}\n \n );\n}",[192,113,102],"727cda34-3f94-11f0-8056-76b3cceeab13",["D",1748856725689],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Cycle, Symptom, CyclePrediction, CycleInsights } from \"../../shared/types.ts\";\n\ninterface InsightsProps {\n cycles: Cycle[];\n symptoms: Symptom[];\n prediction: CyclePrediction | null;\n}\n\nexport default function Insights({ cycles, symptoms, prediction }: InsightsProps) {\n const [insights, setInsights] = useState(null);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n loadInsights();\n }, [cycles, symptoms]);\n\n const loadInsights = async () => {\n try {\n setLoading(true);\n const response = await fetch('/api/symptoms/analytics/insights');\n if (response.ok) {\n const data = await response.json();\n setInsights(data);\n }\n } catch (error) {\n console.error('Error loading insights:', error);\n } finally {\n setLoading(false);\n }\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!insights) {\n return (\n

Unable to load insights. Please try again.

\n );\n }\n\n const hasEnoughData = cycles.length >= 2;\n\n return (\n

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

📊 Cycle Overview

\n \n {!hasEnoughData ? (\n

📈

Not Enough Data Yet

\n Track at least 2 complete cycles to see detailed insights and predictions.\n

\n Current cycles logged: {cycles.length}\n

\n ) : (\n

\n {insights.average_cycle_length > 0 ? `${insights.average_cycle_length}` : '—'}\n

Average Cycle Length (days)

\n \n

\n {insights.average_period_length > 0 ? `${insights.average_period_length}` : '—'}\n

Average Period Length (days)

\n \n

\n {insights.cycle_regularity === 'regular' ? '✅' : \n insights.cycle_regularity === 'irregular' ? '⚠️' : '❓'}\n

\n Cycle Regularity\n

{insights.cycle_regularity}

\n \n

{cycles.length}

Total Cycles Tracked

\n )}\n

\n\n {/* Predictions */}\n {prediction && (\n

🔮 Predictions

Next Period

\n {new Date(prediction.next_period_start).toLocaleDateString()} - {' '}\n {new Date(prediction.next_period_end).toLocaleDateString()}\n

\n Expected in {Math.ceil((new Date(prediction.next_period_start).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))} days\n

\n \n

Fertile Window

\n {new Date(prediction.fertile_window_start).toLocaleDateString()} - {' '}\n {new Date(prediction.fertile_window_end).toLocaleDateString()}\n

\n Ovulation: {new Date(prediction.ovulation_date).toLocaleDateString()}\n

\n )}\n\n {/* Symptom Insights */}\n {symptoms.length > 0 && (\n

💭 Symptom Patterns

\n \n {/* Most Common Symptoms */}\n {insights.most_common_symptoms.length > 0 && (\n

Most Common Symptoms

\n {insights.most_common_symptoms.map(symptom => (\n \n {symptom}\n \n ))}\n

\n )}\n\n {/* Mood Trends */}\n {insights.mood_trends.length > 0 && (\n

Recent Mood Trends

\n {insights.mood_trends.slice(-7).map(trend => (\n

\n \n {new Date(trend.date).toLocaleDateString()}\n \n

\n {[1, 2, 3, 4, 5].map(i => (\n \n ))}\n

\n ))}\n

\n )}\n\n {/* Pain Trends */}\n {insights.pain_trends.length > 0 && (\n

Recent Pain Levels

\n {insights.pain_trends.slice(-7).map(trend => (\n

\n \n {new Date(trend.date).toLocaleDateString()}\n \n

\n {[1, 2, 3, 4, 5].map(i => (\n \n ))}\n

\n ))}\n

\n )}\n

\n )}\n\n {/* Health Tips */}\n

💡 Health Tips

🏃‍♀️ Stay Active

\n Regular exercise can help reduce period pain and improve mood. Try gentle activities like walking or yoga.\n

\n \n

🥗 Nutrition Matters

\n Eating iron-rich foods and staying hydrated can help manage period symptoms and energy levels.\n

\n \n

😴 Prioritize Sleep

\n Good sleep hygiene can help regulate hormones and improve overall cycle health.\n

\n \n {insights.cycle_regularity === 'irregular' && (\n

⚠️ Irregular Cycles

\n Your cycles show some irregularity. Consider tracking for a few more months and consult with a healthcare provider if patterns persist.\n

\n )}\n

\n\n {/* Data Summary */}\n

📋 Data Summary

{cycles.length}

Cycles Logged

{symptoms.length}

Symptom Entries

\n {cycles.filter(c => c.end_date).length}\n

Completed Cycles

\n {symptoms.reduce((acc, s) => acc + (s.symptoms?.length || 0), 0)}\n

Total Symptoms

\n );\n}",[192,113,111],"3abe1da6-3f94-11f0-904f-76b3cceeab13",["D",1748856632165],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Cycle } from \"../../shared/types.ts\";\n\ninterface CycleFormProps {\n cycles: Cycle[];\n onUpdate: () => void;\n}\n\nexport default function CycleForm({ cycles, onUpdate }: CycleFormProps) {\n const [formData, setFormData] = useState({\n start_date: '',\n end_date: '',\n flow_intensity: 'medium' as 'light' | 'medium' | 'heavy',\n notes: ''\n });\n const [isEditing, setIsEditing] = useState(null);\n const [loading, setLoading] = useState(false);\n const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);\n\n // Set default start date to today\n useEffect(() => {\n if (!formData.start_date) {\n setFormData(prev => ({\n ...prev,\n start_date: new Date().toISOString().split('T')[0]\n }));\n }\n }, []);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setMessage(null);\n\n try {\n const url = isEditing ? `/api/cycles/${isEditing}` : '/api/cycles';\n const method = isEditing ? 'PUT' : 'POST';\n \n const response = await fetch(url, {\n method,\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n start_date: formData.start_date,\n end_date: formData.end_date || null,\n flow_intensity: formData.flow_intensity,\n notes: formData.notes || null\n })\n });\n\n if (response.ok) {\n setMessage({ \n type: 'success', \n text: isEditing ? 'Cycle updated successfully!' : 'Cycle logged successfully!' \n });\n resetForm();\n onUpdate();\n } else {\n const error = await response.json();\n setMessage({ type: 'error', text: error.error || 'Failed to save cycle' });\n }\n } catch (error) {\n setMessage({ type: 'error', text: 'Network error. Please try again.' });\n } finally {\n setLoading(false);\n }\n };\n\n const handleEdit = (cycle: Cycle) => {\n setFormData({\n start_date: cycle.start_date,\n end_date: cycle.end_date || '',\n flow_intensity: cycle.flow_intensity,\n notes: cycle.notes || ''\n });\n setIsEditing(cycle.id!);\n setMessage(null);\n };\n\n const handleDelete = async (id: number) => {\n if (!confirm('Are you sure you want to delete this cycle?')) return;\n\n setLoading(true);\n try {\n const response = await fetch(`/api/cycles/${id}`, { method: 'DELETE' });\n if (response.ok) {\n setMessage({ type: 'success', text: 'Cycle deleted successfully!' });\n onUpdate();\n } else {\n setMessage({ type: 'error', text: 'Failed to delete cycle' });\n }\n } catch (error) {\n setMessage({ type: 'error', text: 'Network error. Please try again.' });\n } finally {\n setLoading(false);\n }\n };\n\n const resetForm = () => {\n setFormData({\n start_date: new Date().toISOString().split('T')[0],\n end_date: '',\n flow_intensity: 'medium',\n notes: ''\n });\n setIsEditing(null);\n };\n\n const getCurrentCycle = () => {\n return cycles.find(cycle => !cycle.end_date);\n };\n\n const currentCycle = getCurrentCycle();\n\n return (\n

\n {/* Current Cycle Status */}\n {currentCycle && (\n

🩸 Current Period

\n Started on {new Date(currentCycle.start_date).toLocaleDateString()}\n \n (Day {Math.floor((new Date().getTime() - new Date(currentCycle.start_date).getTime()) / (1000 * 60 * 60 * 24)) + 1})\n \n

Flow: {currentCycle.flow_intensity}

\n handleEdit(currentCycle)}\n className=\"mt-2 text-red-600 hover:text-red-800 text-sm underline\"\n >\n Edit current period\n \n

\n )}\n\n {/* Form */}\n

\n {isEditing ? '✏️ Edit Period' : '🩸 Log New Period'}\n

\n\n {message && (\n

\n {message.text}\n

\n )}\n\n

\n {/* Start Date */}\n

\n \n Start Date *\n \n setFormData(prev => ({ ...prev, start_date: e.target.value }))}\n required\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n\n {/* End Date */}\n

\n \n End Date (leave empty if ongoing)\n \n setFormData(prev => ({ ...prev, end_date: e.target.value }))}\n min={formData.start_date}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n\n {/* Flow Intensity */}\n

\n \n Flow Intensity *\n \n

\n {[\n { value: 'light', label: 'Light', desc: 'Spotting or very light flow' },\n { value: 'medium', label: 'Medium', desc: 'Normal flow' },\n { value: 'heavy', label: 'Heavy', desc: 'Heavy flow or clots' }\n ].map(option => (\n setFormData(prev => ({ \n ...prev, \n flow_intensity: option.value as 'light' | 'medium' | 'heavy' \n }))}\n >\n

{option.label}

{option.desc}

\n ))}\n

\n\n {/* Notes */}\n

\n \n Notes (optional)\n \n setFormData(prev => ({ ...prev, notes: e.target.value }))}\n rows={3}\n placeholder=\"Any additional notes about this cycle...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n\n {/* Submit Buttons */}\n

\n \n {loading ? 'Saving...' : (isEditing ? 'Update Period' : 'Log Period')}\n \n {isEditing && (\n \n Cancel\n \n )}\n

\n \n

\n\n {/* Recent Cycles */}\n

📋 Recent Cycles

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

\n No cycles logged yet. Start by logging your current or last period above.\n

\n ) : (\n

\n {cycles.slice(0, 5).map(cycle => {\n const startDate = new Date(cycle.start_date);\n const endDate = cycle.end_date ? new Date(cycle.end_date) : null;\n const duration = endDate \n ? Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1\n : 'Ongoing';\n\n return (\n

\n {startDate.toLocaleDateString()}\n {endDate && ` - ${endDate.toLocaleDateString()}`}\n

\n {duration} {typeof duration === 'number' ? 'days' : ''} • {cycle.flow_intensity} flow\n

\n {cycle.notes && (\n

{cycle.notes}

\n )}\n

\n handleEdit(cycle)}\n className=\"text-indigo-600 hover:text-indigo-800 text-sm\"\n >\n Edit\n \n handleDelete(cycle.id!)}\n className=\"text-red-600 hover:text-red-800 text-sm\"\n >\n Delete\n \n

\n );\n })}\n

\n )}\n

\n \n );\n}",[192,113,93],"20cb1f66-3f94-11f0-85c7-76b3cceeab13",["D",1748856588628],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport type { Cycle, Symptom, CyclePrediction, CalendarDay } from \"../../shared/types.ts\";\nimport SymptomForm from \"./SymptomForm.tsx\";\n\ninterface CalendarProps {\n cycles: Cycle[];\n symptoms: Symptom[];\n prediction: CyclePrediction | null;\n onSymptomUpdate: () => void;\n}\n\nexport default function Calendar({ cycles, symptoms, prediction, onSymptomUpdate }: CalendarProps) {\n const [currentDate, setCurrentDate] = useState(new Date());\n const [selectedDate, setSelectedDate] = useState(null);\n\n // Generate calendar data\n const calendarData = useMemo(() => {\n const year = currentDate.getFullYear();\n const month = currentDate.getMonth();\n \n // Get first day of month and calculate calendar grid\n const firstDay = new Date(year, month, 1);\n const lastDay = new Date(year, month + 1, 0);\n const startDate = new Date(firstDay);\n startDate.setDate(startDate.getDate() - firstDay.getDay()); // Start from Sunday\n \n const endDate = new Date(lastDay);\n endDate.setDate(endDate.getDate() + (6 - lastDay.getDay())); // End on Saturday\n \n const days: CalendarDay[] = [];\n const current = new Date(startDate);\n \n while (current <= endDate) {\n const dateStr = current.toISOString().split('T')[0];\n const isCurrentMonth = current.getMonth() === month;\n \n // Check if this date is a period day\n const periodCycle = cycles.find(cycle => {\n const start = new Date(cycle.start_date);\n const end = cycle.end_date ? new Date(cycle.end_date) : start;\n return current >= start && current <= end;\n });\n \n // Check if this date is a predicted period day\n let isPredictedPeriod = false;\n if (prediction && isCurrentMonth) {\n const predStart = new Date(prediction.next_period_start);\n const predEnd = new Date(prediction.next_period_end);\n isPredictedPeriod = current >= predStart && current <= predEnd;\n }\n \n // Check if this date is in fertile window\n let isFertile = false;\n let isOvulation = false;\n if (prediction && isCurrentMonth) {\n const fertileStart = new Date(prediction.fertile_window_start);\n const fertileEnd = new Date(prediction.fertile_window_end);\n const ovulationDate = new Date(prediction.ovulation_date);\n \n isFertile = current >= fertileStart && current <= fertileEnd;\n isOvulation = current.toDateString() === ovulationDate.toDateString();\n }\n \n // Get symptoms for this date\n const daySymptoms = symptoms.find(s => s.date === dateStr);\n \n days.push({\n date: dateStr,\n is_period: !!periodCycle,\n is_predicted_period: isPredictedPeriod && !periodCycle,\n is_fertile: isFertile && !periodCycle && !isPredictedPeriod,\n is_ovulation: isOvulation && !periodCycle && !isPredictedPeriod,\n flow_intensity: periodCycle?.flow_intensity,\n symptoms: daySymptoms\n });\n \n current.setDate(current.getDate() + 1);\n }\n \n return days;\n }, [currentDate, cycles, symptoms, prediction]);\n\n const navigateMonth = (direction: 'prev' | 'next') => {\n setCurrentDate(prev => {\n const newDate = new Date(prev);\n newDate.setMonth(newDate.getMonth() + (direction === 'next' ? 1 : -1));\n return newDate;\n });\n };\n\n const getDayClasses = (day: CalendarDay) => {\n const classes = ['calendar-day'];\n \n const dayDate = new Date(day.date);\n const isCurrentMonth = dayDate.getMonth() === currentDate.getMonth();\n \n if (!isCurrentMonth) classes.push('other-month');\n if (day.is_period) classes.push('period');\n if (day.is_predicted_period) classes.push('predicted-period');\n if (day.is_fertile) classes.push('fertile');\n if (day.is_ovulation) classes.push('ovulation');\n \n return classes.join(' ');\n };\n\n const formatMonthYear = (date: Date) => {\n return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n };\n\n return (\n

\n {/* Calendar Header */}\n

\n {formatMonthYear(currentDate)}\n

\n navigateMonth('prev')}\n className=\"p-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors\"\n >\n ←\n \n setCurrentDate(new Date())}\n className=\"px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors text-sm\"\n >\n Today\n \n navigateMonth('next')}\n className=\"p-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors\"\n >\n →\n \n

\n\n {/* Calendar Grid */}\n

\n {/* Day headers */}\n {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (\n

\n {day}\n

\n ))}\n \n {/* Calendar days */}\n {calendarData.map(day => (\n setSelectedDate(day.date)}\n >\n

\n {new Date(day.date).getDate()}\n

\n \n {/* Flow intensity indicator */}\n {day.flow_intensity && (\n

\n )}\n \n {/* Symptom indicators */}\n {day.symptoms && day.symptoms.symptoms && day.symptoms.symptoms.length > 0 && (\n

\n {day.symptoms.symptoms.slice(0, 3).map((_, i) => (\n

\n ))}\n

\n )}\n

\n ))}\n

\n\n {/* Legend */}\n

\n Period\n

\n Predicted Period\n

\n Fertile Window\n

\n Ovulation\n

\n\n {/* Predictions Summary */}\n {prediction && (\n

📅 Predictions

\n {new Date(prediction.next_period_start).getDate()}\n

Next Period

\n {new Date(prediction.next_period_start).toLocaleDateString()}\n

\n {new Date(prediction.ovulation_date).getDate()}\n

Ovulation

\n {new Date(prediction.ovulation_date).toLocaleDateString()}\n

\n {prediction.cycle_length}\n

Cycle Length

days

\n {prediction.period_length}\n

Period Length

days

\n )}\n\n {/* Quick Symptom Entry Modal */}\n {selectedDate && (\n

setSelectedDate(null)}>\n

e.stopPropagation()}>\n

\n Symptoms for {new Date(selectedDate).toLocaleDateString()}\n

\n setSelectedDate(null)}\n className=\"text-gray-400 hover:text-gray-600\"\n >\n ✕\n \n

\n {\n onSymptomUpdate();\n setSelectedDate(null);\n }}\n compact={true}\n />\n

\n )}\n \n );\n}",[192,113,84],"8bfa3d9a-3f93-11f0-9cf0-76b3cceeab13",["D",1748856338956],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport Calendar from \"./Calendar.tsx\";\nimport CycleForm from \"./CycleForm.tsx\";\nimport SymptomForm from \"./SymptomForm.tsx\";\nimport Insights from \"./Insights.tsx\";\nimport type { Cycle, Symptom, CyclePrediction } from \"../../shared/types.ts\";\n\ninterface InitialData {\n cycles: Cycle[];\n symptoms: Symptom[];\n prediction: CyclePrediction | null;\n}\n\nexport default function App() {\n const [activeTab, setActiveTab] = useState<'calendar' | 'cycle' | 'symptoms' | 'insights'>('calendar');\n const [cycles, setCycles] = useState([]);\n const [symptoms, setSymptoms] = useState([]);\n const [prediction, setPrediction] = useState(null);\n const [loading, setLoading] = useState(true);\n\n // Load initial data\n useEffect(() => {\n const initialData = (window as any).__INITIAL_DATA__ as InitialData;\n if (initialData) {\n setCycles(initialData.cycles || []);\n setSymptoms(initialData.symptoms || []);\n setPrediction(initialData.prediction);\n setLoading(false);\n } else {\n // Fallback to API calls if no initial data\n loadData();\n }\n }, []);\n\n const loadData = async () => {\n try {\n setLoading(true);\n const [cyclesRes, symptomsRes, predictionRes] = await Promise.all([\n fetch('/api/cycles'),\n fetch('/api/symptoms'),\n fetch('/api/cycles/predictions/next').catch(() => ({ ok: false }))\n ]);\n\n if (cyclesRes.ok) {\n const cyclesData = await cyclesRes.json();\n setCycles(cyclesData);\n }\n\n if (symptomsRes.ok) {\n const symptomsData = await symptomsRes.json();\n setSymptoms(symptomsData);\n }\n\n if (predictionRes.ok) {\n const predictionData = await predictionRes.json();\n setPrediction(predictionData);\n }\n } catch (error) {\n console.error('Error loading data:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const handleCycleUpdate = async () => {\n // Reload cycles and predictions after update\n try {\n const [cyclesRes, predictionRes] = await Promise.all([\n fetch('/api/cycles'),\n fetch('/api/cycles/predictions/next').catch(() => ({ ok: false }))\n ]);\n\n if (cyclesRes.ok) {\n const cyclesData = await cyclesRes.json();\n setCycles(cyclesData);\n }\n\n if (predictionRes.ok) {\n const predictionData = await predictionRes.json();\n setPrediction(predictionData);\n } else {\n setPrediction(null);\n }\n } catch (error) {\n console.error('Error updating cycles:', error);\n }\n };\n\n const handleSymptomUpdate = async () => {\n // Reload symptoms after update\n try {\n const symptomsRes = await fetch('/api/symptoms');\n if (symptomsRes.ok) {\n const symptomsData = await symptomsRes.json();\n setSymptoms(symptomsData);\n }\n } catch (error) {\n console.error('Error updating symptoms:', error);\n }\n };\n\n const handleExport = async () => {\n try {\n const response = await fetch('/export');\n if (response.ok) {\n const blob = await response.blob();\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `menstrual-cycle-data-${new Date().toISOString().split('T')[0]}.json`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n window.URL.revokeObjectURL(url);\n }\n } catch (error) {\n console.error('Error exporting data:', error);\n alert('Failed to export data');\n }\n };\n\n if (loading) {\n return (\n

Loading your cycle data...

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

\n {/* Header */}\n

🌸 Cycle Tracker

Track your menstrual health with insights

\n \n 📥 Export Data\n \n

\n\n {/* Navigation Tabs */}\n

\n {[\n { id: 'calendar', label: '📅 Calendar', icon: '📅' },\n { id: 'cycle', label: '🩸 Log Period', icon: '🩸' },\n { id: 'symptoms', label: '💭 Symptoms', icon: '💭' },\n { id: 'insights', label: '📊 Insights', icon: '📊' }\n ].map((tab) => (\n setActiveTab(tab.id as any)}\n className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}\n >\n {tab.label}\n \n ))}\n

\n\n {/* Main Content */}\n

\n {activeTab === 'calendar' && (\n \n )}\n {activeTab === 'cycle' && (\n \n )}\n {activeTab === 'symptoms' && (\n \n )}\n {activeTab === 'insights' && (\n \n )}\n

\n );\n}",[192,113,68],"pulls","branches",1,"forks","envVars",{"_226":26,"_228":26},"connections",{"_226":26,"_227":26},"count","unfilledCount","emptyCount",{"_37":380,"_13":328,"_66":321,"_47":-5,"_39":40,"_186":371,"_187":24,"_41":381,"_43":26,"_69":114,"_189":-5,"_71":30,"_190":-5,"_256":382,"_17":383},{"_37":376,"_13":367,"_66":361,"_47":321,"_39":40,"_186":371,"_187":24,"_41":377,"_43":26,"_69":114,"_189":-5,"_71":30,"_190":-5,"_256":378,"_17":379},{"_37":368,"_13":369,"_66":370,"_47":361,"_39":40,"_186":371,"_187":24,"_41":372,"_43":26,"_69":70,"_189":373,"_71":30,"_190":-5,"_256":374,"_17":375},{"_37":358,"_13":359,"_66":360,"_47":361,"_39":40,"_186":362,"_187":24,"_41":363,"_43":26,"_69":70,"_189":364,"_71":30,"_190":-5,"_256":365,"_17":366},{"_37":354,"_13":338,"_66":332,"_47":321,"_39":40,"_186":323,"_187":24,"_41":355,"_43":26,"_69":114,"_189":-5,"_71":30,"_190":-5,"_256":356,"_17":357},{"_37":347,"_13":348,"_66":349,"_47":332,"_39":40,"_186":323,"_187":24,"_41":350,"_43":26,"_69":70,"_189":351,"_71":30,"_190":-5,"_256":352,"_17":353},{"_37":339,"_13":340,"_66":341,"_47":332,"_39":40,"_186":342,"_187":24,"_41":343,"_43":220,"_69":70,"_189":344,"_71":30,"_190":-5,"_256":345,"_17":346},{"_37":329,"_13":330,"_66":331,"_47":332,"_39":40,"_186":333,"_187":24,"_41":334,"_43":26,"_69":70,"_189":335,"_71":30,"_190":-5,"_256":336,"_17":337},{"_37":319,"_13":320,"_66":125,"_47":321,"_39":40,"_186":149,"_187":24,"_41":322,"_43":323,"_69":324,"_189":325,"_71":30,"_190":-5,"_256":326,"_17":327},{"_37":315,"_13":192,"_66":185,"_47":-5,"_39":40,"_186":292,"_187":24,"_41":316,"_43":26,"_69":114,"_189":-5,"_71":30,"_190":-5,"_256":317,"_17":318},{"_37":184,"_13":113,"_66":112,"_47":185,"_39":40,"_186":44,"_187":24,"_41":312,"_43":26,"_69":114,"_189":-5,"_71":30,"_190":-5,"_256":313,"_17":314},{"_37":214,"_13":68,"_66":67,"_47":112,"_39":40,"_186":44,"_187":24,"_41":309,"_43":26,"_69":70,"_189":216,"_71":30,"_190":-5,"_256":310,"_17":311},{"_37":210,"_13":84,"_66":83,"_47":112,"_39":40,"_186":77,"_187":24,"_41":306,"_43":26,"_69":70,"_189":212,"_71":30,"_190":-5,"_256":307,"_17":308},{"_37":206,"_13":93,"_66":92,"_47":112,"_39":40,"_186":87,"_187":24,"_41":303,"_43":26,"_69":70,"_189":208,"_71":30,"_190":-5,"_256":304,"_17":305},{"_37":202,"_13":111,"_66":110,"_47":112,"_39":40,"_186":105,"_187":24,"_41":300,"_43":26,"_69":70,"_189":204,"_71":30,"_190":-5,"_256":301,"_17":302},{"_37":198,"_13":102,"_66":101,"_47":112,"_39":40,"_186":96,"_187":24,"_41":297,"_43":26,"_69":70,"_189":200,"_71":30,"_190":-5,"_256":298,"_17":299},{"_37":289,"_13":290,"_66":291,"_47":185,"_39":40,"_186":292,"_187":24,"_41":293,"_43":26,"_69":21,"_189":294,"_71":30,"_190":-5,"_256":295,"_17":296},{"_37":281,"_13":282,"_66":283,"_47":185,"_39":40,"_186":284,"_187":24,"_41":285,"_43":26,"_69":70,"_189":286,"_71":30,"_190":-5,"_256":287,"_17":288},{"_37":273,"_13":274,"_66":275,"_47":185,"_39":40,"_186":276,"_187":24,"_41":277,"_43":26,"_69":21,"_189":278,"_71":30,"_190":-5,"_256":279,"_17":280},{"_37":269,"_13":268,"_66":262,"_47":-5,"_39":40,"_186":263,"_187":24,"_41":270,"_43":26,"_69":114,"_189":-5,"_71":30,"_190":-5,"_256":271,"_17":272},{"_37":259,"_13":260,"_66":261,"_47":262,"_39":40,"_186":263,"_187":24,"_41":264,"_43":26,"_69":70,"_189":265,"_71":30,"_190":-5,"_256":266,"_17":267},{"_37":251,"_13":252,"_66":253,"_47":-5,"_39":40,"_186":220,"_187":24,"_41":254,"_43":26,"_69":21,"_189":255,"_71":30,"_190":-5,"_256":257,"_17":258},"1d9c85f6-3f93-11f0-a547-76b3cceeab13","README.md","1d9c86dc-3f93-11f0-a547-76b3cceeab13",["D",1748856153797],"# Menstrual Cycle Tracker\n\nA comprehensive web application for tracking menstrual cycles, symptoms, and health insights.\n\n## Features\n\n- **Cycle Tracking**: Log period start/end dates and flow intensity\n- **Predictions**: Automatic calculation of next period and fertile window\n- **Symptom Tracking**: Track mood, pain levels, and other symptoms\n- **Calendar View**: Visual calendar showing cycle phases and predictions\n- **Insights**: Cycle length trends and pattern analysis\n- **Data Export**: Download your data as JSON\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ ├── cycles.ts # Cycle CRUD operations\n│ │ ├── symptoms.ts # Symptom tracking\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Calendar.tsx # Calendar view\n│ │ ├── CycleForm.tsx # Period logging form\n│ │ ├── SymptomForm.tsx # Symptom tracking form\n│ │ └── Insights.tsx # Analytics and insights\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React entry point\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Getting Started\n\n1. The app will automatically create the database tables on first run\n2. Navigate to the main page to start tracking your cycle\n3. Use the calendar view to see predictions and cycle phases\n4. Track symptoms daily for better insights\n\n## Data Privacy\n\nAll data is stored locally in your Val Town SQLite database. No data is shared with third parties.","children",[],[252],"23a422d8-3f93-11f0-8ca0-76b3cceeab13","types.ts","23a423a0-3f93-11f0-8ca0-76b3cceeab13","3a033f41-7722-4edf-8117-47d5adc79182",2,["D",1748856163909],"// Shared types for menstrual cycle tracking app\n\nexport interface Cycle {\n id?: number;\n start_date: string; // ISO date string\n end_date?: string; // ISO date string, null if ongoing\n flow_intensity: 'light' | 'medium' | 'heavy';\n notes?: string;\n created_at?: string;\n}\n\nexport interface Symptom {\n id?: number;\n date: string; // ISO date string\n mood: number; // 1-5 scale\n pain_level: number; // 1-5 scale\n energy_level: number; // 1-5 scale\n sleep_quality: number; // 1-5 scale\n symptoms: string[]; // Array of symptom names\n notes?: string;\n created_at?: string;\n}\n\nexport interface CyclePrediction {\n next_period_start: string;\n next_period_end: string;\n fertile_window_start: string;\n fertile_window_end: string;\n ovulation_date: string;\n cycle_length: number;\n period_length: number;\n}\n\nexport interface CycleInsights {\n average_cycle_length: number;\n average_period_length: number;\n cycle_regularity: 'regular' | 'irregular' | 'unknown';\n most_common_symptoms: string[];\n mood_trends: { date: string; mood: number }[];\n pain_trends: { date: string; pain: number }[];\n}\n\nexport interface CalendarDay {\n date: string;\n is_period: boolean;\n is_predicted_period: boolean;\n is_fertile: boolean;\n is_ovulation: boolean;\n flow_intensity?: 'light' | 'medium' | 'heavy';\n symptoms?: Symptom;\n}\n\nexport const SYMPTOM_OPTIONS = [\n 'Cramps',\n 'Bloating',\n 'Headache',\n 'Breast tenderness',\n 'Acne',\n 'Food cravings',\n 'Fatigue',\n 'Mood swings',\n 'Nausea',\n 'Back pain',\n 'Constipation',\n 'Diarrhea',\n 'Hot flashes',\n 'Insomnia'\n] as const;\n\nexport type SymptomOption = typeof SYMPTOM_OPTIONS[number];",[],[268,260],"shared","23a42a76-3f93-11f0-8ca0-76b3cceeab13",["D",1748856163909],[249],[268],"78b95f04-3f93-11f0-abef-76b3cceeab13","style.css","78b95fe0-3f93-11f0-abef-76b3cceeab13",10,["D",1748856306656],"/* Custom styles for menstrual cycle tracker */\n\n.rating-scale {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.rating-button {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 2px solid #d1d5db;\n background-color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s;\n font-weight: 600;\n}\n\n.rating-button:hover {\n border-color: #6366f1;\n background-color: #f0f9ff;\n}\n\n.rating-button.selected {\n border-color: #6366f1;\n background-color: #6366f1;\n color: white;\n}\n\n.symptom-checkbox {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n background-color: white;\n}\n\n.symptom-checkbox:hover {\n border-color: #6366f1;\n background-color: #f0f9ff;\n}\n\n.symptom-checkbox.selected {\n border-color: #6366f1;\n background-color: #ede9fe;\n}\n\n.flow-selector {\n display: flex;\n gap: 12px;\n margin: 16px 0;\n}\n\n.flow-option {\n flex: 1;\n padding: 12px;\n border: 2px solid #d1d5db;\n border-radius: 8px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n background-color: white;\n}\n\n.flow-option:hover {\n border-color: #6366f1;\n}\n\n.flow-option.selected {\n border-color: #6366f1;\n background-color: #ede9fe;\n}\n\n.flow-light.selected {\n background-color: #fecaca;\n border-color: #fca5a5;\n}\n\n.flow-medium.selected {\n background-color: #fca5a5;\n border-color: #f87171;\n}\n\n.flow-heavy.selected {\n background-color: #f87171;\n border-color: #dc2626;\n color: white;\n}\n\n.chart-container {\n background: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n margin-bottom: 20px;\n}\n\n.legend {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n margin-top: 16px;\n padding: 12px;\n background-color: #f9fafb;\n border-radius: 6px;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n}\n\n.legend-color {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n}\n\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.modal-content {\n background: white;\n border-radius: 12px;\n padding: 24px;\n max-width: 500px;\n width: 90%;\n max-height: 90vh;\n overflow-y: auto;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n}\n\n.tab-button {\n padding: 12px 24px;\n border: none;\n background: none;\n cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: all 0.2s;\n font-weight: 500;\n}\n\n.tab-button:hover {\n background-color: #f3f4f6;\n}\n\n.tab-button.active {\n border-bottom-color: #6366f1;\n color: #6366f1;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n margin: 20px 0;\n}\n\n.stat-card {\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n text-align: center;\n}\n\n.stat-value {\n font-size: 2rem;\n font-weight: bold;\n color: #6366f1;\n margin-bottom: 4px;\n}\n\n.stat-label {\n color: #6b7280;\n font-size: 0.875rem;\n}\n\n@media (max-width: 768px) {\n .calendar-grid {\n font-size: 14px;\n }\n \n .calendar-day {\n min-height: 60px;\n padding: 4px;\n }\n \n .modal-content {\n padding: 16px;\n margin: 16px;\n }\n \n .flow-selector {\n flex-direction: column;\n }\n \n .rating-scale {\n justify-content: center;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n}",[],[192,274],"7b21170a-3f93-11f0-b1ef-76b3cceeab13","index.tsx","7b2117b4-3f93-11f0-b1ef-76b3cceeab13",11,["D",1748856310691],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[192,282],"6a291858-3f93-11f0-aed1-76b3cceeab13","index.html","6a29192a-3f93-11f0-aed1-76b3cceeab13",9,["D",1748856282223],"\n\n\n \n \n Menstrual Cycle Tracker\n \n \n \n \n\n\n

\n \n \n\n",[],[192,290],["D",1748856675724],[],[192,113,102],["D",1748856725689],[],[192,113,111],["D",1748856632165],[],[192,113,93],["D",1748856588628],[],[192,113,84],["D",1748856338956],[],[192,113,68],["D",1748856338956],[240,241,242,243,244],[192,113],"6a2943fa-3f93-11f0-aed1-76b3cceeab13",["D",1748856282223],[239,245,246,247],[192],"aebd5636-3f94-11f0-bada-76b3cceeab13","index.ts","8210e1b0-7271-4e6c-a8be-c5950e58a310",["D",1748856826772],5,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { getCycles, getSymptoms, calculateCyclePrediction } from \"./database/queries.ts\";\nimport cyclesRoutes from \"./routes/cycles.ts\";\nimport symptomsRoutes from \"./routes/symptoms.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Initialize database on startup\nawait runMigrations();\n\n// API routes\napp.route(\"/api/cycles\", cyclesRoutes);\napp.route(\"/api/symptoms\", symptomsRoutes);\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Export data endpoint\napp.get(\"/export\", async (c) => {\n try {\n const [cycles, symptoms] = await Promise.all([\n getCycles(),\n getSymptoms()\n ]);\n\n const exportData = {\n export_date: new Date().toISOString(),\n cycles,\n symptoms\n };\n\n const filename = `menstrual-cycle-data-${new Date().toISOString().split('T')[0]}.json`;\n \n return c.json(exportData, 200, {\n 'Content-Disposition': `attachment; filename=\"${filename}\"`,\n 'Content-Type': 'application/json'\n });\n } catch (error) {\n console.error(\"Error exporting data:\", error);\n return c.json({ error: \"Failed to export data\" }, 500);\n }\n});\n\n// Main page with initial data injection\napp.get(\"/\", async (c) => {\n try {\n // Simple HTML response first to test\n const html = `\n\n\n \n \n Menstrual Cycle Tracker\n \n \n \n \n\n\n

\n \n \n\n`;\n\n // Inject initial data to avoid extra round-trips\n const [cycles, symptoms, prediction] = await Promise.all([\n getCycles(10),\n getSymptoms(),\n calculateCyclePrediction().catch(() => null)\n ]);\n\n const initialData = {\n cycles,\n symptoms: symptoms.slice(0, 30), // Last 30 symptom entries\n prediction\n };\n\n const dataScript = ``;\n\n const finalHtml = html.replace(\"\", `${dataScript}`);\n return c.html(finalHtml);\n } catch (error) {\n console.error(\"Error serving main page:\", error);\n return c.text(`Error loading application: ${error.message}`, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[328,320],"backend","575fdc98-3f93-11f0-9ef2-76b3cceeab13","symptoms.ts","575fdd4c-3f93-11f0-9ef2-76b3cceeab13","e933c03f-eea5-4333-b80f-c5570cf198a8",6,["D",1748856250706],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { \n createOrUpdateSymptom, \n getSymptoms, \n getSymptomByDate,\n getCycleInsights \n} from \"../database/queries.ts\";\nimport type { Symptom } from \"../../shared/types.ts\";\nimport { SYMPTOM_OPTIONS } from \"../../shared/types.ts\";\n\nconst symptoms = new Hono();\n\n// Get symptoms with optional date range\nsymptoms.get(\"/\", async (c) => {\n try {\n const startDate = c.req.query(\"start_date\");\n const endDate = c.req.query(\"end_date\");\n \n const symptoms = await getSymptoms(startDate, endDate);\n return c.json(symptoms);\n } catch (error) {\n console.error(\"Error fetching symptoms:\", error);\n return c.json({ error: \"Failed to fetch symptoms\" }, 500);\n }\n});\n\n// Get symptom by specific date\nsymptoms.get(\"/:date\", async (c) => {\n try {\n const date = c.req.param(\"date\");\n \n // Validate date format\n const dateObj = new Date(date);\n if (isNaN(dateObj.getTime())) {\n return c.json({ error: \"Invalid date format. Use YYYY-MM-DD\" }, 400);\n }\n \n const symptom = await getSymptomByDate(date);\n if (!symptom) {\n return c.json({ error: \"No symptoms found for this date\" }, 404);\n }\n \n return c.json(symptom);\n } catch (error) {\n console.error(\"Error fetching symptom:\", error);\n return c.json({ error: \"Failed to fetch symptom\" }, 500);\n }\n});\n\n// Create or update symptom for a date\nsymptoms.post(\"/\", async (c) => {\n try {\n const body = await c.req.json() as Omit;\n \n // Validate required fields\n if (!body.date) {\n return c.json({ error: \"date is required\" }, 400);\n }\n \n // Validate date format\n const dateObj = new Date(body.date);\n if (isNaN(dateObj.getTime())) {\n return c.json({ error: \"Invalid date format. Use YYYY-MM-DD\" }, 400);\n }\n \n // Validate rating scales (1-5)\n const ratings = ['mood', 'pain_level', 'energy_level', 'sleep_quality'] as const;\n for (const rating of ratings) {\n if (body[rating] !== undefined) {\n if (!Number.isInteger(body[rating]) || body[rating] < 1 || body[rating] > 5) {\n return c.json({ error: `${rating} must be an integer between 1 and 5` }, 400);\n }\n }\n }\n \n // Validate symptoms array\n if (body.symptoms) {\n if (!Array.isArray(body.symptoms)) {\n return c.json({ error: \"symptoms must be an array\" }, 400);\n }\n \n const invalidSymptoms = body.symptoms.filter(s => !SYMPTOM_OPTIONS.includes(s as any));\n if (invalidSymptoms.length > 0) {\n return c.json({ \n error: `Invalid symptoms: ${invalidSymptoms.join(', ')}. Valid options: ${SYMPTOM_OPTIONS.join(', ')}` \n }, 400);\n }\n }\n \n const symptom = await createOrUpdateSymptom(body);\n return c.json(symptom, 201);\n } catch (error) {\n console.error(\"Error creating/updating symptom:\", error);\n return c.json({ error: \"Failed to create/update symptom\" }, 500);\n }\n});\n\n// Get cycle insights and analytics\nsymptoms.get(\"/analytics/insights\", async (c) => {\n try {\n const insights = await getCycleInsights();\n return c.json(insights);\n } catch (error) {\n console.error(\"Error fetching insights:\", error);\n return c.json({ error: \"Failed to fetch insights\" }, 500);\n }\n});\n\n// Get available symptom options\nsymptoms.get(\"/options/list\", async (c) => {\n return c.json({ symptoms: SYMPTOM_OPTIONS });\n});\n\nexport default symptoms;",[],[328,338,330],"routes","7b089ea4-3f94-11f0-b6c8-76b3cceeab13","static.ts","5e88c886-3f93-11f0-bd45-76b3cceeab13",19,["D",1748856740024],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { getCycles, getSymptoms, calculateCyclePrediction } from \"../database/queries.ts\";\n\nconst staticRoutes = new Hono();\n\n// Serve frontend files\nstaticRoutes.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\nstaticRoutes.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Main page with initial data injection\nstaticRoutes.get(\"/\", async (c) => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject initial data to avoid extra round-trips\n const [cycles, symptoms, prediction] = await Promise.all([\n getCycles(10),\n getSymptoms(),\n calculateCyclePrediction().catch(() => null)\n ]);\n\n const initialData = {\n cycles,\n symptoms: symptoms.slice(0, 30), // Last 30 symptom entries\n prediction\n };\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving main page:\", error);\n return c.text(\"Error loading application\", 500);\n }\n});\n\n// Export data endpoint\nstaticRoutes.get(\"/export\", async (c) => {\n try {\n const [cycles, symptoms] = await Promise.all([\n getCycles(),\n getSymptoms()\n ]);\n\n const exportData = {\n export_date: new Date().toISOString(),\n cycles,\n symptoms\n };\n\n const filename = `menstrual-cycle-data-${new Date().toISOString().split('T')[0]}.json`;\n \n return c.json(exportData, 200, {\n 'Content-Disposition': `attachment; filename=\"${filename}\"`,\n 'Content-Type': 'application/json'\n });\n } catch (error) {\n console.error(\"Error exporting data:\", error);\n return c.json({ error: \"Failed to export data\" }, 500);\n }\n});\n\nexport default staticRoutes;",[],[328,338,340],"4ba7e936-3f93-11f0-b1ef-76b3cceeab13","cycles.ts","4ba7e9ea-3f93-11f0-b1ef-76b3cceeab13",["D",1748856231039],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { \n createCycle, \n updateCycle, \n getCycles, \n getCycleById, \n deleteCycle,\n calculateCyclePrediction \n} from \"../database/queries.ts\";\nimport type { Cycle } from \"../../shared/types.ts\";\n\nconst cycles = new Hono();\n\n// Get all cycles\ncycles.get(\"/\", async (c) => {\n try {\n const cycles = await getCycles();\n return c.json(cycles);\n } catch (error) {\n console.error(\"Error fetching cycles:\", error);\n return c.json({ error: \"Failed to fetch cycles\" }, 500);\n }\n});\n\n// Get cycle by ID\ncycles.get(\"/:id\", async (c) => {\n try {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid cycle ID\" }, 400);\n }\n \n const cycle = await getCycleById(id);\n if (!cycle) {\n return c.json({ error: \"Cycle not found\" }, 404);\n }\n \n return c.json(cycle);\n } catch (error) {\n console.error(\"Error fetching cycle:\", error);\n return c.json({ error: \"Failed to fetch cycle\" }, 500);\n }\n});\n\n// Create new cycle\ncycles.post(\"/\", async (c) => {\n try {\n const body = await c.req.json() as Omit;\n \n // Validate required fields\n if (!body.start_date || !body.flow_intensity) {\n return c.json({ error: \"start_date and flow_intensity are required\" }, 400);\n }\n \n // Validate flow intensity\n if (!['light', 'medium', 'heavy'].includes(body.flow_intensity)) {\n return c.json({ error: \"flow_intensity must be light, medium, or heavy\" }, 400);\n }\n \n // Validate dates\n const startDate = new Date(body.start_date);\n if (isNaN(startDate.getTime())) {\n return c.json({ error: \"Invalid start_date format\" }, 400);\n }\n \n if (body.end_date) {\n const endDate = new Date(body.end_date);\n if (isNaN(endDate.getTime())) {\n return c.json({ error: \"Invalid end_date format\" }, 400);\n }\n if (endDate < startDate) {\n return c.json({ error: \"end_date cannot be before start_date\" }, 400);\n }\n }\n \n const cycle = await createCycle(body);\n return c.json(cycle, 201);\n } catch (error) {\n console.error(\"Error creating cycle:\", error);\n return c.json({ error: \"Failed to create cycle\" }, 500);\n }\n});\n\n// Update cycle\ncycles.put(\"/:id\", async (c) => {\n try {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid cycle ID\" }, 400);\n }\n \n const body = await c.req.json() as Partial;\n \n // Validate flow intensity if provided\n if (body.flow_intensity && !['light', 'medium', 'heavy'].includes(body.flow_intensity)) {\n return c.json({ error: \"flow_intensity must be light, medium, or heavy\" }, 400);\n }\n \n // Validate dates if provided\n if (body.end_date) {\n const endDate = new Date(body.end_date);\n if (isNaN(endDate.getTime())) {\n return c.json({ error: \"Invalid end_date format\" }, 400);\n }\n }\n \n const cycle = await updateCycle(id, body);\n if (!cycle) {\n return c.json({ error: \"Cycle not found\" }, 404);\n }\n \n return c.json(cycle);\n } catch (error) {\n console.error(\"Error updating cycle:\", error);\n return c.json({ error: \"Failed to update cycle\" }, 500);\n }\n});\n\n// Delete cycle\ncycles.delete(\"/:id\", async (c) => {\n try {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid cycle ID\" }, 400);\n }\n \n const deleted = await deleteCycle(id);\n if (!deleted) {\n return c.json({ error: \"Cycle not found\" }, 404);\n }\n \n return c.json({ message: \"Cycle deleted successfully\" });\n } catch (error) {\n console.error(\"Error deleting cycle:\", error);\n return c.json({ error: \"Failed to delete cycle\" }, 500);\n }\n});\n\n// Get cycle predictions\ncycles.get(\"/predictions/next\", async (c) => {\n try {\n const prediction = await calculateCyclePrediction();\n if (!prediction) {\n return c.json({ error: \"Not enough data for predictions. Need at least 2 completed cycles.\" }, 400);\n }\n \n return c.json(prediction);\n } catch (error) {\n console.error(\"Error calculating predictions:\", error);\n return c.json({ error: \"Failed to calculate predictions\" }, 500);\n }\n});\n\nexport default cycles;",[],[328,338,348],"4ba7faca-3f93-11f0-b1ef-76b3cceeab13",["D",1748856231039],[234,235,236],[328,338],"3f85f594-3f93-11f0-b922-76b3cceeab13","queries.ts","3f85f65c-3f93-11f0-b922-76b3cceeab13","194ba6ba-e660-42d6-821d-a4eec3ab11cf",4,["D",1748856210691],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { CYCLES_TABLE, SYMPTOMS_TABLE } from \"./migrations.ts\";\nimport type { Cycle, Symptom, CyclePrediction, CycleInsights } from \"../../shared/types.ts\";\n\n// Cycle queries\nexport async function createCycle(cycle: Omit): Promise {\n const result = await sqlite.execute(\n `INSERT INTO ${CYCLES_TABLE} (start_date, end_date, flow_intensity, notes) \n VALUES (?, ?, ?, ?) RETURNING *`,\n [cycle.start_date, cycle.end_date || null, cycle.flow_intensity, cycle.notes || null]\n );\n return result[0] as Cycle;\n}\n\nexport async function updateCycle(id: number, updates: Partial): Promise {\n const setClauses = [];\n const values = [];\n \n if (updates.end_date !== undefined) {\n setClauses.push('end_date = ?');\n values.push(updates.end_date);\n }\n if (updates.flow_intensity) {\n setClauses.push('flow_intensity = ?');\n values.push(updates.flow_intensity);\n }\n if (updates.notes !== undefined) {\n setClauses.push('notes = ?');\n values.push(updates.notes);\n }\n \n if (setClauses.length === 0) return null;\n \n values.push(id);\n const result = await sqlite.execute(\n `UPDATE ${CYCLES_TABLE} SET ${setClauses.join(', ')} WHERE id = ? RETURNING *`,\n values\n );\n \n return result[0] as Cycle || null;\n}\n\nexport async function getCycles(limit = 50): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${CYCLES_TABLE} ORDER BY start_date DESC LIMIT ?`,\n [limit]\n );\n return result as Cycle[];\n}\n\nexport async function getCycleById(id: number): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${CYCLES_TABLE} WHERE id = ?`,\n [id]\n );\n return result[0] as Cycle || null;\n}\n\nexport async function deleteCycle(id: number): Promise {\n const result = await sqlite.execute(\n `DELETE FROM ${CYCLES_TABLE} WHERE id = ?`,\n [id]\n );\n return result.length > 0;\n}\n\n// Symptom queries\nexport async function createOrUpdateSymptom(symptom: Omit): Promise {\n const symptomsJson = JSON.stringify(symptom.symptoms || []);\n \n const result = await sqlite.execute(\n `INSERT OR REPLACE INTO ${SYMPTOMS_TABLE} \n (date, mood, pain_level, energy_level, sleep_quality, symptoms, notes) \n VALUES (?, ?, ?, ?, ?, ?, ?) RETURNING *`,\n [\n symptom.date,\n symptom.mood,\n symptom.pain_level,\n symptom.energy_level,\n symptom.sleep_quality,\n symptomsJson,\n symptom.notes || null\n ]\n );\n \n const returned = result[0] as any;\n return {\n ...returned,\n symptoms: JSON.parse(returned.symptoms || '[]')\n };\n}\n\nexport async function getSymptoms(startDate?: string, endDate?: string): Promise {\n let query = `SELECT * FROM ${SYMPTOMS_TABLE}`;\n const params = [];\n \n if (startDate && endDate) {\n query += ` WHERE date BETWEEN ? AND ?`;\n params.push(startDate, endDate);\n } else if (startDate) {\n query += ` WHERE date >= ?`;\n params.push(startDate);\n }\n \n query += ` ORDER BY date DESC`;\n \n const result = await sqlite.execute(query, params);\n return result.map((row: any) => ({\n ...row,\n symptoms: JSON.parse(row.symptoms || '[]')\n })) as Symptom[];\n}\n\nexport async function getSymptomByDate(date: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${SYMPTOMS_TABLE} WHERE date = ?`,\n [date]\n );\n \n if (!result[0]) return null;\n \n const row = result[0] as any;\n return {\n ...row,\n symptoms: JSON.parse(row.symptoms || '[]')\n };\n}\n\n// Analytics and predictions\nexport async function calculateCyclePrediction(): Promise {\n const cycles = await getCycles(6); // Get last 6 cycles for prediction\n \n if (cycles.length < 2) return null;\n \n // Calculate average cycle length\n const completedCycles = cycles.filter(c => c.end_date);\n if (completedCycles.length < 2) return null;\n \n const cycleLengths = [];\n const periodLengths = [];\n \n for (let i = 0; i < completedCycles.length - 1; i++) {\n const current = new Date(completedCycles[i].start_date);\n const next = new Date(completedCycles[i + 1].start_date);\n const cycleLength = Math.abs((current.getTime() - next.getTime()) / (1000 * 60 * 60 * 24));\n cycleLengths.push(cycleLength);\n }\n \n completedCycles.forEach(cycle => {\n if (cycle.end_date) {\n const start = new Date(cycle.start_date);\n const end = new Date(cycle.end_date);\n const periodLength = Math.abs((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)) + 1;\n periodLengths.push(periodLength);\n }\n });\n \n const avgCycleLength = Math.round(cycleLengths.reduce((a, b) => a + b, 0) / cycleLengths.length);\n const avgPeriodLength = Math.round(periodLengths.reduce((a, b) => a + b, 0) / periodLengths.length);\n \n // Predict next period based on last cycle\n const lastCycle = cycles[0];\n const lastPeriodStart = new Date(lastCycle.start_date);\n \n const nextPeriodStart = new Date(lastPeriodStart);\n nextPeriodStart.setDate(nextPeriodStart.getDate() + avgCycleLength);\n \n const nextPeriodEnd = new Date(nextPeriodStart);\n nextPeriodEnd.setDate(nextPeriodEnd.getDate() + avgPeriodLength - 1);\n \n // Calculate fertile window (typically 5 days before ovulation + ovulation day)\n const ovulationDate = new Date(nextPeriodStart);\n ovulationDate.setDate(ovulationDate.getDate() - 14); // Ovulation typically 14 days before period\n \n const fertileStart = new Date(ovulationDate);\n fertileStart.setDate(fertileStart.getDate() - 5);\n \n const fertileEnd = new Date(ovulationDate);\n fertileEnd.setDate(fertileEnd.getDate() + 1);\n \n return {\n next_period_start: nextPeriodStart.toISOString().split('T')[0],\n next_period_end: nextPeriodEnd.toISOString().split('T')[0],\n fertile_window_start: fertileStart.toISOString().split('T')[0],\n fertile_window_end: fertileEnd.toISOString().split('T')[0],\n ovulation_date: ovulationDate.toISOString().split('T')[0],\n cycle_length: avgCycleLength,\n period_length: avgPeriodLength\n };\n}\n\nexport async function getCycleInsights(): Promise {\n const cycles = await getCycles();\n const symptoms = await getSymptoms();\n \n // Calculate cycle statistics\n const completedCycles = cycles.filter(c => c.end_date);\n const cycleLengths = [];\n const periodLengths = [];\n \n for (let i = 0; i < completedCycles.length - 1; i++) {\n const current = new Date(completedCycles[i].start_date);\n const next = new Date(completedCycles[i + 1].start_date);\n const cycleLength = Math.abs((current.getTime() - next.getTime()) / (1000 * 60 * 60 * 24));\n cycleLengths.push(cycleLength);\n }\n \n completedCycles.forEach(cycle => {\n if (cycle.end_date) {\n const start = new Date(cycle.start_date);\n const end = new Date(cycle.end_date);\n const periodLength = Math.abs((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)) + 1;\n periodLengths.push(periodLength);\n }\n });\n \n const avgCycleLength = cycleLengths.length > 0 \n ? cycleLengths.reduce((a, b) => a + b, 0) / cycleLengths.length \n : 0;\n \n const avgPeriodLength = periodLengths.length > 0\n ? periodLengths.reduce((a, b) => a + b, 0) / periodLengths.length\n : 0;\n \n // Determine regularity\n const cycleVariation = cycleLengths.length > 1\n ? Math.max(...cycleLengths) - Math.min(...cycleLengths)\n : 0;\n \n let regularity: 'regular' | 'irregular' | 'unknown' = 'unknown';\n if (cycleLengths.length >= 3) {\n regularity = cycleVariation <= 7 ? 'regular' : 'irregular';\n }\n \n // Most common symptoms\n const allSymptoms = symptoms.flatMap(s => s.symptoms || []);\n const symptomCounts = allSymptoms.reduce((acc, symptom) => {\n acc[symptom] = (acc[symptom] || 0) + 1;\n return acc;\n }, {} as Record);\n \n const mostCommonSymptoms = Object.entries(symptomCounts)\n .sort(([,a], [,b]) => b - a)\n .slice(0, 5)\n .map(([symptom]) => symptom);\n \n // Mood and pain trends (last 30 days)\n const thirtyDaysAgo = new Date();\n thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);\n const recentSymptoms = symptoms.filter(s => new Date(s.date) >= thirtyDaysAgo);\n \n const moodTrends = recentSymptoms\n .filter(s => s.mood)\n .map(s => ({ date: s.date, mood: s.mood }))\n .sort((a, b) => a.date.localeCompare(b.date));\n \n const painTrends = recentSymptoms\n .filter(s => s.pain_level)\n .map(s => ({ date: s.date, pain: s.pain_level }))\n .sort((a, b) => a.date.localeCompare(b.date));\n \n return {\n average_cycle_length: Math.round(avgCycleLength * 10) / 10,\n average_period_length: Math.round(avgPeriodLength * 10) / 10,\n cycle_regularity: regularity,\n most_common_symptoms: mostCommonSymptoms,\n mood_trends: moodTrends,\n pain_trends: painTrends\n };\n}",[],[328,367,359],"database","28686a0e-3f93-11f0-9177-76b3cceeab13","migrations.ts","28686ac2-3f93-11f0-9177-76b3cceeab13",3,["D",1748856171907],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nconst CYCLES_TABLE = 'menstrual_cycles_v1';\nconst SYMPTOMS_TABLE = 'cycle_symptoms_v1';\n\nexport async function runMigrations() {\n console.log('Running database migrations...');\n \n // Create cycles table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${CYCLES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n start_date TEXT NOT NULL,\n end_date TEXT,\n flow_intensity TEXT NOT NULL CHECK (flow_intensity IN ('light', 'medium', 'heavy')),\n notes TEXT,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Create symptoms table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${SYMPTOMS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n date TEXT NOT NULL UNIQUE,\n mood INTEGER CHECK (mood >= 1 AND mood <= 5),\n pain_level INTEGER CHECK (pain_level >= 1 AND pain_level <= 5),\n energy_level INTEGER CHECK (energy_level >= 1 AND energy_level <= 5),\n sleep_quality INTEGER CHECK (sleep_quality >= 1 AND sleep_quality <= 5),\n symptoms TEXT, -- JSON array of symptom names\n notes TEXT,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n console.log('Database migrations completed');\n}\n\nexport { CYCLES_TABLE, SYMPTOMS_TABLE };",[],[328,367,369],"286876d4-3f93-11f0-9177-76b3cceeab13",["D",1748856171907],[231,232],[328,367],"286874f4-3f93-11f0-9177-76b3cceeab13",["D",1748856171907],[230,233,237],[328],["D",1748856107449],{"_11":12,"_162":74},{"_11":12,"_158":-5,"_73":74,"_31":72,"_159":160,"_161":30},{"_43":149,"_13":16,"_37":40,"_150":116,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":14,"_157":12},"ctx",{"_56":-5,"_181":421,"_422":423,"_424":425,"_426":30,"_427":30,"_428":30,"_429":24,"_430":-5,"_431":-7,"_432":-7,"_433":26,"_434":30,"_435":30,"_436":-5,"_437":30,"_438":30,"_439":30,"_440":-5},"ENV",{"_392":393,"_394":395,"_396":16,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · components