feat(clerk): enhance disbursement review and my-requests UI components

- Update disbursement review and my-disbursement-requests components
  with improved layout and additional UI enhancements

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

src/app/clerk/disbursement-review/disbursement-review.component.html

@@ -135,6 +135,17 @@
         </table>
       </div>
 
+      <!-- Processing indicator -->
+      @if (request.status === 'PROCESSING') {
+        <div class="dri-card dri-card--processing">
+          <div class="dri-section-title">
+            <mat-icon>hourglass_top</mat-icon>
+            Processing
+          </div>
+          <p class="dri-processing-text">Transactions are being posted. Please refresh in a few moments.</p>
+        </div>
+      }
+
       <!-- Rejection reason (if rejected) -->
       @if (request.status === 'REJECTED' && request.rejection_reason) {
         <div class="dri-card dri-card--rejected">
@@ -150,6 +161,28 @@
         </div>
       }
 
+      <!-- Processing failed (system error — transactions reversed) -->
+      @if (request.status === 'FAILED') {
+        <div class="dri-card dri-card--failed">
+          <div class="dri-section-title">
+            <mat-icon>error</mat-icon>
+            Processing Failed — Transactions Reversed
+          </div>
+          <p class="dri-rejection-text">
+            {{ request.error_message || 'An unexpected error occurred during approval.' }}
+          </p>
+          <p class="dri-processing-text" style="margin-top: 6px; font-size: 12px">
+            All partial transactions have been automatically reversed. The request can be re-submitted by the clerk.
+          </p>
+          @if (request.manager_name || request.manager_username) {
+            <div class="dri-meta-item" style="margin-top: 8px">
+              <mat-icon>manage_accounts</mat-icon>
+              Attempted by: {{ request.manager_name || request.manager_username }}
+            </div>
+          }
+        </div>
+      }
+
       <!-- Txn refs (if approved) -->
       @if (request.status === 'APPROVED' && request.txn_refs) {
         <div class="dri-card dri-card--approved">

src/app/clerk/disbursement-review/disbursement-review.component.scss

@@ -61,6 +61,16 @@
   &--approved {
     border-top: 3px solid #22c55e;
   }
+
+  &--failed {
+    border-top: 3px solid #dc2626;
+    background: #fff5f5;
+  }
+
+  &--processing {
+    border-top: 3px solid #f59e0b;
+    background: #fffbeb;
+  }
 }
 
 .dri-card-header {
@@ -114,6 +124,23 @@
     background: #fee2e2;
     color: #991b1b;
   }
+
+  &--processing {
+    background: #fef3c7;
+    color: #78350f;
+  }
+
+  &--failed {
+    background: #fee2e2;
+    color: #7f1d1d;
+  }
+}
+
+.dri-processing-text {
+  padding: 6px 20px 14px;
+  margin: 0;
+  font-size: 13px;
+  color: #78350f;
 }
 
 .dri-meta-item {

src/app/clerk/disbursement-review/disbursement-review.component.ts

@@ -134,8 +134,10 @@ export class DisbursementReviewComponent implements OnInit {
   statusClass(status: string): string {
     const map: Record<string, string> = {
       PENDING: 'dri-status--pending',
+      PROCESSING: 'dri-status--processing',
       APPROVED: 'dri-status--approved',
-      REJECTED: 'dri-status--rejected'
+      REJECTED: 'dri-status--rejected',
+      FAILED: 'dri-status--failed'
     };
     return map[status] ?? '';
   }