02 — Werkwijze en schermen

## Bedrijf en personen Noord Onderhoud is uitsluitend een fictieve werknaam voor dit demonstratieproject; geen klantreferentie. Medewerkers: Sam (algemeen onderhoud), Noor (installaties), Alex (service). De labels geven herkenning, geen certificering of beroepsbevoegdheid. Klantnamen en situaties hieronder zijn verzonnen. Gebruik adressen [email protected] t/m [email protected]. Geen echte adressen, telefoonnummers of foto's van klanten. ## Acht seedaanvragen SO-1001 | Demo Bakkerij Haven | 'De deur naar de voorraadruimte sluit stroef. Graag nakijken.' | Nieuw | niet toegewezen | voorkeursdatum +3 dagen SO-1002 | Demo Kantoor West | 'Een plafondplaat zit los in de vergaderruimte.' | Nieuw | niet toegewezen | geen voorkeur SO-1003 | Demo Winkel Esdoorn | 'Het scharnier van een kastdeur moet worden gesteld.' | Ingepland | Sam | gepland vandaag SO-1004 | Demo Studio Linde | 'De kraan in de kitchenette drupt na het dichtdraaien.' | In uitvoering | Noor | gepland vandaag SO-1005 | Demo Fietsenzaak Brug | 'Een plank in de opslag moet opnieuw worden bevestigd.' | Ingepland | Alex | gepland morgen SO-1006 | Demo Praktijk Duin | 'Het slot van de archiefkast loopt stroef.' | Ingepland | Sam | gepland gisteren (bewust verlopen) SO-1007 | Demo Atelier Morgen | 'Het deurhandvat van het magazijn zit los.' | Afgerond | Alex | gepland -2 dagen SO-1008 | Demo Lunchroom Park | 'De ladegeleider van een kast hapert.' | Afgerond | Noor | gepland -3 dagen ## Aanmaak en weergave Bereken relatieve datums bij het seeden op basis van de Nederlandse kalenderdag. Voeg logische fictieve aanmaakmomenten toe, eerder dan geplande afronding. Maak voor reeds ingeplande/uitgevoerde klussen een minimale consistente seedhistorie; presenteer die uitdrukkelijk als voorbeeldhistorie. Twee korte voorbeeldnotities: 'Ingang aan de zijkant gebruiken — fictieve instructie.' en 'Materiaal gecontroleerd — voorbeeldnotitie.' Nooit veiligheidsadviezen of echte klantinformatie toevoegen. Nieuwe nummers volgen na SO-1008 binnen de sessie. Dezelfde nummers mogen in een andere sessie voorkomen. Terugzetten levert dezelfde acht scenarios op met datums ten opzichte van de resetdag. ## Hoofdscenario voor demonstratie Open de demo → maak een nieuwe fictieve aanvraag → open die in Planning → kies Sam en morgen → sla op als Ingepland → open Mijn werk voor Sam → toon Alle open klussen → start uitvoering → voeg een notitie toe → rond af → vind de klus via filter Afgerond. Extra korte routes: verlopen klus herkennen; planning ongedaan maken; afgeronde klus heropenen; demo terugzetten. De app stuurt geen berichten en boekt geen echte afspraak. Dit is tijdens het proberen steeds zichtbaar.

## Toegang en betekenis van rollen De publieke demo start met 'Probeer de demo' en maakt een eigen oefenomgeving aan. Bovenin staat: 'Interactieve demo • fictieve gegevens'. Binnen deze omgeving zijn Klantaanvraag, Planning en Mijn werk bereikbaar. Dit zijn gezichtspunten in een demo, geen productie-rollen met echte autorisatie. De formulierweergave laat geen interne notities zien. Een echte klantomgeving en accountrechten zijn vervolgwerk. ## 1. Landing Titel: 'Van klantaanvraag naar ingeplande klus.' Tekst: 'Ontvang aanvragen, verdeel het werk en houd de voortgang bij. Probeer het met een fictief onderhoudsbedrijf.' Primaire knop: 'Probeer de demo'. Secundair: 'Bekijk hoe dit is gebouwd', pas koppelen zodra een verifieerbare openbare project-URL beschikbaar is. Een rustig productbeeld mag later uitsluitend uit de werkende app komen; de projectcovers zijn illustraties. ## 2. Nieuwe aanvraag Velden: naam (verplicht), e-mailadres (verplicht), omschrijving (verplicht), voorkeursdatum (optioneel). Gebruik vooraf ingevulde fictieve voorbeelden die de bezoeker mag wijzigen. Geen telefoonnummer of volledig adres nodig voor deze demo. Zichtbare tekst: 'Gebruik alleen verzonnen gegevens. Er wordt geen bericht verstuurd.' Succes: aanvraagnummer en 'Je demo-aanvraag staat in het overzicht.' Daarna knop 'Bekijk in de planning'. Bij fout: Nederlandse fouttekst bij het veld én behoud van invoer. Voorkeursdatum heet nooit afspraakdatum. ## 3. Planning Tellingen per status; lijst met nummer, klant, korte omschrijving, medewerker, geplande datum en status. Zoek op nummer, naam en omschrijving; filter op status, medewerker en plandatum; knop om filters te wissen. Open werk eerst: verlopen geplande datum, vervolgens eerstvolgende geplande datum, daarna ongepland op ouderdom. Afgerond is via filter zichtbaar, maar verdringt open werk niet. Geen drukke kalender of drag-and-drop nodig. Lege toestand geeft een passende vervolgstap. ## 4. Aanvraagdetail Klantvelden, voorkeursdatum, geplande datum, medewerker, status, interne notities en een eenvoudige wijzigingshistorie. Planner kan datum/medewerker wijzigen; medewerker kan de uitvoering starten of afronden. Alle veranderingen worden servermatig gevalideerd. Notities toevoegen als aparte gedateerde regels; niet stilzwijgend overschrijven. Historie vermeldt de demo-weergave, geen verzonnen identiteit. 'Nieuwe aanvraag' blijft beschikbaar. Duidelijke teruglink naar de gefilterde lijst. ## 5. Mijn werk op mobiel Kies één van de drie fictieve medewerkers; toon diens open klussen met Vandaag / Alle open klussen. Medewerkerkeuze is een demo-filter, geen beveiligde login. Kaarten tonen het belangrijkste zonder horizontaal scrollen. Per klus: detail openen, uitvoering starten, notitie toevoegen, afronden. Toekomstige klus starten is toegestaan na bewuste actie; datum is planning, geen toegangsregel. ## 6. Demobeheer en vormgeving 'Zet demo terug' vraagt bevestiging en raakt alleen de huidige oefenomgeving. Bij verlopen sessie: duidelijke melding en een nieuwe demo. Nederlandse interface, datums dd-mm-jjjj, tijdzone Europe/Amsterdam voor tonen en 'vandaag'. Rustige off-white achtergrond, donkerblauwe tekst, bescheiden petrol accent, duidelijke statuslabels; nooit betekenis via kleur alleen. Toetsenbordbediening, zichtbare focus, echte labels, bruikbaar vanaf 360 px; gangbare handelingen met circa 44 px hoge tikdoelen. Geen animatie nodig om de werking te begrijpen.