Upload index.html

index.html

@@ -186,6 +186,28 @@
 #reportSheet .report-client-month-chart{height:157px;max-width:100%;min-width:0}
 #reportSheet .report-client-month-chart svg{display:block;max-width:100%;height:100%}
 @media print{#reportSheet .report-average-note{font-size:8px!important;margin-top:5px!important}#reportSheet .report-client-month-chart{height:133px!important}}
+
+/* v1.6.4 — leesbare managementrij, uitsluitend witte Inloop Monitor */
+@media(min-width:1101px){
+ #reportSheet .report-bottom-grid{grid-template-columns:.98fr 1.30fr 1fr;}
+}
+#reportSheet .report-bottom-grid .report-panel{min-height:232px}
+#reportSheet .report-client-month-chart{height:196px;}
+#reportSheet .report-average-highlight{display:flex;gap:9px;align-items:center;margin-top:14px;padding:12px 14px;background:#f6f3ff;border:1px solid #e5dafa;border-radius:7px;}
+#reportSheet .report-average-highlight .highlight-num{font-size:27px;font-weight:850;color:#5b26c3;line-height:1;white-space:nowrap;}
+#reportSheet .report-average-highlight .highlight-label{font-size:12px;font-weight:700;color:#27325b;line-height:1.3;}
+#reportSheet .report-analysis{font-size:12px;line-height:1.52;}
+#reportSheet .report-analysis p{margin:0 0 11px;}
+@media print{
+ #reportSheet .report-bottom-grid{grid-template-columns:.98fr 1.30fr 1fr!important;}
+ #reportSheet .report-bottom-grid .report-panel{min-height:183px!important;}
+ #reportSheet .report-client-month-chart{height:153px!important;}
+ #reportSheet .report-average-highlight{margin-top:5px!important;padding:6px!important;gap:5px!important;}
+ #reportSheet .report-average-highlight .highlight-num{font-size:16px!important;}
+ #reportSheet .report-average-highlight .highlight-label{font-size:8px!important;}
+ #reportSheet .report-analysis{font-size:9px!important;line-height:1.38!important;}
+ #reportSheet .report-analysis p{margin:0 0 7px!important;}
+}
 </style></head>
 <body>
 <div class="app">
@@ -251,7 +273,7 @@
  </main>
 </div>
 <div id="reportOverlay" role="dialog" aria-modal="true" aria-label="Reakt Monitor rapport" aria-hidden="true">
-  <div class="report-actions"><span><strong>REAKT · Rapportvoorvertoning v1.6.3</strong> &nbsp; — voorlopige managementrapportage, controle vereist</span><div><button id="reportClose" type="button">✕ Sluiten</button> <button id="reportPng" class="report-png" type="button">⬇ Download PNG</button> <button id="reportJpg" class="report-jpg" type="button">⬇ Download JPG</button> <button id="reportPrint" class="report-print" type="button">↓ Opslaan als PDF / Afdrukken</button></div></div>
+  <div class="report-actions"><span><strong>REAKT · Rapportvoorvertoning v1.6.4</strong> &nbsp; — voorlopige managementrapportage, controle vereist</span><div><button id="reportClose" type="button">✕ Sluiten</button> <button id="reportPng" class="report-png" type="button">⬇ Download PNG</button> <button id="reportJpg" class="report-jpg" type="button">⬇ Download JPG</button> <button id="reportPrint" class="report-print" type="button">↓ Opslaan als PDF / Afdrukken</button></div></div>
   <section id="reportSheet" aria-label="Witte Inloop Monitor"></section>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
@@ -901,6 +923,25 @@ function reportChartBars(names,values,color='#7935cf',asWeek=false){
  out+=`<rect x="${x}" y="${y}" width="${bar}" height="${Math.max(bh,0)}" fill="${color}"/><text x="${x+bar/2}" y="${Math.max(10,y-5)}" text-anchor="middle" fill="#18116b" font-size="${asWeek?10:12}" font-weight="700">${v}</text><text x="${x+bar/2}" y="${H-11}" text-anchor="middle" fill="#1f2a56" font-size="${asWeek?8:11}">${escapeHTML(names[i])}</text>`});
  return out+'</svg>';
 }
