`public/panels/vendors.html`

51 lines
<div id="vend-banner"></div>
<div class="card" id="vend-stats" style="display:flex;gap:30px;flex-wrap:wrap;align-items:center">
  <div><div style="font:600 26px/1 'Cormorant Garamond',serif" id="vs-total">…</div><small class="muted">vendor brands</small></div>
  <div><div style="font:600 26px/1 'Cormorant Garamond',serif" id="vs-ig">…</div><small class="muted">with Instagram</small></div>
  <div><div style="font:600 26px/1 'Cormorant Garamond',serif" id="vs-reach">…</div><small class="muted">combined reach</small></div>
  <div><div style="font:600 26px/1 'Cormorant Garamond',serif" id="vs-missing">…</div><small class="muted">no IG found</small></div>
  <div style="margin-left:auto"><label>Sort</label>
    <select id="vs-sort"><option value="followers">Followers ↓</option><option value="brand">Brand A→Z</option><option value="code">Vendor code</option></select></div>
</div>
<div class="card" id="vend-owned-card">
  <h2>Owned · DW Fleet</h2>
  <div class="row" style="justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px">
    <div class="muted" id="vend-owned-summary">Our own Instagram accounts across the DW fleet — last 6 posts each.</div>
    <div style="display:flex;align-items:center;gap:6px"><label class="fld" style="font-size:11px">Sort</label>
      <select id="vend-owned-sort">
        <option value="attention">Needs attention</option>
        <option value="recent">Recent activity</option>
        <option value="posts">Most posts</option>
        <option value="alpha">A→Z</option>
      </select></div>
  </div>
  <div id="vend-owned-rows"><div class="muted">Loading owned accounts…</div></div>
</div>
<div class="card">
  <div class="row" style="justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
    <h2 style="margin:0">Vendor brands · Instagram</h2>
    <div style="display:flex;flex-direction:column;align-items:flex-end;gap:3px">
      <button id="vp-pull-all" class="btn amp-strong" title="Pull the last 10 posts for EVERY vendor Instagram account via Business Discovery (reference/attribution-amplify)">⬇ Pull ALL vendor accounts</button>
      <small class="muted" id="vp-pull-when"></small>
    </div>
  </div>
  <div class="muted" style="margin:8px 0 4px">External vendor / brand accounts (suppliers &amp; competitors — NOT owned). Click any handle to open the account. Use this roster for competitive/social reporting. <b>Reference + attribution-amplify only</b> — copy the caption text and share with credit back to the vendor.</div>
  <div id="vend-ig-coverage" class="muted" style="font-size:11.5px;margin-bottom:8px"></div>
  <div id="vend-rows"></div>
</div>
<div class="card" id="vend-li-card">
  <div class="row" style="justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
    <h2 style="margin:0">Vendor brands · LinkedIn</h2>
    <div style="display:flex;align-items:center;gap:8px">
      <a id="vp-li-contacts" class="btn" target="_blank" rel="noopener" href="/api/vendors/contacts/sheet" title="Who I know inside each DW vendor — from my LinkedIn connections (internal)" style="text-decoration:none;display:none">👥 My vendor contacts <span id="vp-li-contacts-n"></span></a>
      <div style="display:flex;flex-direction:column;align-items:flex-end;gap:3px">
        <button id="vp-li-harvest" class="btn amp-strong" title="Public Open-Graph pull (thumbnail + text) of every mapped vendor LinkedIn company page — no API, no login">⬇ Harvest ALL LinkedIn pages</button>
        <small class="muted" id="vp-li-when"></small>
      </div>
    </div>
  </div>
  <div class="muted" style="margin:8px 0 4px">Vendor LinkedIn <b>company pages</b> (B2B/trade). Public Open-Graph pull only — <b>no LinkedIn API, no login</b>. <b>Reference + attribution-amplify only</b>: browse, copy the text, share with a link back to the vendor. <span style="color:#8a6d2f">✓ verified</span> = slug confirmed against the real company page; <span style="color:#a1341f">? unverified</span> = best guess, confirm before trusting.</div>
  <div id="vend-li-summary" class="muted" style="font-size:11.5px;margin-bottom:8px"></div>
  <div id="vend-li-rows"><div class="muted">Loading LinkedIn roster…</div></div>
</div>