rene/transceiver-db
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: comprehensive DEMO/MODELL tagging across all dashboard sections with synthetic data

Browse Source 
- 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)
This commit is contained in:
Rene Fichtmueller 2026-04-20 21:52:10 +02:00
parent 9f3cd46f9c
commit ca943f1f86
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/dashboard/index.html
View File

@ -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) {