WEB-657: Working Capital Loan - Charge-Off

src/app/loans/common-resolvers/loan-action-button.resolver.ts

@@ -94,7 +94,9 @@ export class LoanActionButtonResolver {
     } else if (loanActionButton === 'Foreclosure') {
       return this.loansService.getLoanForeclosureActionTemplate(loanId);
     } else if (loanActionButton === 'Charge-Off') {
-      return this.loansService.getLoanActionTemplate(loanId, 'charge-off');
+      return this.loanProductService.isLoanProduct
+        ? this.loansService.getLoanActionTemplate(loanId, 'charge-off')
+        : this.loansService.getWorkingCapitalLoanActionTemplate(loanId, 'chargeOff');
     } else if (loanActionButton === 'Capitalized Income') {
       return this.loansService.getLoanActionTemplate(loanId, 'capitalizedIncome');
     } else if (loanActionButton === 'Contract Termination') {

src/app/loans/loans-view/_loan-tab-shared.scss

@@ -201,3 +201,44 @@
     outline-offset: 1px;
   }
 }
+
+/* ── Account flag badges ───────────────────────────────────── */
+
+// Flag colours are solid fills, so they need a darker tone than the $status-*
+// palette for white label text to stay legible. These are the light variants of
+// the charge-off and alert tokens, used as backgrounds rather than as text.
+$flag-charged-off: #e65100;
+$flag-fraud: #c62828;
+
+// Pill marking an account-level flag. Shared by the account header, where it
+// sits on the dark blue card next to the status pill, and the general tab, so a
+// charged-off account is marked the same way wherever it appears.
+@mixin account-flag-badge($background) {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  line-height: 1.6;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  vertical-align: middle;
+  color: #fff;
+  background-color: $background;
+}
+
+// Declares both flag badge classes. Include it in any component that renders
+// one of them; the classes themselves stay identical across components.
+@mixin account-flag-badges {
+  .charged-off-badge {
+    @include account-flag-badge($flag-charged-off);
+  }
+
+  // Red separates fraud from the amber charge-off pill so the two flags never
+  // blur together when an account carries both.
+  .fraud-badge {
+    @include account-flag-badge($flag-fraud);
+
+    margin-left: 8px;
+  }
+}

src/app/loans/loans-view/general-tab/general-tab.component.html

