As a user I want to plan my training week upfront so I can see projected muscle coverage before I start

[ChristopherRotnes]

Summary

A new view that lets the user plan their training week before it happens. The user assigns templates to days, and a live body map shows the cumulative projected muscle coverage for the week. Addresses the core problem: every other screen answers "what did I do?" — this one answers "what should I do next?"

UI spec (Carbon g100)

• Header row: week number + date range (e.g. UKE 19 · 4–10 MAI)
• Page heading: Planlegg uken
• Projected coverage section (PROJISERT DEKNING): HeatmapBodySVG (front + back, side-by-side or toggle on mobile) showing union of all planned sessions' muscles. Summary line: N ØKTER · N MUSKELGRUPPER · N MIN
• 7-day list: one row per day (MAN–SØN). Rows with a template assigned show: day label, date, template name, duration, muscle Tag pills. Empty rows show a dashed + Legg til økt button
• Sticky action bar: Fjern uke (ghost) + Lagre plan (primary)
• Forslag card (yellow/warning): surfaces neglected muscles based on tag/exercise history and nudges toward templates that cover them

Data model

New table week_plans:

week_plans
  id, user_id, week_iso text (e.g. "2025-W19"), created_at

week_plan_days
  id, plan_id → week_plans, day_of_week int (1=Mon…7=Sun),
  template_id → session_templates (nullable), sort_order int

week_plan_days.template_id nullable — an empty slot is a valid row with template_id = null.

Acceptance criteria

• New nav icon (calendar) in Header → navigates to "planlegger" view
• Current week is shown by default; user can navigate ±1 week
• Assigning a template to a day updates the projected body map in real time
• Removing a template from a day clears the slot (shows dashed + Legg til økt)
• "Lagre plan" upserts the week_plans + week_plan_days rows
• "Fjern uke" deletes the plan for the current week (with confirmation)
• Forslag card appears if ≥2 muscle groups have no coverage in the planned week
• Body map uses buildMuscleMapFromExercises over all planned templates' exercises
• Mobile: single-column, Front/Bak toggle on body map

Out of scope (follow-up)

• Drag-and-drop reordering of days
• Multi-week arc / program builder (Push/Pull/Legs 6-week cycle)
• Converting a saved plan into a logged session directly from this view

[ChristopherRotnes]

Implementasjonsplan

Scope

• 2 nye Supabase-tabeller (week_plans, week_plan_days)
• 3 nye funksjoner i db.js
• 2 nye hjelpefunksjoner i utils.js (toWeekIso, weekIsoToMonday)
• 1 ny komponent: Planlegger.jsx
• Mindre endringer i App.jsx og PageShell.jsx

---

1. Supabase-migrasjon

create table if not exists week_plans (
  id         uuid        default gen_random_uuid() primary key,
  user_id    uuid        references auth.users not null,
  week_iso   text        not null,               -- "2026-W19"
  created_at timestamptz default now(),
  unique (user_id, week_iso)
);
alter table week_plans enable row level security;
create policy "Users manage own week_plans"
  on week_plans for all
  using  (auth.uid() = user_id)
  with check (auth.uid() = user_id);

create table if not exists week_plan_days (
  id          uuid  default gen_random_uuid() primary key,
  plan_id     uuid  references week_plans(id) on delete cascade not null,
  day_of_week int   not null check (day_of_week between 1 and 7),
  template_id uuid  references session_templates(id) on delete set null,
  sort_order  int   default 0
);
alter table week_plan_days enable row level security;
create policy "Users manage own week_plan_days"
  on week_plan_days for all
  using  (exists (select 1 from week_plans wp where wp.id = week_plan_days.plan_id and wp.user_id = auth.uid()))
  with check (exists (select 1 from week_plans wp where wp.id = week_plan_days.plan_id and wp.user_id = auth.uid()));

---

2. db.js — nye funksjoner

Funksjon	Beskrivelse
fetchWeekPlan(weekIso)	Henter week_plans + week_plan_days med joinede template-data. Returnerer { plan, days }.
saveWeekPlan(weekIso, assignments)	Upsert week_plans, slett + reinsert alle week_plan_days. assignments: [{ day_of_week, template_id }]
deleteWeekPlan(weekIso)	Sletter week_plans-raden (cascade fjerner days automatisk).

---

3. utils.js — hjelpefunksjoner

toWeekIso(date)          // Date → "2026-W19"
weekIsoToMonday(weekIso) // "2026-W19" → Monday Date

---

4. App.jsx

• Importer Planlegger
• Legg til onShowPlanlegger i NavContext
• Legg til "planlegger" view-branch

5. PageShell.jsx

• Legg til EventSchedule-ikon (Carbon) som NavBtn etter Bibliotek-knappen

