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
+29
-16
@@ -6,12 +6,23 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="cl-container">
|
||||
<div class="cl-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="cl-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Loan Originators' | translate }}
|
||||
</button>
|
||||
<h2 class="cl-header__title">{{ 'labels.heading.Create Loan Originator' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="cl-card">
|
||||
<form [formGroup]="loanOriginatorForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div #createLoanOriginatorFormRef class="layout-column">
|
||||
<mat-form-field>
|
||||
<div class="cl-section">
|
||||
<div class="cl-section__header">
|
||||
<i class="fas fa-handshake"></i>
|
||||
<h3>{{ 'labels.heading.Loan Originator Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="cl-grid" #createLoanOriginatorFormRef>
|
||||
<mat-form-field appearance="outline" class="cl-field">
|
||||
<mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="name" />
|
||||
@if (loanOriginatorForm.controls.name.hasError('required')) {
|
||||
@@ -28,7 +39,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="cl-field">
|
||||
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
|
||||
<input matInput required formControlName="externalId" />
|
||||
@if (loanOriginatorForm.controls.externalId.hasError('required')) {
|
||||
@@ -45,7 +56,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="cl-field">
|
||||
<mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
|
||||
<mat-select required formControlName="status">
|
||||
@for (status of statusOptions; track status) {
|
||||
@@ -62,7 +73,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="cl-field">
|
||||
<mat-label>{{ 'labels.inputs.Originator Type' | translate }}</mat-label>
|
||||
<mat-select formControlName="originatorTypeId">
|
||||
@for (originatorType of originatorTypeOptions; track originatorType) {
|
||||
@@ -79,7 +90,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="cl-field">
|
||||
<mat-label>{{ 'labels.inputs.Channel Type' | translate }}</mat-label>
|
||||
<mat-select formControlName="channelTypeId">
|
||||
@for (channelTypeI of channelTypeOptions; track channelTypeI) {
|
||||
@@ -96,21 +107,23 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<div class="cl-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="cl-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!loanOriginatorForm.valid"
|
||||
class="cl-actions__submit"
|
||||
*mifosxHasPermission="'CREATE_LOAN_ORIGINATOR'"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+111
-2
@@ -6,6 +6,115 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.cl-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.cl-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cl-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; }
|
||||
}
|
||||
|
||||
.cl-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cl-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cl-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.cl-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cl-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; }
|
||||
}
|
||||
}
|
||||
|
||||
+29
-16
@@ -6,12 +6,23 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="el-container">
|
||||
<div class="el-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="el-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Loan Originators' | translate }}
|
||||
</button>
|
||||
<h2 class="el-header__title">{{ 'labels.heading.Edit Loan Originator' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="el-card">
|
||||
<form [formGroup]="loanOriginatorForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div #editEmployeeFormRef class="layout-column">
|
||||
<mat-form-field>
|
||||
<div class="el-section">
|
||||
<div class="el-section__header">
|
||||
<i class="fas fa-handshake"></i>
|
||||
<h3>{{ 'labels.heading.Loan Originator Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="el-grid">
|
||||
<mat-form-field appearance="outline" class="el-field">
|
||||
<mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="name" />
|
||||
@if (loanOriginatorForm.controls.name.hasError('required')) {
|
||||
@@ -28,7 +39,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="el-field">
|
||||
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
|
||||
<input matInput formControlName="externalId" readonly />
|
||||
@if (loanOriginatorForm.controls.externalId.hasError('required')) {
|
||||
@@ -45,7 +56,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="el-field">
|
||||
<mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
|
||||
<mat-select required formControlName="status">
|
||||
@for (status of statusOptions; track status) {
|
||||
@@ -62,7 +73,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="el-field">
|
||||
<mat-label>{{ 'labels.inputs.Originator Type' | translate }}</mat-label>
|
||||
<mat-select formControlName="originatorTypeId">
|
||||
@for (originatorType of originatorTypeOptions; track originatorType) {
|
||||
@@ -79,7 +90,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="el-field">
|
||||
<mat-label>{{ 'labels.inputs.Channel Type' | translate }}</mat-label>
|
||||
<mat-select formControlName="channelTypeId">
|
||||
@for (channelTypeI of channelTypeOptions; track channelTypeI) {
|
||||
@@ -96,21 +107,23 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<div class="el-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="el-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!loanOriginatorForm.valid"
|
||||
class="el-actions__submit"
|
||||
*mifosxHasPermission="'UPDATE_LOAN_ORIGINATOR'"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+111
-2
@@ -6,6 +6,115 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.el-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-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; }
|
||||
}
|
||||
|
||||
.el-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.el-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-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; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,25 +6,34 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container m-b-20 layout-row align-end gap-20px">
|
||||
<div #buttonCreateLoanOriginator>
|
||||
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_LOAN_ORIGINATOR'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Create' | translate }} {{ 'labels.inputs.Loan Originator' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-card class="container">
|
||||
<!-- Header Bar -->
|
||||
<div class="table-header">
|
||||
<div class="table-title-group">
|
||||
<h2 class="table-title">
|
||||
<i class="fas fa-edit"></i>
|
||||
{{ 'labels.heading.Manage Loan Originators' | translate }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div #filter class="layout-row gap-20px">
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
<div class="table-actions">
|
||||
<mat-form-field class="table-search" appearance="outline">
|
||||
<i matPrefix class="fas fa-search"></i>
|
||||
<input matInput #filter placeholder="{{ 'labels.inputs.Filter' | translate }}" (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
|
||||
<div class="table-buttons">
|
||||
<button mat-flat-button color="primary" [routerLink]="['create']" class="btn-create" *mifosxHasPermission="'CREATE_LOAN_ORIGINATOR'" #buttonCreateLoanOriginator>
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
{{ 'labels.buttons.Create' | translate }} {{ 'labels.inputs.Loan Originator' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div #tableLoanOriginators class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<!-- Table -->
|
||||
<div class="table-container" #tableLoanOriginators>
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Id' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loanOriginator">{{ loanOriginator.id }}</td>
|
||||
@@ -65,6 +74,7 @@
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Channel Type' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loanOriginator">{{ loanOriginator.channelType?.name }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loanOriginator">
|
||||
@@ -82,10 +92,11 @@
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="table-row"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@use '../../shared/styles/list-layout' as *;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
|
||||
+35
-52
@@ -6,63 +6,46 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container m-b-20 layout-row align-end gap-20px">
|
||||
<button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_LOAN_ORIGINATOR'">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="vl-container">
|
||||
<div class="vl-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="vl-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Loan Originators' | translate }}
|
||||
</button>
|
||||
<h2 class="vl-header__title">{{ loanOriginatorData.name }}</h2>
|
||||
<div class="vl-header__spacer"></div>
|
||||
<button mat-flat-button color="primary" [routerLink]="['edit']" class="vl-header__edit" *mifosxHasPermission="'UPDATE_LOAN_ORIGINATOR'">
|
||||
<i class="fas fa-pen"></i> {{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap">
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Name' | translate }}
|
||||
<div class="vl-card">
|
||||
<div class="vl-section">
|
||||
<div class="vl-section__header">
|
||||
<i class="fas fa-handshake"></i>
|
||||
<h3>{{ 'labels.heading.Loan Originator Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="vl-details">
|
||||
<div class="vl-detail">
|
||||
<span class="vl-detail__label">{{ 'labels.inputs.Name' | translate }}</span>
|
||||
<span class="vl-detail__value">{{ loanOriginatorData.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-50 wrap-content">
|
||||
{{ loanOriginatorData.name }}
|
||||
<div class="vl-detail">
|
||||
<span class="vl-detail__label">{{ 'labels.inputs.External Id' | translate }}</span>
|
||||
<span class="vl-detail__value">{{ loanOriginatorData.externalId }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.External Id' | translate }}
|
||||
<div class="vl-detail">
|
||||
<span class="vl-detail__label">{{ 'labels.inputs.Status' | translate }}</span>
|
||||
<span class="vl-detail__value">{{ loanOriginatorData.status }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-50 wrap-content">
|
||||
{{ loanOriginatorData.externalId }}
|
||||
<div class="vl-detail">
|
||||
<span class="vl-detail__label">{{ 'labels.inputs.Originator Type' | translate }}</span>
|
||||
<span class="vl-detail__value">{{ loanOriginatorData.originatorType?.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Status' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ loanOriginatorData.status }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Originator Type' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ loanOriginatorData.originatorType?.name }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Channel Type' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ loanOriginatorData.channelType?.name }}
|
||||
<div class="vl-detail">
|
||||
<span class="vl-detail__label">{{ 'labels.inputs.Channel Type' | translate }}</span>
|
||||
<span class="vl-detail__value">{{ loanOriginatorData.channelType?.name }}</span>
|
||||
</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.Back' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+110
-6
@@ -6,13 +6,117 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.content {
|
||||
div {
|
||||
margin: 1rem 0;
|
||||
word-wrap: break-word;
|
||||
.vl-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.vl-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
.vl-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; }
|
||||
}
|
||||
|
||||
.vl-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vl-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vl-details {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.vl-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
&__label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $gray-500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
color: $gray-900;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user