Open app/templates/dashboard.html and, just before the final `{% endblock %}` at the bottom, add this script block:

<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) {
        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);
    }
  }

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

    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>