Open app/templates/dashboard.html and replace its entire contents with:

{% extends "base.html" %}
{% block title %}Dealer Pulse – Loyalty Manager{% endblock %}

{% block content %}
<div x-data="{ tab: 'overview' }" class="space-y-5 md:space-y-6">
  <!-- Page heading + subtle sub-header -->
  <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-2">
    <div>
      <h1 class="text-xl md:text-2xl font-semibold tracking-tight text-dp-ink">Retention Overview</h1>
      <p class="text-xs md:text-sm text-neutral-500 mt-1">
        Monitor contact, reply and retention performance for your loyalty book in one place.
      </p>
    </div>
    <div class="flex items-center gap-2 text-[11px] text-neutral-500">
      <span class="inline-flex items-center gap-1 rounded-full border border-dp-silver bg-white px-3 py-1 shadow-sm">
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
        <span>Realtime view</span>
      </span>
    </div>
  </div>

  <!-- Tabs -->
  <nav class="flex gap-2 border-b border-dp-silver/80 text-[12px] md:text-xs font-medium">
    <button
      class="px-3 py-2 -mb-px rounded-t-lg"
      :class="tab === 'overview'
        ? 'bg-white border border-dp-silver border-b-white text-dp-ink shadow-sm'
        : 'text-neutral-500 hover:text-dp-ink border-b border-transparent'"
      @click="tab = 'overview'"
    >
      Overview
    </button>
    <button
      class="px-3 py-2 -mb-px rounded-t-lg"
      :class="tab === 'campaigns'
        ? 'bg-white border border-dp-silver border-b-white text-dp-ink shadow-sm'
        : 'text-neutral-500 hover:text-dp-ink border-b border-transparent'"
      @click="tab = 'campaigns'"
    >
      Campaigns
    </button>
    <button
      class="px-3 py-2 -mb-px rounded-t-lg"
      :class="tab === 'upload'
        ? 'bg-white border border-dp-silver border-b-white text-dp-ink shadow-sm'
        : 'text-neutral-500 hover:text-dp-ink border-b border-transparent'"
      @click="tab = 'upload'"
    >
      Data Upload
    </button>
  </nav>

  <!-- Overview Tab -->
  <section x-show="tab === 'overview'" class="space-y-4 md:space-y-6">
    {% if latest %}
      <!-- KPI tiles -->
      <div class="grid md:grid-cols-3 gap-4">
        <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">Contact Rate</p>
          <p class="mt-2 text-2xl font-semibold text-dp-ink">
            {{ "%.1f" | format(latest.contact_rate or 0) }}%
          </p>
          <p class="mt-1 text-xs text-neutral-500">
            From {{ latest.total_contacts }} contacts
          </p>
        </div>

        <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">Reply Rate</p>
          <p class="mt-2 text-2xl font-semibold text-dp-ink">
            {{ "%.1f" | format(latest.reply_rate or 0) }}%
          </p>
          <p class="mt-1 text-xs text-neutral-500">
            Replies: {{ latest.total_replies }}
          </p>
        </div>

        <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">Retention Pen</p>
          <p class="mt-2 text-2xl font-semibold text-dp-ink">
            {{ "%.1f" | format(latest.retention_pen_pct or 0) }}%
          </p>
          <p class="mt-1 text-xs text-neutral-500">
            Drop-off total: {{ latest.drop_off_total }}
          </p>
        </div>
      </div>

      <p class="text-[11px] text-neutral-500">
        Latest month: <span class="font-medium text-dp-ink">{{ latest.month_key }}</span>
      </p>

      <!-- Trend + Retention Pen -->
      <div class="grid md:grid-cols-3 gap-4 md:gap-5">
        <!-- Trend chart -->
        <div class="md:col-span-2 bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 flex flex-col gap-3">
          <div class="flex items-center justify-between gap-2">
            <div>
              <h2 class="text-sm font-semibold text-dp-ink">6-Month KPI Trend</h2>
              <p class="text-[11px] text-neutral-500">
                Contact, reply and retention pen performance over time.
              </p>
            </div>
          </div>
          <div class="h-56">
            <canvas id="trend-chart" class="w-full h-full"></canvas>
          </div>
        </div>

        <!-- Retention pen table -->
        <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 flex flex-col gap-2">
          <div class="flex items-center justify-between gap-2">
            <h2 class="text-sm font-semibold text-dp-ink">Retention Pen – Next 60 Days</h2>
            <p class="text-[11px] text-neutral-500">Sample view</p>
          </div>
          <div
            id="retention-pen-container"
            class="text-xs text-neutral-700 border border-dp-silver/60 rounded-lg p-2 bg-neutral-50/60 overflow-auto max-h-56"
          >
            Loading…
          </div>
        </div>
      </div>
    {% else %}
      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-5 text-sm text-neutral-600">
        No data yet – upload your first VWFS snapshot to <span class="font-mono text-dp-ink">vwfs_snapshot</span>.
      </div>
    {% endif %}
  </section>

  <!-- Campaigns Tab -->
  <section x-show="tab === 'campaigns'" class="space-y-4 md:space-y-5">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <div>
        <h2 class="text-lg font-semibold text-dp-ink">Campaign Loader</h2>
        <p class="text-xs text-neutral-500">
          See live and upcoming campaigns pulled directly from your database.
        </p>
      </div>
      <div class="flex flex-wrap items-end gap-2">
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Status</label>
          <select id="camp-status" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="">All</option>
            <option value="live">Live</option>
            <option value="planned">Planned</option>
            <option value="paused">Paused</option>
          </select>
        </div>
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Type</label>
          <select id="camp-type" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="">All</option>
            <option value="renewals">Renewals</option>
            <option value="lost_sale">Lost Sale</option>
            <option value="service">Service</option>
          </select>
        </div>
        <button
          id="camp-apply"
          class="h-8 px-3 text-xs rounded-full border border-dp-silver bg-white text-dp-ink hover:bg-neutral-50 shadow-sm"
        >
          Filter
        </button>
      </div>
    </div>

    <div id="campaign-loader" class="grid md:grid-cols-2 gap-4 md:gap-5">
      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
        <h3 class="text-sm font-semibold text-dp-ink mb-2">Live Campaigns</h3>
        <ul id="current-campaigns" class="space-y-2 text-sm text-neutral-700">
          <li class="text-xs text-neutral-400">Loading…</li>
        </ul>
      </div>

      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5">
        <h3 class="text-sm font-semibold text-dp-ink mb-2">Upcoming / Planned</h3>
        <ul id="upcoming-campaigns" class="space-y-2 text-sm text-neutral-700">
          <li class="text-xs text-neutral-400">Loading…</li>
        </ul>
      </div>
    </div>

    <!-- Campaign detail / WhatsApp preview -->
    <div
      id="campaign-detail"
      class="mt-4 bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 text-sm text-neutral-700 hidden"
    >
      <div class="flex items-center justify-between mb-3">
        <h3 class="text-sm font-semibold text-dp-ink">Selected Campaign</h3>
        <button
          type="button"
          id="campaign-detail-close"
          class="text-[11px] text-neutral-500 hover:text-dp-ink"
        >
          Close
        </button>
      </div>

      <div class="grid md:grid-cols-2 gap-4">
        <div class="space-y-2">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">Summary</p>
          <p id="campaign-detail-name" class="text-sm font-semibold text-dp-ink">–</p>
          <p id="campaign-detail-meta" class="text-xs text-neutral-500 mt-1">–</p>
          <p id="campaign-detail-notes" class="text-xs text-neutral-500 mt-2">–</p>
        </div>

        <div class="space-y-2">
          <p class="text-[11px] uppercase tracking-[0.16em] text-neutral-500">WhatsApp Script Preview</p>
          <textarea
            id="campaign-whatsapp-preview"
            class="w-full h-32 bg-neutral-50 border border-dp-silver rounded-lg px-3 py-2 text-xs text-dp-ink"
          ></textarea>
          <p class="mt-1 text-[10px] text-neutral-500">
            Copy and personalise this message in your WhatsApp sender when you’re ready to launch.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Data Upload Tab -->
  <section x-show="tab === 'upload'" class="space-y-4 md:space-y-5">
    <div class="bg-white border border-dp-silver rounded-xl shadow-card p-5 md:p-6 space-y-3">
      <h2 class="text-lg font-semibold text-dp-ink">Data Upload</h2>
      <p class="text-sm text-neutral-600">
        Upload the latest VWFS snapshot CSV. Files are stored securely and queued for processing.
      </p>

      <form
        id="upload-form"
        class="mt-2 flex flex-col gap-3 md:flex-row md:items-center md:gap-4"
        enctype="multipart/form-data"
      >
        <div class="flex-1">
          <label class="block text-[11px] text-neutral-500 mb-1">Choose CSV file</label>
          <input
            type="file"
            name="file"
            accept=".csv"
            class="block w-full text-xs text-neutral-700 bg-neutral-50 border border-dp-silver rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-dp-blue/60"
            required
          />
        </div>
        <div class="flex items-center gap-3 pt-1">
          <button
            type="submit"
            class="inline-flex items-center gap-2 text-xs font-medium rounded-full px-4 py-2 border border-dp-silver bg-dp-ink text-white hover:bg-black/90 shadow-sm"
          >
            Upload &amp; Queue
          </button>
          <p id="upload-status" class="text-[11px] text-neutral-500"></p>
        </div>
      </form>
    </div>
  </section>
