fixed current, rd, fd account preview page styling
This commit is contained in:
Nitesh Yadav
+2
-2
@@ -69,8 +69,8 @@
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "12mb",
|
||||
"maximumError": "12mb"
|
||||
"maximumWarning": "13mb",
|
||||
"maximumError": "14mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
|
||||
@@ -702,17 +702,16 @@
|
||||
[class.gl-data-row--cr]="row.entryType?.value === 'CREDIT'"
|
||||
class="gl-data-row"
|
||||
></mat-row>
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell" [attr.colspan]="displayedColumns.length">
|
||||
<div class="gl-empty">
|
||||
<div class="gl-empty__icon"><fa-icon icon="search"></fa-icon></div>
|
||||
<div class="gl-empty__title">No entries found</div>
|
||||
<div class="gl-empty__sub">Try adjusting your filters or date range</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</mat-table>
|
||||
|
||||
@if (totalEntries === 0) {
|
||||
<div class="gl-empty">
|
||||
<div class="gl-empty__icon"><fa-icon icon="search"></fa-icon></div>
|
||||
<div class="gl-empty__title">No entries found</div>
|
||||
<div class="gl-empty__sub">Try adjusting your filters or date range</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="gl-pager-wrap">
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
|
||||
@@ -1444,9 +1444,11 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
min-height: 340px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__icon {
|
||||
font-size: 2.5rem;
|
||||
|
||||
@@ -98,6 +98,7 @@ $color: #e2e4ec;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+665
-566
File diff suppressed because it is too large
Load Diff
+411
-30
@@ -6,48 +6,429 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@use 'assets/styles/helper';
|
||||
@use 'assets/styles/colours' as *;
|
||||
@use 'assets/styles/product-view' as pv;
|
||||
|
||||
@include pv.product-view-styles;
|
||||
|
||||
/* Current-account-specific green accent */
|
||||
:host {
|
||||
--pv-accent: #15803d;
|
||||
--pv-accent-l: #dcfce7;
|
||||
--vsp-navy: #0b1e3d;
|
||||
--vsp-blue: #1d4ed8;
|
||||
--vsp-blue-l: #eff6ff;
|
||||
--vsp-teal: #0e7e6b;
|
||||
--vsp-teal-l: #ccfbf1;
|
||||
--vsp-purple: #6d28d9;
|
||||
--vsp-purple-l: #ede9fe;
|
||||
--vsp-indigo: #3730a3;
|
||||
--vsp-indigo-l: #e0e7ff;
|
||||
--vsp-amber: #b45309;
|
||||
--vsp-amber-l: #fef3c7;
|
||||
--vsp-green: #15803d;
|
||||
--vsp-green-l: #dcfce7;
|
||||
--vsp-red: #c0392b;
|
||||
--vsp-red-l: #fee2e2;
|
||||
--vsp-pink: #be185d;
|
||||
--vsp-pink-l: #fce7f3;
|
||||
--vsp-g50: #f8fafc;
|
||||
--vsp-g100: #f1f5f9;
|
||||
--vsp-g200: #e2e8f0;
|
||||
--vsp-g500: #64748b;
|
||||
--vsp-g700: #334155;
|
||||
--vsp-g900: #0f172a;
|
||||
|
||||
display: block;
|
||||
font-family:
|
||||
'DM Sans',
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: var(--vsp-g900);
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
.vsp-root {
|
||||
padding: 4px 4px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.mat-h3 {
|
||||
margin-top: 10px !important;
|
||||
font-weight: 300;
|
||||
color: $status-approved;
|
||||
/* ───────── HERO ───────── */
|
||||
.vsp-hero {
|
||||
background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
|
||||
border-radius: 14px;
|
||||
padding: 22px 22px 22px 18px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
box-shadow:
|
||||
0 10px 24px rgb(11 30 61 / 18%),
|
||||
0 4px 10px rgb(11 30 61 / 12%);
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
.vsp-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: -60px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgb(255 255 255 / 8%) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vsp-hero-left {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vsp-hero-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
background: rgb(255 255 255 / 16%);
|
||||
border: 1px solid rgb(255 255 255 / 22%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vsp-hero-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vsp-hero-eyebrow {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.vsp-hero-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.vsp-hero-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vsp-hero-desc {
|
||||
margin: 12px 0 0;
|
||||
font-size: 13px;
|
||||
color: rgb(255 255 255 / 82%);
|
||||
line-height: 1.5;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.vsp-edit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255 / 14%);
|
||||
color: #fff;
|
||||
border: 1px solid rgb(255 255 255 / 28%);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-family: inherit;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.16s ease;
|
||||
|
||||
fa-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgb(255 255 255 / 24%);
|
||||
border-color: rgb(255 255 255 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ───────── PILLS ───────── */
|
||||
.vsp-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-family: inherit;
|
||||
|
||||
fa-icon {
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
&--code {
|
||||
background: rgb(255 255 255 / 18%);
|
||||
color: #fff;
|
||||
border: 1px solid rgb(255 255 255 / 24%);
|
||||
font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
&--teal {
|
||||
background: var(--vsp-teal-l);
|
||||
color: var(--vsp-teal);
|
||||
border: 1px solid #99f6e4;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
background: var(--vsp-blue-l);
|
||||
color: var(--vsp-blue);
|
||||
border: 1px solid #dbeafe;
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: var(--vsp-green-l);
|
||||
color: var(--vsp-green);
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
&--amber {
|
||||
background: var(--vsp-amber-l);
|
||||
color: var(--vsp-amber);
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
&--red {
|
||||
background: var(--vsp-red-l);
|
||||
color: var(--vsp-red);
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
&--gray {
|
||||
background: var(--vsp-g100);
|
||||
color: var(--vsp-g700);
|
||||
border: 1px solid var(--vsp-g200);
|
||||
}
|
||||
}
|
||||
|
||||
/* ───────── SECTION ───────── */
|
||||
.vsp-section {
|
||||
background: #fff;
|
||||
border: 1px solid var(--vsp-g200);
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
|
||||
}
|
||||
|
||||
.vsp-section-h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed var(--vsp-g200);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-g900);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-section-ic {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--blue {
|
||||
background: var(--vsp-blue-l);
|
||||
color: var(--vsp-blue);
|
||||
}
|
||||
|
||||
&--teal {
|
||||
background: var(--vsp-teal-l);
|
||||
color: var(--vsp-teal);
|
||||
}
|
||||
|
||||
&--purple {
|
||||
background: var(--vsp-purple-l);
|
||||
color: var(--vsp-purple);
|
||||
}
|
||||
|
||||
&--indigo {
|
||||
background: var(--vsp-indigo-l);
|
||||
color: var(--vsp-indigo);
|
||||
}
|
||||
|
||||
&--amber {
|
||||
background: var(--vsp-amber-l);
|
||||
color: var(--vsp-amber);
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: var(--vsp-green-l);
|
||||
color: var(--vsp-green);
|
||||
}
|
||||
|
||||
&--red {
|
||||
background: var(--vsp-red-l);
|
||||
color: var(--vsp-red);
|
||||
}
|
||||
|
||||
&--pink {
|
||||
background: var(--vsp-pink-l);
|
||||
color: var(--vsp-pink);
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-sub-h {
|
||||
margin: 16px 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-g700);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* ───────── KEY/VALUE GRID ───────── */
|
||||
.vsp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px 24px;
|
||||
}
|
||||
|
||||
.vsp-grid--3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.vsp-grid,
|
||||
.vsp-grid--3 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
.vsp-grid,
|
||||
.vsp-grid--3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-kv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed var(--vsp-g100);
|
||||
|
||||
&--span {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-k {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--vsp-g500);
|
||||
}
|
||||
|
||||
.vsp-v {
|
||||
font-size: 13.5px;
|
||||
color: var(--vsp-g900);
|
||||
font-weight: 500;
|
||||
word-break: break-word;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
/* ───────── FEATURE GRID (account facilities) ───────── */
|
||||
.vsp-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--vsp-g50);
|
||||
border: 1px solid var(--vsp-g200);
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--vsp-g700);
|
||||
|
||||
fa-icon {
|
||||
font-size: 12px;
|
||||
color: var(--vsp-g500);
|
||||
}
|
||||
|
||||
&.is-on {
|
||||
background: var(--vsp-green-l);
|
||||
border-color: #bbf7d0;
|
||||
color: var(--vsp-green);
|
||||
|
||||
fa-icon {
|
||||
color: var(--vsp-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ───────── TABLES ───────── */
|
||||
.vsp-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--vsp-g200);
|
||||
border-radius: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.vsp-table {
|
||||
width: 100%;
|
||||
}
|
||||
background: #fff;
|
||||
|
||||
.mat-elevation-z1 {
|
||||
margin: 1em 0 1.5em;
|
||||
}
|
||||
th.mat-mdc-header-cell {
|
||||
background: var(--vsp-g50);
|
||||
color: var(--vsp-g700);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 11px 14px;
|
||||
border-bottom: 1px solid var(--vsp-g200);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
td.mat-mdc-cell {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--vsp-g100);
|
||||
font-size: 12.5px;
|
||||
color: var(--vsp-g900);
|
||||
}
|
||||
|
||||
mat-divider {
|
||||
margin: 0 0 0.5em;
|
||||
tbody tr:last-child td.mat-mdc-cell {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+1
@@ -34,6 +34,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
styleUrls: ['./current-product-general-tab.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
RouterLink,
|
||||
FaIconComponent,
|
||||
MatDivider,
|
||||
MatTable,
|
||||
|
||||
+571
-487
File diff suppressed because it is too large
Load Diff
+369
-49
@@ -6,77 +6,397 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@use 'assets/styles/helper';
|
||||
@use 'assets/styles/colours' as *;
|
||||
@use 'assets/styles/product-view' as pv;
|
||||
|
||||
@include pv.product-view-styles;
|
||||
|
||||
/* FD-specific teal accent */
|
||||
:host {
|
||||
--pv-accent: #0e7e6b;
|
||||
--pv-accent-l: #ccfbf1;
|
||||
--vsp-navy: #0b1e3d;
|
||||
--vsp-blue: #1d4ed8;
|
||||
--vsp-blue-l: #eff6ff;
|
||||
--vsp-teal: #0e7e6b;
|
||||
--vsp-teal-l: #ccfbf1;
|
||||
--vsp-purple: #6d28d9;
|
||||
--vsp-purple-l: #ede9fe;
|
||||
--vsp-indigo: #3730a3;
|
||||
--vsp-indigo-l: #e0e7ff;
|
||||
--vsp-amber: #b45309;
|
||||
--vsp-amber-l: #fef3c7;
|
||||
--vsp-green: #15803d;
|
||||
--vsp-green-l: #dcfce7;
|
||||
--vsp-red: #c0392b;
|
||||
--vsp-red-l: #fee2e2;
|
||||
--vsp-pink: #be185d;
|
||||
--vsp-pink-l: #fce7f3;
|
||||
--vsp-g50: #f8fafc;
|
||||
--vsp-g100: #f1f5f9;
|
||||
--vsp-g200: #e2e8f0;
|
||||
--vsp-g500: #64748b;
|
||||
--vsp-g700: #334155;
|
||||
--vsp-g900: #0f172a;
|
||||
|
||||
display: block;
|
||||
font-family:
|
||||
'DM Sans',
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: var(--vsp-g900);
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
.vsp-root {
|
||||
padding: 4px 4px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
.vsp-hero {
|
||||
background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
|
||||
border-radius: 14px;
|
||||
padding: 22px 22px 22px 18px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
box-shadow:
|
||||
0 10px 24px rgb(11 30 61 / 18%),
|
||||
0 4px 10px rgb(11 30 61 / 12%);
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-h3 {
|
||||
margin-top: 10px !important;
|
||||
font-weight: 300;
|
||||
color: $status-approved;
|
||||
.vsp-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: -60px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgb(255 255 255 / 8%) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mat-elevation-z1 {
|
||||
margin: 1em 0 1.5em;
|
||||
.vsp-hero-left {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
.vsp-hero-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
background: rgb(255 255 255 / 16%);
|
||||
border: 1px solid rgb(255 255 255 / 22%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0.5em 0;
|
||||
.vsp-hero-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
mat-divider {
|
||||
margin: 0 0 0.5em;
|
||||
.vsp-hero-eyebrow {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.margin-t {
|
||||
margin-top: 1em;
|
||||
.vsp-hero-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
.vsp-hero-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
tr.incentives-row {
|
||||
height: 0;
|
||||
.vsp-hero-desc {
|
||||
margin: 12px 0 0;
|
||||
font-size: 13px;
|
||||
color: rgb(255 255 255 / 82%);
|
||||
line-height: 1.5;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
> td {
|
||||
padding: 0;
|
||||
}
|
||||
.vsp-edit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255 / 14%);
|
||||
color: #fff;
|
||||
border: 1px solid rgb(255 255 255 / 28%);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-family: inherit;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.16s ease;
|
||||
|
||||
.incentives {
|
||||
overflow: hidden;
|
||||
}
|
||||
fa-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
border-radius: 0;
|
||||
|
||||
> h4 {
|
||||
font-weight: 500;
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: rgb(255 255 255 / 24%);
|
||||
border-color: rgb(255 255 255 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-family: inherit;
|
||||
|
||||
fa-icon {
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
&--code {
|
||||
background: rgb(255 255 255 / 18%);
|
||||
color: #fff;
|
||||
border: 1px solid rgb(255 255 255 / 24%);
|
||||
font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
&--teal {
|
||||
background: var(--vsp-teal-l);
|
||||
color: var(--vsp-teal);
|
||||
border: 1px solid #99f6e4;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
background: var(--vsp-blue-l);
|
||||
color: var(--vsp-blue);
|
||||
border: 1px solid #dbeafe;
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: var(--vsp-green-l);
|
||||
color: var(--vsp-green);
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
&--amber {
|
||||
background: var(--vsp-amber-l);
|
||||
color: var(--vsp-amber);
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
&--red {
|
||||
background: var(--vsp-red-l);
|
||||
color: var(--vsp-red);
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
&--gray {
|
||||
background: var(--vsp-g100);
|
||||
color: var(--vsp-g700);
|
||||
border: 1px solid var(--vsp-g200);
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-section {
|
||||
background: #fff;
|
||||
border: 1px solid var(--vsp-g200);
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
|
||||
}
|
||||
|
||||
.vsp-section-h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed var(--vsp-g200);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-g900);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-section-ic {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--blue {
|
||||
background: var(--vsp-blue-l);
|
||||
color: var(--vsp-blue);
|
||||
}
|
||||
|
||||
&--teal {
|
||||
background: var(--vsp-teal-l);
|
||||
color: var(--vsp-teal);
|
||||
}
|
||||
|
||||
&--purple {
|
||||
background: var(--vsp-purple-l);
|
||||
color: var(--vsp-purple);
|
||||
}
|
||||
|
||||
&--indigo {
|
||||
background: var(--vsp-indigo-l);
|
||||
color: var(--vsp-indigo);
|
||||
}
|
||||
|
||||
&--amber {
|
||||
background: var(--vsp-amber-l);
|
||||
color: var(--vsp-amber);
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: var(--vsp-green-l);
|
||||
color: var(--vsp-green);
|
||||
}
|
||||
|
||||
&--red {
|
||||
background: var(--vsp-red-l);
|
||||
color: var(--vsp-red);
|
||||
}
|
||||
|
||||
&--pink {
|
||||
background: var(--vsp-pink-l);
|
||||
color: var(--vsp-pink);
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-sub-h {
|
||||
margin: 16px 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-g700);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.vsp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px 24px;
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
.vsp-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-kv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed var(--vsp-g100);
|
||||
|
||||
&--span {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-k {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--vsp-g500);
|
||||
}
|
||||
|
||||
.vsp-v {
|
||||
font-size: 13.5px;
|
||||
color: var(--vsp-g900);
|
||||
font-weight: 500;
|
||||
word-break: break-word;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-v--accent {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-blue);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.vsp-suffix {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--vsp-g500);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.vsp-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--vsp-g200);
|
||||
border-radius: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.vsp-table {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
||||
th.mat-mdc-header-cell {
|
||||
background: var(--vsp-g50);
|
||||
color: var(--vsp-g700);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 11px 14px;
|
||||
border-bottom: 1px solid var(--vsp-g200);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.mat-mdc-cell {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--vsp-g100);
|
||||
font-size: 12.5px;
|
||||
color: var(--vsp-g900);
|
||||
}
|
||||
|
||||
tbody tr:last-child td.mat-mdc-cell {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+26
@@ -8,6 +8,7 @@
|
||||
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { trigger, state, style, animate, transition } from '@angular/animations';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import {
|
||||
@@ -36,6 +37,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
selector: 'mifosx-fixed-deposit-general-tab',
|
||||
templateUrl: './fixed-deposit-general-tab.component.html',
|
||||
styleUrls: ['./fixed-deposit-general-tab.component.scss'],
|
||||
animations: [
|
||||
trigger('expandChartSlab', [
|
||||
state('collapsed', style({ height: '0px', overflow: 'hidden', opacity: 0 })),
|
||||
state('expanded', style({ height: '*', overflow: 'visible', opacity: 1 })),
|
||||
transition('collapsed <=> expanded', animate('200ms ease'))
|
||||
])
|
||||
],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
RouterLink,
|
||||
@@ -80,6 +88,24 @@ export class FixedDepositGeneralTabComponent implements OnInit {
|
||||
'periodTypeLabel',
|
||||
'annualInterestRate'
|
||||
];
|
||||
readonly chartSlabsDisplayedColumns = [
|
||||
'period',
|
||||
'amountRange',
|
||||
'annualInterestRate',
|
||||
'description',
|
||||
'actions'
|
||||
];
|
||||
readonly chartSlabsIncentivesDisplayedColumns = ['incentives'];
|
||||
readonly incentivesDisplayedColumns = [
|
||||
'entityType',
|
||||
'attributeName',
|
||||
'conditionType',
|
||||
'attributeValue',
|
||||
'incentiveType',
|
||||
'amount'
|
||||
];
|
||||
expandChartSlabIndex: number | null = null;
|
||||
|
||||
readonly chargesDisplayedColumns = [
|
||||
'name',
|
||||
'type',
|
||||
|
||||
-1
@@ -53,7 +53,6 @@
|
||||
<mifosx-loan-product-summary
|
||||
[action]="'view'"
|
||||
[loanProduct]="loanProduct"
|
||||
[useDueForRepaymentsConfigurations]="useDueForRepaymentsConfigurations"
|
||||
[paymentAllocations]="loanProduct.paymentAllocation"
|
||||
[creditAllocations]="loanProduct.creditAllocation"
|
||||
[supportedInterestRefundTypes]="loanProduct.supportedInterestRefundTypes"
|
||||
|
||||
+766
-605
File diff suppressed because it is too large
Load Diff
+490
-48
@@ -6,50 +6,513 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@use 'assets/styles/helper';
|
||||
@use 'assets/styles/colours' as *;
|
||||
@use 'assets/styles/product-view' as pv;
|
||||
|
||||
@include pv.product-view-styles;
|
||||
|
||||
/* RD-specific purple accent */
|
||||
:host {
|
||||
--pv-accent: #6d28d9;
|
||||
--pv-accent-l: #ede9fe;
|
||||
--vsp-navy: #0b1e3d;
|
||||
--vsp-blue: #1d4ed8;
|
||||
--vsp-blue-l: #eff6ff;
|
||||
--vsp-teal: #0e7e6b;
|
||||
--vsp-teal-l: #ccfbf1;
|
||||
--vsp-purple: #6d28d9;
|
||||
--vsp-purple-l: #ede9fe;
|
||||
--vsp-indigo: #3730a3;
|
||||
--vsp-indigo-l: #e0e7ff;
|
||||
--vsp-amber: #b45309;
|
||||
--vsp-amber-l: #fef3c7;
|
||||
--vsp-green: #15803d;
|
||||
--vsp-green-l: #dcfce7;
|
||||
--vsp-red: #c0392b;
|
||||
--vsp-red-l: #fee2e2;
|
||||
--vsp-pink: #be185d;
|
||||
--vsp-pink-l: #fce7f3;
|
||||
--vsp-g50: #f8fafc;
|
||||
--vsp-g100: #f1f5f9;
|
||||
--vsp-g200: #e2e8f0;
|
||||
--vsp-g500: #64748b;
|
||||
--vsp-g700: #334155;
|
||||
--vsp-g900: #0f172a;
|
||||
|
||||
display: block;
|
||||
font-family:
|
||||
'DM Sans',
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: var(--vsp-g900);
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
.vsp-root {
|
||||
padding: 4px 4px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
.vsp-hero {
|
||||
background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
|
||||
border-radius: 14px;
|
||||
padding: 22px 22px 22px 18px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
box-shadow:
|
||||
0 10px 24px rgb(11 30 61 / 18%),
|
||||
0 4px 10px rgb(11 30 61 / 12%);
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-h3 {
|
||||
margin-top: 10px !important;
|
||||
font-weight: 300;
|
||||
color: $status-approved;
|
||||
.vsp-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: -60px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgb(255 255 255 / 8%) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mat-elevation-z1 {
|
||||
margin: 1em 0 1.5em;
|
||||
.vsp-hero-left {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.interestCarts {
|
||||
float: right;
|
||||
.vsp-hero-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
background: rgb(255 255 255 / 16%);
|
||||
border: 1px solid rgb(255 255 255 / 22%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
.vsp-hero-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vsp-hero-eyebrow {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.vsp-hero-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.vsp-hero-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vsp-hero-desc {
|
||||
margin: 12px 0 0;
|
||||
font-size: 13px;
|
||||
color: rgb(255 255 255 / 82%);
|
||||
line-height: 1.5;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.vsp-edit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255 / 14%);
|
||||
color: #fff;
|
||||
border: 1px solid rgb(255 255 255 / 28%);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-family: inherit;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.16s ease;
|
||||
|
||||
fa-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgb(255 255 255 / 24%);
|
||||
border-color: rgb(255 255 255 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-family: inherit;
|
||||
|
||||
fa-icon {
|
||||
font-size: 9.5px;
|
||||
}
|
||||
|
||||
&--code {
|
||||
background: rgb(255 255 255 / 18%);
|
||||
color: #fff;
|
||||
border: 1px solid rgb(255 255 255 / 24%);
|
||||
font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
&--teal {
|
||||
background: var(--vsp-teal-l);
|
||||
color: var(--vsp-teal);
|
||||
border: 1px solid #99f6e4;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
background: var(--vsp-blue-l);
|
||||
color: var(--vsp-blue);
|
||||
border: 1px solid #dbeafe;
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: var(--vsp-green-l);
|
||||
color: var(--vsp-green);
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
&--amber {
|
||||
background: var(--vsp-amber-l);
|
||||
color: var(--vsp-amber);
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
&--red {
|
||||
background: var(--vsp-red-l);
|
||||
color: var(--vsp-red);
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
&--gray {
|
||||
background: var(--vsp-g100);
|
||||
color: var(--vsp-g700);
|
||||
border: 1px solid var(--vsp-g200);
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-section {
|
||||
background: #fff;
|
||||
border: 1px solid var(--vsp-g200);
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
|
||||
}
|
||||
|
||||
.vsp-section-h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed var(--vsp-g200);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-g900);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-section-ic {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--blue {
|
||||
background: var(--vsp-blue-l);
|
||||
color: var(--vsp-blue);
|
||||
}
|
||||
|
||||
&--teal {
|
||||
background: var(--vsp-teal-l);
|
||||
color: var(--vsp-teal);
|
||||
}
|
||||
|
||||
&--purple {
|
||||
background: var(--vsp-purple-l);
|
||||
color: var(--vsp-purple);
|
||||
}
|
||||
|
||||
&--indigo {
|
||||
background: var(--vsp-indigo-l);
|
||||
color: var(--vsp-indigo);
|
||||
}
|
||||
|
||||
&--amber {
|
||||
background: var(--vsp-amber-l);
|
||||
color: var(--vsp-amber);
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: var(--vsp-green-l);
|
||||
color: var(--vsp-green);
|
||||
}
|
||||
|
||||
&--red {
|
||||
background: var(--vsp-red-l);
|
||||
color: var(--vsp-red);
|
||||
}
|
||||
|
||||
&--pink {
|
||||
background: var(--vsp-pink-l);
|
||||
color: var(--vsp-pink);
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-sub-h {
|
||||
margin: 16px 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-g700);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.vsp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px 24px;
|
||||
}
|
||||
|
||||
@media (width <=600px) {
|
||||
.vsp-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-kv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed var(--vsp-g100);
|
||||
|
||||
&--span {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-k {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--vsp-g500);
|
||||
}
|
||||
|
||||
.vsp-v {
|
||||
font-size: 13.5px;
|
||||
color: var(--vsp-g900);
|
||||
font-weight: 500;
|
||||
word-break: break-word;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
.vsp-v--accent {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-blue);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.vsp-suffix {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--vsp-g500);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.vsp-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--vsp-g200);
|
||||
border-radius: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ───────── CHART META PILLS ───────── */
|
||||
.vsp-chart-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.vsp-chart-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 5px 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--vsp-g100);
|
||||
border: 1px solid var(--vsp-g200);
|
||||
color: var(--vsp-g700);
|
||||
|
||||
fa-icon {
|
||||
font-size: 11px;
|
||||
color: var(--vsp-g500);
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: var(--vsp-green-l);
|
||||
border-color: #bbf7d0;
|
||||
color: var(--vsp-green);
|
||||
}
|
||||
|
||||
&--red {
|
||||
background: var(--vsp-red-l);
|
||||
border-color: #fecaca;
|
||||
color: var(--vsp-red);
|
||||
}
|
||||
}
|
||||
|
||||
/* ───────── RATE BADGE ───────── */
|
||||
.vsp-rate-badge {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--vsp-blue);
|
||||
background: var(--vsp-blue-l);
|
||||
border: 1px solid #dbeafe;
|
||||
border-radius: 6px;
|
||||
padding: 3px 10px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* ───────── CELL SUB TEXT ───────── */
|
||||
.vsp-cell-sub {
|
||||
display: block;
|
||||
font-size: 10.5px;
|
||||
color: var(--vsp-g500);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ───────── INCENTIVE EXPAND ───────── */
|
||||
.vsp-incentive-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
padding: 5px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vsp-g200);
|
||||
background: var(--vsp-g50);
|
||||
color: var(--vsp-blue);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: all 0.14s ease;
|
||||
|
||||
fa-icon {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--vsp-blue-l);
|
||||
border-color: #dbeafe;
|
||||
}
|
||||
}
|
||||
|
||||
.vsp-incentive-cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.vsp-incentive-panel {
|
||||
overflow: hidden;
|
||||
padding: 0 14px;
|
||||
background: var(--vsp-g50);
|
||||
border-top: 1px dashed var(--vsp-g200);
|
||||
}
|
||||
|
||||
.vsp-incentive-title {
|
||||
margin: 12px 0 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--vsp-g500);
|
||||
}
|
||||
|
||||
.vsp-table {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
||||
th.mat-mdc-header-cell {
|
||||
background: var(--vsp-g50);
|
||||
color: var(--vsp-g700);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 11px 14px;
|
||||
border-bottom: 1px solid var(--vsp-g200);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.mat-mdc-cell {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--vsp-g100);
|
||||
font-size: 12.5px;
|
||||
color: var(--vsp-g900);
|
||||
}
|
||||
|
||||
tbody tr:last-child td.mat-mdc-cell {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
tbody tr:not(.incentives-row, .vsp-row-even) td.mat-mdc-cell {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
tbody tr.vsp-row-even td.mat-mdc-cell {
|
||||
background: var(--vsp-g50) !important;
|
||||
}
|
||||
|
||||
tr.incentives-row {
|
||||
height: 0;
|
||||
@@ -61,26 +524,5 @@ table {
|
||||
.incentives {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
border-radius: 0;
|
||||
|
||||
> h4 {
|
||||
font-weight: 500;
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
mat-divider {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
.margin-t {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
+16
-5
@@ -44,6 +44,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
RouterLink,
|
||||
FaIconComponent,
|
||||
MatDivider,
|
||||
MatTable,
|
||||
@@ -71,13 +72,23 @@ export class RecurringDepositGeneralTabComponent {
|
||||
expandChartSlabIndex: number | null = null;
|
||||
|
||||
chartSlabsIncentivesDisplayedColumns: string[] = ['incentives'];
|
||||
chartSlabsDisplayedColumns: string[] = [
|
||||
'period',
|
||||
'amountRange',
|
||||
'annualInterestRate',
|
||||
readonly chartSlabsBaseColumns = [
|
||||
'srNo',
|
||||
'description',
|
||||
'actions'
|
||||
'fromPeriod',
|
||||
'toPeriod',
|
||||
'periodTypeLabel',
|
||||
'annualInterestRate'
|
||||
];
|
||||
|
||||
get chartSlabsDisplayedColumns(): string[] {
|
||||
const slabs = this.recurringDepositProduct?.activeChart?.chartSlabs || [];
|
||||
const hasIncentives = slabs.some((s: any) => s.incentives?.length);
|
||||
return hasIncentives ? [
|
||||
...this.chartSlabsBaseColumns,
|
||||
'actions'
|
||||
] : this.chartSlabsBaseColumns;
|
||||
}
|
||||
incentivesDisplayedColumns: string[] = [
|
||||
'entityType',
|
||||
'attributeName',
|
||||
|
||||
Reference in New Issue
Block a user