feat: redesign client General tab — stat cards, styled tables, reordered sections

- Performance History: 5 color-coded stat cards with smaller fonts for full text visibility
- Card order: Total Savings, Active Savings, Loan Cycles, Active Loans, Last Loan Amount
- Section order: Saving > Upcoming Charges > Fixed Deposit > Recurring Deposit > Loan > Collateral > Shares
- Tables: dark headers, zebra striping, hover effects, rounded containers
- Styled status dots, better empty states

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/clients/clients-view/general-tab/general-tab.component.scss

@@ -6,53 +6,391 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.tab-container {
+// ── Color Palette ──
-  padding: 1%;
+$primary-blue: #1a73e8;
-  margin: 1%;
+$primary-blue-light: #e8f0fe;
+$green: #0d9d58;
+$green-light: #e6f4ea;
+$purple: #7c3aed;
+$purple-light: #f3e8ff;
+$teal: #0891b2;
+$teal-light: #e0f7fa;
+$orange: #e8710a;
+$orange-light: #fef3e2;
+$gray-50: #f8f9fa;
+$gray-100: #f1f3f4;
+$gray-200: #e8eaed;
+$gray-300: #dadce0;
+$gray-600: #5f6368;
+$gray-700: #3c4043;
+$gray-900: #202124;
+$white: #ffffff;
+$red: #d93025;
 
-  h3 {
+// ── Main Container ──
-    margin: 1% auto;
+.general-tab-container {
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+// ── Performance History: Stat Cards ──
+.performance-section {
+  .performance-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: $gray-900;
+    margin: 0 0 16px 0;
+  }
+}
+
+.stat-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: $white;
+  border-radius: 10px;
+  padding: 18px 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  border-left: 4px solid transparent;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
   }
 
-  .performance-history-container {
+  &__icon {
-    border: 1px solid;
+    width: 42px;
-    padding: 1%;
+    height: 42px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &__label {
+    font-size: 10.5px;
+    font-weight: 500;
+    color: $gray-600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    line-height: 1.3;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  &__value {
+    font-size: 16px;
+    font-weight: 700;
+    color: $gray-900;
+    line-height: 1.2;
+    margin-top: 2px;
+  }
+
+  // Color variants
+  &--blue {
+    border-left-color: $primary-blue;
+    .stat-card__icon {
+      background: $primary-blue-light;
+      color: $primary-blue;
+    }
+  }
+
+  &--green {
+    border-left-color: $green;
+    .stat-card__icon {
+      background: $green-light;
+      color: $green;
+    }
+  }
+
+  &--purple {
+    border-left-color: $purple;
+    .stat-card__icon {
+      background: $purple-light;
+      color: $purple;
+    }
+  }
+
+  &--teal {
+    border-left-color: $teal;
+    .stat-card__icon {
+      background: $teal-light;
+      color: $teal;
+    }
+  }
+
+  &--orange {
+    border-left-color: $orange;
+    .stat-card__icon {
+      background: $orange-light;
+      color: $orange;
+    }
+  }
+}
+
+// ── Section Headers ──
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 12px;
+  border-bottom: 2px solid $gray-200;
+  margin-bottom: 0;
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  &__icon {
+    font-size: 18px;
+    color: $primary-blue;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: $gray-900;
+    margin: 0;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 22px;
+    height: 22px;
+    padding: 0 7px;
+    border-radius: 12px;
+    background: $primary-blue-light;
+    color: $primary-blue;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+// ── Account Sections ──
+.account-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+// ── Table Wrapper ──
+.table-wrapper {
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  border: 1px solid $gray-200;
+  border-top: none;
+
   table {
     width: 100%;
-
-    td:hover {
-      cursor: pointer;
-    }
-
-    .account-action-button {
-      min-width: 26px;
-      padding: 0 6px;
-      margin: 4px;
-      line-height: 25px;
-    }
-
-    .select-row:hover {
-      cursor: pointer;
-    }
   }
 }
 
-.heading-content {
+// ── Mat Table Styling ──
-  display: flex; /* Use flexbox for alignment */
+table[mat-table] {
-  align-items: center; /* Align items vertically */
+  width: 100%;
-  justify-content: space-between; /* Space out title and buttons */
+  border-collapse: collapse;
-  margin-bottom: 1%;
+
-  margin-top: 1%;
+  // Header row
+  tr[mat-header-row] {
+    background: $gray-700;
+    height: 44px;
+  }
+
+  th[mat-header-cell] {
+    color: $white;
+    font-weight: 600;
+    font-size: 12.5px;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    padding: 0 14px;
+    border-bottom: none;
+
+    &.r-amount {
+      text-align: right;
+    }
+
+    &.center {
+      text-align: center;
+    }
+  }
+
+  // Data rows
+  tr[mat-row] {
+    height: 48px;
+    transition: background-color 0.15s ease;
+
+    &:nth-child(even) {
+      background-color: $gray-50;
+    }
+
+    &:nth-child(odd) {
+      background-color: $white;
+    }
+
+    &:hover {
+      background-color: $primary-blue-light !important;
+      cursor: pointer;
+    }
+
+    &.select-row:hover {
+      cursor: pointer;
+    }
+  }
+
+  td[mat-cell] {
+    padding: 0 14px;
+    font-size: 13.5px;
+    color: $gray-700;
+    border-bottom: 1px solid $gray-200;
+
+    &.r-amount {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+
+    &.center {
+      text-align: center;
+    }
+  }
+
+  // Footer rows
+  tr[mat-footer-row] {
+    height: auto;
+  }
+
+  td[mat-footer-cell] {
+    border-bottom: none;
+    padding: 0;
+  }
+
+  // Status indicator dots
+  .fa-stop {
+    font-size: 10px;
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+
+  // Action buttons
+  .account-action-button {
+    min-width: 26px;
+    padding: 0 6px;
+    margin: 4px 2px;
+    line-height: 25px;
+    font-size: 12px;
+  }
 }
 
-.heading-name {
+// Status color classes (for the fa-stop dots)
-  margin: 0; /* Reset margin to avoid misalignment */
+:host ::ng-deep {
+  .status-active,
+  .status-loanStatusType-active {
+    color: $green !important;
+  }
+
+  .status-active-overdue {
+    color: $red !important;
+  }
+
+  .status-closed,
+  .status-loanStatusType-closed {
+    color: $gray-600 !important;
+  }
+
+  .status-overpaid,
+  .status-loanStatusType-overpaid {
+    color: $primary-blue !important;
+  }
+
+  .status-submitted,
+  .status-loanStatusType-submitted {
+    color: $orange !important;
+  }
+
+  .status-approved,
+  .status-loanStatusType-approved {
+    color: $teal !important;
+  }
 }
 
-.layout-row.align-flex-end {
+// ── Empty States ──
+.table-empty-state {
   display: flex;
-  align-items: center; /* Ensure buttons are vertically aligned */
+  flex-direction: column;
-  gap: 0.5rem; /* Add spacing between buttons if needed */
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+
+  &__icon {
+    font-size: 36px;
+    color: $gray-300;
+    margin-bottom: 12px;
+  }
+
+  &__text {
+    font-size: 13.5px;
+    color: $gray-600;
+    margin: 0;
+    font-weight: 400;
+  }
+}
+
+// ── PDF Modal (kept as-is, with minor polish) ──
+.pdf-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.pdf-modal-content {
+  background: $white;
+  border-radius: 12px;
+  padding: 24px;
+  width: 85%;
+  max-width: 900px;
+  position: relative;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.pdf-modal-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 24px;
+  z-index: 1;
 }