</div>

<!-- SCRIPT BLOCK: data loading, charts, campaigns, upload -->
<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-neutral-400">Loading…</li>';
    upcomingList.innerHTML = '<li class="text-xs text-neutral-400">Loading…</li>';

    try {
      const statusEl = document.getElementById("camp-status");
      const typeEl = document.getElementById("camp-type");
      const params = new URLSearchParams();
      if (statusEl?.value) params.set("status", statusEl.value);
      if (typeEl?.value) params.set("type", typeEl.value);

      const res = await fetch("/api/campaigns" + (params.toString() ? "?" + params.toString() : ""));
      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-1 border border-dp-silver/80 rounded-xl px-3 py-3 bg-white cursor-pointer hover:border-dp-blue/40 hover:shadow-card transition";

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

        const nameSpan = document.createElement("span");
        nameSpan.className = "font-medium text-sm text-dp-ink";
        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-dp-silver bg-neutral-50 text-neutral-600";
        typePill.textContent = c.type || "Generic";

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

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

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

        const sendBtn = document.createElement("button");
        sendBtn.className =
          "mt-1 inline-flex items-center gap-1 text-[11px] text-dp-ink border border-dp-silver rounded-full px-3 py-1 bg-white hover:bg-neutral-50";
        sendBtn.textContent = "Prepare WhatsApp blast";

        const openDetail = () => {
          const panel = document.getElementById("campaign-detail");
          const nameEl = document.getElementById("campaign-detail-name");
          const metaEl = document.getElementById("campaign-detail-meta");
          const notesEl = document.getElementById("campaign-detail-notes");
          const waEl = document.getElementById("campaign-whatsapp-preview");

          if (!panel || !nameEl || !metaEl || !notesEl || !waEl) return;

          panel.classList.remove("hidden");
          nameEl.textContent = c.name || "Untitled campaign";

          metaEl.textContent =
            `${c.type || "Generic"} • Status: ${c.status || "unknown"} • ` +
            `${c.starts_on || "–"} → ${c.ends_on || "–"} • Segment: ${c.target_segment || "All"}`;

          notesEl.textContent = c.notes || "No additional notes recorded for this campaign.";

          const campaignName = c.name || "your current loyalty campaign";
          const segment = c.target_segment || "customers nearing the end of their agreement";
          const centre = "Lincoln Audi";

          waEl.value =
`Hi [Customer Name], it’s [Your Name] from ${centre}.

We’re running ${campaignName.toLowerCase()} for ${segment}. Based on your current agreement, you may be able to change your Audi with minimal change to your monthly budget.

Would you be open to a quick review of your options this week, either by WhatsApp or a short call?

Thanks,
[Your Name]
${centre}`;
          waEl.scrollTop = 0;
        };

        li.addEventListener("click", openDetail);

        sendBtn.addEventListener("click", async (e) => {
          e.stopPropagation();
          openDetail();
          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-neutral-400">No live campaigns.</li>';
      }
      if (!upcomingList.children.length) {
        upcomingList.innerHTML = '<li class="text-xs text-neutral-400">No upcoming campaigns.</li>';
      }
    } catch (err) {
      currentList.innerHTML = '<li class="text-xs text-red-500">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.35,
              borderWidth: 2,
            },
            {
              label: "Reply Rate %",
              data: replyRate,
              tension: 0.35,
              borderWidth: 2,
            },
            {
              label: "Retention Pen %",
              data: retentionPen,
              tension: 0.35,
              borderWidth: 2,
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              labels: {
                color: "#6B7280",
                font: { size: 11 },
              },
            },
          },
          scales: {
            x: {
              ticks: { color: "#9CA3AF", font: { size: 10 } },
              grid: { color: "#E5E7EB" },
            },
            y: {
              ticks: { color: "#9CA3AF", font: { size: 10 } },
              grid: { color: "#E5E7EB" },
            },
          },
        },
      });
    } catch (err) {
      console.error("Trend chart error:", err);
    }
  }

  // Retention Pen detail – simple table
  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;
      }

      const sample = rows.slice(0, 20);

      const table = document.createElement("table");
      table.className = "w-full text-[11px] text-left border-collapse";

      const thead = document.createElement("thead");
      thead.innerHTML = `
        <tr class="border-b border-dp-silver/80 text-neutral-500">
          <th class="py-1 pr-2 font-medium">Customer</th>
          <th class="py-1 pr-2 font-medium">Reg</th>
          <th class="py-1 pr-2 font-medium">Payments Left</th>
          <th class="py-1 pr-2 font-medium">Payment Month</th>
          <th class="py-1 pr-2 font-medium">Agreement</th>
        </tr>
      `;

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

      sample.forEach((row) => {
        const tr = document.createElement("tr");
        tr.className = "border-b border-dp-silver/40";

        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.";
    }
  }

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

    const detailPanel = document.getElementById("campaign-detail");
    const detailClose = document.getElementById("campaign-detail-close");
    if (detailPanel && detailClose) {
      detailClose.addEventListener("click", () => {
        detailPanel.classList.add("hidden");
      });
    }

    const campApply = document.getElementById("camp-apply");
    if (campApply) {
      campApply.addEventListener("click", () => loadCampaigns());
    }
  });
</script>
{% endblock %}