\n \n \n\n",[],[260,270],"54babcd2-3f94-11f0-8e48-76b3cceeab13","SymptomForm.tsx","54babd7c-3f94-11f0-8e48-76b3cceeab13","f80e46b2-9670-476f-950c-38eb0e72b725",17,["D",1748856675724],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Symptom } from \"../../shared/types.ts\";\nimport { SYMPTOM_OPTIONS } from \"../../shared/types.ts\";\n\ninterface SymptomFormProps {\n symptoms: Symptom[];\n selectedDate?: string;\n onUpdate: () => void;\n compact?: boolean;\n}\n\nexport default function SymptomForm({ symptoms, selectedDate, onUpdate, compact = false }: SymptomFormProps) {\n const [formData, setFormData] = useState({\n date: selectedDate || new Date().toISOString().split('T')[0],\n mood: 3,\n pain_level: 1,\n energy_level: 3,\n sleep_quality: 3,\n symptoms: [] as string[],\n notes: ''\n });\n const [loading, setLoading] = useState(false);\n const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);\n\n // Load existing symptom data for the selected date\n useEffect(() => {\n const existingSymptom = symptoms.find(s => s.date === formData.date);\n if (existingSymptom) {\n setFormData({\n date: existingSymptom.date,\n mood: existingSymptom.mood || 3,\n pain_level: existingSymptom.pain_level || 1,\n energy_level: existingSymptom.energy_level || 3,\n sleep_quality: existingSymptom.sleep_quality || 3,\n symptoms: existingSymptom.symptoms || [],\n notes: existingSymptom.notes || ''\n });\n } else if (selectedDate) {\n setFormData(prev => ({ ...prev, date: selectedDate }));\n }\n }, [formData.date, symptoms, selectedDate]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setMessage(null);\n\n try {\n const response = await fetch('/api/symptoms', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(formData)\n });\n\n if (response.ok) {\n setMessage({ type: 'success', text: 'Symptoms saved successfully!' });\n onUpdate();\n \n if (!compact) {\n // Reset form for next day if not in compact mode\n const nextDay = new Date(formData.date);\n nextDay.setDate(nextDay.getDate() + 1);\n setFormData(prev => ({\n ...prev,\n date: nextDay.toISOString().split('T')[0],\n notes: ''\n }));\n }\n } else {\n const error = await response.json();\n setMessage({ type: 'error', text: error.error || 'Failed to save symptoms' });\n }\n } catch (error) {\n setMessage({ type: 'error', text: 'Network error. Please try again.' });\n } finally {\n setLoading(false);\n }\n };\n\n const handleSymptomToggle = (symptom: string) => {\n setFormData(prev => ({\n ...prev,\n symptoms: prev.symptoms.includes(symptom)\n ? prev.symptoms.filter(s => s !== symptom)\n : [...prev.symptoms, symptom]\n }));\n };\n\n const RatingScale = ({ \n label, \n value, \n onChange, \n labels \n }: { \n label: string; \n value: number; \n onChange: (value: number) => void;\n labels: string[];\n }) => (\n

\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}",[],[260,286,278],"components","727cda34-3f94-11f0-8056-76b3cceeab13","Insights.tsx","727cdad4-3f94-11f0-8056-76b3cceeab13",18,["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}",[],[260,286,288],"3abe1da6-3f94-11f0-904f-76b3cceeab13","CycleForm.tsx","3abe1e5a-3f94-11f0-904f-76b3cceeab13",16,["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}",[],[260,286,296],"20cb1f66-3f94-11f0-85c7-76b3cceeab13","Calendar.tsx","20cb202e-3f94-11f0-85c7-76b3cceeab13",15,["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}",[],[260,286,304],"8bfa3d9a-3f93-11f0-9cf0-76b3cceeab13","App.tsx","8bfa3e44-3f93-11f0-9cf0-76b3cceeab13",12,["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}",[],[260,286,312],"8bfa5ab4-3f93-11f0-9cf0-76b3cceeab13",["D",1748856338956],[218,219,220,221,222],[260,286],"6a2943fa-3f93-11f0-aed1-76b3cceeab13",["D",1748856282223],[217,223,224,225],[260],"aebd5636-3f94-11f0-bada-76b3cceeab13","index.ts",["D",1748856826772],"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;",[],[180,328],["D",1748856250706],[],[180,101,82],["D",1748856740024],[],[180,101,91],["D",1748856231039],[],[180,101,67],["D",1748856231039],[212,213,214],[180,101],"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}",[],[180,355,347],"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 };",[],[180,355,357],"286876d4-3f93-11f0-9177-76b3cceeab13",["D",1748856171907],[209,210],[180,355],"286874f4-3f93-11f0-9177-76b3cceeab13",["D",1748856171907],[208,211,215],[180],["D",1748856107449],{"_11":12,"_150":73},{"_11":12,"_146":-5,"_72":73,"_31":71,"_147":148,"_149":30},{"_42":137,"_13":16,"_36":39,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_55":-5,"_169":409,"_410":411,"_412":413,"_414":30,"_415":30,"_416":30,"_417":24,"_418":-5,"_419":-7,"_420":-7,"_421":26,"_422":30,"_423":30,"_424":-5,"_425":30,"_426":30,"_427":30,"_428":-5},"ENV",{"_380":381,"_382":383,"_384":16,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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 · routes