Waarom we onze urenregistratie opnieuw hebben uitgevonden

Als communicatiebureau verkopen we bij For the Dream geen dozen, maar expertise, skills en tijd. Net daarom botsten we op een herkenbaar probleem: hoe registreer en declareer je prestaties op een eenvoudige, overzichtelijke manier, zonder meteen vast te zitten aan een zwaar softwaresysteem?

Er bestaan natuurlijk genoeg tools. ClickUp, Monday, Teamleader en noem maar op. Alleen merkten we dat zulke platformen je vaak meenemen in een veel groter pakket dan je eigenlijk nodig hebt. Voor een basisfunctie zoals urenregistratie betaal je al snel mee voor workflows, CRM-modules, projectlagen en features die weinig te maken hebben met wat je op dat moment gewoon wil doen: correct bijhouden wat je hebt gepresteerd, en dat helder kunnen doorrekenen.

Zo gebruikten we zelf al drie jaar lang ClickUp, waarvoor we jaarlijks rond de €700 afrekenden. Het ironische van deze doorlopende kostenpost was dat we eigenlijk al intensief gebruikmaakten van Google Workspace. En laten we eerlijk zijn: met Google Workspace heb je in de basis al een extreem robuuste projectmanagement tool in handen. Tussen Docs, Google Tasks, Agenda en Mail heb je vrijwel alles wat je nodig hebt om een project succesvol van A tot Z te sturen. Zeker nu Google hun omgeving in rap tempo blijft doorontwikkelen, zoals met de recente Workspace drops en de krachtige integratie van AI in hun zakelijke tools.

Er miste binnen Google Workspace maar één cruciaal element voor ons bedrijfsmodel: een simpele, feilloze timetracker.

Waarom honderden euro's betalen voor de overtollige features van logge projectmanagement-platformen, als we uitsluitend een snelle urenregistratie-schakel nodig hadden ter aanvulling op Google Workspace? Als innovatief team doen we dan wat we het liefste doen: we bouwen die ontbrekende schakel zélf.

In deze blogpost neem ik je mee in de architectuur, de techstack en de development keuzes achter Dream Moments: onze eigen bliksemsnelle, hybride desktop- en web-applicatie die dit gat in onze workflow perfect (en zonder onnodige overhead) opvult.

---

Bij het ontwerpen van Dream Moments keken we kritisch naar de pijnpunten die we dagelijks ervaarden met bestaande tools. Het resultaat is geen verzameling losse functies, maar een vloeiende workflow die precies doet wat een modern bureau nodig heeft.

De uitdaging in de praktijk Als bureau werk je vaak voor, of onder, verschillende handelsnamen en entiteiten. In de meeste tools betekent dit eindeloos wisselen of onoverzichtelijke facturatiestromen.

De technische oplossing In Dream Moments beheer je alles vanuit één account:

• Gefragmenteerd beheer: manage meerdere merken, BV's of handelsnamen moeiteloos onder één centraal dak.
• Boekhoudkundige scheiding: projecten, urenstaten en facturatiegegevens blijven onder de motorkap strikt gescheiden per merkentiteit.

De uitdaging in de praktijk Tijdregistratie voelt vaak als een administratieve last en de grootste hindernis is discipline. Het wordt vaak vergeten omdat de timer ergens verborgen zit.

De technische oplossing Onze slimme timer verlaagt de drempel tot nul:

• Live background timer: start de timer en sluit gerust je browser of pc. De starttijd wordt in de cloud opgeslagen en berekent bij heropening direct de exacte verstreken tijd.
• Offline synchronisatie: werk je even zonder internet? De app registreert je uren lokaal en synchroniseert automatisch met de cloud zodra de verbinding hersteld is.
• Automatische fallback: klok je gehaast uit zonder project te selecteren? Het systeem maakt volautomatisch een persoonlijk merk en individuele taak aan, zodat er nooit een declareerbare minuut verloren gaat.

De uitdaging in de praktijk Je wilt niet dat urenregistratie verborgen zit tussen 50 openstaande browsertabbladen of dat een zware web-app je batterij leegzuigt.

De technische oplossing We hebben de software verpakt in een native, extreem lichte desktop-app (slechts 10MB groot):

• Systeembalk (menu bar) integratie: de app draait direct in je menubalk of systeembalk met een live weergave van de tikkende timer (bijv. 00:04:12) en directe start/stop-knoppen.
• Zwevende HUD widget: een picture-in-picture widget die transparant en randloos bovenop al je actieve vensters zweeft, zodat je altijd zicht hebt op je tijd.

