From c57bff5bd8ca071b317afdae497cd96b846bf5f5 Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacStudio-von-Rene-8.local>
Date: Wed, 1 Apr 2026 17:30:49 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Switch=E2=86=92Transceiver=20Finder=20t?=
 =?UTF-8?q?ab=20in=20dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New 'Finder' tab between Switches and Blog Engine
- Search by switch model (free text), filter by speed
- Quick-access buttons: Nexus 93180, Nexus 9332D, Arista 7280R3A, Juniper QFX5120
- Results grouped by speed class (400G QSFP-DD, 100G QSFP28, etc.)
- Shows: part number, vendor, reach, fiber type, connector, verified price, stock status
- Flexoptix products highlighted with orange left border + FLEXOPTIX badge
- Buy link → flexoptix.net for each result
- Uses existing /api/finder endpoint with 33,993 compatibility entries
---
 packages/dashboard/index.html | 154 ++++++++++++++++++++++++++++++++++
 1 file changed, 154 insertions(+)

diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html
index 42c0a89..6cf627f 100644
--- a/packages/dashboard/index.html
+++ b/packages/dashboard/index.html
@@ -678,6 +678,7 @@
   <div class="tab" data-tab="transceivers">Transceivers</div>
   <div class="tab" data-tab="switches">Switches</div>
   <div class="tab" data-tab="news">News</div>
+  <div class="tab" data-tab="finder">Finder</div>
   <div class="tab" data-tab="blog">Blog Engine</div>
 </div>
 
@@ -859,6 +860,39 @@
     <div class="card"><div id="news-list"></div></div>
   </div>
 
+  <!-- FINDER -->
+  <div id="tab-finder" class="hidden">
+    <div style="margin-bottom:1.2rem">
+      <h3 style="font-size:1rem;font-weight:600;margin-bottom:0.3rem">Switch → Transceiver Finder <span style="font-size:0.7rem;color:var(--text-dim);font-weight:400">Find the right Flexoptix transceiver for your switch</span></h3>
+      <div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap">
+        <input id="finder-switch-input" type="text" placeholder="Enter switch model, e.g. N9K-C93180YC-FX3 or Nexus 93180..."
+          style="flex:1;min-width:280px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text);font-size:0.9rem"
+          onkeydown="if(event.key==='Enter') runFinder()">
+        <select id="finder-speed-filter" style="padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text);font-size:0.85rem">
+          <option value="">All Speeds</option>
+          <option value="10">10G</option>
+          <option value="25">25G</option>
+          <option value="40">40G</option>
+          <option value="100">100G</option>
+          <option value="400">400G</option>
+          <option value="800">800G</option>
+        </select>
+        <button onclick="runFinder()" style="background:var(--accent);color:white;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.9rem">Find Transceivers</button>
+      </div>
+      <!-- Quick examples -->
+      <div style="margin-top:0.5rem;display:flex;gap:0.4rem;flex-wrap:wrap">
+        <span style="font-size:0.7rem;color:var(--text-dim)">Quick:</span>
+        <button onclick="finderQuick('N9K-C93180YC-FX3')" class="b b-dim" style="font-size:0.7rem;padding:2px 8px;border-radius:4px">Nexus 93180YC-FX3</button>
+        <button onclick="finderQuick('N9K-C9332D-GX2B')" class="b b-dim" style="font-size:0.7rem;padding:2px 8px;border-radius:4px">Nexus 9332D-GX2B</button>
+        <button onclick="finderQuick('7280R3A-48D5')" class="b b-dim" style="font-size:0.7rem;padding:2px 8px;border-radius:4px">Arista 7280R3A</button>
+        <button onclick="finderQuick('QFX5120-48Y')" class="b b-dim" style="font-size:0.7rem;padding:2px 8px;border-radius:4px">Juniper QFX5120</button>
+      </div>
+    </div>
+
+    <!-- Results area -->
+    <div id="finder-results"></div>
+  </div>
+
   <!-- BLOG -->
   <div id="tab-blog" class="hidden">
     <div style="margin-bottom:0.8rem;display:flex;justify-content:space-between;align-items:center">
