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] ?? '';
   }

src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html

@@ -189,6 +189,14 @@
                 </td>
               </tr>
             }
+            @if (r.status === 'FAILED' && r.error_message) {
+              <tr class="mdr-reason-row mdr-reason-row--failed">
+                <td colspan="8" class="mdr-reason-cell mdr-reason-cell--failed">
+                  <mat-icon class="mdr-reason-icon">error_outline</mat-icon>
+                  Processing failed &amp; transactions reversed: {{ r.error_message }}
+                </td>
+              </tr>
+            }
           }
         </tbody>
       </table>

src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.scss

@@ -312,6 +312,16 @@
     background: #fee2e2;
     color: #991b1b;
   }
+
+  &--processing {
+    background: #fef3c7;
+    color: #78350f;
+  }
+
+  &--failed {
+    background: #fee2e2;
+    color: #7f1d1d;
+  }
 }
 
 .cell-mono {
@@ -432,6 +442,10 @@
   background: #fff7f7;
 }
 
+.mdr-reason-row--failed td {
+  background: #fff1f1;
+}
+
 .mdr-reason-cell {
   display: flex;
   align-items: center;
@@ -442,6 +456,10 @@
   padding: 6px 14px 10px;
 }
 
+.mdr-reason-cell--failed {
+  color: #7f1d1d;
+}
+
 .mdr-reason-icon {
   font-size: 14px;
   width: 14px;

src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts

@@ -74,7 +74,8 @@ export class MyDisbursementRequestsComponent implements OnInit {
       { value: '', label: 'All' },
       { value: 'PENDING', label: 'Pending' },
       { value: 'APPROVED', label: 'Approved' },
-      { value: 'REJECTED', label: 'Rejected' }
+      { value: 'REJECTED', label: 'Rejected' },
+      { value: 'FAILED', label: 'Failed' }
     ];
   }
 
@@ -189,8 +190,10 @@ export class MyDisbursementRequestsComponent implements OnInit {
   statusClass(status: string): string {
     const map: Record<string, string> = {
       PENDING: 'mdr-status--pending',
+      PROCESSING: 'mdr-status--processing',
       APPROVED: 'mdr-status--approved',
-      REJECTED: 'mdr-status--rejected'
+      REJECTED: 'mdr-status--rejected',
+      FAILED: 'mdr-status--failed'
     };
     return map[status] ?? '';
   }
@@ -198,8 +201,10 @@ export class MyDisbursementRequestsComponent implements OnInit {
   statusLabel(status: string): string {
     const map: Record<string, string> = {
       PENDING: 'Pending Approval',
+      PROCESSING: 'Processing…',
       APPROVED: 'Approved',
-      REJECTED: 'Rejected'
+      REJECTED: 'Rejected',
+      FAILED: 'Processing Failed'
     };
     return map[status] ?? status;
   }