Bron: {doc.fileName} ·
tekst geëxtraheerd, opgemaakt in huisstijl en samengevat door AI.
{/* Mock extracted content rendered in brand style */}
Samenvatting
{doc.summary}
Belangrijkste bevindingen
{doc.bullets.map((b, i) => (
{b}
))}
Metagegevens
);
}
function SectionLabel({ children }) {
return (
{children}
);
}
// ---------------------------------------------------------------------------
// Stage 3 - Uitbreiden: file upload + auto-rebrand
// ---------------------------------------------------------------------------
const TEMPLATE_EXTRAS = [
{ id: "vergelijkbaar", title: "Vergelijkbare woningen", desc: "Recent verkochte panden in de omgeving." },
{ id: "markt", title: "Marktanalyse", desc: "Prijstrend van de buurt over 12 maanden." },
{ id: "aankoop", title: "Aankoopsamenvatting", desc: "Kansen en aandachtspunten voor de koper." },
{ id: "hypotheek", title: "Hypotheekindicatie", desc: "Indicatieve maandlast op basis van WOZ." },
];
// Mock content the "AI" will produce when a file is uploaded.
// Picks a doc type heuristically based on filename, otherwise defaults.
function mockRebrandFromFile(name) {
const lower = name.toLowerCase();
if (lower.includes("taxa")) {
return {
title: "Taxatierapport - samengevat",
fileType: "Taxatierapport (PDF)",
summary:
"Onafhankelijke taxatie bevestigt marktwaarde binnen verwachte bandbreedte; geen bijzonderheden m.b.t. waardedrukkende factoren.",
bullets: [
"Marktwaarde vrij van huur en gebruik: in lijn met vraagprijs",
"Geen waardedrukkende factoren in directe omgeving",
"Onderhoudstoestand binnen en buiten beoordeeld als 'goed'",
],
date: "12 maart 2026",
pages: "24",
};
}
if (lower.includes("energie") || lower.includes("epc") || lower.includes("label")) {
return {
title: "Energielabel & verduurzamingsadvies",
fileType: "Energielabel (PDF)",
summary:
"Definitief energielabel met aanbevolen verduurzamingsmaatregelen en indicatieve terugverdientijd.",
bullets: [
"Huidig label: C - registratie geldig tot 2034",
"Aanbevolen: HR++ glas, dakisolatie, warmtepomp",
"Indicatieve labelsprong na maatregelen: C → A",
],
date: "8 januari 2026",
pages: "6",
};
}
if (lower.includes("vve") || lower.includes("splits")) {
return {
title: "VvE-stukken - samengevat",
fileType: "VvE-dossier (ZIP)",
summary:
"Actieve VvE met gezonde reserves; recent MJOP en geen lopende geschillen of bijzondere besluiten.",
bullets: [
"Maandelijkse bijdrage: € 245 - incl. reservefonds",
"Reservefonds: € 84.000 (ruim toereikend o.b.v. MJOP)",
"Laatste ALV: 14 nov 2025 - geen bijzondere besluiten",
],
date: "14 november 2025",
pages: "32",
};
}
if (lower.includes("bouw") || lower.includes("inspect") || lower.includes("keuring")) {
return {
title: "Bouwkundige keuring",
fileType: "Bouwkundig rapport (PDF)",
summary:
"Algemene staat 'voldoende tot goed'. Enkele aandachtspunten op korte en middellange termijn.",
bullets: [
"Direct: kitwerk badkamer vernieuwen - € 350",
"Middellange termijn: voegwerk gevel - € 4.200",
"Geen acute constructieve gebreken vastgesteld",
],
date: "27 februari 2026",
pages: "18",
};
}
return {
title: "Aanvullend document - samengevat",
fileType: "Document (PDF)",
summary:
"Document automatisch verwerkt: tekst geëxtraheerd, samengevat en opgemaakt in de huisstijl van het kantoor.",
bullets: [
"Volledige tekst doorzocht en gestructureerd",
"Belangrijkste cijfers en data overgenomen",
"Tabellen en lijsten herschreven in branded stijl",
],
date: "6 mei 2026",
pages: "12",
};
}
function UitbreidenPanel({ extras, setExtras, property }) {
const [selected, setSelected] = useState([]);
const [adding, setAdding] = useState(false);
const [dragOver, setDragOver] = useState(false);
const [processing, setProcessing] = useState(null); // {fileName, step}
const fileInputRef = useRef(null);
const addedTemplateIds = extras.filter((e) => e.kind !== "upload").map((e) => e.kind);
// Filenames already added via upload/example, so we can't add the same one twice.
const addedUploadNames = extras.filter((e) => e.kind === "upload").map((e) => e.fileName);
function toggleTemplate(id) {
if (addedTemplateIds.includes(id)) return;
setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
}
function commitTemplates() {
if (selected.length === 0) return;
setAdding(true);
setTimeout(() => {
setExtras((e) => [
...e,
...selected.map((id) => ({ id: `${id}-${Date.now()}`, kind: id })),
]);
setSelected([]);
setAdding(false);
}, 500);
}
function handleFiles(fileList) {
if (!fileList || fileList.length === 0) return;
const file = fileList[0];
const fileName = file.name || "Document.pdf";
const isPdf =
file.type === "application/pdf" || /\.pdf$/i.test(fileName);
runUploadFlow(fileName, isPdf ? file : null);
}
// Render each page of an uploaded PDF to a high-res data URL using pdf.js.
// Returns an array of { dataUrl, w, h } for direct embedding as page images.
async function renderPdfPagesAsImages(file) {
const pdfjsLib = window.pdfjsLib;
if (!pdfjsLib) return [];
const buf = await file.arrayBuffer();
const pdf = await pdfjsLib.getDocument({ data: buf }).promise;
const pages = [];
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
const viewport = page.getViewport({ scale: 2 });
const canvas = document.createElement("canvas");
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext("2d");
await page.render({ canvasContext: ctx, viewport }).promise;
pages.push({
dataUrl: canvas.toDataURL("image/jpeg", 0.9),
w: viewport.width,
h: viewport.height,
});
}
return pages;
}
// Simulate the upload → extract → rebrand flow with realistic stages.
// For real PDFs we additionally rasterize each page via pdf.js so the
// original pages can be appended verbatim to the booklet.
function runUploadFlow(fileName, pdfFile) {
const mock = mockRebrandFromFile(fileName);
setProcessing({ fileName, step: "Bestand uploaden…", pct: 5 });
const steps = [
{ ms: 350, step: "Bestand uploaden…", pct: 22 },
{ ms: 700, step: "Pagina's renderen…", pct: 48 },
{ ms: 1100, step: "Tekst & tabellen extraheren…", pct: 72 },
{ ms: 1500, step: "Opmaken in huisstijl…", pct: 92 },
];
steps.forEach((s) => {
setTimeout(() => setProcessing({ fileName, step: s.step, pct: s.pct }), s.ms);
});
const renderPromise = pdfFile
? renderPdfPagesAsImages(pdfFile).catch(() => [])
: Promise.resolve([]);
Promise.all([
renderPromise,
new Promise((r) => setTimeout(r, 1900)),
]).then(([pdfPages]) => {
setExtras((e) => [
...e,
{
id: `upload-${Date.now()}`,
kind: "upload",
fileName,
pdfPages,
...mock,
},
]);
setProcessing(null);
});
}
return (
Stap 3 · uitbreiden
Document toevoegen
Upload een document - bouwkundige keuring, taxatierapport, VvE-stukken,
energielabel - en wij nemen het op in het boekje, automatisch
opgemaakt in uw huisstijl.
);
}
function FlowArrow() {
return (
);
}
function ProcessingState({ p }) {
return (
{p.fileName}
{p.step}
);
}
function Checkbox({ checked, added }) {
return (
{checked && (
)}
);
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function SearchIcon() {
return (
);
}
function ArrowRight() {
return (
);
}
function UploadIcon() {
return (
);
}
function FileIcon() {
return (
);
}
function ReBrandIcon() {
return (
);
}
function Spinner({ small }) {
const s = small ? 14 : 24;
return (
);
}
// ===========================================================================
// PDF render tree - brochure-style A4 pages used as the source for export.
// Rendered hidden, off-screen, alongside the on-screen booklet.
// Layout: 1 full-bleed cover page, then content pages with 2 blocks each.
// ===========================================================================
const pdfBrand = {
navy: "#111111",
navyDeep: "#000000",
gold: "#FFCC00",
goldDeep: "#E6B800",
cream: "#FFFFFF",
paper: "#FFFFFF",
ink: "#1A1A1A",
inkSoft: "#4A4A4A",
inkMute: "#6B6B6B",
rule: "#E5E5E5",
panel: "#F4F4F4",
};
const SECTION_META = {
kadaster: { kicker: "Eigendom", title: "Kadaster" },
kadastralekaart: { kicker: "Perceel", title: "Kadastrale kaart" },
bag: { kicker: "BAG", title: "Adres & gebouw" },
bestemming: { kicker: "Planologie", title: "Bestemming" },
buurt: { kicker: "Locatie", title: "Buurtprofiel" },
fundering: { kicker: "Constructie", title: "Funderingsrisico" },
wozhistorie: { kicker: "Waarde", title: "WOZ-historie" },
energielabel: { kicker: "Energie", title: "Energielabel" },
vergelijkbaar: { kicker: "Markt", title: "Vergelijkbare woningen" },
markt: { kicker: "Markt", title: "Marktontwikkeling" },
aankoop: { kicker: "Advies", title: "Aankoopoverwegingen" },
hypotheek: { kicker: "Financiering", title: "Hypotheekindicatie" },
onderhoud: { kicker: "Geschiedenis", title: "Onderhoudshistorie" },
upload: { kicker: "Bijlage", title: "Document" },
};
const LARGE_BLOCK_TYPES = new Set([
"vergelijkbaar",
"onderhoud",
"aankoop",
"markt",
"kadastralekaart",
"energielabel",
"buurt",
"fundering",
]);
// Bron-attributie per sectie - getoond in de footer van elk blok, zoals de
// echte Domicilie/NVM-boekjes "Bron: Kadaster / FunderMaps / CBS" tonen.
const SECTION_SOURCE = {
kadaster: "Kadaster · Eigendomsinformatie (BRK)",
bestemming: "DSO Omgevingsloket · Geldend omgevingsplan",
buurt: "CBS Kerncijfers Buurten en Wijken",
fundering: "FunderMaps / KCAF · Funderingsrisico-indicator",
kadastralekaart: "PDOK · Kadastrale Kaart (WMS)",
bag: "Kadaster BAG · PDOK Luchtfoto",
wozhistorie: "WOZ-waardeloket",
energielabel: "EP-Online (RVO) · Definitief energielabel",
vergelijkbaar: "Kadaster KOOG · NVM Brainbay (vertrouwelijk)",
markt: "CBS · Calcasa Marktindex",
aankoop: "Samengesteld door {company}",
hypotheek: "Indicatie - {company} · Financieringsadvies",
onderhoud: "Aangeleverd door eigenaar",
upload: "Door gebruiker geüpload",
};
// Generates a 12-year WOZ-historie regressing the current WOZ-waarde by ~6%
// per year, with a small per-year jitter so the line isn't perfectly smooth.
function deriveWozHistorie(currentWoz) {
const num = typeof currentWoz === "number"
? currentWoz
: Number(String(currentWoz).replace(/[^\d]/g, "")) || 0;
if (!num) return [];
const out = [];
let v = num;
const thisYear = new Date().getFullYear();
// jitters chosen deterministically per year offset
const jitters = [0, -0.01, 0.012, -0.008, 0.005, -0.015, 0.018, -0.004, 0.009, -0.012, 0.006, 0.0];
for (let i = 0; i < 12; i++) {
out.push({ jaar: thisYear - i, waarde: Math.round(v / 1000) * 1000 });
const drop = 0.058 + (jitters[i] || 0);
v = v / (1 + drop);
}
return out.reverse(); // chronological
}
// Picks a label deterministically from bouwjaar - older buildings get worse
// labels, newer buildings better. Matches what RVO/EP-Online would typically
// show for a property of that vintage.
function deriveEnergielabel(bouwjaar) {
const yr = parseInt(String(bouwjaar).match(/\d{4}/)?.[0] || "1980", 10);
let label;
if (yr >= 2015) label = "A+++";
else if (yr >= 2000) label = "A";
else if (yr >= 1985) label = "B";
else if (yr >= 1965) label = "C";
else if (yr >= 1945) label = "D";
else if (yr >= 1920) label = "E";
else label = "F";
return {
label,
geldig: "10 jaar (definitief)",
afgegeven: yr < 1950 ? "12 september 2022" : "4 maart 2024",
registratie: `EP-${10000000 + (yr * 731) % 9000000}`,
methode: "NTA 8800 - opname op locatie",
};
}
function deriveBag(property) {
const k = property.kadaster || {};
return {
bagId: `0363010000${String((k.bouwjaar || "1900").slice(-4) * 731 + 1234567).slice(-7)}`,
status: "Verblijfsobject in gebruik",
gebruiksdoel: "Woonfunctie",
oppervlakte: k.oppervlakte || "—",
bouwjaar: k.bouwjaar || "—",
gemeente: property.address?.city || "—",
};
}
// Zwarte contactstrook met gele scheidings-vierkantjes - replica van de
// onderste strook op de officiële Domicilie-voorpagina.
function DomicilieContactStrip() {
const Pip = () => (
);
const offices = activeCompany.offices || [];
if (offices.length === 0) return null;
return (
{/* Company logo in a white chip so it stays visible on the black strip
regardless of the logo's own colour. */}
{activeCompany.logo && (
)}
{/* NVM-logo alleen tonen voor aangesloten makelaars (per klant gezet). */}
{activeCompany.nvm && (
)}
{/* Company name once in its own column; each office's details sit in a
second column and wrap within it (so a wrapped line indents past the
name rather than stacking under it). */}
);
}
// ---------------------------------------------------------------------------
// Bootstrap - read the company slug from the URL, load its branding from
// data/companies.json, theme the app, then render. The slug is the first path
// segment, e.g. preview.workflowautomations.nl/domicilie → "domicilie".
// Unknown/empty slug falls back to the neutral default theme.
// ---------------------------------------------------------------------------
async function bootstrap() {
const slug = decodeURIComponent(location.pathname.replace(/^\/+|\/+$/g, "").split("/")[0] || "");
try {
const res = await fetch("/data/companies.json", { cache: "no-cache" });
if (res.ok) {
const manifest = await res.json();
const companies = Array.isArray(manifest) ? manifest : manifest.companies || [];
const company = companies.find((c) => c.slug === slug);
if (company) applyCompanyTheme(company);
}
} catch (e) {
// Offline / missing manifest → keep the neutral default theme.
console.warn("Kon companies.json niet laden, val terug op standaardthema.", e);
}
ReactDOM.createRoot(document.getElementById("root")).render();
}
bootstrap();
inside `root` into an equivalent PNG data-URL
// at its on-screen rendered size, so html2canvas (which can't rasterise SVG
// 
)}
{/* Company name once in its own column; each office's details sit in a
second column and wrap within it (so a wrapped line indents past the
name rather than stacking under it). */}