---

6. Planlegger.jsx — komponentstruktur

State: weekOffset, assignments ({ [dow: 1-7]: template | null }), templates, pickerDow, confirmDelete, saving, saveError, hoveredMuscle, mobileBodyView

Computed (useMemo):

• monday, weekIso, weekLabel ("UKE 19 · 4–10 MAI")
• projectedCounts — akkumulerte { muscleId: { primary, secondary } } fra alle tilordnede maler via calcMuscles()
• maxCount, projectedExerciseMap (via buildMuscleMapFromExercises)
• sessionCount, muscleGroupCount, untrainedMuscleIds, showForslag (≥2 utrente muskler)
• forslagTemplates — opptil 3 maler fra biblioteket som dekker de utrente musklene

JSX-struktur:

Ukenavigasjon: [ChevronLeft] "UKE N · D–D MÅNED" [ChevronRight]
PageHeading "Planlegg uken"
SectionLabel "PROJISERT DEKNING"
"N ØKTER · N MUSKELGRUPPER"  ← N MIN utelatt (ingen varighetsdata i maler)
HeatmapBodySVG front + bak (side-by-side / Front-Bak-toggle på mobil)
[Forslag-kort hvis showForslag]
SectionLabel "UKESPLAN"
7× DayRow (MAN–SØN)
  – Tildelt: dag, dato, malnavn, muskel-AccentChip-piller, ×-knapp
  – Tom: dag, dato, stiplet "+ Legg til økt"-knapp
[Inline mal-velger overlay (fixed bottom-sheet, lukkes med Escape/backdrop-klikk)]
StickyCta: "Fjern uke" (ghost) + "Lagre plan" (primary)
[Bekreft-strip hvis confirmDelete]

---

Beslutning: N MIN utelatt

session_templates har ingen varighetskolonne — summary-linjen viser kun N ØKTER · N MUSKELGRUPPER.

---

Verifisering

1. SQL-migrasjon kjørt; RLS blokkerer kryssbrukertilgang
2. Kalender-ikon i nav → navigerer til Planlegger, viser gjeldende uke
3. ChevronLeft/Right oppdaterer ukelabel korrekt
4. Tildel mal → HeatmapBodySVG oppdateres live
5. ≥2 muskler uten dekning → Forslag-kort vises; fyll dekning → kort forsvinner
6. "Lagre plan" → rader i Supabase; reload → plan lastes inn igjen
7. "Fjern uke" → bekreft → week_plans-rad slettet (cascade)
8. Mobil: Front/Bak-toggle, bottom-sheet mal-velger
9. Enhetstester for toWeekIso / weekIsoToMonday ved årsskifte (29. des → W01 neste år)

[ChristopherRotnes]

Implementation status — ready to build

Already done

• DB migration applied — week_plans and week_plan_days tables exist in production Supabase (RLS enabled, 0 rows)
• Code exists on branch claude/test-supabase-connector-t8ATa (PR feat(#59): add weekly training planner view #122, closed without merge):
  • Planlegger.jsx — full view (week nav, HeatmapBodySVG, 7-day list, template picker bottom sheet, Forslag card, sticky CTA)
  • db.js — fetchWeekPlan, saveWeekPlan, deleteWeekPlan
  • utils.js — toWeekIso, weekIsoToMonday
• EventSchedule icon already in the header as a no-op placeholder (added in issue As a user I want simple and clear navigation on all pages so I can move around the app without confusion #123, PR feat(#123): Settings view — consolidate header to 6 icons #126)

What a new session needs to do

1. Create a new branch from current master (not the old branch)
2. Cherry-pick these two commits from claude/test-supabase-connector-t8ATa:
   • b6c95fe — feat(As a user I want to plan my training week upfront so I can see projected muscle coverage before I start #59): add weekly training planner view
   • 4b5c919 — fix: remove unused weekIsoToMonday import in Planlegger
3. Skip the NavBtn width-reduction commits (393bcfd, 6247d39) — no longer needed since issue As a user I want simple and clear navigation on all pages so I can move around the app without confusion #123 brought the header back to 6 icons at 48px width
4. Resolve conflicts in:
   • PageShell.jsx — wire EventSchedule NavBtn onClick to onShowPlanlegger (currently a no-op placeholder)
   • App.jsx — add onShowPlanlegger to navValue and "planlegger" view branch alongside the existing "settings" view

Key constraint

The old branch had 7 nav icons and reduced NavBtn width to 36px. Current master has 6 icons at 48px. The cherry-picked code must NOT reintroduce the 7th-icon width fix — EventSchedule replaces the old theme toggle slot, so the count stays at 6.

---

Generated by Claude Code