FlexDesk — Development Roadmap
Het besturingssysteem voor de hele flex-organisatie van Flexprojects. Eén platform dat mensen, opdrachten, planning, uren, facturatie en compliance naadloos met elkaar verbindt. Maximale efficiëntie, vlekkeloze processen.
Stack: Next.js (App Router) · React · TypeScript · Supabase (Postgres + Auth + Storage + Realtime) · Vercel Designtaal: "Super UI" / Apple — rustig, hoogwaardig, veel witruimte, subtiele diepte, vloeiende interacties.
1. Visie & uitgangspunten
| # | Principe | Wat het betekent |
|---|---|---|
| V1 | Eén bron van waarheid | Alle data (mensen, opdrachten, uren, facturen) leeft in één gekoppeld datamodel. Geen losse Excel-eilanden. |
| V2 | Dashboard-first | We bouwen eerst het centrale overzicht; alle processen hangen daar zichtbaar onder. |
| V3 | Automatiseren waar het kan | Herhalende handelingen (matching, herinneringen, facturatie, statusovergangen) worden workflows, geen handwerk. |
| V4 | Apple-kwaliteit UI | Strak, snel, voorspelbaar. Design system vóór features, zodat alles consistent oogt. |
| V5 | Rol-gebaseerd | Planner, flexkracht, opdrachtgever en management zien elk hun eigen relevante beeld. |
| V6 | Schaalbaar fundament | Keuzes in fase 0–1 mogen latere modules niet blokkeren (multi-tenant-ready, RLS, audittrail). |
2. Hoe je deze roadmap leest
- Fases zijn op volgorde; latere fases bouwen voort op eerdere.
- Prioriteit: 🔴 must-have · 🟡 should-have · 🟢 nice-to-have
- Status: ⬜ todo · 🟦 bezig · ✅ klaar
- Afh. = afhankelijk van (welke stap eerst af moet zijn).
Werk per fase van boven naar beneden. Vink Status af terwijl je vordert.
Fase 0 — Fundament & setup
Doel: een werkend, deploybaar skelet met auth, database en design system.
0 van 10 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 0.1 | Next.js project opzetten | App Router, TypeScript, ESLint, Prettier, absolute imports. | 🔴 | — | |
| 0.2 | Git & branchstrategie | main (productie) + feature branches, PR-flow, conventionele commits. | 🔴 | 0.1 | |
| 0.3 | Vercel koppelen | Repo aan Vercel hangen, preview-deployments per PR, env vars. | 🔴 | 0.1 | |
| 0.4 | Supabase project | Project + regio kiezen, env keys, lokale CLI + migrations-flow. | 🔴 | 0.1 | |
| 0.5 | Design system fundament | Tailwind + tokens (kleur, typografie, spacing, radius, shadow), dark/light. | 🔴 | 0.1 | |
| 0.6 | UI-componentbasis | Button, Input, Card, Dialog, Toast, Table, Dropdown (Apple-stijl, toegankelijk). | 🔴 | 0.5 | |
| 0.7 | App-shell & navigatie | Sidebar + topbar layout, command palette (⌘K), responsive. | 🔴 | 0.6 | |
| 0.8 | Authenticatie | Supabase Auth (e-mail + SSO later), login/logout, protected routes. | 🔴 | 0.4 | |
| 0.9 | Rollen & rechten (RBAC) | Rollen: admin, planner, flexkracht, opdrachtgever. RLS-policies in Postgres. | 🔴 | 0.8 | |
| 0.10 | CI/CD & kwaliteit | Lint + typecheck + tests in CI, preview checks groen vóór merge. | 🟡 | 0.3 |
Fase 1 — Centraal dashboard (MVP) ⭐
Doel: het overzichtsscherm dat je elke ochtend opent. Dit is je MVP-focus.
0 van 8 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 1.1 | Datamodel v1 | Kern-entiteiten: organisatie, gebruiker, klant, opdracht, project, flexkracht. | 🔴 | 0.9 | |
| 1.2 | Dashboard-layout | Hero met kerncijfers (KPI-tiles), Apple-card grid, rustige hiërarchie. | 🔴 | 0.7 | |
| 1.3 | KPI-tiles | Actieve projecten, openstaande opdrachten, beschikbare flexkrachten, omzet-indicatie. | 🔴 | 1.1 | |
| 1.4 | Activiteiten-feed | Realtime stroom van wat er gebeurt (nieuwe plaatsing, uren ingediend, etc.). | 🟡 | 1.1 | |
| 1.5 | Snelacties | "Nieuwe opdracht", "Flexkracht toevoegen", "Uren goedkeuren" vanaf dashboard. | 🟡 | 1.2 | |
| 1.6 | Globale zoek (⌘K) | Zoek door mensen, opdrachten, projecten, klanten. | 🟡 | 0.7 | |
| 1.7 | Lege & laad-staten | Verzorgde empty states, skeletons, foutafhandeling (Apple-finish). | 🟡 | 1.2 | |
| 1.8 | Rol-specifieke dashboards | Planner ziet planning, flexkracht ziet eigen inzet, klant ziet eigen projecten. | 🟡 | 1.2, 0.9 |
Fase 2 — Mensen & resources
Doel: het volledige register van flexkrachten, medewerkers en hun profielen.
0 van 6 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 2.1 | Personenregister | CRUD voor flexkrachten/medewerkers met profielpagina. | 🔴 | 1.1 | |
| 2.2 | Skills & competenties | Tags/skills, niveaus, certificeringen, zoek/filter op skill. | 🔴 | 2.1 | |
| 2.3 | Beschikbaarheid | Beschikbaarheidskalender per persoon (dagen/uren, voorkeuren). | 🔴 | 2.1 | |
| 2.4 | Documenten & bestanden | ID, certificaten, contracten via Supabase Storage, met vervaldatums. | 🟡 | 2.1 | |
| 2.5 | Tarieven & kosten | Inkooptarief, verkooptarief, marge per persoon/rol. | 🟡 | 2.1 | |
| 2.6 | Statusbeheer | Beschikbaar / ingezet / niet beschikbaar / uit dienst. | 🟡 | 2.1 |
Fase 3 — Klanten, opdrachten & projecten
Doel: de vraagkant — wie heeft welke flex-capaciteit nodig.
0 van 11 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 3.1 | Klanten/CRM-light | Klantregister met contactpersonen, locaties, voorwaarden. | 🔴 | 1.1 | |
| 3.2 | Opdrachten | Aanvraag van een klant: rol, aantal, periode, locatie, tarief. | 🔴 | 3.1, 2.2 | |
| 3.3 | Projecten | Bundeling van opdrachten/inzet onder een klantproject met fases. | 🟡 | 3.2 | |
| 3.4 | Opdracht-lifecycle | Statussen: concept → open → ingevuld → afgerond → gefactureerd. | 🔴 | 3.2 | |
| 3.5 | Pijplijn-/kanban-weergave | Visuele pijplijn van opdrachten (Apple-kaarten, drag & drop). | 🟢 | 3.4 | |
| 3.6 | Bedrijven | Centrale lijst met bedrijven; projecten verwijzen ernaar in plaats van de naam over te typen. | 🔴 | 3.1 | |
| 3.7 | Contactpersonen | Personen die aan een bedrijf hangen, te kiezen vanuit een project. | 🔴 | 3.6 | |
| 3.8 | Lead als eerste fase | Een lead is een project in fase Lead — geen losse bak ernaast, zodat dezelfde kans niet twee keer bestaat. | 🟡 | 3.6 | |
| 3.9 | Sales/PM-filter | Eén projectenbord, met een filter voor het commerciële traject of de uitvoering. | 🟡 | 3.5 | |
| 3.10 | Beïnvloeder | De partij die ons in contact bracht (architect, makelaar), gekoppeld aan hetzelfde CRM. | 🟡 | 3.6 | |
| 3.11 | Gewogen pijplijn | Projectomvang × slagingskans als prognose per fase. | 🟢 | 3.9 |
Fase 4 — Matching & planning
Doel: het hart van de efficiëntie — de juiste persoon snel aan de juiste opdracht.
0 van 5 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 4.1 | Matching-engine v1 | Stel kandidaten voor op basis van skills + beschikbaarheid + locatie. | 🔴 | 2.2, 2.3, 3.2 | |
| 4.2 | Plaatsing/booking | Persoon koppelen aan opdracht voor een periode; conflictdetectie. | 🔴 | 4.1 | |
| 4.3 | Planningskalender | Resource-kalender (wie waar wanneer), week/maand, drag & drop. | 🔴 | 4.2 | |
| 4.4 | Beschikbaarheids-conflicten | Waarschuw bij dubbele boekingen of overschrijding. | 🟡 | 4.2 | |
| 4.5 | Matching-score & suggesties | Slimme ranking + uitlegbare match-redenen. | 🟢 | 4.1 |
Fase 5 — Urenregistratie & goedkeuring
Doel: betrouwbare uren als basis voor facturatie en uitbetaling.
0 van 5 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 5.1 | Uren invoeren | Flexkracht voert uren in per plaatsing (web + mobiel-vriendelijk). | 🔴 | 4.2 | |
| 5.2 | Goedkeuringsflow | Klant/planner keurt uren goed of af, met reden. | 🔴 | 5.1 | |
| 5.3 | Timesheets-overzicht | Per persoon/opdracht/week, export. | 🟡 | 5.1 | |
| 5.4 | Toeslagen & regels | Overuren, weekend, reiskosten, pauzes. | 🟡 | 5.1 | |
| 5.5 | Herinneringen | Automatische reminders voor ontbrekende/niet-goedgekeurde uren. | 🟡 | 5.2 |
Fase 6 — Facturatie & financiën
Doel: van goedgekeurde uren naar factuur, automatisch.
0 van 5 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 6.1 | Factuurgeneratie | Genereer concept-facturen uit goedgekeurde uren + tarieven. | 🔴 | 5.2, 2.5 | |
| 6.2 | Factuuroverzicht | Status: concept → verstuurd → betaald → te laat. | 🔴 | 6.1 | |
| 6.3 | PDF & verzending | Nette PDF-facturen, e-mailverzending. | 🟡 | 6.1 | |
| 6.4 | Boekhoud-integratie | Koppeling met bijv. Moneybird/Exact/Twinfield. | 🟢 | 6.2 | |
| 6.5 | Marge- & omzetinzicht | Per opdracht/klant/persoon, voeden van dashboard-KPI's. | 🟡 | 6.1 |
Fase 7 — Onboarding, contracten & compliance
Doel: nieuwe flexkrachten en klanten foutloos en compliant aan boord.
0 van 4 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 7.1 | Onboarding-wizard | Stapsgewijze intake voor nieuwe flexkracht (gegevens, documenten). | 🔴 | 2.1 | |
| 7.2 | Contractbeheer | Genereren/ondertekenen van contracten, versies, e-signing. | 🟡 | 7.1 | |
| 7.3 | Compliance-checks | Verplichte documenten, vervaldatums, ID-/VOG-controle, signalen. | 🟡 | 2.4 | |
| 7.4 | Klant-onboarding | Voorwaarden, tarieven, contactpersonen vastleggen. | 🟢 | 3.1 |
Fase 8 — Automatisering & workflows
Doel: processen die zichzelf vooruit duwen. Dit is waar "maximale efficiëntie" zit.
0 van 5 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 8.1 | Notificatiesysteem | In-app + e-mail meldingen op kerngebeurtenissen. | 🔴 | 1.4 | |
| 8.2 | Geautomatiseerde statusovergangen | Bijv. opdracht "ingevuld" zodra plaatsing rond is. | 🟡 | 3.4, 4.2 | |
| 8.3 | Geplande taken (cron) | Supabase Edge Functions/cron voor reminders, facturatie-runs. | 🟡 | 0.4 | |
| 8.4 | Workflow-regels | Configureerbare "als X dan Y"-regels zonder code. | 🟢 | 8.1 | |
| 8.5 | Externe integraties | E-mail, agenda, communicatie (Teams/Slack), API-webhooks. | 🟢 | 8.1 |
Fase 9 — Rapportage & analytics
Doel: sturen op cijfers, niet op gevoel.
0 van 4 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 9.1 | Rapportagepagina | Bezettingsgraad, omzet, marge, openstaande opdrachten. | 🟡 | 6.5 | |
| 9.2 | Grafieken | Trends over tijd (Apple-stijl charts, rustig en leesbaar). | 🟡 | 9.1 | |
| 9.3 | Custom reports | Eigen rapporten samenstellen en opslaan (zoals in je screenshot). | 🟢 | 9.1 | |
| 9.4 | Export & delen | CSV/PDF export, deelbare links. | 🟢 | 9.1 |
Fase 10 — Polish, performance & schaal
Doel: van "werkt" naar "voelt premium en houdt stand".
0 van 6 stappen klaar
| ID | Stap | Beschrijving | Prio | Afh. | Status |
|---|---|---|---|---|---|
| 10.1 | Micro-interacties | Vloeiende transities, haptische timing, motion polish. | 🟡 | div. | |
| 10.2 | Performance | Caching, code-splitting, snelle laadtijden, Lighthouse-score. | 🟡 | div. | |
| 10.3 | Toegankelijkheid | WCAG, toetsenbordnavigatie, contrast, screenreaders. | 🟡 | 0.6 | |
| 10.4 | Audittrail & logging | Wie deed wat wanneer; foutmonitoring (observability). | 🟡 | 0.9 | |
| 10.5 | Tests & stabiliteit | Unit + e2e tests op kritieke flows. | 🟡 | div. | |
| 10.6 | Mobiele PWA | Installeerbaar, offline-vriendelijk voor flexkrachten onderweg. | 🟢 | div. |
3. Aanbevolen volgorde (de eerste 10 stappen)
Wil je direct beginnen, doe dan in deze volgorde:
- 0.1 Next.js project opzetten
- 0.4 Supabase project + 0.3 Vercel koppelen
- 0.5 → 0.6 → 0.7 Design system + componenten + app-shell
- 0.8 → 0.9 Auth + rollen
- 1.1 Datamodel v1
- 1.2 → 1.3 Dashboard-layout + KPI-tiles
- 2.1 Personenregister
- 3.1 → 3.2 Klanten + opdrachten
- 4.1 → 4.2 Matching + plaatsing
- 5.1 → 6.1 Uren + eerste facturatie
Daarna automatisering (fase 8) en rapportage (fase 9) om de efficiëntiewinst te verzilveren.
4. Designrichtlijnen (Apple / "super UI")
- Rust & ruimte: veel witruimte, één duidelijke primaire actie per scherm.
- Typografie: strakke hiërarchie, system font stack (SF-achtig), beperkt aantal groottes.
- Diepte met mate: zachte schaduwen, subtiele randen, geen zware kaders.
- Kleur: neutraal canvas + één accentkleur; status via subtiele tinten (groen zoals in je dashboard).
- Beweging: korte, natuurlijke transities; nooit afleidend.
- Consistentie: alles uit hetzelfde component- en tokensysteem (fase 0.5/0.6).
Laatste update: 2026-06-24 · Werk de Status-kolommen bij naarmate je vordert.