[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68d0152e34248191ac67a5082ce536b1","versionInt","title","Coach Mvp – Créateur De Programmes + Tableau De Bord (prototype React)","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Plus, Save, Trash2, BarChart3, Clock, Dumbbell, Users } from \"lucide-react\";\nimport {\n LineChart,\n Line,\n BarChart,\n Bar,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n Legend,\n ResponsiveContainer,\n} from \"recharts\";\n\n/**\n * CoachMVP – Prototype monofichier\n * - Création de programmes (exercices, séries, reps, charge, RPE, repos)\n * - Journal d'entraînements (séances)\n * - Calculs: volume (kg), intensité (proxy), durée totale (min)\n * - Dashboards: Volume / Intensité / Temps\n * - Persistance locale via localStorage\n *\n * ⚠️ Données factices incluses. Idéal pour itérer rapidement sur l'UX.\n */\n\n// ---- Types ----\nconst emptyExercise = () => ({\n name: \"Squat arrière\",\n sets: 3,\n reps: 5,\n load: 80, // kg\n rpe: 7.5,\n rest: 120, // sec\n tempo: \"2-0-1\",\n});\n\n// ---- Utils ----\nconst fmt = new Intl.NumberFormat(\"fr-CA\", { maximumFractionDigits: 1 });\n\nfunction estimateOneRM_Epley(load, reps) {\n // Epley: 1RM ≈ load * (1 + reps/30)\n return load * (1 + reps / 30);\n}\n\nfunction setDurationSeconds(reps, tempoStr, restSec) {\n // tempo format \"ecc-pause-conc\" en secondes approximatives\n const [ecc, pause, conc] = (tempoStr || \"2-0-1\").split(\"-\").map((n) => parseFloat(n) || 0);\n const timePerRep = ecc + pause + conc; // sec/rep\n return reps * timePerRep + restSec;\n}\n\nfunction calcSessionMetrics(session) {\n // session = { date, notes, exercises: [ {name, sets, reps, load, rpe, rest, tempo} ] }\n let volume = 0; // kg totaux\n let timeSec = 0; // secondes\n let intensitySum = 0; // proxy\n let setCount = 0;\n\n session.exercises.forEach((ex) => {\n const { sets, reps, load, rpe, rest, tempo } = ex;\n const setsN = Number(sets) || 0;\n const repsN = Number(reps) || 0;\n const loadN = Number(load) || 0;\n const rpeN = Number(rpe) || 0;\n for (let s = 0; s < setsN; s++) {\n volume += repsN * loadN;\n const est1RM = estimateOneRM_Epley(loadN, repsN);\n const relIntensity = est1RM > 0 ? loadN / est1RM : 0; // 0..1\n // Pondération simple par RPE pour un proxy d'intensité\n const intensity = relIntensity * (rpeN / 10);\n intensitySum += intensity;\n setCount += 1;\n timeSec += setDurationSeconds(repsN, tempo, rest);\n }\n });\n\n const avgIntensity = setCount > 0 ? intensitySum / setCount : 0;\n return {\n volumeKg: volume,\n durationMin: timeSec / 60,\n avgIntensity, // 0..1\n };\n}\n\nfunction weekKey(dateStr) {\n const d = new Date(dateStr);\n // ISO week (approx): year-Wxx\n const year = d.getUTCFullYear();\n const firstThursday = (y) => {\n const th = new Date(Date.UTC(y, 0, 1));\n while (th.getUTCDay() !== 4) th.setUTCDate(th.getUTCDate() + 1);\n return th;\n };\n const th = firstThursday(year);\n const diffDays = Math.floor((d - th) / 86400000);\n const week = 1 + Math.floor((diffDays + 3) / 7);\n return `${year}-W${String(week).padStart(2, \"0\")}`;\n}\n\nfunction aggregateWeekly(sessions) {\n const byWeek = {};\n sessions.forEach((s) => {\n const wk = weekKey(s.date);\n const m = calcSessionMetrics(s);\n if (!byWeek[wk]) byWeek[wk] = { volumeKg: 0, durationMin: 0, intensitySum: 0, sessions: 0 };\n byWeek[wk].volumeKg += m.volumeKg;\n byWeek[wk].durationMin += m.durationMin;\n byWeek[wk].intensitySum += m.avgIntensity;\n byWeek[wk].sessions += 1;\n });\n return Object.entries(byWeek).map(([week, v]) => ({\n week,\n volumeKg: Math.round(v.volumeKg),\n durationMin: Math.round(v.durationMin),\n avgIntensity: v.sessions ? Number((v.intensitySum / v.sessions).toFixed(3)) : 0,\n }));\n}\n\n// ---- Local storage helpers ----\nconst LS_KEY = \"coachmvp_state_v1\";\nfunction loadState() {\n try {\n const raw = localStorage.getItem(LS_KEY);\n return raw ? JSON.parse(raw) : null;\n } catch (e) {\n return null;\n }\n}\nfunction saveState(state) {\n localStorage.setItem(LS_KEY, JSON.stringify(state));\n}\n\n// ---- Demo seeds ----\nconst seedProgram = {\n id: \"prog-1\",\n name: \"Force – Full Body (3 j/sem)\",\n notes: \"Cycle 4 semaines – progression 2.5 kg si RPE <8.\",\n days: [\n {\n label: \"Jour A\",\n exercises: [\n { name: \"Squat arrière\", sets: 5, reps: 5, load: 85, rpe: 7.5, rest: 150, tempo: \"3-0-1\" },\n { name: \"Développé couché\", sets: 5, reps: 5, load: 70, rpe: 8, rest: 120, tempo: \"2-1-1\" },\n { name: \"Row barre\", sets: 4, reps: 8, load: 60, rpe: 7, rest: 90, tempo: \"2-0-2\" },\n ],\n },\n {\n label: \"Jour B\",\n exercises: [\n { name: \"Soulevé de terre\", sets: 4, reps: 4, load: 110, rpe: 7.5, rest: 180, tempo: \"2-0-1\" },\n { name: \"Dév. militaire\", sets: 4, reps: 6, load: 45, rpe: 8, rest: 120, tempo: \"2-0-1\" },\n { name: \"Tractions\", sets: 4, reps: 6, load: 0, rpe: 8, rest: 90, tempo: \"2-0-1\" },\n ],\n },\n ],\n};\n\nconst seedSessions = [\n {\n id: \"s1\",\n date: new Date().toISOString().slice(0, 10),\n notes: \"Bonne énergie\",\n exercises: seedProgram.days[0].exercises,\n },\n {\n id: \"s0\",\n date: new Date(Date.now() - 7 * 86400000).toISOString().slice(0, 10),\n notes: \"RPE hauts\",\n exercises: seedProgram.days[1].exercises,\n },\n];\n\n// ---- UI Components ----\nfunction StatCard({ icon: Icon, title, value, suffix }) {\n return (\n

