Een modern dashboard voor Stephen's Privélessen, gebouwd met Next.js 14, Prisma, en Tailwind CSS. Het dashboard integreert met TutorBot, Chatwoot, Stripe en Google Calendar.
graph TB
User["User"] -->|HTTPS| Dashboard["Dashboard<br/>Next.js :4141"]
Dashboard --> Auth["NextAuth"]
Dashboard --> UI["UI Components"]
UI --> Students["Student Management"]
UI --> Calendar["Calendar View"]
UI --> Payments["Payment Tracking"]
UI --> Packages["Package Management"]
Dashboard --> DB[("PostgreSQL<br/>Prisma")]
Dashboard --> MinIO["MinIO Datalake"]
Dashboard --> Chatwoot["Chatwoot API"]
Dashboard --> Stripe["Stripe API"]
Dashboard --> GCal["Google Calendar API"]
MinIO --> Bronze["Bronze Layer"]
MinIO --> Silver["Silver Layer"]
MinIO --> Gold["Gold Layer"]
Chatwoot -->|Webhook| Dashboard
Stripe -->|Webhook| Dashboard
GCal -->|Sync| Dashboard
Dashboard -->|"Cron Jobs"| Sync["Background Sync"]
Sync --> MinIO
style Dashboard fill:#1976d2,stroke:#0d47a1,stroke-width:2px,color:#fff
style DB fill:#f57c00,stroke:#e65100,stroke-width:2px,color:#fff
style MinIO fill:#388e3c,stroke:#1b5e20,stroke-width:2px,color:#fff
style Sync fill:#7b1fa2,stroke:#4a148c,stroke-width:2px,color:#fff
style Bronze fill:#fff4e1,stroke:#f57c00,stroke-width:2px,color:#000
style Silver fill:#e8f5e9,stroke:#388e3c,stroke-width:2px,color:#000
style Gold fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#000
- Statistieken: Totaal studenten, afspraken vandaag, openstaande betalingen
- Recente activiteit: Laatste berichten en updates
- Snelle acties: Directe toegang tot veelgebruikte functies
- Studentenoverzicht: Alle studenten met contactgegevens en status
- Segmentatie: Nieuwe, bestaande, terugkerende en weekend-klanten
- Notities: Rich text notities per student
- Voogden: Beheer van ouders/voogden
stateDiagram-v2
[*] --> Gepland: Nieuwe Afspraak
Gepland --> Bevestigd: Bevestiging
Gepland --> Geannuleerd: Annulering
Bevestigd --> Voltooid: Les Afgerond
Bevestigd --> Geannuleerd: Laatste Annulering
Voltooid --> [*]: Afgesloten
Geannuleerd --> [*]: Afgesloten
note right of Gepland
Locatie Types:
- Online
- Fysiek
- Hybride
end note
- Google Calendar integratie: Bidirectionele sync met Google Calendar
- Calendar Sync Service: Automatische sync naar MinIO datalake (Bronze layer)
- Calendar Silver Processor: Verrijkte calendar data in Silver layer
- Gold Analytics: Calendar statistieken en aggregaties
- Calendar Reinit: Complete herimport van calendar events
- Calendar Event Classifier: Automatische categorisatie van events
- Student Matching: Intelligente koppeling van calendar events aan studenten
- Status tracking: Gepland, bevestigd, voltooid, geannuleerd
- Locatie beheer: Online, fysiek, hybride lessen
- Calendar Colors: Kleurenbeheer per student
stateDiagram-v2
[*] --> Openstaand: Factuur Aangemaakt
Openstaand --> Betaald: Betaling Ontvangen
Openstaand --> Gefaald: Betaling Mislukt
Openstaand --> Geannuleerd: Factuur Geannuleerd
Betaald --> [*]: Voltooid
Gefaald --> Openstaand: Retry
Gefaald --> [*]: Definitief Gefaald
Geannuleerd --> [*]: Afgesloten
note right of Openstaand
Stripe Webhook
Verwerkt Automatisch
end note
- Stripe integratie: Automatische betalingsverwerking
- Status tracking: Openstaand, betaald, gefaald
- Facturering: Automatische facturen en kwitanties
- Pakkettenbeheer: Lespakketten met uren tracking en status
- Offertes: Offertes genereren en beheren per student
- Pakket types: Verschillende pakket types (4u, rush lessen, etc.)
- Koppeling: Pakketten gekoppeld aan lessen en betalingen
- Chatwoot integratie: WhatsApp en web berichten
- Real-time logs: Live berichten monitoring
- Error tracking: Foutafhandeling en debugging
- Student koppeling: Automatische koppeling van berichten aan studenten
graph TB
Sources["Data Sources"] --> Bronze["Bronze Layer<br/>Raw Data"]
Sources --> Calendar["Google Calendar"]
Sources --> PDFs["PDF Notities"]
Sources --> Chatwoot["Chatwoot Messages"]
Bronze --> Processor["Silver Processor"]
Processor --> Silver["Silver Layer<br/>Enriched Data"]
Silver --> Enrich1["Calendar + Student Match"]
Silver --> Enrich2["File Metadata"]
Silver --> Enrich3["Thumbnails"]
Silver --> Aggregator["Gold Aggregator"]
Aggregator --> Gold["Gold Layer<br/>Analytics"]
Gold --> Reports1["Weekly Reports"]
Gold --> Reports2["Monthly Stats"]
Gold --> Reports3["Student Summaries"]
Dashboard["Dashboard"] -->|Reads| Bronze
Dashboard -->|Reads| Silver
Dashboard -->|Reads| Gold
Cron["Cron Jobs"] -->|Triggers| Processor
Cron -->|Triggers| Aggregator
style Bronze fill:#fff4e1,stroke:#f57c00,stroke-width:2px,color:#000
style Silver fill:#e8f5e9,stroke:#388e3c,stroke-width:2px,color:#000
style Gold fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#000
style Dashboard fill:#1976d2,stroke:#0d47a1,stroke-width:2px,color:#fff
style Processor fill:#616161,stroke:#212121,stroke-width:2px,color:#fff
style Aggregator fill:#616161,stroke:#212121,stroke-width:2px,color:#fff
- MinIO integratie: Koppeling met Medallion Architecture data lake
- Bronze Layer: Raw data opslag (calendar events, PDF notities)
- Silver Layer: Verrijkte en geprocessede data
- Calendar events met student enrichment
- File metadata en thumbnails
- Student metadata files
- Gold Layer: Business analytics en aggregaties
- Weekly student progress reports
- Calendar statistics per month
- Student summaries
- Datalake paths: Student folders gekoppeld aan MinIO buckets
- Notities sync: PDF notities vanuit datalake beschikbaar
- Student sync: Automatische synchronisatie van datalake folders met student records
- Automatic Processing: Background jobs voor Bronze → Silver → Gold transformaties
- Cron Jobs: Automatische calendar sync en aggregation
- Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS
- UI Components: shadcn/ui, Radix UI
- Internationalization: next-intl (Nederlands & Engels)
- Theming: Dark/Light mode support
- Database: PostgreSQL met Prisma ORM
- Data Lake: MinIO met Medallion Architecture (Bronze/Silver/Gold)
- Authentication: NextAuth.js met credentials provider
- Payments: Stripe Checkout & Webhooks
- Calendar: Google Calendar API met automatische sync
- Messaging: Chatwoot webhook integratie
- Background Jobs: Cron jobs voor sync en data processing
- Deployment: Docker, PM2, NGINX
- Node.js 18+
- PostgreSQL database
- Docker (optioneel)
# Clone het project
git clone <repository-url>
cd privelessen-dashboard
# Installeer dependencies
npm install
# Kopieer environment file
cp env.example .env
# Configureer database URL in .env
DATABASE_URL="postgresql://username:password@localhost:5432/privelessen"
# Genereer Prisma client
npx prisma generate
# Run database migrations
npx prisma migrate dev
# Seed database (optioneel)
npx prisma db seed
Bewerk .env met je eigen waarden:
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/privelessen"
# NextAuth
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"
# Chatwoot (van je bestaande TutorBot)
CW_HMAC_SECRET="your-chatwoot-hmac-secret"
CW_URL="https://your-chatwoot-instance.com"
# Stripe
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
# Start development server
npm run dev
# Open http://localhost:3000
Het dashboard ontvangt berichten van je bestaande TutorBot via Chatwoot webhooks:
-
Configureer webhook in Chatwoot:
- URL:
https://dash.stephensprivelessen.nl/api/webhooks/chatwoot
- Events:
message_created, message_updated
- HMAC Secret: Gebruik dezelfde als in TutorBot
-
Automatische student koppeling:
- Berichten worden automatisch gekoppeld aan studenten op basis van telefoon/email
- Alle communicatie wordt gelogd in de database
Je kunt bestaande TutorBot data migreren:
-- Voorbeeld: Migreer studenten van TutorBot database
INSERT INTO students (name, email, phone, school_level, segment, customer_since)
SELECT name, email, phone, school_level, segment, created_at
FROM tutorbot_students;
graph TB
Dev["Development"] --> Build["Build Process"]
Build --> Test["Testing"]
Test -->|Pass| Docker["Docker Build"]
Test -->|Fail| Dev
Docker --> Image["Docker Image"]
Image --> Registry["Docker Registry"]
Registry --> Deploy["Deployment"]
Deploy --> Prod["Production<br/>:4141"]
Deploy --> Staging["Staging<br/>:4142"]
Prod --> Nginx["NGINX<br/>Reverse Proxy"]
Nginx --> SSL["SSL/TLS<br/>Certbot"]
SSL --> Domain["dash.stephensprivelessen.nl"]
style Dev fill:#1976d2,stroke:#0d47a1,stroke-width:2px,color:#fff
style Docker fill:#f57c00,stroke:#e65100,stroke-width:2px,color:#fff
style Prod fill:#388e3c,stroke:#1b5e20,stroke-width:2px,color:#fff
style Domain fill:#7b1fa2,stroke:#4a148c,stroke-width:2px,color:#fff
style Build fill:#616161,stroke:#212121,stroke-width:2px,color:#fff
style Test fill:#616161,stroke:#212121,stroke-width:2px,color:#fff
# Installeer Docker en Docker Compose
sudo apt update
sudo apt install docker.io docker-compose-plugin nginx certbot python3-certbot-nginx
# Zorg dat PostgreSQL container draait (postgres-privelessen)
docker ps | grep postgres-privelessen
# Kopieer environment file
cp env.example .env
# Bewerk .env met je eigen waarden
# Belangrijk: DATABASE_URL moet localhost gebruiken (niet container naam)
# Bijvoorbeeld: DATABASE_URL="postgresql://stephen:password@localhost:5432/privelessen"
# Gebruik het deployment script
./deploy-docker.sh
# Of handmatig:
docker-compose build
docker-compose up -d
# Bekijk logs
docker-compose logs -f
# Stop container
docker-compose down
# Herstart container
docker-compose restart
# Rebuild na code changes
docker-compose up -d --build
# Installeer Node.js, PostgreSQL, NGINX
sudo apt update
sudo apt install nodejs postgresql nginx
# Setup PostgreSQL database
sudo -u postgres createdb privelessen
server {
server_name dash.stephensprivelessen.nl;
location / {
proxy_pass http://127.0.0.1:4141;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
listen 80;
}
# Installeer Certbot
sudo apt install certbot python3-certbot-nginx
# Verkrijg SSL certificaat
sudo certbot --nginx -d dash.stephensprivelessen.nl
# Installeer PM2
npm install -g pm2
# Build en start applicatie
npm run build
pm2 start npm --name "privelessen-dashboard" -- start
# Setup PM2 startup
pm2 startup
pm2 save
erDiagram
STUDENTS ||--o{ LESSONS : has
STUDENTS ||--o{ APPOINTMENTS : has
STUDENTS ||--o{ PACKAGES : has
STUDENTS ||--o{ QUOTES : has
STUDENTS ||--o{ PAYMENTS : has
STUDENTS ||--o{ CONVERSATIONS : has
PACKAGES ||--o{ LESSONS : contains
PACKAGES }o--|| PAYMENTS : linked_to
PACKAGES }o--o{ QUOTES : included_in
QUOTES ||--o{ PACKAGES : contains
CONVERSATIONS ||--o{ MESSAGE_LOGS : has
WEBHOOK_LOGS }o--|| CONVERSATIONS : logs
STUDENTS {
string id PK
string name
string email
string phone
string segment
string datalakePath
datetime customer_since
}
LESSONS {
string id PK
string student_id FK
string package_id FK
datetime start_time
string status
string location
}
APPOINTMENTS {
string id PK
string student_id FK
string gcal_event_id
datetime start_time
string status
}
PACKAGES {
string id PK
string student_id FK
int hours_total
int hours_used
string status
}
PAYMENTS {
string id PK
string student_id FK
string package_id FK
string stripe_payment_id
decimal amount
string status
}
- students: Student informatie en segmentatie (inclusief datalakePath)
- lessons: Les planning en status
- appointments: Afspraken en Google Calendar sync
- packages: Lespakketten met uren tracking
- quotes: Offertes en facturen
- payments: Betalingen en Stripe integratie
- conversations: Chatwoot conversaties
- message_logs: Alle berichten en communicatie
- webhook_logs: Webhook events en errors
- Studenten hebben meerdere lessen, afspraken, pakketten, quotes, betalingen en conversaties
- Pakketten zijn gekoppeld aan lessen, betalingen en quotes
- Offertes bevatten meerdere pakketten
- Berichten zijn gekoppeld aan conversaties
- Webhooks worden gelogd voor debugging
- Authentication: NextAuth.js met JWT
- Authorization: Role-based access (ADMIN/TUTOR)
- Webhook Security: HMAC verificatie voor Chatwoot
- Database: Prepared statements via Prisma
- HTTPS: SSL/TLS encryptie
- Environment Variables: Geen secrets in code
# Run tests
npm test
# Run type checking
npm run type-check
# Run linting
npm run lint
- Application logs: PM2 logs
- Database logs: PostgreSQL logs
- Webhook logs: Ingebouwd in dashboard
- Error tracking: Sentry integratie (optioneel)
- Performance: Next.js built-in metrics
- Database: Prisma query performance
- Uptime: PM2 monitoring
GET /api/calendar/events - Fetch calendar events from datalakePOST /api/calendar/events - Create calendar event in Google CalendarGET /api/calendar/sync - Check sync statusPOST /api/calendar/sync - Trigger calendar syncPOST /api/calendar/reinit - Reinitialize from Google CalendarGET /api/calendar/colors - Get calendar colors configurationPOST /api/admin/process-calendar-silver - Process Bronze → Silver
/api/cron/calendar-sync - Automatic calendar sync (scheduled)/api/cron/calendar-aggregation - Calendar analytics aggregation (scheduled)
- Bronze → Silver: Calendar events enrichment with student matching
- Silver → Gold: Analytics aggregations and reports
- Automatic: Background processing via cron jobs
- Student contacteert via WhatsApp (TutorBot)
- Intake flow in TutorBot
- Student wordt aangemaakt in dashboard
- Datalake folder gekoppeld aan student
- Afspraak planning en betaling
- Google Calendar sync
- Les notities en follow-up
- Stripe Payment Link gegenereerd
- Student betaalt via iDEAL/creditcard
- Webhook ontvangt betaling
- Status wordt bijgewerkt in dashboard
- Factuur wordt automatisch gegenereerd
sequenceDiagram
participant Cron as "Cron Job"
participant API as "Calendar API"
participant GCal as "Google Calendar"
participant Bronze as "Bronze Layer"
participant Silver as "Silver Processor"
participant Gold as "Gold Aggregator"
participant Dashboard as "Dashboard"
Cron->>API: "Trigger /api/cron/calendar-sync"
API->>GCal: "Fetch Events"
GCal-->>API: "Return Events"
API->>Bronze: "Save to bronze-education/calendar/events/"
Bronze-->>API: "Confirmed"
API->>Silver: "Process Bronze → Silver"
Silver->>Silver: "Enrich with Student Data"
Silver-->>API: "Silver Data Ready"
API->>Gold: "Aggregate Silver → Gold"
Gold->>Gold: "Create Monthly Statistics"
Gold-->>API: "Gold Data Ready"
Dashboard->>API: "Request Calendar Data"
API-->>Dashboard: "Return Enriched Data"
- Cron job triggers
/api/cron/calendar-sync
- Events fetched from Google Calendar
- Events saved to MinIO Bronze layer (
bronze-education/calendar/events/)
- Silver processor enriches with student data
- Gold aggregator creates monthly statistics
- Dashboard displays enriched calendar data
- Fork het project
- Maak feature branch (
git checkout -b feature/AmazingFeature)
- Commit changes (
git commit -m 'Add AmazingFeature')
- Push naar branch (
git push origin feature/AmazingFeature)
- Open Pull Request
Dit project heeft toegang tot workspace-wide utility scripts via scripts/workspace/:
- MinIO utilities:
scripts/workspace/root/minio/ - MinIO data lake management
- Git utilities:
scripts/workspace/root/git/ - Repository management tools
Zie Workspace Scripts README voor volledige documentatie.
Voorbeelden:
# Open MinIO Console
./scripts/workspace/root/minio/open-minio.sh
# Push alle projecten naar Git
python3 ./scripts/workspace/root/git/push_all_projects.py
Private - Stephen's Privélessen
Voor vragen of problemen:
- Check de logs in het dashboard
- Controleer webhook configuratie
- Verificeer database connectie
- Bekijk TutorBot integratie
💡 Tip: Gebruik de zoekfunctie (Ctrl+F) om snel door de documentatie te navigeren.