diff --git a/src/app/clerk/disbursement-review/disbursement-review.component.html b/src/app/clerk/disbursement-review/disbursement-review.component.html
index 8d89420ec..29b14614d 100644
--- a/src/app/clerk/disbursement-review/disbursement-review.component.html
+++ b/src/app/clerk/disbursement-review/disbursement-review.component.html
@@ -135,6 +135,17 @@
+
+ @if (request.status === 'PROCESSING') {
+
+
+ hourglass_top
+ Processing
+
+
Transactions are being posted. Please refresh in a few moments.
+
+ }
+
@if (request.status === 'REJECTED' && request.rejection_reason) {
@@ -150,6 +161,28 @@
}
+
+ @if (request.status === 'FAILED') {
+
+
+ error
+ Processing Failed — Transactions Reversed
+
+
+ {{ request.error_message || 'An unexpected error occurred during approval.' }}
+
+
+ All partial transactions have been automatically reversed. The request can be re-submitted by the clerk.
+
+ @if (request.manager_name || request.manager_username) {
+
+ manage_accounts
+ Attempted by: {{ request.manager_name || request.manager_username }}
+
+ }
+
+ }
+
@if (request.status === 'APPROVED' && request.txn_refs) {
diff --git a/src/app/clerk/disbursement-review/disbursement-review.component.scss b/src/app/clerk/disbursement-review/disbursement-review.component.scss
index 5fbb8c52f..4364d9c8b 100644
--- a/src/app/clerk/disbursement-review/disbursement-review.component.scss
+++ b/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 {
diff --git a/src/app/clerk/disbursement-review/disbursement-review.component.ts b/src/app/clerk/disbursement-review/disbursement-review.component.ts
index 8b4fd670d..54ab4c282 100644
--- a/src/app/clerk/disbursement-review/disbursement-review.component.ts
+++ b/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 = {
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] ?? '';
}
diff --git a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html
index bf2b1b46a..a5dc03299 100644
--- a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html
+++ b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html
@@ -189,6 +189,14 @@
}
+ @if (r.status === 'FAILED' && r.error_message) {
+
+ |
+ error_outline
+ Processing failed & transactions reversed: {{ r.error_message }}
+ |
+
+ }
}
diff --git a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.scss b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.scss
index 3593f134a..0557af9b1 100644
--- a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.scss
+++ b/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;
diff --git a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts
index 207f96317..c75d6cac9 100644
--- a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts
+++ b/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 = {
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 = {
PENDING: 'Pending Approval',
+ PROCESSING: 'Processing…',
APPROVED: 'Approved',
- REJECTED: 'Rejected'
+ REJECTED: 'Rejected',
+ FAILED: 'Processing Failed'
};
return map[status] ?? status;
}