{title}

{value}{suffix || \"\"}

\n );\n}\n\nfunction Section({ title, children, right }) {\n return (\n

{title}

\n {right}\n

{children}

\n );\n}\n\nfunction ExerciseRow({ ex, onChange, onDelete }) {\n const handle = (k, v) => onChange({ ...ex, [k]: v });\n return (\n

\n handle(\"name\", e.target.value)} />\n handle(\"sets\", +e.target.value)} />\n handle(\"reps\", +e.target.value)} />\n handle(\"load\", +e.target.value)} />\n handle(\"rpe\", +e.target.value)} />\n handle(\"tempo\", e.target.value)} />\n handle(\"rest\", +e.target.value)} />\n \n

\n );\n}\n\nfunction ProgramBuilder({ program, setProgram }) {\n const addExercise = (dayIdx) => {\n const days = [...program.days];\n days[dayIdx] = { ...days[dayIdx], exercises: [...days[dayIdx].exercises, emptyExercise()] };\n setProgram({ ...program, days });\n };\n const updateExercise = (dayIdx, exIdx, next) => {\n const days = [...program.days];\n const exs = [...days[dayIdx].exercises];\n exs[exIdx] = next;\n days[dayIdx] = { ...days[dayIdx], exercises: exs };\n setProgram({ ...program, days });\n };\n const deleteExercise = (dayIdx, exIdx) => {\n const days = [...program.days];\n const exs = days[dayIdx].exercises.filter((_, i) => i !== exIdx);\n days[dayIdx] = { ...days[dayIdx], exercises: exs };\n setProgram({ ...program, days });\n };\n\n return (\n

\n setProgram({ ...program, name: e.target.value })} />\n setProgram({ ...program, notes: e.target.value })} />\n

\n\n {program.days.map((day, di) => (\n

addExercise(di)}>Ajouter un exercice}>\n

Exercice

Séries

Reps

Charge (kg)

RPE

Tempo

Repos (s)

\n {day.exercises.map((ex, ei) => (\n updateExercise(di, ei, next)}\n onDelete={() => deleteExercise(di, ei)}\n />\n ))}\n

\n ))}\n

