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-4">
  <!-- Tabs -->
  <nav class="flex gap-2 border-b border-zinc-800 pb-1 text-xs font-medium">
    <button
      class="px-3 py-1.5 rounded-t border-b-2"
      :class="tab === 'overview'
        ? 'border-zinc-100 text-zinc-100'
        : 'border-transparent text-zinc-500 hover:text-zinc-200'"
      @click="tab = 'overview'"
    >
      Overview
    </button>

    <button
      class="px-3 py-1.5 rounded-t border-b-2"
      :class="tab === 'campaigns'
        ? 'border-zinc-100 text-zinc-100'
        : 'border-transparent text-zinc-500 hover:text-zinc-200'"
      @click="tab = 'campaigns'"
    >
      Campaigns
    </button>

    <button
      class="px-3 py-1.5 rounded-t border-b-2"
      :class="tab === 'upload'
        ? 'border-zinc-100 text-zinc-100'
        : 'border-transparent text-zinc-500 hover:text-zinc-200'"
      @click="tab = 'upload'"
    >
      Data Upload
    </button>
  </nav>

  <!-- Overview Tab -->
  <section x-show="tab === 'overview'" class="space-y-4">
    <h1 class="text-xl font-semibold mb-2">Retention Overview</h1>

    {% if latest %}
      <div class="grid md:grid-cols-3 gap-4">
        <div class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
          <p class="text-xs uppercase tracking-wide text-zinc-400">Contact Rate</p>
          <p class="mt-2 text-2xl font-semibold">
            {{ "%.1f" | format(latest.contact_rate or 0) }}%
          </p>
          <p class="mt-1 text-xs text-zinc-500">
            From {{ latest.total_contacts }} contacts
          </p>
        </div>

        <div class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
          <p class="text-xs uppercase tracking-wide text-zinc-400">Reply Rate</p>
          <p class="mt-2 text-2xl font-semibold">
            {{ "%.1f" | format(latest.reply_rate or 0) }}%
          </p>
          <p class="mt-1 text-xs text-zinc-500">
            Replies: {{ latest.total_replies }}
          </p>
        </div>

        <div class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
          <p class="text-xs uppercase tracking-wide text-zinc-400">Retention Pen</p>
          <p class="mt-2 text-2xl font-semibold">
            {{ "%.1f" | format(latest.retention_pen_pct or 0) }}%
          </p>
          <p class="mt-1 text-xs text-zinc-500">
            Drop-off total: {{ latest.drop_off_total }}
          </p>
        </div>
      </div>

      <p class="mt-4 text-xs text-zinc-500">
        Latest month: {{ latest.month_key }}
      </p>
    {% else %}
      <p class="text-sm text-zinc-400">
        No data yet – upload your first VWFS snapshot to vwfs_snapshot.
      </p>
    {% endif %}
  </section>

  <!-- Campaigns Tab (we'll wire this up next) -->
  <section x-show="tab === 'campaigns'" class="space-y-4">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-semibold text-zinc-50">Campaign Loader</h2>
      <p class="text-xs text-zinc-500">
        Live and upcoming campaigns driven from the database.
      </p>
    </div>

    <div class="grid md:grid-cols-2 gap-4" id="campaign-loader">
      <div class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
        <h3 class="text-sm font-semibold text-zinc-100 mb-2">Live Campaigns</h3>
        <ul id="current-campaigns" class="space-y-2 text-sm text-zinc-300">
          <li class="text-xs text-zinc-500">Loading…</li>
        </ul>
      </div>

      <div class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4">
        <h3 class="text-sm font-semibold text-zinc-100 mb-2">Upcoming / Planned</h3>
        <ul id="upcoming-campaigns" class="space-y-2 text-sm text-zinc-300">
          <li class="text-xs text-zinc-500">Loading…</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Data Upload Tab (form wired next) -->
  <section x-show="tab === 'upload'" class="space-y-4">
    <h2 class="text-lg font-semibold text-zinc-50">Data Upload</h2>
    <p class="text-sm text-zinc-400">
      Upload the latest finance book CSV. The file will be sent to secure storage and queued for processing.
    </p>

    <form
      id="upload-form"
      class="bg-zinc-900/60 border border-zinc-800 rounded-lg p-4 space-y-3"
      enctype="multipart/form-data"
    >
      <label class="block text-sm text-zinc-300 mb-1">Choose CSV file</label>
      <input
        type="file"
        name="file"
        accept=".csv"
        class="block w-full text-sm text-zinc-200 bg-zinc-950 border border-zinc-700 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-zinc-500"
        required
      />

      <button
        type="submit"
        class="mt-2 inline-flex items-center gap-2 text-sm font-medium bg-zinc-100 text-zinc-950 px-4 py-2 rounded hover:bg-white transition"
      >
        Upload &amp; Queue
      </button>

      <p id="upload-status" class="text-xs text-zinc-400 mt-2"></p>
    </form>
  </section>
</div>
{% endblock %}