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,29 +6,26 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<form [formGroup]="employeeForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div #createEmployeeFormRef class="layout-column">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
@for (office of officeData; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (employeeForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<div class="ce-container">
|
||||
<!-- Header -->
|
||||
<div class="ce-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="ce-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Employees' | translate }}
|
||||
</button>
|
||||
<h2 class="ce-header__title">{{ 'labels.heading.Create Employee' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<mat-form-field>
|
||||
<!-- Form Card -->
|
||||
<div class="ce-card">
|
||||
<form [formGroup]="employeeForm" (ngSubmit)="submit()">
|
||||
<!-- Personal Details Section -->
|
||||
<div class="ce-section">
|
||||
<div class="ce-section__header">
|
||||
<i class="fas fa-user"></i>
|
||||
<h3>Personal Details</h3>
|
||||
</div>
|
||||
<div class="ce-grid" #createEmployeeFormRef>
|
||||
<mat-form-field appearance="outline" class="ce-field">
|
||||
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="firstname" />
|
||||
@if (employeeForm.controls.firstname.hasError('required')) {
|
||||
@@ -45,7 +42,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="ce-field">
|
||||
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="lastname" />
|
||||
@if (employeeForm.controls.lastname.hasError('required')) {
|
||||
@@ -61,26 +58,34 @@
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="loan-officer">
|
||||
{{ 'labels.inputs.Is Loan Officer' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
|
||||
<input matInput formControlName="mobileNo" />
|
||||
@if (
|
||||
employeeForm.controls.mobileNo.hasError('pattern') &&
|
||||
(employeeForm.controls.mobileNo.dirty || employeeForm.controls.mobileNo.touched)
|
||||
) {
|
||||
<!-- Assignment Section -->
|
||||
<div class="ce-section">
|
||||
<div class="ce-section__header">
|
||||
<i class="fas fa-sitemap"></i>
|
||||
<h3>Assignment</h3>
|
||||
</div>
|
||||
<div class="ce-grid">
|
||||
<mat-form-field appearance="outline" class="ce-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
@for (office of officeData; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (employeeForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Mobile Number for SMS' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.invalid' | translate }}</strong>
|
||||
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field (click)="joiningDatePicker.open()">
|
||||
<mat-form-field appearance="outline" class="ce-field" (click)="joiningDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Joining Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -99,24 +104,47 @@
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<div class="ce-checkbox-row">
|
||||
<mat-checkbox labelPosition="after" formControlName="isLoanOfficer">
|
||||
{{ 'labels.inputs.Is Loan Officer' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<mat-form-field appearance="outline" class="ce-field ce-field--full">
|
||||
<mat-label>{{ 'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
|
||||
<input matInput formControlName="mobileNo" />
|
||||
@if (
|
||||
employeeForm.controls.mobileNo.hasError('pattern') &&
|
||||
(employeeForm.controls.mobileNo.dirty || employeeForm.controls.mobileNo.touched)
|
||||
) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Mobile Number for SMS' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.invalid' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="ce-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="ce-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!employeeForm.valid"
|
||||
*mifosxHasPermission="'CREATE_STAFF'"
|
||||
class="ce-actions__submit"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #templateCreateEmployeeForm let-popover="popover">
|
||||
|
||||
@@ -6,10 +6,140 @@
|
||||
* 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;
|
||||
|
||||
.ce-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.loan-officer {
|
||||
padding: 17.5px 0;
|
||||
// Header
|
||||
.ce-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ce-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
|
||||
.ce-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.ce-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
|
||||
.ce-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.ce-field {
|
||||
width: 100%;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.ce-checkbox-row {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 8px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
::ng-deep .mat-mdc-checkbox {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.ce-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,29 +6,26 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<form [formGroup]="editEmployeeForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-column">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
@for (office of officeData; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (editEmployeeForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<div class="ee-container">
|
||||
<!-- Header -->
|
||||
<div class="ee-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="ee-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Employees' | translate }}
|
||||
</button>
|
||||
<h2 class="ee-header__title">{{ 'labels.heading.Edit Employee' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<mat-form-field>
|
||||
<!-- Form Card -->
|
||||
<div class="ee-card">
|
||||
<form [formGroup]="editEmployeeForm" (ngSubmit)="submit()">
|
||||
<!-- Personal Details Section -->
|
||||
<div class="ee-section">
|
||||
<div class="ee-section__header">
|
||||
<i class="fas fa-user"></i>
|
||||
<h3>Personal Details</h3>
|
||||
</div>
|
||||
<div class="ee-grid">
|
||||
<mat-form-field appearance="outline" class="ee-field">
|
||||
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="firstname" />
|
||||
@if (editEmployeeForm.controls.firstname.hasError('required')) {
|
||||
@@ -45,7 +42,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="ee-field">
|
||||
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="lastname" />
|
||||
@if (editEmployeeForm.controls.lastname.hasError('required')) {
|
||||
@@ -61,21 +58,34 @@
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="m-b-10">
|
||||
{{ 'labels.inputs.Is Loan Officer' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
|
||||
<input matInput formControlName="mobileNo" />
|
||||
<!-- Assignment Section -->
|
||||
<div class="ee-section">
|
||||
<div class="ee-section__header">
|
||||
<i class="fas fa-sitemap"></i>
|
||||
<h3>Assignment</h3>
|
||||
</div>
|
||||
<div class="ee-grid">
|
||||
<mat-form-field appearance="outline" class="ee-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
@for (office of officeData; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (editEmployeeForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-checkbox labelPosition="before" formControlName="isActive">
|
||||
{{ 'labels.inputs.Active' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-form-field (click)="joiningDatePicker.open()">
|
||||
<mat-form-field appearance="outline" class="ee-field" (click)="joiningDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Joining Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -94,22 +104,40 @@
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<div class="ee-checkbox-row">
|
||||
<mat-checkbox labelPosition="after" formControlName="isLoanOfficer">
|
||||
{{ 'labels.inputs.Is Loan Officer' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-checkbox labelPosition="after" formControlName="isActive">
|
||||
{{ 'labels.inputs.Active' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<mat-form-field appearance="outline" class="ee-field ee-field--full">
|
||||
<mat-label>{{ 'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
|
||||
<input matInput formControlName="mobileNo" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="ee-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="ee-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!editEmployeeForm.valid"
|
||||
*mifosxHasPermission="'UPDATE_STAFF'"
|
||||
class="ee-actions__submit"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,140 @@
|
||||
* 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;
|
||||
|
||||
.ee-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.ee-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ee-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
|
||||
.ee-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.ee-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
|
||||
.ee-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.ee-field {
|
||||
width: 100%;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.ee-checkbox-row {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 8px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
::ng-deep .mat-mdc-checkbox {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.ee-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,36 +6,41 @@
|
||||
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 #buttonImportEmployees>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
*mifosxHasPermission="'CREATE_STAFF'"
|
||||
[routerLink]="['/', 'organization', 'bulk-import', 'Employees']"
|
||||
>
|
||||
<fa-icon icon="upload" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Import Employees' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div #buttonCreateEmployee>
|
||||
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Create Employee' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</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-header">
|
||||
<div class="table-title-group">
|
||||
<h2 class="table-title">
|
||||
<i class="fas fa-user title-icon"></i>
|
||||
{{ 'labels.heading.Manage Employees' | translate }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<div #filter class="table-search">
|
||||
<mat-form-field appearance="outline">
|
||||
<i matPrefix class="fas fa-search"></i>
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="table-buttons">
|
||||
<div #buttonImportEmployees>
|
||||
<button mat-stroked-button class="btn-import" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
|
||||
<fa-icon icon="upload" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Import Employees' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div #buttonCreateEmployee>
|
||||
<button mat-flat-button color="primary" class="btn-create" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Create Employee' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div #tableEmployees class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<div #tableEmployees class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="firstname">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.First Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let employee">{{ employee.firstname }}</td>
|
||||
@@ -90,9 +95,8 @@
|
||||
</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>
|
||||
|
||||
@@ -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%;
|
||||
|
||||
|
||||
@@ -6,77 +6,76 @@
|
||||
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_STAFF'">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="ve-container">
|
||||
<!-- Header -->
|
||||
<div class="ve-header">
|
||||
<div class="ve-header__left">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="ve-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Employees' | translate }}
|
||||
</button>
|
||||
<h2 class="ve-header__title">{{ employeeData.firstname }} {{ employeeData.lastname }}</h2>
|
||||
</div>
|
||||
<button mat-flat-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_STAFF'" class="ve-header__edit">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ '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.First Name' | translate }}
|
||||
</div>
|
||||
<!-- Detail Card -->
|
||||
<div class="ve-card">
|
||||
<div class="ve-grid">
|
||||
<div class="ve-cell">
|
||||
<div class="ve-cell__label">{{ 'labels.inputs.First Name' | translate }}</div>
|
||||
<div class="ve-cell__value">{{ employeeData.firstname }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ employeeData.firstname }}
|
||||
</div>
|
||||
<div class="ve-cell">
|
||||
<div class="ve-cell__label">{{ 'labels.inputs.Last Name' | translate }}</div>
|
||||
<div class="ve-cell__value">{{ employeeData.lastname }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Last Name' | translate }}
|
||||
</div>
|
||||
<div class="ve-cell">
|
||||
<div class="ve-cell__label">{{ 'labels.inputs.Office' | translate }}</div>
|
||||
<div class="ve-cell__value">{{ employeeData.officeName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ employeeData.lastname }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Office' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ employeeData.officeName }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Is Loan Officer' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ employeeData.isLoanOfficer === true | yesNo }}
|
||||
</div>
|
||||
|
||||
@if (employeeData.mobileNo) {
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Mobile Number for SMS' | translate }}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (employeeData.mobileNo) {
|
||||
<div class="flex-50">
|
||||
{{ employeeData.mobileNo }}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Status' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ employeeData.isActive === true ? 'Active' : 'Inactive' }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'labels.inputs.Joining Date' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ employeeData.joiningDate | dateFormat }}
|
||||
<div class="ve-cell">
|
||||
<div class="ve-cell__label">{{ 'labels.inputs.Is Loan Officer' | translate }}</div>
|
||||
<div class="ve-cell__value">
|
||||
@if (employeeData.isLoanOfficer) {
|
||||
<span class="ve-bool ve-bool--yes">
|
||||
<i class="fas fa-check"></i> Yes
|
||||
</span>
|
||||
} @else {
|
||||
<span class="ve-bool ve-bool--no">
|
||||
<i class="fas fa-times"></i> No
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@if (employeeData.mobileNo) {
|
||||
<div class="ve-cell">
|
||||
<div class="ve-cell__label">{{ 'labels.inputs.Mobile Number for SMS' | translate }}</div>
|
||||
<div class="ve-cell__value">{{ employeeData.mobileNo }}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="ve-cell">
|
||||
<div class="ve-cell__label">{{ 'labels.inputs.Status' | translate }}</div>
|
||||
<div class="ve-cell__value">
|
||||
@if (employeeData.isActive) {
|
||||
<span class="ve-badge ve-badge--active">Active</span>
|
||||
} @else {
|
||||
<span class="ve-badge ve-badge--inactive">Inactive</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ve-cell">
|
||||
<div class="ve-cell__label">{{ 'labels.inputs.Joining Date' | translate }}</div>
|
||||
<div class="ve-cell__value">{{ employeeData.joiningDate | dateFormat }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,13 +6,149 @@
|
||||
* 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;
|
||||
}
|
||||
.ve-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.ve-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.ve-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
|
||||
.ve-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Grid
|
||||
.ve-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1px;
|
||||
padding: 20px 28px 24px;
|
||||
background: #fff;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.ve-cell {
|
||||
padding: 14px 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
margin: 3px;
|
||||
transition: background 0.12s;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
// Status badge
|
||||
.ve-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
|
||||
&--active {
|
||||
background: rgba(22, 163, 74, 0.1);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&--inactive {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
// Boolean indicator (Yes/No with icon)
|
||||
.ve-bool {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
|
||||
i { font-size: 11px; }
|
||||
|
||||
&--yes {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&--no {
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,6 @@ import { Component, inject } from '@angular/core';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { DateFormatPipe } from '../../../pipes/date-format.pipe';
|
||||
import { YesnoPipe } from '../../../pipes/yesno.pipe';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -24,8 +23,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent,
|
||||
DateFormatPipe,
|
||||
YesnoPipe
|
||||
DateFormatPipe
|
||||
]
|
||||
})
|
||||
export class ViewEmployeeComponent {
|
||||
|
||||
Reference in New Issue
Block a user