Doel:
De complete planninglaag bouwen voor Padelschool OS.
Van losse agenda's naar één centraal planningssysteem.
Planning.gs
Calendar.gs
Availability.gs
Booking.gs
ScheduleService.gs
Planning
Bookings
Availability
Calendar
Locations
Courts
Iedere les krijgt:
LessonID
Datum
Starttijd
Eindtijd
Locatie
Baan
TrainerID
GroepID
Aantal spelers
Status
Trainer ziet:
Vandaag
09:00 Privéles
17:00 Groep Niveau 8
18:00 Groep Niveau 7
20:00 Evaluatie
Ziet:
Alle trainers
Alle locaties
Alle banen
Alle lessen
Alle wijzigingen
Speler ziet:
Mijn lessen
Mijn trainer
Mijn groep
Mijn locatie
Mijn betalingen
Mijn evaluaties
Trainer kan aangeven:
Maandag
17:00 - 22:00
Beschikbaar
CAMTE gebruikt dit bij planning.
Flow:
Speler vraagt les
↓
Trainer/Administrator akkoord
↓
Planning wordt gemaakt
↓
Agenda update
↓
Notificatie verstuurd
Een wijziging:
Les verplaatst
↓
Planning
↓
Trainer agenda
↓
Speler agenda
↓
Notificatie
↓
Facturatie controle
CAMTE
+
Planning Engine
+
Agenda
+
Boekingen
+
Beschikbaarheid
=
Professioneel padelplanningssysteem
Volgende stap:
Daar bouwen we de kern van Padelschool OS:
lessen maken;
lesreeksen;
oefeningen;
GRAS/TACTISCH/TECHNISCH;
evaluaties;
ontwikkeling spelers.
Ik zou vanaf hier niet meer in hele kleine stapjes (1.5, 1.6, 1.7) werken. Nu de fundering staat, is het efficiënter om grotere ontwikkelsprints te maken die daadwerkelijk een compleet onderdeel opleveren.
De volgende logische stap is daarom:
Doel: Padelschool OS omvormen van een prototype naar een schaalbare applicatie.
Na Sprint 2 heb je:
✅ Een professioneel dashboard
✅ Een router met meerdere pagina's
✅ Een centrale state manager
✅ Een component library
✅ Een API-laag
✅ Een services-laag
✅ Een notificatiesysteem
✅ Een instellingenmodule
✅ Donkere/licht thema's
✅ Klaar voor Google Sheets, Firebase of Supabase
Nieuwe mapstructuur:
src/
core/
app.js
router.js
state.js
events.js
storage.js
services.js
components/
Card.js
Button.js
Table.js
Modal.js
Sidebar.js
Header.js
modules/
dashboard/
players/
trainers/
groups/
planning/
assets/
We bouwen herbruikbare componenten:
DashboardCard
StatisticCard
DataTable
SearchBox
FilterBar
ModalWindow
Notification
ConfirmDialog
Tabs
ProgressBar
Vanaf nu wordt alles opgebouwd uit dezelfde componenten.
De router krijgt:
Dashboard
Spelers
Trainers
Groepen
Planning
Lessen
Oefeningen
Evaluaties
Instellingen
Elke pagina wordt dynamisch geladen zonder de hele pagina te verversen.
Alle gegevens komen in één centrale state:
AppState
│
├── user
├── players
├── trainers
├── groups
├── planning
├── lessons
├── exercises
├── evaluations
└── settings
In plaats van modules die rechtstreeks data wijzigen:
PlayerService
TrainerService
GroupService
PlanningService
LessonService
EvaluationService
ExerciseService
Iedere module communiceert alleen met deze services.
Bijvoorbeeld:
✅ Speler opgeslagen
🗑️ Groep verwijderd
📅 Les gepland
⚠️ Planningconflict gevonden
Eén universeel systeem voor:
Naam
Niveau
Trainer
Groep
Datum
Locatie
Dat werkt automatisch in alle modules.
Het dashboard wordt live gevuld met gegevens:
Actieve spelers
Trainers
Lessen vandaag
Open evaluaties
Planning deze week
Laatste activiteiten
Instellingen zoals:
Naam padelschool
Logo
Kleuren
Thema (licht/donker)
Taal
Tijdzone
Back-up
Na Sprint 2 heb je de eerste echte versie van Padelschool OS:
Padelschool OS Alpha 0.5
Dashboard
├── Spelers
├── Trainers
├── Groepen
├── Planning
├── Lessen
├── Oefeningen
├── Evaluaties
└── Instellingen
Core Engine
Component Library
State Manager
Service Layer
API Layer
Vanaf dit punt zou ik niet meer losse HTML-pagina's bouwen, maar het project professioneel organiseren:
Sprint 3–10: Werkende modules (spelers, planning, lessen, evaluaties, oefeningen)
Sprint 11–20: Padel Knowledge Engine (GRAS, tactiek, slagenbibliotheek, lesgenerator)
Sprint 21–30: AI Coach en spelerontwikkeling
Sprint 31–40: Business, clubs, betalingen en planning
Sprint 41–50: Videoanalyse, internationale versie en Padelschool OS 1.0
Dat levert uiteindelijk een onderhoudbaar en uitbreidbaar platform op in plaats van een verzameling losse HTML-bestanden.
Perfect. Sprint 2 wordt misschien wel de belangrijkste sprint van het hele project.
Waarom?
Omdat iedere volgende HTML-pagina, mobiele app en toekomstige functie dezelfde ontwerpregels gaat gebruiken.
We ontwerpen dus niet zomaar een dashboard.
We ontwerpen de digitale werkplek van de complete padelwereld.
Sprint: 2 van 50
Status: Ontwerp
Sprint 2 beschrijft hoe PadelSchool OS eruit gaat zien.
Niet de techniek.
Niet de database.
Maar de gebruikerservaring.
Iedere knop.
Iedere pagina.
Iedere kleur.
Iedere kaart.
Iedere tabel.
Iedere popup.
Iedere gebruiker.
Alles krijgt dezelfde stijl.
De software moet voelen alsof iemand de eenvoud van Google, de overzichtelijkheid van Notion, de snelheid van Linear en de professionaliteit van Microsoft 365 heeft gecombineerd, speciaal voor de padelwereld.
De gebruiker hoeft nooit na te denken waar iets staat.
Alles voelt logisch.
Na het inloggen ziet iedere gebruiker hetzelfde ontwerp.
Alleen de inhoud verandert.
Dus:
Trainer
↓
Trainer Dashboard
Speler
↓
Speler Dashboard
Administrator
↓
Administrator Dashboard
Maar de software blijft hetzelfde.
Ik stel een 3-delige layout voor.
┌────────────────────────────────────────────────────────────────────────────┐
│ Topbar 👤 │
├──────────────┬───────────────────────────────────────────────┬─────────────┤
│ Sidebar │ │ │
│ │ │ AI Assistant│
│ Dashboard │ Werkruimte │ │
│ Planning │ │ Meldingen │
│ Agenda │ │ Taken │
│ Lessons │ │ Chat │
│ Trainers │ │ │
│ Players │ │ │
│ Finance │ │ │
│ Academy │ │ │
└──────────────┴───────────────────────────────────────────────┴─────────────┘
Bovenin altijd zichtbaar.
Links
Logo
PadelSchool OS
Midden
Zoekbalk
Rechts
Meldingen
Chat
Taken
AI
Profiel
Instellingen
De sidebar wordt het hart van de software.
Niet meer dan ongeveer twintig hoofdonderdelen.
🏠 Dashboard
📅 Agenda
🗓 Planning
🎾 Lessen
📚 Lessenreeksen
👤 Spelers
🎓 Trainers
👥 Teams
👨👩👧 Groepen
📍 Locaties
⭐ Evaluaties
💬 Communicatie
💰 Facturen
💳 Betalingen
📊 Rapportages
🤖 AI Coach
🎓 Academy
🛒 Marketplace
⚙ Instellingen
Alles daaronder wordt submenu.
Iedere gebruiker krijgt kaarten.
Bijvoorbeeld.
Vandaag
3 lessen
↓
Agenda
↓
Open berichten
↓
Open evaluaties
↓
Facturen
↓
Planning
↓
Taken
Iedere kaart krijgt exact dezelfde stijl.
Titel
↓
Waarde
↓
Kleine uitleg
↓
Actieknop
Bijvoorbeeld.
Lessen
58
Bekijk
Iedere tabel krijgt dezelfde structuur.
Zoeken
Filter
Kolommen
Sorteren
Exporteren
Nieuwe toevoegen
Daaronder.
Naam
Status
Datum
Trainer
Locatie
Acties
Iedere invoerpagina krijgt dezelfde opbouw.
Persoonsgegevens
↓
Planning
↓
Notities
↓
Documenten
↓
Communicatie
↓
Opslaan
Primary
#0B5FFF
Success
#22C55E
Warning
#F59E0B
Danger
#EF4444
Sidebar
#111827
Background
#F7F9FC
Cards
#FFFFFF
Inter
16 px basis
20 px subtitel
32 px paginatitel
40 px dashboardtitel
Één stijl.
Bijvoorbeeld Lucide Icons.
Rustig.
Modern.
Niet een verkleinde desktop.
Maar echt opnieuw ontworpen.
Onderin:
Dashboard
Planning
Agenda
Chat
Meer
Swipebaar.
Rechts onderin.
Altijd zichtbaar.
Hallo Stijn.
Vandaag heb je
3 lessen.
↓
2 evaluaties ontbreken.
↓
Factuur klaar.
↓
Nieuwe speler toegevoegd.
Later ook spraak.
Geen popups.
Maar een notificatiecentrum.
Vandaag
↓
Planning gewijzigd
↓
Nieuwe speler
↓
Factuur betaald
↓
Chatbericht
Misschien wel de belangrijkste knop.
Zoeken...
Speler
Trainer
Groep
Les
Video
Document
Factuur
Planning
Evaluatie
Alles doorzoekbaar.
Ik wil dat een nieuwe trainer binnen vijf minuten begrijpt hoe de software werkt.
Geen handleiding.
Geen cursus.
Gewoon logisch.
Elke nieuwe pagina moet voldoen aan de volgende regels:
Maximaal drie klikken naar iedere belangrijke functie.
Consistente navigatie op desktop, tablet en mobiel.
Eén vaste visuele taal voor knoppen, kaarten, tabellen en formulieren.
Altijd een zoekfunctie en filters waar lijsten voorkomen.
Acties zijn duidelijk zichtbaar en vragen alleen bevestiging wanneer dat echt nodig is.
Toegankelijk ontwerp met voldoende contrast, duidelijke lettergroottes en toetsenbordnavigatie.
De index.html wordt geen verzameling losse componenten meer, maar de applicatieshell van PadelSchool OS.
Deze shell bevat:
Topbar met logo, globale zoekfunctie, meldingen, AI-assistent en gebruikersprofiel.
Sidebar met alle hoofdmodules en uitklapbare submenu's.
Werkruimte waarin modules dynamisch worden geladen zonder de pagina te verversen.
Rechter informatiepaneel (optioneel) voor AI-tips, taken, meldingen of contextinformatie.
Elke module (Planning, Spelers, Trainers, Facturen, enzovoort) gebruikt vervolgens dezelfde kaarten, tabellen, formulieren en navigatie. Daardoor ontstaat één herkenbare gebruikerservaring die eenvoudig uit te breiden is.
Na Sprint 2 hebben we:
✔ De volledige UX-visie van PadelSchool OS.
✔ Het Design System (kleuren, typografie, iconen en componenten).
✔ De navigatiestructuur.
✔ Het concept van de nieuwe index.html.
✔ De basis voor de HTML-, CSS- en JavaScript-ontwikkeling.
Sprint 3 richt zich vervolgens op de technische architectuur: de Google Sheets-database, objectrelaties, API-laag en de definitieve gegevensstructuur waarop alle modules gaan draaien. Dat vormt de brug tussen het ontwerp en de daadwerkelijke softwareontwikkeling