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
+166
-164
@@ -6,185 +6,187 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
@use '../../../shared/styles/list-layout' as *;
|
||||
|
||||
::ng-deep mat-form-field {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
max-width: 280px;
|
||||
$brand: #1353a0;
|
||||
$border: #e2e8f0;
|
||||
$text: #0f172a;
|
||||
$text-muted: #64748b;
|
||||
|
||||
.cv-tab-content {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
// Action bar
|
||||
.cv-action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cv-search-field {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 320px;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-form-field-flex { height: 36px; }
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding: 6px 0;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
.mdc-notched-outline {
|
||||
.mdc-notched-outline__leading { border-radius: 8px 0 0 8px; }
|
||||
.mdc-notched-outline__trailing { border-radius: 0 8px 8px 0; }
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
width: 100%;
|
||||
.mat-mdc-form-field-icon-prefix {
|
||||
padding: 0 6px 0 8px;
|
||||
color: $text-muted;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-mdc-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-mdc-select-trigger {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button.mat-mdc-raised-button {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 16px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
button.mat-mdc-icon-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
background: #232323;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 2px 2px 0 rgb(0 0 0 / 14%),
|
||||
0 1px 5px 0 rgb(0 0 0 / 12%),
|
||||
0 3px 1px -2px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
:host-context(.dark-theme) button.mat-mdc-icon-button {
|
||||
background: #232323 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-success,
|
||||
.mat-mdc-raised-button.mat-reject {
|
||||
color: #232323;
|
||||
background-color: #fff;
|
||||
box-shadow:
|
||||
0 2px 2px 0 rgb(0 0 0 / 14%),
|
||||
0 1px 5px 0 rgb(0 0 0 / 12%),
|
||||
0 3px 1px -2px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
:host-context(.dark-theme) .mat-mdc-raised-button.mat-success,
|
||||
:host-context(.dark-theme) .mat-mdc-raised-button.mat-reject {
|
||||
background-color: #424242;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tasks-action-btn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.mat-mdc-raised-button.action-button {
|
||||
box-shadow:
|
||||
0 2px 2px 0 rgb(0 0 0 / 14%),
|
||||
0 1px 5px 0 rgb(0 0 0 / 12%),
|
||||
0 3px 1px -2px rgb(0 0 0 / 20%);
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
transition:
|
||||
background 0.3s,
|
||||
color 0.3s;
|
||||
}
|
||||
|
||||
/* ---------- SEARCH & LAYOUT ---------- */
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
max-width: 280px;
|
||||
margin: 0;
|
||||
flex: 0 0 280px;
|
||||
}
|
||||
|
||||
.advanced-search-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#search-button {
|
||||
height: 2.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
margin: 0;
|
||||
background: #f5f5f5;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
:host-context(.dark-theme) .icon-button {
|
||||
background: #424242;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.view-details {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table {
|
||||
tr.select-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
input { font-size: 13px; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: #e8f4fd;
|
||||
padding: 6px 16px;
|
||||
font-size: 0.875rem;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.43;
|
||||
border-radius: 4px;
|
||||
letter-spacing: normal;
|
||||
margin: 10px;
|
||||
.cv-toggle-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 8px;
|
||||
color: $text-muted;
|
||||
background: #fff;
|
||||
|
||||
.message {
|
||||
padding: 8px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
::ng-deep .mat-mdc-button-persistent-ripple { border-radius: 8px; }
|
||||
}
|
||||
|
||||
.alert-check {
|
||||
color: #359ff4;
|
||||
margin-right: 2px;
|
||||
font-size: 1.4rem;
|
||||
.cv-action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cv-btn {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px !important;
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
font-family: 'DM Sans', 'Roboto', sans-serif;
|
||||
|
||||
fa-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-btn-approve {
|
||||
border-color: #16a34a;
|
||||
color: #16a34a;
|
||||
|
||||
&:hover {
|
||||
background: #f0fdf4;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-btn-delete {
|
||||
border-color: #dc2626;
|
||||
color: #dc2626;
|
||||
|
||||
&:hover {
|
||||
background: #fef2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-btn-reject {
|
||||
border-color: #64748b;
|
||||
color: #64748b;
|
||||
|
||||
&:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-btn-search {
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// Advanced search
|
||||
.cv-advanced-search {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
|
||||
.cv-adv-field {
|
||||
width: 100%;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding: 6px 0;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.mdc-notched-outline {
|
||||
.mdc-notched-outline__leading { border-radius: 8px 0 0 8px; }
|
||||
.mdc-notched-outline__trailing { border-radius: 0 8px 8px 0; }
|
||||
}
|
||||
|
||||
input,
|
||||
.mat-mdc-select-trigger { font-size: 13px; }
|
||||
}
|
||||
}
|
||||
|
||||
.cv-btn-search {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@media (max-width: 768px) {
|
||||
.cv-action-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cv-search-field {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cv-action-buttons {
|
||||
margin-left: 0;
|
||||
justify-content: stretch;
|
||||
|
||||
.cv-btn { flex: 1; }
|
||||
}
|
||||
|
||||
.cv-advanced-search {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user