docs: complete Stitch frontend replacement
This commit is contained in:
Jens
@@ -2,6 +2,23 @@
|
|||||||
|
|
||||||
Alle betekenisvolle wijzigingen worden hier bijgehouden. Het project volgt voorlopig een pre-1.0 semantische versieaanpak.
|
Alle betekenisvolle wijzigingen worden hier bijgehouden. Het project volgt voorlopig een pre-1.0 semantische versieaanpak.
|
||||||
|
|
||||||
|
## 0.3.0 — 2026-07-22
|
||||||
|
|
||||||
|
### Gewijzigd
|
||||||
|
|
||||||
|
- De voormalige MVP-frontend is volledig vervangen door één high-fidelity, server-rendered Stitch Intelligence Cockpit met nieuwe lokale tokens, shell, SVG-iconen, responsive lagen en progressive enhancement.
|
||||||
|
- Alle negen Stitch-schermen zijn functioneel gekoppeld: dashboard, vacatureverkenner/detail, sollicitatiepipeline, zoekprofiel, brongezondheid, automatisering, activiteit en werkgeversintelligence.
|
||||||
|
- Login, skillsradar, dossieredit, foutpagina's, empty states en messages gebruiken dezelfde componenttaal; de normale productiefrontend heeft geen legacyflag of parallelle shell.
|
||||||
|
- Nieuwe read services leveren echte dashboard-, vacature-, activiteit-, werkgever- en automationdata; vacaturefilters tonen standaard alleen aantoonbaar IT-relevante kansen.
|
||||||
|
- Sollicitatiestatus is een gebruikersgescopeerde CSRF-POST met audittrail. Niet-bestaande runtime- of marktdata blijft expliciet onbekend in plaats van gesimuleerd.
|
||||||
|
- Bronhealth gebruikt één geslicete prefetch voor alle bronnen; het automatiseringsscherm daalde in de representatieve dataset van 63 naar 23 queries.
|
||||||
|
|
||||||
|
### Verificatie
|
||||||
|
|
||||||
|
- De geïntegreerde Codex-browser controleerde alle negen schermen op desktop en 390 px, plus kernflows op 360, 768, 1024, 1280, 1440, 1920 en 2560 px zonder documentoverflow, kapotte assets of consolewaarschuwingen.
|
||||||
|
- Elf screenshots staan onder `artifacts/visual-validation/`; dark/light, mobiele drawer en toegankelijke actielabels zijn functioneel getest.
|
||||||
|
- Gerichte regressies, Ruff, Django system check, migratiecheck en de queryregressietest zijn groen; de volledige gate-uitkomst staat in `docs/ai/PROJECT_STATE.md`.
|
||||||
|
|
||||||
## 0.2.13 — 2026-07-22
|
## 0.2.13 — 2026-07-22
|
||||||
|
|
||||||
### Gewijzigd
|
### Gewijzigd
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
# VacatureRadar
|
# VacatureRadar
|
||||||
|
|
||||||
VacatureRadar is een persoonlijke, vrijwel autonome vacature-assistent voor toegestane publieke werkgeversbronnen, publieke ATS-pagina's, RSS/Atom en vacaturemails. De applicatie verzamelt vacatures, normaliseert en dedupliceert ze, past harde filters toe, berekent een uitlegbare matchscore en bundelt de beste resultaten in een dagelijkse digest.
|
VacatureRadar is een persoonlijke, vrijwel autonome vacature-assistent voor toegestane publieke werkgeversbronnen, publieke ATS-pagina's, RSS/Atom en vacaturemails. De applicatie verzamelt vacatures, normaliseert en dedupliceert ze, past harde filters toe, berekent een uitlegbare matchscore en presenteert vacatures, skillsvraag, werkgevers, opvolging en bronstatus in een Stitch-gebaseerde Intelligence Cockpit.
|
||||||
|
|
||||||
De repository bevat zowel een **werkende MVP-kern** als de volledige product-, architectuur-, UX-, beveiligings-, operationele en agentische overdrachtsdocumentatie om het project verder autonoom af te bouwen.
|
De repository bevat zowel een **werkende MVP-kern** als de volledige product-, architectuur-, UX-, beveiligings-, operationele en agentische overdrachtsdocumentatie om het project verder autonoom af te bouwen.
|
||||||
|
|
||||||
@@ -8,7 +8,7 @@ De repository bevat zowel een **werkende MVP-kern** als de volledige product-, a
|
|||||||
|
|
||||||
Reeds geïmplementeerd:
|
Reeds geïmplementeerd:
|
||||||
|
|
||||||
- Django 5.2-modulaire monoliet met Nederlandstalige responsive dark/light Intelligence Cockpit;
|
- Django 5.2-modulaire monoliet met de volledige Nederlandstalige, responsive dark/light Stitch Intelligence Cockpit;
|
||||||
- PostgreSQL in productie en SQLite voor lokale ontwikkeling;
|
- PostgreSQL in productie en SQLite voor lokale ontwikkeling;
|
||||||
- Celery-worker en scheduler via Redis;
|
- Celery-worker en scheduler via Redis;
|
||||||
- veilige HTTP-fetcher met domeinbeleid, redirecthercontrole, contentlimieten en SSRF-blokkering;
|
- veilige HTTP-fetcher met domeinbeleid, redirecthercontrole, contentlimieten en SSRF-blokkering;
|
||||||
@@ -17,19 +17,29 @@ Reeds geïmplementeerd:
|
|||||||
- exacte en fuzzy deduplicatie;
|
- exacte en fuzzy deduplicatie;
|
||||||
- deterministische kenmerken, harde uitsluitregels en uitlegbare scoring;
|
- deterministische kenmerken, harde uitsluitregels en uitlegbare scoring;
|
||||||
- zoekprofielen met revisiehistoriek en begrensde feedbackaanpassing;
|
- zoekprofielen met revisiehistoriek en begrensde feedbackaanpassing;
|
||||||
- dagelijkse digests, vacaturelevenscyclus en sollicitatiedossiers;
|
- dagelijkse digests, vacaturelevenscyclus, auditbare sollicitatiepipeline en activiteitstijdlijn;
|
||||||
|
- werkgeversintelligence, persoonlijke skillsradar en eerlijke operationele automatiseringsstatus;
|
||||||
- optionele lokale Ollama-analyse met prompt-injectionguardrails;
|
- optionele lokale Ollama-analyse met prompt-injectionguardrails;
|
||||||
- Docker Compose voor lokaal gebruik en een Unraid-variant;
|
- Docker Compose voor lokaal gebruik en een Unraid-variant;
|
||||||
- tests, fixtures, CI, back-up-/herstelscripts en healthchecks.
|
- tests, fixtures, CI, back-up-/herstelscripts en healthchecks.
|
||||||
|
|
||||||
Nog niet als productievoltooid beschouwd:
|
Nog niet als productievoltooid beschouwd:
|
||||||
|
|
||||||
- live broninventaris en bronvoorwaarden per concrete werkgever;
|
- periodieke menselijke voorwaardenreview voor bijkomende live werkgeversbronnen;
|
||||||
- een gekozen actuele geodataset met licentie;
|
|
||||||
- productiespecifieke secrets, mailboxcredentials, domein/TLS en containerregistry.
|
- productiespecifieke secrets, mailboxcredentials, domein/TLS en containerregistry.
|
||||||
|
|
||||||
Deze punten staan als uitvoerbare taken in [`docs/ai/BACKLOG.yaml`](docs/ai/BACKLOG.yaml). Externe credentials blokkeren nooit de rest van het werk: taken worden met mocks en interfaces afgewerkt en daarna als `blocked-external` gedocumenteerd waar echte configuratie nodig is.
|
Deze punten staan als uitvoerbare taken in [`docs/ai/BACKLOG.yaml`](docs/ai/BACKLOG.yaml). Externe credentials blokkeren nooit de rest van het werk: taken worden met mocks en interfaces afgewerkt en daarna als `blocked-external` gedocumenteerd waar echte configuratie nodig is.
|
||||||
|
|
||||||
|
## Frontend en visuele validatie
|
||||||
|
|
||||||
|
De enige normale browserfrontend is de server-rendered Stitch Intelligence Cockpit. Alle negen referentieschermen zijn aan echte Django-data gekoppeld; er is geen SPA, runtime-CDN, demo-KPI of oude parallelle shell. De ontwerpcontracten en gemotiveerde afwijkingen staan in:
|
||||||
|
|
||||||
|
- [`STITCH_FRONTEND_CONTRACT.md`](docs/design/STITCH_FRONTEND_CONTRACT.md);
|
||||||
|
- [`STITCH_INTEGRATION_PLAN.md`](docs/design/STITCH_INTEGRATION_PLAN.md);
|
||||||
|
- [`STITCH_INTEGRATION_REPORT.md`](docs/design/STITCH_INTEGRATION_REPORT.md).
|
||||||
|
|
||||||
|
De elf desktop-/mobielbeelden staan in `artifacts/visual-validation/` en zijn uitgesloten van de productiecontainer. De browsermatrix bestrijkt 360 tot 2560 px.
|
||||||
|
|
||||||
Release-productiepad:
|
Release-productiepad:
|
||||||
|
|
||||||
- `./scripts/release_verify.sh` bouwt de smoke-, backup/restore- en artifactcontrole;
|
- `./scripts/release_verify.sh` bouwt de smoke-, backup/restore- en artifactcontrole;
|
||||||
|
|||||||
@@ -1717,7 +1717,7 @@ tasks:
|
|||||||
groen.
|
groen.
|
||||||
- id: VR-213
|
- id: VR-213
|
||||||
title: Stitch responsive validatie en legacyverwijdering
|
title: Stitch responsive validatie en legacyverwijdering
|
||||||
status: ready
|
status: done
|
||||||
priority: P0
|
priority: P0
|
||||||
requirement_ids:
|
requirement_ids:
|
||||||
- NFR-004
|
- NFR-004
|
||||||
@@ -1744,6 +1744,10 @@ tasks:
|
|||||||
- tests/e2e
|
- tests/e2e
|
||||||
- artifacts/visual-validation
|
- artifacts/visual-validation
|
||||||
- docs/design/STITCH_INTEGRATION_REPORT.md
|
- docs/design/STITCH_INTEGRATION_REPORT.md
|
||||||
|
result:
|
||||||
|
completed_at: '2026-07-22'
|
||||||
|
note: Alle negen Stitch-schermen zijn browsergevalideerd van 360 tot 2560 px; elf screenshots, accessibility-/legacy-/queryaudit
|
||||||
|
en documentatie afgerond. Volledige gate groen met 248 tests, 2 optionele skips en 84,40% coverage.
|
||||||
- id: VR-301
|
- id: VR-301
|
||||||
title: Multi-tenant SaaS, teams en billing
|
title: Multi-tenant SaaS, teams en billing
|
||||||
status: deferred
|
status: deferred
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# Projectstatus
|
# Projectstatus
|
||||||
|
|
||||||
- Laatst bijgewerkt: 2026-07-22
|
- Laatst bijgewerkt: 2026-07-22
|
||||||
- Repositoryversie: 0.2.13 persoonlijke skillsvraag- en leerkansenradar
|
- Repositoryversie: 0.3.0 volledige Stitch Intelligence Cockpit
|
||||||
- Uitvoeringsmodus: autonome backlog
|
- Uitvoeringsmodus: autonome backlog
|
||||||
- Eerste uitvoerbare taak: controleer met `python scripts/backlog.py next`
|
- Eerste uitvoerbare taak: controleer met `python scripts/backlog.py next`
|
||||||
|
|
||||||
@@ -14,11 +14,33 @@ De repository bevat een uitvoerbare Django-MVP met:
|
|||||||
- JSON-LD-, HTML-, RSS/Atom- en e-mailadapters;
|
- JSON-LD-, HTML-, RSS/Atom- en e-mailadapters;
|
||||||
- normalisatie, sanitization, werkgeverresolutie, dedupe, aliassen, provenance en versies;
|
- normalisatie, sanitization, werkgeverresolutie, dedupe, aliassen, provenance en versies;
|
||||||
- deterministische features, harde exclusions, scores en optionele uitgeschakelde Ollama-boundary;
|
- deterministische features, harde exclusions, scores en optionele uitgeschakelde Ollama-boundary;
|
||||||
- responsive dark/light cockpitdashboard, vacaturelijst/detail, sollicitatiepipeline, profiel-, bron- en systeemschermen;
|
- volledige responsive dark/light Stitch-cockpit met negen functionele hoofdschermen, skillsradar, login en foutstates;
|
||||||
- feedbackacties, applicationdossiers, lifecycle en dagelijkse digest-outbox;
|
- feedbackacties, applicationdossiers, lifecycle en dagelijkse digest-outbox;
|
||||||
- Celeryworker/scheduler, healthchecks, Docker/Unraidconfiguratie en back-up-/herstelscripts;
|
- Celeryworker/scheduler, healthchecks, Docker/Unraidconfiguratie en back-up-/herstelscripts;
|
||||||
- offline unit-, integratie- en securitytests.
|
- offline unit-, integratie- en securitytests.
|
||||||
|
|
||||||
|
## Laatste frontendvervanging
|
||||||
|
|
||||||
|
VR-209 tot en met VR-213 vervangen de oude browserfrontend integraal:
|
||||||
|
|
||||||
|
- één nieuwe lokale Stitch-shell en design system zonder CDN of clientframework;
|
||||||
|
- echte dashboard-/vacature-intelligence, sollicitatiepipeline, profielconfigurator en source-healthinterface;
|
||||||
|
- nieuwe activiteit- en werkgeversroutes/read models en een eerlijke automationcockpit;
|
||||||
|
- standaard IT-relevantie, persoonlijke scorecontext en user-scoped mutaties blijven intact;
|
||||||
|
- browsermatrix van 360 tot 2560 px, elf actuele screenshots, schone console en geen documentoverflow;
|
||||||
|
- bronhealth-N+1 verwijderd: twee queries voor alle bron/runmetingen, 23 totale queries voor het representatieve automationscherm.
|
||||||
|
|
||||||
|
Het volledige scherm- en afwijkingsrapport staat in `docs/design/STITCH_INTEGRATION_REPORT.md`.
|
||||||
|
|
||||||
|
VR-209–213-verificatie op 2026-07-22:
|
||||||
|
|
||||||
|
- 248 tests geslaagd, 2 optionele Playwrightvarianten overgeslagen en 84,40% branch-aware codedekking;
|
||||||
|
- Ruff, Django system check, migratiecheck, backlogvalidatie en repository-/documentvalidatie geslaagd via `scripts/codex_verify.sh`;
|
||||||
|
- alle negen routes in de geïntegreerde browser gecontroleerd zonder consolewaarschuwingen, kapotte assets of documentoverflow;
|
||||||
|
- browsermatrix: 360×800, 390×844, 768×1024, 1024×768, 1280×800, 1440×900, 1920×1080 en 2560×1440;
|
||||||
|
- elf actuele beelden onder `artifacts/visual-validation/`; artifacts en Stitch-referenties blijven buiten de productieimage;
|
||||||
|
- volgende uitvoerbare taak: geen; alleen de bestaande externe credentials-/infrastructuurblokkades en uitgestelde productkeuzes resteren.
|
||||||
|
|
||||||
## Laatste geverifieerde baseline
|
## Laatste geverifieerde baseline
|
||||||
|
|
||||||
Release-audit op 2026-07-21:
|
Release-audit op 2026-07-21:
|
||||||
|
|||||||
@@ -1,73 +1,42 @@
|
|||||||
# Toegankelijkheid
|
# Toegankelijkheid
|
||||||
|
|
||||||
Doel: WCAG 2.2 AA voor de kernflows.
|
Doel: WCAG 2.2 AA voor alle kernflows van de server-rendered Stitch-cockpit.
|
||||||
|
|
||||||
## Semantiek
|
## Productiecontract
|
||||||
|
|
||||||
- één `h1` per pagina, hiërarchische headings;
|
- Skiplink, `aside`/`nav`, `header`, één `main` en één `h1` per pagina.
|
||||||
- navigatie in `<nav>` met duidelijke accessible name;
|
- Headingniveaus volgen de visuele hiërarchie; tabulaire data gebruikt echte headers.
|
||||||
- lijsten/tabellen voor werkelijke lijst-/tabulaire data;
|
- Formulieren hebben expliciete labels, hints, gekoppelde errors en servervalidatie.
|
||||||
- formulieren met expliciete `<label>`;
|
- Status gebruikt tekst naast kleur; score en datakwaliteit zijn afzonderlijk benoemd.
|
||||||
- statusmetadata als definition list waar passend;
|
- Icon-only controls hebben een toegankelijke naam; lokale decoratieve SVG's zijn verborgen.
|
||||||
- externe links herkenbaar in tekst/accessible label.
|
- Externe vacaturetekst is gesanitized; links gebruiken veilige attributen en geen verborgen automatische actie.
|
||||||
|
|
||||||
## Toetsenbord
|
## Toetsenbord en progressive enhancement
|
||||||
|
|
||||||
Alle functies moeten zonder muis werken. Focusvolgorde volgt visuele volgorde. `:focus-visible` heeft een contrastvolle ring. Geen keyboard traps. Na server-POST landt focus logisch via heading/message; toekomstige modals herstellen focus.
|
Alle routes, filters, feedback, dossiers, statuswijzigingen en profiel-/bronforms werken zonder JavaScript. JavaScript verbetert uitsluitend drawer, disclosure, viewtoggle, zoekfocus en thema. De mobiele drawer beheert `aria-expanded`, focus en sluitactie. Focus is zichtbaar; er zijn geen tijdslimieten of keyboard traps. `prefers-reduced-motion` reduceert alle transities.
|
||||||
|
|
||||||
## Kleur en contrast
|
## Contrast, zoom en reflow
|
||||||
|
|
||||||
- bodytekst minimaal 4,5:1;
|
De donkere en lichte tokensets bewaren tekst-, focus- en componentcontrast. Metadata is gedempt maar niet de enige informatiedrager. Content heeft geen vaste teksthoogte. Op 360 px en bij 200% zoom blijft het document binnen het viewport; alleen intrinsiek brede pipeline-/tabeldata gebruikt een gelabelde interne scroller.
|
||||||
- grote tekst minimaal 3:1;
|
|
||||||
- focus en componentgrenzen minimaal 3:1 waar vereist;
|
|
||||||
- status nooit alleen via kleur;
|
|
||||||
- light/dark afzonderlijk toetsen.
|
|
||||||
|
|
||||||
## Zoom en reflow
|
## Browservalidatie VR-213
|
||||||
|
|
||||||
- bruikbaar op 320 CSS px breed;
|
Op 22 juli 2026 zijn de negen hoofdervaringen met echte lokale data gecontroleerd:
|
||||||
- 200% zoom zonder verlies van acties/tekst;
|
|
||||||
- geen vaste hoogte voor tekstkaarten;
|
|
||||||
- lange URL's en woorden breken;
|
|
||||||
- horizontale scroll alleen voor intrinsiek brede data met alternatief.
|
|
||||||
|
|
||||||
## Forms en fouten
|
- viewports: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800;
|
||||||
|
- aanvullende widescreencontrole: 1920×1080 en 2560×1440;
|
||||||
|
- op iedere gecontroleerde route: één `h1`, skiplink, hoofdlandmark, geen kapotte images en geen documentbrede overflow;
|
||||||
|
- mobiele sidebar is gesloten buiten gebruik, opent met `aria-expanded=true` en sluit terug naar `false`;
|
||||||
|
- dark/light wisselt met de correcte actienaam; de initiële naam volgt nu ook een opgeslagen voorkeur;
|
||||||
|
- pipeline en automationtabellen scrollen lokaal zonder de pagina te verbreden;
|
||||||
|
- browserconsole bevatte geen errors of warnings.
|
||||||
|
|
||||||
- foutsummary bovenaan bij meerdere fouten;
|
De elf bewijsscreenshots staan onder `artifacts/visual-validation/`. De optionele pytest-Playwrightvariant blijft lokaal overgeslagen wanneer Playwright niet geïnstalleerd is; de HTML/a11y-probe en de geïntegreerde Codex-browseraudit vormen samen het uitgevoerde bewijs.
|
||||||
- inline fout bij veld;
|
|
||||||
- `aria-invalid` en `aria-describedby`;
|
|
||||||
- voorbeeld en vereiste syntax als hint;
|
|
||||||
- geen placeholder als enige label;
|
|
||||||
- validatie niet alleen on blur.
|
|
||||||
|
|
||||||
## Dynamiek
|
## Handmatige reviewchecklist
|
||||||
|
|
||||||
- server-rendering heeft geen verborgen loading state;
|
1. Tabvolgorde en zichtbare focus op dashboard, detail, profiel en pipeline.
|
||||||
- async updates gebruiken live regions spaarzaam;
|
2. Screenreader-smoke voor shelllandmarks, scorelabels en formuliererrors.
|
||||||
- successmessages niet alleen tijdelijk visueel;
|
3. Dark/light contrast en status zonder kleur.
|
||||||
- motion respecteert reduced motion;
|
4. 200% zoom, lange titels, lege/unknown states en 360 px reflow.
|
||||||
- tijdslimieten bestaan niet in gebruikersflows.
|
5. Fout/success na POST en terugkeer naar een logisch heading- of messagepunt.
|
||||||
|
|
||||||
## Vacaturetekst
|
|
||||||
|
|
||||||
Gesanitized HTML behoudt headings, paragraphs, lists en links waar veilig. Verwijder scripts, forms, iframes, eventhandlers en gevaarlijke URL-schema's. Voeg waar nodig `rel="noopener noreferrer"` toe aan externe links.
|
|
||||||
|
|
||||||
## Testen
|
|
||||||
|
|
||||||
Per zichtbare taak:
|
|
||||||
|
|
||||||
1. keyboard-only;
|
|
||||||
2. browser zoom/reflow;
|
|
||||||
3. automatische HTML/accessibilityscan waar beschikbaar;
|
|
||||||
4. screenreader smoke test voor dashboard, vacaturedetail en profiel;
|
|
||||||
5. contrastcontrole;
|
|
||||||
6. test met lange/lege/unknown content.
|
|
||||||
|
|
||||||
## VR-118 browservalidatie
|
|
||||||
|
|
||||||
- Dashboard gecontroleerd op 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800.
|
|
||||||
- Op alle zes viewports: exact één `h1`, geen documentbrede horizontale overflow en de juiste desktop/mobile navigatiestatus.
|
|
||||||
- Mobiel menu opent met `aria-expanded=true`, sluit met Escape/sluitactie en is buiten de focus-/accessibilityflow wanneer gesloten.
|
|
||||||
- Themawisselaar blijft bruikbaar wanneer browseropslag niet beschikbaar is; de UI geeft dan geen consolefout.
|
|
||||||
- Dashboard, vacaturelijst/detail, sollicitatiepipeline, profielen/editor, bronnen en systeem zijn met echte seeded data en zonder externe assets gevalideerd.
|
|
||||||
- Screenshots staan onder `docs/design/validation/` en zijn via `.dockerignore` uitgesloten van de productiecontainer.
|
|
||||||
|
|||||||
+42
-114
@@ -1,130 +1,58 @@
|
|||||||
# Design system
|
# VacatureRadar design system
|
||||||
|
|
||||||
> Geactualiseerd voor VR-118. De volledige Stitch-mapping en bewuste afwijkingen staan in
|
Dit document beschrijft de enige normale productiefrontend vanaf versie 0.3.0. De visuele bron van waarheid is de Stitch Intelligence Cockpit; het bindende contract en de schermmapping staan in `STITCH_FRONTEND_CONTRACT.md` en `STITCH_INTEGRATION_REPORT.md`.
|
||||||
> `docs/design/STITCH_INTEGRATION_PLAN.md`.
|
|
||||||
|
|
||||||
## 1. Merkgevoel
|
## Visuele identiteit
|
||||||
|
|
||||||
Rustig, betrouwbaar, helder en technisch precies. De interface voelt als een professionele intelligence-cockpit:
|
De standaardervaring is een donkere, technische navycockpit. Signal Cyan markeert focus en primaire acties, Emerald aantoonbaar positieve of gezonde status, Intelligence Indigo automatisering en Amber/Coral aandacht of fout. Tonale oppervlakken en fijne borders vormen de hiërarchie; glows zijn beperkt tot focus en sterke signalen.
|
||||||
donker marineblauw als standaard, signaalcyaan voor primaire interactie en tonale lagen in plaats van zware schaduwen.
|
|
||||||
De lichte variant behoudt dezelfde hiërarchie. Geen confetti, fictieve grafieken, eindeloze badges of agressieve notificatiekleuren.
|
|
||||||
|
|
||||||
## 2. Visuele tokens
|
De productietokens staan uitsluitend in `static/css/tokens.css`:
|
||||||
|
|
||||||
De implementatie staat in `static/css/app.css`. Gebruik semantische custom properties in plaats van losse kleuren in componenten.
|
- oppervlakken: `--surface-lowest`, `--surface`, `--surface-low`, `--surface-container`, `--surface-high`, `--surface-highest`, `--surface-bright`;
|
||||||
|
- tekst: `--text`, `--text-strong`, `--text-muted`, `--text-faint`;
|
||||||
|
- signalen: `--cyan`, `--cyan-dim`, `--emerald`, `--indigo`, `--amber`, `--coral`, `--danger`;
|
||||||
|
- structuur: `--outline`, `--outline-strong`, `--sidebar-width`, `--topbar-height`, `--content-gutter`, radii en `--shadow-signal`.
|
||||||
|
|
||||||
Geïmplementeerde tokenrollen omvatten onder meer:
|
De light variant gebruikt dezelfde semantische tokens en informatiehiërarchie. Component-CSS bevat geen eigen hardcoded palette; uitzonderingen zijn alleen documentmetadata zoals `theme-color` en e-mailtemplates buiten de cockpit.
|
||||||
|
|
||||||
```css
|
## Typografie en iconen
|
||||||
--bg
|
|
||||||
--bg-deep
|
|
||||||
--surface
|
|
||||||
--surface-low
|
|
||||||
--surface-high
|
|
||||||
--surface-bright
|
|
||||||
--text
|
|
||||||
--text-soft
|
|
||||||
--muted
|
|
||||||
--border
|
|
||||||
--border-strong
|
|
||||||
--primary
|
|
||||||
--primary-strong
|
|
||||||
--positive
|
|
||||||
--warning
|
|
||||||
--danger
|
|
||||||
--signal-glow
|
|
||||||
--radius-sm
|
|
||||||
--radius
|
|
||||||
```
|
|
||||||
|
|
||||||
Donkere modus is de productstandaard. De gebruiker kan lokaal wisselen via `data-theme`; opslag is progressief en
|
- Headlines: lokale systeemstack die Geist benadert (`Segoe UI Variable Display`, Aptos Display, Segoe UI).
|
||||||
mag in een afgeschermde browsercontext uitvallen zonder de bediening te breken.
|
- Body: `Segoe UI Variable Text`, Aptos en systeemfallbacks.
|
||||||
|
- Technische metadata: Cascadia Mono, SFMono/Consolas.
|
||||||
|
- Geen externe font- of iconrequest; iconen komen uit één lokale inline SVG-sprite.
|
||||||
|
- Score, datum en metadata blijven tekstueel leesbaar en steunen nooit alleen op kleur of vorm.
|
||||||
|
|
||||||
## 3. Typografie
|
## Layoutsysteem
|
||||||
|
|
||||||
- systeemfontstack, geen externe fontrequest;
|
- Vaste technische sidebar van 256 px en contexttopbar op desktop.
|
||||||
- basis 16px;
|
- Flexibel datacanvas met een maximum van 2240 px; op 1920/2560 px benutten feeds en intelligencepanelen de extra breedte.
|
||||||
- body line-height ongeveer 1,55;
|
- Bij 1180 px stapelen de zwaarste rails; bij 820 px wordt de sidebar een drawer met mobiele tabbar; bij 560 px worden cards, forms en intelligenceblokken éénkoloms.
|
||||||
- compacte metadata 0,8–0,9rem maar nooit onder bruikbare leesgrootte;
|
- Kanban, pipeline en datatabellen mogen alleen binnen een gelabelde lokale container horizontaal scrollen. Het document zelf heeft geen horizontale overflow.
|
||||||
- titels met duidelijke schaal, niet alleen gewicht;
|
- Sticky actions houden rekening met de mobiele tabbar en bedekken geen essentiële informatie.
|
||||||
- cijfers voor scores mogen tabular nums gebruiken.
|
|
||||||
|
|
||||||
## 4. Spacing en layout
|
## Kerncomponenten
|
||||||
|
|
||||||
- 4/8px-gebaseerde schaal;
|
- `cockpit-sidebar`, `cockpit-topbar`, `mobile-tabbar`: globale shell en navigatie.
|
||||||
- contentcontainer maximaal 2240px; vanaf 1850px gebruikt de cockpit extra resultaatkolommen en
|
- `cockpit-heading`, `section-heading`, `eyebrow`, `section-kicker`: informatiehiërarchie.
|
||||||
contextpanelen in plaats van alleen langere tekstregels;
|
- `stat-card`, `panel`, `tonal-panel`, `result-card`: tonale contentlagen.
|
||||||
- kaarten met consistente padding 20–24px desktop, 16px mobiel;
|
- `pill-*`, `status-beacon`: status met zichtbare tekst naast kleur.
|
||||||
- minimaal 44×44px touch targets voor primaire interactie;
|
- `intelligence-score`, `hero-score`, `score-components`: match en datakwaliteit als afzonderlijke begrippen.
|
||||||
- vaste zijbalk van 272px boven 900px, toegankelijke uitschuifnavigatie daaronder;
|
- `filter-console`, `active-filters`: server-side filters en deelbare querystrings.
|
||||||
- grids breken rond 1850px, 1350px, 1180px, 900px en 680px logisch af;
|
- `pipeline-board`, `activity-timeline`, `data-table-wrap`: taakgerichte datapatronen met toegankelijke fallback.
|
||||||
- vaste/sticky elementen mogen content niet bedekken.
|
- `form-section`, `choice-field`, `profile-preview`: echte Django-formulieren met begeleide selecties en server-rendered bewijs.
|
||||||
|
- `empty-state`, `toast-stack`, fouttemplates: consistente lege, success-, fout- en onbekende staten.
|
||||||
|
|
||||||
## 5. Componenten
|
## Interactie
|
||||||
|
|
||||||
### Button
|
Vanilla JavaScript is alleen progressive enhancement voor drawer, disclosures, viewtoggle, zoekshortcut en thema. Alle links, filters, formulieren, statuswijzigingen en mutaties werken server-side. Motion is functioneel, kort en uitgeschakeld via `prefers-reduced-motion`.
|
||||||
|
|
||||||
Varianten:
|
## Reviewchecklist
|
||||||
|
|
||||||
- primary — één primaire actie per context;
|
- één duidelijke primaire taak en één `h1` per pagina;
|
||||||
- secondary — normale navigatie/opslaan;
|
- echte data of expliciet “Niet gemeten/Onbekend/Niet geconfigureerd”;
|
||||||
- ghost — lage nadruk;
|
- geen controls zonder serveractie;
|
||||||
- danger — destructief met bevestiging;
|
- consistente focusring, tekstlabels en minimaal bruikbare touch targets;
|
||||||
- compact icon+label — vacaturefeedback.
|
- reflow zonder documentoverflow op 360 px en dynamische benutting tot 2560 px;
|
||||||
|
- lange Nederlandse labels, werkgeversnamen en URL's breken veilig;
|
||||||
States: hover, focus-visible, active, disabled, busy. Disabled blijft leesbaar en verklaarbaar.
|
- geen externe runtimeassets, oude shell of parallel frontendpad.
|
||||||
|
|
||||||
### Badge/status pill
|
|
||||||
|
|
||||||
Bevat altijd tekst. Rollen: strong, possible, weak, hidden, active, review, deny, quarantined, expired. Gebruik niet alleen rood/groen.
|
|
||||||
|
|
||||||
### Card
|
|
||||||
|
|
||||||
Semantische header/body/footer. Hele kaart niet klikbaar wanneer er meerdere interne acties zijn; titel/link is de primaire link.
|
|
||||||
|
|
||||||
### Score
|
|
||||||
|
|
||||||
Score = getal/100 + recommendationtekst. Confidence wordt als “Datakwaliteit hoog/middel/laag” of exact percentage in detail getoond. Geen cirkeldiagram nodig voor één waarde.
|
|
||||||
|
|
||||||
### Form
|
|
||||||
|
|
||||||
- label boven veld;
|
|
||||||
- hint vóór fout;
|
|
||||||
- fout gekoppeld via `aria-describedby`;
|
|
||||||
- required expliciet;
|
|
||||||
- JSON-achtige lijstvelden uiteindelijk vervangen door chips/multi-select;
|
|
||||||
- opslaan bevestigt, maar verliest scroll/focus niet onnodig.
|
|
||||||
|
|
||||||
### Alert
|
|
||||||
|
|
||||||
Info/success/warning/error met icoon, titel en tekst. Alerts zijn `role=status` of `role=alert` afhankelijk van urgentie.
|
|
||||||
|
|
||||||
### Table/list
|
|
||||||
|
|
||||||
Kolomkoppen semantisch; op mobiel cards of stacked definition list. Actiekolom niet te breed.
|
|
||||||
|
|
||||||
## 6. Motion
|
|
||||||
|
|
||||||
- alleen functionele transities 120–200ms;
|
|
||||||
- respecteer `prefers-reduced-motion`;
|
|
||||||
- geen automatische carrousels, pulserende scores of decoratieve parallax.
|
|
||||||
|
|
||||||
## 7. Iconen
|
|
||||||
|
|
||||||
Gebruik eenvoudige inline SVG's met `aria-hidden=true` naast zichtbare tekst. Geen externe iconfont. Een icon-only button vereist accessible label/tooltips.
|
|
||||||
|
|
||||||
## 8. Datavisualisatie
|
|
||||||
|
|
||||||
Gebruik balken voor scorecomponenten met numerieke tekst. Kleur ondersteunt, maar label/waarde draagt betekenis. Grafieken zijn niet nodig zolang data laag-volume is.
|
|
||||||
|
|
||||||
## 9. Designreviewchecklist
|
|
||||||
|
|
||||||
- primaire taak binnen één scherm duidelijk;
|
|
||||||
- geen ruwe technische identifiers in dagelijkse UI;
|
|
||||||
- empty/error/loading states aanwezig;
|
|
||||||
- focusvolgorde logisch;
|
|
||||||
- contrast en zoom 200% gecontroleerd;
|
|
||||||
- mobiel 320px breed bruikbaar;
|
|
||||||
- lange titels/werkgevers/URL's breken veilig;
|
|
||||||
- Nederlands consistent;
|
|
||||||
- scoreverklaring niet verstopt achter kleur.
|
|
||||||
|
|||||||
@@ -13,8 +13,8 @@ De ontvangen ZIP `stitch_vacatureradar_intelligence_cockpit.zip` is geïnventari
|
|||||||
| Zoekprofiel editor | 1600×1280 | configuratiestappen met vaste radarpreview | `/profiles/<id>/` · `profiles/edit.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` |
|
| 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` |
|
| 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` |
|
| Activiteitenlogboek | 1600×1441 | filterbare technische tijdlijn met samenvatting | `/jobs/activity/` · `activity/list.html` |
|
||||||
| Werkgevers intelligence | 1600×931 | employer table met intelligence-detailrail | `/employers/` en `/employers/<id>/` · employer templates |
|
| Werkgevers intelligence | 1600×931 | employer table met intelligence-detailrail | `/jobs/employers/` en `/jobs/employers/<id>/` · employer templates |
|
||||||
|
|
||||||
## Tokens en herbruikbare bouwstenen
|
## Tokens en herbruikbare bouwstenen
|
||||||
|
|
||||||
|
|||||||
@@ -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.
|
||||||
+39
-143
@@ -1,171 +1,67 @@
|
|||||||
# UX-specificatie
|
# UX-specificatie
|
||||||
|
|
||||||
## 1. Ervaringsprincipe
|
## Ervaringsprincipe
|
||||||
|
|
||||||
VacatureRadar voelt niet als een zoekmachine maar als een rustige persoonlijke inbox. De gebruiker ziet eerst beslisbare informatie en pas daarna technische details. Bronbeheer en parserproblemen blijven beschikbaar, maar domineren de dagelijkse flow niet.
|
VacatureRadar is een persoonlijke intelligence-cockpit: eerst beslisbare informatie, daarna bewijs en technische details. Het product claimt alleen wat uit echte vacatures, scores, bronruns en gebruikersacties kan worden afgeleid. Ervaring en senioriteitslabels zijn context, nooit een blokkerende scorefactor.
|
||||||
|
|
||||||
## 2. Informatiearchitectuur
|
## Informatiearchitectuur
|
||||||
|
|
||||||
Hoofdnavigatie:
|
De desktopnavigatie groepeert:
|
||||||
|
|
||||||
1. **Vandaag** — beste matches en kernstatus;
|
1. Overzicht;
|
||||||
2. **Vacatures** — volledige doorzoekbare lijst;
|
2. Nieuwe matches en het volledige vacaturearchief;
|
||||||
3. **Sollicitaties** — dossiers en opvolging;
|
3. Skillsradar;
|
||||||
4. **Profiel** — voorkeuren en drempels;
|
4. Sollicitatiepipeline;
|
||||||
5. **Bronnen** — source health en retries;
|
5. Werkgeversradar;
|
||||||
6. **Systeem** — health, versies en beheercontext.
|
6. Zoekprofiel;
|
||||||
|
7. Bronnen;
|
||||||
|
8. Automatisering;
|
||||||
|
9. Activiteit.
|
||||||
|
|
||||||
Op mobiel wordt dit een compacte uitklapbare navigatie; primaire vacatureacties blijven binnen duimbereik.
|
Mobiel blijven Overzicht, Matches, Pipeline en Profiel in de vaste tabbar; alle routes blijven bereikbaar via de toegankelijke drawer.
|
||||||
|
|
||||||
## 3. Dashboard “Vandaag”
|
## Schermgedrag
|
||||||
|
|
||||||
### Doel
|
### Overzicht
|
||||||
|
|
||||||
Binnen 30 seconden weten of er iets relevants is.
|
Toont echte dag-KPI's, beste recente radarselectie, dagconclusie, open opvolging, recente auditgebeurtenissen en bronstatus. Beste matches zijn visueel dominant; onbekende trends worden niet gesimuleerd.
|
||||||
|
|
||||||
### Volgorde
|
### Vacatureverkenner en detail
|
||||||
|
|
||||||
1. paginatitel + korte samenvatting;
|
De verkenner combineert serverfilters, sortering, actieve filterchips, paginering en op breed scherm een geselecteerd intelligencepaneel. Standaard worden alleen aantoonbaar IT-relevante, niet hard uitgesloten vacatures getoond. Het volledige bronarchief blijft expliciet bereikbaar.
|
||||||
2. KPI's: nieuwe vandaag, actieve vacatures, open dossiers, ongezonde bronnen;
|
|
||||||
3. kaarten, descending score;
|
|
||||||
4. lege toestand met concrete uitleg;
|
|
||||||
5. subtiele link naar alle vacatures/bronnen.
|
|
||||||
|
|
||||||
### Matchkaart
|
Het detail scheidt matchscore, recommendation en datakwaliteit; toont componentbewijs, positieve signalen, concerns, skills, vacaturetekst, provenance, bronnen, versies en dossierstatus. Externe bronlinks zijn veilig en nooit een automatische sollicitatie.
|
||||||
|
|
||||||
Boven de vouw:
|
### Sollicitatiepipeline
|
||||||
|
|
||||||
- recommendationlabel;
|
Kanban is de visuele standaard; de lijstweergave en statusselectie zijn de toegankelijke fallback. Statuswijzigingen zijn echte CSRF-beveiligde POST-acties en schrijven een tijdlijnevent. Dossieredit toont snapshot, contact, notities, documentenstatus en activiteit.
|
||||||
- score als `86/100` en confidence apart;
|
|
||||||
- functietitel;
|
|
||||||
- werkgever;
|
|
||||||
- locatie + werkvorm;
|
|
||||||
- maximaal twee kernpluspunten;
|
|
||||||
- maximaal één belangrijkste concern;
|
|
||||||
- acties: bekijken, interessant, bewaren, verbergen, gesolliciteerd.
|
|
||||||
|
|
||||||
Regels:
|
### Zoekprofiel en skillsradar
|
||||||
|
|
||||||
- geen score zonder label/uitleg;
|
De configurator groepeert profielbasis, rollen, technologiesignalen, regio, werkvorm en overige voorkeuren. Postcode volstaat; gemeente en coördinaten komen uit de gelicenseerde lokale dataset. Rollen en skills zijn selecties/checkboxes, geen ruwe JSON. De preview gebruikt de laatste echte score en revisiehistoriek.
|
||||||
- onbekende data als “Niet vermeld” of “Nog niet berekend”;
|
|
||||||
- hard uitgesloten jobs niet op Vandaag;
|
|
||||||
- dubbele aliassen niet als aparte kaart.
|
|
||||||
|
|
||||||
## 4. Vacaturelijst
|
De skillsradar toont vraagvolume, profieldekking, expliciet skillveldbewijs versus tekstsignalen en niet-blokkerende leerkansen.
|
||||||
|
|
||||||
Filters:
|
### Bronnen en automatisering
|
||||||
|
|
||||||
- vrije tekst;
|
Bronnen tonen policy en operationele status apart, plus laatste run, volgende planning, parser, tellingen, retry, imports en gebruikersgescopeerde platformmailboxen. Directe crawling van denylistplatformen blijft verboden.
|
||||||
- relevantiefocus: standaard aantoonbare IT-titels, met expliciet volledig bronarchief;
|
|
||||||
- radarselectie: standaard geen harde uitsluitingen of verborgen score, met aparte inspectiefilters;
|
|
||||||
- status;
|
|
||||||
- recommendation/scoreband;
|
|
||||||
- werkvorm;
|
|
||||||
- regio;
|
|
||||||
- werkgeverstype;
|
|
||||||
- feedbackstatus.
|
|
||||||
|
|
||||||
Desktop gebruikt een compacte filterbalk; mobiel een disclosurepanel. Filters blijven in querystring zodat bookmarks en back navigation werken.
|
Automatisering toont de echte 24-uursketen, database/readiness, bronruns, scoring en notificaties. Worker-, AI- of browserstatus wordt als niet gemeten/niet geconfigureerd gelabeld wanneer geen betrouwbare probe bestaat.
|
||||||
|
|
||||||
De standaardvolgorde is persoonlijke matchscore, niet importtijd. Niet-IT-inhoud wordt niet
|
### Activiteit en werkgevers
|
||||||
verwijderd: ze blijft uitsluitend via `Volledig archief` bereikbaar. Een beschrijvingshit alleen
|
|
||||||
mag nooit een niet-IT-titel promoveren.
|
|
||||||
|
|
||||||
Tabel of kaarten kiezen op breedte. Geen horizontale scroll voor kernvelden.
|
Activiteit is een gepagineerde, filterbare tijdlijn uit bronruns, vacatureversies, feedback, dossiers, notificaties en profielrevisies. Persoonlijke events zijn gebruikersgescopeerd.
|
||||||
|
|
||||||
## 5. Vacaturedetail
|
Werkgevers combineert genormaliseerde werkgever-, vacature-, score-, bron- en dossierdata in een index/detailervaring. Sector, contact of marktclaims worden niet verzonnen.
|
||||||
|
|
||||||
Secties:
|
## States en copy
|
||||||
|
|
||||||
1. titel, werkgever, status, canonical link;
|
- Empty: verklaart waarom en biedt één relevante vervolgstap.
|
||||||
2. score-overzicht met componenten;
|
- Unknown: “Niet vermeld”, “Niet gemeten” of “Niet geconfigureerd”.
|
||||||
3. “Waarom aanbevolen” en aandachtspunten;
|
- Error/partial/stale: toont impact en een veilige retry waar ondersteund, nooit een stacktrace.
|
||||||
4. harde uitsluitingen indien via directe link geopend;
|
- Success: servermessage in een `aria-live` toast en blijvende nieuwe toestand.
|
||||||
5. vacaturetekst (gesanitized);
|
- Copy is Nederlands, direct en niet-oordelend: “Mogelijke match” en “Niet teruggevonden” in plaats van absolute geschiktheidsclaims.
|
||||||
6. voorwaarden/skills/locatie;
|
|
||||||
7. bronnen en provenance;
|
|
||||||
8. wijzigingshistorie;
|
|
||||||
9. sollicitatiestatus/notities.
|
|
||||||
|
|
||||||
Bronbewijs wordt technisch maar scanbaar getoond: veld, methode, confidence, excerpt en bron.
|
## Responsiveness
|
||||||
|
|
||||||
## 6. Profielwizard/editor
|
Desktop bewaart de Stitch-kolomverhoudingen. Tablet stapelt intelligence-rails onder de hoofdtaak. Mobiel herschikt kaarten en forms; wide data gebruikt een lokale scroller. De browsermatrix omvat 360×800, 390×844, 768×1024, 1024×768, 1280×800, 1440×900 en aanvullende 1920/2560px-controles.
|
||||||
|
|
||||||
De eerste onboarding wordt in maximaal vijf logische stappen opgezet:
|
|
||||||
|
|
||||||
1. rollen en ongewenste titels;
|
|
||||||
2. skills en ongewenste verplichte skills;
|
|
||||||
3. regio, afstand en werkvorm;
|
|
||||||
4. contract en employerpreferences;
|
|
||||||
5. digest en samenvatting.
|
|
||||||
|
|
||||||
De bestaande editor mag één pagina blijven voor MVP, maar groepeert velden visueel en geeft voorbeeldsyntax. JSON mag in de interne modelvorm bestaan; de eindgebruiker ziet uiteindelijk chips/checkboxes, geen ruwe JSON.
|
|
||||||
|
|
||||||
Opslaan toont:
|
|
||||||
|
|
||||||
- welke harde regels actief zijn;
|
|
||||||
- scoregewichten in begrijpelijke labels;
|
|
||||||
- profielversie;
|
|
||||||
- mogelijkheid om learning uit/reset te zetten.
|
|
||||||
|
|
||||||
## 7. Bronnen
|
|
||||||
|
|
||||||
Bronkaart/-rij toont:
|
|
||||||
|
|
||||||
- naam en domein;
|
|
||||||
- type;
|
|
||||||
- policy en operationele status apart;
|
|
||||||
- laatste succes/fout;
|
|
||||||
- volgende run;
|
|
||||||
- parser/confidence;
|
|
||||||
- laatste tellingen;
|
|
||||||
- retryknop indien policy niet deny.
|
|
||||||
|
|
||||||
Kleur is nooit de enige indicator. `deny`, `review`, `quarantined` hebben tekst en icoon/patroon.
|
|
||||||
|
|
||||||
## 8. Sollicitaties
|
|
||||||
|
|
||||||
Kanban is niet noodzakelijk. Een duidelijke lijst met status, werkgever, functie, applied date, follow-up date en eerstvolgende actie is beter voor laag volume.
|
|
||||||
|
|
||||||
Dossierdetail/editor bevat:
|
|
||||||
|
|
||||||
- immutable vacaturesnapshot;
|
|
||||||
- huidige bronlink/status;
|
|
||||||
- contact;
|
|
||||||
- notities;
|
|
||||||
- documentenmanifest;
|
|
||||||
- tijdlijn van statuswijzigingen (backlog);
|
|
||||||
- opvolgdatum.
|
|
||||||
|
|
||||||
## 9. Meldingen
|
|
||||||
|
|
||||||
Digestcopy:
|
|
||||||
|
|
||||||
```text
|
|
||||||
2 sterke matches
|
|
||||||
4 mogelijke matches
|
|
||||||
11 automatisch uitgesloten
|
|
||||||
1 opgeslagen vacature sluit binnenkort
|
|
||||||
```
|
|
||||||
|
|
||||||
Elke vacature heeft titel, werkgever, locatie, score, twee redenen, één aandachtspunt en originele link. Geen volledige vacaturetekst in mail.
|
|
||||||
|
|
||||||
## 10. States
|
|
||||||
|
|
||||||
Iedere pagina specificeert:
|
|
||||||
|
|
||||||
- loading: alleen nodig bij async enhancement; serverrender toont normale response;
|
|
||||||
- empty: leg uit waarom en geef één relevante actie;
|
|
||||||
- error: concrete fout + veilige retry, geen stacktrace;
|
|
||||||
- partial: bron/resultaten beschikbaar met warning;
|
|
||||||
- stale: toon laatste succesvolle tijd en dat vernieuwing faalde;
|
|
||||||
- unauthorized: login en geen informatielek.
|
|
||||||
|
|
||||||
## 11. Copyrichtlijnen
|
|
||||||
|
|
||||||
- Nederlands, direct en niet-oordelend;
|
|
||||||
- “Mogelijke match” in plaats van “Je bent geschikt”;
|
|
||||||
- “Niet teruggevonden” in plaats van “Je mist”;
|
|
||||||
- “Rechtstreekse werkgeversbron” in plaats van absolute garantie;
|
|
||||||
- percentages alleen wanneer betekenis duidelijk is;
|
|
||||||
- technische bronfout in beheer, eenvoudige impacttekst op dashboard.
|
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ Legenda: **I** = geïmplementeerd en getest in de huidige MVP; **P** = gedeeltel
|
|||||||
| NFR-005 | I | domeinapps/services/adapters/ADRs | continue review |
|
| NFR-005 | I | domeinapps/services/adapters/ADRs | continue review |
|
||||||
| NFR-006 | I | offline pytest + coveragegate | VR-114 verbreedt e2e |
|
| NFR-006 | I | offline pytest + coveragegate | VR-114 verbreedt e2e |
|
||||||
| NFR-007 | P | `scripts/benchmark.py`, `tests/benchmark/test_benchmark.py` | VR-116 |
|
| NFR-007 | P | `scripts/benchmark.py`, `tests/benchmark/test_benchmark.py` | VR-116 |
|
||||||
| NFR-008 | I | semantische Stitch-dominante templates, zes viewports, dark/light en toetsenbordmenu | `tests/e2e/test_vr114_browser_and_accessibility.py`, `docs/design/validation/`, VR-118/119 |
|
| NFR-008 | I | volledige negen-schermen-Stitch-cockpit, acht viewports, dark/light, toetsenborddrawer en elf actuele screenshots | `tests/e2e/test_vr114_browser_and_accessibility.py`, `tests/integration/test_intelligence_views.py`, `artifacts/visual-validation/`, VR-209–213 |
|
||||||
| NFR-009 | I | lokale SQLite en Docker/Unraidconfig, release-smoke en restore | VR-117 afgerond |
|
| NFR-009 | I | lokale SQLite en Docker/Unraidconfig, release-smoke en restore | VR-117 afgerond |
|
||||||
| NFR-010 | I | `apps/sources/services/health.py`, `apps/sources/tasks.py`, `apps/core/views.py`, `config/settings.py` | `tests/integration/test_source_health.py` | VR-112 observability |
|
| NFR-010 | I | `apps/sources/services/health.py`, `apps/sources/tasks.py`, `apps/core/views.py`, `config/settings.py` | `tests/integration/test_source_health.py` | VR-112 observability |
|
||||||
|
|
||||||
@@ -101,3 +101,4 @@ Iedere backlogtaak die een requirement wijzigt, werkt in dezelfde commit deze ma
|
|||||||
- VR-206 voegt een titelgestuurde IT-relevantiegrens vóór scoring/AI toe, maakt de persoonlijke radarselectie de standaard en benut Stitch-panelen dynamisch tot 2560 px. Bewijs staat in `apps/jobs/services/relevance.py`, de score-/viewtests en `docs/design/validation/VR-206_AUDIT.md`.
|
- VR-206 voegt een titelgestuurde IT-relevantiegrens vóór scoring/AI toe, maakt de persoonlijke radarselectie de standaard en benut Stitch-panelen dynamisch tot 2560 px. Bewijs staat in `apps/jobs/services/relevance.py`, de score-/viewtests en `docs/design/validation/VR-206_AUDIT.md`.
|
||||||
- VR-207 breidt het profiel uit met gegroepeerde field-/infrastructuurrollen, cv-skills en een ervaringsband. Skill-evidence is op vier treffers begrensd, afwezigheid wordt niet als tekort gepresenteerd en ambigue fieldtitels vereisen een onafhankelijk IT-contextsignaal. Persoonlijke cv-waarden staan uitsluitend in de lokale gebruikersdatabase; repositorytests en documentatie blijven gesaneerd.
|
- VR-207 breidt het profiel uit met gegroepeerde field-/infrastructuurrollen, cv-skills en een ervaringsband. Skill-evidence is op vier treffers begrensd, afwezigheid wordt niet als tekort gepresenteerd en ambigue fieldtitels vereisen een onafhankelijk IT-contextsignaal. Persoonlijke cv-waarden staan uitsluitend in de lokale gebruikersdatabase; repositorytests en documentatie blijven gesaneerd.
|
||||||
- VR-208 maakt die ervaringsband uitsluitend informatief en verwijdert ook senioriteitsinvloed uit de AI-component en feedbacklearning. De gebruikersgescopeerde Skillsradar analyseert actuele niet-uitgesloten IT-vacatures van actieve bronnen, onderscheidt skillveldbewijs van tekstinferentie en toont profieldekking en mogelijke leerkansen met categorie-/dekkingsfilters.
|
- VR-208 maakt die ervaringsband uitsluitend informatief en verwijdert ook senioriteitsinvloed uit de AI-component en feedbacklearning. De gebruikersgescopeerde Skillsradar analyseert actuele niet-uitgesloten IT-vacatures van actieve bronnen, onderscheidt skillveldbewijs van tekstinferentie en toont profieldekking en mogelijke leerkansen met categorie-/dekkingsfilters.
|
||||||
|
- VR-209–213 vervangen de volledige browserfrontend door de negen Stitch Intelligence Cockpit-composities. De nieuwe shell, dashboard/vacature-intelligence, pipeline/profiel/bronnen, automation/activiteit/werkgevers en responsive validatie zijn gekoppeld aan echte read models en serveracties. Bewijs staat in `docs/design/STITCH_INTEGRATION_REPORT.md`, route-/scope-/querytests en de elf beelden onder `artifacts/visual-validation/`.
|
||||||
|
|||||||
Reference in New Issue
Block a user