Beller dashboardintegratie

De volledige goedgekeurde prototypecode is geïntegreerd in het bestaande Next.js-project, onder src/features/dashboard-next. Alle 50 routepatronen en 37 functies blijven in de inventaris. De oorspronkelijke bron in prototypes/beller-dashboard is niet aangepast.

Nieuw: W01-configuratiecontract. Zie implementatie, controles en resterende koppelingen, 37-functiestatus en 42 veldgroepen / 190 opslagvelden. Formulieren en configuratieassistent delen nu een gevalideerd, alleen-lezen snapshot. De volledige demo blijft behouden.

Lokaal openen

Deze checkout staat op branch codex/dashboard-integratie-20261020, vanaf commit 527de24a1ff59b65133f72161ae22a80217d33e6.

cd C:\Users\mausv\Documents\Beller\worktrees\dashboard-integratie-20261020\frontend
npm run dev:dashboard

Open http://127.0.0.1:3211/preview/dashboard. Alle prototype-interacties zijn hier beschikbaar, inclusief registratie, Starter/Growth-onboarding, premium configuratiechat, kaartwerkgebied, telefoonnummerinstellingen en facturatie.

Op een verse checkout eerst npm ci in de repositoryroot én in frontend; het contract gebruikt de gedeelde rootdependency. Het startcommando bindt uitsluitend aan 127.0.0.1, schakelt de twee previewvlaggen in en start geen backend.

Bekijken op een telefoon

Laat de lokale preview draaien en start vanuit dezelfde frontendmap een tweede terminal:

npm run preview:phone

Open op de telefoon de wifi-link die dit commando afdrukt. Laptop en telefoon moeten op hetzelfde lokale netwerk zitten; laat de laptop aan. Dit is geen internetpublicatie. De relay accepteert uitsluitend apparaten uit hetzelfde subnet en uitsluitend GET/HEAD voor de synthetische preview en bijbehorende bestanden. Authenticatiecookies worden niet doorgestuurd; echte dashboard-, API- en inlogroutes zijn niet beschikbaar via deze link. De normale lokale app blijft op loopback draaien.

Bij meerdere netwerkadressen kiest u expliciet het wifi-adres met BELLER_PHONE_ADDRESS. De relay gebruikt standaard poort 3213 en de bestaande preview op 3211. Windows moet inkomend verkeer voor Node.js toestaan; de relay wijzigt geen firewallinstellingen. Stop de relay met Ctrl+C. Automatisch kopiëren kan op lokaal HTTP door de telefoon worden beperkt; de chat biedt dan handmatig selecteren aan.

| Ingang | Gedrag | |---|---| | /preview/dashboard | Volledige synthetische demo. Alleen loopback + BELLER_LOCAL_PREVIEW=1. Geen account nodig. | | /preview/dashboard/registreren | Volledige fictieve registratie, inclusief nummer, pakketkeuze en bevestiging. | | /dashboard/nieuw | Het volledige nieuwe prototype achter bestaande authenticatie én PaymentGate; start expliciet in demomodus. Vereist BELLER_DASHBOARD_NEXT=1. | | /dashboard/nieuw?data=live | Gescheiden leesweergave met bestaande account-API’s. Geen echte mutaties. | | /dashboard/nieuw/gesprekken?data=live | Gepagineerde echte gesprekslijst en directe detailroutes. | | /dashboard/nieuw/assistent?data=live | Het goedgekeurde instellingenontwerp met bestaande opgeslagen waarden; bewerken en testen geblokkeerd. | | /dashboard/nieuw/configuratie-assistent?data=live | Dezelfde opgeslagen snapshotcontext als de formulieren. Echte AI-opdrachten nog niet aangesloten. | | /dashboard | Bestaand dashboard, inclusief bestaande bediening. |

De nieuwe shell heeft bovenin Huidig dashboard. In het ingelogde nieuwe dashboard kunt u omschakelen tussen Echte leesgegevens en Volledige demo. De huidige frontend toont een ingang naar het nieuwe dashboard wanneer de featurevlag aanstaat.

Echte leesdata vereist de bestaande ontwikkelconfiguratie (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, NEXT_PUBLIC_API_URL) en een toegestane sessie. De lokale .env.local bevat alleen de al aanwezige publieke authenticatieconfiguratie en verwijst voor de API naar loopback. Er is geen backend gestart. Start een backend alleen volgens het bestaande veilige ontwikkelproces; de frontendpreview doet dit bewust niet zelf.

Wat is geïntegreerd

• Alle oorspronkelijke schermen, componenten, navigatie, huisstijl, fonts, logo’s en lokale kaarttegels.
• De complete registratie, beide onboardingroutes en de configuratiechat met geschiedenis, context, hulpmiddelen, voorstellen, bevestiging en undo.
• Routering, nummerbeheer, bedrijfs-/accountinstellingen, kennisimport, diensten/intake, planning/medewerkers, offertes, meldingen, werkgebied en facturatie.
• Namespacebewuste links: dezelfde schermen werken onder beide nieuwe ingangen; oude /dashboard/...-routes worden niet vervangen.
• Gescheiden CSS onder .beller-next, inclusief eigen fontnamen. Het oude dashboard houdt zijn stylesheet.
• Bestaande servercontrole met auth.getUser(), cookieverversing, PaymentGate, API-authenticatie en backendtenantcontrole blijven leidend.
• Leesfouten, laden, lege resultaten, hervatten, directe links en foutgrenzen. Leesverzoeken hebben een timeout en gebruiken cache: no-store.

