\n \n \n\n",[],[236,246],"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}",[],[236,262,254],"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}",[],[236,262,264],"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}",[],[236,262,272],"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}",[],[236,262,280],"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}",[],[236,262,288],"8bfa5ab4-3f93-11f0-9cf0-76b3cceeab13",["D",1748856338956],[194,195,196,197,198],[236,262],"6a2943fa-3f93-11f0-aed1-76b3cceeab13",["D",1748856282223],[193,199,200,201],[236],"aebd5636-3f94-11f0-bada-76b3cceeab13","index.ts",["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;",[],[161,304],"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;",[],[161,320,312],"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;",[],[161,320,322],"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;",[],[161,320,330],"4ba7faca-3f93-11f0-b1ef-76b3cceeab13",["D",1748856231039],[188,189,190],[161,320],["D",1748856210691],[],[161,82,80],["D",1748856171907],[],[161,82,65],["D",1748856171907],[185,186],[161,82],"286874f4-3f93-11f0-9177-76b3cceeab13",["D",1748856171907],[184,187,191],[161],["D",1748856107449],{"_11":12,"_131":71},{"_11":12,"_127":-5,"_70":71,"_31":69,"_128":129,"_130":30},{"_40":118,"_13":16,"_34":37,"_119":85,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":14,"_126":12},"ctx",{"_53":-5,"_150":390,"_391":392,"_393":394,"_395":30,"_396":30,"_397":30,"_398":24,"_399":-5,"_400":-7,"_401":-7,"_402":26,"_403":30,"_404":30,"_405":-5,"_406":30,"_407":30,"_408":30,"_409":-5},"ENV",{"_361":362,"_363":364,"_365":16,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389},"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 · database