{% extends "ui/templates/base/layout.html" %}{% block content %}<div class="space-y-6"><div class="flex items-center justify-between"><div><h2 class="text-2xl font-semibold text-slate-900">Client Groups</h2><p class="text-sm text-slate-500">Track family, promoter and related business clients together.</p></div><a href="/client-groups/new" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white">Add Group</a></div><div class="overflow-hidden rounded-2xl bg-white shadow-soft"><table class="min-w-full divide-y divide-slate-200"><thead class="bg-slate-50"><tr><th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Code</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Group</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Type</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Clients</th><th></th></tr></thead><tbody class="divide-y divide-slate-100">{% for item in groups %}<tr><td class="px-4 py-3 text-sm font-medium">{{ item.group.group_code }}</td><td class="px-4 py-3 text-sm"><div class="font-medium">{{ item.group.group_name }}</div><div class="text-xs text-slate-500">{{ item.group.primary_contact_name or '-' }}</div></td><td class="px-4 py-3 text-sm">{{ item.group.group_type }}</td><td class="px-4 py-3 text-sm">{{ item.client_count }}</td><td class="px-4 py-3 text-right"><a class="text-brand-700" href="/client-groups/{{ item.group.id }}">Open</a></td></tr>{% else %}<tr><td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">No client groups created.</td></tr>{% endfor %}</tbody></table></div></div>{% endblock %}