@@ -9,6 +9,29 @@
 <div class="tab-container mat-typography">
   <div class="general-card">
     @if (loanDetails.summary) {
+      @if (loanProductService.isWorkingCapital && loanDetails.chargedOff) {
+        <div class="section">
+          <div class="section-head">
+            <h3 class="section-title">{{ 'labels.menus.Charge-Off' | translate }}</h3>
+          </div>
+          <div class="fact-grid">
+            <div class="fact">
+              <div class="fact-label">{{ 'labels.inputs.Charged Off On' | translate }}</div>
+              <div class="fact-value">
+                <span class="charged-off-badge">{{ 'labels.status.Charged Off' | translate }}</span>
+                <span class="m-l-10">{{ loanDetails.chargedOffOnDate | dateFormat }}</span>
+              </div>
+            </div>
+            @if (loanDetails.chargeOffReason?.name) {
+              <div class="fact">
+                <div class="fact-label">{{ 'labels.inputs.Reason for Charge-Off' | translate }}</div>
+                <div class="fact-value">{{ loanDetails.chargeOffReason.name }}</div>
+              </div>
+            }
+          </div>
+        </div>
+      }
+
       @if (hasNumberOfRepayments() || loanDetails.timeline?.expectedMaturityDate) {
         <div class="section">
           <div class="section-head">

src/app/loans/loans-view/general-tab/general-tab.component.scss

@@ -10,6 +10,9 @@
 
 @include shared.fact-sheet;
 
+// Charged-off pill, identical to the one in the account header.
+@include shared.account-flag-badges;
+
 .tab-container {
   padding: 4px 0 20px;
 }

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html

@@ -97,7 +97,11 @@
   <mifosx-edit-repayment-schedule></mifosx-edit-repayment-schedule>
 }
 @if (actions['Charge-Off']) {
-  <mifosx-charge-off [dataObject]="actionButtonData"></mifosx-charge-off>
+  @if (loanProductService.isWorkingCapital) {
+    <mifosx-wc-charge-off [dataObject]="actionButtonData"></mifosx-wc-charge-off>
+  } @else {
+    <mifosx-charge-off [dataObject]="actionButtonData"></mifosx-charge-off>
+  }
 }
 @if (actions['Sell Loan'] || actions['Buy Back Loan']) {
   <mifosx-asset-transfer-loan></mifosx-asset-transfer-loan>

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts

@@ -46,6 +46,8 @@ import { LoanProductBaseComponent } from 'app/products/loan-products/common/loan
 import { UpdateDiscountComponent } from './update-discount/update-discount.component';
 import { NearBreachConfigComponent } from '../working-capital/loan-account-actions/near-breach-config/near-breach-config.component';
 import { BreachConfigComponent } from '../working-capital/loan-account-actions/breach-config/breach-config.component';
+import { WorkingCapitalChargeOffComponent } from '../working-capital/loan-account-actions/charge-off/charge-off.component';
+import { LoanProductService } from 'app/products/loan-products/services/loan-product.service';
 
 /**
  * Loan Account Actions component.
@@ -89,14 +91,16 @@ import { BreachConfigComponent } from '../working-capital/loan-account-actions/b
     AttachOriginatorComponent,
     UpdateDiscountComponent,
     NearBreachConfigComponent,
-    BreachConfigComponent
+    BreachConfigComponent,
+    WorkingCapitalChargeOffComponent
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LoanAccountActionsComponent {
   private readonly destroyRef = inject(DestroyRef);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  protected loanProductService = inject(LoanProductService);
 
   /** Loan Details Data */
   navigationData: any;

src/app/loans/loans-view/loans-view.component.html

@@ -28,6 +28,12 @@
       <ng-container ngProjectAs="[accountTitle]">
         <b>{{ 'labels.inputs.Account No' | translate }}:</b>
         <mifosx-account-number [accountNo]="loanDetailsData.accountNo" display="left"></mifosx-account-number>
+        <span class="account-status-pill" [ngClass]="iconLoanStatusColor() | statusLookup">
+          {{ 'labels.status.' + loanDetailsData.status.value | translate }}
+        </span>
+        @if (loanProductService.isWorkingCapital && loanDetailsData.fraud) {
+          <span class="fraud-badge">{{ 'labels.status.Fraud' | translate }}</span>
+        }
       </ng-container>
 
       <!-- Actions menu trigger -->
@@ -82,6 +88,18 @@
                       </td>
                     </tr>
                   }
+                  @if (loanProductService.isWorkingCapital && loanDetailsData.chargedOff) {
+                    <tr>
+                      <td>{{ 'labels.inputs.Charged Off On' | translate }}:</td>
+                      <td>
+                        <span class="charged-off-badge">{{ 'labels.status.Charged Off' | translate }}</span>
+                        <span class="m-l-10">{{ loanDetailsData.chargedOffOnDate | dateFormat }}</span>
+                        @if (loanDetailsData.chargeOffReason?.name) {
+                          <span class="m-l-10">· {{ loanDetailsData.chargeOffReason.name }}</span>
+                        }
+                      </td>
+                    </tr>
+                  }
                 </tbody>
               </table>
             </div>

src/app/loans/loans-view/loans-view.component.scss

@@ -6,10 +6,67 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+@use 'assets/styles/colours' as *;
+@use 'loan-tab-shared' as shared;
+
+// Charged-off and fraud pills shown in the account header.
+@include shared.account-flag-badges;
+
 .loans-overview {
   font-size: 14px;
 }
 
+// Loan status pill shown inline, next to the account number.
+// Background is driven by the same status class the status dot uses
+// (statusLookup), so the pill and dot always agree in colour.
+.account-status-pill {
+  display: inline-block;
+  margin-left: 12px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  line-height: 1.6;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  vertical-align: middle;
+  color: #fff;
+  background-color: $status-inactive;
+
+  &.status-active {
+    background-color: $status-active;
+  }
+
+  &.status-active-overdue,
+  &.status-block {
+    background-color: $status-active-overdue;
+  }
+
+  &.status-pending {
+    background-color: $status-pending;
+  }
+
+  &.status-approved {
+    background-color: $status-approved;
+  }
+
+  &.status-overpaid {
+    background-color: $status-overpaid;
+  }
+
+  &.status-chargeoff {
+    background-color: $status-chargeoff;
+  }
+
+  &.status-matured {
+    background-color: $status-matured;
+  }
+
+  &.subStatus-contract-termination {
+    background-color: $subStatus-contract-termination;
+  }
+}
+
 .account-overview {
   min-width: 80%;
   font-weight: 400;