feat(clerk): add clerk-facing Cheque Book screen and shell nav wiring

Adds a customer-account-scoped Cheque Book view under Clerk > Account
Facilities (list + leaf detail, with stop-payment/report-lost/mark-used/
return actions), reachable via a new hover dropdown on the Account
Facilities nav item. Also refreshes the Account Facilities page layout,
and carries over a few chequebook service/detail-dialog fixes from the
back-office module (used-leaf display, leaf-lookup dialog polish).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/core/shell/shell.component.html

@@ -100,17 +100,28 @@
             My Disbursements
           </a>
           @if (clerkAccountLoaded) {
-            <a
-              class="cashier-nav__item cashier-nav__item--sec"
-              [class.cashier-nav__item--active]="currentUrl.includes('/clerk/account-facilities')"
-              [routerLink]="['/clerk/account-facilities']"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="1" y="4" width="22" height="16" rx="2" />
-                <line x1="1" y1="10" x2="23" y2="10" />
-              </svg>
-              Account Facilities
-            </a>
+            <div class="cashier-nav__item-wrap">
+              <a
+                class="cashier-nav__item cashier-nav__item--sec"
+                [class.cashier-nav__item--active]="currentUrl.includes('/clerk/account-facilities')"
+                [routerLink]="['/clerk/account-facilities']"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="1" y="4" width="22" height="16" rx="2" />
+                  <line x1="1" y1="10" x2="23" y2="10" />
+                </svg>
+                Account Facilities
+                <fa-icon icon="caret-down" class="cashier-nav__caret"></fa-icon>
+              </a>
+              <div class="cashier-nav__dropdown">
+                @for (f of clerkFacilities; track f.label) {
+                  <a class="cashier-nav__dd-item" [routerLink]="facilityRoute(f.label)">
+                    <span class="cashier-nav__dd-dot" [class.cashier-nav__dd-dot--off]="!f.active"></span>
+                    {{ f.label }}
+                  </a>
+                }
+              </div>
+            </div>
             <a
               class="cashier-nav__item cashier-nav__item--sec"
               [class.cashier-nav__item--active]="currentUrl.includes('/clerk/photo-signature')"

src/app/core/shell/shell.component.scss

@@ -179,6 +179,69 @@ $color: #e2e4ec;
   &--clerk {
     border-bottom-color: #e87722;
   }
+
+  &__item-wrap {
+    position: relative;
+    display: inline-flex;
+
+    &:hover .cashier-nav__dropdown {
+      display: grid;
+    }
+  }
+
+  &__caret {
+    font-size: 9px !important;
+    margin-left: 2px;
+    opacity: 0.75;
+  }
+
+  &__dropdown {
+    display: none;
+    grid-template-columns: repeat(2, minmax(150px, 1fr));
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 2px;
+    min-width: 320px;
+    background: #1a2744;
+    border: 1px solid #334155;
+    border-radius: 6px;
+    box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
+    padding: 4px;
+    gap: 2px;
+    z-index: 50;
+  }
+
+  &__dd-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #cbd5e1;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background 0.15s;
+
+    &:hover {
+      background: #223060;
+      color: #fff;
+    }
+  }
+
+  &__dd-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #22c55e;
+    flex-shrink: 0;
+
+    &--off {
+      background: #64748b;
+    }
+  }
 }
 
 .sidenav {

src/app/core/shell/shell.component.ts

@@ -116,6 +116,15 @@ export class ShellComponent implements OnInit, OnDestroy {
     return label.toLowerCase().includes(this.rbiSearch.toLowerCase());
   }
 
+  /** Route for a facility entry in the Account Facilities hover dropdown — only "Cheque Book" has a
+   *  dedicated action page today; every other facility falls back to the existing overview page. */
+  facilityRoute(label: string): string[] {
+    if (label === 'Cheque Book') {
+      return ['/clerk/account-facilities/cheque-book'];
+    }
+    return ['/clerk/account-facilities'];
+  }
+
   /**
    * Subscribes to progress bar to update its mode.
    */