De uitdaging in de praktijk Een tool is pas succesvol als het team er graag mee werkt, precies weet wat de prioriteiten zijn, en de voortgang voor iedereen glashelder is.

De technische oplossing We focussen op overzicht en heldere delegatie:

• Multi-assignee taken: wijs cruciale taken met één klik toe aan meerdere teamleden tegelijk.
• Projectstatus tracking: volg de voortgang van projecten en taken op de voet via overzichtelijke statussen zoals in progress, queued, of pending.

De uitdaging in de praktijk Als projectmanager wil je live zien wie waaraan werkt en onder geen beding meemaken dat urenregistraties van collega's elkaar overschrijven of dat je de pagina handmatig moet vernieuwen.

De technische oplossing Via WebSockets communiceren we in realtime, direct in de context van het project:

• Teamfeed & chat: gebruik de live groepschat binnen projecten voor snelle afstemming.
• Taakreacties & @mentions: reageer op specifieke taken en vermeld collega's met een @Naam om direct een in-app notificatie te sturen.
• Centraal team overzicht: beheer al je teamleden en hun specifieke toegangsniveaus (gesplitst per merk en project) vanuit één helder dashboard.

De uitdaging in de praktijk Handmatig uren invullen en vakantiedagen invoeren in tabellen is een administratieve rompslomp. Medewerkers willen niet door ingewikkelde formulieren klikken, maar simpelweg kunnen typen wat ze hebben gedaan of willen plannen.

De technische oplossing We hebben Gemini 2.5 Flash geïntegreerd via een slimme chat-endpoint. Door middel van tool-calling begrijpt de AI de intentie van de gebruiker:

• Directe acties: typ "plan vakantie in van 10 tot 15 juli" of "start timer voor vergadering" en de AI-assistent voegt dit rechtstreeks toe aan de database.
• Verduidelijking vragen: als er essentiële details ontbreken, vraagt de AI-assistent intelligent door om de invoer compleet te maken.

De uitdaging in de praktijk Als je vakantie of recup-uren inplant in je urenregistratietool, wil je niet handmatig je Google-agenda moeten bijwerken om dubbele boekingen te voorkomen. Deze dubbele administratie kost tijd en is foutgevoelig.

De technische oplossing Een automatische synchronisatie met de Google Calendar API:

• Agenda-synchronisatie: elke goedgekeurde verlofaanvraag wordt direct als een dag-event in de Google Agenda van de gebruiker geplaatst.
• Automatische updates: wordt een verlofaanvraag verwijderd of gewijzigd? De app update of verwijdert de afspraak automatisch op de achtergrond.

De uitdaging in de praktijk Aan het eind van de maand wil je exact weten waar de tijd (en dus het budget) naartoe is gegaan om een correcte factuur te kunnen sturen.

De technische oplossing Kraakheldere inzichten met één druk op de knop:

• Analytische dashboards: visuele grafieken en statistieken tonen in één oogopslag waar de meeste tijd naartoe is gegaan.
• CSV & Google Sheets export: exporteer geselecteerde urenstaten direct naar CSV of synchroniseer ze rechtstreeks met Google Sheets voor de facturatie.

De uitdaging in de praktijk Wanneer je bedrijf groeit, verwacht je dat systeemmails direct aankomen en dat de veiligheid van je bedrijfsgegevens voldoet aan de strengste zakelijke eisen.

De technische oplossing Dit alles is gebouwd op een ijzersterk, veilig fundament:

• Beheerdersimpersonatie (impersonation): admins kunnen volledig beveiligd tijdelijk inloggen als een andere gebruiker om support te bieden of instellingen te verifiëren.
• GDPR-compliant & EU-gehost: alle data is afgeschermd met strikte row level security (RLS) en wordt gehost binnen de Europese Unie (Frankfurt).

---

We wilden geen simpele webapp bouwen die in een van je 50 open tabbladen verdwijnt. We wilden een tool die aanvoelt als een robuust verlengstuk van je besturingssysteem, maar met de ontwikkel-snelheid en flexibiliteit van het web.

De uitdaging in de praktijk Een drukbezette professional switcht gedurende de dag tientallen keren tussen projecten, urenstaten en rapportages. Niets is zo frustrerend als een trage webpagina waarbij je bij elke klik moet wachten op een wit scherm dat opnieuw moet inladen.

