π₯ {t('recipeIdeas')}
{t('recipePhaseLabel')}
{loading ? (
) : recipes.length === 0 ? (
{t('recipesNone')}
) : (
{recipes.map(r => )}
)}
Recipes from Pick Up Limes β whole food, plant-based.
);
}
function SymptomInsightsCard({ symptoms, phaseCalendar, t }) {
if (!symptoms || symptoms.length === 0) return null;
// Build date β phase lookup
const phaseByDate = {};
(phaseCalendar || []).forEach(e => { phaseByDate[e.date] = e.phase; });
// Aggregate
const totalCounts = {};
const phaseCounts = {}; // { phase: { symptom: count } }
const energyByDate = {};
for (const log of symptoms) {
if (log.energy != null) energyByDate[log.date] = log.energy;
const phase = phaseByDate[log.date];
for (const s of (log.symptoms || [])) {
totalCounts[s] = (totalCounts[s] || 0) + 1;
if (phase) {
if (!phaseCounts[phase]) phaseCounts[phase] = {};
phaseCounts[phase][s] = (phaseCounts[phase][s] || 0) + 1;
}
}
}
const topSymptoms = Object.entries(totalCounts).sort((a, b) => b[1] - a[1]).slice(0, 6);
const hasInsights = topSymptoms.length > 0 || Object.keys(energyByDate).length > 3;
if (!hasInsights) return null;
// 30-day energy bars (oldest β newest)
const today = new Date();
const energyBars = [];
for (let i = 29; i >= 0; i--) {
const d = new Date(today.getTime() - i * 86400000);
const key = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
energyBars.push({ date: key, energy: energyByDate[key] ?? null });
}
const avg = (() => {
const vals = energyBars.map(b => b.energy).filter(v => v != null);
return vals.length ? (vals.reduce((a, b) => a + b, 0) / vals.length).toFixed(1) : null;
})();
// Phase Γ top symptom
const PHASE_ORDER = ['menstrual', 'follicular', 'ovulation', 'early_mid_luteal', 'late_luteal'];
const phaseTopSymptom = {};
for (const [phase, counts] of Object.entries(phaseCounts)) {
const top = Object.entries(counts).sort((a, b) => b[1] - a[1])[0];
if (top && top[1] >= 2) phaseTopSymptom[phase] = top;
}
const hasPhaseData = Object.keys(phaseTopSymptom).length > 0;
return (
{/* Energy sparkline */}
{energyBars.some(b => b.energy != null) && (
β‘ Energy β 30 days
{avg && avg {avg}/5}
{energyBars.map((b, i) => {
const h = b.energy != null ? (b.energy / 5) * 36 : 4;
const color = b.energy == null ? 'var(--border)' : b.energy >= 4 ? 'var(--accent-green)' : b.energy <= 2 ? '#ef4444' : '#fbbf24';
return (
);
})}
30d ago
Today
)}
{/* Top symptoms */}
{topSymptoms.length > 0 && (
Most frequent symptoms
{topSymptoms.map(([s, count]) => (
{SYMPTOM_ICONS[s] || 'β’'}
{s.replace(/_/g, ' ')}
{count}Γ
))}
)}
{/* Phase Γ symptom patterns */}
{hasPhaseData && (
Symptoms by phase
{PHASE_ORDER.filter(p => phaseTopSymptom[p]).map(phase => {
const [sym, count] = phaseTopSymptom[phase];
const m = CYCLE_META[phase] || {};
return (
{t(CYCLE_PHASE_LABELS[phase] || phase)}
{SYMPTOM_ICONS[sym] || 'β’'} {sym.replace(/_/g, ' ')}
{count}Γ
);
})}
)}
);
}
window.RecipeCard = RecipeCard;
window.CyclePage = function CyclePage({ config, t }) {
const [data, setData] = React.useState(null);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
api.get('/api/cycle/dashboard')
.then(setData)
.catch(() => setData({ enabled: false }))
.finally(() => setLoading(false));
}, []);
if (loading) {
return (
πΈ {t('cyclePage')}
{/* Hero: current phase */}
{t('cycleDayOf').replace('{day}', today?.dayOfCycle ?? 'β').replace('{total}', cycleLength)}
{/* Sims focus card */}
{focusKey && (
𧬠{t('cycleTrainingFocus')}
{t(focusKey)}
)}
{/* Predictions */}
{predictions && (
π
{t('cyclePredictions')}
{t('cycleEstimated')}
)}
{/* 35-day phase summary strip */}
{phaseCalendar && phaseCalendar.length > 0 && (
ποΈ {t('cyclePhaseSummary')}
{phaseCalendar.map(entry => {
const m = CYCLE_META[entry.phase] || {};
return (
);
})}
{Object.entries(CYCLE_META).map(([key, m]) => (
{t(CYCLE_PHASE_LABELS[key])}
))}
)}
{/* Symptom history */}
π©Ί {t('cycleSymptomHistory')}
{recentSymptoms.length === 0 ? (
{t('cycleNoSymptoms')}
) : (
{recentSymptoms.map(log => (
{log.date}
{log.energy != null && (
= 4 ? 'var(--accent-green-dim)' : log.energy <= 2 ? 'rgba(239,68,68,0.15)' : 'rgba(245,158,11,0.15)',
color: log.energy >= 4 ? 'var(--accent-green)' : log.energy <= 2 ? '#f87171' : '#fbbf24',
border: '1px solid currentColor', opacity: 0.9,
fontWeight: 600,
}}>
β‘ {log.energy}/5
)}
{(log.symptoms || []).map(s => (
{SYMPTOM_ICONS[s] || 'β’'} {s.replace(/_/g, ' ')}
))}
))}
)}
{/* Symptom pattern insights */}
{/* Phase Γ training retrospective */}
π {t('cyclePhaseTraining')}
{!phaseTraining ? (
{t('cyclePhaseTrainingNone')}
) : Object.keys(phaseTraining).length === 0 ? (
No activities in the last 35 days.
) : (
{PHASE_ORDER.filter(p => phaseTraining[p]).map(phaseKey => {
const bucket = phaseTraining[phaseKey];
const m = CYCLE_META[phaseKey] || {};
return (
{t(CYCLE_PHASE_LABELS[phaseKey])}
{bucket.count} session{bucket.count !== 1 ? 's' : ''} Β· {Math.round(bucket.movingTimeMin / 60)}h
);
})}
)}
{/* Recipe recommendations for current phase */}
{/* Disclaimer */}
{t('cycleDisclaimer')}
);
};
)}