131 lines
13 KiB
Markdown
131 lines
13 KiB
Markdown
# Stitch-integratierapport
|
||
|
||
## Resultaat
|
||
|
||
VacatureRadar 0.3.0 gebruikt één normale productiefrontend: de functionele Django-vertaling van de negen Stitch Intelligence Cockpit-schermen. De voormalige MVP-shell, monolithische stylesheet en pagina-indelingen zijn vervangen. Backendregels, named routes, user scoping, CSRF, sanitization, bronbeleid en servervalidatie blijven leidend.
|
||
|
||
Startcommit: `029df89`. Branch: `codex/stitch-frontend-replacement`.
|
||
|
||
## Schermmapping en fidelity
|
||
|
||
| Stitch-scherm | Productie-implementatie | Fidelity | Bewuste afwijking |
|
||
| --- | --- | --- | --- |
|
||
| Dashboard overzicht | `/` · `templates/dashboard/today.html` | Zeer hoog | Geen fictieve trends; dagconclusie en KPI's zijn echte aggregaties. |
|
||
| Nieuwe matches | `/jobs/` · `templates/jobs/list.html` | Zeer hoog | Server-side master/detail en paginering vervangen prototype-state. |
|
||
| Vacature intelligence detail | `/jobs/<uuid>/` · `templates/jobs/detail.html` | Hoog | Geen quick apply, kaart of salaris wanneer backenddata ontbreekt. |
|
||
| Sollicitatie pipeline | `/jobs/applications/` · applicationtemplates | Zeer hoog | Select+POST en lijstfallback in plaats van drag-only kanban. |
|
||
| Zoekprofiel editor | `/profiles/<id>/` · profieltemplates | Hoog | Preview gebruikt laatste echte score en ververst na server-save. |
|
||
| Bronnenbeheer & gezondheid | `/sources/` · `templates/sources/list.html` | Zeer hoog | Veiligheids-, import- en mailboxflows blijven zichtbaar en progressief. |
|
||
| Automatisering centrum | `/system/` · `templates/system/status.html` | Hoog | Worker/AI/browserstatus is eerlijk onbekend of niet geconfigureerd. |
|
||
| Activiteitenlogboek | `/jobs/activity/` · `templates/activity/list.html` | Zeer hoog | Multi-model read service; geen nieuw fictief auditmodel. |
|
||
| Werkgevers intelligence | `/jobs/employers/` en detail · employertemplates | Zeer hoog | Geen verzonnen sector, contactfinder of CRM-data. |
|
||
|
||
Ook login, 403/404/500, messages, empty states, dossieredit en skillsradar gebruiken dezelfde componenttaal.
|
||
|
||
## Implementatie
|
||
|
||
### Templates en assets
|
||
|
||
Vervangen of fundamenteel herschikt: `base.html`, dashboard, jobs list/detail/skills, applications list/edit, profiles list/edit, sources list, system status en registration login. Nieuw: activity, employer index/detail en generieke fouttemplates.
|
||
|
||
`static/css/app.css` is alleen de ingang voor `tokens.css`, `base.css`, `layout.css`, `components.css`, `pages.css` en `responsive.css`. `static/js/app.js` bevat alleen progressive enhancement. Iconografie is één lokale SVG-sprite. Er zijn geen externe fonts, iconfonts, Tailwind/CDN of clientframeworks.
|
||
|
||
### Services, views en routes
|
||
|
||
- `apps/jobs/services/cockpit.py`: dashboard- en vacature-intelligence.
|
||
- `apps/jobs/services/activity.py`: begrensde, user-safe multi-model tijdlijn.
|
||
- `apps/jobs/services/employer_intelligence.py`: werkgeveraggregaties en detailreadmodel.
|
||
- `apps/core/services/automation.py`: eerlijke operationele cockpit.
|
||
- `apps/jobs/services/applications.py`: auditbare statuswijziging via POST.
|
||
- Nieuwe named routes: `jobs:activity`, `jobs:employers`, `jobs:employer-detail`, `jobs:application-status`.
|
||
|
||
Er waren geen nieuwe modellen of migraties nodig. Bestaande bronhealth is geoptimaliseerd met een per-bron geslicete prefetch.
|
||
|
||
## Echte data en security
|
||
|
||
Alle KPI's komen uit `JobPosting`, laatste `ScoreRun`, `Application`, `Source`, `SourceRun`, outbox- of profieldata. Persoonlijke feedback, dossiers, notificaties en profielrevisies zijn gebruikersgescopeerd. Vacature-HTML blijft de gesanitized backendwaarde. Externe links en POST-acties behouden bestaande securitycontracts. Er is geen automatische sollicitatie, platformloginbot, CAPTCHA-omzeiling of directe denylistcrawl toegevoegd.
|
||
|
||
## Responsive en browservalidatie
|
||
|
||
Gecontroleerd met de echte app en representatieve lokale fixtures op 360×800, 390×844, 768×1024, 1024×768, 1280×800 en 1440×900; dashboard, explorer en werkgevers ook op 1920×1080 en 2560×1440. Alle negen schermen zijn op desktop en 390 px doorlopen.
|
||
|
||
Resultaat:
|
||
|
||
- geen documentbrede horizontale overflow;
|
||
- mobiele sidebar en tabbar functioneren;
|
||
- profile preview respecteert de gridkolom;
|
||
- brede automationpipeline en tabellen scrollen alleen intern;
|
||
- geen kapotte images;
|
||
- geen browserconsole-errors of warnings;
|
||
- dark/light actielabel en opgeslagen voorkeur zijn consistent.
|
||
|
||
Screenshots:
|
||
|
||
- `artifacts/visual-validation/dashboard-desktop.png`
|
||
- `artifacts/visual-validation/matches-desktop.png`
|
||
- `artifacts/visual-validation/job-detail-desktop.png`
|
||
- `artifacts/visual-validation/applications-desktop.png`
|
||
- `artifacts/visual-validation/profile-desktop.png`
|
||
- `artifacts/visual-validation/sources-desktop.png`
|
||
- `artifacts/visual-validation/automation-desktop.png`
|
||
- `artifacts/visual-validation/activity-desktop.png`
|
||
- `artifacts/visual-validation/employers-desktop.png`
|
||
- `artifacts/visual-validation/dashboard-mobile.png`
|
||
- `artifacts/visual-validation/job-detail-mobile.png`
|
||
|
||
De afbeeldingen en Stitch-referenties zijn via `.dockerignore` uit de productieimage gehouden.
|
||
|
||
## Accessibility
|
||
|
||
De shell heeft skiplink en expliciete landmarks; iedere hoofdroute heeft één `h1`. Status gebruikt tekst, formulieren behouden echte labels/servererrors, mutaties werken zonder JavaScript en motion respecteert reduced motion. De drawer is met toetsenbord-/ARIA-state getest. Wide data heeft focusbare lokale scrollcontainers. De HTML/a11y-probe slaagt; de optionele externe pytest-Playwrightvariant is alleen beschikbaar wanneer Playwright lokaal geïnstalleerd is.
|
||
|
||
## Performance
|
||
|
||
Representatieve volledige paginaquerymetingen: dashboard 16, explorer 17, detail 15, pipeline 5, profiel 6, bronnen 14, activiteit 10 en werkgevers 14. Automation daalde door het verwijderen van de bronhealth-N+1 van 63 naar 23 queries. `collect_source_health()` is regressiegedekt op exact twee queries voor meerdere bronnen. Grote tijdlijnen en detailsets zijn begrensd; lijsten gebruiken annotaties, `select_related` en prefetching.
|
||
|
||
## Legacy-audit
|
||
|
||
Er is geen oude shell, alternatieve feature flag of parallelle frontendroute. Oude componentselectors, kleuren en monolithische pagina-opbouw zijn verwijderd. Alleen HTML-e-mailtemplates behouden bewust hun zelfstandige inline mailstijl; zij zijn geen browserfrontend. Bestaande historische validatiebeelden blijven documentair bewijs, maar worden niet gerenderd of in de productiecontainer opgenomen.
|
||
|
||
## Verificatie en beperkingen
|
||
|
||
De volledige `scripts/codex_verify.sh`-gate is zowel vóór als na ledgerafronding groen: Ruff, Django system check, `makemigrations --check --dry-run`, 248 geslaagde tests, 2 optioneel overgeslagen Playwrightvarianten, 84,40% branch-aware coverage, backlogvalidatie en repository-/documentvalidatie.
|
||
|
||
Bekende externe beperkingen wijzigen de frontend niet: live mailbox-/SMTP-credentials en productie-infrastructuur blijven afzonderlijke `blocked-external` taken. Niet-bestaande backenddata wordt bewust als onbekend getoond.
|
||
|
||
## Premium verfijning (VR-216)
|
||
|
||
De high-fidelity cockpit is na een senior UX-audit verfijnd volgens het principe “calm intelligence”. De onderliggende Stitch-informatiearchitectuur en alle server-rendered flows blijven intact; de visuele laag vermindert gelijkwaardige kaders en reserveert cyan voor primaire acties, actieve navigatie en betekenisvolle signalen. Navigatie, labels en hulptekst gebruiken humane typografie, terwijl cijfers en technische statusinformatie hun compacte technische karakter behouden.
|
||
|
||
Dashboard-KPI's staan mobiel in een compact 2×2-raster zodat de eerste matches binnen de eerste viewport beginnen. De vacaturefilters gedragen zich als één responsieve commandobar, pipelinekolommen hebben een stabiele interne scroll en scroll-snap, en het zoekprofiel gebruikt een brede samengestelde kaart in plaats van een klein eiland in lege ruimte. Het lichte thema heeft meer tonale diepte en minder grijze vlakheid.
|
||
|
||
De geïntegreerde browsercontrole dekte dashboard, verkenner, pipeline en profiel op 1280×800, dashboard en verkenner op 390×844, en het dashboard in donker en licht thema. De gemeten documentbreedte bleef binnen de viewport; op 390 px gebruikte het dashboard twee KPI-kolommen en begon de matchsectie op 550 px. De loginconsole is schoon nadat de voorheen inline logininteractie naar `static/js/login.js` is verplaatst conform de bestaande CSP.
|
||
|
||
### Interactieve illustratielaag
|
||
|
||
Het zoekprofiel gebruikt een herbruikbare lokale SVG-radar als projectillustratie. Scan, signalen en orbitale details bewegen langzaam; pointerbeweging geeft maximaal tien pixels parallax. De visual is `aria-hidden`, bevat geen metric of statusclaim en laat alle profielinformatie en acties zelfstandig intact. Zonder JavaScript blijft de compositie bruikbaar en `prefers-reduced-motion: reduce` verwijdert animatie en parallax volledig. Op 390 px staat de illustratie onder de primaire profielactie, zodat zij de kernflow niet uit de eerste leesvolgorde verdringt.
|
||
|
||
## Persoonlijke merklaag (VR-218)
|
||
|
||
Favicon, login en shell gebruiken één compact radarbeeldmerk met een donker fundament, cyan scansignaal en emerald detectiepunt. De tekstsignatuur noemt standaard `Jens · private intelligence`; `VACATURERADAR_OWNER_NAME` maakt deze eigenaar expliciet configureerbaar zonder templatefork. De bovenbalk combineert eigenaar en routecontext met de bestaande zoekactie, zodat gebruikers sneller herkennen in welke werkruimte en flow zij zich bevinden.
|
||
|
||
De actieve navigatie, merklock-up en zoekfocus hebben preciezere gewicht-, contrast- en motionstates gekregen. Op smalle viewports verdwijnt de aanvullende werkruimtecontext zodat zoeken en primaire navigatie voorrang houden. De browsercontrole van dashboard, verkenner, profiel en login op 1280×850 en 390×844 bevestigt een schone console, geladen lokale assets en geen documentoverflow.
|
||
|
||
## Ultrawide gridcorrectie (VR-219)
|
||
|
||
De eerdere premiumlaag centreerde ieder direct hoofdonderdeel afzonderlijk op maximaal 1860 px. Op een 3840-pixelviewport ontstond daardoor links van de inhoud ruim 1100 px lege ruimte, terwijl de vaste bovenbalk een ander anker gebruikte. Alle directe hoofdsecties delen nu één links verankerde contentzone van maximaal 2800 px. Op 3840 px beginnen heading, filters, explorer, systeemstatus, pipeline, KPI's en automationdetail exact op x=296; op 1920 px vullen zij de beschikbare 1576 px en op 390 px de beschikbare 350 px.
|
||
|
||
De verkenner begrenst zijn resultatenkolom op ultrawide tot 880 px en geeft de resterende ruimte aan vacature-intelligence. De automationlograil blijft tussen 340 en 430 px, zodat tabellen en logs een voorspelbare verhouding houden. De merklock-up is tegelijk geharmoniseerd tot `VacatureRadar — Personal intelligence by Jens` en de desktopwerkruimte tot `Jens Intelligence`; login en herstelpagina's gebruiken dezelfde eigenaarssignatuur.
|
||
|
||
## Officiële ITWorx-merklaag (VR-220)
|
||
|
||
De projecteigenaar verduidelijkte dat “eigen branding” verwijst naar de officiële ITWorx.tech-identiteit. De tijdelijke tekstuele Jens-lock-up is daarom vervangen door de transparante, opgeschoonde wordmark uit het aangeleverde `ITWorx_Logo_Asset_Pack_2026-07-25.zip`. In de sidebar staat ITWorx.tech als hoofdmerk met `VacatureRadar · intelligence cockpit` als productdescriptor; de bovenbalk combineert ITWorx.tech met de bestaande routecontext. Login en wachtwoordherstel tonen eerst de officiële wordmark en vervolgens VacatureRadar als product.
|
||
|
||
Het favicon/app-icon en Dockermanicoon zijn deterministische crops van het cloud-check-symbool uit dezelfde goedgekeurde wordmark, op respectievelijk 512×512 en 256×256. Er is geen nieuw beeldmerk gegenereerd of nagetekend. Alle assets zijn lokaal, transparant en gedocumenteerd in `static/img/README.md`. De browsermatrix op 390, 1280 en 1920 px bevestigt correcte wordmarkverhoudingen, geladen PNG-assets, geen documentoverflow en een schone console.
|
||
|
||
## Gecorrigeerde merkarchitectuur (VR-221)
|
||
|
||
Een volgende verduidelijking maakte duidelijk dat ITWorx.tech de ontwikkelaar is en niet het productmerk. VacatureRadar gebruikt daarom opnieuw een zelfstandig beeldmerk, nu herontworpen als een open cyan radarboog, heldere scanstraal en één emerald kanssignaal op een compact navy appvlak. Twee beeldgeneratieconcepten verkenden de vormtaal; de geselecteerde eenvoudige richting is vervolgens bewust handmatig als vijf-elementen-SVG opgebouwd voor exacte geometrie, schaalbaarheid en herkenning op faviconformaat.
|
||
|
||
Sidebar, bovenbalk, login, favicon en Dockerman tonen VacatureRadar als primair merk. De officiële aangeleverde ITWorx.tech-wordmark staat alleen nog in een rustige `Ontwikkeld door`-credit tussen radarstatus en account, en onder authenticatiekaarten. De credit gebruikt een lokaal asset en concurreert niet met de producttitel. Browsercontrole op 390, 1280 en 1920 px bevestigt correcte hiërarchie, geladen logo's, geen overflow en een schone console.
|