De technische oplossing Next.js zorgt ervoor dat onze landingspagina’s direct klaarstaan via server-side rendering, wat tevens zorgt voor een uitstekende vindbaarheid in Google. Zodra je inlogt, neemt React het over en transformeert de tool in een Single Page Application. Dit betekent dat alle navigatie binnen het dashboard (zoals het bekijken van rapporten of wisselen van merk) direct in de browser gebeurt. Geen laadtijden of pagina-vernieuwingen; je ervaart een vloeiende, razendsnelle workflow die aanvoelt als een volwaardige applicatie.

De uitdaging in de praktijk De grootste hindernis bij urenregistratie is discipline. Het wordt vaak vergeten omdat de applicatie ergens verborgen zit tussen 50 openstaande browsertabbladen. Daarbij wil je absoluut niet dat zo'n tool onnodig veel batterij of werkgeheugen verbruikt.

De technische oplossing We hebben de software verpakt als een native desktop-applicatie voor Mac en Windows met behulp van Tauri. In tegenstelling tot zware browseromgevingen (zoals Electron) gebruikt Tauri de ingebouwde engine van je besturingssysteem. Het resultaat? Een extreem lichte applicatie (slechts 10MB groot) die nauwelijks processorkracht verbruikt. Hierdoor konden we een live-tikkende timer bouwen die direct in de macOS-menubalk of Windows-systeembalk draait. Via onze transparante, zwevende Picture-in-Picture widget heb je de klok bovendien altijd in het zicht en start of stop je een taak met één muisklik—zonder je workflow te onderbreken.

De uitdaging in de praktijk In een agency werken teams continu samen aan dezelfde projecten. Als projectmanager wil je live zien wie waaraan werkt en direct feedback kunnen geven. Je wilt onder geen beding dat urenregistraties van collega’s elkaar overschrijven, of dat je de pagina handmatig moet vernieuwen om de nieuwste chatberichten te zien.

De technische oplossing Onder de motorkap draait PostgreSQL: een uiterst robuuste en relationele database die garandeert dat uren, taken, projecten en merken altijd foutloos aan elkaar gekoppeld blijven. Supabase voegt hier een krachtige, realtime WebSocket-laag aan toe. Start een teamlid de timer of plaatst iemand een opmerking met een @mention? Dan pusht de server deze wijziging binnen enkele milliseconden naar de schermen van het volledige team. Dit voorkomt synchronisatieconflicten en maakt de ingebouwde communicatie direct en uiterst betrouwbaar.

De uitdaging in de praktijk Je werkt niet alleen op kantoor, maar ook onderweg in de trein of op locaties met een slechte wifi-verbinding. Valt het internet weg? Dan mag je timer absoluut niet stoppen en mag er geen geregistreerde tijd verloren gaan. De interface moet bovendien altijd direct reageren, ongeacht de serververbinding.

De technische oplossing We gebruiken Zustand om de status van de app lokaal op je computer te beheren, in combinatie met IndexedDB voor robuuste lokale opslag. Hierdoor laadt de app razendsnel in met de laatst bekende gegevens, zélfs als je offline bent. Wanneer je de timer start of stopt, voert de interface deze actie direct uit (een optimistic update). Mocht je offline werken, dan worden je uren veilig lokaal bewaard. Zodra je computer weer internettoegang heeft, synchroniseert Supabase deze data geruisloos met de cloud. Je uren zijn altijd veilig.

De uitdaging in de praktijk Wanneer je bedrijf groeit, wil je flexibel nieuwe teamleden kunnen toevoegen en verwacht je elke maand een foutloze, correcte btw-factuur voor je boekhouder. Daarnaast moeten systeemmails—zoals een uitnodiging voor een nieuw teamlid of een wachtwoordherstel—onmiddellijk aankomen en niet in een spamfolder verdwijnen.

De technische oplossing Stripe neemt de volledige abonnementsadministratie uit handen. Besluit je op te schalen van drie naar vijf teamleden? Dan berekent Stripe direct het correcte pro-rata tarief en genereert het automatisch officiële pdf-facturen die voldoen aan de Europese btw-wetgeving. Voor de e-mailcommunicatie vertrouwen we op Resend. Deze provider garandeert een extreem hoge afleverratio, zodat cruciale mails binnen enkele seconden in je inbox belanden. Dit zorgt direct voor een professionele en betrouwbare eerste indruk bij nieuwe collega's.

