[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68cbd2efc64881918cf4fdaa1e1eb97c","versionInt","title","Boekhoudkeuzehulp – Interactieve Widget (prototype)","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\n\n/**\n * Boekhoudkeuzehulp – Interactieve Widget (Prototype)\n * ---------------------------------------------------\n * Doel: In 1 minuut advies: Zelf doen • Hybride • Uitbesteden\n * Taal: NL (B1), jij-vorm\n * Styling: TailwindCSS (geen externe UI libs nodig)\n * Gebruik: \n *\n * Features:\n * - 7 korte vragen (1 per scherm) met progress bar\n * - Transparante score-logica + uitleg “Waarom dit advies?”\n * - Persoonlijke tips op basis van antwoorden\n * - Sticky CTA (mobiel) en event hooks voor GA4 / GTM\n * - Volledig client-side, geen opslag zonder toestemming\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Config – vragen, wegingen, tips\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst CONFIG = {\n questions: [\n {\n id: \"omzet\",\n label: \"Wat is je geschatte omzet per jaar?\",\n type: \"choice\",\n options: [\"< €25.000\", \"€25.000 – €75.000\", \"> €75.000\"],\n help: \"Kijk naar je huidige planning of je laatste jaar.\"\n },\n {\n id: \"uren\",\n label: \"Hoeveel tijd heb je per maand voor administratie?\",\n type: \"choice\",\n options: [\"0–3 uur\", \"4–7 uur\", \"8+ uur\"],\n help: \"Tel ook tijd voor bonnetjes en herinneringen mee.\"\n },\n {\n id: \"comfort\",\n label: \"Hoe comfortabel voel je je met boekhouden?\",\n type: \"likert\",\n min: 1,\n max: 5,\n left: \"Onzeker\",\n right: \"Zeer zeker\",\n help: \"1 = ik vind dit lastig, 5 = ik kan dit prima.\"\n },\n {\n id: \"facturen\",\n label: \"Hoeveel verkoopfacturen verstuur je per maand?\",\n type: \"choice\",\n options: [\"0–5\", \"6–20\", \">20\"],\n help: \"Ruwe schatting is prima.\"\n },\n {\n id: \"btw\",\n label: \"Hoe zit je btw in elkaar?\",\n type: \"choice\",\n options: [\"Simpel (meestal 21%)\", \"Mix (9% en 21%)\", \"Complex (EU/verlegd)\"],\n help: \"Kies de optie die het vaakst voorkomt.\"\n },\n {\n id: \"fouten\",\n label: \"Heb je eerder fouten/boetes gehad voor je administratie?\",\n type: \"choice\",\n options: [\"Nooit\", \"Soms\", \"Vaak\"],\n help: \"Eerlijk invullen helpt bij beter advies.\"\n },\n {\n id: \"advies\",\n label: \"Wil je dat een pro regelmatig meekijkt en adviseert?\",\n type: \"choice\",\n options: [\"Nee\", \"Af en toe\", \"Ja, graag\"],\n help: \"Controle en vragenlijn geven rust.\"\n }\n ],\n // Scoretabel: per antwoord per uitkomst een score-optelling\n weights: {\n omzet: {\n \"< €25.000\": { self: 2, hybrid: 1, outsource: 0 },\n \"€25.000 – €75.000\": { self: 1, hybrid: 2, outsource: 1 },\n \"> €75.000\": { self: 0, hybrid: 1, outsource: 2 }\n },\n uren: {\n \"0–3 uur\": { self: 2, hybrid: 1, outsource: 0 },\n \"4–7 uur\": { self: 1, hybrid: 2, outsource: 1 },\n \"8+ uur\": { self: 0, hybrid: 1, outsource: 2 }\n },\n comfort: {\n // Likert wordt apart afgehandeld (1–5)\n },\n facturen: {\n \"0–5\": { self: 2, hybrid: 1, outsource: 0 },\n \"6–20\": { self: 1, hybrid: 2, outsource: 1 },\n \">20\": { self: 0, hybrid: 1, outsource: 2 }\n },\n btw: {\n \"Simpel (meestal 21%)\": { self: 2, hybrid: 1, outsource: 0 },\n \"Mix (9% en 21%)\": { self: 1, hybrid: 2, outsource: 1 },\n \"Complex (EU/verlegd)\": { self: 0, hybrid: 1, outsource: 2 }\n },\n fouten: {\n \"Nooit\": { self: 2, hybrid: 1, outsource: 0 },\n \"Soms\": { self: 0, hybrid: 1, outsource: 2 },\n \"Vaak\": { self: 0, hybrid: 1, outsource: 2 }\n },\n advies: {\n \"Nee\": { self: 2, hybrid: 1, outsource: 0 },\n \"Af en toe\": { self: 0, hybrid: 2, outsource: 1 },\n \"Ja, graag\": { self: 0, hybrid: 1, outsource: 2 }\n }\n },\n likertMap: (val) => {\n // comfort 4–5 -> self, 3 -> hybrid, 1–2 -> outsource\n if (val >= 4) return { self: 2, hybrid: 1, outsource: 0 };\n if (val === 3) return { self: 1, hybrid: 2, outsource: 1 };\n return { self: 0, hybrid: 1, outsource: 2 };\n },\n // Adviescontent\n results: {\n self: {\n title: \"Advies: Zelf doen\",\n why: [\n \"Weinig facturen of simpele btw.\",\n \"Je voelt je zeker met boekhouden.\",\n \"Je houdt grip met een vaste weekroutine.\"\n ],\n needs: [\n \"Boekhoudpakket met scan-en-herken\",\n \"Bankkoppeling + categorie-regels\",\n \"Factuursjabloon met ubl\"\n ],\n cta: { label: \"Start met een pakket\", href: \"#start-pakket\" }\n },\n hybrid: {\n title: \"Advies: Hybride\",\n why: [\n \"Jij doet de basis, een pro controleert.\",\n \"Mix van btw-tarieven of groei in zicht.\",\n \"Rust door maandelijkse check en vragenlijn.\"\n ],\n needs: [\n \"Jij scant/boekt, pro controleert\",\n \"btw-aangifte en jaarwerk-check\",\n \"Heldere afspraken over responstijd\"\n ],\n cta: { label: \"Plan een gratis intake\", href: \"#plan-intake\" }\n },\n outsource: {\n title: \"Advies: Uitbesteden\",\n why: [\n \"Veel facturen of complexe btw.\",\n \"Weinig tijd/zin voor admin.\",\n \"Zekerheid bij aangiftes en herinneringen.\"\n ],\n needs: [\n \"Volledige boekhouding en rappels\",\n \"Aangiftes + maandrapportage\",\n \"Vaste contactpersoon\"\n ],\n cta: { label: \"Vraag een prijsindicatie\", href: \"#prijsindicatie\" }\n }\n },\n // Tips op basis van triggers\n tipsRules: [\n {\n id: \"kor\",\n when: (a) => a.omzet === \"< €25.000\",\n text: \"Check de kor: minder btw-administratie kan schelen.\"\n },\n {\n id: \"auto_rules\",\n when: (a) => a.uren === \"8+ uur\",\n text: \"Automatiseer met bankkoppeling en regels voor vaste leveranciers.\"\n },\n {\n id: \"sjablonen\",\n when: (a) => typeof a.comfort === \"number\" && a.comfort <= 2,\n text: \"Werk met sjablonen en een weekroutine (10 min).\"\n },\n {\n id: \"ubl\",\n when: (a) => a.facturen === \">20\",\n text: \"Gebruik ubl-facturen. Minder typewerk, minder fouten.\"\n },\n {\n id: \"pro_start\",\n when: (a) => a.btw === \"Complex (EU/verlegd)\",\n text: \"Laat een pro de eerste 2 maanden meekijken.\"\n },\n {\n id: \"controleronde\",\n when: (a) => a.fouten === \"Soms\" || a.fouten === \"Vaak\",\n text: \"Plan maandelijkse controlerondes en zet herinneringen aan.\"\n },\n {\n id: \"adviesbehoefte\",\n when: (a) => a.advies === \"Ja, graag\",\n text: \"Plan een korte intake. Neem je vragenlijst mee.\"\n }\n ]\n};\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction pushEvent(name, payload = {}) {\n // Koppeling met GA4/GTM – veilig als optioneel\n try {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({ event: name, ...payload });\n } catch (_) {}\n}\n\nfunction Progress({ step, total }) {\n const pct = Math.round(((step + 1) / total) * 100);\n return (\n

\n Vraag {step + 1} van {total}\n {pct}%\n

\n \n

\n );\n}\n\nfunction Choice({ options, value, onChange }) {\n return (\n

\n {options.map((opt) => (\n onChange(opt)}\n className={[\n \"px-4 py-3 rounded-xl border text-left\",\n value === opt\n ? \"border-emerald-600 bg-emerald-50\"\n : \"border-gray-300 hover:border-gray-400\"\n ].join(\" \")}\n aria-pressed={value === opt}\n >\n {opt}\n \n ))}\n

\n );\n}\n\nfunction Likert({ min = 1, max = 5, value, onChange, left, right }) {\n const items = Array.from({ length: max - min + 1 }, (_, i) => i + min);\n return (\n

\n {left}\n {right}\n

\n {items.map((n) => (\n onChange(n)}\n className={[\n \"flex-1 py-3 rounded-xl border\",\n value === n\n ? \"border-emerald-600 bg-emerald-50\"\n : \"border-gray-300 hover:border-gray-400\"\n ].join(\" \")}\n aria-pressed={value === n}\n >\n {n}\n \n ))}\n

\n );\n}\n\nfunction StickyCTA({ label, onClick }) {\n return (\n

\n \n {label}\n \n

\n );\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Hoofdcomponent\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport default function BoekhoudKeuzehulp() {\n const total = CONFIG.questions.length;\n const [step, setStep] = useState(0);\n const [answers, setAnswers] = useState({});\n const [finished, setFinished] = useState(false);\n\n useEffect(() => {\n pushEvent(\"quiz_start\");\n }, []);\n\n const q = CONFIG.questions[step];\n\n function updateAnswer(id, val) {\n setAnswers((prev) => ({ ...prev, [id]: val }));\n pushEvent(\"quiz_question_answered\", { q_id: id, value: val });\n }\n\n function next() {\n if (step < total - 1) setStep((s) => s + 1);\n else setFinished(true);\n }\n\n function prev() {\n if (step > 0) setStep((s) => s - 1);\n }\n\n const result = useMemo(() => {\n if (!finished) return null;\n // Score berekenen\n const sum = { self: 0, hybrid: 0, outsource: 0 };\n\n for (const question of CONFIG.questions) {\n const id = question.id;\n const val = answers[id];\n if (val == null) continue;\n\n if (id === \"comfort\" && typeof val === \"number\") {\n const likertScore = CONFIG.likertMap(val);\n sum.self += likertScore.self;\n sum.hybrid += likertScore.hybrid;\n sum.outsource += likertScore.outsource;\n } else {\n const w = CONFIG.weights[id]?.[val];\n if (w) {\n sum.self += w.self;\n sum.hybrid += w.hybrid;\n sum.outsource += w.outsource;\n }\n }\n }\n\n // Drempelregels\n const arr = [\n { key: \"self\", score: sum.self },\n { key: \"hybrid\", score: sum.hybrid },\n { key: \"outsource\", score: sum.outsource }\n ].sort((a, b) => b.score - a.score);\n\n let winner = arr[0].key;\n // Gelijkspel regels\n const diff = arr[0].score - arr[1].score;\n if (diff === 0) {\n // voorkeur richting zekerheid\n if ((arr[0].key === \"self\" && arr[1].key === \"hybrid\") ||\n (arr[1].key === \"self\" && arr[0].key === \"hybrid\")) {\n winner = \"hybrid\";\n } else {\n winner = \"outsource\"; // tie tussen hybrid/outsource of anders\n }\n }\n\n const content = CONFIG.results[winner];\n\n // Tips bepalen (max 5)\n const tips = CONFIG.tipsRules\n .filter((r) => {\n try { return r.when(answers); } catch { return false; }\n })\n .map((r) => ({ id: r.id, text: r.text }))\n .slice(0, 5);\n\n pushEvent(\"quiz_result\", { result: winner, score_self: sum.self, score_hybrid: sum.hybrid, score_outsource: sum.outsource });\n\n return { winner, sum, content, tips };\n }, [finished, answers]);\n\n function reset() {\n setStep(0);\n setAnswers({});\n setFinished(false);\n }\n\n return (\n

Boekhoudkeuzehulp

Klaar in 1 minuut. Eerlijk advies, meteen op maat. Zonder gedoe. Wel volgens de regels.

\n\n {!finished ? (\n

\n \n

{q.label}

\n {q.help &&

{q.help}

}\n\n {q.type === \"choice\" && (\n updateAnswer(q.id, v)}\n />\n )}\n\n {q.type === \"likert\" && (\n updateAnswer(q.id, v)}\n />\n )}\n

\n\n

\n \n Terug\n \n \n {step === total - 1 ? \"Toon advies\" : \"Volgende\"}\n \n

\n ) : (\n result && (\n

{result.content.title}

Waarom dit past

Dit heb je nodig

\n\n pushEvent(\"cta_click\", { label: result.content.cta.label })}\n className=\"inline-flex items-center gap-2 mt-4 px-4 py-2 rounded-xl bg-emerald-600 text-white\"\n >\n {result.content.cta.label}\n \n\n

Waarom dit advies?

We rekenen scores op basis van je antwoorden. Bij gelijkspel kiezen we voor meer zekerheid (eerst Hybride, anders Uitbesteden).

Scores – Zelf: {result.sum.self} • Hybride: {result.sum.hybrid} • Uitbesteden: {result.sum.outsource}

\n\n {result.tips.length > 0 && (\n

Persoonlijke tips

\n ✅\n {t.text}\n

\n )}\n\n

\n \n Opnieuw invullen\n \n pushEvent(\"cta_click\", { label: \"Download checklist\" })}\n className=\"px-4 py-2 rounded-xl border border-gray-300\"\n >\n Download checklist\n \n pushEvent(\"cta_click\", { label: \"Meer uitleg\" })}\n className=\"px-4 py-2 rounded-xl border border-gray-300\"\n >\n Meer uitleg\n \n

\n )\n )}\n

\n\n {/* Sticky CTA alleen tonen als resultaat beschikbaar is (mobiel) */}\n {finished && result && (\n {\n pushEvent(\"cta_click\", { label: result.content.cta.label });\n const a = document.createElement('a');\n a.href = result.content.cta.href;\n a.click();\n }} />\n )}\n\n

Privacy: we slaan je antwoorden niet op zonder toestemming.

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","1747847411368743552","traceTime",1778809839695]