Doel:
De financiële motor bouwen voor Padelschool OS.
Van:
"Uren bijhouden in losse bestanden"
naar:
"Automatische administratie voor trainers, spelers en beheerders."
Finance.gs
Invoices.gs
Payments.gs
Hours.gs
Contracts.gs
Reports.gs
Invoices
Payments
TrainerHours
Contracts
Subscriptions
FinancialReports
Trainer ziet:
Mijn uren
Vandaag:
2 uur les
Deze week:
12 uur
Deze maand:
48 uur
Jaar:
520 uur
Iedere activiteit:
TrainerID
Datum
LesID
Starttijd
Eindtijd
Aantal uren
Status
CAMTE kan automatisch:
Les gegeven
↓
Uren geregistreerd
↓
Tarief gekoppeld
↓
Factuurregel gemaakt
↓
Factuur klaar
Trainer:
TRAINER VOORNAAM 1
Activiteit:
Padelles Niveau 8
Datum:
18-07-2026
Duur:
1 uur
Tarief:
€ XX
Speleromgeving:
Mijn abonnement
Mijn lessen
Openstaande betalingen
Facturen
Historie
Stijn Gabeler ziet:
Financieel overzicht
Omzet deze maand
Aantal lessen
Trainerkosten
Openstaande facturen
Betaalde facturen
Trainer:
✅ eigen uren bekijken
✅ eigen facturen bekijken
Niet:
❌ totale omzet zien
Administrator:
✅ alle financiële gegevens
✅ goedkeuren
✅ corrigeren
✅ rapportages maken
Planning
↓
Les afgerond
↓
Aanwezigheid
↓
Uren
↓
Facturatie
↓
Rapportage
CAMTE
+
Finance Engine
+
Uren
+
Facturen
+
Betalingen
+
Rapportages
=
Professioneel bedrijfsbeheer
Volgende stap:
Daar bouwen we de slimme laag:
AI lesadviezen;
speleranalyse;
automatische oefensuggesties;
rapportages;
voorspellingen;
persoonlijke ontwikkelroutes.
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