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/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;
   }