@@ -1154,6 +1188,7 @@ function goToTab(tabName) {
   if (tabName === 'switches') searchSwitches();
   if (tabName === 'news') loadNews();
   if (tabName === 'blog') loadBlogDrafts();
+  if (tabName === 'finder') document.getElementById('finder-switch-input').focus();
 }
 
 document.querySelectorAll('.tab').forEach(function(tab) {
@@ -2320,6 +2355,125 @@ function pollBlogLlm(id, attempt) {
 
 // Hot topics loaded dynamically via hot-topics.js
 
+// ══════════════════════════════════════════════════════
+// FINDER — Switch → Transceiver
+// ══════════════════════════════════════════════════════
+
+function finderQuick(model) {
+  document.getElementById('finder-switch-input').value = model;
+  runFinder();
+}
+
+async function runFinder() {
+  var model = (document.getElementById('finder-switch-input').value || '').trim();
+  var speed = document.getElementById('finder-speed-filter').value;
+  var results = document.getElementById('finder-results');
+  if (!model) { results.innerHTML = '<p style="color:var(--text-dim)">Enter a switch model to search.</p>'; return; }
+
+  results.innerHTML = '<div class="loading pulse">Searching compatibility database...</div>';
+
+  var url = '/api/finder?switch=' + encodeURIComponent(model) + (speed ? '&speed=' + speed : '');
+  try {
+    var data = await api(url);
+
+    if (data.error) {
+      results.innerHTML = '<div class="card" style="border-left:3px solid #c1121f"><b>Not found:</b> ' + data.error +
+        (data.suggestion ? '<br><span style="color:var(--text-dim);font-size:0.85rem">' + data.suggestion + '</span>' : '') + '</div>';
+      return;
+    }
+
+    var sw = data.switch;
+    var transceivers = data.compatible_transceivers || [];
+    var total = data.total || 0;
+
+    // Switch info header
+    var swHtml = '<div class="card mb" style="display:flex;gap:1rem;align-items:center">' +
+      (sw.image_url ? '<img src="' + sw.image_url + '" style="height:60px;border-radius:6px;object-fit:contain" onerror="this.style.display=\'none\'">' : '') +
+      '<div style="flex:1">' +
+        '<div style="font-size:1.1rem;font-weight:700">' + sw.vendor + ' ' + sw.model + '</div>' +
+        '<div style="color:var(--text-dim);font-size:0.8rem">' +
+          (sw.series ? sw.series + ' · ' : '') +
+          'Max speed: ' + (sw.max_speed_gbps || '?') + 'G' +
+        '</div>' +
+      '</div>' +
+      '<div style="text-align:right;font-size:0.8rem;color:var(--text-dim)">' +
+        '<b style="font-size:1.1rem;color:var(--text)">' + total + '</b> compatible transceivers' +
+      '</div>' +
+    '</div>';
+
+    if (transceivers.length === 0) {
+      results.innerHTML = swHtml + '<div class="card" style="color:var(--text-dim)">No compatible transceivers found for this switch. Try removing the speed filter.</div>';
+      return;
+    }
+
+    // Group by speed class
+    var bySpeed = {};
+    for (var t of transceivers) {
+      var key = t.speed_gbps + 'G ' + t.form_factor;
+      if (!bySpeed[key]) bySpeed[key] = [];
+      bySpeed[key].push(t);
+    }
+
+    var speedColors = { 800: '#c1121f', 400: '#FF8100', 100: '#e6a800', 25: '#2d6a4f', 10: '#888' };
+
+    var tcvrHtml = Object.entries(bySpeed).sort(function(a, b) {
+      return parseInt(b[0]) - parseInt(a[0]);
+    }).map(function(entry) {
+      var speedClass = entry[0];
+      var items = entry[1];
+      var speedGbps = items[0].speed_gbps;
+      var color = speedColors[speedGbps] || '#888';
+
+      var cards = items.slice(0, 12).map(function(t) {
+        var isFlexoptix = (t.vendor || '').toUpperCase() === 'FLEXOPTIX';
+        var hasPrice = t.price != null;
+        var priceHtml = hasPrice
+          ? '<span style="color:var(--accent);font-weight:700">' + (t.currency || 'EUR') + ' ' + parseFloat(t.price).toFixed(2) + '</span>'
+          : '<span style="color:var(--text-dim)">Price on request</span>';
+        var stockHtml = t.stock === 'in_stock' ? '<span style="color:#2d6a4f;font-size:0.65rem">● In Stock</span>'
+                      : t.stock === 'limited' ? '<span style="color:#e6a800;font-size:0.65rem">● Limited</span>'
+                      : '';
+        var partNum = t.part_number || t.slug || t.id;
+
+        return '<div class="card" style="padding:0.8rem;' + (isFlexoptix ? 'border-left:3px solid var(--accent)' : '') + '">' +
+          '<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:0.5rem">' +
+            '<div style="flex:1;min-width:0">' +
+              (isFlexoptix ? '<span style="font-size:0.6rem;background:var(--accent);color:white;padding:1px 5px;border-radius:3px;margin-right:4px">FLEXOPTIX</span>' : '') +
+              '<span style="font-size:0.7rem;color:var(--text-dim)">' + (t.vendor || '') + '</span><br>' +
+              '<b style="font-size:0.85rem;word-break:break-all">' + partNum + '</b><br>' +
+              '<span style="font-size:0.75rem;color:var(--text-dim)">' +
+                (t.reach || '') + (t.fiber_type ? ' · ' + t.fiber_type : '') +
+                (t.connector ? ' · ' + t.connector : '') +
+              '</span>' +
+            '</div>' +
+            '<div style="text-align:right;flex-shrink:0">' +
+              priceHtml + '<br>' + stockHtml +
+            '</div>' +
+          '</div>' +
+          (t.buy_url ? '<a href="' + t.buy_url + '" target="_blank" style="display:inline-block;margin-top:0.5rem;font-size:0.7rem;color:var(--accent)">Buy at Flexoptix →</a>' : '') +
+        '</div>';
+      }).join('');
+
+      return '<div style="margin-bottom:1.2rem">' +
+        '<div style="font-size:0.8rem;font-weight:700;color:' + color + ';margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.05em">' +
+          speedClass + ' <span style="color:var(--text-dim);font-weight:400">(' + items.length + ' options)</span>' +
+        '</div>' +
+        '<div class="grid g3">' + cards + '</div>' +
+      '</div>';
+    }).join('');
+
+    results.innerHTML = swHtml +
+      '<div style="font-size:0.75rem;color:var(--text-dim);margin-bottom:0.8rem">' +
+        'Showing ' + Math.min(transceivers.length, total) + ' of ' + total + ' compatible transceivers · ' +
+        '<span style="color:#2d6a4f">Orange border = Flexoptix product</span>' +
+      '</div>' +
+      tcvrHtml;
+
+  } catch(e) {
+    results.innerHTML = '<div class="card" style="border-left:3px solid #c1121f">Error: ' + e.message + '</div>';
+  }
+}
+
 
 
 async function loadBlogDrafts() {