Build climbing dashboard with RPE and grade tracking

package.json

@@ -10,6 +10,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
+    "recharts": "^3.7.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,38 +1,49 @@
-.App {
-  text-align: center;
+.dashboard {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem 1.5rem 3rem;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.dashboard-header {
+  margin-bottom: 1.25rem;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.dashboard-header h1 {
+  margin: 0;
+  font-size: 1.85rem;
+  color: var(--color-text);
+}
+
+.dashboard-header p {
+  margin: 0.45rem 0 0;
+  color: var(--color-text-muted);
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.dashboard-main {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  gap: 1.5rem;
 }
 
-.App-link {
-  color: #61dafb;
+.dashboard-top {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+.card {
+  background: var(--color-card);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .dashboard {
+    padding: 1rem;
   }
-  to {
-    transform: rotate(360deg);
+
+  .dashboard-top {
+    grid-template-columns: 1fr;
   }
 }

src/App.js

@@ -1,23 +1,103 @@
-import logo from './logo.svg';
+import { useEffect, useMemo, useState } from 'react';
+import { loadSessions, saveSessions } from './utils/storage';
+import {
+  buildChartData,
+  buildGradeProgressData,
+  computeMaxRoutesThreshold,
+  computeRecommendation,
+  computeWeeklySummary,
+  getWeekKey,
+  groupByWeek,
+} from './utils/weekUtils';
+import ClimbForm from './components/ClimbForm';
+import WeeklySummary from './components/WeeklySummary';
+import Charts from './components/Charts';
+import SessionLog from './components/SessionLog';
 import './App.css';
 
 function App() {
+  const [sessions, setSessions] = useState(() => loadSessions());
+
+  useEffect(() => {
+    saveSessions(sessions);
+  }, [sessions]);
+
+  const today = new Date().toISOString().split('T')[0];
+  const currentWeekKey = getWeekKey(today);
+  const weeklyGroups = useMemo(() => groupByWeek(sessions), [sessions]);
+  const chartData = useMemo(() => buildChartData(sessions), [sessions]);
+  const gradeProgressData = useMemo(() => buildGradeProgressData(sessions), [sessions]);
+
+  const allWeekKeys = useMemo(
+    () => [...new Set([...Object.keys(weeklyGroups), currentWeekKey])].sort(),
+    [weeklyGroups, currentWeekKey]
+  );
+
+  const [selectedWeekKey, setSelectedWeekKey] = useState(currentWeekKey);
+
+  useEffect(() => {
+    if (!allWeekKeys.includes(selectedWeekKey)) {
+      setSelectedWeekKey(currentWeekKey);
+    }
+  }, [allWeekKeys, selectedWeekKey, currentWeekKey]);
+
+  const selectedIdx = allWeekKeys.indexOf(selectedWeekKey);
+  const hasPrevWeek = selectedIdx > 0;
+  const hasNextWeek = selectedIdx >= 0 && selectedIdx < allWeekKeys.length - 1;
+
+  const selectedWeekSessions = weeklyGroups[selectedWeekKey] || [];
+  const selectedWeekSummary = computeWeeklySummary(selectedWeekSessions);
+
+  const weeksBeforeSelected = allWeekKeys.slice(0, Math.max(selectedIdx + 1, 1)).slice(-4);
+  const recentSummaries = weeksBeforeSelected.map((key) => computeWeeklySummary(weeklyGroups[key] || []));
+
+  const recommendation = computeRecommendation(recentSummaries);
+  const maxRoutes = computeMaxRoutesThreshold(sessions, today);
+
+  function handleAddSession(newSession) {
+    setSessions((prev) => [{ ...newSession, id: crypto.randomUUID() }, ...prev]);
+  }
+
+  function handleEditSession(id, updatedFields) {
+    setSessions((prev) => prev.map((session) => (session.id === id ? { ...session, ...updatedFields } : session)));
+  }
+
+  function handleDeleteSession(id) {
+    setSessions((prev) => prev.filter((session) => session.id !== id));
+  }
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <div className="dashboard">
+      <header className="dashboard-header">
+        <h1>Climbing Dashboard</h1>
+        <p>Log each climbing session and track routes, load, and RPE over time.</p>
       </header>
+
+      <main className="dashboard-main">
+        <div className="dashboard-top">
+          <ClimbForm onAddSession={handleAddSession} />
+          <WeeklySummary
+            summary={selectedWeekSummary}
+            recommendation={recommendation}
+            weekKey={selectedWeekKey}
+            isCurrentWeek={selectedWeekKey === currentWeekKey}
+            weeksOfData={weeksBeforeSelected.length}
+            maxRoutes={maxRoutes}
+            hasPrevWeek={hasPrevWeek}
+            hasNextWeek={hasNextWeek}
+            onPrevWeek={() => hasPrevWeek && setSelectedWeekKey(allWeekKeys[selectedIdx - 1])}
+            onNextWeek={() => hasNextWeek && setSelectedWeekKey(allWeekKeys[selectedIdx + 1])}
+          />
+        </div>
+
+        <Charts data={chartData} gradeData={gradeProgressData} />
+
+        <SessionLog
+          sessions={sessions}
+          onEditSession={handleEditSession}
+          onDeleteSession={handleDeleteSession}
+        />
+      </main>
     </div>
   );
 }

src/App.test.js

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders climbing dashboard heading', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  const heading = screen.getByRole('heading', { name: /climbing dashboard/i });
+  expect(heading).toBeInTheDocument();
 });

src/components/Charts.css

@@ -0,0 +1,54 @@
+.charts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.chart-container h2 {
+  margin: 0 0 1rem;
+  font-size: 1.2rem;
+}
+
+.chart-span-2 {
+  grid-column: 1 / -1;
+}
+
+.charts > .empty-message {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 2rem;
+  color: var(--color-text-muted);
+}
+
+.empty-chart-message {
+  margin: 0;
+  color: var(--color-text-muted);
+}
+
+.grade-tooltip {
+  background: var(--color-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 0.45rem 0.6rem;
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.grade-tooltip p {
+  margin: 0;
+}
+
+.tooltip-date {
+  color: var(--color-text);
+  margin-bottom: 0.2rem !important;
+}
+
+@media (max-width: 768px) {
+  .charts {
+    grid-template-columns: 1fr;
+  }
+
+  .chart-span-2 {
+    grid-column: auto;
+  }
+}

src/components/Charts.js

@@ -0,0 +1,154 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Label,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { CLIMB_GRADE_SCALE } from '../utils/weekUtils';
+import './Charts.css';
+
+const GRADE_TICKS = CLIMB_GRADE_SCALE
+  .map((_, idx) => idx + 1)
+  .filter((value, idx) => idx % 2 === 0 || value === CLIMB_GRADE_SCALE.length);
+
+function Charts({ data, gradeData }) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="charts card">
+        <p className="empty-message">Log climbing sessions to see progress over time.</p>
+      </div>
+    );
+  }
+
+  const chartData = data.map((item) => ({
+    ...item,
+    label: item.week.replace(/^\d{4}-/, ''),
+  }));
+
+  return (
+    <div className="charts">
+      <div className="chart-container card">
+        <h2>Weekly Routes</h2>
+        <ResponsiveContainer width="100%" height={280}>
+          <BarChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="label" />
+            <YAxis>
+              <Label value="Routes" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#64748b' }} />
+            </YAxis>
+            <Tooltip />
+            <Bar dataKey="routes" fill="var(--color-primary)" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="chart-container card">
+        <h2>Weekly Training Load</h2>
+        <ResponsiveContainer width="100%" height={280}>
+          <LineChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="label" />
+            <YAxis>
+              <Label value="Load" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#64748b' }} />
+            </YAxis>
+            <Tooltip />
+            <Line
+              type="monotone"
+              dataKey="training_load"
+              stroke="var(--color-secondary)"
+              strokeWidth={2}
+              dot={{ r: 4 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="chart-container card chart-span-2">
+        <h2>Average Weekly RPE</h2>
+        <ResponsiveContainer width="100%" height={240}>
+          <LineChart data={chartData}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="label" />
+            <YAxis domain={[1, 10]}>
+              <Label value="RPE" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#64748b' }} />
+            </YAxis>
+            <Tooltip />
+            <Line
+              type="monotone"
+              dataKey="avg_rpe"
+              stroke="var(--color-accent)"
+              strokeWidth={2}
+              dot={{ r: 3 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="chart-container card chart-span-2">
+        <h2>Max Grade Progress (Lead vs Bouldering)</h2>
+        {gradeData && gradeData.length > 0 ? (
+          <ResponsiveContainer width="100%" height={280}>
+            <LineChart data={gradeData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="label" />
+              <YAxis
+                domain={[1, CLIMB_GRADE_SCALE.length]}
+                ticks={GRADE_TICKS}
+                tickFormatter={(value) => CLIMB_GRADE_SCALE[value - 1] || ''}
+              >
+                <Label value="Grade" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#64748b' }} />
+              </YAxis>
+              <Tooltip
+                content={({ payload, label }) => {
+                  if (!payload || payload.length === 0) return null;
+                  const point = payload[0].payload;
+                  return (
+                    <div className="grade-tooltip">
+                      <p className="tooltip-date">{label}</p>
+                      <p style={{ color: 'var(--color-primary)' }}>
+                        Lead: {point.lead_grade || '—'}
+                      </p>
+                      <p style={{ color: 'var(--color-accent)' }}>
+                        Bouldering: {point.bouldering_grade || '—'}
+                      </p>
+                    </div>
+                  );
+                }}
+              />
+              <Legend />
+              <Line
+                type="monotone"
+                dataKey="lead_score"
+                name="Lead"
+                stroke="var(--color-primary)"
+                strokeWidth={2}
+                dot={{ r: 3 }}
+                connectNulls
+              />
+              <Line
+                type="monotone"
+                dataKey="bouldering_score"
+                name="Bouldering"
+                stroke="var(--color-accent)"
+                strokeWidth={2}
+                dot={{ r: 3 }}
+                connectNulls
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        ) : (
+          <p className="empty-chart-message">Add sessions with a max grade to see lead vs bouldering progression.</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Charts;

src/components/ClimbForm.css

@@ -0,0 +1,104 @@
+.climb-form h2 {
+  margin: 0 0 1rem;
+  font-size: 1.25rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+.form-group input[type="date"],
+.form-group input[type="number"],
+.form-group input[type="text"],
+.form-group input[type="range"],
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: 0.95rem;
+  background: var(--color-card);
+  color: var(--color-text);
+  font-family: inherit;
+}
+
+.form-group textarea {
+  resize: vertical;
+}
+
+.form-group input[type="range"] {
+  padding: 0;
+  accent-color: var(--color-primary);
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.16);
+}
+
+.form-group select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.16);
+}
+
+.rpe-panel {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg-soft);
+  padding: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.rpe-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.rpe-value {
+  display: block;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  margin-bottom: 0.5rem;
+}
+
+.rpe-criteria-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.3rem 0.7rem;
+  font-size: 0.8rem;
+}
+
+.rpe-criteria-grid span:nth-child(odd) {
+  color: var(--color-text-muted);
+}
+
+.btn-primary {
+  width: 100%;
+  padding: 0.65rem 1rem;
+  border: none;
+  border-radius: var(--radius);
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background: #92400e;
+}

src/components/ClimbForm.js

@@ -0,0 +1,162 @@
+import { useMemo, useState } from 'react';
+import { CLIMB_GRADE_SCALE, RPE_CRITERIA, normalizeGrade } from '../utils/weekUtils';
+import './ClimbForm.css';
+
+const SESSION_TYPE_OPTIONS = [
+  { value: 'lead', label: 'Lead' },
+  { value: 'bouldering', label: 'Bouldering' },
+];
+
+function ClimbForm({ onAddSession }) {
+  const today = new Date().toISOString().split('T')[0];
+  const [date, setDate] = useState(today);
+  const [sessionType, setSessionType] = useState('bouldering');
+  const [routesCount, setRoutesCount] = useState('');
+  const [maxGrade, setMaxGrade] = useState('');
+  const [rpe, setRpe] = useState(5);
+  const [notes, setNotes] = useState('');
+
+  const selectedCriteria = useMemo(() => RPE_CRITERIA[rpe] || RPE_CRITERIA[5], [rpe]);
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    const routes = parseInt(routesCount, 10);
+    const parsedRpe = parseInt(rpe, 10);
+    const normalizedMaxGrade = normalizeGrade(maxGrade);
+
+    if (
+      !date ||
+      Number.isNaN(routes) ||
+      routes <= 0 ||
+      Number.isNaN(parsedRpe) ||
+      parsedRpe < 1 ||
+      parsedRpe > 10 ||
+      !normalizedMaxGrade
+    ) {
+      return;
+    }
+
+    onAddSession({
+      date,
+      session_type: sessionType,
+      routes_count: routes,
+      max_grade: normalizedMaxGrade,
+      rpe: parsedRpe,
+      notes: notes.trim(),
+    });
+
+    setRoutesCount('');
+    setMaxGrade('');
+    setRpe(5);
+    setNotes('');
+  }
+
+  return (
+    <form className="climb-form card" onSubmit={handleSubmit}>
+      <h2>Log a Session</h2>
+
+      <div className="form-group">
+        <label htmlFor="climb-date">Date</label>
+        <input
+          id="climb-date"
+          type="date"
+          value={date}
+          onChange={(event) => setDate(event.target.value)}
+          required
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="session-type">Session Type</label>
+        <select
+          id="session-type"
+          value={sessionType}
+          onChange={(event) => setSessionType(event.target.value)}
+        >
+          {SESSION_TYPE_OPTIONS.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="route-count">Routes Completed</label>
+        <input
+          id="route-count"
+          type="number"
+          min="1"
+          step="1"
+          placeholder="e.g. 8"
+          value={routesCount}
+          onChange={(event) => setRoutesCount(event.target.value)}
+          required
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="max-grade">Max Grade Sent</label>
+        <input
+          id="max-grade"
+          type="text"
+          placeholder="e.g. 6B+"
+          value={maxGrade}
+          onChange={(event) => setMaxGrade(event.target.value)}
+          onBlur={() => setMaxGrade((prev) => normalizeGrade(prev))}
+          list="grade-scale-list"
+          required
+        />
+        <datalist id="grade-scale-list">
+          {CLIMB_GRADE_SCALE.map((grade) => (
+            <option key={grade} value={grade} />
+          ))}
+        </datalist>
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="session-rpe">RPE: <strong>{rpe}</strong>/10</label>
+        <input
+          id="session-rpe"
+          type="range"
+          min="1"
+          max="10"
+          step="1"
+          value={rpe}
+          onChange={(event) => setRpe(Number(event.target.value))}
+        />
+        <div className="rpe-labels">
+          <span>Very easy</span>
+          <span>Absolute limit</span>
+        </div>
+        <div className="rpe-panel">
+          <span className="rpe-value">{selectedCriteria.intensity}</span>
+          <div className="rpe-criteria-grid">
+            <span>Grades</span>
+            <span>{selectedCriteria.grades}</span>
+            <span>Pump</span>
+            <span>{selectedCriteria.pump_level || '—'}</span>
+            <span>Suggested Session</span>
+            <span>{selectedCriteria.suggested_session}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="session-notes">Notes</label>
+        <textarea
+          id="session-notes"
+          rows="3"
+          placeholder="Any beta, fatigue notes, or highlights..."
+          value={notes}
+          onChange={(event) => setNotes(event.target.value)}
+        />
+      </div>
+
+      <button type="submit" className="btn-primary">Add Session</button>
+    </form>
+  );
+}
+
+export default ClimbForm;

src/components/SessionLog.css

@@ -0,0 +1,107 @@
+.session-log h2 {
+  margin: 0 0 1rem;
+  font-size: 1.25rem;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.session-log table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.session-log th {
+  text-align: left;
+  padding: 0.625rem 0.75rem;
+  border-bottom: 2px solid var(--color-border);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.session-log td {
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
+}
+
+.session-log tbody tr:hover {
+  background: var(--color-bg-soft);
+}
+
+.notes-cell {
+  white-space: normal;
+  max-width: 260px;
+  color: var(--color-text-muted);
+}
+
+.editing-row {
+  background: var(--color-bg-soft);
+}
+
+.editing-row input[type="date"],
+.editing-row input[type="number"],
+.editing-row input[type="text"],
+.editing-row select {
+  width: 100%;
+  min-width: 65px;
+  padding: 0.25rem 0.4rem;
+  border: 1px solid var(--color-primary);
+  border-radius: 4px;
+  background: var(--color-card);
+  color: var(--color-text);
+}
+
+.editing-row input:focus,
+.editing-row select:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.16);
+}
+
+.computed-cell {
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.action-buttons {
+  white-space: nowrap;
+}
+
+.btn-edit,
+.btn-delete,
+.btn-save,
+.btn-cancel {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius);
+}
+
+.btn-edit,
+.btn-save {
+  color: var(--color-text-muted);
+}
+
+.btn-edit:hover,
+.btn-save:hover {
+  color: var(--color-primary);
+  background: rgba(180, 83, 9, 0.1);
+}
+
+.btn-delete,
+.btn-cancel {
+  color: var(--color-text-muted);
+}
+
+.btn-delete:hover,
+.btn-cancel:hover {
+  color: var(--color-danger);
+  background: rgba(220, 38, 38, 0.1);
+}

src/components/SessionLog.js

@@ -0,0 +1,204 @@
+import { useState } from 'react';
+import { CLIMB_GRADE_SCALE, normalizeGrade } from '../utils/weekUtils';
+import './SessionLog.css';
+
+const SESSION_TYPES = {
+  lead: 'Lead',
+  bouldering: 'Bouldering',
+};
+
+function SessionLog({ sessions, onEditSession, onDeleteSession }) {
+  const [editingId, setEditingId] = useState(null);
+  const [editForm, setEditForm] = useState({});
+
+  if (!sessions || sessions.length === 0) {
+    return (
+      <div className="session-log card">
+        <h2>Session History</h2>
+        <p className="empty-message">No climbing sessions logged yet. Add your first one above.</p>
+      </div>
+    );
+  }
+
+  const sortedSessions = [...sessions].sort((a, b) => b.date.localeCompare(a.date));
+
+  function formatDate(dateString) {
+    const date = new Date(`${dateString}T00:00:00`);
+    return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+  }
+
+  function handleEdit(session) {
+    setEditingId(session.id);
+    setEditForm({
+      date: session.date,
+      session_type: session.session_type || 'bouldering',
+      routes_count: session.routes_count,
+      max_grade: session.max_grade || '',
+      rpe: session.rpe || 5,
+      notes: session.notes || '',
+    });
+  }
+
+  function handleSave() {
+    const routes = parseInt(editForm.routes_count, 10);
+    const rpe = parseInt(editForm.rpe, 10);
+    const maxGrade = normalizeGrade(editForm.max_grade);
+
+    if (!editForm.date || Number.isNaN(routes) || routes <= 0 || Number.isNaN(rpe) || rpe < 1 || rpe > 10 || !maxGrade) {
+      return;
+    }
+
+    const sessionType = SESSION_TYPES[editForm.session_type] ? editForm.session_type : 'bouldering';
+
+    onEditSession(editingId, {
+      date: editForm.date,
+      session_type: sessionType,
+      routes_count: routes,
+      max_grade: maxGrade,
+      rpe,
+      notes: (editForm.notes || '').trim(),
+    });
+
+    setEditingId(null);
+  }
+
+  function handleCancel() {
+    setEditingId(null);
+  }
+
+  function handleDelete(id) {
+    if (window.confirm('Delete this climbing session?')) {
+      onDeleteSession(id);
+    }
+  }
+
+  function handleKeyDown(event) {
+    if (event.key === 'Enter') handleSave();
+    if (event.key === 'Escape') handleCancel();
+  }
+
+  function formatSessionType(type) {
+    return SESSION_TYPES[type] || '—';
+  }
+
+  return (
+    <div className="session-log card">
+      <h2>Session History</h2>
+      <div className="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th>Date</th>
+              <th>Type</th>
+              <th>Routes</th>
+              <th>Max Grade</th>
+              <th>RPE</th>
+              <th>Load</th>
+              <th>Notes</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {sortedSessions.map((session) => {
+              if (editingId === session.id) {
+                const previewRoutes = parseInt(editForm.routes_count, 10) || 0;
+                const previewRpe = parseInt(editForm.rpe, 10) || 0;
+
+                return (
+                  <tr key={session.id} className="editing-row">
+                    <td>
+                      <input
+                        type="date"
+                        value={editForm.date}
+                        onChange={(event) => setEditForm({ ...editForm, date: event.target.value })}
+                        onKeyDown={handleKeyDown}
+                      />
+                    </td>
+                    <td>
+                      <select
+                        value={editForm.session_type}
+                        onChange={(event) => setEditForm({ ...editForm, session_type: event.target.value })}
+                      >
+                        <option value="lead">Lead</option>
+                        <option value="bouldering">Bouldering</option>
+                      </select>
+                    </td>
+                    <td>
+                      <input
+                        type="number"
+                        min="1"
+                        step="1"
+                        value={editForm.routes_count}
+                        onChange={(event) => setEditForm({ ...editForm, routes_count: event.target.value })}
+                        onKeyDown={handleKeyDown}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        value={editForm.max_grade}
+                        onChange={(event) => setEditForm({ ...editForm, max_grade: event.target.value })}
+                        onBlur={() => setEditForm((prev) => ({ ...prev, max_grade: normalizeGrade(prev.max_grade) }))}
+                        list={`grade-scale-list-${session.id}`}
+                        onKeyDown={handleKeyDown}
+                        placeholder="e.g. 6B+"
+                      />
+                      <datalist id={`grade-scale-list-${session.id}`}>
+                        {CLIMB_GRADE_SCALE.map((grade) => (
+                          <option key={grade} value={grade} />
+                        ))}
+                      </datalist>
+                    </td>
+                    <td>
+                      <input
+                        type="number"
+                        min="1"
+                        step="1"
+                        max="10"
+                        value={editForm.rpe}
+                        onChange={(event) => setEditForm({ ...editForm, rpe: event.target.value })}
+                        onKeyDown={handleKeyDown}
+                      />
+                    </td>
+                    <td className="computed-cell">{(previewRoutes * previewRpe).toFixed(0)}</td>
+                    <td>
+                      <input
+                        type="text"
+                        value={editForm.notes}
+                        onChange={(event) => setEditForm({ ...editForm, notes: event.target.value })}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Notes..."
+                      />
+                    </td>
+                    <td className="action-buttons">
+                      <button className="btn-save" onClick={handleSave} aria-label="Save">✓</button>
+                      <button className="btn-cancel" onClick={handleCancel} aria-label="Cancel">✕</button>
+                    </td>
+                  </tr>
+                );
+              }
+
+              return (
+                <tr key={session.id}>
+                  <td>{formatDate(session.date)}</td>
+                  <td>{formatSessionType(session.session_type)}</td>
+                  <td>{session.routes_count}</td>
+                  <td>{session.max_grade || '—'}</td>
+                  <td>{session.rpe}/10</td>
+                  <td>{(session.routes_count * session.rpe).toFixed(0)}</td>
+                  <td className="notes-cell">{session.notes || ''}</td>
+                  <td className="action-buttons">
+                    <button className="btn-edit" onClick={() => handleEdit(session)} aria-label="Edit session">✎</button>
+                    <button className="btn-delete" onClick={() => handleDelete(session.id)} aria-label="Delete session">✕</button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default SessionLog;

src/components/WeeklySummary.css

@@ -0,0 +1,118 @@
+.week-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.week-nav h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  flex: 1;
+  text-align: center;
+}
+
+.week-nav-btn {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: 1.25rem;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  color: var(--color-text);
+}
+
+.week-nav-btn:hover:not(:disabled) {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #fff;
+}
+
+.week-nav-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.week-label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--color-text-muted);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.stat-card {
+  background: var(--color-bg-soft);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  text-align: center;
+}
+
+.stat-value {
+  display: block;
+  font-size: 1.45rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+
+.stat-label {
+  display: block;
+  margin-top: 0.15rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.max-routes-block,
+.recommendation {
+  border-top: 1px solid var(--color-border);
+  padding-top: 0.95rem;
+}
+
+.max-routes-block {
+  margin-bottom: 1rem;
+}
+
+.max-routes-block h3,
+.recommendation h3 {
+  margin: 0 0 0.7rem;
+  font-size: 1rem;
+}
+
+.rec-method {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--color-text-muted);
+}
+
+.rec-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.35rem 0;
+}
+
+.rec-label {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.rec-value {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--color-secondary);
+}
+
+.threshold-value {
+  color: var(--color-danger);
+}
+
+.empty-message {
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}

src/components/WeeklySummary.js

@@ -0,0 +1,93 @@
+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">
+          &lsaquo;
+        </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">
+          &rsaquo;
+        </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;

src/index.css

@@ -1,13 +1,27 @@
+:root {
+  --color-primary: #b45309;
+  --color-secondary: #0f766e;
+  --color-accent: #2563eb;
+  --color-bg: #f6f4ef;
+  --color-bg-soft: #f4efe7;
+  --color-card: #ffffff;
+  --color-text: #1f2937;
+  --color-text-muted: #64748b;
+  --color-border: #e2d8c8;
+  --color-danger: #dc2626;
+  --radius: 8px;
+  --shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Avenir Next', 'Segoe UI', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  background-color: var(--color-bg);
+  color: var(--color-text);
 }

src/utils/storage.js

@@ -0,0 +1,14 @@
+const STORAGE_KEY = 'climbEntries';
+
+export function loadSessions() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveSessions(sessions) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(sessions));
+}

src/utils/weekUtils.js

@@ -0,0 +1,249 @@
+/**
+ * Returns the ISO week number and year for a date string (YYYY-MM-DD).
+ */
+function getISOWeekData(dateString) {
+  const date = new Date(`${dateString}T00:00:00`);
+  const dayOfWeek = date.getDay() || 7;
+  const thursday = new Date(date);
+  thursday.setDate(date.getDate() + 4 - dayOfWeek);
+  const yearStart = new Date(thursday.getFullYear(), 0, 1);
+  const weekNumber = Math.ceil(((thursday - yearStart) / 86400000 + 1) / 7);
+  return { year: thursday.getFullYear(), week: weekNumber };
+}
+
+export function getWeekKey(dateString) {
+  const { year, week } = getISOWeekData(dateString);
+  return `${year}-W${String(week).padStart(2, '0')}`;
+}
+
+export function groupByWeek(sessions) {
+  const groups = {};
+  for (const session of sessions) {
+    const key = getWeekKey(session.date);
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(session);
+  }
+  return groups;
+}
+
+export const RPE_CRITERIA = {
+  1: {
+    intensity: 'Very easy',
+    grades: '4-5',
+    pump_level: 'None',
+    suggested_session: 'Warm-up / cool-down',
+  },
+  2: {
+    intensity: 'Easy',
+    grades: '5-5+',
+    pump_level: 'None',
+    suggested_session: 'Easy mileage',
+  },
+  3: {
+    intensity: 'Moderate easy',
+    grades: '5+-6A',
+    pump_level: 'Light',
+    suggested_session: 'Technique, movement',
+  },
+  4: {
+    intensity: 'Comfortable endurance',
+    grades: '6A',
+    pump_level: 'Light-moderate',
+    suggested_session: 'Easy endurance',
+  },
+  5: {
+    intensity: 'Steady endurance',
+    grades: '6A-6A+',
+    pump_level: 'Moderate',
+    suggested_session: 'Base endurance sessions',
+  },
+  6: {
+    intensity: 'Hard steady',
+    grades: '6A+-6B',
+    pump_level: 'Moderate-high',
+    suggested_session: 'General training sessions',
+  },
+  7: {
+    intensity: 'Near-max onsight',
+    grades: '6B-6B+',
+    pump_level: 'High',
+    suggested_session: 'Onsight attempts / hard endurance',
+  },
+  8: {
+    intensity: 'Above max',
+    grades: '6C-7A',
+    pump_level: 'Very high',
+    suggested_session: 'Projecting / limit attempts',
+  },
+  9: {
+    intensity: 'Maximal',
+    grades: '6C+-7A+',
+    pump_level: 'Very high / failure',
+    suggested_session: 'Limit redpoint work',
+  },
+  10: {
+    intensity: 'Absolute limit',
+    grades: '7b and above',
+    pump_level: '—',
+    suggested_session: 'Max testing / peak projecting',
+  },
+};
+
+export const CLIMB_GRADE_SCALE = [
+  '4',
+  '4+',
+  '5',
+  '5+',
+  '6A',
+  '6A+',
+  '6B',
+  '6B+',
+  '6C',
+  '6C+',
+  '7A',
+  '7A+',
+  '7B',
+  '7B+',
+  '7C',
+  '7C+',
+  '8A',
+  '8A+',
+  '8B',
+  '8B+',
+  '8C',
+  '8C+',
+  '9A',
+  '9A+',
+  '9B',
+  '9B+',
+  '9C',
+  '9C+',
+];
+
+export function normalizeGrade(rawGrade) {
+  return String(rawGrade || '').trim().toUpperCase().replace(/\s+/g, '');
+}
+
+export function getGradeScore(rawGrade) {
+  const normalized = normalizeGrade(rawGrade);
+  const idx = CLIMB_GRADE_SCALE.indexOf(normalized);
+  return idx === -1 ? null : idx + 1;
+}
+
+export function computeWeeklySummary(weekSessions) {
+  if (!weekSessions || weekSessions.length === 0) {
+    return {
+      total_routes: 0,
+      total_training_load: 0,
+      session_count: 0,
+      avg_rpe: 0,
+    };
+  }
+
+  const total_routes = weekSessions.reduce((sum, session) => sum + session.routes_count, 0);
+  const total_training_load = weekSessions.reduce(
+    (sum, session) => sum + session.routes_count * session.rpe,
+    0
+  );
+
+  return {
+    total_routes,
+    total_training_load,
+    session_count: weekSessions.length,
+    avg_rpe: weekSessions.reduce((sum, session) => sum + session.rpe, 0) / weekSessions.length,
+  };
+}
+
+/**
+ * ACWR-style recommendation using rolling 1-4 week averages.
+ */
+export function computeRecommendation(weeklySummaries) {
+  if (!weeklySummaries || weeklySummaries.length === 0) {
+    return { min_routes: 0, max_routes: 0, min_load: 0, max_load: 0 };
+  }
+
+  const n = weeklySummaries.length;
+  const avgRoutes = weeklySummaries.reduce((sum, week) => sum + week.total_routes, 0) / n;
+  const avgLoad = weeklySummaries.reduce((sum, week) => sum + week.total_training_load, 0) / n;
+
+  const upperMultiplier = n === 1 ? 1.2 : 1.3;
+  const lowerMultiplier = 0.8;
+
+  return {
+    min_routes: +(avgRoutes * lowerMultiplier).toFixed(0),
+    max_routes: +(avgRoutes * upperMultiplier).toFixed(0),
+    min_load: +(avgLoad * lowerMultiplier).toFixed(0),
+    max_load: +(avgLoad * upperMultiplier).toFixed(0),
+  };
+}
+
+export function buildChartData(sessions) {
+  const grouped = groupByWeek(sessions);
+  return Object.entries(grouped)
+    .map(([week, weekSessions]) => {
+      const summary = computeWeeklySummary(weekSessions);
+      return {
+        week,
+        routes: summary.total_routes,
+        training_load: +summary.total_training_load.toFixed(0),
+        avg_rpe: +summary.avg_rpe.toFixed(1),
+      };
+    })
+    .sort((a, b) => a.week.localeCompare(b.week));
+}
+
+/**
+ * Builds date-based max-grade progress with separate lead and bouldering lines.
+ */
+export function buildGradeProgressData(sessions) {
+  const byDate = {};
+
+  for (const session of sessions) {
+    if (!session?.date || !session?.max_grade) continue;
+    if (session.session_type !== 'lead' && session.session_type !== 'bouldering') continue;
+
+    const score = getGradeScore(session.max_grade);
+    if (score == null) continue;
+
+    if (!byDate[session.date]) {
+      const dateObj = new Date(`${session.date}T00:00:00`);
+      byDate[session.date] = {
+        date: session.date,
+        label: dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+      };
+    }
+
+    const scoreKey = `${session.session_type}_score`;
+    const gradeKey = `${session.session_type}_grade`;
+    const normalizedGrade = normalizeGrade(session.max_grade);
+
+    if (byDate[session.date][scoreKey] == null || score > byDate[session.date][scoreKey]) {
+      byDate[session.date][scoreKey] = score;
+      byDate[session.date][gradeKey] = normalizedGrade;
+    }
+  }
+
+  return Object.values(byDate).sort((a, b) => a.date.localeCompare(b.date));
+}
+
+/**
+ * 30-day max-routes threshold (+10%) for single session planning.
+ */
+export function computeMaxRoutesThreshold(sessions, todayStr) {
+  const today = new Date(`${todayStr}T00:00:00`);
+  const cutoff = new Date(today);
+  cutoff.setDate(cutoff.getDate() - 30);
+
+  const recentSessions = sessions.filter((session) => {
+    const sessionDate = new Date(`${session.date}T00:00:00`);
+    return sessionDate >= cutoff && sessionDate <= today;
+  });
+
+  if (recentSessions.length === 0) return null;
+
+  const max_routes = Math.max(...recentSessions.map((session) => session.routes_count));
+  return {
+    max_routes,
+    threshold_routes: Math.round(max_routes * 1.1),
+  };
+}