Upload index.html

index.html

@@ -409,12 +409,33 @@
     animation:orchestraV5Chase 1s linear infinite !important;
   }
 }
+
+/* ORCHESTRA NEXT v7 — direct dashboard en toekomstige AI Insight Studio */
+.dashboard-top-button{background:linear-gradient(110deg,#16725f,#1585a7);border:1px solid #39a5a5;box-shadow:0 5px 19px rgba(27,184,171,.18);white-space:nowrap}
+.dashboard-top-button:disabled{opacity:.45;filter:grayscale(.3);box-shadow:none;cursor:not-allowed}
+.insight-studio{padding:19px 18px 18px;position:relative;overflow:hidden;border-color:#365477;background:radial-gradient(circle at 10% 0%,rgba(28,111,160,.26),transparent 46%),linear-gradient(145deg,#112440,#0a172b)}
+.insight-studio::after{content:'';position:absolute;right:-65px;top:-75px;width:180px;height:180px;border:1px solid #4ebfdd20;border-radius:50%;box-shadow:0 0 0 22px #4ebfdd0a,0 0 0 46px #4ebfdd08;pointer-events:none}
+.insight-heading{display:flex;gap:13px;align-items:center;margin-bottom:14px;position:relative;z-index:1}
+.insight-symbol{width:47px;height:47px;display:grid;place-items:center;flex:none;font-size:27px;color:#b3f1ff;border:1px solid #4a96cf;border-radius:12px;background:#152d50;box-shadow:0 0 22px #3bc9e533}
+.insight-heading h3{font-size:19px;margin:4px 0;color:#ecf9ff;letter-spacing:.3px}
+.insight-heading p{font-size:11px;line-height:1.45;color:#a6bfdd;margin:0}
+.insight-state{font-size:10px;color:#9fc7df;background:#122d40;border:1px solid #296178;border-radius:8px;padding:9px 11px;line-height:1.5}
+.insight-state-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7ad8f0;margin-right:6px;box-shadow:0 0 8px #65d9f6}
+.insight-intro{font-size:12px;color:#d6eaff;margin:18px 0 11px;font-weight:600}
+.insight-questions{display:flex;flex-direction:column;gap:9px}
+.insight-question{display:flex;gap:11px;align-items:start;border:1px solid #2c4767;background:linear-gradient(110deg,#152944,#10223b);border-radius:10px;padding:12px 11px;transition:border-color .2s,transform .2s}
+.insight-question:hover{border-color:var(--insight);transform:translateX(2px)}
+.insight-q-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--insight) 12%,#12213a);color:var(--insight);font-size:19px;border:1px solid color-mix(in srgb,var(--insight) 40%,#243953)}
+.insight-question strong{display:block;color:#eef6ff;font-size:12px;margin:1px 0 4px}
+.insight-question p{font-size:11px;line-height:1.48;color:#b4cce6;margin:0}
+.insight-note{font-size:10px;line-height:1.55;color:#a0b6d4;margin-top:15px;border-top:1px solid #2c4462;padding-top:12px}
+@media(max-width:900px){.topbar .actions{flex-wrap:wrap;justify-content:flex-end}}
 </style></head>
 <body>
 <div class="app">
  <main class="main">
   <header><div class="header-copy"><div class="eyebrow">REAKT / AI ANALYTICS PLATFORM</div><h1>Inloop <span>Intelligence</span> <em>ORCHESTRA</em></h1><p>Maak complexe informatie begrijpelijk en toegankelijk voor iedereen.</p></div><div class="orchestra-hero-title" aria-label="ORCHESTRA by Marcel Ooms"><span class="orchestra-hero-word">ORCHESTRA</span><span class="orchestra-hero-credit">by Marcel Ooms</span></div><div class="header-center-logo"><div class="reakt-wordmark" role="img" aria-label="Reakt — Werken aan je toekomst"><strong class="reakt-name">Reakt</strong><span class="reakt-tagline">Werken aan je toekomst</span></div></div><div class="header-actions"><span class="pill"><i></i> LOKALE ANALYSE</span><span class="clock" id="clock"></span></div></header>
-  <div class="topbar"><div><span class="section-kicker">CONTROL CENTER</span><h2>Agent Command Center <span class="live-dot"></span></h2></div><div class="actions"><label class="pace-label" for="paceSelect">Weergave <select id="paceSelect" aria-label="Animatiesnelheid"><option value="presentation">Presentatie ± 30 sec</option><option value="fast">Snel ± 6 sec</option></select></label><button id="resetBtn" class="ghost">↺ Reset</button><button id="startBtn" class="primary">▶ Start voorbeeldanalyse</button></div></div>
+  <div class="topbar"><div><span class="section-kicker">CONTROL CENTER</span><h2>Agent Command Center <span class="live-dot"></span></h2></div><div class="actions"><label class="pace-label" for="paceSelect">Weergave <select id="paceSelect" aria-label="Animatiesnelheid"><option value="presentation">Presentatie ± 30 sec</option><option value="fast">Snel ± 6 sec</option></select></label><button id="resetBtn" class="ghost">↺ Reset</button><button id="startBtn" class="primary">▶ Start voorbeeldanalyse</button><button id="exportBtn" class="dashboard-top-button" disabled title="Analyseer eerst één locatie">▣ Open dashboard</button></div></div>
    <section class="import-panel panel" aria-label="Lokale Excelanalyse met 2026 en historische referentie 2025">
      <div class="import-intro"><span class="section-kicker">ORCHESTRA NEXT · BROWSER-LOKAAL</span><strong>Scanregistratie 2026 + referentie 2025</strong><small>Browser-lokale analyse · alle bronlocaties · geen bestanden in Space-repository</small></div>
      <label class="import-file-label" for="scanFile"><span>▤</span> Rapportage 2026 (.xlsx)</label><input type="file" id="scanFile" accept=".xlsx" aria-label="Rapportagebestand januari tot en met september 2026" />
@@ -472,7 +493,19 @@
     <section class="panel logpanel"><div class="panel-heading"><div><span class="section-kicker">REAL-TIME PROCESS</span><h3>Agent activity log</h3></div><span class="subtle" id="logStatus">Stand-by</span></div><div class="logs" id="logs"><div class="logitem muted">◌ &nbsp; Klik op ‘Start demo-analyse’ om de workflow te bekijken.</div></div></section>
    </div>
    <aside class="right-content"><section class="panel chatpanel"><div class="panel-heading"><div><span class="section-kicker">MANAGEMENT ASSISTENT</span><h3><span class="chat-icon">✧</span> Vraag het aan Inloop AI</h3></div><span class="demo-badge">DEMO</span></div><div class="chat-messages" id="messages"><div class="message assistant"><small>INLOOP AI · DEMONSTRATIE</small><p>Welkom! Start de demo-analyse en stel daarna een vraag over de fictieve locatiecijfers.</p></div></div><div class="quick-questions"><button data-q="Welke locatie groeit het sterkst?">Grootste groei?</button><button data-q="Zijn de cijfers gevalideerd?">Validatiestatus?</button><button data-q="Maak een managementsamenvatting">Samenvatting?</button></div><form id="chatForm" class="chat-form"><input id="chatInput" autocomplete="off" placeholder="Stel een vraag over de demo..." aria-label="Vraag aan Inloop AI"><button aria-label="Verstuur vraag">➤</button></form><div class="chat-disclaimer">Vooraf ingestelde demo-antwoorden · geen echte AI</div></section>
-   <section class="panel preview"><div class="panel-heading"><div><span class="section-kicker">OUTPUT</span><h3>Infographic preview</h3></div><span class="warn-label">CONCEPT</span></div><div class="paper"><div class="paper-top"><strong>REAKT<span>.</span></strong><small>INLOOPMONITOR / Q3 2026</small></div><h4>Inloop in beeld</h4><p>Illustratieve managementrapportage</p><div class="paper-kpis"><div><strong>12.480</strong><small>Bezoeken</small></div><div><strong>1.286</strong><small>Uniek</small></div><div><strong>164</strong><small>Instroom</small></div></div><div class="paper-bars"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="paper-watermark">FICTIEVE DATA · NIET GEVALIDEERD</div></div><button class="export" id="exportBtn">▣ Open witte Reakt-monitor</button></section></aside>
+   <section class="panel insight-studio" aria-label="AI Insight Studio, toekomstige functionaliteit">
+<div class="insight-heading"><div class="insight-symbol">✧</div><div><span class="section-kicker">TOEKOMST · ORCHESTRA NEXT</span><h3>AI INSIGHT STUDIO</h3><p>Van cijfers naar nieuwe vragen en beter onderbouwde inzichten.</p></div></div>
+<div class="insight-state"><span class="insight-state-dot"></span> Concept voor toekomstige uitbreiding · momenteel geen AI-API aangesloten</div>
+<div class="insight-intro">Welke vragen zou je straks aan ORCHESTRA kunnen stellen?</div>
+<div class="insight-questions">
+<div class="insight-question" style="--insight:#59e0c1"><span class="insight-q-icon">↗</span><div><strong>Ontwikkelingen</strong><p>Welke locaties laten de grootste veranderingen in bezoekersaantallen zien?</p></div></div>
+<div class="insight-question" style="--insight:#5fcafa"><span class="insight-q-icon">◎</span><div><strong>Nieuwe instroom</strong><p>Hoe ontwikkelt de instroom zich per kwartaal ten opzichte van eerdere perioden?</p></div></div>
+<div class="insight-question" style="--insight:#bb91ff"><span class="insight-q-icon">◈</span><div><strong>Opvallende patronen</strong><p>Welke veranderingen in bezoekfrequentie en actieve cliënten verdienen nader onderzoek?</p></div></div>
+<div class="insight-question" style="--insight:#ffbd77"><span class="insight-q-icon">⬡</span><div><strong>Datakwaliteit</strong><p>Welke bronafwijkingen kunnen KPI's beïnvloeden en wat blijft onzeker?</p></div></div>
+<div class="insight-question" style="--insight:#f090c6"><span class="insight-q-icon">▤</span><div><strong>Managementsamenvatting</strong><p>Welke ontwikkelingen, aandachtspunten en beperkingen kunnen we feitelijk rapporteren?</p></div></div>
+</div>
+<div class="insight-note">♢ &nbsp; Inspirerende voorbeeldvragen, geen actieve AI-analyse. Een toekomstige API-koppeling vraagt vooraf een privacy- en informatiebeveiligingsbeoordeling. Geen cliëntgegevens naar externe AI-diensten.</div>
+</section></aside>
   </div>
   <footer>REAKT INLOOP INTELLIGENCE <span>ORCHESTRA PROTOTYPE · LOKALE VERWERKING · CONTROLEER CIJFERS VÓÓR PUBLICATIE</span></footer>
  </main>
@@ -1033,10 +1066,6 @@ function renderImported(result){
  document.querySelector('.verification .warning').textContent=quality.mismatches?`⚠ ${quality.mismatches} interne telverschillen gevonden. Cijfers nader onderzoeken. NIET GEVALIDEERD.`:
   quality.sourceIssues.length?`⚠ Tweede telling sluit aan; ${quality.sourceIssues.length} soorten bronafwijkingen beoordeeld. Zie aantallen en KPI-impact hierboven. NIET EXTERN GEVALIDEERD.`:
   `✓ ${quality.checks.length} interne telcontroles sluiten aan. ${result.historyLoaded?'Historie 2025 meegenomen.':'2025 ontbreekt: instroom voorlopig.'} Businesscontrollercontrole optioneel; niet extern gevalideerd.`;
- document.querySelector('.paper-watermark').textContent='LOKALE EXCEL-ANALYSE · NIET EXTERN GEVALIDEERD';
- document.querySelector('.paper p').textContent=result.period.label+' · lokale Excel-proef · niet voor publicatie';
- const pk=document.querySelectorAll('.paper-kpis strong');[num(result.visits),num(result.unique),num(result.newIntake)].forEach((x,i)=>{if(pk[i])pk[i].textContent=x});
- const pl=document.querySelectorAll('.paper-kpis small');if(pl[2])pl[2].textContent='Eerste geldige scan in '+result.period.label;
 }
 async function startImported(){
  if(running)return;
@@ -1271,6 +1300,9 @@ $('reportPng').addEventListener('click',()=>downloadReportImage('png'));
 $('reportJpg').addEventListener('click',()=>downloadReportImage('jpg'));
 document.addEventListener('keydown',e=>{if(e.key==='Escape'&&$('reportOverlay').classList.contains('open'))closeWhiteReport()});
 
+// Dashboard uitsluitend na een afgeronde berekening voor één geselecteerde locatie.
+function syncDashboardButton(){const b=$('exportBtn');if(b)b.disabled=running||!importedData?.last||importedData.last.site==='*';}
+['siteSelect','periodSelect','periodType','scanFile','historyFile'].forEach(id=>$(id)?.addEventListener('change',()=>{$('exportBtn').disabled=true;}));
 $('startBtn').addEventListener('click',start);$('resetBtn').addEventListener('click',reset);$('chatForm').addEventListener('submit',e=>{e.preventDefault();const q=$('chatInput').value;$('chatInput').value='';ask(q)});document.querySelectorAll('[data-q]').forEach(b=>b.addEventListener('click',()=>ask(b.dataset.q)));$('exportBtn').addEventListener('click',openWhiteReport);
 Promise.resolve({ok:true,json:async()=>JSON.parse(document.getElementById('orchestra-demo-data').textContent)}).then(r=>r.json()).then(d=>{demoData=d;renderKPIs(d);renderChecks(d);drawChart(d)}).catch(()=>log('Demo-gegevens konden niet worden geladen'));
 
@@ -1558,7 +1590,7 @@ async function nextStartImported(){
   $('flowState').textContent='Concept beschikbaar · NIET EXTERN GEVALIDEERD';$('logStatus').textContent='Afgerond';
   log(`Echte berekening, interne verificatie en weergave: ${(cpu/1000).toFixed(2)} sec. Geanimeerde procesweergave: ${((performance.now()-timestamp)/1000).toFixed(1)} sec (exclusief Excel-invoer).`);
  }catch(err){log('FOUT: '+err.message);$('flowState').textContent='Berekening of weergave mislukt';conductor.classList.add('attention');$('conductorStatus').textContent='Fout gedetecteerd';}
- finally{nextClearNetwork(false);running=false;nextIsRunning=false;$('startBtn').disabled=false;$('resetBtn').disabled=false;conductor.classList.remove('running');document.querySelector('.orchestra').classList.remove('running');}
+ finally{nextClearNetwork(false);running=false;nextIsRunning=false;$('startBtn').disabled=false;$('resetBtn').disabled=false;conductor.classList.remove('running');document.querySelector('.orchestra').classList.remove('running');syncDashboardButton();}
 }
 start=async function(){
  if(running)return;
@@ -1568,6 +1600,9 @@ start=async function(){
  return nextOriginalStart();
 };
 $('startBtn').removeEventListener('click',nextOriginalStart);
+// Dashboard uitsluitend na een afgeronde berekening voor één geselecteerde locatie.
+function syncDashboardButton(){const b=$('exportBtn');if(b)b.disabled=running||!importedData?.last||importedData.last.site==='*';}
+['siteSelect','periodSelect','periodType','scanFile','historyFile'].forEach(id=>$(id)?.addEventListener('change',()=>{$('exportBtn').disabled=true;}));
 $('startBtn').addEventListener('click',start);
 window.addEventListener('resize',()=>requestAnimationFrame(nextBuildGraph));
 if(typeof ResizeObserver!=='undefined')new ResizeObserver(()=>requestAnimationFrame(nextBuildGraph)).observe(document.querySelector('.orchestra'));