A R R R Associates
81 lines
5.2 KiB
HTML
81 lines
5.2 KiB
HTML
<div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft" data-partner-client-list>
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-slate-900">Assigned Clients</h2>
|
|
<p class="text-sm text-slate-500">Owned clients and review-assigned clients, with existing service, task and overdue totals.</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700" data-visible-count>{{ clients|length }} clients</span>
|
|
<a href="/clients" class="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Manage Clients</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-end">
|
|
<label class="min-w-0 flex-1">
|
|
<span class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Search</span>
|
|
<input type="search" data-client-search autocomplete="off" placeholder="Client code, name, PAN or GSTIN"
|
|
class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
|
|
</label>
|
|
<label class="w-full sm:w-52">
|
|
<span class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Status</span>
|
|
<select data-client-status class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
|
|
<option value="">All statuses</option>
|
|
<option value="active" selected>Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
<option value="archived">Archived</option>
|
|
</select>
|
|
</label>
|
|
<button type="button" data-client-clear class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Clear</button>
|
|
</div>
|
|
|
|
<div data-client-scroll class="mt-4 max-h-[540px] overflow-auto rounded-2xl border border-slate-200">
|
|
<table class="min-w-full divide-y divide-slate-200">
|
|
<thead class="sticky top-0 z-10 bg-slate-50 shadow-sm">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Code</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Client</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">PAN / GSTIN</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wide text-slate-500">Services</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wide text-slate-500">Tasks</th>
|
|
<th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wide text-slate-500">Overdue</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Status</th>
|
|
<th class="px-4 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 bg-white">
|
|
{% for c in clients %}
|
|
{% set row_status = (c.status or 'active')|lower %}
|
|
<tr data-client-row
|
|
data-search="{{ (c.client_code ~ ' ' ~ c.client_name ~ ' ' ~ (c.pan or '') ~ ' ' ~ (c.gstin or ''))|lower|e }}"
|
|
data-status="{{ row_status|e }}">
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm font-semibold text-slate-900">{{ c.client_code }}</td>
|
|
<td class="px-4 py-3 text-sm text-slate-800">{{ c.client_name }}</td>
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ c.pan or c.gstin or '-' }}</td>
|
|
<td class="px-4 py-3 text-center text-sm text-slate-700">{{ c.service_count }}</td>
|
|
<td class="px-4 py-3 text-center text-sm text-slate-700">{{ c.task_count }}</td>
|
|
<td class="px-4 py-3 text-center text-sm {% if c.overdue_count > 0 %}font-semibold text-red-700{% else %}text-slate-700{% endif %}">{{ c.overdue_count }}</td>
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm">
|
|
{% if row_status == 'active' %}
|
|
<span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700">Active</span>
|
|
{% elif row_status == 'archived' %}
|
|
<span class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800">Archived</span>
|
|
{% else %}
|
|
<span class="rounded-full bg-slate-200 px-2 py-1 text-xs font-medium text-slate-700">Inactive</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-3 text-right">
|
|
<a href="{{ c.href }}" class="text-sm font-medium text-brand-700 hover:underline">Open</a>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No assigned clients found.</td></tr>
|
|
{% endfor %}
|
|
<tr data-no-results hidden>
|
|
<td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No clients match the search.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<script src="/static/js/partner_dashboard_clients.js" defer></script>
|