BTW Priv\u00e9gebruik Auto Calculator<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <style>\n body {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .prose {\n max-width: 100%;\n }\n .prose h1, .prose h2, .prose h3 { margin-top: 1.2em; margin-bottom: 0.5em; }\n .prose p { margin-top: 0.5em; margin-bottom: 0.5em; }\n .prose ul, .prose ol { margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 1.5em; }\n .prose li > p { margin: 0; }\n .prose strong { color: inherit; }\n .prose blockquote {\n margin-left: 0;\n padding-left: 1em;\n border-left: 0.25em solid #e2e8f0;\n }\n\n <\/style>\n<script type=\"importmap\">\n{\n \"imports\": {\n \"react\": \"https:\/\/aistudiocdn.com\/react@^19.1.1\",\n \"react-dom\/client\": \"https:\/\/aistudiocdn.com\/react-dom@^19.1.1\/client\",\n \"react\/\": \"https:\/\/aistudiocdn.com\/react@^19.1.1\/\",\n \"@google\/genai\": \"https:\/\/aistudiocdn.com\/@google\/genai@^1.21.0\",\n \"marked\": \"https:\/\/aistudiocdn.com\/marked@^16.3.0\"\n }\n}\n<\/script>\n<\/head>\n<body class=\"bg-gray-100\">\n <div id=\"root\"><\/div>\n <script type=\"text\/babel\" data-type=\"module\">\nimport React, { useState, useMemo, useCallback } from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport { GoogleGenAI } from \"@google\/genai\";\nimport { marked } from 'marked';\n\n\n\/\/ --- START: Types (equivalent JS object) ---\nconst CalculationMethod = {\n WERKELIJK: 'werkelijk',\n FORFAITAIR: 'forfaitair',\n MARGEAUTO: 'margeauto',\n};\n\n\/\/ --- START: Gemini Service ---\nconst getFiscalAnalysis = async (ai, formData, rdwData) => {\n const prompt = `\n Je bent een deskundige Nederlandse fiscalist gespecialiseerd in BTW-regelgeving voor auto's van de zaak.\n Analyseer de volgende situatie voor de BTW-correctie voor priv\u00e9gebruik en geef een helder, gestructureerd advies in het Nederlands, opgemaakt in Markdown.\n\n **Situatie:**\n\n **1. Autogegevens (indien bekend via RDW):**\n - Voertuigsoort: ${rdwData?.voertuigsoort || 'Niet bekend'}\n - Catalogusprijs: \u20ac ${rdwData?.catalogusprijs?.toLocaleString('nl-NL') || 'Niet bekend'}\n - Datum eerste toelating: ${rdwData?.datum_eerste_toelating || 'Niet bekend'}\n - Leeftijd auto: ${rdwData?.leeftijd_in_jaren !== undefined ? `${rdwData.leeftijd_in_jaren} jaar` : 'Niet bekend'}\n\n **2. Gekozen berekeningsmethode en ingevoerde gegevens:**\n - Methode: ${formData.methode}\n - ${formData.methode === 'werkelijk' ? `\n - Totaal kilometers: ${formData.totaalKm}\n - Priv\u00e9kilometers: ${formData.priveKm}\n - Aanschafprijs (excl. BTW): \u20ac ${formData.aanschafExBtw.toLocaleString('nl-NL')}\n - BTW bij aankoop: \u20ac ${formData.btwBedragAankoop.toLocaleString('nl-NL')}\n ` : ''}\n - ${formData.methode === 'forfaitair' ? `\n - Catalogusprijs (incl. BTW): \u20ac ${formData.catalogusprijsInclBtw.toLocaleString('nl-NL')}\n ` : ''}\n - ${formData.methode === 'margeauto' ? `\n - Catalogusprijs (incl. BTW\/BPM): \u20ac ${formData.catalogusprijsMarge.toLocaleString('nl-NL')}\n - Totaal afgetrokken BTW op kosten: \u20ac ${formData.totaalAfgetrokkenBtwKosten.toLocaleString('nl-NL')}\n - Percentage voor vrijgestelde omzet: ${formData.percentageVrijgesteldeOmzet}%\n ` : ''}\n\n **Opdracht:**\n\n 1. **Beoordeel de gekozen methode:** Is de geselecteerde methode (${formData.methode}) logisch en toegestaan op basis van de verstrekte gegevens? Leg uit waarom wel of niet.\n 2. **Vergelijk met alternatieven:** Bespreek kort de andere methoden (werkelijk, 2,7% forfait, 1,5% forfait) en leg uit in welke situaties die gunstiger of juist ongunstiger zouden zijn dan de gekozen methode.\n 3. **Geef concreet advies:** Wat is, op basis van alle informatie, de meest waarschijnlijke fiscaal optimale keuze voor deze gebruiker? Motiveer je antwoord.\n 4. **Wijs op belangrijke aandachtspunten:** Noem eventuele valkuilen, administratieve vereisten (zoals een sluitende kilometerregistratie voor de 'werkelijk' methode), of andere relevante details.\n\n Structureer je antwoord met duidelijke koppen.\n `;\n\n try {\n const response = await ai.models.generateContent({\n model: 'gemini-2.5-flash',\n contents: prompt,\n });\n return response.text;\n } catch (error) {\n console.error(\"Error calling Gemini API:\", error);\n return \"Er is een fout opgetreden bij het communiceren met de Gemini API. Controleer de console voor meer details.\";\n }\n};\n\n\/\/ --- START: App Component ---\nconst App = () => {\n const [currentStep, setCurrentStep] = useState(0);\n const [formData, setFormData] = useState({\n kenteken: '',\n methode: CalculationMethod.WERKELIJK,\n totaalKm: 0,\n priveKm: 0,\n aanschafExBtw: 0,\n btwBedragAankoop: 0,\n catalogusprijsInclBtw: 0,\n catalogusprijsMarge: 0,\n totaalAfgetrokkenBtwKosten: 0,\n percentageVrijgesteldeOmzet: 0,\n ondernemerNaam: '',\n startDatum: new Date().toISOString().split('T')[0],\n aantalPeriodes: 12,\n periodeType: 'maand',\n emailAdres: '',\n });\n const [rdwData, setRdwData] = useState(null);\n const [rdwError, setRdwError] = useState(null);\n const [fiscalAdvice, setFiscalAdvice] = useState(null);\n const [isLoadingRdw, setIsLoadingRdw] = useState(false);\n const [isLoadingGemini, setIsLoadingGemini] = useState(false);\n const [isGeminiModalOpen, setIsGeminiModalOpen] = useState(false);\n const [geminiResponse, setGeminiResponse] = useState('');\n const [results, setResults] = useState([]);\n const [isUblModalOpen, setIsUblModalOpen] = useState(false);\n const [ublXml, setUblXml] = useState('');\n\n const ai = useMemo(() => {\n try {\n \/\/ Safely check for process.env.API_KEY without crashing the app\n if (typeof process !== 'undefined' && process.env && process.env.API_KEY) {\n return new GoogleGenAI({ apiKey: process.env.API_KEY });\n }\n } catch (e) {\n \/\/ This error is expected in a browser environment where 'process' is not defined.\n console.warn(\"Could not access process.env, which is normal in a browser.\");\n }\n console.warn(\"API_KEY environment variable not set. Gemini features will be disabled.\");\n return null;\n }, []);\n\n const handleInputChange = useCallback((e) => {\n const { id, value, type, name } = e.target;\n \n if (type === 'radio') {\n setFormData(prev => ({ ...prev, [name]: value }));\n return;\n }\n\n const isNumberInput = e.target.getAttribute('type') === 'number';\n setFormData(prev => ({\n ...prev,\n [id]: isNumberInput ? (value === '' ? 0 : parseFloat(value)) : value\n }));\n }, []);\n \n const handleRdwLookup = useCallback(async () => {\n setIsLoadingRdw(true);\n setRdwError(null);\n setRdwData(null);\n setFiscalAdvice(null);\n await new Promise(resolve => setTimeout(resolve, 1000));\n \n if (formData.kenteken.replace(\/-\/g, '').toUpperCase().startsWith('FAKE')) {\n setRdwError('Dit is een ongeldig kenteken. Probeer een ander.');\n } else {\n const mockData = {\n catalogusprijs: 52340,\n voertuigsoort: 'Personenauto',\n datum_eerste_toelating: '2022-03-15',\n leeftijd_in_jaren: Math.floor((new Date().getTime() - new Date('2022-03-15').getTime()) \/ (1000 * 60 * 60 * 24 * 365.25))\n };\n setRdwData(mockData);\n \n const advice = `Op basis van de leeftijd (${mockData.leeftijd_in_jaren} jaar) is de 2,7% methode van toepassing. Voor auto's ouder dan 5 jaar (na het jaar van ingebruikname) kan dit verlaagd worden naar 1,5%. Aangezien dit voertuig een ${mockData.voertuigsoort} is, is de forfaitaire methode een optie.`;\n setFiscalAdvice(advice);\n setFormData(prev => ({\n ...prev,\n catalogusprijsInclBtw: mockData.catalogusprijs,\n catalogusprijsMarge: mockData.catalogusprijs,\n }));\n }\n setIsLoadingRdw(false);\n }, [formData.kenteken]);\n\n const handleGeminiAnalysis = useCallback(async () => {\n if (!ai) {\n alert(\"Gemini API is niet geconfigureerd.\");\n return;\n }\n setIsLoadingGemini(true);\n setIsGeminiModalOpen(true);\n setGeminiResponse('');\n const response = await getFiscalAnalysis(ai, formData, rdwData);\n setGeminiResponse(response);\n setIsLoadingGemini(false);\n }, [ai, formData, rdwData]);\n\n const calculateBtw = useCallback(() => {\n let btwCorrectiePerJaar = 0;\n \n switch(formData.methode) {\n case CalculationMethod.WERKELIJK:\n const privePercentage = formData.totaalKm > 0 ? (formData.priveKm \/ formData.totaalKm) : 0;\n const btwAankoop = formData.btwBedragAankoop || (formData.aanschafExBtw * 0.21);\n btwCorrectiePerJaar = btwAankoop * privePercentage;\n break;\n case CalculationMethod.FORFAITAIR:\n btwCorrectiePerJaar = formData.catalogusprijsInclBtw * 0.027;\n break;\n case CalculationMethod.MARGEAUTO:\n const basisCorrectie = formData.catalogusprijsMarge * 0.015;\n const correctieVrijgesteldeOmzet = basisCorrectie * (formData.percentageVrijgesteldeOmzet \/ 100);\n let eindCorrectie = basisCorrectie - correctieVrijgesteldeOmzet;\n\n if (formData.totaalAfgetrokkenBtwKosten > 0 && eindCorrectie > formData.totaalAfgetrokkenBtwKosten) {\n eindCorrectie = formData.totaalAfgetrokkenBtwKosten;\n }\n btwCorrectiePerJaar = eindCorrectie;\n break;\n }\n\n const newResults = [];\n const startDate = new Date(formData.startDatum);\n \n for (let i = 0; i < formData.aantalPeriodes; i++) {\n const periodeStartDate = new Date(startDate);\n let periodeEindDate;\n\n if (formData.periodeType === 'maand') {\n periodeStartDate.setMonth(startDate.getMonth() + i);\n periodeEindDate = new Date(periodeStartDate.getFullYear(), periodeStartDate.getMonth() + 1, 0);\n } else { \/\/ kwartaal\n periodeStartDate.setMonth(startDate.getMonth() + (i * 3));\n periodeEindDate = new Date(periodeStartDate.getFullYear(), periodeStartDate.getMonth() + 3, 0);\n }\n \n const btwPerPeriode = btwCorrectiePerJaar \/ (formData.periodeType === 'maand' ? 12 : 4);\n\n\n newResults.push({\n periode: i + 1,\n startDatum: periodeStartDate.toISOString().split('T')[0],\n eindDatum: periodeEindDate.toISOString().split('T')[0],\n btwBedrag: parseFloat(btwPerPeriode.toFixed(2)),\n geselecteerd: true\n });\n }\n setResults(newResults);\n setCurrentStep(3);\n }, [formData]);\n \n const handleResultCheckboxChange = (index) => {\n const newResults = [...results];\n newResults[index].geselecteerd = !newResults[index].geselecteerd;\n setResults(newResults);\n };\n\n const handleSelectAllResults = (e) => {\n const isChecked = e.target.checked;\n setResults(results.map(r => ({ ...r, geselecteerd: isChecked })));\n };\n \n const generateUbl = () => {\n const selectedResults = results.filter(r => r.geselecteerd);\n const totalAmount = selectedResults.reduce((acc, curr) => acc + curr.btwBedrag, 0);\n \n const xml = `\n<Invoice xmlns=\"urn:oasis:names:specification:ubl:schema:xsd:Invoice-2\">\n <cbc:CustomizationID>urn:ubl:extension:btw-correctie:1.0<\/cbc:CustomizationID>\n <cbc:ID>BTW-CORR-${new Date().toISOString().split('T')[0]}<\/cbc:ID>\n <cbc:IssueDate>${new Date().toISOString().split('T')[0]}<\/cbc:IssueDate>\n <cac:AccountingSupplierParty>\n <cac:Party>\n <cac:PartyName><cbc:Name>${formData.ondernemerNaam || 'Ondernemer'}<\/cbc:Name><\/cac:PartyName>\n <\/cac:Party>\n <\/cac:AccountingSupplierParty>\n <cac:AccountingCustomerParty>\n <cac:Party>\n <cac:PartyName><cbc:Name>Belastingdienst<\/cbc:Name><\/cac:PartyName>\n <\/cac:Party>\n <\/cac:AccountingCustomerParty>\n <cac:LegalMonetaryTotal>\n <cbc:PayableAmount currencyID=\"EUR\">${totalAmount.toFixed(2)}<\/cbc:PayableAmount>\n <\/cac:LegalMonetaryTotal>\n ${selectedResults.map((r, i) => `\n <cac:InvoiceLine>\n <cbc:ID>${i + 1}<\/cbc:ID>\n <cbc:InvoicedQuantity unitCode=\"XU\">1<\/cbc:InvoicedQuantity>\n <cbc:LineExtensionAmount currencyID=\"EUR\">${r.btwBedrag.toFixed(2)}<\/cbc:LineExtensionAmount>\n <cac:Item>\n <cbc:Description>BTW-correctie priv\u00e9gebruik auto periode ${r.startDatum} t\/m ${r.eindDatum}<\/cbc:Description>\n <cbc:Name>BTW Correctie<\/cbc:Name>\n <\/cac:Item>\n <cac:Price><cbc:PriceAmount currencyID=\"EUR\">${r.btwBedrag.toFixed(2)}<\/cbc:PriceAmount><\/cac:Price>\n <\/cac:InvoiceLine>`).join('')}\n<\/Invoice>\n `.trim();\n\n setUblXml(xml);\n setIsUblModalOpen(true);\n };\n\n const copyToClipboard = (text) => {\n navigator.clipboard.writeText(text).then(() => alert('Gekopieerd naar klembord!'), () => alert('Kopi\u00ebren mislukt.'));\n };\n\n const sendEmail = () => {\n const selectedResults = results.filter(r => r.geselecteerd);\n if (!formData.emailAdres || selectedResults.length === 0) {\n alert('Vul een e-mailadres in en selecteer minimaal \u00e9\u00e9n periode.');\n return;\n }\n\n let csvContent = \"Periode,Startdatum,Einddatum,BTW Bedrag\\n\";\n selectedResults.forEach(r => {\n csvContent += `${r.periode},${r.startDatum},${r.eindDatum},${r.btwBedrag.toFixed(2)}\\n`;\n });\n \n const mailtoLink = `mailto:${formData.emailAdres}?subject=BTW Correctie Priv\u00e9gebruik Auto&body=${encodeURIComponent(\n `Beste ${formData.ondernemerNaam || 'ondernemer'},\\n\\n` +\n `Hierbij de berekende BTW-correctie voor het priv\u00e9gebruik van de auto.\\n\\n` +\n `CSV-gegevens:\\n\\n${csvContent}`\n )}`;\n\n window.location.href = mailtoLink;\n };\n \n const steps = [\n { title: \"RDW Check\" },\n { title: \"Methode & Invoer\" },\n { title: \"Periode & Export\" },\n { title: \"Resultaten\" }\n ];\n\n const allResultsSelected = useMemo(() => results.length > 0 && results.every(r => r.geselecteerd), [results]);\n\n const renderedGeminiResponse = useMemo(() => {\n if (isLoadingGemini) {\n return '<p class=\"text-center\">Gemini analyseert de gegevens... ✨<\/p>';\n }\n if (!geminiResponse) {\n return '';\n }\n return marked.parse(geminiResponse);\n }, [geminiResponse, isLoadingGemini]);\n\n const inputBaseClasses = \"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 text-black placeholder:text-gray-400 disabled:bg-gray-100\";\n\n return (\n <div className=\"fiscal-calculator-container w-full max-w-5xl mx-auto my-4 md:my-8 bg-white flex flex-col shadow-2xl rounded-xl overflow-hidden min-h-[90vh]\">\n <header className=\"bg-gray-200 p-6 text-black shrink-0\">\n <h1 className=\"text-2xl md:text-3xl font-bold text-center\">BTW Priv\u00e9gebruik Auto Calculator<\/h1>\n <p className=\"text-center text-gray-700 mt-1 text-sm\">Bereken eenvoudig de BTW voor het priv\u00e9gebruik van uw auto.<\/p>\n <\/header>\n \n <main className=\"flex-grow p-6 md:p-8\">\n {\/* Step Indicator *\/}\n <div className=\"flex justify-around items-start mb-8\">\n {steps.map((step, index) => (\n <div key={index} className=\"step flex flex-col items-center flex-1\">\n <div className={`w-10 h-10 rounded-full flex items-center justify-center border-2 font-bold text-lg transition-all duration-300 ${currentStep >= index ? 'bg-sky-200 text-black border-sky-600' : 'bg-white text-gray-400 border-gray-300'}`}>\n {index + 1}\n <\/div>\n <p className={`mt-2 text-xs text-center font-semibold transition-colors duration-300 ${currentStep >= index ? 'text-sky-600' : 'text-gray-500'}`}>{step.title}<\/p>\n <\/div>\n ))}\n <\/div>\n\n {\/* Screen 1: RDW Check *\/}\n <div className={currentStep === 0 ? 'block' : 'hidden'}>\n <div className=\"mb-8 p-6 border border-sky-200 rounded-lg bg-sky-50\">\n <h2 className=\"text-xl font-semibold mb-4 text-gray-800\">RDW Kentekencheck (Optioneel)<\/h2>\n <p className=\"text-sm text-gray-600 mb-4\">Voer het kenteken in om automatisch de catalogusprijs, voertuigsoort en leeftijd op te halen. Dit kan helpen bij de methodeselectie.<\/p>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 items-end\">\n <div className=\"md:col-span-2\">\n <label htmlFor=\"kenteken\" className=\"block text-sm font-medium text-gray-700 mb-1\">Kenteken:<\/label>\n <input type=\"text\" id=\"kenteken\" placeholder=\"bv. AB-123-CD\" value={formData.kenteken} onChange={(e) => setFormData(prev => ({...prev, kenteken: e.target.value.toUpperCase()}))} className={`${inputBaseClasses} uppercase`} \/>\n <\/div>\n <div>\n <button type=\"button\" onClick={handleRdwLookup} disabled={isLoadingRdw || !formData.kenteken} className=\"w-full bg-gray-200 text-black font-bold py-2 px-4 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 disabled:bg-gray-300\">\n {isLoadingRdw ? 'Bezig...' : 'Haal RDW Gegevens Op'}\n <\/button>\n <\/div>\n <\/div>\n {rdwError && <p className=\"text-red-600 mt-2 text-sm\">{rdwError}<\/p>}\n {rdwData && (\n <div className=\"mt-4 p-4 bg-green-50 border border-green-200 rounded-md text-sm\">\n <p><strong>Voertuigsoort:<\/strong> {rdwData.voertuigsoort}<\/p>\n <p><strong>Catalogusprijs:<\/strong> \u20ac {rdwData.catalogusprijs.toLocaleString('nl-NL')}<\/p>\n <p><strong>Datum 1e toelating:<\/strong> {new Date(rdwData.datum_eerste_toelating).toLocaleDateString('nl-NL')}<\/p>\n <\/div>\n )}\n {fiscalAdvice && (\n <div className=\"mt-6\">\n <h3 className=\"text-lg font-semibold mb-2 text-gray-800\">Fiscaal Advies op Maat<\/h3>\n <div className=\"p-4 bg-sky-100 border border-sky-300 text-sky-800 rounded-md text-sm\">{fiscalAdvice}<\/div>\n {ai && <div className=\"mt-4\">\n <button type=\"button\" onClick={handleGeminiAnalysis} className=\"w-full sm:w-auto bg-purple-200 text-black font-bold py-2 px-4 rounded-md hover:bg-purple-300 transition-colors flex items-center justify-center gap-2\">\n <span className=\"text-xl\">✨<\/span> Vraag Gemini om een diepere analyse\n <\/button>\n <\/div>}\n <\/div>\n )}\n <\/div>\n <div className=\"flex justify-end mt-6\">\n <button type=\"button\" onClick={() => setCurrentStep(1)} className=\"bg-sky-200 text-black font-bold py-2 px-6 rounded-md hover:bg-sky-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500\">Volgende<\/button>\n <\/div>\n <\/div>\n\n {\/* Screen 2: Methode & Invoer *\/}\n <div className={currentStep === 1 ? 'block' : 'hidden'}>\n <h2 className=\"text-xl font-semibold mb-4 text-gray-800\">Kies Berekeningsmethode en vul gegevens in<\/h2>\n <div className=\"flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-6 mb-6\">\n {Object.values(CalculationMethod).map(method => (\n <div key={method} className=\"flex items-center\">\n <input type=\"radio\" id={method} name=\"methode\" value={method} checked={formData.methode === method} onChange={handleInputChange} className=\"h-4 w-4 text-sky-600 border-gray-300 focus:ring-sky-500\" \/>\n <label htmlFor={method} className=\"ml-2 block text-sm font-medium text-gray-700 capitalize\">{method === 'werkelijk' ? 'Werkelijk priv\u00e9kilometerpercentage' : method === 'forfaitair' ? 'Vereenvoudigde 2,7%-methode' : 'Margeauto (1,5% forfait)'}<\/label>\n <\/div>\n ))}\n <\/div>\n <form onSubmit={(e) => e.preventDefault()}>\n <div className={`space-y-4 ${formData.methode === CalculationMethod.WERKELIJK ? 'block' : 'hidden'}`}>\n <h3 className=\"text-lg font-semibold border-b pb-2 mb-4 text-gray-700\">Gegevens voor Werkelijk Percentage<\/h3>\n <div><label htmlFor=\"totaalKm\" className=\"block text-sm font-medium text-gray-700 mb-1\">Totaal gereden kilometers (zakelijk + priv\u00e9):<\/label><input type=\"number\" id=\"totaalKm\" value={formData.totaalKm || ''} onChange={handleInputChange} placeholder=\"bv. 20000\" className={inputBaseClasses} \/><\/div>\n <div><label htmlFor=\"priveKm\" className=\"block text-sm font-medium text-gray-700 mb-1\">Priv\u00e9kilometers:<\/label><input type=\"number\" id=\"priveKm\" value={formData.priveKm || ''} onChange={handleInputChange} placeholder=\"bv. 5000\" className={inputBaseClasses} \/><\/div>\n <div><label htmlFor=\"aanschafExBtw\" className=\"block text-sm font-medium text-gray-700 mb-1\">Aanschafprijs auto excl. BTW (\u20ac):<\/label><input type=\"number\" id=\"aanschafExBtw\" value={formData.aanschafExBtw || ''} onChange={handleInputChange} placeholder=\"bv. 40000\" className={inputBaseClasses} \/><\/div>\n <div><label htmlFor=\"btwBedragAankoop\" className=\"block text-sm font-medium text-gray-700 mb-1\">BTW-bedrag bij aankoop (\u20ac):<\/label><input type=\"number\" id=\"btwBedragAankoop\" value={formData.btwBedragAankoop || ''} onChange={handleInputChange} placeholder=\"bv. 8400\" className={inputBaseClasses} \/><p className=\"text-xs text-gray-500 mt-1\">Indien niet bekend, wordt dit berekend als 21% van de aanschafprijs excl. BTW.<\/p><\/div>\n <\/div>\n <div className={`space-y-4 ${formData.methode === CalculationMethod.FORFAITAIR ? 'block' : 'hidden'}`}>\n <h3 className=\"text-lg font-semibold border-b pb-2 mb-4 text-gray-700\">Gegevens voor 2,7%-methode<\/h3>\n <div><label htmlFor=\"catalogusprijsInclBtw\" className=\"block text-sm font-medium text-gray-700 mb-1\">Catalogusprijs auto incl. BTW (\u20ac):<\/label><input type=\"number\" id=\"catalogusprijsInclBtw\" value={formData.catalogusprijsInclBtw || ''} onChange={handleInputChange} placeholder=\"bv. 50000\" className={inputBaseClasses} \/><\/div>\n <\/div>\n <div className={`space-y-4 ${formData.methode === CalculationMethod.MARGEAUTO ? 'block' : 'hidden'}`}>\n <h3 className=\"text-lg font-semibold border-b pb-2 mb-4 text-gray-700\">Gegevens voor Margeauto (1,5% forfait)<\/h3>\n <div><label htmlFor=\"catalogusprijsMarge\" className=\"block text-sm font-medium text-gray-700 mb-1\">Catalogusprijs auto incl. BTW en BPM (\u20ac):<\/label><input type=\"number\" id=\"catalogusprijsMarge\" value={formData.catalogusprijsMarge || ''} onChange={handleInputChange} placeholder=\"bv. 40000\" className={inputBaseClasses} \/><\/div>\n <div><label htmlFor=\"totaalAfgetrokkenBtwKosten\" className=\"block text-sm font-medium text-gray-700 mb-1\">Totaal afgetrokken BTW voor autokosten dit jaar (\u20ac) (optioneel):<\/label><input type=\"number\" id=\"totaalAfgetrokkenBtwKosten\" value={formData.totaalAfgetrokkenBtwKosten || ''} onChange={handleInputChange} placeholder=\"bv. 500\" className={inputBaseClasses} \/><p className=\"text-xs text-gray-500 mt-1\">De BTW-correctie mag niet hoger zijn dan dit bedrag.<\/p><\/div>\n <div><label htmlFor=\"percentageVrijgesteldeOmzet\" className=\"block text-sm font-medium text-gray-700 mb-1\">Percentage auto gebruikt voor vrijgestelde omzet (%):<\/label><input type=\"number\" id=\"percentageVrijgesteldeOmzet\" min=\"0\" max=\"100\" value={formData.percentageVrijgesteldeOmzet || ''} onChange={handleInputChange} placeholder=\"bv. 10\" className={inputBaseClasses} \/><p className=\"text-xs text-gray-500 mt-1\">Indien van toepassing, verlaagt dit de BTW-correctie.<\/p><\/div>\n <\/div>\n <\/form>\n <div className=\"flex justify-between mt-8\"><button type=\"button\" onClick={() => setCurrentStep(0)} className=\"bg-gray-200 text-gray-700 font-bold py-2 px-6 rounded-md hover:bg-gray-300\">Vorige<\/button><button type=\"button\" onClick={() => setCurrentStep(2)} className=\"bg-sky-200 text-black font-bold py-2 px-6 rounded-md hover:bg-sky-300\">Volgende<\/button><\/div>\n <\/div>\n\n {\/* Screen 3: Periode & Export *\/}\n <div className={currentStep === 2 ? 'block' : 'hidden'}>\n <h2 className=\"text-xl font-semibold mb-4 text-gray-800\">Periode en Exportinstellingen<\/h2>\n <div className=\"space-y-4 max-w-lg\">\n <div><label htmlFor=\"ondernemerNaam\" className=\"block text-sm font-medium text-gray-700 mb-1\">Naam ondernemer (voor CSV\/XML):<\/label><input type=\"text\" id=\"ondernemerNaam\" value={formData.ondernemerNaam} onChange={handleInputChange} placeholder=\"bv. Jan Jansen\" className={inputBaseClasses}\/><\/div>\n <div><label htmlFor=\"startDatum\" className=\"block text-sm font-medium text-gray-700 mb-1\">Startdatum eerste periode:<\/label><input type=\"date\" id=\"startDatum\" value={formData.startDatum} onChange={handleInputChange} className={inputBaseClasses}\/><\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div><label htmlFor=\"aantalPeriodes\" className=\"block text-sm font-medium text-gray-700 mb-1\">Aantal periodes:<\/label><input type=\"number\" id=\"aantalPeriodes\" value={formData.aantalPeriodes || ''} onChange={handleInputChange} min=\"1\" placeholder=\"bv. 12\" className={inputBaseClasses}\/><\/div>\n <div><label htmlFor=\"periodeType\" className=\"block text-sm font-medium text-gray-700 mb-1\">Type periode:<\/label><select id=\"periodeType\" value={formData.periodeType} onChange={handleInputChange} className={inputBaseClasses}><option value=\"maand\">Maand<\/option><option value=\"kwartaal\">Kwartaal<\/option><\/select><\/div>\n <\/div>\n <div><label htmlFor=\"emailAdres\" className=\"block text-sm font-medium text-gray-700 mb-1\">E-mailadres voor verzenden CSV (optioneel):<\/label><input type=\"email\" id=\"emailAdres\" value={formData.emailAdres} onChange={handleInputChange} placeholder=\"uwemail@voorbeeld.com\" className={inputBaseClasses}\/><\/div>\n <\/div>\n <div className=\"flex justify-between mt-8\"><button type=\"button\" onClick={() => setCurrentStep(1)} className=\"bg-gray-200 text-gray-700 font-bold py-2 px-6 rounded-md hover:bg-gray-300\">Vorige<\/button><button type=\"button\" onClick={calculateBtw} className=\"bg-sky-200 text-black font-bold py-2 px-6 rounded-md hover:bg-sky-300\">Bereken BTW en Toon Resultaten<\/button><\/div>\n <\/div>\n\n {\/* Screen 4: Results *\/}\n <div className={currentStep === 3 ? 'block' : 'hidden'}>\n <h2 className=\"text-xl font-semibold mb-3 text-gray-800\">Berekende BTW per Periode<\/h2>\n <div className=\"overflow-x-auto shadow rounded-lg\">\n <table className=\"min-w-full divide-y divide-gray-200\">\n <thead className=\"bg-gray-50\">\n <tr>\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\"><input type=\"checkbox\" onChange={handleSelectAllResults} checked={allResultsSelected} className=\"h-4 w-4 text-sky-600 border-gray-300 rounded focus:ring-sky-500\"\/><\/th>\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Periode<\/th>\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Startdatum<\/th>\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Einddatum<\/th>\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider\">Te boeken BTW (\u20ac)<\/th>\n <\/tr>\n <\/thead>\n <tbody className=\"bg-white divide-y divide-gray-200\">\n {results.map((r, i) => (\n <tr key={i} className={r.geselecteerd ? 'bg-white' : 'bg-gray-50'}>\n <td className=\"px-4 py-3 whitespace-nowrap\"><input type=\"checkbox\" checked={r.geselecteerd} onChange={() => handleResultCheckboxChange(i)} className=\"h-4 w-4 text-sky-600 border-gray-300 rounded focus:ring-sky-500\" \/><\/td>\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-gray-900\">{r.periode}<\/td>\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-gray-500\">{new Date(r.startDatum).toLocaleDateString('nl-NL')}<\/td>\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-gray-500\">{new Date(r.eindDatum).toLocaleDateString('nl-NL')}<\/td>\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-gray-900 text-right font-mono\">{r.btwBedrag.toLocaleString('nl-NL', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}<\/td>\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n <\/div>\n <div className=\"mt-6 flex flex-col sm:flex-row sm:space-x-4 space-y-3 sm:space-y-0 items-center\">\n <button type=\"button\" onClick={generateUbl} className=\"w-full sm:w-auto bg-gray-200 text-black font-bold py-2 px-4 rounded-md hover:bg-gray-300\">Toon UBL-ge\u00efnspireerde XML<\/button>\n <button type=\"button\" onClick={sendEmail} className=\"w-full sm:w-auto bg-gray-200 text-black font-bold py-2 px-4 rounded-md hover:bg-gray-300\">Stuur CSV van Selectie per E-mail<\/button>\n <\/div>\n <div className=\"flex justify-start mt-8\"><button type=\"button\" onClick={() => setCurrentStep(2)} className=\"bg-gray-200 text-gray-700 font-bold py-2 px-6 rounded-md hover:bg-gray-300\">Vorige<\/button><\/div>\n <\/div>\n <\/main>\n \n {\/* Gemini Modal *\/}\n {isGeminiModalOpen && (\n <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n <div className=\"bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col\">\n <div className=\"flex justify-between items-center p-4 border-b\">\n <h3 className=\"text-xl font-semibold text-gray-800 flex items-center gap-2\">\n <span className=\"text-2xl\">✨<\/span> Gemini\u2019s Fiscale Analyse\n <\/h3>\n <button onClick={() => setIsGeminiModalOpen(false)} className=\"text-gray-500 hover:text-gray-800 text-2xl\">×<\/button>\n <\/div>\n <div className=\"p-6 overflow-y-auto prose max-w-none\" dangerouslySetInnerHTML={{ __html: renderedGeminiResponse }} \/>\n <\/div>\n <\/div>\n )}\n\n {\/* UBL Modal *\/}\n {isUblModalOpen && (\n <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n <div className=\"bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col\">\n <div className=\"flex justify-between items-center p-4 border-b\">\n <h3 className=\"text-xl font-semibold text-gray-800\">UBL-ge\u00efnspireerde XML Data<\/h3>\n <button onClick={() => setIsUblModalOpen(false)} className=\"text-gray-500 hover:text-gray-800 text-2xl\">×<\/button>\n <\/div>\n <div className=\"p-6 overflow-y-auto\">\n <pre className=\"bg-gray-100 p-4 rounded-md text-sm whitespace-pre-wrap break-all\"><code>{ublXml}<\/code><\/pre>\n <\/div>\n <div className=\"p-4 border-t flex justify-end\">\n <button onClick={() => copyToClipboard(ublXml)} className=\"bg-sky-200 text-black font-bold py-2 px-4 rounded-md hover:bg-sky-300\">Kopieer naar Klembord<\/button>\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n );\n};\n\n\/\/ --- START: ReactDOM Render ---\nconst rootElement = document.getElementById('root');\nif (!rootElement) {\n throw new Error(\"Could not find root element to mount to\");\n}\n\nconst root = ReactDOM.createRoot(rootElement);\nroot.render(\n <React.StrictMode>\n <App \/>\n <\/React.StrictMode>\n);\n\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>De Volgende Stap: Van Calculator naar Jouw Intelligente Advies-Engine<\/strong><\/h4>\n\n\n\n<p>Dit prototype is het startpunt. De werkelijke kracht ontstaat wanneer je deze basis uitbreidt en integreert tot een centrale ‘advies-engine’ die naadloos samenwerkt met jouw processen en die van je cli\u00ebnten.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Integratie met Databases:<\/strong> Stel je voor dat deze engine niet alleen publieke data gebruikt, maar ook veilig gekoppeld is aan de interne systemen van je klanten. Denk aan de boekhoudsoftware voor actuele kostengegevens, of het CRM voor klantspecifieke informatie. Dit levert een 360-graden beeld op voor een nog rijker en persoonlijker advies.<\/li>\n\n\n\n<li><strong>Jouw Kennis en Visie als Databron:<\/strong> Een machine is zo slim als de kennis die je erin stopt. Daarom verrijk je de logica van de engine met <strong>jouw unieke expertise<\/strong>: je adviesmethodieken, branche-specifieke checklists, en de waarden die jouw kantoor drijven, zoals een focus op duurzaamheid (ESG) of de langetermijnvisie die je voor je cli\u00ebnten hebt.<\/li>\n\n\n\n<li><strong>Advies op Aanvraag via E-mail en WhatsApp:<\/strong> Transformeer je communicatiekanalen in effici\u00ebnte servicepunten. Een cli\u00ebnt stuurt een e-mail of WhatsApp met de vraag: <em>“Ik overweeg een auto met kenteken G-123-HJ, wat zijn de fiscale gevolgen?”<\/em>. De engine herkent de vraag, voert de volledige analyse uit en stuurt een gestructureerd eerste rapport terug\u2014direct naar de cli\u00ebnt of naar jou ter review.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Jouw Rol als Professional: Regisseur van Strategisch Advies<\/strong><\/h4>\n\n\n\n<p>In een dergelijk geautomatiseerd landschap wordt jouw rol als professional niet kleiner, maar juist <strong>strategischer<\/strong>. Je verandert van uitvoerder in regisseur. De engine neemt het repetitieve werk uit handen, waardoor jij je kunt focussen op:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Context en Interpretatie:<\/strong> Je duidt de geautomatiseerde output en plaatst deze in de unieke context van de ambities, bedrijfsuitstraling en financi\u00eble situatie van de cli\u00ebnt.<\/li>\n\n\n\n<li><strong>Strategische Planning:<\/strong> Je gebruikt de vrijgekomen tijd om proactief vooruit te kijken en te adviseren over de ‘Total Cost of Ownership’ en de impact op de lange termijn.<\/li>\n\n\n\n<li><strong>Menselijke Factor:<\/strong> Je voert het gesprek over de ‘zachte’ factoren die een tool nooit kan meten, en bouwt zo aan een diepere, waardevollere klantrelatie.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Conclusie: Samen Bouwen aan de Toekomst van Advies<\/strong><\/h4>\n\n\n\n<p>Deze calculator is de eerste bouwsteen. Het bewijst dat je routine-taken kunt automatiseren om ruimte te cre\u00ebren voor hoogwaardig, persoonlijk advies. De echte potentie ligt in het doorontwikkelen van deze basis naar een centrale ‘advies-engine’ die jouw unieke expertise als brandstof gebruikt.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Een Nieuwe Manier van Adviseren: Van Rekenwerk naar Strategische Waarde Hoe help je als financieel professional je cli\u00ebnten nog beter in een wereld die continu verandert? Je wilt proactief adviseren, kansen signaleren en complexe vraagstukken snel en accuraat beantwoorden. Dat is de kern van moderne, servicegerichte dienstverlening. Deze tool is een praktisch antwoord op die […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":39,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-98","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bjornproost.nl\/index.php?rest_route=\/wp\/v2\/pages\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bjornproost.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bjornproost.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bjornproost.nl\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bjornproost.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=98"}],"version-history":[{"count":14,"href":"https:\/\/bjornproost.nl\/index.php?rest_route=\/wp\/v2\/pages\/98\/revisions"}],"predecessor-version":[{"id":220,"href":"https:\/\/bjornproost.nl\/index.php?rest_route=\/wp\/v2\/pages\/98\/revisions\/220"}],"up":[{"embeddable":true,"href":"https:\/\/bjornproost.nl\/index.php?rest_route=\/wp\/v2\/pages\/39"}],"wp:attachment":[{"href":"https:\/\/bjornproost.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}