\n );\n}\n\nfunction SessionLogger({ sessions, setSessions, program }) {\n const addFromDay = (dayIdx) => {\n const exs = program.days[dayIdx].exercises.map((e) => ({ ...e }));\n setSessions([\n ...sessions,\n { id: crypto.randomUUID(), date: new Date().toISOString().slice(0, 10), notes: \"\", exercises: exs },\n ]);\n };\n const updateSession = (idx, next) => {\n const s = [...sessions];\n s[idx] = next;\n setSessions(s);\n };\n const deleteSession = (idx) => setSessions(sessions.filter((_, i) => i !== idx));\n\n return (\n

\n {program.days.map((d, i) => (\n \n ))}\n

\n\n {sessions.map((s, i) => {\n const m = calcSessionMetrics(s);\n return (\n

deleteSession(i)}>}>\n

\n updateSession(i, { ...s, date: e.target.value })} />\n updateSession(i, { ...s, notes: e.target.value })} />\n

Exercice

Séries

Reps

Charge (kg)

RPE

Tempo

Repos (s)

\n {s.exercises.map((ex, ei) => (\n {\n const exs = [...s.exercises];\n exs[ei] = next;\n updateSession(i, { ...s, exercises: exs });\n }}\n onDelete={() => {\n const exs = s.exercises.filter((_, j) => j !== ei);\n updateSession(i, { ...s, exercises: exs });\n }}\n />\n ))}\n

\n \n \n \n

\n );\n })}\n

