\n {phases.map((phase, index) => (\n

\n {phase.name}\n

\n ))}\n

\n );\n}\n\nfunction PeriodCalculator() {\n const [lastPeriodDate, setLastPeriodDate] = useState('');\n const [cycleLength, setCycleLength] = useState(28);\n const [futurePeriods, setFuturePeriods] = useState(3);\n const [nextPeriodDates, setNextPeriodDates] = useState([]);\n \n // New state for symptom tracking\n const [currentSymptom, setCurrentSymptom] = useState({\n date: new Date().toISOString().split('T')[0],\n mood: '',\n physicalSymptoms: [],\n notes: ''\n });\n const [symptomHistory, setSymptomHistory] = useState([]);\n const [fertileWindow, setFertileWindow] = useState<{ start: string, end: string } | null>(null);\n\n // Symptom tracking physical symptoms\n const physicalSymptomOptions = [\n 'Cramps', 'Headache', 'Bloating', 'Fatigue', \n 'Breast Tenderness', 'Acne', 'Lower Back Pain'\n ];\n\n // Mood options\n const moodOptions = [\n '😊 Happy', '😴 Tired', '😢 Sad', \n '😠 Irritable', '😌 Calm', '�anxiety Anxious'\n ];\n\n const calculateNextPeriods = () => {\n if (!lastPeriodDate) return;\n\n const periodDates: string[] = [];\n let lastDate = new Date(lastPeriodDate);\n\n // Calculate fertile window\n const ovulationDate = new Date(lastDate);\n ovulationDate.setDate(lastDate.getDate() + Math.floor(cycleLength * 0.5));\n const fertileStart = new Date(ovulationDate);\n fertileStart.setDate(ovulationDate.getDate() - 5);\n const fertileEnd = new Date(ovulationDate);\n fertileEnd.setDate(ovulationDate.getDate() + 1);\n\n setFertileWindow({\n start: fertileStart.toISOString().split('T')[0],\n end: fertileEnd.toISOString().split('T')[0]\n });\n\n for (let i = 0; i < futurePeriods; i++) {\n const nextDate = new Date(lastDate);\n nextDate.setDate(lastDate.getDate() + cycleLength);\n periodDates.push(nextDate.toISOString().split('T')[0]);\n lastDate = nextDate;\n }\n\n setNextPeriodDates(periodDates);\n };\n\n const handleSymptomSubmit = async () => {\n const updatedHistory = [...symptomHistory, currentSymptom];\n setSymptomHistory(updatedHistory);\n \n // Persist symptoms (server-side blob storage)\n try {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n await blob.setJSON(`symptom_history_${new Date().getFullYear()}`, updatedHistory);\n } catch (error) {\n console.error(\"Failed to save symptoms\", error);\n }\n\n // Reset current symptom\n setCurrentSymptom({\n date: new Date().toISOString().split('T')[0],\n mood: '',\n physicalSymptoms: [],\n notes: ''\n });\n };\n\n const toggleSymptom = (symptom: string) => {\n setCurrentSymptom(prev => ({\n ...prev,\n physicalSymptoms: prev.physicalSymptoms.includes(symptom)\n ? prev.physicalSymptoms.filter(s => s !== symptom)\n : [...prev.physicalSymptoms, symptom]\n }));\n };\n\n return (\n

🩸 Comprehensive Period Tracker

\n\n {/* Existing Period Prediction Section */}\n

\n Last Period Date:\n setLastPeriodDate(e.target.value)}\n style={{ width: '100%', padding: '10px', margin: '10px 0' }}\n />\n \n

\n\n

\n Average Cycle Length (days):\n setCycleLength(Number(e.target.value))}\n min=\"21\" \n max=\"35\"\n style={{ width: '100%', padding: '10px', margin: '10px 0' }}\n />\n \n

\n\n \n\n {/* Fertile Window Display */}\n {fertileWindow && (\n

🌸 Fertility Window

From {new Date(fertileWindow.start).toLocaleDateString()} to {new Date(fertileWindow.end).toLocaleDateString()}

\n )}\n\n {/* Symptom Tracking Section */}\n

Daily Symptom Log

\n \n {/* Mood Selection */}\n

\n Today's Mood:\n \n

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

\n Physical Symptoms:\n

\n {physicalSymptomOptions.map(symptom => (\n toggleSymptom(symptom)}\n style={{\n margin: '5px',\n padding: '5px 10px',\n backgroundColor: currentSymptom.physicalSymptoms.includes(symptom) ? '#ff6b6b' : '#f0f0f0',\n color: currentSymptom.physicalSymptoms.includes(symptom) ? 'white' : 'black',\n border: '1px solid #ddd',\n borderRadius: '5px'\n }}\n >\n {symptom}\n \n ))}\n

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

setCurrentSymptom(prev => ({ ...prev, notes: e.target.value }))}\n          style={{ \n            width: '100%', \n            height: '100px', \n            marginTop: '10px',\n            padding: '10px'\n          }}\n        />\n\n        <button \n          onClick={handleSymptomSubmit}\n          style={{\n            backgroundColor: '#4CAF50',\n            color: 'white',\n            border: 'none',\n            padding: '10px 20px',\n            borderRadius: '5px',\n            cursor: 'pointer',\n            marginTop: '10px'\n          }}\n        >\n          Log Symptoms\n        </button>\n      </div>\n\n      {/* Symptom History */}\n      {symptomHistory.length > 0 && (\n        <div style={{ \n          marginTop: '20px', \n          backgroundColor: '#e0e0e0', \n          padding: '15px', \n          borderRadius: '5px' \n        }}>\n          <h3>Symptom History</h3>\n          {symptomHistory.slice(-5).map((entry, index) => (\n            <div key={index} style={{ \n              backgroundColor: 'white', \n              margin: '5px 0', \n              padding: '10px', \n              borderRadius: '5px' \n            }}>\n              <p>📅 {entry.date}</p>\n              <p>😊 Mood: {entry.mood}</p>\n              <p>🩺 Symptoms: {entry.physicalSymptoms.join(', ') || 'None'}</p>\n              {entry.notes && <p>📝 Notes: {entry.notes}</p>}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<PeriodCalculator />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <html>\n      <head>\n        <title>Comprehensive Period Tracker</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"content-type\": \"text/html\" }\n  });\n}","deleted","label",[98],"permalink","https://www.val.town/x/Ravikumarraj/splendidAzureKiwi/code/main.tsx","extension","actionData","errors"]
</article></body></html>