From 91c78ce00eca7ec7c64e56a1e2786a5be0fe4a70 Mon Sep 17 00:00:00 2001
From: A R R R Associates <admin@arrrassociates.com>
Date: Fri, 7 Aug 2026 15:53:24 +0530
Subject: [PATCH] Change staff My Work engagements to compact row layout

---
 .../templates/employees/self_work.html        | 173 ++++++++++++------
 1 file changed, 119 insertions(+), 54 deletions(-)

diff --git a/app/modules/employees/templates/employees/self_work.html b/app/modules/employees/templates/employees/self_work.html
index c71b835..0510770 100644
--- a/app/modules/employees/templates/employees/self_work.html
+++ b/app/modules/employees/templates/employees/self_work.html
@@ -6,7 +6,7 @@
   <div class="flex flex-wrap items-start justify-between gap-3">
     <div>
       <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>
 
@@ -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>
       </div>
 
-      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-        {% 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">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ card.client_code or 'Client' }}</div>
-              <h4 class="mt-1 text-base font-semibold text-slate-900">{{ card.client_name }}</h4>
-            </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 %}
-          </div>
+      <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 %}
+            <tr class="align-top hover:bg-slate-50/70">
+              <td class="px-4 py-4">
+                <div class="text-[11px] 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>
+                {% if card.scope_secondary %}
+                <div class="mt-1 text-xs text-slate-500">{{ card.scope_secondary }}</div>
+                {% endif %}
+                {% 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">
-            <div class="text-sm 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>
-          </div>
+              <td class="px-4 py-4">
+                <div class="font-semibold text-slate-900">{{ card.service_name }}</div>
+                {% if card.period_label %}
+                <div class="mt-1 text-xs text-slate-500">{{ card.period_label }}</div>
+                {% endif %}
+              </td>
 
-          <div class="mt-4">
-            <div class="flex items-center justify-between text-xs">
-              <span class="font-semibold text-slate-600">My progress</span>
-              <span class="font-semibold text-slate-900">{{ card.progress_percent }}% weighted</span>
-            </div>
-            <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>
-            <div class="mt-2 text-xs text-slate-500">{{ card.completed_count }} of {{ card.task_count }} assigned tasks completed</div>
-          </div>
+              <td class="px-4 py-4 whitespace-nowrap">
+                <div class="font-medium text-slate-700">FY {{ card.financial_year }}</div>
+                <div class="mt-1 text-xs text-slate-500">Due {{ card.due_date or '-' }}</div>
+              </td>
 
-          {% if column.code == 'blocked' %}
-          <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3">
-            <div class="text-xs font-semibold uppercase text-rose-700">Pending 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-700">{{ card.blocked_notes }}</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-700">Task: {{ card.blocked_task_name }}</div>{% endif %}
-          </div>
-          {% 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>
-          {% endif %}
+              <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 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 }}%"></div>
+                  </div>
+                  <div class="mt-1 text-[11px] text-slate-400">Weighted progress</div>
+                </div>
+              </td>
 
-          {% if card.latest_comment %}<p class="mt-3 truncate text-xs text-slate-500">Latest: {{ card.latest_comment.message }}</p>{% endif %}
+              <td class="px-4 py-4">
+                {% if column.code == 'blocked' %}
+                  <div class="max-w-[300px]">
+                    <div class="font-medium text-rose-800">{{ card.blocked_reason }}</div>
+                    {% if card.blocked_notes %}<div class="mt-1 text-xs text-rose-600">{{ 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.blocked_task_name %}<div class="mt-1 text-xs text-rose-600">Task: {{ card.blocked_task_name }}</div>{% endif %}
+                  </div>
+                {% elif card.next_task_name and column.code != 'completed' %}
+                  <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>
 
-          {% if column.code == 'pending' %}
-          <form method="post" action="/employee/work/engagements/{{ card.engagement_id }}/start" class="mt-4">
-            <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>
-          </form>
-          {% 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>
-          {% 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>
-          {% 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 %}
-          {% else %}
-          <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>
-          {% endif %}
-        </article>
-        {% 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>
-        {% endfor %}
+              <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 %}
+
+                  {% if column.code == 'pending' %}
+                  <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 }}">
+                    <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>
+                  {% elif column.code == 'in_progress' %}
+                  <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' %}
+                  <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">
+                    <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 %}
+                  {% else %}
+                  <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 %}
+          </tbody>
+        </table>
+      </div>
       </div>
     </section>
     {% endfor %}