From ca943f1f86c3fc14fe024fe06a579731f3cb16d7 Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacStudio-von-Rene-8.local>
Date: Mon, 20 Apr 2026 21:52:10 +0200
Subject: [PATCH] ui: comprehensive DEMO/MODELL tagging across all dashboard
 sections with synthetic data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Stock tab nav: ⚠DEMO badge
- Stock section subtitle: clarify prices=real vs. Lager/Verkauf=DEMO
- Stat cards: DE-Lager, Global-Lager, Nachlieferung labels tagged [DEMO]
- Recently Restocked header: DEMO DATA badge
- Stock detail lookup: [demo] inline on all warehouse/units_sold fields
- Top Sellers: already tagged (previous commit)
- Procurement > Reorder Signals: DEMO DATA banner (based on synthetic ABC data)
- Procurement > ABC Classification: DEMO DATA banner
- Hype Cycle: MODELL badge on header (Norton-Bass = mathematical estimate)
- Hype Cycle table: Adoption/Peak/To Plateau columns tagged [M] = Modell
- Hype Cycle legend: explains [M] vs real data
- Market Intelligence + Lifecycle Events: no tag (real scraped data)
---
 packages/dashboard/index.html | 36 ++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html
index 610029b..42e80da 100644
--- a/packages/dashboard/index.html
+++ b/packages/dashboard/index.html
@@ -802,7 +802,7 @@
   <div class="tab" data-tab="crawlers">🕷 Crawler Intelligence</div>
   <div class="tab" data-tab="network">&#127760; Network</div>
   <div class="tab" data-tab="review" id="tab-review-nav">&#9998; Review <span id="review-pending-badge" style="display:none;background:#f97316;color:#fff;border-radius:10px;padding:1px 7px;font-size:0.68rem;margin-left:4px;font-weight:700"></span></div>
-  <div class="tab" data-tab="stock">🏭 Stock</div>
+  <div class="tab" data-tab="stock">🏭 Stock <span style="font-size:0.6rem;color:#f59e0b;vertical-align:middle">⚠DEMO</span></div>
   <div class="tab" data-tab="prices">💲 Price Comparison</div>
 </div>
 
@@ -899,8 +899,8 @@
     <div class="card" style="border-left:3px solid #FF8100;overflow-x:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem;flex-wrap:wrap;gap:0.5rem">
         <div>
-          <div style="font-size:1rem;font-weight:700;color:var(--text-bright)">Optical Transceiver Hype Cycle <span style="color:#FF8100;font-size:0.85rem" id="hype-year">2026</span></div>
-          <div style="font-size:0.72rem;color:var(--text-dim);margin-top:2px">Norton-Bass Multigenerational Diffusion Model &mdash; click any technology for details</div>
+          <div style="font-size:1rem;font-weight:700;color:var(--text-bright)">Optical Transceiver Hype Cycle <span style="color:#FF8100;font-size:0.85rem" id="hype-year">2026</span> <span style="font-size:0.62rem;font-weight:700;background:#6366f122;color:#6366f1;border:1px solid #6366f166;border-radius:3px;padding:1px 6px;letter-spacing:0.05em;vertical-align:middle">MODELL</span></div>
+          <div style="font-size:0.72rem;color:var(--text-dim);margin-top:2px">Norton-Bass Multigenerational Diffusion Model &mdash; Adoption &amp; Composite Score sind mathematische Schätzungen, keine echten Marktdaten &mdash; click any technology for details</div>
         </div>
         <div style="display:flex;gap:1rem;align-items:center;font-size:0.68rem;color:var(--text-dim);flex-wrap:wrap">
           <span id="hype-data-source" style="font-size:0.68rem;color:#34d399;font-weight:600"></span>
@@ -920,9 +920,9 @@
             <th>Technology<span class="sort-arrow"></span></th>
             <th class="tip" data-tip="Current phase in the technology adoption lifecycle.">Phase<span class="sort-arrow"></span></th>
             <th class="tip" data-tip="Position on the hype curve (0-100%).">Position<span class="sort-arrow"></span></th>
