tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: '#5D5CDE', } } } }

// Generate dates for 7 tracking points (every 3 days for 3 weeks) function generateTrackingDates() { const dates = []; const today = new Date();

for (let i = 0; i < 7; i++) { const date = new Date(today); date.setDate(today.getDate() + (i * 3)); dates.push(date); } return dates; } // Format date for display function formatDate(date) { return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); } // Categorize blood pressure function categorizeBP(systolic, diastolic) { if (!systolic || !diastolic) return { category: '', color: '' }; const sys = parseInt(systolic); const dia = parseInt(diastolic); if (sys >= 180 || dia >= 120) { return { category: 'Crisis', color: 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200' }; } else if (sys >= 140 || dia >= 90) { return { category: 'Stage 2', color: 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200' }; } else if (sys >= 130 || dia >= 80) { return { category: 'Stage 1', color: 'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200' }; } else if (sys >= 120 && dia < 80) { return { category: 'Elevated', color: 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200' }; } else if (sys < 120 && dia < 80) { return { category: 'Normal', color: 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200' }; } return { category: '', color: '' }; } // Validate BP input function validateBP(value, type) { const num = parseInt(value); if (type === 'systolic') { return num >= 70 && num <= 250; } else { return num >= 40 && num <= 150; } } // Update summary dashboard function updateSummary() { const counts = { normal: 0, elevated: 0, stage1: 0, stage2: 0, crisis: 0 }; Object.values(bpData).forEach(entry => { if (entry.systolic && entry.diastolic) { const category = categorizeBP(entry.systolic, entry.diastolic).category.toLowerCase(); if (category === 'stage 1') counts.stage1++; else if (category === 'stage 2') counts.stage2++; else if (counts[category] !== undefined) counts[category]++; } });

document.getElementById('normal-count').textContent = counts.normal; document.getElementById('elevated-count').textContent = counts.elevated; document.getElementById('stage1-count').textContent = counts.stage1; document.getElementById('stage2-count').textContent = counts.stage2; document.getElementById('crisis-count').textContent = counts.crisis; }

// Create table row function createTableRow(date, dateKey) { const entry = bpData[dateKey] || {}; const bpCategory = categorizeBP(entry.systolic, entry.diastolic);

return `

${formatDate(date)} ${bpCategory.category}

`; }

// Update entry data function updateEntry(dateKey, field, value) { if (!bpData[dateKey]) bpData[dateKey] = {}; bpData[dateKey][field] = value; }

// Update BP and recalculate category function updateBP(dateKey, field, value, input) { if (!validateBP(value, field) && value !== '') { input.classList.add('border-red-500'); return; } input.classList.remove('border-red-500');

updateEntry(dateKey, field, value);

// Update category const entry = bpData[dateKey]; const category = categorizeBP(entry.systolic, entry.diastolic); const categorySpan = document.getElementById(`category-${dateKey}`); categorySpan.textContent = category.category; categorySpan.className = `px-2 py-1 rounded-full text-xs font-medium ${category.color}`;

updateSummary(); }

// Validate input on typing function validateInput(input, type) { const value = input.value; if (value === '') { input.classList.remove('border-red-500', 'border-green-500'); return; }

if (validateBP(value, type)) { input.classList.remove('border-red-500'); input.classList.add('border-green-500'); } else { input.classList.add('border-red-500'); input.classList.remove('border-green-500'); } }

// Initialize the application function initApp() { const dates = generateTrackingDates(); const tableBody = document.getElementById('bp-table-body');

let tableHTML = ''; dates.forEach(date => { const dateKey = date.toISOString().split('T')[0]; tableHTML += createTableRow(date, dateKey); });

tableBody.innerHTML = tableHTML; updateSummary(); }

// Start the app when page loads document.addEventListener('DOMContentLoaded', initApp);