Spaces:
Running
Running
File size: 3,216 Bytes
7601c3d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import './WeeklySummary.css';
function WeeklySummary({
summary,
recommendation,
weekKey,
isCurrentWeek,
weeksOfData,
maxRoutes,
hasPrevWeek,
hasNextWeek,
onPrevWeek,
onNextWeek,
}) {
const hasSessions = summary.session_count > 0;
return (
<div className="weekly-summary card">
<div className="week-nav">
<button className="week-nav-btn" disabled={!hasPrevWeek} onClick={onPrevWeek} aria-label="Previous week">
‹
</button>
<h2>
{isCurrentWeek ? 'This Week' : 'Week'} <span className="week-label">{weekKey}</span>
</h2>
<button className="week-nav-btn" disabled={!hasNextWeek} onClick={onNextWeek} aria-label="Next week">
›
</button>
</div>
{hasSessions ? (
<>
<div className="stats-grid">
<div className="stat-card">
<span className="stat-value">{summary.total_routes}</span>
<span className="stat-label">routes</span>
</div>
<div className="stat-card">
<span className="stat-value">{summary.total_training_load.toFixed(0)}</span>
<span className="stat-label">training load</span>
</div>
<div className="stat-card">
<span className="stat-value">{summary.session_count}</span>
<span className="stat-label">sessions</span>
</div>
<div className="stat-card">
<span className="stat-value">{summary.avg_rpe.toFixed(1)}</span>
<span className="stat-label">avg RPE</span>
</div>
</div>
{maxRoutes && (
<div className="max-routes-block">
<h3>
Single Session Cap <span className="rec-method">(30-day max +10%)</span>
</h3>
<div className="rec-row">
<span className="rec-label">Max routes (30d)</span>
<span className="rec-value">{maxRoutes.max_routes}</span>
</div>
<div className="rec-row">
<span className="rec-label">Next-session guide</span>
<span className="rec-value threshold-value">{maxRoutes.threshold_routes} routes</span>
</div>
</div>
)}
<div className="recommendation">
<h3>
Next Week Target <span className="rec-method">(ACWR, {weeksOfData || 1}w avg)</span>
</h3>
<div className="rec-row">
<span className="rec-label">Routes</span>
<span className="rec-value">
{recommendation.min_routes} - {recommendation.max_routes}
</span>
</div>
<div className="rec-row">
<span className="rec-label">Training Load</span>
<span className="rec-value">
{recommendation.min_load} - {recommendation.max_load}
</span>
</div>
</div>
</>
) : (
<p className="empty-message">No sessions logged for this week yet. Add one to see your stats.</p>
)}
</div>
);
}
export default WeeklySummary;
|