feat: establish Stitch cockpit frontend contract
This commit is contained in:
Jens
@@ -1575,6 +1575,160 @@ tasks:
|
||||
note: Ervarings- en senioriteitsinvloed uit score en learning verwijderd; gebruikersgescopeerde Skillsradar
|
||||
met actuele bronselectie, vraagbewijs, profieldekking, leerkansen, uitgebreide skillfilters en 2560/1440/390-browsercontrole
|
||||
voltooid.
|
||||
- id: VR-209
|
||||
title: Stitch frontendcontract, audit en cockpit-shell
|
||||
status: done
|
||||
priority: P0
|
||||
requirement_ids:
|
||||
- PR-040
|
||||
- PR-050
|
||||
- PR-051
|
||||
- NFR-004
|
||||
- NFR-008
|
||||
depends_on:
|
||||
- VR-208
|
||||
summary: Leg de volledige negen-schermenaudit en fidelitymatrix vast en vervang het globale design system, de
|
||||
shell, navigatie en generieke browserstates door de Stitch Intelligence Cockpit.
|
||||
acceptance_criteria:
|
||||
- Contract en integratieplan bevatten alle negen schermen, afmetingen, componenten, route/data-mapping, fidelitydoelen,
|
||||
responsive/accessibilityrisico's en legacy-opruiming.
|
||||
- De enige productieshell gebruikt de lokale Stitch-tokens, compacte navigatie, contextbar, mobile drawer, skiplink,
|
||||
focusstaten en echte statusdata zonder externe runtimeassets.
|
||||
- Login, meldingen, lege toestanden en generieke foutstates gebruiken dezelfde visuele taal en blijven zonder
|
||||
JavaScript bruikbaar.
|
||||
verification:
|
||||
- uv run pytest tests/integration/test_views.py tests/e2e/test_vr114_browser_and_accessibility.py
|
||||
- uv run ruff check .
|
||||
primary_paths:
|
||||
- docs/design/STITCH_FRONTEND_CONTRACT.md
|
||||
- docs/design/STITCH_INTEGRATION_PLAN.md
|
||||
- templates/base.html
|
||||
- static/css/app.css
|
||||
- static/js/app.js
|
||||
result:
|
||||
completed_at: '2026-07-22'
|
||||
note: Volledige negen-schermenaudit, fidelitymatrix, bindend frontendcontract en nieuwe lokale Stitch-cockpit-shell
|
||||
met gesplitst design system, mobile navigatie en generieke foutstates; relevante tests groen.
|
||||
- id: VR-210
|
||||
title: Stitch dashboard en vacature-intelligence
|
||||
status: ready
|
||||
priority: P0
|
||||
requirement_ids:
|
||||
- PR-040
|
||||
- PR-041
|
||||
- PR-050
|
||||
- NFR-004
|
||||
depends_on:
|
||||
- VR-209
|
||||
summary: Vervang dashboard, vacatureverkenner en detail door de echte Stitch-composities met database-aggregaties,
|
||||
uitlegbare scores, provenance en veilige acties.
|
||||
acceptance_criteria:
|
||||
- Dashboard toont echte dag-, match-, filter-, duplicaat-, sollicitatie-, activiteit- en brongezondheidsdata met
|
||||
beste matches als dominante feed.
|
||||
- De explorer heeft serverfilters, actieve chips, paginering en een brede master/detailcompositie die querystring
|
||||
en browser-back behoudt.
|
||||
- Het detail toont scorebewijs, inhoud, provenance, versies, duplicaten, sollicitatiestatus en een responsive
|
||||
actiedock; ervaring telt nergens als scorefactor en externe links blijven veilig.
|
||||
verification:
|
||||
- uv run pytest tests/integration/test_views.py tests/unit/test_scoring.py tests/unit/test_relevance.py
|
||||
primary_paths:
|
||||
- apps/core/views.py
|
||||
- apps/jobs/views.py
|
||||
- apps/jobs/services/cockpit.py
|
||||
- templates/dashboard/today.html
|
||||
- templates/jobs/list.html
|
||||
- templates/jobs/detail.html
|
||||
- id: VR-211
|
||||
title: Stitch pipeline, radarprofiel en brongezondheid
|
||||
status: ready
|
||||
priority: P0
|
||||
requirement_ids:
|
||||
- PR-002
|
||||
- PR-050
|
||||
- PR-051
|
||||
- NFR-004
|
||||
depends_on:
|
||||
- VR-210
|
||||
summary: Vervang sollicitaties, zoekprofiel en bronnen door de functionele Stitch-pipeline, radarconfigurator
|
||||
en source-healthinterface.
|
||||
acceptance_criteria:
|
||||
- Sollicitaties bieden kanban en lijstfallback, gebruikersgescopeerde POST-statuswijziging, deadlines, contact-
|
||||
en timelinecontext.
|
||||
- Het zoekprofiel groepeert echte selecties, toont revisie-informatie en een server-rendered preview uit de laatste
|
||||
echte match.
|
||||
- Bronnen tonen policy, runs, fout/succes, volgende planning, parser, tellingen, retry en bestaande beveiligde
|
||||
import-/mailboxflows.
|
||||
verification:
|
||||
- uv run pytest tests/integration/test_applications.py tests/integration/test_profile_preferences.py tests/integration/test_sources_manual_import.py
|
||||
tests/integration/test_source_health.py
|
||||
primary_paths:
|
||||
- apps/jobs/views.py
|
||||
- apps/profiles/views.py
|
||||
- apps/sources/views.py
|
||||
- templates/applications
|
||||
- templates/profiles
|
||||
- templates/sources/list.html
|
||||
- id: VR-212
|
||||
title: Stitch automation, activiteit en werkgeversintelligence
|
||||
status: ready
|
||||
priority: P0
|
||||
requirement_ids:
|
||||
- PR-040
|
||||
- PR-050
|
||||
- PR-051
|
||||
- NFR-002
|
||||
- NFR-004
|
||||
depends_on:
|
||||
- VR-211
|
||||
summary: Bouw de ontbrekende activiteit- en werkgeversroutes en vervang systeemstatus door een echte afgeleide
|
||||
automationcockpit.
|
||||
acceptance_criteria:
|
||||
- Automation toont echte pipeline-, run-, score-, notificatie-, scheduling-, database- en configuratiestatus en
|
||||
labelt niet-beschikbare infrastructuur eerlijk.
|
||||
- Activiteit combineert betrouwbare, gebruikersgescopeerde gebeurtenissen in een filterbare, gelinkte en gepagineerde
|
||||
tijdlijn.
|
||||
- Werkgevers index/detail aggregeren echte werkgever-, vacature-, score-, bron- en sollicitatiedata zonder CRM-
|
||||
of marktclaims te verzinnen.
|
||||
verification:
|
||||
- uv run pytest tests/integration/test_intelligence_views.py tests/integration/test_views.py
|
||||
primary_paths:
|
||||
- apps/jobs/services/activity.py
|
||||
- apps/jobs/services/employer_intelligence.py
|
||||
- apps/jobs/views.py
|
||||
- apps/jobs/urls.py
|
||||
- apps/core/views.py
|
||||
- templates/activity
|
||||
- templates/employers
|
||||
- templates/system/status.html
|
||||
- id: VR-213
|
||||
title: Stitch responsive validatie en legacyverwijdering
|
||||
status: ready
|
||||
priority: P0
|
||||
requirement_ids:
|
||||
- NFR-004
|
||||
- NFR-008
|
||||
- NFR-009
|
||||
depends_on:
|
||||
- VR-212
|
||||
summary: Rond de high-fidelity replacement af met browsermatrix, accessibility, elf screenshots, legacy-audit,
|
||||
documentatie en volledige regressiegate.
|
||||
acceptance_criteria:
|
||||
- Alle negen schermen en kernflows zijn visueel en functioneel gecontroleerd tussen 360 en 1440 px, met aanvullende
|
||||
ultrawidecontrole en schone browserconsole.
|
||||
- Elf verplichte validatiescreenshots bestaan; majeure afwijkingen, accessibility- en querybevindingen staan in
|
||||
het eindrapport.
|
||||
- Oude visuele selectors, dode partials/JS en parallelle shellmarkup zijn verwijderd; de Stitch-frontend is de
|
||||
enige normale productiefrontend.
|
||||
- De volledige verificatiegate slaagt en backlog, projectstatus, traceability, README en changelog zijn bijgewerkt.
|
||||
verification:
|
||||
- ./scripts/codex_verify.sh
|
||||
- Browsermatrix 1440x900, 1280x800, 1024x768, 768x1024, 390x844 en 360x800
|
||||
primary_paths:
|
||||
- static/css/app.css
|
||||
- static/js/app.js
|
||||
- tests/e2e
|
||||
- artifacts/visual-validation
|
||||
- docs/design/STITCH_INTEGRATION_REPORT.md
|
||||
- id: VR-301
|
||||
title: Multi-tenant SaaS, teams en billing
|
||||
status: deferred
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
# Stitch frontendcontract
|
||||
|
||||
## Bindende productregel
|
||||
|
||||
De normale VacatureRadar-productiefrontend is de functionele vertaling van de negen schermen uit `docs/design/stitch-reference/`. `screen.png` bepaalt compositie en visuele uitkomst, `code.html` verduidelijkt structuur en interacties en `intelligence_cockpit/DESIGN.md` bepaalt de visuele tokens. De voormalige MVP-frontend heeft geen behoudsprioriteit.
|
||||
|
||||
Backend-, beveiligings- en toegankelijkheidsregels blijven altijd leidend. Een Stitch-element wordt alleen aangepast wanneer echte data ontbreekt, een actie onveilig of niet ondersteund is, Nederlandse content meer ruimte vraagt of WCAG 2.2 AA dat vereist. Zo'n afwijking wordt in `STITCH_INTEGRATION_REPORT.md` gemotiveerd.
|
||||
|
||||
## Verplichte visuele taal
|
||||
|
||||
- Donkere navy cockpit met `#060e20`, `#0b1326`, `#131b2e`, `#171f33`, `#222a3d` en `#2d3449` als tonale lagen.
|
||||
- Signal Cyan `#00f5ff` voor primaire acties en focus, Emerald `#4edea3` voor aantoonbaar gezonde/positieve status, indigo voor automation en koraal/amber voor fout of aandacht.
|
||||
- Compacte technische zijbalk, contextuele topbar, brede datacanvas en adaptieve intelligence-rails.
|
||||
- Geist-achtige systeemheadline, Inter-achtige systeembody en JetBrains Mono-achtige systeemmono; geen externe fontrequest.
|
||||
- 8px basisritme, 16/24/32px stackafstand, fijne borders, kleine radii en terughoudende glows. Tonale hiërarchie vervangt zware shadows.
|
||||
- Lokale inline SVG-iconen. Geen Material Symbols-, Tailwind-, font- of andere runtime-CDN.
|
||||
|
||||
## Functioneel contract
|
||||
|
||||
- Alle cijfers zijn database-aggregaties of tonen expliciet `Nog niet gemeten`, `Onbekend` of `Niet geconfigureerd`.
|
||||
- Alle mutaties zijn POST + CSRF, gebruikersgescopeerd en gebruiken bestaande services waar bedrijfsbeslissingen nodig zijn.
|
||||
- Vacature-HTML is alleen de gesanitized backendwaarde; externe links gebruiken `noopener noreferrer nofollow` en openen uitsluitend na een expliciete gebruikersactie.
|
||||
- Geen automatische sollicitatie, platformloginbot, CAPTCHA-omzeiling, drag-and-drop zonder persistente fallback of control zonder werkend effect.
|
||||
- Named URLs, querystrings, browser-back, paginering en kernflows werken zonder JavaScript. JavaScript verbetert alleen navigatie, disclosures, tabs, dialogen, viewtoggles en micro-interacties.
|
||||
|
||||
## Schermcontract
|
||||
|
||||
De volgende pagina's zijn verplicht en gebruiken echte data:
|
||||
|
||||
1. Dashboard: dagconclusie, matches, filters/deduplicatie, sollicitatieopvolging, activiteit en bronstatus.
|
||||
2. Vacatureverkenner: master/detail op breed scherm, server-side filters, scorebewijs en snelle veilige acties.
|
||||
3. Vacaturedetail: jobhero, score-intelligence, inhoud, provenance, versies, duplicaten en sticky acties.
|
||||
4. Sollicitatiepipeline: toegankelijke kanban en lijstfallback met persistente statuswijziging.
|
||||
5. Zoekprofiel: gegroepeerde radarconfigurator met echte server-rendered preview en revisie-informatie.
|
||||
6. Bronnen: brongezondheid, policies, runtelemetrie, retry/review en beveiligde imports/mailboxen.
|
||||
7. Automatisering: echte pipeline-, queue-, database-, notificatie- en bronstatus zonder gesimuleerde liveclaims.
|
||||
8. Activiteit: gepagineerde, filterbare tijdlijn uit bestaande auditwaardige modellen.
|
||||
9. Werkgevers: index/detail uit genormaliseerde werkgever-, vacature-, score-, bron- en sollicitatiedata.
|
||||
|
||||
Ook login, foutpagina's, lege toestanden en generieke formulieren gebruiken dezelfde visuele taal.
|
||||
|
||||
## Responsive en toegankelijkheid
|
||||
|
||||
- Desktop volgt de Stitch-silhouette op 1440×900 en 1280×800; 1920/2560px gebruikt extra kolommen of ruimte en geen smalle gecentreerde strook.
|
||||
- Op 1024/768px worden rails logisch gestapeld. Op 390/360/320px wordt de zijbalk een focusveilige drawer, tabellen krijgen kaart- of horizontale scrollpresentatie en sticky acties blijven bruikbaar.
|
||||
- Eén `h1`, geldige landmarks, skiplink, zichtbare `:focus-visible`, tekst naast statuskleur, expliciete labels/fouten, 44px touchdoelen waar haalbaar, reduced motion en bruikbaarheid bij 200% zoom.
|
||||
|
||||
## Afrondingscontract
|
||||
|
||||
Een frontendfase is pas klaar na relevante tests en een diffreview. De volledige vervanging vereist elf browserbeelden onder `artifacts/visual-validation/`, een schone console op de kernroutes, een legacyzoekaudit, `scripts/codex_verify.sh`, bijgewerkte backlog/traceability/projectstatus en `STITCH_INTEGRATION_REPORT.md`. Er bestaat daarna geen feature flag of alternatieve normale route naar de oude frontend.
|
||||
@@ -1,79 +1,74 @@
|
||||
# Stitch-integratieplan
|
||||
|
||||
## Doel en bronhiërarchie
|
||||
## Auditbaseline
|
||||
|
||||
Deze integratie vertaalt het Stitch-project **VacatureRadar Intelligence Cockpit** naar de bestaande Django-applicatie. De functionele repository blijft leidend voor routes, data, beveiliging, gebruikersscope en acties. Stitch levert de visuele taal en compositie, niet de domeinwaarheid.
|
||||
De ontvangen ZIP `stitch_vacatureradar_intelligence_cockpit.zip` is geïnventariseerd en bytegelijk aan de blijvende referenties onder `docs/design/stitch-reference/`. Er is geen afzonderlijke aanvullende `design.md` aangetroffen. De referenties worden niet als runtimefrontend geserveerd en zijn via `.dockerignore` uit de productieimage gehouden.
|
||||
|
||||
De volledige ontvangen referentie staat in `docs/design/stitch-reference/`. Deze map en de validatiescreenshots zijn uitgesloten van de productiecontainer via `.dockerignore`; er worden geen externe Tailwind-, font-, icoon-, afbeelding- of JavaScript-CDN's aan de applicatie toegevoegd.
|
||||
| Stitch-scherm | Afmeting | Dominante compositie | Productieroute / template |
|
||||
| --- | ---: | --- | --- |
|
||||
| Dashboard overzicht | 1480×1600 | KPI-strip, brede matchfeed, actie-/activiteitsrail | `/` · `dashboard/today.html` |
|
||||
| Nieuwe matches | 1600×1550 | filterbar, masterlijst en geselecteerde intelligence | `/jobs/` · `jobs/list.html` |
|
||||
| Vacature intelligence detail | 1600×1525 | hero, scorepaneel, inhoudtabs, intelligence-rail en actiedock | `/jobs/<uuid>/` · `jobs/detail.html` |
|
||||
| Sollicitatie pipeline | 1600×1280 | horizontale kanban met lijsttoggle | `/jobs/applications/` · `applications/list.html` |
|
||||
| Zoekprofiel editor | 1600×1280 | configuratiestappen met vaste radarpreview | `/profiles/<id>/` · `profiles/edit.html` |
|
||||
| Bronnenbeheer & gezondheid | 1600×1340 | bronstatusrijen, disclosures en integriteitspanelen | `/sources/` · `sources/list.html` |
|
||||
| Automatisering centrum | 1540×1600 | pipelinefasen, operationele KPI's, brontabel en lograil | `/system/` · `system/status.html` |
|
||||
| Activiteitenlogboek | 1600×1441 | filterbare technische tijdlijn met samenvatting | `/activity/` · `activity/list.html` |
|
||||
| Werkgevers intelligence | 1600×931 | employer table met intelligence-detailrail | `/employers/` en `/employers/<id>/` · employer templates |
|
||||
|
||||
## VR-119: compositie als primaire bron
|
||||
## Tokens en herbruikbare bouwstenen
|
||||
|
||||
Na productfeedback is de integratie aangescherpt: Stitch bepaalt nu niet alleen kleur, vorm en typografie, maar ook de dominante schermcompositie en informatiedichtheid. Alleen aantoonbaar onveilige of fictieve onderdelen worden vervangen door een functioneel equivalent met echte repositorydata.
|
||||
De negen HTML-referenties gebruiken dezelfde palette- en typografieschaal: darkest/surface `#060e20`/`#0b1326`, vijf tonale containers, Signal Cyan `#00f5ff`, Emerald `#4edea3`, lichte hoofdtekst `#dae2fd`, gedempte tekst `#b9caca`, koraal `#ffb4ab`, 8px basisritme en 2–8px radii. Headings zijn 20/32px, body 14/16px en metadata 12/13px mono. Productie vertaalt dit naar CSS custom properties en lokale SVG's.
|
||||
|
||||
- De utilitybar neemt de brede zoekbalk en directe profielactie over.
|
||||
- Het dashboard gebruikt een enkelkoloms matchfeed met vaste radar-/actierail; één resultaat blijft daardoor een volwaardig primair signaal.
|
||||
- De vacaturelijst toont een dichte intelligencefeed met de laatste gebruikersgescopeerde score via databaseannotaties.
|
||||
- Het detail combineert scorehero, drie echte kernmetingen, analyse en een vaste menselijke actierail.
|
||||
- Pipeline, profieleditor, bronkaarten en systeemtelemetrie volgen de Stitch-kolommen en panelhiërarchie.
|
||||
- Handmatige import blijft volledig beschikbaar, maar staat compact achter een disclosure zodat brongezondheid visueel voorrang krijgt.
|
||||
Herbruikbare componenten: app-shell, nav-link, contextbar, page-heading, KPI-tile, tonal-panel, status-chip, score-ring/tile, data-table, intelligence-rail, timeline-event, filterbar/drawer, disclosure, empty state, form-section, sticky action dock en mobile bottom navigation. De componenten dragen semantiek; paginatemplates leveren alleen domeindata en compositie.
|
||||
|
||||
De bedoelde “circa 90% Stitch” slaat hiermee op overgenomen visuele structuur en interactiehiërarchie, niet op het kopiëren van fictieve content, externe assets, auto-apply of routes waarvoor het domeinmodel geen betrouwbare data bezit.
|
||||
## Data- en routeaudit
|
||||
|
||||
## VR-206: premium radar en ultrawide compositie
|
||||
| Component | Echte databron / service | Ontbrekend of aangepaste presentatie |
|
||||
| --- | --- | --- |
|
||||
| Dag-KPI's en beste matches | `JobPosting`, laatste `ScoreRun`, `Application`, `SourceRun`; nieuwe cockpit-queryservice | Geen fictieve trendpercentages; onbekende meting krijgt tekststatus. |
|
||||
| Verkenner | `JobPosting` met laatste profielscore, relevance-query, filters en paginering | Stitch quick-apply wordt detail/dossier/externe bronactie. |
|
||||
| Detailintelligence | `ScoreRun`, `JobSourceAlias`, `FieldProvenance`, `JobVersion`, `Feedback`, `Application` | Geen ervarings-/senioriteitsscore; geen kaart of salaris wanneer onbekend. |
|
||||
| Pipeline | gebruikersgescopeerde `Application` en `ApplicationTimelineEvent` | Geen drag-and-dropvereiste; statuswijziging krijgt toegankelijke POST-selectie. |
|
||||
| Radarconfiguratie | `SearchProfileForm`, profielrevisies, laatste scores | Preview is server-rendered uit laatste echte match; geen demo-vacature. |
|
||||
| Brongezondheid | `Source`, laatste `SourceRun`, `collect_source_health`, mailboxverbindingen | Geen algemene healthyclaim zonder runbewijs; technische fouttekst begrensd. |
|
||||
| Automatisering | readiness, `SourceRun`, jobs, scores, notificatie-outbox en configuratie | Uptime/worker/AI/browserstatus alleen indien afleidbaar, anders niet geconfigureerd. |
|
||||
| Activiteit | nieuwe queryservice over `SourceRun`, `JobVersion`, `Feedback`, `ApplicationTimelineEvent`, outbox en `ProfileRevision` | Modellen vormen één read-only tijdlijn; geen nieuw generiek auditmodel nodig. |
|
||||
| Werkgevers | nieuwe queryservice over `Employer`, jobs, scores, aliases, sources en applications | Sector/locatie/notities alleen indien opgeslagen; geen CRM- of contactpersoonfinder. |
|
||||
|
||||
De volledige audit maakt de Stitch-compositie ook functioneel dominant. De vacaturefeed start met
|
||||
een brede commandofilter, toont beslisbare score-evidence en krijgt op breed desktop een vaste
|
||||
radarcontext. Vanaf 1850 px worden matchfeeds tweekoloms; de shell benut maximaal 2240 px in plaats
|
||||
van de vroegere 1280 px. Op mobiel worden filters, sectiekoppen en acties lineair gestapeld.
|
||||
De twee nieuwe domeinervaringen worden read-only geïmplementeerd in `apps/jobs/services/activity.py` en `apps/jobs/services/employer_intelligence.py`. Dit houdt aggregatielogica uit views en vermijdt een migratie. Querysets gebruiken annotaties, `select_related`, `prefetch_related` en begrensde lijsten om N+1 te voorkomen.
|
||||
|
||||
De visuele hiërarchie is gekoppeld aan een deterministische IT-grens: niet-IT en hard uitgesloten
|
||||
matches zijn standaard afwezig. Het volledige archief en verborgen scores blijven expliciet
|
||||
inspecteerbaar, zodat premium rust niet ten koste gaat van auditbaarheid.
|
||||
## Fidelitymatrix
|
||||
|
||||
## Visuele richting
|
||||
| Scherm | Stitch-element | Echte implementatie | Fidelitydoel | Noodzakelijke aanpassing | Verificatie |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| Dashboard | vier KPI's + matchfeed + rail | actuele job/score/source/application-aggregaties | zeer hoog | trends alleen bij meetbaar tijdvenster | desktop/mobile screenshot + contexttests |
|
||||
| Nieuwe matches | split explorer | gepagineerde serverlijst met geselecteerd echt resultaat | zeer hoog | URL blijft deelbaar; geen SPA-state | filters/back/pagination tests + screenshot |
|
||||
| Detail | hero, score rail, tabs, dock | scorebewijs, provenance, versies, veilige acties | hoog | geen nepbeeld, quick apply of ervaringseffect | safe-link/sanitization tests + screenshots |
|
||||
| Pipeline | kanban + lijsttoggle | statuskolommen en echte POST statusselectie | zeer hoog | geen drag-and-drop als enige invoer | POST/user-scope tests + screenshot |
|
||||
| Zoekprofiel | secties + live preview | gegroepeerde widgets en laatste echte match | hoog | preview ververst na server-save | form/revision tests + screenshot |
|
||||
| Bronnen | health rows + details | bronkaart/tabel, runbewijs, retry en imports | zeer hoog | policy/securityflows blijven zichtbaar | retry/policy tests + screenshot |
|
||||
| Automatisering | pipeline en logs | afgeleide fasestatus, run- en outboxtelemetrie | hoog | onbekende infrastructuur eerlijk gelabeld | view-context tests + screenshot |
|
||||
| Activiteit | filtertijdlijn | gepagineerde multi-model read service | zeer hoog | alleen objecttypen met betrouwbare auditdata | filter/scope/pagination tests + screenshot |
|
||||
| Werkgevers | tabel + drawer | index met geselecteerde detailrail en aparte detail-URL | zeer hoog | geen AI-contactfinder of verzonnen sector | aggregate/scope/empty tests + screenshot |
|
||||
|
||||
- Donkere cockpit als standaard: diep marineblauw, tonale panelen, fijne slate-randen, signaalcyaan voor primaire interactie, emerald voor aantoonbaar gezonde status en koraal/amber voor fouten of aandacht.
|
||||
- Een volwaardige lichte variant met dezelfde semantische tokens en contrastverhoudingen.
|
||||
- Systeemfonts als lokale, snelle fallback voor Geist/Inter; monospace systeemfonts voor metadata. Geen netwerkfonts.
|
||||
- Een vaste desktopzijbalk en compacte utilitybar, op mobiel een toegankelijke uitschuifnavigatie met overlay en focusbehoud.
|
||||
- Dichte informatieweergave met een consistente 8px-ritmiek, zonder decoratieve data die niet uit het domeinmodel komt.
|
||||
## Responsive strategie en risico's
|
||||
|
||||
## Schermmapping
|
||||
De desktop shell gebruikt een 256px sidebar en een flexibele canvas tot ultrawide. Dashboard, explorer en detail schakelen bij 1180–1360px van twee/three-column naar gestapeld; op ultrawide worden rails vast en feeds ruimer. Kanban behoudt gecontroleerde horizontale inhoudscroll, niet paginascroll. Tabellen krijgen bij mobiel semantische kaartregels of een gelabelde scrollcontainer. De profielpreview wordt onder de editor geplaatst; de vacatureselectie opent als volledige detailkaart.
|
||||
|
||||
| Stitch-scherm | Django-route/template | Integratie | Bewuste aanpassing |
|
||||
| --- | --- | --- | --- |
|
||||
| Dashboard Overzicht | `/`, `dashboard/today.html` | KPI-strip, sterke-matchkaarten, bronstatus en snelle route-acties | Geen verzonnen trendgrafiek, notificaties of scannerstatus; alleen actuele databasecijfers. |
|
||||
| Nieuwe Matches | `/jobs/`, `jobs/list.html` | Filterwerkbalk en responsive vacature-intelligentielijst | Geen client-side master/detail-SPA; detail blijft een eigen, deelbare route. |
|
||||
| Vacature Intelligentie Detail | `/jobs/<uuid>/`, `jobs/detail.html` | Scorehero, componentanalyse, bronhistorie en sticky acties | Geen quick/direct apply, logo of kaart zonder betrouwbare brondata. Externe vacature opent alleen expliciet in een nieuw tabblad. |
|
||||
| Sollicitatie Pipeline | `/jobs/applications/`, `applications/list.html` | Statuskolommen op breed scherm, lineaire kaarten op smal scherm | Alleen bestaande dossierstatussen en gebruikersgescopeerde data. Geen drag-and-drop zonder backendcontract. |
|
||||
| Zoekprofiel Editor | `/profiles/` en `/profiles/<id>/` | Profielsummary, gegroepeerde editor, hulp- en risicotekst | Geen live scorepreview die servervalidatie kan tegenspreken. JSON-velden blijven functioneel maar krijgen duidelijke uitleg. |
|
||||
| Bronnenbeheer & Gezondheid | `/sources/`, `sources/list.html` | KPI's, importpaneel, bronkaarten, uitklapbare runinformatie en bulkacties | Bestaande policy-, SSRF-, rate-limit- en CSRF-flows blijven intact. Geen algemene “gezond”-claim zonder readinessdata. |
|
||||
| Automatisering Centrum | `/system/`, `system/status.html` | Readiness, echte bron-/vacaturestatus en veilige beheeropdrachten | Geen gefingeerde worker uptime, latency, cronprogressie of logregels. |
|
||||
| Activiteitenlogboek | geen zelfstandige route | Recente, betrouwbare gebruikersactiviteit wordt op dashboard/dossiers getoond waar het model die al bezit | Geen samengestelde auditfeed: de huidige modellen hebben geen uniform, volledig gebruikersgescopeerd eventcontract. Dit wordt niet geforceerd. |
|
||||
| Werkgevers Intelligentie | geen zelfstandige route | Werkgever blijft context op vacature- en sollicitatiekaarten | Geen “intelligence”-pagina zolang contact-, reputatie- en aggregatievelden niet betrouwbaar bestaan; dit voorkomt fictieve inzichten. |
|
||||
Belangrijkste accessibilityrisico's uit het prototype zijn icon-only controls, kleur-only status, lage metadata-contrastwaarden, vaste hoogtes, horizontale kanban en JavaScript-only toggles. Productie voegt namen, zichtbare statustekst, voldoende contrast, natuurlijke hoogte, keyboardbediening, serverfallbacks, focusmanagement en `prefers-reduced-motion` toe.
|
||||
|
||||
## Componenten en templatestructuur
|
||||
## Migratievolgorde en legacy-opruiming
|
||||
|
||||
- `base.html`: skiplink, merkblok, utilitybar, desktop/mobile navigatie, gebruikerspaneel, meldingen en themawisselaar.
|
||||
- `templates/components/`: herbruikbare SVG-iconen, paginakop, lege toestand, statuschip en vacaturekaart waar template-includes de duplicatie daadwerkelijk verlagen.
|
||||
- `static/css/app.css`: uitsluitend semantische tokens en componentklassen; dark/light via `data-theme`, met systeemvoorkeur als fallback.
|
||||
- `static/js/app.js`: alleen navigatie, details-disclosures en themaopslag. Alle kernacties blijven normale links of formulieren.
|
||||
1. Contract, tokens, icon sprite en volledig nieuwe shell.
|
||||
2. Dashboard, explorer en detail plus benodigde querycontext.
|
||||
3. Pipeline, zoekprofiel en bronnen zonder bestaande POST/contracts te breken.
|
||||
4. Automatisering, activiteit en werkgevers met nieuwe read services/routes.
|
||||
5. Login, fouttemplates, mobile/adaptive lagen, browsercontrole en accessibility.
|
||||
6. Verwijder oude selectors, dubbele cards/panels, achterhaalde JS en screenshots die niet tot de huidige validatie horen; zoek alle productietemplates na op de oude shell.
|
||||
|
||||
## Functionele en veiligheidsgrenzen
|
||||
`templates/base.html`, alle niet-e-mailtemplates onder `templates/`, `static/css/app.css` en `static/js/app.js` worden vervangen of fundamenteel herschikt. E-mailtemplates blijven buiten de cockpit omdat zij geen browserfrontend zijn. Named routes en bestaande formulier-/securitycontracts blijven behouden.
|
||||
|
||||
- Alle mutaties blijven POST + CSRF en gebruiken de bestaande services/views.
|
||||
- Sanitized vacature-HTML blijft het enige HTML-fragment dat met `safe` wordt gerenderd.
|
||||
- Externe URL's behouden `noopener noreferrer nofollow` en worden nooit automatisch geopend.
|
||||
- Bronimport, retry en bulkreview veranderen inhoudelijk niet.
|
||||
- Er worden geen secrets, persoonsgegevens, nepstatistieken, externe assets of nieuwe productieafhankelijkheden toegevoegd.
|
||||
## Gate en artifacts
|
||||
|
||||
## Responsive en toegankelijkheid
|
||||
|
||||
- Validatiebreedtes: 2560×1440, 1920×1080, 1440×900, 1024×768, 390×844 en 320×800.
|
||||
- Eén `h1` per pagina, semantische landmarks, zichtbare focus, toetsenbordbediening, 44px touchdoelen waar praktisch, tekstlabels naast statuskleur en een robuuste skiplink.
|
||||
- Tabellen schakelen op smalle schermen naar kaartachtige rijen of blijven gecontroleerd horizontaal scrolbaar wanneer kolomvergelijking essentieel is.
|
||||
- Animatie is subtiel en volledig uitgeschakeld bij `prefers-reduced-motion`.
|
||||
|
||||
## Verificatie
|
||||
|
||||
Na elke implementatiefase worden formattering, Ruff en relevante tests uitgevoerd. De afronding vereist `scripts/codex_verify.sh`, responsieve browserflows, console-/netwerkcontrole en screenshots per hoofdroute in beide thema's waar dat het ontwerp valideert.
|
||||
Per fase: Ruff format/check, relevante tests, diffreview en logische commit. Eindmatrix: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800; aanvullende 1920/2560px ultrawidecontrole. De elf verplichte beelden komen onder `artifacts/visual-validation/`; het eindrapport legt fidelity, afwijkingen, consolebevindingen, accessibility, queries en testresultaten vast.
|
||||
|
||||
Reference in New Issue
Block a user