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>
2026-04-04 15:10:51 +05:30
parent ab01111424
commit b890d24bb7
522 changed files with 51991 additions and 21885 deletions
@@ -6,12 +6,26 @@
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->

-<div class="container">
-  <mat-card>
+<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.Entity Data Table Checks' | translate }}
+    </button>
+    <h2 class="ce-header__title">{{ 'labels.heading.Create Entity Data Table Check' | translate }}</h2>
+  </div>
+
+  <!-- Form Card -->
+  <div class="ce-card">
    <form [formGroup]="createEntityForm" (ngSubmit)="submit()">
-      <mat-card-content>
-        <div class="layout-column">
-          <mat-form-field>
+      <!-- Check Configuration Section -->
+      <div class="ce-section">
+        <div class="ce-section__header">
+          <i class="fas fa-check-circle"></i>
+          <h3>Check Configuration</h3>
+        </div>
+        <div class="ce-grid">
+          <mat-form-field appearance="outline" class="ce-field">
            <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
            <mat-select required formControlName="entity">
              @for (entity of entityTypes; track entity) {
@@ -28,7 +42,7 @@
            }
          </mat-form-field>

-          <mat-form-field>
+          <mat-form-field appearance="outline" class="ce-field">
            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
            <mat-select required formControlName="status">
              @for (status of statusList; track status) {
@@ -45,7 +59,7 @@
            }
          </mat-form-field>

-          <mat-form-field>
+          <mat-form-field appearance="outline" class="ce-field">
            <mat-label>{{ 'labels.inputs.Data Table' | translate }}</mat-label>
            <mat-select required formControlName="datatableName">
              @for (dataTable of dataTableList; track dataTable) {
@@ -63,7 +77,7 @@
          </mat-form-field>

          @if (entityType === 'm_loan') {
-            <mat-form-field>
+            <mat-form-field appearance="outline" class="ce-field">
              <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
              <mat-select required formControlName="productId">
                @for (loanProducts of createEntityData.loanProductDatas; track loanProducts) {
@@ -82,7 +96,7 @@
          }

          @if (entityType === 'm_savings_account') {
-            <mat-form-field>
+            <mat-form-field appearance="outline" class="ce-field">
              <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
              <mat-select required formControlName="productId">
                @for (savingsProducts of createEntityData.savingsProductDatas; track savingsProducts) {
@@ -100,16 +114,17 @@
            </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]="['../']">
+      <!-- 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 color="primary" [disabled]="!createEntityForm.valid">
-          {{ 'labels.buttons.Submit' | translate }}
+        <button type="submit" mat-flat-button color="primary" [disabled]="!createEntityForm.valid" class="ce-actions__submit">
+          <i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
        </button>
-      </mat-card-actions>
+      </div>
    </form>
-  </mat-card>
+  </div>
 </div>
@@ -6,6 +6,120 @@
 * 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;
+}
+
+// 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;
+    }
+  }
+}
+
+// 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%;
+}
+
+// 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,28 +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">
-  <button
-    mat-raised-button
-    color="primary"
-    [routerLink]="['create']"
-    *mifosxHasPermission="'CREATE_ENTITY_DATATABLE_CHECK'"
-  >
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Create' | translate }}
-  </button>
-</div>
+<mat-card class="container">
+  <!-- Header Bar -->
+  <div class="table-header">
+    <div class="table-title-group">
+      <h2 class="table-title">
+        <i class="fas fa-check"></i>
+        {{ 'labels.heading.Entity Data Table Checks' | translate }}
+      </h2>
+    </div>

-<div class="container">
-  <div 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 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_ENTITY_DATATABLE_CHECK'">
+          <fa-icon icon="plus"></fa-icon>
+          {{ 'labels.buttons.Create' | translate }}
+        </button>
+      </div>
+    </div>
  </div>

-  <div class="mat-elevation-z8">
-    <table mat-table [dataSource]="dataSource" matSort>
+  <!-- Table -->
+  <div class="table-container">
+    <table mat-table [dataSource]="dataSource" matSort class="modern-table">
      <ng-container matColumnDef="entity">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity' | translate }}</th>
        <td mat-cell *matCellDef="let entityDataTableCheck">{{ entityDataTableCheck.entity }}</td>
@@ -92,4 +98,4 @@

    <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%;
 }