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,243 +6,146 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.margin-v {
|
||||
margin: 2em 0 0;
|
||||
.create-client-container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.flex-32 {
|
||||
flex: 0 1 32%;
|
||||
max-width: 32%;
|
||||
}
|
||||
|
||||
.gap-2percent {
|
||||
gap: 2%;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Enhanced layout styles with Material compatibility
|
||||
.container {
|
||||
margin: 24px auto;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// More specific Material overrides
|
||||
:host ::ng-deep .mat-card {
|
||||
padding: 32px;
|
||||
margin: 16px 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-card-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Flex utilities with better responsive support
|
||||
.flex-24 {
|
||||
flex: 0 1 calc(25% - 15px);
|
||||
max-width: calc(25% - 15px);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.flex-48 {
|
||||
flex: 0 1 calc(50% - 10px);
|
||||
max-width: calc(50% - 10px);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.responsive-row {
|
||||
.client-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
color: var(--md-sys-color-primary, #1074b9);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.responsive-row:last-child {
|
||||
margin-bottom: 0;
|
||||
.client-id-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
padding: 5px 14px;
|
||||
background: #eff6ff;
|
||||
color: #1074b9;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
// Enhanced Material form field styling
|
||||
:host ::ng-deep .mat-form-field {
|
||||
.client-tabs {
|
||||
background: var(--md-sys-color-surface, #fff);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-tab-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.mat-mdc-tab {
|
||||
min-width: 160px;
|
||||
padding: 0 24px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body-wrapper {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body-content {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.tab-section {
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-form-field:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Ensure consistent form field appearance
|
||||
:host ::ng-deep .responsive-row .mat-form-field {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .responsive-row .mat-form-field .mat-form-field-wrapper {
|
||||
padding-bottom: 1.3438em;
|
||||
}
|
||||
|
||||
// Error state styling and form field appearance consistency
|
||||
:host ::ng-deep .mat-form-field-appearance-outline {
|
||||
.mat-form-field-outline {
|
||||
color: rgb(0 0 0 / 12%);
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-form-field.mat-form-field-invalid {
|
||||
.mat-form-field-outline-thick {
|
||||
color: #f44336;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-error {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
margin: 32px 0 24px;
|
||||
border-color: rgb(0 0 0 / 12%);
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-checkbox {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
// Enhanced button styling with better Material integration
|
||||
:host ::ng-deep mat-card-actions {
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 24px 0;
|
||||
margin-top: 32px;
|
||||
border-top: 1px solid rgb(0 0 0 / 12%);
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:host ::ng-deep mat-card-actions button {
|
||||
min-width: 100px;
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.3px;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
.action-bar-right {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Enhanced responsive breakpoints
|
||||
@media (width <= 1024px) {
|
||||
.flex-24 {
|
||||
flex: 0 1 calc(50% - 10px);
|
||||
max-width: calc(50% - 10px);
|
||||
}
|
||||
.cancel-btn {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.flex-48 {
|
||||
flex: 0 1 100%;
|
||||
max-width: 100%;
|
||||
/* ─── Read-only tab state ─── */
|
||||
.tab-content--readonly {
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ─── Tab mode toolbar ─── */
|
||||
.tab-mode-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
|
||||
.tab-mode-btn {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
height: 34px !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0 14px !important;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
.flex-32,
|
||||
.flex-24,
|
||||
.flex-48 {
|
||||
flex: 0 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.responsive-row {
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.responsive-row .mat-form-field {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
.tab-mode-btn--edit {
|
||||
background: #1074b9 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
:host ::ng-deep mat-card-actions {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
:host ::ng-deep mat-card-actions button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
:host ::ng-deep .mat-card {
|
||||
padding: 16px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.responsive-row {
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for potential Material Design conflicts
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Ensure proper form styling
|
||||
:host ::ng-deep form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// DatePicker specific styling
|
||||
:host ::ng-deep .mat-datepicker-toggle {
|
||||
color: rgb(0 0 0 / 54%);
|
||||
}
|
||||
|
||||
.external-id-status {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.loading {
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: #d32f2f;
|
||||
}
|
||||
}
|
||||
|
||||
// Select dropdown styling
|
||||
:host ::ng-deep .mat-select-panel {
|
||||
max-height: 256px;
|
||||
.tab-mode-btn--cancel {
|
||||
background: #fff !important;
|
||||
color: #ef4444 !important;
|
||||
border: 1px solid #fca5a5 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user