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
@@ -7,314 +7,372 @@
|
||||
-->
|
||||
|
||||
@if (!isCollapsed) {
|
||||
<mat-card class="container">
|
||||
<form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2percent responsive-column align-start-center">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanStatus" multiple>
|
||||
<mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
|
||||
<mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
|
||||
<mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
|
||||
<mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
|
||||
<mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<span class="flex-48 hide-lt-md"></span>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanProducts" multiple>
|
||||
@for (product of advanceSearchTemplate.loanProducts; track product) {
|
||||
<mat-option [value]="product.id">
|
||||
{{ product.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select formControlName="offices" multiple>
|
||||
@for (office of advanceSearchTemplate.offices; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
|
||||
<mat-select required formControlName="loanDateOption">
|
||||
<mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
|
||||
<mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
|
||||
<mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
@if (fundMappingForm.controls.loanDateOption.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Date Type' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-31" (click)="fromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="fromDatePicker"
|
||||
formControlName="loanFromDate"
|
||||
required
|
||||
placeholder="{{ 'labels.inputs.From Date' | translate }}"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #fromDatePicker></mat-datepicker>
|
||||
@if (fundMappingForm.controls.loanFromDate.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-31" (click)="toDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="toDatePicker"
|
||||
formControlName="loanToDate"
|
||||
required
|
||||
placeholder="{{ 'labels.inputs.To Date' | translate }}"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #toDatePicker></mat-datepicker>
|
||||
@if (fundMappingForm.controls.loanToDate.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-checkbox
|
||||
labelPosition="before"
|
||||
formControlName="includeOutStandingAmountPercentage"
|
||||
class="margin-b flex-73"
|
||||
>
|
||||
{{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
|
||||
</mat-checkbox>
|
||||
@if (fundMappingForm.value.includeOutStandingAmountPercentage) {
|
||||
<div class="flex-fill layout-row-wrap gap-2percent layout-xs-column">
|
||||
@if (fundMappingForm.contains('outStandingAmountPercentageCondition')) {
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
|
||||
<mat-select required formControlName="outStandingAmountPercentageCondition">
|
||||
<mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
|
||||
<mat-option value="<="><=</mat-option>
|
||||
<mat-option value=">=">>=</mat-option>
|
||||
<mat-option value="<"><</mat-option>
|
||||
<mat-option value=">">></mat-option>
|
||||
<mat-option value="=">=</mat-option>
|
||||
</mat-select>
|
||||
@if (fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
<div class="fm-container">
|
||||
<!-- Header -->
|
||||
<div class="fm-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="fm-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<h2 class="fm-header__title">Fund Mapping</h2>
|
||||
</div>
|
||||
|
||||
@if (fundMappingForm.contains('minOutStandingAmountPercentage')) {
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="minOutStandingAmountPercentage"
|
||||
placeholder="{{ 'labels.inputs.Minimum Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (fundMappingForm.contains('outStandingAmountPercentage')) {
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="outStandingAmountPercentage"
|
||||
placeholder="{{ 'labels.inputs.Comparison Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.outStandingAmountPercentage.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (fundMappingForm.contains('maxOutStandingAmountPercentage')) {
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="maxOutStandingAmountPercentage"
|
||||
placeholder="{{ 'labels.inputs.Maximum Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="includeOutstandingAmount">
|
||||
{{ 'labels.inputs.Loan Outstanding Amount' | translate }}
|
||||
</mat-checkbox>
|
||||
@if (fundMappingForm.value.includeOutstandingAmount) {
|
||||
<div class="flex-fill layout-row-wrap gap-2percent responsive-column">
|
||||
@if (fundMappingForm.contains('outstandingAmountCondition')) {
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
|
||||
<mat-select required formControlName="outstandingAmountCondition">
|
||||
<mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
|
||||
<mat-option value="<="><=</mat-option>
|
||||
<mat-option value=">=">>=</mat-option>
|
||||
<mat-option value="<"><</mat-option>
|
||||
<mat-option value=">">></mat-option>
|
||||
<mat-option value="=">=</mat-option>
|
||||
</mat-select>
|
||||
@if (fundMappingForm.controls.outstandingAmountCondition.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
<!-- Form Card -->
|
||||
<div class="fm-card">
|
||||
<form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
|
||||
<!-- Section 1: Filter Criteria -->
|
||||
<div class="fm-section">
|
||||
<div class="fm-section__header">
|
||||
<i class="fas fa-filter"></i>
|
||||
<h3>Filter Criteria</h3>
|
||||
</div>
|
||||
<div class="fm-grid fm-grid--3col">
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanStatus" multiple>
|
||||
<mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
|
||||
<mat-option value="active">{{ 'labels.inputs.Active' | translate }}</mat-option>
|
||||
<mat-option value="closed">{{ 'labels.inputs.Overpaid' | translate }}</mat-option>
|
||||
<mat-option value="overpaid">{{ 'labels.inputs.Closed (obligations met)' | translate }}</mat-option>
|
||||
<mat-option value="writeoff">{{ 'labels.inputs.Closed (written-off)' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
@if (fundMappingForm.contains('minOutstandingAmount')) {
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="minOutstandingAmount"
|
||||
placeholder="{{ 'labels.inputs.Minimum Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.minOutstandingAmount.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (fundMappingForm.contains('outstandingAmount')) {
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="outstandingAmount"
|
||||
placeholder="{{ 'labels.inputs.Comparison Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.outstandingAmount.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (fundMappingForm.contains('maxOutstandingAmount')) {
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="maxOutstandingAmount"
|
||||
placeholder="{{ 'labels.inputs.Maximum Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.maxOutstandingAmount.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanProducts" multiple>
|
||||
@for (product of advanceSearchTemplate.loanProducts; track product) {
|
||||
<mat-option [value]="product.id">
|
||||
{{ product.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select formControlName="offices" multiple>
|
||||
@for (office of advanceSearchTemplate.offices; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!fundMappingForm.valid">
|
||||
<fa-icon icon="search"></fa-icon> {{ 'labels.buttons.Summary' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</form>
|
||||
</mat-card>
|
||||
|
||||
<!-- Section 2: Date Range -->
|
||||
<div class="fm-section">
|
||||
<div class="fm-section__header">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
<h3>Date Range</h3>
|
||||
</div>
|
||||
<div class="fm-grid fm-grid--3col">
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
|
||||
<mat-select required formControlName="loanDateOption">
|
||||
<mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
|
||||
<mat-option value="createdDate">{{ 'labels.inputs.Creation Date' | translate }}</mat-option>
|
||||
<mat-option value="disbursalDate">{{ 'labels.inputs.Disbursement Date' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
@if (fundMappingForm.controls.loanDateOption.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Date Type' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="fm-field" (click)="fromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="fromDatePicker"
|
||||
formControlName="loanFromDate"
|
||||
required
|
||||
placeholder="{{ 'labels.inputs.From Date' | translate }}"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #fromDatePicker></mat-datepicker>
|
||||
@if (fundMappingForm.controls.loanFromDate.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="fm-field" (click)="toDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="toDatePicker"
|
||||
formControlName="loanToDate"
|
||||
required
|
||||
placeholder="{{ 'labels.inputs.To Date' | translate }}"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #toDatePicker></mat-datepicker>
|
||||
@if (fundMappingForm.controls.loanToDate.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 3: Outstanding Criteria -->
|
||||
<div class="fm-section">
|
||||
<div class="fm-section__header">
|
||||
<i class="fas fa-percentage"></i>
|
||||
<h3>Outstanding Criteria</h3>
|
||||
</div>
|
||||
<div class="fm-grid">
|
||||
<!-- Loan Outstanding Percentage -->
|
||||
<div class="fm-checkbox-row">
|
||||
<mat-checkbox
|
||||
labelPosition="before"
|
||||
formControlName="includeOutStandingAmountPercentage"
|
||||
>
|
||||
{{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
@if (fundMappingForm.value.includeOutStandingAmountPercentage) {
|
||||
<div class="fm-conditional-fields">
|
||||
@if (fundMappingForm.contains('outStandingAmountPercentageCondition')) {
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
|
||||
<mat-select required formControlName="outStandingAmountPercentageCondition">
|
||||
<mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
|
||||
<mat-option value="<="><=</mat-option>
|
||||
<mat-option value=">=">>=</mat-option>
|
||||
<mat-option value="<"><</mat-option>
|
||||
<mat-option value=">">></mat-option>
|
||||
<mat-option value="=">=</mat-option>
|
||||
</mat-select>
|
||||
@if (fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (fundMappingForm.contains('minOutStandingAmountPercentage')) {
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="minOutStandingAmountPercentage"
|
||||
placeholder="{{ 'labels.inputs.Minimum Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (fundMappingForm.contains('outStandingAmountPercentage')) {
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="outStandingAmountPercentage"
|
||||
placeholder="{{ 'labels.inputs.Comparison Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.outStandingAmountPercentage.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (fundMappingForm.contains('maxOutStandingAmountPercentage')) {
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="maxOutStandingAmountPercentage"
|
||||
placeholder="{{ 'labels.inputs.Maximum Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Loan Outstanding Amount -->
|
||||
<div class="fm-checkbox-row">
|
||||
<mat-checkbox
|
||||
labelPosition="before"
|
||||
formControlName="includeOutstandingAmount"
|
||||
>
|
||||
{{ 'labels.inputs.Loan Outstanding Amount' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
@if (fundMappingForm.value.includeOutstandingAmount) {
|
||||
<div class="fm-conditional-fields">
|
||||
@if (fundMappingForm.contains('outstandingAmountCondition')) {
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
|
||||
<mat-select required formControlName="outstandingAmountCondition">
|
||||
<mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
|
||||
<mat-option value="<="><=</mat-option>
|
||||
<mat-option value=">=">>=</mat-option>
|
||||
<mat-option value="<"><</mat-option>
|
||||
<mat-option value=">">></mat-option>
|
||||
<mat-option value="=">=</mat-option>
|
||||
</mat-select>
|
||||
@if (fundMappingForm.controls.outstandingAmountCondition.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (fundMappingForm.contains('minOutstandingAmount')) {
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="minOutstandingAmount"
|
||||
placeholder="{{ 'labels.inputs.Minimum Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.minOutstandingAmount.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (fundMappingForm.contains('outstandingAmount')) {
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="outstandingAmount"
|
||||
placeholder="{{ 'labels.inputs.Comparison Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.outstandingAmount.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (fundMappingForm.contains('maxOutstandingAmount')) {
|
||||
<mat-form-field appearance="outline" class="fm-field">
|
||||
<mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
required
|
||||
min="0"
|
||||
formControlName="maxOutstandingAmount"
|
||||
placeholder="{{ 'labels.inputs.Maximum Value' | translate }}"
|
||||
/>
|
||||
@if (fundMappingForm.controls.maxOutstandingAmount.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="fm-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="fm-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button type="submit" mat-flat-button color="primary" [disabled]="!fundMappingForm.valid" class="fm-actions__submit">
|
||||
<i class="fas fa-search"></i> {{ 'labels.buttons.Summary' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (isCollapsed) {
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="m-b-20">
|
||||
<button mat-raised-button color="primary" (click)="isCollapsed = false">
|
||||
{{ 'labels.buttons.Parameters' | translate }}
|
||||
</button>
|
||||
<div class="fm-container">
|
||||
<!-- Header -->
|
||||
<div class="fm-header">
|
||||
<button mat-stroked-button (click)="isCollapsed = false" class="fm-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.buttons.Parameters' | translate }}
|
||||
</button>
|
||||
<h2 class="fm-header__title">Fund Mapping Results</h2>
|
||||
</div>
|
||||
|
||||
<!-- Results Card -->
|
||||
<div class="fm-card">
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="officeName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.officeName }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="productName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.loanProductName }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="count">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Count' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.count }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="outstanding">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Outstanding' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.loanOutStanding }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="percentage">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Percentage' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.percentage }}</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
<table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="officeName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.officeName }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="productName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.loanProductName }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="count">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Count' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.count }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="outstanding">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Outstanding' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.loanOutStanding }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="percentage">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Percentage' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loan">{{ loan.percentage }}</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -6,18 +6,188 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 73rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.margin-v {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.fm-container {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.margin-b {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
// Header
|
||||
.fm-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.margin-t {
|
||||
margin-top: 1em;
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fm-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.fm-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.fm-section {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.fm-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
&--3col {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
&--3col { grid-template-columns: 1fr; }
|
||||
}
|
||||
}
|
||||
|
||||
.fm-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Checkbox row
|
||||
.fm-checkbox-row {
|
||||
grid-column: 1 / -1;
|
||||
padding: 8px 0;
|
||||
|
||||
::ng-deep .mat-mdc-checkbox {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Conditional fields
|
||||
.fm-conditional-fields {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 0 0 8px;
|
||||
margin-top: -4px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.fm-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
// Results table
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.modern-table {
|
||||
width: 100%;
|
||||
|
||||
th.mat-header-cell {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $gray-700;
|
||||
background: $gray-50;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
td.mat-cell {
|
||||
font-size: 13px;
|
||||
color: $gray-900;
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
tr.mat-row:hover {
|
||||
background: rgba($accent, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user