In app/templates/dashboard.html, find the existing <script>...</script> block near the bottom of the file and replace the entire block with this:

<script>
  // Load campaigns into Campaign Loader
  async function loadCampaigns() {
    const currentList = document.getElementById("current-campaigns");
    const upcomingList = document.getElementById("upcoming-campaigns");
    if (!currentList || !upcomingList) return;

    currentList.innerHTML = '<li class="text-xs text-zinc-500">Loading…</li>';
    upcomingList.innerHTML = '<li class="text-xs text-zinc-500">Loading…</li>';

    try {
      const res = await fetch("/api/campaigns");
      if (!res.ok) throw new Error("Failed to load campaigns");
      const payload = await res.json();
      const campaigns = payload.data || [];

      currentList.innerHTML = "";
      upcomingList.innerHTML = "";

      const today = new Date().toISOString().slice(0, 10);

      campaigns.forEach((c) => {
        const li = document.createElement("li");
        li.className = "flex flex-col gap-0.5 border border-zinc-800/80 rounded px-3 py-2 bg-zinc-950/40";

        const titleRow = document.createElement("div");
        titleRow.className = "flex items-center justify-between gap-2";

        const nameSpan = document.createElement("span");
        nameSpan.className = "font-medium";
        nameSpan.textContent = c.name || "Untitled";

        const typePill = document.createElement("span");
        typePill.className =
          "text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full border border-zinc-700 text-zinc-300";
        typePill.textContent = c.type || "Generic";

        titleRow.appendChild(nameSpan);
        titleRow.appendChild(typePill);

        const meta = document.createElement("p");
        meta.className = "text-[11px] text-zinc-400";
        meta.textContent = `${c.starts_on || "–"} → ${c.ends_on || "–"} • ${c.target_segment || ""}`;

        const notes = document.createElement("p");
        notes.className = "text-[11px] text-zinc-500";
        notes.textContent = c.notes || "";

        const sendBtn = document.createElement("button");
        sendBtn.className =
          "mt-1 inline-flex items-center gap-1 text-[11px] text-zinc-200 border border-zinc-700 rounded px-2 py-0.5 hover:bg-zinc-800/80";
        sendBtn.textContent = "Prepare WhatsApp blast";

        sendBtn.addEventListener("click", async () => {
          try {
            const res = await fetch("/api/whatsapp/send", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                contact_id: "segment:" + (c.target_segment || "unknown"),
                campaign_id: c.campaign_id || null,
                message_preview: `Campaign: ${c.name} – ${c.notes || ""}`.slice(0, 200),
              }),
            });
            if (!res.ok) throw new Error("Failed to queue WhatsApp stub");
            alert("WhatsApp campaign queued (stub only – wire to Make/n8n later).");
          } catch (err) {
            alert(err.message);
          }
        });

        li.appendChild(titleRow);
        li.appendChild(meta);
        li.appendChild(notes);
        li.appendChild(sendBtn);

        const isLive =
          c.status === "live" ||
          (c.starts_on && c.starts_on <= today && (!c.ends_on || c.ends_on >= today));

        (isLive ? currentList : upcomingList).appendChild(li);
      });

      if (!currentList.children.length) {
        currentList.innerHTML = '<li class="text-xs text-zinc-500">No live campaigns.</li>';
      }
      if (!upcomingList.children.length) {
        currentList.innerHTML = '<li class="text-xs text-zinc-500">No live campaigns.</li>';
      }
      if (!upcomingList.children.length) {
        upcomingList.innerHTML = '<li class="text-xs text-zinc-500">No upcoming campaigns.</li>';
      }
    } catch (err) {
      currentList.innerHTML = '<li class="text-xs text-red-400">Error loading campaigns.</li>';
      upcomingList.innerHTML = "";
      console.error(err);
    }
  }

  // 6-Month KPI Trend chart
  async function loadTrendChart() {
    const canvas = document.getElementById("trend-chart");
    if (!canvas || !window.Chart) return;

    try {
      const res = await fetch("/api/monthly-summary");
      if (!res.ok) throw new Error("Failed to load monthly summary");
      const payload = await res.json();
      const rows = payload.data || [];

      if (!rows.length) return;

      const labels = rows.map((r) => (r.month_key || "").slice(0, 7)); // YYYY-MM
      const contactRate = rows.map((r) => r.contact_rate || 0);
      const replyRate = rows.map((r) => r.reply_rate || 0);
      const retentionPen = rows.map((r) => r.retention_pen_pct || 0);

      new Chart(canvas, {
        type: "line",
        data: {
          labels,
          datasets: [
            {
              label: "Contact Rate %",
              data: contactRate,
              tension: 0.3,
            },
            {
              label: "Reply Rate %",
              data: replyRate,
              tension: 0.3,
            },
            {
              label: "Retention Pen %",
              data: retentionPen,
              tension: 0.3,
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              labels: {
                color: "#e5e5e5",
                font: { size: 11 },
              },
            },
          },
          scales: {
            x: {
              ticks: { color: "#a1a1aa", font: { size: 10 } },
              grid: { color: "#27272a" },
            },
            y: {
              ticks: { color: "#a1a1aa", font: { size: 10 } },
              grid: { color: "#27272a" },
            },
          },
        },
      });
    } catch (err) {
      console.error("Trend chart error:", err);
    }
  }

  // Retention Pen detail – simple table of upcoming customers
  async function loadRetentionPen() {
    const container = document.getElementById("retention-pen-container");
    if (!container) return;

    container.textContent = "Loading…";

    try {
      const res = await fetch("/api/retention-pen");
      if (!res.ok) throw new Error("Failed to load retention pen");
      const payload = await res.json();
      const rows = payload.data || [];

      if (!rows.length) {
        container.textContent = "No customers currently in the retention pen.";
        return;
      }

      // Take a small sample (e.g. first 20 rows)
      const sample = rows.slice(0, 20);

      const table = document.createElement("table");
      table.className = "w-full text-xs text-left border-collapse";

      const thead = document.createElement("thead");
      thead.innerHTML = `
        <tr class="border-b border-zinc-800 text-zinc-400">
          <th class="py-1 pr-2">Customer</th>
          <th class="py-1 pr-2">Reg</th>
          <th class="py-1 pr-2">Payments Left</th>
          <th class="py-1 pr-2">Payment Month</th>
          <th class="py-1 pr-2">Agreement</th>
        </tr>
      `;

      const tbody = document.createElement("tbody");

      sample.forEach((row) => {
        const tr = document.createElement("tr");
        tr.className = "border-b border-zinc-900/60";

        const customer =
          row.customer_name ||
          row.customer ||
          "";
        const reg = row.registration || row.reg || "";
        const paymentsRemaining =
          row.payments_remaining ??
          row.payments_left ??
          "";
        const paymentMonth = row.payment_month || row.month_key || "";
        const agreement = row.agreement_number || row.agreement || "";

        tr.innerHTML = `
          <td class="py-1 pr-2">${customer}</td>
          <td class="py-1 pr-2">${reg}</td>
          <td class="py-1 pr-2">${paymentsRemaining}</td>
          <td class="py-1 pr-2">${paymentMonth}</td>
          <td class="py-1 pr-2">${agreement}</td>
        `;

        tbody.appendChild(tr);
      });

      table.appendChild(thead);
      table.appendChild(tbody);

      container.innerHTML = "";
      container.appendChild(table);
    } catch (err) {
      console.error("Retention pen error:", err);
      container.textContent = "Error loading retention pen data.";
    }
  }

  // Handle data upload form
  document.addEventListener("DOMContentLoaded", () => {
    loadCampaigns();
    loadTrendChart();
    loadRetentionPen();

    const uploadForm = document.getElementById("upload-form");
    const uploadStatus = document.getElementById("upload-status");

    if (uploadForm) {
      uploadForm.addEventListener("submit", async (e) => {
        e.preventDefault();
        if (!uploadStatus) return;

        uploadStatus.textContent = "Uploading...";
        const formData = new FormData(uploadForm);

        try {
          const res = await fetch("/upload-book", {
            method: "POST",
            body: formData,
          });
          if (!res.ok) {
            const err = await res.json();
            throw new Error(err.detail || "Upload failed");
          }
          const data = await res.json();
          uploadStatus.textContent = `✅ ${data.message}`;
        } catch (err) {
          uploadStatus.textContent = `❌ ${err.message}`;
        }
      });
    }
  });
</script>