docs: complete Stitch frontend replacement
This commit is contained in:
Jens
@@ -0,0 +1,94 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user