\n );\n}\n\nfunction Analytics({ sessions }) {\n const weekly = useMemo(() => aggregateWeekly(sessions), [sessions]);\n\n return (\n

Volume hebdo (kg)

\n \n \n \n \n \n \n \n \n \n \n

\n\n

Intensité moyenne

\n \n \n \n \n \n \n \n \n \n \n

\n\n

Temps total hebdo (min)

\n \n \n \n \n \n \n \n \n \n \n

\n );\n}\n\nfunction TopNav({ tab, setTab }) {\n const tabs = [\n { key: \"dashboard\", label: \"Dashboard\" },\n { key: \"program\", label: \"Programme\" },\n { key: \"sessions\", label: \"Séances\" },\n { key: \"clients\", label: \"Clients\" },\n ];\n return (\n

\n {tabs.map((t) => (\n setTab(t.key)}\n className={`px-4 py-2 rounded-xl text-sm ${tab === t.key ? \"bg-gray-900 text-white\" : \"hover:bg-gray-100\"}`}\n >\n {t.label}\n \n ))}\n

\n );\n}\n\nfunction Clients({ clients, setClients }) {\n const addClient = () => setClients([...clients, { id: crypto.randomUUID(), name: \"Nouveau client\", email: \"\", notes: \"\" }]);\n const updateClient = (idx, next) => {\n const list = [...clients];\n list[idx] = next;\n setClients(list);\n };\n const delClient = (idx) => setClients(clients.filter((_, i) => i !== idx));\n\n return (\n

Clients

\n \n

\n {clients.map((c, i) => (\n

\n updateClient(i, { ...c, name: e.target.value })} />\n updateClient(i, { ...c, email: e.target.value })} />\n

updateClient(i, { ...c, notes: e.target.value })} />\n            <div className=\"flex justify-end\">\n              <button className=\"icon-btn\" onClick={() => delClient(i)}><Trash2 className=\"w-4 h-4\"/></button>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default function CoachMVP() {\n  const saved = loadState();\n  const [tab, setTab] = useState(\"dashboard\");\n  const [program, setProgram] = useState(saved?.program || seedProgram);\n  const [sessions, setSessions] = useState(saved?.sessions || seedSessions);\n  const [clients, setClients] = useState(saved?.clients || [\n    { id: \"c1\", name: \"Athlète A\", email: \"a@demo.com\", notes: \"Hypertrophie\" },\n  ]);\n\n  useEffect(() => {\n    saveState({ program, sessions, clients });\n  }, [program, sessions, clients]);\n\n  const allMetrics = useMemo(() => {\n    const vols = sessions.map((s) => calcSessionMetrics(s).volumeKg);\n    const times = sessions.map((s) => calcSessionMetrics(s).durationMin);\n    const ints = sessions.map((s) => calcSessionMetrics(s).avgIntensity);\n    const sum = (arr) => arr.reduce((a, b) => a + b, 0);\n    return {\n      volumeKg: sum(vols),\n      durationMin: sum(times),\n      avgIntensity: ints.length ? sum(ints) / ints.length : 0,\n    };\n  }, [sessions]);\n\n  return (\n    <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} className=\"min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-4 sm:p-8\">\n      <div className=\"max-w-6xl mx-auto space-y-6\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <div>\n            <h1 className=\"text-2xl font-bold\">CoachMVP – Créateur de programmes</h1>\n            <p className=\"text-sm text-gray-500\">Prototype: programmes, séances, analytics (volume, intensité, durée).</p>\n          </div>\n          <TopNav tab={tab} setTab={setTab} />\n        </div>\n\n        {tab === \"dashboard\" && (\n          <div className=\"space-y-6\">\n            <div className=\"grid gap-3 sm:grid-cols-3\">\n              <StatCard icon={Dumbbell} title=\"Volume total\" value={fmt.format(allMetrics.volumeKg)} suffix=\" kg\" />\n              <StatCard icon={BarChart3} title=\"Intensité moyenne\" value={fmt.format(allMetrics.avgIntensity * 100)} suffix=\" %\" />\n              <StatCard icon={Clock} title=\"Temps cumulé\" value={fmt.format(allMetrics.durationMin)} suffix=\" min\" />\n            </div>\n            <Analytics sessions={sessions} />\n          </div>\n        )}\n\n        {tab === \"program\" && (\n          <ProgramBuilder program={program} setProgram={setProgram} />\n        )}\n\n        {tab === \"sessions\" && (\n          <SessionLogger sessions={sessions} setSessions={setSessions} program={program} />\n        )}\n\n        {tab === \"clients\" && (\n          <Clients clients={clients} setClients={setClients} />\n        )}\n\n        <div className=\"flex justify-end gap-2\">\n          <button className=\"btn\" onClick={() => { saveState({ program, sessions, clients }); }}>\n            <Save className=\"w-4 h-4 mr-1\"/>Sauvegarder localement\n          </button>\n          <button className=\"btn\" onClick={() => { localStorage.removeItem(LS_KEY); window.location.reload(); }}>\n            <Trash2 className=\"w-4 h-4 mr-1\"/>Réinitialiser\n          </button>\n        </div>\n      </div>\n\n      {/* Styles utilitaires minimalistes */}\n      <style>{`\n        .input { @apply w-full rounded-xl border px-3 py-2 bg-white/90; }\n        .btn { @apply inline-flex items-center rounded-xl border px-3 py-2 bg-white hover:bg-gray-50 shadow; }\n        .icon-btn { @apply inline-flex items-center justify-center rounded-xl border px-2 py-2 bg-white hover:bg-gray-50 shadow; }\n      `}</style>\n    </motion.div>\n  );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","12668047205106171016","traceTime",1776423248136]
</article></body></html>