De uitdaging in de praktijk Professionals willen geen ingewikkelde formulieren invullen om een taak te maken of hun uren te registreren. Ze willen simpelweg typen: "Start een timer voor de vergadering" of "Ik ben nu bezig met Lumos Tech" en verwachten dat het systeem de rest doet.

De technische oplossing De backend gebruikt de Google Generative AI SDK met het Gemini 2.5 Flash model via de route /api/v1/ai/chat. De AI is uitgerust met Tool Calling (Function Calling). Dit betekent dat de AI de intentie van de gebruiker begrijpt en een database-actie kan aanvragen via specifieke functies:

• get_status: haalt uren en het verlofsaldo live op.
• start_timer & stop_timer: start of stopt urenregistraties rechtstreeks in de database.
• create_task: maakt een taak aan en voegt de gebruiker toe aan de assignees.
• plan_leave: boekt direct verlof in.

Daarnaast is Gemini 2.5 Flash uiterst kostenefficiënt: een chatgesprek van 5 berichten kost gemiddeld ca. $0,00015, wat neerkomt op slechts ca. $0,30 per maand voor 100 actieve gebruikers.

De uitdaging in de praktijk Werknemers willen gemakkelijk verlofdagen, halve dagen of recup-uren inplannen via een kalender. Tevens willen ze dat hun verlofdagen automatisch in hun persoonlijke Google Agenda worden geplaatst om dubbele boekingen te voorkomen.

De technische oplossing Zodra een verlofaanvraag wordt goedgekeurd of ingevoerd, gebruikt de API de Google OAuth-tokens uit de user_integrations tabel om automatisch een dag-event aan te maken in de Google Agenda van de werknemer. Als het verlof wordt verwijderd, wordt de agenda-afspraak op de achtergrond weer gewist. Mocht de database of externe integratie even niet bereikbaar zijn, dan reageert de API met een signaal (fallback: true) waarna de uren en het verlofsaldo volledig lokaal via IndexedDB worden bijgehouden.

---

De belangrijkste eis was snelheid. Een timer starten moet instant gebeuren, zonder te wachten op laadspinners. We bereikten deze ultieme UX door drie cruciale architecturale keuzes:

Wanneer de app opstart, wachten we niet op een reeks losse API-calls (haal user, haal projecten, haal taken, etc.). We gebruiken een /api/v1/bootstrap route die in één geaggregeerde PostgreSQL-query alle benodigde data in één JSON-payload terugstuurt.

Nog belangrijker: de volledige Zustand store wordt lokaal gecached in IndexedDB. Bij het openen van de app laadt de UI direct de lokale state in. Je kunt direct aan de slag; het ophalen van nieuwe data vanaf de server gebeurt onzichtbaar op de achtergrond.

Als een gebruiker een taak aanmaakt of een timer start, wachten we de database niet af. Zustand updatet de lokale interface onmiddellijk met tijdelijke ID's (bijv. temp-task-uuid). Op de achtergrond vuurt het HTTP-verzoek af.

• Succes? Zustand vervangt geruisloos de tijdelijke ID voor de echte database-ID.
• Faalt het (bijv. offline)? Dan rollen we de lokale state onzichtbaar terug. Het resultaat is een interface die geen milliseconde hapert.

We maken gebruik van Supabase's Change Data Capture via WebSockets. Verandert een collega de omschrijving van een taak of de status van een project? Dan wordt die mutatie direct vanuit de PostgreSQL database naar de aangesloten clients gepusht. Geen polling of page refreshes nodig.

---

De keuze voor Tauri v2 (boven Electron) was een no-brainer voor naadloze integratie met het besturingssysteem. Door Tauri v2 (met Rust als backend) in te zetten om onze Next.js app te wrappen, kregen we toegang tot low-level OS features, resulterend in een echte native feel:

• De menubalk (tray) integratie: onze React TimerContext tikt elke seconde en roept via de IPC-bridge een custom Rust command aan (update_tray_title). Rust past direct de menubalk aan. Zo zie je altijd 00:04:12 in je macOS menubalk staan, en kun je de timer direct vanuit de tray bedienen.
• Window close hijacking: klik je op de rode sluitknop van het venster? In plaats van de app te killen, onderschept de Rust backend dit event (WindowEvent::CloseRequested), voorkomt dat het proces sluit (api.prevent_close()), en verbergt simpelweg het venster. De timer blijft veilig doortikken op de achtergrond.
• De zwevende picture-in-picture widget: we bouwden een specifieke /widget route. In Tauri is dit geconfigureerd als een transparant, randloos venster met alwaysOnTop: true. Omdat dit kleine venster dezelfde Zustand (IndexedDB) store deelt als de hoofdapp, lopen timer en acties overal perfect synchroon.

