Oefenruimte Boekingssysteem — Soulex.nl

Online boekingssysteem voor de muziekstichting. Bands kunnen een oefenruimte boeken, betalen via Mollie, en annuleren met automatische refund.

Hoe het werkt

Band bezoekt website
       │
       ▼
Weekoverzicht met beschikbare tijdslots (groen = vrij, rood = bezet + bandnaam)
  + datumkiezer om direct naar een specifieke week te springen
       │
       ▼ klikt op een slot (nogmaals klikken = deselecteren)
Boekingsformulier verschijnt gedockt aan onderkant scherm
       │
       ▼ verstuurt
Redirect naar Mollie betaalpagina
       │
       ▼ betaling geslaagd
Boeking definitief + 2 e-mails:
  1. Bevestigingsmail naar de band (met annuleringslink)
  2. Notificatie naar de organisatie

Annulering (door band):
  Band klikt annuleringslink in e-mail → bevestigt → automatische refund via Mollie
  → Organisatie krijgt e-mail over de annulering

Annulering (door beheerder):
  Beheerder gaat naar /admin → logt in met wachtwoord
  → Ziet alle aankomende boekingen → klikt "Annuleer boeking"
  → Automatische refund via Mollie + organisatie krijgt e-mail

Tech Stack

Component	Service	Kosten
Frontend + API	Next.js (TypeScript) op Vercel	Gratis (hobby tier)
Database	Supabase (PostgreSQL)	Gratis (free tier)
Betalingen	Mollie	~€0,29 per transactie
E-mail	Resend	Gratis (3000 mails/maand)
Code	GitHub (private repo)	Gratis

Projectstructuur

src/
├── config.ts                    ← ALLE configureerbare variabelen (prijs, tijden, etc.)
├── app/
│   ├── page.tsx                 ← Hoofdpagina: weekkalender + gedockt boekingsformulier
│   ├── layout.tsx               ← Layout: header, footer, NL taalinstellingen
│   ├── admin/
│   │   └── page.tsx             ← Beheerderspagina: boekingen inzien + annuleren
│   ├── booking/
│   │   ├── success/page.tsx     ← Bevestigingspagina na betaling
│   │   └── cancel/page.tsx      ← Annuleringspagina
│   └── api/
│       ├── slots/route.ts       ← GET: beschikbare tijdslots ophalen (incl. bandnamen)
│       ├── bookings/route.ts    ← POST: boeking aanmaken + Mollie betaling starten
│       ├── bookings/[id]/cancel/route.ts ← POST: annulering + refund (door band)
│       ├── admin/bookings/route.ts       ← GET: alle boekingen ophalen (admin)
│       ├── admin/bookings/[id]/cancel/route.ts ← POST: annulering door beheerder
│       └── webhooks/mollie/route.ts      ← POST: Mollie meldt betaalstatus
└── lib/
    ├── supabase.ts              ← Database client + types
    ├── mollie.ts                ← Mollie betaal-client
    ├── email.ts                 ← E-mail templates (bevestiging, annulering, org-notificatie)
    └── slots.ts                 ← Logica: slots genereren op basis van config

Configuratie aanpassen

Alle instellingen staan in één bestand: src/config.ts

export const config = {
  roomName: "Oefenruimte",
  pricePerSlotCents: 4000,               // Prijs voor een losse dagdeel-boeking (€40,00)
  slotDurationMinutes: 240,              // Duur per dagdeel (4 uur)
  dagdelen: [                            // De 3 vaste dagdelen die geboekt kunnen worden
    { id: "ochtend", label: "Ochtend", startHour: 9 },
    { id: "middag", label: "Middag", startHour: 14 },
    { id: "avond", label: "Avond", startHour: 19 },
  ],
  operatingDays: [0, 1, 2, 3, 4, 5, 6],    // Beschikbare dagen (0=zo t/m 6=za)
  maxWeeksAhead: 4,                      // Hoeveel weken vooruit boeken
  organizationEmail: "[email protected]",   // E-mail voor notificaties aan organisatie
  organizationName: "Muziekvereniging Soulex", // Naam organisatie (in e-mails)
  currency: "EUR",                       // Valuta
  pendingExpiryMinutes: 15,              // Hoe lang een onbetaalde boeking geldig is
  cancellationCutoffHours: 48,           // Tot hoe lang van tevoren gratis annuleren mag
};

Dit dekt alleen de losse eenmalige boeking (€40 per dagdeel). De vaste reserveringen (elke week €120 / om de week €60 per 4 weken) volgen in een aparte subscriptions-tabel — zie BESTUUR.md voor de uitleg van het hele proces.

Na het wijzigen: commit + push naar GitHub → Vercel deployed automatisch.

Database

Eén tabel bookings in Supabase (PostgreSQL). Schema staat in supabase/migrations/001_create_bookings.sql.

Statussen van een boeking:

• pending → boeking aangemaakt, wacht op betaling
• confirmed → betaling geslaagd, boeking definitief
• expired → betaling niet ontvangen binnen 15 minuten
• cancelled → band heeft geannuleerd, refund gestart

Accounts & Toegang

Zie TOEGANG.md (lokaal bestand, niet in de repo — bevat ook inloggegevens) voor een actueel overzicht van alle accounts en dashboards.

Environment Variables

Deze staan ingesteld in Vercel (Settings → Environment Variables):

