Change staff My Work engagements to compact row layout
This commit is contained in:
A R R R Associates
@@ -6,7 +6,7 @@
|
|||||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-xl font-semibold text-slate-900">My Work</h2>
|
<h2 class="text-xl font-semibold text-slate-900">My Work</h2>
|
||||||
<p class="mt-1 text-sm text-slate-500">One card per assigned engagement. Start, continue, follow up or view the full workflow from here.</p>
|
<p class="mt-1 text-sm text-slate-500">One row per assigned engagement. Start, continue, follow up or view the full workflow from here.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -59,64 +59,129 @@
|
|||||||
<span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600">{{ column.cards|length }}</span>
|
<span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600">{{ column.cards|length }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
<div class="overflow-x-auto rounded-2xl border border-slate-200 bg-white">
|
||||||
|
<table class="min-w-[1180px] w-full border-collapse text-sm">
|
||||||
|
<thead class="bg-slate-50">
|
||||||
|
<tr class="border-b border-slate-200 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||||
|
<th class="px-4 py-3">Client / Scope</th>
|
||||||
|
<th class="px-4 py-3">Service</th>
|
||||||
|
<th class="px-4 py-3">FY / Due</th>
|
||||||
|
<th class="px-4 py-3">Progress</th>
|
||||||
|
<th class="px-4 py-3">Next / Pending</th>
|
||||||
|
<th class="px-4 py-3">Status</th>
|
||||||
|
<th class="px-4 py-3 text-right">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-slate-100">
|
||||||
{% for card in column.cards %}
|
{% for card in column.cards %}
|
||||||
<article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm hover:border-brand-200 hover:shadow-soft">
|
<tr class="align-top hover:bg-slate-50/70">
|
||||||
<div class="flex items-start justify-between gap-3">
|
<td class="px-4 py-4">
|
||||||
<div>
|
<div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{{ card.client_code or 'Client' }}</div>
|
||||||
<div class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ card.client_code or 'Client' }}</div>
|
<div class="mt-1 font-semibold text-slate-900">{{ card.client_name }}</div>
|
||||||
<h4 class="mt-1 text-base font-semibold text-slate-900">{{ card.client_name }}</h4>
|
{% if card.scope_secondary %}
|
||||||
</div>
|
<div class="mt-1 text-xs text-slate-500">{{ card.scope_secondary }}</div>
|
||||||
{% if card.is_overdue %}<span class="rounded-full bg-red-100 px-2 py-1 text-[11px] font-semibold text-red-700">Overdue</span>{% elif card.is_due_today %}<span class="rounded-full bg-amber-100 px-2 py-1 text-[11px] font-semibold text-amber-700">Due today</span>{% endif %}
|
{% endif %}
|
||||||
</div>
|
{% if card.scope_context %}
|
||||||
|
<div class="mt-0.5 text-xs text-slate-400">{{ card.scope_context }}</div>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
|
||||||
<div class="mt-3 rounded-xl bg-slate-50 p-3">
|
<td class="px-4 py-4">
|
||||||
<div class="text-sm font-semibold text-slate-900">{{ card.service_name }}</div>
|
<div class="font-semibold text-slate-900">{{ card.service_name }}</div>
|
||||||
<div class="mt-1 text-xs text-slate-500">FY {{ card.financial_year }} · Due {{ card.due_date or '-' }}</div>
|
{% if card.period_label %}
|
||||||
</div>
|
<div class="mt-1 text-xs text-slate-500">{{ card.period_label }}</div>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
|
||||||
<div class="mt-4">
|
<td class="px-4 py-4 whitespace-nowrap">
|
||||||
<div class="flex items-center justify-between text-xs">
|
<div class="font-medium text-slate-700">FY {{ card.financial_year }}</div>
|
||||||
<span class="font-semibold text-slate-600">My progress</span>
|
<div class="mt-1 text-xs text-slate-500">Due {{ card.due_date or '-' }}</div>
|
||||||
<span class="font-semibold text-slate-900">{{ card.progress_percent }}% weighted</span>
|
</td>
|
||||||
|
|
||||||
|
<td class="px-4 py-4">
|
||||||
|
<div class="min-w-[180px]">
|
||||||
|
<div class="flex items-center justify-between gap-3 text-xs">
|
||||||
|
<span class="font-semibold text-slate-700">{{ card.progress_percent }}%</span>
|
||||||
|
<span class="text-slate-500">{{ card.completed_count }}/{{ card.task_count }} tasks</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-200">
|
<div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-200">
|
||||||
<div class="h-full rounded-full bg-brand-600" style="width: {{ card.progress_percent }}% weighted"></div>
|
<div class="h-full rounded-full bg-brand-600" style="width: {{ card.progress_percent }}%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 text-xs text-slate-500">{{ card.completed_count }} of {{ card.task_count }} assigned tasks completed</div>
|
<div class="mt-1 text-[11px] text-slate-400">Weighted progress</div>
|
||||||
</div>
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="px-4 py-4">
|
||||||
{% if column.code == 'blocked' %}
|
{% if column.code == 'blocked' %}
|
||||||
<div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3">
|
<div class="max-w-[300px]">
|
||||||
<div class="text-xs font-semibold uppercase text-rose-700">Pending reason</div>
|
<div class="font-medium text-rose-800">{{ card.blocked_reason }}</div>
|
||||||
<div class="mt-1 text-sm font-medium text-rose-900">{{ card.blocked_reason }}</div>
|
{% if card.blocked_notes %}<div class="mt-1 text-xs text-rose-600">{{ card.blocked_notes }}</div>{% endif %}
|
||||||
{% if card.blocked_notes %}<div class="mt-1 text-xs text-rose-700">{{ card.blocked_notes }}</div>{% endif %}
|
{% if card.follow_up_date %}<div class="mt-1 text-xs font-semibold text-rose-700">Follow-up: {{ card.follow_up_date }}</div>{% endif %}
|
||||||
{% if card.follow_up_date %}<div class="mt-2 text-xs font-semibold text-rose-800">Follow-up: {{ card.follow_up_date }}</div>{% endif %}
|
{% if card.blocked_task_name %}<div class="mt-1 text-xs text-rose-600">Task: {{ card.blocked_task_name }}</div>{% endif %}
|
||||||
{% if card.blocked_task_name %}<div class="mt-1 text-xs text-rose-700">Task: {{ card.blocked_task_name }}</div>{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
{% elif card.next_task_name and column.code != 'completed' %}
|
{% elif card.next_task_name and column.code != 'completed' %}
|
||||||
<div class="mt-4 text-xs text-slate-500">Next: <span class="font-medium text-slate-700">{{ card.next_task_name }}</span></div>
|
<div class="max-w-[300px] text-slate-700">{{ card.next_task_name }}</div>
|
||||||
|
{% else %}
|
||||||
|
<span class="text-slate-400">—</span>
|
||||||
|
{% endif %}
|
||||||
|
{% if card.latest_comment %}
|
||||||
|
<div class="mt-1 max-w-[300px] truncate text-xs text-slate-500">Latest: {{ card.latest_comment.message }}</div>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="px-4 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex flex-col items-start gap-1.5">
|
||||||
|
{% if card.is_overdue %}
|
||||||
|
<span class="rounded-full bg-red-100 px-2 py-1 text-[11px] font-semibold text-red-700">Overdue</span>
|
||||||
|
{% elif card.is_due_today %}
|
||||||
|
<span class="rounded-full bg-amber-100 px-2 py-1 text-[11px] font-semibold text-amber-700">Due today</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if card.latest_comment %}<p class="mt-3 truncate text-xs text-slate-500">Latest: {{ card.latest_comment.message }}</p>{% endif %}
|
|
||||||
|
|
||||||
{% if column.code == 'pending' %}
|
{% if column.code == 'pending' %}
|
||||||
<form method="post" action="/employee/work/engagements/{{ card.engagement_id }}/start" class="mt-4">
|
<span class="rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-700">Pending</span>
|
||||||
|
{% elif column.code == 'in_progress' %}
|
||||||
|
<span class="rounded-full bg-blue-100 px-2 py-1 text-[11px] font-semibold text-blue-700">In Progress</span>
|
||||||
|
{% elif column.code == 'blocked' %}
|
||||||
|
<span class="rounded-full bg-rose-100 px-2 py-1 text-[11px] font-semibold text-rose-700">Blocked</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="rounded-full bg-emerald-100 px-2 py-1 text-[11px] font-semibold text-emerald-700">Completed</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="px-4 py-4 text-right">
|
||||||
|
<div class="inline-flex min-w-[140px] flex-col gap-2">
|
||||||
|
{% if column.code == 'pending' %}
|
||||||
|
<form method="post" action="/employee/work/engagements/{{ card.engagement_id }}/start">
|
||||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||||
<button type="submit" class="inline-flex w-full justify-center rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Start</button>
|
<button type="submit" class="inline-flex w-full justify-center rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Start</button>
|
||||||
</form>
|
</form>
|
||||||
{% elif column.code == 'in_progress' %}
|
{% elif column.code == 'in_progress' %}
|
||||||
<a href="/employee/work/engagements/{{ card.engagement_id }}" class="mt-4 inline-flex w-full justify-center rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Continue</a>
|
<a href="/employee/work/engagements/{{ card.engagement_id }}" class="inline-flex w-full justify-center rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Continue</a>
|
||||||
{% elif column.code == 'blocked' %}
|
{% elif column.code == 'blocked' %}
|
||||||
<a href="/employee/work/engagements/{{ card.engagement_id }}" class="mt-4 inline-flex w-full justify-center rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-700">Open / Follow Up</a>
|
<a href="/employee/work/engagements/{{ card.engagement_id }}" class="inline-flex w-full justify-center rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-700">Open / Follow Up</a>
|
||||||
{% if card.manual_blocker %}<form method="post" action="/employee/work/engagements/{{ card.engagement_id }}/resume" class="mt-2"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button type="submit" class="inline-flex w-full justify-center rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-700 hover:bg-emerald-100">Resume Workflow</button></form>{% endif %}
|
{% if card.manual_blocker %}
|
||||||
{% else %}
|
<form method="post" action="/employee/work/engagements/{{ card.engagement_id }}/resume">
|
||||||
<a href="/employee/work/engagements/{{ card.engagement_id }}" class="mt-4 inline-flex w-full justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">View</a>
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||||
|
<button type="submit" class="inline-flex w-full justify-center rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-700 hover:bg-emerald-100">Resume Workflow</button>
|
||||||
|
</form>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</article>
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="md:col-span-2 xl:col-span-3 rounded-2xl border border-dashed border-slate-300 bg-white p-6 text-center text-sm text-slate-500">No engagement cards in this section.</div>
|
<a href="/employee/work/engagements/{{ card.engagement_id }}" class="inline-flex w-full justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">View</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% else %}
|
||||||
|
<tr>
|
||||||
|
<td colspan="7" class="px-6 py-8 text-center text-sm text-slate-500">
|
||||||
|
No engagements in this section.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
Reference in New Issue
Block a user