feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -6,180 +6,197 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="form60-container">
|
||||
<!-- Warning Notice -->
|
||||
<div class="form60-notice">
|
||||
<mat-icon>warning</mat-icon>
|
||||
<span>{{ 'labels.text.PAN not provided. Please fill Form 60 as per Income Tax Rule 114B.' | translate }}</span>
|
||||
</div>
|
||||
|
||||
@if (loading) {
|
||||
<div class="form60-loading">
|
||||
<mat-spinner diameter="40"></mat-spinner>
|
||||
<div class="f60-container">
|
||||
@if (loading || checkingPan) {
|
||||
<div class="f60-loading">
|
||||
<mat-spinner diameter="36"></mat-spinner>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- Read-only view when data exists and not editing -->
|
||||
}
|
||||
|
||||
<!-- ═══ PAN EXISTS — Form 60 Not Required ═══ -->
|
||||
@if (!loading && hasPan) {
|
||||
<div class="f60-pan-ok">
|
||||
<div class="f60-pan-ok__icon-wrap">
|
||||
<mat-icon class="f60-pan-ok__icon">verified</mat-icon>
|
||||
</div>
|
||||
<h3 class="f60-pan-ok__title">Form 60 Not Required</h3>
|
||||
<p class="f60-pan-ok__desc">
|
||||
PAN <strong>{{ panNumber }}</strong> is attached to this client.
|
||||
@if (panVerified) {
|
||||
<mat-icon class="f60-pan-ok__tick">check_circle</mat-icon> <span class="f60-pan-ok__verified">Verified</span>
|
||||
}
|
||||
</p>
|
||||
<p class="f60-pan-ok__rule">As per Income Tax Rule 114B, Form 60 is only required when PAN is not available.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- ═══ NO PAN — Show Form 60 ═══ -->
|
||||
@if (!loading && !hasPan) {
|
||||
<!-- Warning Banner -->
|
||||
<div class="f60-warning">
|
||||
<mat-icon class="f60-warning__icon">warning_amber</mat-icon>
|
||||
<div class="f60-warning__text">
|
||||
<strong>PAN not provided</strong> — Form 60 declaration is mandatory as per Income Tax Rule 114B.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Read-only View -->
|
||||
@if (form60Data && !isEditMode) {
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ 'labels.inputs.Form 60 Declaration' | translate }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="form60-summary">
|
||||
<div class="f60-card">
|
||||
<div class="f60-card__header">
|
||||
<mat-icon class="f60-card__header-icon">description</mat-icon>
|
||||
<h3>Form 60 Declaration</h3>
|
||||
<span class="f60-card__status">Submitted</span>
|
||||
<button mat-stroked-button color="primary" (click)="toggleEditMode()" class="f60-card__edit">
|
||||
<mat-icon>edit</mat-icon> Edit
|
||||
</button>
|
||||
</div>
|
||||
<div class="f60-card__body">
|
||||
<div class="f60-detail-grid">
|
||||
@if (form60Data.fullName) {
|
||||
<div class="form60-field">
|
||||
<span class="label">{{ 'labels.inputs.Full Name' | translate }}</span>
|
||||
<span class="value">{{ form60Data.fullName }}</span>
|
||||
<div class="f60-detail">
|
||||
<span class="f60-detail__label"><mat-icon class="f60-detail__icon">person</mat-icon> Full Name</span>
|
||||
<span class="f60-detail__value">{{ form60Data.fullName }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (form60Data.dateOfBirth) {
|
||||
<div class="form60-field">
|
||||
<span class="label">{{ 'labels.inputs.Date Of Birth' | translate }}</span>
|
||||
<span class="value">{{ form60Data.dateOfBirth | dateFormat }}</span>
|
||||
<div class="f60-detail">
|
||||
<span class="f60-detail__label"><mat-icon class="f60-detail__icon">calendar_today</mat-icon> Date of Birth</span>
|
||||
<span class="f60-detail__value">{{ form60Data.dateOfBirth | dateFormat }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (form60Data.fatherName) {
|
||||
<div class="form60-field">
|
||||
<span class="label">{{ "labels.inputs.Father's Name" | translate }}</span>
|
||||
<span class="value">{{ form60Data.fatherName }}</span>
|
||||
<div class="f60-detail">
|
||||
<span class="f60-detail__label"><mat-icon class="f60-detail__icon">family_restroom</mat-icon> Father's Name</span>
|
||||
<span class="f60-detail__value">{{ form60Data.fatherName }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (form60Data.address) {
|
||||
<div class="form60-field">
|
||||
<span class="label">{{ 'labels.inputs.Address' | translate }}</span>
|
||||
<span class="value">{{ form60Data.address }}</span>
|
||||
<div class="f60-detail f60-detail--full">
|
||||
<span class="f60-detail__label"><mat-icon class="f60-detail__icon">location_on</mat-icon> Address</span>
|
||||
<span class="f60-detail__value">{{ form60Data.address }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (form60Data.transactionType) {
|
||||
<div class="form60-field">
|
||||
<span class="label">{{ 'labels.inputs.Transaction Type' | translate }}</span>
|
||||
<span class="value">{{ form60Data.transactionType }}</span>
|
||||
<div class="f60-detail">
|
||||
<span class="f60-detail__label"><mat-icon class="f60-detail__icon">receipt_long</mat-icon> Transaction Type</span>
|
||||
<span class="f60-detail__value">{{ form60Data.transactionType }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (form60Data.transactionAmount) {
|
||||
<div class="form60-field">
|
||||
<span class="label">{{ 'labels.inputs.Transaction Amount' | translate }}</span>
|
||||
<span class="value">{{ form60Data.transactionAmount }}</span>
|
||||
<div class="f60-detail">
|
||||
<span class="f60-detail__label"><mat-icon class="f60-detail__icon">currency_rupee</mat-icon> Transaction Amount</span>
|
||||
<span class="f60-detail__value">₹ {{ form60Data.transactionAmount }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (form60Data.estimatedTotalIncome) {
|
||||
<div class="form60-field">
|
||||
<span class="label">{{ 'labels.inputs.Estimated Total Income' | translate }}</span>
|
||||
<span class="value">{{ form60Data.estimatedTotalIncome }}</span>
|
||||
<div class="f60-detail">
|
||||
<span class="f60-detail__label"><mat-icon class="f60-detail__icon">account_balance_wallet</mat-icon> Estimated Total Income</span>
|
||||
<span class="f60-detail__value">₹ {{ form60Data.estimatedTotalIncome }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (form60Data.reasonForNoPan) {
|
||||
<div class="form60-field">
|
||||
<span class="label">{{ 'labels.inputs.Reason for Not Having PAN' | translate }}</span>
|
||||
<span class="value">{{ form60Data.reasonForNoPan }}</span>
|
||||
<div class="f60-detail">
|
||||
<span class="f60-detail__label"><mat-icon class="f60-detail__icon">help_outline</mat-icon> Reason for No PAN</span>
|
||||
<span class="f60-detail__value">{{ form60Data.reasonForNoPan }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="toggleEditMode()">
|
||||
<mat-icon>edit</mat-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Edit / Create Form -->
|
||||
@if (isEditMode) {
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ 'labels.inputs.Form 60 Declaration' | translate }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="f60-card">
|
||||
<div class="f60-card__header">
|
||||
<mat-icon class="f60-card__header-icon">edit_note</mat-icon>
|
||||
<h3>Form 60 Declaration</h3>
|
||||
</div>
|
||||
<div class="f60-card__body">
|
||||
<form [formGroup]="form60Form" (ngSubmit)="submit()">
|
||||
<div class="layout-row-wrap responsive-column align-start-center">
|
||||
<!-- Full Name -->
|
||||
<mat-form-field class="flex-50-minus-25px">
|
||||
<mat-label>{{ 'labels.inputs.Full Name' | translate }}</mat-label>
|
||||
<div class="f60-form-grid">
|
||||
<mat-form-field appearance="outline" class="f60-ff">
|
||||
<mat-label>Full Name</mat-label>
|
||||
<span matPrefix class="f60-prefix"><mat-icon>person</mat-icon></span>
|
||||
<input formControlName="fullName" required matInput />
|
||||
@if (form60Form.controls.fullName.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Full Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>Full Name is <strong>required</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Date of Birth -->
|
||||
<mat-form-field class="flex-50-minus-25px" (click)="dobPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
|
||||
<mat-form-field appearance="outline" class="f60-ff" (click)="dobPicker.open()">
|
||||
<mat-label>Date of Birth</mat-label>
|
||||
<span matPrefix class="f60-prefix"><mat-icon>calendar_today</mat-icon></span>
|
||||
<input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dobPicker" />
|
||||
<mat-datepicker-toggle matSuffix [for]="dobPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dobPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Father's Name -->
|
||||
<mat-form-field class="flex-50-minus-25px">
|
||||
<mat-label>{{ "labels.inputs.Father's Name" | translate }}</mat-label>
|
||||
<mat-form-field appearance="outline" class="f60-ff">
|
||||
<mat-label>Father's Name</mat-label>
|
||||
<span matPrefix class="f60-prefix"><mat-icon>family_restroom</mat-icon></span>
|
||||
<input formControlName="fatherName" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Address -->
|
||||
<mat-form-field class="flex-50-minus-25px">
|
||||
<mat-label>{{ 'labels.inputs.Address' | translate }}</mat-label>
|
||||
<mat-form-field appearance="outline" class="f60-ff f60-ff--full">
|
||||
<mat-label>Address</mat-label>
|
||||
<span matPrefix class="f60-prefix"><mat-icon>location_on</mat-icon></span>
|
||||
<input formControlName="address" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Transaction Type -->
|
||||
<mat-form-field class="flex-50-minus-25px">
|
||||
<mat-label>{{ 'labels.inputs.Transaction Type' | translate }}</mat-label>
|
||||
<mat-form-field appearance="outline" class="f60-ff">
|
||||
<mat-label>Transaction Type / Purpose</mat-label>
|
||||
<span matPrefix class="f60-prefix"><mat-icon>receipt_long</mat-icon></span>
|
||||
<mat-select formControlName="transactionType">
|
||||
@for (txnType of transactionTypes; track txnType.value) {
|
||||
<mat-option [value]="txnType.value">{{ txnType.key | translate }}</mat-option>
|
||||
<mat-option [value]="txnType.value">{{ txnType.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Transaction Amount -->
|
||||
<mat-form-field class="flex-50-minus-25px">
|
||||
<mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
|
||||
<mat-form-field appearance="outline" class="f60-ff">
|
||||
<mat-label>Transaction Amount</mat-label>
|
||||
<span matPrefix class="f60-prefix"><mat-icon>currency_rupee</mat-icon></span>
|
||||
<input type="number" formControlName="transactionAmount" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Estimated Total Income -->
|
||||
<mat-form-field class="flex-50-minus-25px">
|
||||
<mat-label>{{ 'labels.inputs.Estimated Total Income' | translate }}</mat-label>
|
||||
<mat-form-field appearance="outline" class="f60-ff">
|
||||
<mat-label>Estimated Total Income</mat-label>
|
||||
<span matPrefix class="f60-prefix"><mat-icon>account_balance_wallet</mat-icon></span>
|
||||
<input type="number" formControlName="estimatedTotalIncome" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Reason for Not Having PAN -->
|
||||
<mat-form-field class="flex-50-minus-25px">
|
||||
<mat-label>{{ 'labels.inputs.Reason for Not Having PAN' | translate }}</mat-label>
|
||||
<mat-form-field appearance="outline" class="f60-ff">
|
||||
<mat-label>Reason for Not Having PAN</mat-label>
|
||||
<span matPrefix class="f60-prefix"><mat-icon>help_outline</mat-icon></span>
|
||||
<mat-select formControlName="reasonForNoPan">
|
||||
@for (reason of reasonOptions; track reason.value) {
|
||||
<mat-option [value]="reason.value">{{ reason.key | translate }}</mat-option>
|
||||
<mat-option [value]="reason.value">{{ reason.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Declaration Checkbox -->
|
||||
<div class="form60-declaration">
|
||||
<!-- Declaration -->
|
||||
<div class="f60-declaration">
|
||||
<mat-checkbox formControlName="declaration">
|
||||
{{ 'labels.text.I declare that I do not have PAN and information provided is correct.' | translate }}
|
||||
I hereby declare that I do not have a Permanent Account Number (PAN) and the information provided above is true and correct to the best of my knowledge and belief.
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="layout-row gap-32px layout-align-center">
|
||||
<!-- Actions -->
|
||||
<div class="f60-actions">
|
||||
@if (form60Data) {
|
||||
<button type="button" mat-raised-button (click)="toggleEditMode()">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button type="button" mat-stroked-button (click)="toggleEditMode()">Cancel</button>
|
||||
}
|
||||
<button type="submit" mat-raised-button color="primary" [disabled]="!form60Form.valid">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<button type="submit" mat-flat-button color="primary" [disabled]="!form60Form.valid">
|
||||
<mat-icon>check</mat-icon> Submit Form 60
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -6,79 +6,119 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.form60-container {
|
||||
padding: 16px;
|
||||
}
|
||||
$primary: #1E6BB8;
|
||||
$primary-light: #EBF3FF;
|
||||
$green: #16a34a;
|
||||
$green-light: #dcfce7;
|
||||
$amber: #f59e0b;
|
||||
$amber-light: #fef3c7;
|
||||
$border: #E2E8F0;
|
||||
$text: #1A2332;
|
||||
$muted: #64748B;
|
||||
$bg: #F0F4F8;
|
||||
|
||||
.form60-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #fff3cd;
|
||||
padding: 12px 16px;
|
||||
border-left: 5px solid #fc0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #856404;
|
||||
.f60-container { padding: 20px 24px; }
|
||||
.f60-loading { display: flex; justify-content: center; padding: 40px; }
|
||||
|
||||
mat-icon {
|
||||
color: #856404;
|
||||
/* ── PAN OK — Not Required ── */
|
||||
.f60-pan-ok {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
background: $green-light;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 12px;
|
||||
|
||||
&__icon-wrap {
|
||||
width: 72px; height: 72px; border-radius: 50%;
|
||||
background: #fff; display: inline-flex; align-items: center;
|
||||
justify-content: center; margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba($green, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.form60-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.form60-summary {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.form60-field {
|
||||
.label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
&__icon { font-size: 40px; width: 40px; height: 40px; color: $green; }
|
||||
&__title { font-size: 20px; font-weight: 700; color: $text; margin: 0 0 8px; }
|
||||
&__desc {
|
||||
font-size: 15px; color: $text; margin: 0 0 6px;
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
|
||||
strong { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
|
||||
}
|
||||
&__tick { font-size: 18px !important; width: 18px !important; height: 18px !important; color: $green; }
|
||||
&__verified { font-size: 13px; font-weight: 600; color: $green; }
|
||||
&__rule { font-size: 12px; color: $muted; margin: 12px 0 0; }
|
||||
}
|
||||
|
||||
.form60-declaration {
|
||||
margin: 16px 0 24px;
|
||||
padding: 12px 16px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
/* ── Warning Banner ── */
|
||||
.f60-warning {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
background: $amber-light; padding: 14px 20px;
|
||||
border-left: 4px solid $amber; border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__icon { color: $amber; font-size: 24px; flex-shrink: 0; }
|
||||
&__text { font-size: 13px; color: #92400e; line-height: 1.5; strong { font-weight: 700; } }
|
||||
}
|
||||
|
||||
@media screen and (width >= 960px) {
|
||||
.layout-row-wrap > .flex-fill:nth-child(odd),
|
||||
.layout-row-wrap > .flex-50-minus-25px:nth-child(odd) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
/* ── Card ── */
|
||||
.f60-card {
|
||||
background: #fff; border: 1px solid $border; border-radius: 12px; overflow: hidden;
|
||||
|
||||
.layout-row-wrap > .flex-fill:last-child,
|
||||
.layout-row-wrap > .flex-50-minus-25px:last-child {
|
||||
margin-right: 0;
|
||||
&__header {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 14px 20px; background: $bg; border-bottom: 1px solid $border;
|
||||
h3 { margin: 0; font-size: 15px; font-weight: 600; color: $text; flex: 1; }
|
||||
}
|
||||
&__header-icon { color: $primary; font-size: 22px; }
|
||||
&__status {
|
||||
font-size: 11px; font-weight: 600; color: $green; background: $green-light;
|
||||
padding: 3px 10px; border-radius: 12px;
|
||||
}
|
||||
&__edit {
|
||||
font-size: 12px !important; height: 30px !important; border-radius: 6px !important;
|
||||
mat-icon { font-size: 16px; width: 16px; height: 16px; margin-right: 4px; }
|
||||
}
|
||||
&__body { padding: 20px; }
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
.form60-summary {
|
||||
grid-template-columns: 1fr;
|
||||
/* ── Detail Grid (read-only) ── */
|
||||
.f60-detail-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px;
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
.f60-detail {
|
||||
display: flex; flex-direction: column;
|
||||
&--full { grid-column: 1 / -1; }
|
||||
&__label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
color: $muted; letter-spacing: 0.5px; margin-bottom: 4px;
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
&__icon { font-size: 15px !important; width: 15px !important; height: 15px !important; color: $primary; }
|
||||
&__value { font-size: 15px; font-weight: 600; color: $text; }
|
||||
}
|
||||
|
||||
/* ── Form Grid ── */
|
||||
.f60-form-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
.f60-ff { width: 100%; &--full { grid-column: 1 / -1; } }
|
||||
|
||||
.f60-prefix {
|
||||
display: inline-flex; align-items: center;
|
||||
padding-left: 4px; padding-right: 8px; margin-right: 8px;
|
||||
border-right: 1.5px solid #cbd5e1; line-height: 1;
|
||||
mat-icon { font-size: 20px; width: 20px; height: 20px; color: $primary; }
|
||||
}
|
||||
|
||||
/* ── Declaration ── */
|
||||
.f60-declaration {
|
||||
margin: 12px 0 20px; padding: 14px 16px;
|
||||
background: $bg; border-radius: 8px; border: 1px solid $border;
|
||||
font-size: 13px; line-height: 1.5; color: $muted;
|
||||
}
|
||||
|
||||
/* ── Actions ── */
|
||||
.f60-actions {
|
||||
display: flex; justify-content: flex-end; gap: 10px;
|
||||
button { border-radius: 8px !important; font-weight: 600 !important; }
|
||||
mat-icon { font-size: 18px; width: 18px; height: 18px; margin-right: 4px; vertical-align: middle; }
|
||||
}
|
||||
|
||||
@@ -54,32 +54,68 @@ export class Form60TabComponent implements OnInit, OnDestroy {
|
||||
form60Data: any = null;
|
||||
isEditMode = false;
|
||||
|
||||
/** PAN status — if PAN exists, Form 60 is not required */
|
||||
hasPan = false;
|
||||
panNumber: string | null = null;
|
||||
panVerified = false;
|
||||
checkingPan = true;
|
||||
|
||||
/** Maximum date allowed */
|
||||
maxDate = new Date();
|
||||
|
||||
/** Form */
|
||||
form60Form: UntypedFormGroup;
|
||||
|
||||
/** Dropdown options */
|
||||
transactionTypes = [
|
||||
{ value: 'Account Opening', key: 'labels.inputs.Account Opening' },
|
||||
{ value: 'Cash Deposit', key: 'labels.inputs.Cash Deposit' },
|
||||
{ value: 'Fixed Deposit', key: 'labels.inputs.Fixed Deposit' },
|
||||
{ value: 'Loan Processing', key: 'labels.inputs.Loan Processing' }
|
||||
];
|
||||
/** Dropdown options (loaded from API) */
|
||||
transactionTypes: any[] = [];
|
||||
loadingPurposes = true;
|
||||
|
||||
reasonOptions = [
|
||||
{ value: 'Applied for PAN', key: 'labels.inputs.Applied for PAN' },
|
||||
{ value: 'Income below taxable limit', key: 'labels.inputs.Income below taxable limit' },
|
||||
{ value: 'Other', key: 'labels.inputs.Other' }
|
||||
{ value: 'Applied for PAN', label: 'Applied for PAN' },
|
||||
{ value: 'Income below taxable limit', label: 'Income below taxable limit' },
|
||||
{ value: 'Agriculture income only', label: 'Agriculture income only' },
|
||||
{ value: 'NRI / Foreign National', label: 'NRI / Foreign National' },
|
||||
{ value: 'Other', label: 'Other' }
|
||||
];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.maxDate = this.settingsService.businessDate;
|
||||
this.createForm();
|
||||
this.loadForm60Purposes();
|
||||
this.route.parent.params.subscribe((params: any) => {
|
||||
this.clientId = params['clientId'];
|
||||
this.loadForm60Data();
|
||||
this.checkPanStatus();
|
||||
});
|
||||
}
|
||||
|
||||
private loadForm60Purposes(): void {
|
||||
this.loadingPurposes = true;
|
||||
this.clientsService.getCodeValuesByName('FORM_60_PURPOSE').pipe(
|
||||
takeUntil(this.destroy$)
|
||||
).subscribe((values: any[]) => {
|
||||
this.transactionTypes = (values || [])
|
||||
.sort((a: any, b: any) => (a.position || 0) - (b.position || 0))
|
||||
.map((v: any) => ({ value: v.name, label: v.name }));
|
||||
this.loadingPurposes = false;
|
||||
});
|
||||
}
|
||||
|
||||
private checkPanStatus(): void {
|
||||
this.checkingPan = true;
|
||||
this.clientsService.getClientKyc(this.clientId).pipe(
|
||||
takeUntil(this.destroy$),
|
||||
catchError(() => of(null))
|
||||
).subscribe((kyc: any) => {
|
||||
this.checkingPan = false;
|
||||
if (kyc?.panNumber) {
|
||||
this.hasPan = true;
|
||||
this.panNumber = kyc.panNumber;
|
||||
this.panVerified = kyc.panVerified || false;
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.hasPan = false;
|
||||
this.loadForm60Data();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -116,10 +152,15 @@ export class Form60TabComponent implements OnInit, OnDestroy {
|
||||
)
|
||||
.subscribe((data: any) => {
|
||||
this.loading = false;
|
||||
this.form60Data = data;
|
||||
if (data) {
|
||||
// API returns an array — use the latest (last) record
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
this.form60Data = data[data.length - 1];
|
||||
this.populateForm(this.form60Data);
|
||||
} else if (data && !Array.isArray(data)) {
|
||||
this.form60Data = data;
|
||||
this.populateForm(data);
|
||||
} else {
|
||||
this.form60Data = null;
|
||||
this.isEditMode = true;
|
||||
}
|
||||
});
|
||||
@@ -155,6 +196,11 @@ export class Form60TabComponent implements OnInit, OnDestroy {
|
||||
if (formValue.dateOfBirth) {
|
||||
if (formValue.dateOfBirth instanceof Date) {
|
||||
formValue.dateOfBirth = this.dateUtils.formatDate(formValue.dateOfBirth, dateFormat);
|
||||
} else if (typeof formValue.dateOfBirth === 'string') {
|
||||
const parsed = new Date(formValue.dateOfBirth);
|
||||
if (!isNaN(parsed.getTime())) {
|
||||
formValue.dateOfBirth = this.dateUtils.formatDate(parsed, dateFormat);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
delete formValue.dateOfBirth;
|
||||
@@ -170,13 +216,13 @@ export class Form60TabComponent implements OnInit, OnDestroy {
|
||||
.submitClientForm60(this.clientId, data)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (response: any) => {
|
||||
this.form60Data = response || data;
|
||||
next: () => {
|
||||
this.isEditMode = false;
|
||||
this.alertService.alert({
|
||||
type: 'success',
|
||||
message: 'Form 60 submitted successfully.'
|
||||
});
|
||||
this.loadForm60Data();
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.alertService.alert({
|
||||
|
||||
Reference in New Issue
Block a user