\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}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/MrsJD/public/code/frontend/components/Calendar.tsx","extension","actionData","errors"]