-            <th class="tip" data-tip="Cumulative market adoption based on Norton-Bass diffusion model. 0-100% of total addressable market.">Adoption<span class="sort-arrow"></span></th>
-            <th class="tip" data-tip="Estimated year of peak hype / maximum attention.">Peak<span class="sort-arrow"></span></th>
-            <th class="tip" data-tip="Years until mainstream, stable deployment.">To Plateau<span class="sort-arrow"></span></th>
+            <th class="tip" data-tip="Cumulative market adoption based on Norton-Bass diffusion model. 0-100% of total addressable market. MODELL — keine echten Marktdaten.">Adoption <span style="font-size:0.58rem;color:#6366f1;font-weight:600">[M]</span><span class="sort-arrow"></span></th>
+            <th class="tip" data-tip="Estimated year of peak hype — Norton-Bass model estimate, not real forecast data.">Peak <span style="font-size:0.58rem;color:#6366f1;font-weight:600">[M]</span><span class="sort-arrow"></span></th>
+            <th class="tip" data-tip="Years until mainstream — Norton-Bass model estimate.">To Plateau <span style="font-size:0.58rem;color:#6366f1;font-weight:600">[M]</span><span class="sort-arrow"></span></th>
             <th class="tip" data-tip="Current OEM ASP in USD — from Mouser/market data.">OEM ASP<span class="sort-arrow"></span></th>
             <th class="tip" data-tip="Bass model goodness-of-fit (R²). Higher = more reliable forecast.">R²<span class="sort-arrow"></span></th>
           </tr></thead>
@@ -930,6 +930,10 @@
         </table>
       </div>
     </div>
+    <div style="margin-top:0.5rem;font-size:0.7rem;color:var(--text-dim);display:flex;gap:1.5rem;flex-wrap:wrap">
+      <span><span style="color:#6366f1;font-weight:700">[M]</span> = MODELL — Norton-Bass mathematische Schätzung, keine echten Marktdaten</span>
+      <span>OEM ASP = real (Mouser/Marktdaten)</span>
+    </div>
     <div class="card mt" style="border-left:3px solid var(--cyan)">
       <div class="panel-section" style="margin-top:0">Methodology: How the Hype Cycle is Calculated</div>
       <div style="font-size:0.82rem;color:var(--text-dim);line-height:1.65">
@@ -1474,6 +1478,7 @@
 
     <!-- Reorder Signals section -->
     <div id="proc-section-signals">
+      <div style="padding:0.5rem 0.75rem;background:#f59e0b11;border:1px solid #f59e0b33;border-radius:6px;font-size:0.72rem;color:#f59e0b;margin-bottom:0.75rem">⚠ <strong>DEMO DATA</strong> — Reorder Signals basieren auf synthetischen Verkaufs- und Lagermengen. Signalstärke spiegelt keine echten Flexoptix-Bestände wider.</div>
       <div style="display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap">
         <button onclick="filterSignal('')" id="sig-all" style="background:var(--accent);color:white;border:none;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.75rem">All</button>
         <button onclick="filterSignal('buy_now')" style="background:rgba(193,18,31,0.1);border:1px solid rgba(193,18,31,0.3);color:#c1121f;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.75rem">🔴 Buy Now</button>
@@ -1488,6 +1493,7 @@
 
     <!-- ABC Classification section -->
     <div id="proc-section-abc" style="display:none">
+      <div style="padding:0.5rem 0.75rem;background:#f59e0b11;border:1px solid #f59e0b33;border-radius:6px;font-size:0.72rem;color:#f59e0b;margin-bottom:0.75rem">⚠ <strong>DEMO DATA</strong> — ABC-Klassifizierung basiert auf synthetischen Verkaufszahlen aus dem Seed-Datensatz. Keine echten Flexoptix-Umsätze.</div>
       <div style="display:flex;gap:0.5rem;margin-bottom:1rem">
         <button onclick="filterAbc('')" style="background:var(--accent);color:white;border:none;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.75rem">All</button>
         <button onclick="filterAbc('A')" style="background:rgba(193,18,31,0.1);border:1px solid rgba(193,18,31,0.3);color:#c1121f;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.75rem">A — High Turnover</button>
@@ -1744,7 +1750,7 @@
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem">
       <div>
         <h2 style="margin:0;font-size:1.1rem;color:var(--text-bright)">🏭 Warehouse Stock Intelligence</h2>
-        <p style="margin:0.2rem 0 0;font-size:0.75rem;color:var(--text-dim)">Real-time DE-Lager · Global-Lager · Nachlieferung · Verkauft — scraped from fs.com · QSFPTEK · NADDOD &amp; more</p>
+        <p style="margin:0.2rem 0 0;font-size:0.75rem;color:var(--text-dim)">Preise: real (scraped from fs.com · QSFPTEK · NADDOD &amp; more) · <span style="color:#f59e0b">⚠ Lagermengen &amp; Verkaufszahlen: <strong>DEMO DATA</strong> — synthetische Seed-Daten, keine echten Bestände</span></p>
       </div>
       <button onclick="stockLoaded=false;loadStock()" class="btn" style="background:var(--indigo);color:#fff;font-size:0.75rem">↻ Refresh</button>
     </div>