+function reportChartClientMonth(names,values){
+ // Alleen presentatie: dezelfde berekende maandwaarden; iedere cliënt eenmaal per maand.
+ const W=480,H=220,left=24,right=9,top=19,bottom=34;
+ const max=Math.max(1,...values),span=H-top-bottom;
+ const band=(W-left-right)/Math.max(1,names.length),bar=Math.min(46,band*.82);
+ let out=`<svg viewBox="0 0 ${W} ${H}" width="100%" height="100%" role="img" aria-label="Aantal unieke cliënten per maand">`;
+ for(let i=0;i<=4;i++){
+  const y=top+span*i/4;
+  out+=`<line x1="${left}" y1="${y}" x2="${W-right}" y2="${y}" stroke="#e8e6f2" stroke-width="1"/>`;
+ }
+ values.forEach((v,i)=>{
+  const height=(span-15)*v/max;
+  const x=left+band*i+(band-bar)/2,y=H-bottom-height;
+  out+=`<rect x="${x}" y="${y}" width="${bar}" height="${Math.max(0,height)}" fill="#763fc7" rx="1.8"/>`;
+  out+=`<text x="${x+bar/2}" y="${Math.max(13,y-6)}" text-anchor="middle" fill="#2e196e" font-size="14" font-weight="800">${v}</text>`;
+  out+=`<text x="${x+bar/2}" y="${H-11}" text-anchor="middle" fill="#22285e" font-size="12" font-weight="600">${escapeHTML(names[i])}</text>`;
+ });
+ return out+'</svg>';
+}
 function reportChartLine(names,values){
  if(!values.length)return '<div class="report-no-data">Geen gegevens beschikbaar</div>';
  const W=440,H=195,L=40,T=24,B=34,R=15,max=Math.max(1,...values)*1.16,span=W-L-R;
@@ -944,10 +985,11 @@ function buildWhiteReport(){
  const activeWindow=readableDate(d.period.activeFrom)+' t/m '+readableDate(d.period.peildatum);
  const mon=d.months.map(m=>m.label),values=d.months.map(m=>m.visits),clientsPerMonth=d.months.map(m=>m.clients),newPerMonth=d.months.map(m=>m.newIntake),week=['Ma','Di','Wo','Do','Vr','Za','Zo'];
  const weekdayMax=Math.max(...d.byWeek),weekdayMin=Math.min(...d.byWeek),busiest=week[d.byWeek.indexOf(weekdayMax)],quietest=week[d.byWeek.indexOf(weekdayMin)];
- const summary=[`In ${d.period.label} zijn bij ${escapeHTML(d.site)} ${reportNL(d.unique)} unieke cliënten met minimaal één geldige scan geregistreerd. Deze cliënten waren samen goed voor ${reportNL(d.visits)} bezoekdagen.`,
- `De instroom in ${d.period.label} bedraagt ${reportNL(d.newIntake)} cliënten. Er zijn ${reportNL(d.active)} actieve cliënten met minimaal één scan in de afgelopen drie maanden (van ${activeWindow}).`,
- `Op dagen met geregistreerde scans kwamen gemiddeld ${avgDay} cliënten per dag (${reportNL(d.daysWithScans)} geregistreerde dagen). De meeste bezoekdagen vallen op ${busiest} (${reportNL(weekdayMax)}).`,
- `De instroom is gebaseerd op de eerste geldige scan in ${d.historyLoaded?'2025 en 2026':'alleen 2026'}, niet op pasuitgifte. ${d.historyLoaded?reportNL(d.correctedExisting)+' aanvankelijk nieuwe cliënten bleken al in 2025 geregistreerd.':'Historie 2025 ontbreekt; de instroom is voorlopig.'} Eerdere scans van vóór 2025 kunnen ontbreken.`];
+ const summary=[
+  `In ${d.period.label} registreerde ${escapeHTML(d.site)} ${reportNL(d.unique)} unieke cliënten en ${reportNL(d.visits)} bezoekdagen.`,
+  `Op ${reportNL(d.daysWithScans)} dagen met geregistreerde scans kwamen gemiddeld ${avgDay} cliënten per dag. De meeste bezoekdagen vielen op ${busiest} (${reportNL(weekdayMax)}).`,
+  `Nieuwe instroom: ${reportNL(d.newIntake)} cliënten. Actieve cliënten in de afgelopen drie maanden: ${reportNL(d.active)}.${d.historyLoaded?' Na vergelijking met 2025 bleken '+reportNL(d.correctedExisting)+' aanvankelijk nieuwe cliënten al eerder geregistreerd.':' Historie over 2025 ontbreekt; de instroom is voorlopig.'}`
+ ];
  const kpis=[{klass:'purple',icon:'♟',label:'Unieke cliënten',value:reportNL(d.unique),sub:''},
  {klass:'green',icon:'+',label:'Nieuwe instroom',value:reportNL(d.newIntake),sub:'Eerste geldige scan op locatie in '+d.period.label},
  {klass:'purple',icon:'♙',label:'Actieve cliënten',value:reportNL(d.active),sub:'Minimaal 1 scan in de afgelopen drie maanden.'},
@@ -973,8 +1015,8 @@ function buildWhiteReport(){
  <section class="report-panel"><h2>Bezoekdagen per weekdag</h2><div class="chart-box">${reportChartBars(week,d.byWeek,'#ff6410',true)}</div></section>
  </div>
  <div class="report-bottom-grid">
- <section class="report-panel"><h2>Kerncijfers locatie</h2><table class="report-mini-table"><thead><tr><th>Locatie</th><th>Unieke cliënten</th><th>Bezoekdagen</th><th>Gem. cliënten per dag*</th></tr></thead><tbody><tr><td>⌖ ${escapeHTML(d.site)}</td><td>${reportNL(d.unique)}</td><td>${reportNL(d.visits)}</td><td>${avgDay}</td></tr><tr class="total"><td>Totaal / gemiddelde</td><td>${reportNL(d.unique)}</td><td>${reportNL(d.visits)}</td><td>${avgDay}</td></tr></tbody></table><div class="report-average-note">* Gemiddeld over ${reportNL(d.daysWithScans)} dagen met geregistreerde scans.</div></section>
- <section class="report-panel"><h2>Aantal cliënten per maand <small>(iedere cliënt maximaal één keer per maand)</small></h2><div class="chart-box report-client-month-chart">${reportChartBars(mon,clientsPerMonth,'#763fc7')}</div></section>
+ <section class="report-panel"><h2>Kerncijfers locatie</h2><table class="report-mini-table"><thead><tr><th>Locatie</th><th>Unieke cliënten</th><th>Bezoekdagen</th><th>Gem. cliënten per dag*</th></tr></thead><tbody><tr><td>⌖ ${escapeHTML(d.site)}</td><td>${reportNL(d.unique)}</td><td>${reportNL(d.visits)}</td><td>${avgDay}</td></tr><tr class="total"><td>Totaal / gemiddelde</td><td>${reportNL(d.unique)}</td><td>${reportNL(d.visits)}</td><td>${avgDay}</td></tr></tbody></table><div class="report-average-highlight"><span class="highlight-num">${avgDay}</span><span class="highlight-label">Gemiddeld aantal cliënten per dag</span></div><div class="report-average-note">* Berekend over ${reportNL(d.daysWithScans)} dagen met geregistreerde scans.</div></section>
+ <section class="report-panel"><h2>Aantal cliënten per maand <small>(iedere cliënt maximaal één keer per maand)</small></h2><div class="chart-box report-client-month-chart">${reportChartClientMonth(mon,clientsPerMonth)}</div></section>
  <section class="report-panel"><h2>Managementanalyse</h2><div class="report-analysis">${summary.map(t=>`<p>${t}</p>`).join('')}</div></section>
  </div>
  <div class="report-foot"><span>Bron: scanregistratie 2026${d.historyLoaded?' en historisch referentiebestand 2025':''}. Rapportageperiode en peildatum staan bovenaan vermeld.</span></div>`;