---

Snelheid en UX zijn prachtig, maar zonder data-integriteit heb je niets aan een timetracker.

Een klassiek probleem met timetrackers: je start in een haast een timer, stopt hem later, maar je was vergeten een project of merk te selecteren. Vaak gaat die data verloren door een database-error. Wij losten dit op de backend op: ontvangt de API een payload zónder geselecteerd merk of project? Dan crasht hij niet. Er wordt volautomatisch een 'Persoonlijk merk' en een 'Individueel project' aangemaakt, gebaseerd op je gebruikersnaam. Zo gaat er nooit één gewerkte seconde verloren.

Security wordt niet overgelaten aan de grillen van API-code, maar wordt afgedwongen direct op databaseniveau. Onze multi-tenant architectuur maakt gebruik van Supabase RLS (Row Level Security). Via SQL-policies wordt ervoor gezorgd dat gebruikers fysiek nooit records kunnen inzien of wijzigen die niet bij hun brands of projects horen, zelfs niet als iemand via de commandline de database probeert te bevragen.

Als admin wil je gebruikers soms direct kunnen helpen door mee te kijken in hun omgeving. In plaats van in elke API-route een "if admin then..." check in te bouwen, hebben we dit gecentraliseerd met een interceptor: Zodra een admin een gebruiker wil impersoneren, overschrijft de globale AuthProvider de window.fetch. Elk uitgaand verzoek krijgt automatisch de header x-impersonate-user: <id>. Onze Next.js middleware vangt dit op, controleert of de verzoeker daadwerkelijk admin-rechten heeft, en voert de database-query's uit onder de gemaskeerde identiteit. Transparant en extreem veilig.

---

De AI-assistent "Dream" draait via een beveiligde lus op de server:

De server fungeert hierbij als een veilige barrière: de AI praat met de server, en de server valideert de intentie en voert de database-acties uit met de RLS-rechten van de ingelogde gebruiker. Dit voorkomt dat de AI rechtstreeks en onbeperkt in de database kan schrijven.

---

De database is ontworpen rondom een multi-tenant structuur waarbij merken de primaire schillen vormen.

• profiles: gebruikersprofielen gekoppeld aan Supabase Auth. Slaat instellingen op zoals de voorkeurstaal en het verlofsaldo (annual_leave_days).
• brands: merkentiteiten. Een merk heeft een eigenaar (owner_id) en kan medewerkers hebben via brand_collaborators.
• brand_collaborators: koppeltabel voor medewerkers en hun specifieke rollen binnen een merk.
• projects: projecten gekoppeld aan een merk. Projecten kunnen de vlag is_projectwerk hebben om een specifiek type registratie aan te duiden.
• tasks: taken gekoppeld aan een project. Bevat een array assignees UUID[] om taken aan meerdere personen tegelijk toe te kunnen wijzen.
• time_entries: de daadwerkelijke urenregistraties (start, stop, omschrijving en statussen).
• leave_requests: slaat verlofaanvragen op met kolommen zoals user_id (UUID), start_date (date), end_date (date), half_day (boolean), half_day_period (morning/afternoon), deducted_days (numeric), leave_type (full/half/recup), recup_hours (numeric), status (pending/approved/rejected), en google_event_id (text).
• user_integrations: slaat credentials en OAuth tokens op voor externe systemen (zoals google_calendar).

---

Is het verstandig om zélf een tool te bouwen ter vervanging van een SaaS-abonnement van €700 per jaar? Voor de meeste bedrijven is off-the-shelf software de beste keuze.

Maar als innovatief communicatiebureau gaf het ons de kans om een tool te ontwikkelen die 100% is afgestemd op onze processen, zonder enige compromis op het gebied van UX of performance. De combinatie van Next.js voor razendsnelle UI-ontwikkeling, Tauri & Rust voor native performance en Supabase voor realtime cloud sync bewijst wat ons betreft de gouden standaard voor moderne app development anno 2026.

We hebben eindelijk de timetracker die we altijd al wilden hebben.

Zelf de switch gemaakt van een betaalde SaaS naar een in-house oplossing? Ik hoor graag jullie ervaringen in de reacties!