build-fase2-indholdskalender

Prompt file imported from MathiasBoll/Kastrup-Cykelboers-frontend-og-Backend (.github/prompts/build-fase2-indholdskalender.prompt.md). Copyright stays with the author.

Byg en Facebook-indholdskalender til admin-sektionen Marketing i Kastrup Cykelbørs. Dette er en fase 2-opgave.

Formål

Butiksejeren skal have et enkelt overblik over kommende uger og tidligere publicerede opslag, så han kan planlægge indhold fremad og undgå at gentage sig selv for meget.

Brug disse eksisterende filer som reference

• docs/features/01-master-feature-register.md — se FE-039, FE-037, FE-038
• docs/features/05-facebook-ugentlig-content-og-pamindelser.md
• docs/indhold/02-regler-for-ai-seo-og-facebook.md
• app/src/pages/admin/FacebookOpslagGenerator.jsx — eksisterende generator
• app/src/styles/index.css — CSS-klasser og design tokens

Forudsætninger

• Facebook-opslagsgeneratoren er implementeret (FE-038, FE-040, FE-042)
• Dashboard-ugens-opslag-kort er implementeret (FE-037)

Side: Indholdskalender (/admin/indholdskalender)

Kalendervisning

• vis de næste 6 uger i en tabel- eller kortoversigt
• for hver uge: ugenummer, dato-interval og en felt til at notere opslagsplan
• vis status: planlagt, udført, tom
• klik på en uge for at åbne Facebook-opslagsgeneratoren med den uge forvalgt

Opslagshistorik

• vis de seneste 10 opslag i en liste
• for hvert opslag: dato, tema, kort preview af tekst og status
• knap: Redigér eller Genanvend opslag
• tomt-tilstand: "Ingen opslag er genereret endnu. Start med at generere dit første opslag."

Datamodel

Brug eksisterende opslags-data fra FacebookOpslagGenerator.jsx og gemme i localStorage:

// Nøgle: 'kcb-opslag-historik-v1'
{
  id,
  uge,               // ISO-dato for ugens mandag
  oprettetDato,
  tema,              // 'ny-cykel' | 'brugt-cykel' | 'vaerksted' | 'saeson' | 'lokalt'
  kortVersion,
  normalVersion,
  cta,
  linkmaal,
  status             // 'udkast' | 'udfort'
}

Hjælpefunktioner

Opret app/src/utils/kalenderUtils.js med:

• hentNaesteUger(antal) — returnerer array af ugedatoer (mandage)
• formaterUge(dato) — returnerer "Uge 12 — 17. mar. 2025"
• hentOpslagForUge(uge, opslag) — filtrerer opslag for en given uge

Komponentstruktur

• app/src/pages/admin/Indholdskalender.jsx — kalender-oversigt
• app/src/utils/kalenderUtils.js — hjælpefunktioner til datoer
• Tilføj rute i app/src/App.jsx: <Route path="indholdskalender" element={<Indholdskalender />} />
• Tilføj link i AdminLayout.jsx under Marketing-sektionen

MVP-afgrænsning for fase 2

1. simpel ugetabel med status for de næste 6 uger
2. opslagshistorik viser de seneste 10 opslag
3. genanvend-funktion åbner generatoren med forvalgt data
4. avanceret indholdsplanlægning og notifikationer er fase 3

Designprincipper

• brug .data-tabel til opslagshistorik
• brug .badge--success til udførte uger og .badge--warning til tomme uger
• brug .tom-tilstand til tom historik
• skriv al tekst på korrekt dansk med å, æ, ø
• brug CSS-variabler fra tokens.css, aldrig hardkodede hex-farver