@@ -1763,17 +1769,17 @@
       </div>
       <div class="stat-card" style="text-align:center">
         <div class="stat-icon" style="color:#6366f1">🇩🇪</div>
-        <div class="stat-label">DE-Lager Total</div>
+        <div class="stat-label">DE-Lager Total <span style="font-size:0.58rem;color:#f59e0b;font-weight:600">[DEMO]</span></div>
         <div class="stat-val" id="stock-stat-de">—</div>
       </div>
       <div class="stat-card" style="text-align:center">
         <div class="stat-icon" style="color:#06b6d4">🌍</div>
-        <div class="stat-label">Global-Lager Total</div>
+        <div class="stat-label">Global-Lager Total <span style="font-size:0.58rem;color:#f59e0b;font-weight:600">[DEMO]</span></div>
         <div class="stat-val" id="stock-stat-global">—</div>
       </div>
       <div class="stat-card" style="text-align:center">
         <div class="stat-icon" style="color:#f59e0b">⏳</div>
-        <div class="stat-label">In Nachlieferung</div>
+        <div class="stat-label">In Nachlieferung <span style="font-size:0.58rem;color:#f59e0b;font-weight:600">[DEMO]</span></div>
         <div class="stat-val" id="stock-stat-backorder">—</div>
       </div>
       <div class="stat-card" style="text-align:center">
@@ -1834,7 +1840,7 @@
 
     <!-- Recently Restocked -->
     <div class="card" style="overflow:hidden">
-      <div style="padding:0.75rem 1rem;border-bottom:1px solid var(--border);font-size:0.85rem;font-weight:600;color:var(--text-bright)">🆕 Recently Restocked (last 24h)</div>
+      <div style="padding:0.75rem 1rem;border-bottom:1px solid var(--border);font-size:0.85rem;font-weight:600;color:var(--text-bright);display:flex;align-items:center;gap:0.5rem">🆕 Recently Restocked (last 24h) <span style="font-size:0.65rem;font-weight:700;background:#f59e0b22;color:#f59e0b;border:1px solid #f59e0b66;border-radius:3px;padding:1px 6px">DEMO DATA</span></div>
       <div id="stock-recent" style="padding:1rem;color:var(--text-dim);font-size:0.8rem">No recent restock events</div>
     </div>
 
@@ -6803,11 +6809,11 @@ async function lookupStock() {
     var latest = obs[0];
     resultEl.innerHTML = '<b>' + esc(tx.part_number) + '</b> — '
       + esc(tx.form_factor || '') + ' ' + esc(tx.speed || '') + '<br>'
-      + '<span style="color:#6366f1">DE-Lager: ' + (latest.warehouse_de_qty != null ? latest.warehouse_de_qty : '—') + '</span> · '
-      + '<span style="color:#06b6d4">Global: ' + (latest.warehouse_global_qty != null ? latest.warehouse_global_qty : '—') + '</span> · '
-      + '<span style="color:#f59e0b">Nachlieferung: ' + (latest.backorder_qty != null ? latest.backorder_qty : '—') + '</span> · '
+      + '<span style="color:#6366f1">DE-Lager: ' + (latest.warehouse_de_qty != null ? latest.warehouse_de_qty : '—') + '</span><span style="font-size:0.65rem;color:#f59e0b;margin-left:2px">[demo]</span> · '
+      + '<span style="color:#06b6d4">Global: ' + (latest.warehouse_global_qty != null ? latest.warehouse_global_qty : '—') + '</span><span style="font-size:0.65rem;color:#f59e0b;margin-left:2px">[demo]</span> · '
+      + '<span style="color:#f59e0b">Nachlieferung: ' + (latest.backorder_qty != null ? latest.backorder_qty : '—') + '</span><span style="font-size:0.65rem;color:#f59e0b;margin-left:2px">[demo]</span> · '
       + (latest.price_net != null ? '€' + Number(latest.price_net).toFixed(2) + ' (net)' : '')
-      + (latest.units_sold != null ? ' · <b>' + latest.units_sold + '×</b> verkauft' : '')
+      + (latest.units_sold != null ? ' · <b>' + latest.units_sold + '×</b> verkauft <span style="font-size:0.65rem;color:#f59e0b">[demo]</span>' : '')
       + '<br><span style="color:var(--text-dim);font-size:0.7rem">via ' + esc(latest.vendor_name) + ' · ' + new Date(latest.time).toLocaleString('de-DE') + '</span>'
       + (obs.length > 1 ? ' <span style="color:var(--text-dim)">(' + obs.length + ' observations this week)</span>' : '');
   } catch(e) {