From b59eb313c0019118bc0b9fccdace612ebffba1b7 Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Thu, 23 Apr 2026 16:55:42 +0200
Subject: [PATCH] fix(adjustments): row actions use modals + project link goes
 to History tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Checkpoint-1 feedback from Konrad — three row actions on the Adjustments
tab were breaking his muscle memory vs the Pending tab:

1. Worker name used to navigate to /workers/<id>/. Now opens the Worker
   Lookup modal using the existing .worker-lookup-link handler already
   bound on the dashboard — zero new JS.

2. Eye icon on PAID rows used to navigate to /payroll/payslip/<pk>/. Now
   opens the same #previewPayslipModal that unpaid rows use (via the
   existing .preview-payslip-btn handler). The 'Paid #N' green badge in
   the Status column still links to the historical payslip detail page,
   so both entry points coexist.

3. Project name used to open the Profile tab of the project detail page;
   now includes the #history URL fragment so the History tab is active.
   Added a tiny DOMContentLoaded helper in projects/detail.html that
   activates whatever tab the hash points to — generalised so any
   future deep-link works (#history, #supervisors, #teams, #workers).
---
 core/templates/core/_adjustment_row.html | 35 ++++++++++++++++--------
 core/templates/core/projects/detail.html | 18 ++++++++++++
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/core/templates/core/_adjustment_row.html b/core/templates/core/_adjustment_row.html
index b9ab93c..c2bcdaf 100644
--- a/core/templates/core/_adjustment_row.html
+++ b/core/templates/core/_adjustment_row.html
@@ -27,11 +27,14 @@ Row actions differ by paid status:
     {# --- Date --- #}
     <td>{{ adj.date|date:"d M Y" }}</td>
 
-    {# --- Worker name (clickable link to the worker profile page) --- #}
+    {# --- Worker name (opens the Worker Lookup modal) --- #}
     <td>
-        <a href="{% url 'worker_detail' adj.worker.id %}" class="text-decoration-none">
-            {{ adj.worker.name }}
-        </a>
+        {# Worker name opens the Worker Lookup modal — same as on the Pending,
+           Payment History, and Loans tabs. The existing
+           .worker-lookup-link handler (core/templates/core/payroll_dashboard.html
+           line ~3214) listens for any element with this class + data-worker-id. #}
+        <a href="#" class="worker-lookup-link text-decoration-none"
+           data-worker-id="{{ adj.worker.id }}">{{ adj.worker.name }}</a>
     </td>
 
     {# --- Type badge (colour comes from the .badge-type-<slug> CSS class) --- #}
@@ -49,9 +52,12 @@ Row actions differ by paid status:
     {# --- Project (clickable if present, dash if missing) --- #}
     <td>
         {% if adj.project %}
-            <a href="{% url 'project_detail' adj.project.id %}" class="text-decoration-none">
-                {{ adj.project.name }}
-            </a>
+            {# Link lands on the History tab of the project detail page — the #}
+            {# most useful landing for a user who clicked a historical        #}
+            {# adjustment. Tab activation is driven by the #history fragment  #}
+            {# via a small helper in projects/detail.html.                    #}
+            <a href="{% url 'project_detail' adj.project.id %}#history"
+               class="text-decoration-none">{{ adj.project.name }}</a>
         {% else %}<span class="text-muted">&mdash;</span>{% endif %}
     </td>
 
@@ -89,12 +95,17 @@ Row actions differ by paid status:
     {# --- Row actions (eye + pen + x for unpaid; eye only for paid) --- #}
     <td class="text-end">
         {% if adj.payroll_record %}
-            {# PAID: view payslip only #}
-            <a href="{% url 'payslip_detail' adj.payroll_record.id %}"
-               class="btn btn-sm btn-outline-secondary"
-               title="View payslip" data-bs-toggle="tooltip">
+            {# Eye icon on paid rows opens the same Payslip Preview modal used on #}
+            {# the Pending tab (instead of navigating to the payslip detail page). #}
+            {# The "Paid #N" badge in the Status column still links to the         #}
+            {# historical payslip for users who want to jump to the PDF view.      #}
+            <button type="button"
+                    class="btn btn-sm btn-outline-info preview-payslip-btn"
+                    data-worker-id="{{ adj.worker.id }}"
+                    data-worker-name="{{ adj.worker.name }}"
+                    title="Preview payslip" data-bs-toggle="tooltip">
                 <i class="fas fa-eye"></i>
-            </a>
+            </button>
         {% else %}
             {# UNPAID row: Preview (reuses .preview-payslip-btn handler), #}
             {# Edit (reuses .adjustment-badge handler), Delete (opens #deleteConfirmModal). #}
diff --git a/core/templates/core/projects/detail.html b/core/templates/core/projects/detail.html
index 654ef62..ad9d054 100644
--- a/core/templates/core/projects/detail.html
+++ b/core/templates/core/projects/detail.html
@@ -181,4 +181,22 @@
 </div>
 
 </div>
+
+<script>
+// === Activate tab from URL hash ===
+// When the page loads with #history / #profile / #supervisors / #teams /
+// #workers in the URL, open that tab automatically. This lets other
+// pages link directly to a specific tab — e.g. the Adjustments row
+// partial links to /projects/<id>/#history so a user clicking a project
+// name from an adjustment lands on the relevant history view.
+document.addEventListener('DOMContentLoaded', function() {
+    if (!window.location.hash) return;
+    var target = document.querySelector(
+        '[data-bs-toggle="tab"][data-bs-target="' + window.location.hash + '"]'
+    );
+    if (target) {
+        new bootstrap.Tab(target).show();
+    }
+});
+</script>
 {% endblock %}