<div class="space-y-6">
  <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    {% for card in [
      ('Branch Clients', overview.client_count),
      ('Open Tasks', overview.open_task_count),
      ('Overdue', overview.overdue_count),
      ('Review Pending', overview.review_pending_count),
      ('Due Today', overview.due_today_count),
      ('Due This Week', overview.due_week_count),
      ('Client Pending', overview.client_pending_count),
      ('Outstanding', '₹ ' ~ overview.outstanding)
    ] %}
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="text-xs font-semibold uppercase tracking-wide text-slate-400">{{ card[0] }}</div>
      <div class="mt-2 text-3xl font-bold text-slate-900">{{ card[1] }}</div>
    </div>
    {% endfor %}
  </div>

  <div class="grid gap-6 xl:grid-cols-2">
    <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="flex items-center justify-between"><h2 class="font-semibold text-slate-900">Needs Attention</h2><a href="/partner/dashboard?tab=branch-work" class="text-xs font-semibold text-brand-700">View work</a></div>
      <div class="mt-4 space-y-3">
        {% for item in overdue[:6] + client_pending[:4] %}
        <a href="{{ item.href }}" class="block rounded-2xl border border-slate-200 p-4 hover:bg-slate-50">
          <div class="flex items-start justify-between gap-3"><div><div class="font-semibold text-slate-900">{{ item.task_name }}</div><div class="mt-1 text-xs text-slate-500">{{ item.client_name }} · {{ item.service_name }}</div></div><span class="rounded-full bg-red-100 px-2 py-1 text-xs font-semibold text-red-700">{{ item.status_label }}</span></div>
          <div class="mt-2 text-xs text-slate-500">Due: {{ item.due_date or '-' }} · Assigned: {{ item.assigned_to }}</div>
        </a>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500">No overdue or blocked branch work in current scope.</div>
        {% endfor %}
      </div>
    </section>

    <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="flex items-center justify-between"><h2 class="font-semibold text-slate-900">Review Queue</h2><a href="/partner/reviews" class="text-xs font-semibold text-brand-700">Open review board</a></div>
      <div class="mt-4 space-y-3">
        {% for item in review_queue[:8] %}
        <a href="{{ item.href }}" class="block rounded-2xl border border-slate-200 p-4 hover:bg-slate-50">
          <div class="font-semibold text-slate-900">{{ item.task_name }}</div>
          <div class="mt-1 text-xs text-slate-500">{{ item.client_name }} · {{ item.service_name }} · {{ item.assigned_to }}</div>
        </a>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500">No completed tasks waiting for partner review.</div>
        {% endfor %}
      </div>
    </section>
  </div>
</div>
