Werkbon

Wat is Werkbon?

Werkbon is een gesloten interne webapplicatie voor het beheren van werkbonnen, meldingen en klantcontacten. Gebouwd als WordPress thema voor een Nederlands servicebedrijf. Alleen ingelogde gebruikers — monteurs en beheerders — hebben toegang.

De applicatie wordt gebruikt door:

• Monteurs (veldwerkers) — meldingen bekijken, werkbonnen invullen na afgerond werk
• Beheerders — meldingen aanmaken, toewijzen, rapportages bekijken, contacten beheren

Kernentiteiten

Entiteit	CPT Slug	Beschrijving
Melding	job	Werkopdracht/ticket met status, type, adres en beschrijving
Werkbon	file	Afgeronde werkbon gekoppeld aan een melding — bevat werkzaamheden, materiaal en tijd
Contact	contact	Klant/opdrachtgever met adres- en contactgegevens, gesynceerd met Moneybird

Geen van de CPTs is publiek queryable — ze fungeren puur als datastore.

Typesysteem

Elk contact, elke melding en werkbon heeft een type:

Type	Beschrijving	Sync naar Moneybird
maasdelta	Woningcorporatie — speciale regels, apart gefactureerd	Nee, nooit
particulier	Particuliere klant	Ja
zakelijk	Zakelijke klant	Ja

Maasdelta-type wordt automatisch bepaald op basis van het adres (adressen uit de Maasdelta CSV database).

Systeemdiagram

Monteur / Beheerder
  │
  ├─ /login/            → WPForms login formulier
  ├─ /dashboard/        → Snelkoppelingen naar alle secties
  ├─ /meldingen/        → Lijst met filters + status modal
  │   └─ Status wijzigen, verwijderen, werkbon starten
  ├─ /melding-aanmaken/ → Form 3493 (create / edit melding)
  └─ /werkbon-invullen/ → Form 40 (werkbon invullen)
       │
       ├─ Contact opzoeken of aanmaken
       ├─ Adres normaliseren via database
       ├─ Werkzaamheden + materiaal vastleggen
       └─ Submit → FILE CPT + job status → Afgerond
            │
            └─ acf/save_post → Make.com webhook → Moneybird

Extern systeem (Moneybird / Make.com)
  ├─ POST /wp-json/acs/v1/jobs/create → Melding + contact aanmaken
  └─ POST /wp-json/acs/v1/contacts/upsert → Contact sync (moneybird_id)

Hoe werkt het?

Een typische werkdag van een monteur:

1. Monteur logt in → /login/ → redirect naar /dashboard/

2. Beheerder maakt melding aan:
   /melding-aanmaken/ → Form 3493
   ├─ Contact zoeken of nieuw aanmaken
   ├─ Adres invullen via Select2 chain
   ├─ Beschrijving + planningsdatum
   └─ Submit → JOB CPT + contact upsert → webhook → Moneybird

3. Monteur bekijkt meldingen:
   /meldingen/ → filter op status/type
   ├─ Klik op melding → modal met details
   ├─ Status wijzigen (Openstaand → In behandeling)
   └─ "Werkbon invullen" klik → Form 40 met prefill

4. Monteur vult werkbon in:
   /werkbon-invullen/?job_id=123
   ├─ Contact + adres vooringevuld (vergrendeld)
   ├─ Werkzaamheden toevoegen (modal + drag-drop tabel)
   ├─ Materiaal selecteren (categorieën + hoeveelheden)
   ├─ Handtekening zetten
   ├─ Verify checkbox aanvinken
   └─ Submit → FILE CPT + job status → Afgerond
              → webhook → Moneybird factuur

5. Beheerder bekijkt rapporten:
   /rapporten/ → filter op maand/straat/type

Gebruikersrollen

Rol	WP Rol	Rechten
Beheerder	administrator	Volledige toegang, alle WP capabilities
Monteur	subscriber (uitgebreid)	CRUD op meldingen/werkbonnen/contacten, delete rechten

Delete-rechten voor meldingen vereisen daarnaast het ACF admin veld op het gebruikersprofiel.

Pagina’s

URL	Template	Functie
/login/	page-login.php	Inlogscherm
/	page-dashboard.php	Dashboard met snelkoppelingen
/meldingen/	page-jobs.php	Meldingen lijst met filters en paginatie
/melding-aanmaken/	page-jobs-form.php	Melding aanmaken of bewerken
/werkbon-invullen/	page-jobs-form.php	Werkbon invullen (hoofdformulier)
/rapporten/	page-reports.php	Rapportages met filters

Technische Vereisten

Component	Versie	Doel
WordPress	5.9+	Platform
PHP	7.4+	IntlDateFormatter, type hints
WPForms Pro	Latest	Formulieren (form 2, 40, 3493, 3500)
ACF Pro	Latest	Custom fields, veldgroepen, options page
Node.js	16+	jQuery, Flatpickr, Select2 dependencies
CodeKit 3	Optioneel	SCSS compilatie, JS bundeling

Documentatie

Document	Beschrijving
Architectuur	Stack, directory structuur, build tooling, JS module-interactie
Setup & Deployment	Lokale setup, vereiste plugins, environment configuratie
Datamodel	CPTs, ACF velden, database schema, field mapping tabellen
Werkbon Formulier	Form 40 deep dive — werkzaamheden, materiaal, prefill, submit chain
Melding Formulier	Form 3493 — create/edit modus, status logica, meldingen lijst
Contact Systeem	Matching, deduplicatie, normalisatie, zoekmodal, upsert
Adressysteem	Database, CSV import, lookups, Select2 keten, AJAX
REST API	Alle endpoints met request/response documentatie
AJAX Endpoints	wp_ajax handlers: delete, status, address lookup
Auth & Rollen	Login flow, rollen, rechtenmatrix, sessie management
Integraties	Make.com webhooks, Moneybird sync, debounce, skip rules
Admin Interface	WP admin pagina’s, contact kolommen, database tools
Hooks Register	Compleet overzicht van alle actions en filters
Security Audit	Bekende kwetsbaarheden, risico’s en aanbevelingen

Migratie & Nieuw Ontwerp

De Werkbon app wordt gemigreerd naar de Beam stack (React 19, Vite, Cloudflare Workers, Supabase). Het datamodel wordt fundamenteel verbeterd:

• 4 entiteiten i.p.v. 2: Contact → Melding → Klus → Werkbon
• User journeys uitgewerkt voor klant, beheerder en monteur
• Mobile-first voor de monteur, 30-seconden werkbon

Document	Beschrijving
User Journeys	De ideale flow voor klant, beheerder en monteur
Datamodel (Nieuw)	4-entiteiten Supabase schema met overerving, triggers en views
Migratie Stack	Technische stack analyse, herbruikbare Beam componenten, API routes

Bekende Beperkingen

• Geen unit tests — alle logica is alleen handmatig getest
• Open REST API’s — alle endpoints zijn publiek toegankelijk zonder authenticatie (AVG/GDPR risico)
• Prefix-mix — functies gebruiken 7 verschillende prefixen (acs_, beam_, werkbon_, myproject_, hra_, thra_, my_)
• Geen namespaces of classes — procedurele code, geen autoloader
• Onvoorspelbare laadvolgorde — functions.php gebruikt glob() voor het laden van bestanden
• Webhook secrets in broncode — Make.com URLs hardcoded en gecommit naar Git
• main-min.js niet geminificeerd — bestandsnaam is misleidend