In app/templates/dashboard.html, just before the existing <!-- Data Upload Tab --> section, insert this new section:

  <!-- Reminders Tab -->
  <section x-show="tab === 'reminders'" 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">Appointment Reminders</h2>
        <p class="text-xs text-neutral-500">
          See upcoming customer touchpoints and use ready-made scripts to confirm or rebook.
        </p>
      </div>
      <div class="flex flex-wrap items-end gap-2">
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Advisor</label>
          <select id="rem-advisor" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="">All</option>
          </select>
        </div>
        <div>
          <label class="block text-[11px] text-neutral-500 mb-1">Window</label>
          <select id="rem-window" class="bg-white border border-dp-silver rounded-full px-3 py-1 text-xs shadow-sm">
            <option value="today">Today</option>
            <option value="7">Next 7 days</option>
            <option value="30">Next 30 days</option>
          </select>
        </div>
        <button
          id="rem-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"
        >
          Apply
        </button>
      </div>
    </div>

    <div class="grid md:grid-cols-3 gap-4 md:gap-5">
      <!-- Upcoming list -->
      <div class="md:col-span-2 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 appointments</h3>
        <ul id="reminders-list" class="space-y-2 text-sm text-neutral-700">
          <li class="text-xs text-neutral-400">Loading…</li>
        </ul>
      </div>

      <!-- Script preview -->
      <div class="bg-white border border-dp-silver rounded-xl shadow-card p-4 md:p-5 space-y-2">
        <div class="flex items-center justify-between gap-2 mb-1">
          <h3 class="text-sm font-semibold text-dp-ink">Message preview</h3>
          <p class="text-[11px] text-neutral-500" id="rem-selected-label">No appointment selected</p>
        </div>
        <textarea
          id="rem-script-preview"
          class="w-full h-40 bg-neutral-50 border border-dp-silver rounded-lg px-3 py-2 text-xs text-dp-ink"
          placeholder="Select an appointment to view the suggested WhatsApp or SMS script."
        ></textarea>
        <p class="mt-1 text-[10px] text-neutral-500">
          Copy and personalise this in your WhatsApp, SMS or email sender.
        </p>
      </div>
    </div>
  </section>