Variable	Wat het is	Waar te vinden
NEXT_PUBLIC_SUPABASE_URL	Supabase project URL	https://janjxrnrscnlbrpvtnhi.supabase.co
SUPABASE_SERVICE_ROLE_KEY	Supabase service_role key (of de nieuwe sb_secret_... secret key)	Supabase → Settings → API Keys
MOLLIE_API_KEY	Mollie API key	Mollie → Developers → API keys
RESEND_API_KEY	Resend API key	Resend → API Keys
NEXT_PUBLIC_APP_URL	De URL van de live site	De Vercel deployment URL
ADMIN_SESSION_SECRET	Ondertekent de admin-sessie-cookie en wachtwoord-reset-links	Willekeurige lange string, zie .env.example
MAGIC_LINK_SECRET	Ondertekent de tijdelijke "mijn boekingen"-links	Willekeurige lange string
CRON_SECRET	Beveiligt de dagelijkse cron-job (/api/cron/subscriptions)	Willekeurige lange string

Let op: SUPABASE_SERVICE_ROLE_KEY is een geheime key met volledige database-toegang. Deel deze nooit publiek.

Beheerderspagina (/admin)

Ga naar jouw-site.vercel.app/admin — log in met je beheerders-e-mailadres en wachtwoord (accounts staan in de admin_users-tabel in Supabase). Nog geen wachtwoord ingesteld, of vergeten? Via "Wachtwoord vergeten" op het inlogscherm krijg je een e-maillink (30 min geldig) om er een (nieuw) in te stellen.

Functies:

• Overzicht van alle aankomende bevestigde en lopende boekingen
• Annuleren van een boeking — het betaalde bedrag wordt automatisch teruggestort via Mollie en de organisatie ontvangt een e-mail
• Vernieuwen om de laatste boekingen op te halen

Een nieuw beheerdersaccount toevoegen: voeg een rij toe aan admin_users in Supabase (alleen email invullen, password_hash leeg laten) — die persoon kan dan via "Wachtwoord vergeten" zelf een wachtwoord instellen.

Kalenderoverzicht

• Groene slots = beschikbaar, klik om te boeken
• Rode slots = bezet (bandnaam wordt bewust niet publiek getoond — alleen zichtbaar in /admin)
• Datumkiezer boven het rooster om direct naar een specifieke week te springen
• Slot toggle — klik nogmaals op een geselecteerd (blauw) slot om te deselecteren
• Gedockt formulier — bij selectie verschijnt het boekingsformulier vast aan de onderkant van het scherm
• Mobiel-vriendelijk — werkt goed op smartphones met aanpaste layout en grote knoppen

---

Wat er nog moet gebeuren om LIVE te gaan

1. DNS-records toevoegen voor e-mail (Resend + soulex.nl)

Het domein soulex.nl is toegevoegd in Resend, maar de DNS-records moeten nog worden ingesteld bij de domeinprovider. Zonder dit kunnen e-mails alleen naar het Resend-accountadres gestuurd worden.

Toe te voegen DNS-records:

Type	Name	Content	TTL
TXT	resend._domainkey	(volledige waarde uit Resend dashboard)	Auto
CNAME	rsend	(waarde uit Resend dashboard)	Auto
CNAME	send	(waarde uit Resend dashboard)	Auto

De exacte waarden staan in het Resend dashboard onder Domains → soulex.nl.

Na het toevoegen: klik in Resend op "I've added the records" → wacht op verificatie (kan tot 48 uur duren, meestal sneller).

2. E-mail afzender updaten in code

Zodra het domein geverifieerd is in Resend, moet de afzender in src/lib/email.ts worden aangepast:

Verander (3x in het bestand):

from: `${config.organizationName} <[email protected]>`

Naar:

from: `${config.organizationName} <[email protected]>`

3. Mollie live zetten

1. Verifieer het Mollie-account met KVK-gegevens van de stichting
2. Maak een Live API key aan in Mollie (Developers → API keys → Livemodus)
3. Vervang de MOLLIE_API_KEY in Vercel door de live key
4. Test een echte betaling

4. NEXT_PUBLIC_APP_URL instellen

Zorg dat NEXT_PUBLIC_APP_URL in Vercel is ingesteld op de definitieve URL van de site. Dit is nodig voor:

• Mollie webhooks (betaalstatus terugkoppeling)
• Annuleringslinks in e-mails
• Redirect na betaling

5. Organisatie e-mailadres instellen

Pas organizationEmail in src/config.ts aan naar het echte e-mailadres van de stichting (bijv. [email protected]).

6. (Optioneel) Eigen domein koppelen aan Vercel

In Vercel → Settings → Domains kun je soulex.nl of boeken.soulex.nl koppelen als custom domain in plaats van de .vercel.app URL.

---

Lokaal ontwikkelen

# Dependencies installeren
npm install

# Kopieer env template en vul waarden in
cp .env.example .env.local

# Dev server starten
npm run dev

Open http://localhost:3000.

Testen met Mollie

In test mode kun je betalen met testkaarten zonder echt geld. De Mollie test-modus werkt automatisch als je een test_... API key gebruikt.

Zie de Mollie documentatie voor testkaarten en testscenario's.

Deployen

Elke push naar de master branch op GitHub triggert automatisch een nieuwe deployment op Vercel. Geen handmatige actie nodig.