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>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
bbe672b372
commit
7d087e5828
File diff suppressed because it is too large
Load Diff
@@ -6,53 +6,391 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
// ── Color Palette ──
|
||||
$primary-blue: #1a73e8;
|
||||
$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 {
|
||||
margin: 1% auto;
|
||||
// ── Main Container ──
|
||||
.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 {
|
||||
border: 1px solid;
|
||||
padding: 1%;
|
||||
&__icon {
|
||||
width: 42px;
|
||||
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 {
|
||||
display: flex; /* Use flexbox for alignment */
|
||||
align-items: center; /* Align items vertically */
|
||||
justify-content: space-between; /* Space out title and buttons */
|
||||
margin-bottom: 1%;
|
||||
margin-top: 1%;
|
||||
// ── Mat Table Styling ──
|
||||
table[mat-table] {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
// 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 {
|
||||
margin: 0; /* Reset margin to avoid misalignment */
|
||||
// Status color classes (for the fa-stop dots)
|
||||
: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 */
|
||||
gap: 0.5rem; /* Add spacing between buttons if needed */
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user