Het volledige interactieve productontwerp draait in demomodus. De echte leesweergave is bewust beperkt tot bewezen bestaande velden. Niet aangesloten echte functies krijgen een uitleg; ze worden niet gevuld met fictieve klantrecords. Dit is nog geen voltooiing van alle backendwerkpakketten uit het bouwplan.

Data en acties

De synthetische adapter gebruikt uitsluitend sessionStorage met sleutels beller-dashboard-preview-*. Er wordt geen organisatie-ID in deze opslag gebruikt, geen oude prototypeopslag geïmporteerd en geen echte API-respons opgeslagen. Demo-invoer blijft na refresh binnen hetzelfde tabblad beschikbaar. Een apart nieuw tabblad begint met zijn eigen sessie; openen vanuit een gekloond tabblad kan door de browser een kopie van die synthetische sessie opleveren. Sluiten beëindigt normaal de tabopslag; browserherstel kan sessieopslag herstellen.

De echte adapter ondersteunt alleen vaste GET-routes, via de bestaande apiCall. Bedrijfstoegang komt uit de bestaande sessie, niet uit een door de frontend meegestuurde organisatie-ID. Real-mode update, save, accept en reset weigeren mutaties, ook bij een directe aanroep.

| Bestaand GET-contract | Gebruik | |---|---| | /company/profile | Werkruimtenaam, bedrijf, abonnementstatus en onderscheiden telefoonnummers | | /company/settings | Assistent/gedrag, contactgegevens, openingstijden, werkgebiedbasis, tarieven, meldingsvoorkeuren en boekingsbeleid | | /company/configuration/snapshot | Nieuw gezamenlijk contract voor de configuratieschermen; backendvlag BELLER_CONFIG_SNAPSHOT_ENABLED=1 nodig. | | /company/sessions | Gesprekken, serverfilters en paginering; zoekveld expliciet binnen de geladen pagina | | /company/sessions/:id | Direct detail, transcript en een beschikbare opname; geen automatische audio | | /company/services?include_inactive=true | Bestaande dienstcatalogus, inclusief legacystatus vanuit de backend | | /company/knowledge | Bestaande kennisvragen en antwoorden | | /company/integrations/overview | Serverstatussen van koppelingen, beschikbaarheid en controletijd | | /company/billing/summary | Abonnement, werkelijk verbruik, betaalmethodeoverzicht en factuurstatussen |

Een afgerond gesprek betekent niet dat een afspraak, opvolgactie of bericht is geslaagd. Niet aangesloten opvolg-/afleverstatussen worden daarom niet uit completed afgeleid. Onbekende stemmen worden niet vervangen door een demostem. Een ontbrekende factuurrespons is geen lege factuurhistorie.

Er zijn geen nieuwe backendroutes, productiemigraties, telefonieacties, berichten, betalingen of deployments uitgevoerd.

Controle en bewijs

• Functiestatus per M01–M37
• Alle 50 bronroutes
• Veldmatrix aangevuld met deze integratiestatus
• Volgende bouwopdracht: gezamenlijk configuratiecontract
• Controleverslag en screenshots

npm run typecheck
npm test
npm run lint
npm run build -- --webpack

# Voor browserregressies: deze frontend op 3211 en het ongewijzigde prototype op 3210.
npx playwright install chromium
npm run test:dashboard:flows
npm run test:dashboard:routes

Browserresultaten staan in qa/results en worden niet als runtimecode opgenomen. De gecontroleerde verslagen en geselecteerde screenshots staan bij deze documentatie.

Onderzoekscontext en actuele verschillen

Gericht gebruikt: hoofdstuk 03/aansluitmatrix, routecoverage.json, hoofdstuk 15/veld-tot-gedragmatrix F01–F42 en hoofdstuk 17/geïntegreerd bouwplan uit output/beller-backend-research-2026-10-19/oplevering. De brede concurrentieaudit is niet opnieuw uitgevoerd.

De bronhashvergelijking met het onderzoek vond geen prototypewijzigingen en negen gewijzigde backend-/testbestanden: GeminiVoiceService, unidentifiedIssuePolicy, confirmationDecision, serviceAvailability en vijf bijbehorende tests. Deze wijzigingen liggen in de oorspronkelijke werkboom en zijn niet meegenomen of overschreven. De frontend in die oorspronkelijke werkboom had geen lokale wijzigingen. De integratiebranch begint op dezelfde vastgelegde commit als het onderzoek.

De visuele vergelijking gebruikt nieuwe screenshots van het ongewijzigde, lokaal draaiende prototype. REA-bewijs is context uit het bestaande dossier; deze integratie claimt geen nieuwe REA-waarnemingen.