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