done

src/app/tasks/checker-inbox-and-tasks-tabs/dividend-requests/dividend-requests.component.html

@@ -34,20 +34,23 @@
           <td colspan="6" class="pg-empty">No dividend declarations are waiting for approval.</td>
         </tr>
       } @else {
+        <!-- The whole row opens the member-by-member breakdown, so a checker can get to the detail
+             the same way they would on the Dividends list rather than having to find the View
+             button. The action buttons stop propagation so Approve still approves directly. -->
         @for (row of rows; track row.dividendId) {
-          <tr>
+          <tr class="dr-row" (click)="openView(row)">
             <td>{{ row.productName }}</td>
             <td>{{ row.dividendPeriodStartDate }} → {{ row.dividendPeriodEndDate }}</td>
             <td class="num">{{ row.amount | number: '1.2-2' }}</td>
             <td class="num">{{ row.memberCount }}</td>
             <td>{{ row.declaredOn | slice: 0 : 10 }}</td>
             <td class="dr-actions">
-              <button type="button" class="pg-btn" (click)="openView(row)">View</button>
+              <button type="button" class="pg-btn" (click)="openView(row); $event.stopPropagation()">View</button>
               <button
                 type="button"
                 class="pg-btn dr-approve-btn"
                 [disabled]="approvingId === row.dividendId"
-                (click)="approve(row)"
+                (click)="approve(row); $event.stopPropagation()"
               >
                 {{ approvingId === row.dividendId ? 'Approving…' : 'Approve' }}
               </button>

src/app/tasks/checker-inbox-and-tasks-tabs/dividend-requests/dividend-requests.component.scss

@@ -83,3 +83,12 @@
     animation: none;
   }
 }
+
+/* The whole row opens the member-by-member breakdown, so it has to look like it will. */
+.dr-row {
+  cursor: pointer;
+
+  &:hover {
+    background: #f8fafc;
+  }
+}

src/app/tasks/checker-inbox-and-tasks-tabs/dividend-requests/dividend-requests.component.ts

@@ -8,6 +8,7 @@
 
 import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
 import { catchError } from 'rxjs/operators';
 import { of } from 'rxjs';
 
@@ -38,6 +39,8 @@ import { ViewDividendComponent } from '../../../products/share-products/view-div
 export class DividendRequestsComponent implements OnInit {
   private service = inject(PendingDividendsService);
   private productsService = inject(ProductsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
 
   rows: any[] = [];
   loading = false;
@@ -51,9 +54,30 @@ export class DividendRequestsComponent implements OnInit {
   viewDividendId: number | null = null;
 
   ngOnInit(): void {
+    this.openRequestedDeclaration();
     this.load();
   }
 
+  /**
+   * Opens the breakdown straight away when the officer arrived here from a specific declaration.
+   *
+   * The Dividends list sends them here to approve one declaration in particular, so making them
+   * find its row again in a list of every pending declaration would undo the point of the link.
+   * Read from the query string rather than a service so a refreshed or shared URL still opens the
+   * same declaration.
+   */
+  private openRequestedDeclaration(): void {
+    const params = this.route.snapshot.queryParams;
+    const productId = Number(params['productId']);
+    const dividendId = Number(params['dividendId']);
+    if (!productId || !dividendId) {
+      return;
+    }
+    this.viewProductId = productId;
+    this.viewDividendId = dividendId;
+    this.showViewModal = true;
+  }
+
   openView(row: any): void {
     this.viewProductId = row.productId;
     this.viewDividendId = row.dividendId;
@@ -64,6 +88,11 @@ export class DividendRequestsComponent implements OnInit {
     this.showViewModal = false;
     this.viewProductId = null;
     this.viewDividendId = null;
+    // Dropped from the URL as well, or the declaration the officer just closed would reopen on the
+    // next refresh and there would be no way to get back to the plain list.
+    if (this.route.snapshot.queryParams['dividendId']) {
+      this.router.navigate([], { relativeTo: this.route, queryParams: {}, replaceUrl: true });
+    }
   }
 
   onViewActionCompleted(): void {