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,41 +6,128 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<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="rpt-container">
|
||||
<!-- Header -->
|
||||
<div class="rpt-header">
|
||||
<div class="rpt-header__left">
|
||||
<div class="rpt-logomark"><span></span><span></span><span></span><span></span></div>
|
||||
<h2 class="rpt-header__title">{{ 'labels.menus.Reports' | translate }}</h2>
|
||||
<span class="rpt-header__badge">{{ reportsData?.length || 0 }} reports</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<!-- ===== LEVEL 0: All Categories ===== -->
|
||||
@if (!selectedCategory) {
|
||||
<div class="rpt-search-row">
|
||||
<mat-form-field appearance="outline" class="rpt-search">
|
||||
<i class="fas fa-search rpt-search__icon" matPrefix></i>
|
||||
<input matInput placeholder="Search all reports..." (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@if (isSearching) {
|
||||
<ng-container *ngTemplateOutlet="reportTable"></ng-container>
|
||||
}
|
||||
|
||||
@if (!isSearching) {
|
||||
<div class="rpt-tiles">
|
||||
@for (cat of categories; track cat.name) {
|
||||
<div class="rpt-tile" (click)="selectCategory(cat.name)">
|
||||
<div class="rpt-tile__icon" [ngClass]="cat.color"><i [class]="'fas ' + cat.icon"></i></div>
|
||||
<div class="rpt-tile__info">
|
||||
<span class="rpt-tile__name">{{ cat.name }}</span>
|
||||
<span class="rpt-tile__count">{{ cat.count }} reports</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right rpt-tile__arrow"></i>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- ===== LEVEL 1: Category Selected ===== -->
|
||||
@if (selectedCategory) {
|
||||
<div class="rpt-detail">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="rpt-detail__header">
|
||||
<button mat-stroked-button class="rpt-back-btn" (click)="selectedSubCategory ? backToSubCategories() : clearCategory()">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
{{ selectedSubCategory ? selectedCategory : 'All Categories' }}
|
||||
</button>
|
||||
<h3 class="rpt-detail__title">{{ selectedSubCategory || selectedCategory }}</h3>
|
||||
<span class="rpt-header__badge">
|
||||
{{ selectedSubCategory ? dataSource.data.length : filteredReports.length }} reports
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Sub-Category Tiles (for large categories like Loan) -->
|
||||
@if (showSubCategories) {
|
||||
<div class="rpt-search-row">
|
||||
<mat-form-field appearance="outline" class="rpt-search">
|
||||
<i class="fas fa-search rpt-search__icon" matPrefix></i>
|
||||
<input matInput placeholder="Search in {{ selectedCategory }}..." (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@if (isSearching) {
|
||||
<ng-container *ngTemplateOutlet="reportTable"></ng-container>
|
||||
}
|
||||
|
||||
@if (!isSearching) {
|
||||
<div class="rpt-tiles rpt-tiles--sub">
|
||||
@for (sub of subCategories; track sub.name) {
|
||||
<div class="rpt-tile" (click)="selectSubCategory(sub)">
|
||||
<div class="rpt-tile__icon" [ngClass]="sub.color"><i [class]="'fas ' + sub.icon"></i></div>
|
||||
<div class="rpt-tile__info">
|
||||
<span class="rpt-tile__name">{{ sub.name }}</span>
|
||||
<span class="rpt-tile__count">{{ sub.count }} reports</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right rpt-tile__arrow"></i>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- Direct Table (small categories or sub-category selected) -->
|
||||
@if (!showSubCategories) {
|
||||
<div class="rpt-search-row">
|
||||
<mat-form-field appearance="outline" class="rpt-search">
|
||||
<i class="fas fa-search rpt-search__icon" matPrefix></i>
|
||||
<input matInput placeholder="Search reports..." (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="reportTable"></ng-container>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- ===== Reusable Report Table Template ===== -->
|
||||
<ng-template #reportTable>
|
||||
<div class="rpt-table-wrap">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="rpt-table">
|
||||
<ng-container matColumnDef="reportName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let report">{{ report.reportName }}</td>
|
||||
<td mat-cell *matCellDef="let report" class="rpt-cell-link">{{ report.reportName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="reportType">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let report">{{ 'labels.text.' + report.reportType | translate }}</td>
|
||||
<td mat-cell *matCellDef="let report">
|
||||
<span class="rpt-type-badge">{{ 'labels.text.' + report.reportType | translate }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="reportCategory">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Category' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let report">{{ 'labels.text.' + report.reportCategory | translate }}</td>
|
||||
<td mat-cell *matCellDef="let report">
|
||||
<span class="rpt-cat-badge">{{ 'labels.text.' + report.reportCategory | translate }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
class="select-row"
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="rpt-row"
|
||||
[routerLink]="['/reports', 'run', row.reportName]"
|
||||
[queryParams]="{ type: row.reportType, id: row.id }"
|
||||
></tr>
|
||||
[queryParams]="{ type: row.reportType, id: row.id }"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
Reference in New Issue
Block a user