Stitch-integratieplan

Doel en bronhiërarchie

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 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.

VR-119: compositie als primaire bron

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 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.

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.

Visuele richting

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.

Schermmapping

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.

Componenten en templatestructuur

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.

Functionele en veiligheidsgrenzen

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.

Responsive en toegankelijkheid

Validatiebreedtes: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×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.

6.6 KiB Raw Permalink Blame History Unescape Escape