fixed current, rd, fd account preview page styling

angular.json

@@ -69,8 +69,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "12mb",
+                  "maximumWarning": "13mb",
-                  "maximumError": "12mb"
+                  "maximumError": "14mb"
                 },
                 {
                   "type": "anyComponentStyle",

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -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>

src/app/accounting/search-journal-entry/search-journal-entry.component.scss

@@ -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;

src/app/core/shell/shell.component.scss

@@ -98,6 +98,7 @@ $color: #e2e4ec;
     max-width: 100%;
     overflow-x: hidden;
     box-sizing: border-box;
+    padding: 16px 28px;
   }
 }
 

src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.scss

@@ -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;
+  --vsp-navy: #0b1e3d;
-  --pv-accent-l: #dcfce7;
+  --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 {
+.vsp-root {
-  padding: 1%;
+  padding: 4px 4px 24px;
-  margin: 1%;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
-.mat-h3 {
+/* ───────── HERO ───────── */
-  margin-top: 10px !important;
+.vsp-hero {
-  font-weight: 300;
+  background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
-  color: $status-approved;
+  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,
+.vsp-hero::before {
-h3,
+  content: '';
-h4 {
+  position: absolute;
-  margin: 0;
+  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 {
+  th.mat-mdc-header-cell {
-  margin: 1em 0 1.5em;
+    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 {
+  td.mat-mdc-cell {
-  margin: 0.5em 0;
+    padding: 10px 14px;
-}
+    border-bottom: 1px solid var(--vsp-g100);
+    font-size: 12.5px;
+    color: var(--vsp-g900);
+  }
 
-mat-divider {
+  tbody tr:last-child td.mat-mdc-cell {
-  margin: 0 0 0.5em;
+    border-bottom: 0;
+  }
 }

src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.ts

@@ -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,

src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.scss

@@ -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;
+  --vsp-navy: #0b1e3d;
-  --pv-accent-l: #ccfbf1;
+  --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 {
+.vsp-root {
-  width: 100%;
+  padding: 4px 4px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
-.tab-container {
+.vsp-hero {
-  padding: 1%;
+  background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
-  margin: 1%;
+  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 {
+.vsp-hero::before {
-  margin-top: 10px !important;
+  content: '';
-  font-weight: 300;
+  position: absolute;
-  color: $status-approved;
+  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 {
+.vsp-hero-left {
-  margin: 1em 0 1.5em;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
 }
 
-h2,
+.vsp-hero-icon {
-h3,
+  width: 56px;
-h4 {
+  height: 56px;
-  margin: 0;
+  border-radius: 14px;
-  font-weight: 500;
+  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 {
+.vsp-hero-text {
-  margin: 0.5em 0;
+  flex: 1;
+  min-width: 0;
 }
 
-mat-divider {
+.vsp-hero-eyebrow {
-  margin: 0 0 0.5em;
+  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 {
+.vsp-hero-title {
-  margin-top: 1em;
+  margin: 0 0 10px;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: #fff;
+  line-height: 1.2;
 }
 
-table {
+.vsp-hero-meta {
-  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  tr.incentives-row {
+.vsp-hero-desc {
-    height: 0;
+  margin: 12px 0 0;
+  font-size: 13px;
+  color: rgb(255 255 255 / 82%);
+  line-height: 1.5;
+  max-width: 720px;
+}
 
-    > td {
+.vsp-edit-btn {
-      padding: 0;
+  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 {
+  fa-icon {
-      overflow: hidden;
+    font-size: 12px;
-    }
+  }
 
-    .mat-card {
+  &:hover {
-      border-radius: 0;
+    background: rgb(255 255 255 / 24%);
-
+    border-color: rgb(255 255 255 / 50%);
-      > h4 {
+  }
-        font-weight: 500;
+}
-        margin: 0.5em 0 0;
+
-      }
+.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;
   }
 }

src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.ts

@@ -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',

src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html

@@ -53,7 +53,6 @@
     <mifosx-loan-product-summary
       [action]="'view'"
       [loanProduct]="loanProduct"
-      [useDueForRepaymentsConfigurations]="useDueForRepaymentsConfigurations"
       [paymentAllocations]="loanProduct.paymentAllocation"
       [creditAllocations]="loanProduct.creditAllocation"
       [supportedInterestRefundTypes]="loanProduct.supportedInterestRefundTypes"

src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.scss

@@ -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;
+  --vsp-navy: #0b1e3d;
-  --pv-accent-l: #ede9fe;
+  --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 {
+.vsp-root {
-  width: 100%;
+  padding: 4px 4px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
-.tab-container {
+.vsp-hero {
-  padding: 1%;
+  background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
-  margin: 1%;
+  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 {
+.vsp-hero::before {
-  margin-top: 10px !important;
+  content: '';
-  font-weight: 300;
+  position: absolute;
-  color: $status-approved;
+  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 {
+.vsp-hero-left {
-  margin: 1em 0 1.5em;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
 }
 
-.interestCarts {
+.vsp-hero-icon {
-  float: right;
+  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,
+.vsp-hero-text {
-h3,
+  flex: 1;
-h4 {
+  min-width: 0;
-  margin: 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;
-}

src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.ts

@@ -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[] = [
+  readonly chartSlabsBaseColumns = [
-    'period',
+    'srNo',
-    'amountRange',
-    'annualInterestRate',
     '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',