Improve staff My Work board filters business display and pagination

app/modules/employees/service.py

@@ -3112,16 +3112,23 @@ def list_employee_work_kanban(
     q: str = "",
     status: str = "open",
     financial_year: str | None = None,
+    period: str = "",
+    service: str = "",
+    due_bucket: str = "",
+    sort: str = "due_asc",
+    page_size: int = 10,
+    in_progress_page: int = 1,
+    pending_page: int = 1,
+    blocked_page: int = 1,
     completed_page: int = 1,
-    completed_page_size: int = 25,
 ) -> dict[str, Any]:
     """Return exactly one employee-board card per assigned engagement.
 
-    The task engine remains unchanged. The board derives an engagement state from
+    This is still the existing task/engagement workflow.  The board only adds
-    the staff member's assigned tasks using this precedence:
+    presentation filters and independent pagination.  Engagement state remains:
 
     completed -> all assigned tasks are closed
-    blocked   -> at least one assigned task is blocked
+    blocked   -> at least one assigned task is blocked / workflow blocker exists
     in_progress -> at least one assigned task is started/completed
     pending   -> no assigned task has started
     """
@@ -3131,30 +3138,36 @@ def list_employee_work_kanban(
     if status_filter not in valid_filters:
         status_filter = "open"
 
+    q_filter = (q or "").strip().lower()
+    period_filter = (period or "").strip()
+    service_filter = (service or "").strip()
+    due_filter = (due_bucket or "").strip().lower()
+    valid_due_filters = {"", "overdue", "today", "next_7", "next_15", "this_month", "no_due"}
+    if due_filter not in valid_due_filters:
+        due_filter = ""
+
+    sort_filter = (sort or "due_asc").strip().lower()
+    valid_sorts = {"due_asc", "due_desc", "business_asc", "service_asc"}
+    if sort_filter not in valid_sorts:
+        sort_filter = "due_asc"
+
+    try:
+        page_size = max(1, min(int(page_size or 10), 50))
+    except (TypeError, ValueError):
+        page_size = 10
+    if page_size not in {10, 25, 50}:
+        page_size = 10
+
     stmt = _employee_work_task_query(
         db,
         scope,
         assigned_only=True,
         financial_year=financial_year,
     )
-    if q.strip():
-        like = f"%{q.strip()}%"
-        stmt = stmt.where(
-            or_(
-                ClientServiceTaskInstance.task_name.ilike(like),
-                ClientServiceTaskInstance.description.ilike(like),
-                ClientServiceTaskInstance.client.has(
-                    or_(Client.client_name.ilike(like), Client.trade_name.ilike(like), Client.client_code.ilike(like))
-                ),
-                ClientServiceTaskInstance.catalogue.has(
-                    or_(
-                        ServiceCatalogue.service_name.ilike(like),
-                        ServiceCatalogue.service_code.ilike(like),
-                    )
-                ),
-            )
-        )
 
+    # Search is deliberately applied after engagement/scope resolution below.
+    # That retains task/client/service search and also allows registration,
+    # business-unit, branch, trade-name and GSTIN searches.
     tasks = db.execute(
         stmt.order_by(
             ClientServiceTaskInstance.subscription_id.asc(),
@@ -3208,16 +3221,29 @@ def list_employee_work_kanban(
                     "context": "",
                     "scope_label": "Client",
                     "client_code": getattr(client, "client_code", None) or "",
+                    "client_name": getattr(client, "client_name", None) or "",
+                    "client_trade_name": getattr(client, "trade_name", None) or "",
                 },
             )
+            primary_name = (scope_display.get("primary") or "Unlinked Client").strip()
+            legal_client_name = (scope_display.get("client_name") or getattr(client, "client_name", None) or "").strip()
+            # Business/trade/scope name is primary. Show legal client name only
+            # when it is genuinely different, ignoring case and whitespace.
+            norm_primary = " ".join(primary_name.casefold().split())
+            norm_client = " ".join(legal_client_name.casefold().split())
+            client_context = (scope_display.get("context") or "").strip()
+            if legal_client_name and norm_client == norm_primary:
+                client_context = ""
+
             engagement_lookup[engagement_id] = {
                 "engagement_id": engagement_id,
                 "subscription": subscription,
                 "label": _subscription_label(subscription, task),
-                "client_name": scope_display["primary"],
+                "client_name": primary_name,
+                "legal_client_name": legal_client_name if norm_client != norm_primary else "",
                 "client_code": scope_display.get("client_code", "") or getattr(client, "client_code", None) or "",
                 "scope_secondary": scope_display.get("secondary", ""),
-                "scope_context": scope_display.get("context", ""),
+                "scope_context": client_context,
                 "scope_label": scope_display.get("scope_label", "Client"),
                 "service_name": (
                     getattr(getattr(subscription, "catalogue", None), "service_name", None)
@@ -3229,6 +3255,11 @@ def list_employee_work_kanban(
                     or getattr(task, "financial_year", None)
                     or "-"
                 ),
+                "period_label": (
+                    (getattr(subscription, "period_label", None) if subscription else None)
+                    or getattr(task, "period_label", None)
+                    or ""
+                ),
                 "due_date": (
                     getattr(subscription, "current_due_date", None)
                     if subscription
@@ -3260,11 +3291,7 @@ def list_employee_work_kanban(
             if not card["blocked_reason"]:
                 card["blocked_reason"] = (
                     (getattr(task, "remarks", None) or "").strip()
-                    or (
+                    or (getattr(task.latest_comment, "message", None) if task.latest_comment else None)
-                        getattr(task.latest_comment, "message", None)
-                        if task.latest_comment
-                        else None
-                    )
                     or "Work is awaiting a dependency or clarification."
                 )
                 card["blocked_task_name"] = task.task_name
@@ -3282,6 +3309,10 @@ def list_employee_work_kanban(
         if not is_closed and not card["next_task_name"]:
             card["next_task_name"] = task.task_name
 
+    # Options are derived from the employee's assigned engagements in the active FY.
+    period_options = sorted({str(card.get("period_label") or "").strip() for card in engagement_lookup.values() if str(card.get("period_label") or "").strip()})
+    service_options = sorted({str(card.get("service_name") or "").strip() for card in engagement_lookup.values() if str(card.get("service_name") or "").strip()}, key=str.casefold)
+
     summary = {
         "total": 0,
         "open": 0,
@@ -3293,6 +3324,26 @@ def list_employee_work_kanban(
         "due_today": 0,
     }
 
+    def _matches_due(card: dict[str, Any]) -> bool:
+        due_date = card.get("due_date")
+        if not due_filter:
+            return True
+        if due_filter == "no_due":
+            return due_date is None
+        if due_date is None:
+            return False
+        if due_filter == "overdue":
+            return due_date < today
+        if due_filter == "today":
+            return due_date == today
+        if due_filter == "next_7":
+            return today <= due_date <= (today + timedelta(days=7))
+        if due_filter == "next_15":
+            return today <= due_date <= (today + timedelta(days=15))
+        if due_filter == "this_month":
+            return due_date.year == today.year and due_date.month == today.month
+        return True
+
     for card in engagement_lookup.values():
         total = card["task_count"]
         completed = card["completed_count"]
@@ -3330,12 +3381,41 @@ def list_employee_work_kanban(
         card["is_overdue"] = bool(card["overdue_count"])
         card["is_due_today"] = bool(card["due_today_count"])
 
-        include = (
+        include_status = (
             status_filter == "open"
             or (status_filter == "closed" and card_status == "completed")
             or status_filter == card_status
         )
-        if not include:
+        if not include_status:
+            continue
+
+        if period_filter and str(card.get("period_label") or "") != period_filter:
+            continue
+        if service_filter and str(card.get("service_name") or "") != service_filter:
+            continue
+        if not _matches_due(card):
+            continue
+
+        if q_filter:
+            task_search_text = " ".join(
+                f"{getattr(task, 'task_name', '') or ''} {getattr(task, 'description', '') or ''}"
+                for task in card.get("tasks", [])
+            )
+            haystack = " ".join(
+                str(value or "")
+                for value in (
+                    card.get("client_name"),
+                    card.get("legal_client_name"),
+                    card.get("client_code"),
+                    card.get("scope_secondary"),
+                    card.get("scope_context"),
+                    card.get("service_name"),
+                    card.get("period_label"),
+                    card.get("financial_year"),
+                    task_search_text,
+                )
+            ).lower()
+            if q_filter not in haystack:
                 continue
 
         column_lookup[card_status]["cards"].append(card)
@@ -3350,47 +3430,61 @@ def list_employee_work_kanban(
         if card["is_due_today"]:
             summary["due_today"] += 1
 
-    for column in columns:
+    def _sort_cards(cards: list[dict[str, Any]]) -> None:
-        column["cards"].sort(
+        if sort_filter == "due_desc":
+            cards.sort(
                 key=lambda card: (
-                card["due_date"] is None,
+                    card["due_date"] is not None,
-                card["due_date"] or date.max,
+                    card["due_date"] or date.min,
-                card["client_name"].lower(),
+                    card["client_name"].casefold(),
-                card["service_name"].lower(),
+                    card["service_name"].casefold(),
+                ),
+                reverse=True,
             )
-        )
+        elif sort_filter == "business_asc":
-        column["total_cards"] = len(column["cards"])
+            cards.sort(key=lambda card: (card["client_name"].casefold(), card["due_date"] is None, card["due_date"] or date.max, card["service_name"].casefold()))
+        elif sort_filter == "service_asc":
+            cards.sort(key=lambda card: (card["service_name"].casefold(), card["due_date"] is None, card["due_date"] or date.max, card["client_name"].casefold()))
+        else:
+            # Existing behaviour: earliest due date first, undated work last.
+            cards.sort(key=lambda card: (card["due_date"] is None, card["due_date"] or date.max, card["client_name"].casefold(), card["service_name"].casefold()))
 
-    try:
+    page_requests = {
-        completed_page = max(int(completed_page or 1), 1)
+        "in_progress": in_progress_page,
-    except (TypeError, ValueError):
+        "pending": pending_page,
-        completed_page = 1
+        "blocked": blocked_page,
-    try:
+        "completed": completed_page,
-        completed_page_size = max(1, min(int(completed_page_size or 25), 100))
-    except (TypeError, ValueError):
-        completed_page_size = 25
-
-    completed_column = column_lookup["completed"]
-    completed_total = int(completed_column["total_cards"])
-    completed_pages = max(1, (completed_total + completed_page_size - 1) // completed_page_size)
-    if completed_page > completed_pages:
-        completed_page = completed_pages
-    completed_start = (completed_page - 1) * completed_page_size
-    completed_end = completed_start + completed_page_size
-    completed_column["cards"] = completed_column["cards"][completed_start:completed_end]
-
-    completed_pagination = {
-        "page": completed_page,
-        "page_size": completed_page_size,
-        "total": completed_total,
-        "pages": completed_pages,
-        "has_previous": completed_page > 1,
-        "has_next": completed_page < completed_pages,
-        "previous_page": completed_page - 1 if completed_page > 1 else None,
-        "next_page": completed_page + 1 if completed_page < completed_pages else None,
-        "start": completed_start + 1 if completed_total else 0,
-        "end": min(completed_end, completed_total),
     }
+    paginations: dict[str, dict[str, Any]] = {}
+
+    for column in columns:
+        _sort_cards(column["cards"])
+        total_cards = len(column["cards"])
+        column["total_cards"] = total_cards
+        try:
+            page = max(int(page_requests.get(column["code"], 1) or 1), 1)
+        except (TypeError, ValueError):
+            page = 1
+        pages = max(1, (total_cards + page_size - 1) // page_size)
+        if page > pages:
+            page = pages
+        start_index = (page - 1) * page_size
+        end_index = start_index + page_size
+        column["cards"] = column["cards"][start_index:end_index]
+        pagination = {
+            "page": page,
+            "page_size": page_size,
+            "total": total_cards,
+            "pages": pages,
+            "has_previous": page > 1,
+            "has_next": page < pages,
+            "previous_page": page - 1 if page > 1 else None,
+            "next_page": page + 1 if page < pages else None,
+            "start": start_index + 1 if total_cards else 0,
+            "end": min(end_index, total_cards),
+        }
+        column["pagination"] = pagination
+        paginations[column["code"]] = pagination
 
     return {
         "summary": summary,
@@ -3398,10 +3492,22 @@ def list_employee_work_kanban(
         "q": q,
         "status": status_filter,
         "today": today,
-        "completed_pagination": completed_pagination,
+        "filters": {
+            "period": period_filter,
+            "service": service_filter,
+            "due": due_filter,
+            "sort": sort_filter,
+            "page_size": page_size,
+        },
+        "filter_options": {
+            "periods": period_options,
+            "services": service_options,
+        },
+        "paginations": paginations,
+        # Backward compatible for any template/consumer still using the old key.
+        "completed_pagination": paginations["completed"],
     }
 
-
 def start_employee_engagement_workflow(
     db: Session,
     scope: EmployeeScope,

app/modules/employees/templates/employees/self_work.html

@@ -31,9 +31,9 @@
   </div>
 
   <form method="get" action="/employee/work" class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
-    <div class="grid gap-3 md:grid-cols-[1fr_220px_auto]">
+    <div class="grid gap-3 lg:grid-cols-4 xl:grid-cols-8">
-      <input type="search" name="q" value="{{ q or '' }}" placeholder="Search engagement, task, client or service" class="rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
+      <input type="search" name="q" value="{{ q or '' }}" placeholder="Search business, client, GSTIN, task or service" class="lg:col-span-2 rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
-      <select name="status" class="rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
+      <select name="status" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
         <option value="open" {% if status == 'open' %}selected{% endif %}>Open engagements</option>
         <option value="pending" {% if status == 'pending' %}selected{% endif %}>Pending</option>
         <option value="in_progress" {% if status == 'in_progress' %}selected{% endif %}>In Progress</option>
@@ -41,14 +41,48 @@
         <option value="completed" {% if status == 'completed' %}selected{% endif %}>Completed</option>
         <option value="closed" {% if status == 'closed' %}selected{% endif %}>Closed engagements</option>
       </select>
+      <select name="period" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
+        <option value="">All periods</option>
+        {% for value in work_payload.filter_options.periods %}<option value="{{ value }}" {% if period == value %}selected{% endif %}>{{ value }}</option>{% endfor %}
+      </select>
+      <select name="service" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
+        <option value="">All services</option>
+        {% for value in work_payload.filter_options.services %}<option value="{{ value }}" {% if service == value %}selected{% endif %}>{{ value }}</option>{% endfor %}
+      </select>
+      <select name="due" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
+        <option value="">All due dates</option>
+        <option value="overdue" {% if due == 'overdue' %}selected{% endif %}>Overdue</option>
+        <option value="today" {% if due == 'today' %}selected{% endif %}>Due today</option>
+        <option value="next_7" {% if due == 'next_7' %}selected{% endif %}>Due in next 7 days</option>
+        <option value="next_15" {% if due == 'next_15' %}selected{% endif %}>Due in next 15 days</option>
+        <option value="this_month" {% if due == 'this_month' %}selected{% endif %}>Due this month</option>
+        <option value="no_due" {% if due == 'no_due' %}selected{% endif %}>No due date</option>
+      </select>
+      <select name="sort" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
+        <option value="due_asc" {% if sort == 'due_asc' %}selected{% endif %}>Due date: earliest first</option>
+        <option value="due_desc" {% if sort == 'due_desc' %}selected{% endif %}>Due date: latest first</option>
+        <option value="business_asc" {% if sort == 'business_asc' %}selected{% endif %}>Business A-Z</option>
+        <option value="service_asc" {% if sort == 'service_asc' %}selected{% endif %}>Service A-Z</option>
+      </select>
+      <select name="page_size" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
+        <option value="10" {% if page_size == 10 %}selected{% endif %}>10 per section</option>
+        <option value="25" {% if page_size == 25 %}selected{% endif %}>25 per section</option>
+        <option value="50" {% if page_size == 50 %}selected{% endif %}>50 per section</option>
+      </select>
+    </div>
+    <div class="mt-3 flex flex-wrap items-center justify-between gap-3">
+      <div class="text-xs text-slate-500">FY {{ financial_year }} · Default ordering remains earliest due date first.</div>
+      <div class="flex gap-2">
+        <a href="/employee/work" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Clear</a>
         <button type="submit" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Apply</button>
       </div>
+    </div>
   </form>
 
   <div class="space-y-5">
     {% for column in work_payload.columns %}
     <section class="rounded-2xl border border-slate-200 bg-slate-50 p-4 shadow-soft">
-      <div class="mb-4 flex items-center justify-between gap-3">
+      <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
         <div>
           <h3 class="text-base font-semibold text-slate-900">{{ column.label }}</h3>
           {% if column.code == 'pending' %}<p class="mt-1 text-xs text-slate-500">Assigned engagements where work has not started.</p>{% endif %}
@@ -56,156 +90,68 @@
           {% if column.code == 'blocked' %}<p class="mt-1 text-xs text-slate-500">Engagements waiting for documents, clarification, review or another dependency.</p>{% endif %}
           {% if column.code == 'completed' %}<p class="mt-1 text-xs text-slate-500">All tasks assigned to you in these engagements are complete.</p>{% endif %}
         </div>
+        <div class="text-right">
           <span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600">{{ column.total_cards }}</span>
+          {% if column.total_cards %}<div class="mt-1 text-[11px] text-slate-500">Showing {{ column.pagination.start }}-{{ column.pagination.end }} of {{ column.pagination.total }}</div>{% endif %}
+        </div>
       </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">
+        <table class="min-w-[1220px] w-full border-collapse text-sm">
-          <thead class="bg-slate-50">
+          <thead class="bg-slate-50"><tr class="border-b border-slate-200 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
-            <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">Business / Client / Scope</th><th class="px-4 py-3">Service / Period</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>
-              <th class="px-4 py-3">Client / Scope</th>
+          </tr></thead>
-              <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="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{{ card.client_code or card.scope_label or 'Client' }}</div>
                 <div class="mt-1 font-semibold text-slate-900">{{ card.client_name }}</div>
-                {% if card.scope_secondary %}
+                {% if card.legal_client_name %}<div class="mt-1 text-xs text-slate-500">Client: {{ card.legal_client_name }}</div>{% endif %}
-                <div class="mt-1 text-xs text-slate-500">{{ card.scope_secondary }}</div>
+                {% if card.scope_secondary %}<div class="mt-1 text-xs text-slate-500">{{ card.scope_secondary }}</div>{% endif %}
-                {% endif %}
+                {% if card.scope_context and not card.legal_client_name %}<div class="mt-0.5 text-xs text-slate-400">{{ card.scope_context }}</div>{% endif %}
-                {% if card.scope_context %}
-                <div class="mt-0.5 text-xs text-slate-400">{{ card.scope_context }}</div>
-                {% endif %}
               </td>
-
+              <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 font-medium text-slate-600">Period: {{ card.period_label }}</div>{% endif %}</td>
+              <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>
+              <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>
               <td class="px-4 py-4">
-                <div class="font-semibold text-slate-900">{{ card.service_name }}</div>
+                {% 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>
-                {% if card.period_label %}
+                {% 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 %}
-                <div class="mt-1 text-xs text-slate-500">{{ card.period_label }}</div>
+                {% if card.latest_comment %}<div class="mt-1 max-w-[300px] truncate text-xs text-slate-500">Latest: {{ card.latest_comment.message }}</div>{% endif %}
-                {% endif %}
-              </td>
-
-              <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>
-
-              <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>
-
-              <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>
-
-              <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>
+              <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 %}
+            {% 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 %}
-            <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>
 
-      {% if column.code == 'completed' and work_payload.completed_pagination.pages > 1 %}
+      {% if column.pagination.pages > 1 %}
       <div class="mt-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
-        <div class="text-xs text-slate-500">
+        <div class="text-xs text-slate-500">Showing {{ column.pagination.start }}-{{ column.pagination.end }} of {{ column.pagination.total }} {{ column.label|lower }} engagements</div>
-          Showing {{ work_payload.completed_pagination.start }}-{{ work_payload.completed_pagination.end }} of {{ work_payload.completed_pagination.total }} completed engagements
-        </div>
         <div class="flex items-center gap-2">
-          {% if work_payload.completed_pagination.has_previous %}
+          {% if column.pagination.has_previous %}
           <form method="get" action="/employee/work">
-            <input type="hidden" name="q" value="{{ q or '' }}">
+            <input type="hidden" name="q" value="{{ q or '' }}"><input type="hidden" name="status" value="{{ status }}"><input type="hidden" name="period" value="{{ period or '' }}"><input type="hidden" name="service" value="{{ service or '' }}"><input type="hidden" name="due" value="{{ due or '' }}"><input type="hidden" name="sort" value="{{ sort or 'due_asc' }}"><input type="hidden" name="page_size" value="{{ page_size }}">
-            <input type="hidden" name="status" value="{{ status }}">
+            <input type="hidden" name="in_progress_page" value="{{ column.pagination.previous_page if column.code == 'in_progress' else work_payload.paginations.in_progress.page }}"><input type="hidden" name="pending_page" value="{{ column.pagination.previous_page if column.code == 'pending' else work_payload.paginations.pending.page }}"><input type="hidden" name="blocked_page" value="{{ column.pagination.previous_page if column.code == 'blocked' else work_payload.paginations.blocked.page }}"><input type="hidden" name="completed_page" value="{{ column.pagination.previous_page if column.code == 'completed' else work_payload.paginations.completed.page }}">
-            <input type="hidden" name="completed_page" value="{{ work_payload.completed_pagination.previous_page }}">
             <button type="submit" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Previous</button>
-          </form>
+          </form>{% endif %}
-          {% endif %}
+          <span class="rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700">Page {{ column.pagination.page }} of {{ column.pagination.pages }}</span>
-          <span class="rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700">Page {{ work_payload.completed_pagination.page }} of {{ work_payload.completed_pagination.pages }}</span>
+          {% if column.pagination.has_next %}
-          {% if work_payload.completed_pagination.has_next %}
           <form method="get" action="/employee/work">
-            <input type="hidden" name="q" value="{{ q or '' }}">
+            <input type="hidden" name="q" value="{{ q or '' }}"><input type="hidden" name="status" value="{{ status }}"><input type="hidden" name="period" value="{{ period or '' }}"><input type="hidden" name="service" value="{{ service or '' }}"><input type="hidden" name="due" value="{{ due or '' }}"><input type="hidden" name="sort" value="{{ sort or 'due_asc' }}"><input type="hidden" name="page_size" value="{{ page_size }}">
-            <input type="hidden" name="status" value="{{ status }}">
+            <input type="hidden" name="in_progress_page" value="{{ column.pagination.next_page if column.code == 'in_progress' else work_payload.paginations.in_progress.page }}"><input type="hidden" name="pending_page" value="{{ column.pagination.next_page if column.code == 'pending' else work_payload.paginations.pending.page }}"><input type="hidden" name="blocked_page" value="{{ column.pagination.next_page if column.code == 'blocked' else work_payload.paginations.blocked.page }}"><input type="hidden" name="completed_page" value="{{ column.pagination.next_page if column.code == 'completed' else work_payload.paginations.completed.page }}">
-            <input type="hidden" name="completed_page" value="{{ work_payload.completed_pagination.next_page }}">
             <button type="submit" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Next</button>
-          </form>
+          </form>{% endif %}
-          {% endif %}
         </div>
       </div>
       {% endif %}

app/modules/employees/ui.py

@@ -2027,7 +2027,20 @@ def employee_my_work_task_status(
 
 
 @portal_router.get("/work")
-def employee_my_work(request: Request, q: str = "", status: str = "open", completed_page: int = 1):
+def employee_my_work(
+    request: Request,
+    q: str = "",
+    status: str = "open",
+    period: str = "",
+    service: str = "",
+    due: str = "",
+    sort: str = "due_asc",
+    page_size: int = 10,
+    in_progress_page: int = 1,
+    pending_page: int = 1,
+    blocked_page: int = 1,
+    completed_page: int = 1,
+):
     db = CommonSessionLocal()
     try:
         current_user = get_current_user(request, db=db)
@@ -2048,8 +2061,15 @@ def employee_my_work(request: Request, q: str = "", status: str = "open", comple
             q=q,
             status=status,
             financial_year=financial_year,
+            period=period,
+            service=service,
+            due_bucket=due,
+            sort=sort,
+            page_size=page_size,
+            in_progress_page=in_progress_page,
+            pending_page=pending_page,
+            blocked_page=blocked_page,
             completed_page=completed_page,
-            completed_page_size=25,
         )
         return _render(
             request,
@@ -2061,6 +2081,11 @@ def employee_my_work(request: Request, q: str = "", status: str = "open", comple
             work_payload=work_payload,
             q=q,
             status=status,
+            period=period,
+            service=service,
+            due=due,
+            sort=sort,
+            page_size=work_payload.get("filters", {}).get("page_size", 10),
             errors=[],
             financial_year=financial_year,
         )