fix: KYC tab showing raw clientKycStatus.pending code

Extract readable label from API status code (e.g. "clientKycStatus.pending" → "Pending")

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/clients/clients-view/kyc-tab/kyc-tab.component.html

@@ -22,8 +22,8 @@
         <h3>{{ 'labels.inputs.KYC Verification' | translate }}</h3>
         <span class="kyc-badge">KYC</span>
         @if (kycData?.kycStatusCode) {
-          <span class="kyc-overall-status" [class]="'status-' + kycData.kycStatusCode.toLowerCase()">
+          <span class="kyc-overall-status" [class]="'status-' + getStatusClass(kycData.kycStatusCode)">
-            {{ kycData.kycStatusCode }}
+            {{ getStatusLabel(kycData.kycStatusCode) }}
           </span>
         }
       </div>

src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts

@@ -419,6 +419,18 @@ export class KycTabComponent implements OnInit, OnDestroy {
     this.aadhaarFullNumber = '';
   }
 
+  getStatusLabel(code: string): string {
+    if (!code) return '';
+    const part = code.includes('.') ? code.split('.').pop() : code;
+    return (part.charAt(0).toUpperCase() + part.slice(1)).replace(/_/g, ' ');
+  }
+
+  getStatusClass(code: string): string {
+    if (!code) return '';
+    const part = code.includes('.') ? code.split('.').pop() : code;
+    return part.toLowerCase();
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();