Add compact live-filter client lists for partners
This commit is contained in:
A R R R Associates
@@ -228,7 +228,7 @@ def _load_tasks(db: Session, tenant_id: int | None, branch_id: int | None, curre
|
||||
|
||||
def _load_clients(db: Session, tenant_id: int | None, branch_id: int | None, current_user, roles: set[str]) -> list[dict[str, Any]]:
|
||||
stmt = _client_scope(select(Client), tenant_id, branch_id, current_user, roles)
|
||||
clients = db.execute(stmt.order_by(Client.client_name.asc()).limit(100)).scalars().all()
|
||||
clients = db.execute(stmt.order_by(Client.client_name.asc()).limit(5000)).scalars().all()
|
||||
out: list[dict[str, Any]] = []
|
||||
for client in clients:
|
||||
task_count = _count(db, _task_scope(select(func.count(ClientServiceTaskInstance.id)), tenant_id, branch_id, current_user, roles).where(ClientServiceTaskInstance.client_id == client.id))
|
||||
@@ -246,6 +246,7 @@ def _load_clients(db: Session, tenant_id: int | None, branch_id: int | None, cur
|
||||
"gstin": client.gstin,
|
||||
"email": client.email,
|
||||
"mobile": client.mobile,
|
||||
"status": client.status or ("active" if client.is_active else "inactive"),
|
||||
"service_count": service_count,
|
||||
"task_count": task_count,
|
||||
"overdue_count": overdue_count,
|
||||
|
||||
@@ -1,11 +1,101 @@
|
||||
<div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
|
||||
<div class="flex items-center 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 service count, open tasks and overdue items.</p></div><a href="/clients" class="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Manage Clients</a></div>
|
||||
<div class="mt-5 grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{% for c in clients %}
|
||||
<a href="{{ c.href }}" class="rounded-3xl border border-slate-200 p-5 hover:bg-slate-50">
|
||||
<div class="flex items-start justify-between gap-3"><div><h3 class="font-semibold text-slate-900">{{ c.client_name }}</h3><p class="mt-1 text-xs text-slate-500">{{ c.client_code }}{% if c.gstin %} · {{ c.gstin }}{% elif c.pan %} · {{ c.pan }}{% endif %}</p></div>{% if c.overdue_count > 0 %}<span class="rounded-full bg-red-100 px-2 py-1 text-xs font-semibold text-red-700">{{ c.overdue_count }} overdue</span>{% endif %}</div>
|
||||
<div class="mt-4 grid grid-cols-3 gap-2 text-center text-xs"><div class="rounded-2xl bg-slate-50 p-3"><div class="text-lg font-semibold">{{ c.service_count }}</div><div class="text-slate-500">Services</div></div><div class="rounded-2xl bg-slate-50 p-3"><div class="text-lg font-semibold">{{ c.task_count }}</div><div class="text-slate-500">Tasks</div></div><div class="rounded-2xl bg-slate-50 p-3"><div class="text-lg font-semibold">{{ c.overdue_count }}</div><div class="text-slate-500">Overdue</div></div></div>
|
||||
</a>
|
||||
{% else %}<div class="rounded-3xl border border-dashed border-slate-300 p-8 text-center text-sm text-slate-500 xl:col-span-3">No assigned or review clients found.</div>{% endfor %}
|
||||
<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>
|
||||
(function () {
|
||||
const root = document.querySelector('[data-partner-client-list]');
|
||||
if (!root || root.dataset.ready === '1') return;
|
||||
root.dataset.ready = '1';
|
||||
const search = root.querySelector('[data-client-search]');
|
||||
const status = root.querySelector('[data-client-status]');
|
||||
const clear = root.querySelector('[data-client-clear]');
|
||||
const scroll = root.querySelector('[data-client-scroll]');
|
||||
const count = root.querySelector('[data-visible-count]');
|
||||
const empty = root.querySelector('[data-no-results]');
|
||||
const rows = Array.from(root.querySelectorAll('[data-client-row]'));
|
||||
let timer;
|
||||
function apply() {
|
||||
const term = (search.value || '').trim().toLowerCase();
|
||||
const wantedStatus = status.value;
|
||||
let visible = 0;
|
||||
rows.forEach((row) => {
|
||||
const show = (!term || row.dataset.search.includes(term)) && (!wantedStatus || row.dataset.status === wantedStatus);
|
||||
row.hidden = !show;
|
||||
if (show) visible += 1;
|
||||
});
|
||||
count.textContent = visible + (visible === 1 ? ' client' : ' clients');
|
||||
empty.hidden = visible !== 0;
|
||||
scroll.scrollTop = 0;
|
||||
}
|
||||
search.addEventListener('input', () => { window.clearTimeout(timer); timer = window.setTimeout(apply, 250); });
|
||||
status.addEventListener('change', apply);
|
||||
clear.addEventListener('click', () => { search.value = ''; status.value = 'active'; apply(); search.focus(); });
|
||||
apply();
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user