Perfect 👏 — you’re right on track. Now that your mock data is in place, we’ll scaffold the Dealer Pulse Dashboard UI so you can preview your data visually. ⸻ 🧩 Step 5 — Prompt for Replit Agent: Create the Dealer Pulse UI Copy and paste this whole block into your Replit agent: ⸻ 🟢 Replit Agent Prompt — Create Dealer Pulse Dashboard UI Create a minimal web interface that reads the JSON files from mock_data/ and renders them in a branded dashboard layout. Use HTML + CSS + JavaScript (no framework). The dashboard should display: • KPI Tiles (from dashboard_kpis.json) • Campaign Performance Table (from campaigns.json) • Conversation List Table (from conversations.json) • A “T-Card” style detail panel that loads agreement_detail.json when a conversation is clicked. ⸻ 📁 File Structure /public ├── index.html ├── style.css └── app.js ⸻ 🧱 index.html Dealer Pulse Dashboard

🚗 Dealer Pulse Dashboard

Lincoln Audi — Campaign & Conversation Insights

📊 Campaign Performance

Tag	Pool	Replies %	Attended %

💬 Conversations

Name	Reg	Last Msg	Pressure

⸻ 🎨 style.css body { font-family: 'Audi Type', Arial, sans-serif; background:#f9f9f9; color:#222; margin:0; padding:2rem; } header { border-bottom:2px solid #000; margin-bottom:2rem; } .kpi-grid { display:flex; gap:1rem; margin-bottom:2rem; } .kpi { background:#fff; padding:1rem 2rem; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.1); } table { width:100%; border-collapse:collapse; margin-bottom:2rem; } th, td { border:1px solid #ddd; padding:0.5rem 1rem; } tr:hover {background:#f2f2f2;} .tcard { background:#fff; border:2px solid #a00; padding:1rem; border-radius:6px; } .hidden {display:none;} .pressure-red {color:#d00;font-weight:bold;} .pressure-amber {color:#d90;} .pressure-green {color:#090;} ⸻ ⚙️ app.js async function loadJSON(path) { const res = await fetch(path); return await res.json(); } // Load KPI Tiles async function renderKPIs() { const data = await loadJSON("../mock_data/dashboard_kpis.json"); const kpiDiv = document.getElementById("kpis"); Object.entries(data).forEach(([key, val]) => { if (key === "generated_at_uk") return; const tile = document.createElement("div"); tile.className = "kpi"; tile.innerHTML = `

${key.replaceAll("_"," ")}

${val}

`; kpiDiv.appendChild(tile); }); } // Load Campaign Table async function renderCampaigns() { const rows = await loadJSON("../mock_data/campaigns.json"); const tbody = document.querySelector("#campaigns-table tbody"); rows.forEach(r => { const tr = document.createElement("tr"); tr.innerHTML = ` ${r.campaign_tag} ${r.pool_total} ${r.reply_rate_pct}% ${r.attended_rate_pct}%`; tbody.appendChild(tr); }); } // Load Conversations async function renderConversations() { const rows = await loadJSON("../mock_data/conversations.json"); const tbody = document.querySelector("#conversations-table tbody"); rows.forEach(r => { const tr = document.createElement("tr"); tr.innerHTML = ` ${r.first_name} ${r.registration} ${r.last_msg || ""} ${r.pressure_flag}`; tr.addEventListener("click", () => openTCard(r.agreement_number)); tbody.appendChild(tr); }); } // T-Card Detail async function openTCard(agreement) { const tcard = document.getElementById("tcard"); const title = document.getElementById("tcard-title"); const msgs = document.getElementById("tcard-messages"); const data = await loadJSON("../mock_data/agreement_detail.json"); if (data.agreement_number !== agreement) return; tcard.classList.remove("hidden"); title.textContent = `${data.first_name} (${data.registration})`; msgs.innerHTML = data.messages.map(m => `

[${m.direction}] ${m.message_text}

`).join(""); } // Init renderKPIs(); renderCampaigns(); renderConversations(); ⸻ ✅ After the agent finishes Run the preview at ➡️ https:///public/index.html You should see: • KPI tiles (top) • Campaign table (middle) • Conversation list (bottom) • Clicking a conversation opens a T-Card detail. ⸻ Would you like me to add Audi Lincoln branding (dark theme, Audi rings, Dealer Pulse logo) next, or first wire it to live Supabase data?