From 7d087e5828d53ed57c43080f855f6ddef2648baf Mon Sep 17 00:00:00 2001 From: Aditya Date: Fri, 20 Mar 2026 23:38:11 +0530 Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20client=20General=20tab=20?= =?UTF-8?q?=E2=80=94=20stat=20cards,=20styled=20tables,=20reordered=20sect?= =?UTF-8?q?ions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- .../general-tab/general-tab.component.html | 2024 +++++++++-------- .../general-tab/general-tab.component.scss | 406 +++- 2 files changed, 1414 insertions(+), 1016 deletions(-) diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html index 6ff73a94d..461b246c8 100644 --- a/src/app/clients/clients-view/general-tab/general-tab.component.html +++ b/src/app/clients/clients-view/general-tab/general-tab.component.html @@ -6,44 +6,244 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
-

{{ 'labels.heading.Performance History' | translate }}

-
- - - - - - - -
-

- {{ 'labels.inputs.No. Of Loan Cycles' | translate }} :{{ performanceHistory.loanCycle }}
- {{ 'labels.inputs.No. of Active Loans' | translate }} :{{ performanceHistory.activeLoans }}
- {{ 'labels.inputs.Last Loan Amount' | translate }} :{{ performanceHistory.lastLoanAmount | formatNumber }} -
-

- 		-

- {{ 'labels.inputs.No. of Active Savings' | translate }} :{{ performanceHistory.activeSavings }}
- {{ 'labels.inputs.Total Savings' | translate }} :{{ performanceHistory.totalSavings | formatNumber }} -
-

-
-
+
- -
-
-
-

{{ 'labels.heading.Upcoming Charges' | translate }}

+ +
+

{{ 'labels.heading.Performance History' | translate }}

+
+
+
+ +
+
+ {{ 'labels.inputs.Total Savings' | translate }} + {{ performanceHistory.totalSavings | formatNumber }} +
+
+
+
+ +
+
+ {{ 'labels.inputs.No. of Active Savings' | translate }} + {{ performanceHistory.activeSavings }} +
+
+
+
+ +
+
+ {{ 'labels.inputs.No. Of Loan Cycles' | translate }} + {{ performanceHistory.loanCycle }} +
+
+
+
+ +
+
+ {{ 'labels.inputs.No. of Active Loans' | translate }} + {{ performanceHistory.activeLoans }} +
+
+
+
+ +
+
+ {{ 'labels.inputs.Last Loan Amount' | translate }} + {{ performanceHistory.lastLoanAmount | formatNumber }} +
-
-
+
+ + + + + +
- - - - - +
+
{{ 'labels.inputs.name' | translate }} - {{ element.name }} -
+ + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - - - - - - - - - -
{{ 'labels.inputs.name' | translate }} + {{ element.name }} + {{ 'labels.inputs.Due as of' | translate }}{{ element.dueDate | dateFormat }}{{ 'labels.inputs.Due as of' | translate }}{{ element.dueDate | dateFormat }}{{ 'labels.inputs.Due' | translate }}{{ element.amount | formatNumber }}{{ 'labels.inputs.Due' | translate }}{{ element.amount | formatNumber }}{{ 'labels.inputs.Paid' | translate }}{{ element.amountPaid | formatNumber }}{{ 'labels.inputs.Paid' | translate }}{{ element.amountPaid | formatNumber }}{{ 'labels.inputs.Waived' | translate }}{{ element.amountWaived | formatNumber }}{{ 'labels.inputs.Waived' | translate }}{{ element.amountWaived | formatNumber }}{{ 'labels.inputs.Outstanding' | translate }}{{ element.amountOutstanding | formatNumber }}{{ 'labels.inputs.Outstanding' | translate }}{{ element.amountOutstanding | formatNumber }}{{ 'labels.inputs.Actions' | translate }} - - - -
-

{{ 'labels.messages.No Upcoming Charges Available' | translate }}

-
-
- - -
-
-
-

{{ 'labels.heading.Loan Accounts' | translate }}

-
-
-
-
- -
-
-
- - @if (!showClosedLoanAccounts) { - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - - - + + + - - - -
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Loan Product' | translate }} - - {{ 'labels.inputs.Original Loan' | translate }} - {{ element.originalLoan | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} - {{ 'labels.inputs.Loan Balance' | translate }} - {{ element.loanBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} - {{ 'labels.inputs.Amount Paid' | translate }} - {{ element.amountPaid | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} - {{ 'labels.inputs.Type' | translate }} - - {{ 'labels.inputs.Actions' | translate }} - - - @if (element.status.active) { + + {{ 'labels.inputs.Actions' | translate }} - } - @if (element.status.pendingApproval) { - - - - } - @if (!element.status.pendingApproval && !element.status.active && !element.status.overpaid) { - - - - } - @if (!element.status.pendingApproval && !element.status.active && element.status.overpaid) { - - - - } - -
-

{{ 'labels.messages.No Active Loan Accounts Available' | translate }}

-
- 		+
+ +

{{ 'labels.messages.No Upcoming Charges Available' | translate }}

+
+
- } - - - @if (showClosedLoanAccounts) { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Loan Product' | translate }} - - {{ 'labels.inputs.Original Loan' | translate }}{{ element.lastActiveTransactionDate | dateFormat }}{{ 'labels.inputs.Loan Balance' | translate }} - {{ element.loanBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} - {{ 'labels.inputs.Amount Paid' | translate }} - {{ element.accountBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} - {{ 'labels.inputs.Type' | translate }} - - {{ 'labels.inputs.Closed Date' | translate }}{{ element.timeline.closedOnDate | dateFormat }}{{ 'labels.inputs.Actions' | translate }} - - - -
-

{{ 'labels.messages.No Closed Loan Accounts Available' | translate }}

-
-
- } - - -
-
-
-

{{ 'labels.heading.Saving Accounts' | translate }}

-
+ + + +
-
-
- + + + +
- - @if (!showClosedSavingAccounts) { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Savings Product' | translate }} - - {{ 'labels.inputs.Last Active' | translate }}{{ element.lastActiveTransactionDate | dateFormat }}{{ 'labels.inputs.Balance' | translate }} - {{ element.accountBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} - {{ 'labels.inputs.Actions' | translate }} - @if (element.status.active) { - - } - @if (element.status.active) { - - } - @if (element.status.submittedAndPendingApproval) { - - } - @if (!element.status.submittedAndPendingApproval && !element.status.active) { - - } - @if (!element.status.submittedAndPendingApproval && !element.status.active) { - - } - -
-

{{ 'labels.messages.No Active Saving Accounts Available' | translate }}

-
-
- } - - - @if (showClosedSavingAccounts) { - - - - - - - - - - - - - - - - - - - - - -
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Savings Product' | translate }} - - {{ 'labels.inputs.Closed Date' | translate }}{{ element.timeline.closedOnDate | dateFormat }} -
-

{{ 'labels.messages.No Closed Saving Accounts Available' | translate }}

-
-
- } - - -
-
-
-

{{ 'labels.heading.Fixed Deposit Accounts' | translate }}

-
-
-
-
-
-
- @if (!showClosedFixedAccounts) { - - - - - - - - - - - - - - - - - - - - - + @if (!showClosedFixedAccounts) { +
+
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Fixed Deposit Product' | translate }}{{ element.productName }}{{ 'labels.inputs.Last Active' | translate }}{{ element.lastActiveTransactionDate | dateFormat }}{{ 'labels.inputs.Balance' | translate }} - {{ element.accountBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} - {{ 'labels.inputs.Actions' | translate }} - @if (element.status.submittedAndPendingApproval) { - - } - @if (!element.status.submittedAndPendingApproval && !element.status.active) { - - } - @if (!element.status.submittedAndPendingApproval && !element.status.active) { - - } -
+ + + + + + + + + + + + + + + + + + + + - - - + + + - - - -
{{ 'labels.inputs.Account No' | translate }} + + + {{ 'labels.inputs.Fixed Deposit Product' | translate }}{{ element.productName }}{{ 'labels.inputs.Last Active' | translate }}{{ element.lastActiveTransactionDate | dateFormat }}{{ 'labels.inputs.Balance' | translate }} + {{ element.accountBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} + {{ 'labels.inputs.Actions' | translate }} + @if (element.status.submittedAndPendingApproval) { + + } + @if (!element.status.submittedAndPendingApproval && !element.status.active) { + + } + @if (!element.status.submittedAndPendingApproval && !element.status.active) { + + } + -
-

{{ 'labels.messages.No Active Fixed Deposit Accounts Available' | translate }}

-
- 		+
+ +

{{ 'labels.messages.No Active Fixed Deposit Accounts Available' | translate }}

+
+
- } - - - - @if (showClosedFixedAccounts) { - - - - - - - - - - - - - - - - - - - - - -
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Fixed Deposit Product' | translate }} - - {{ 'labels.inputs.Closed Date' | translate }}{{ element.timeline.closedOnDate | dateFormat }} -
-

{{ 'labels.messages.No Closed Fixed Deposit Accounts Available' | translate }}

-
-
- } - - -
-
-
-

{{ 'labels.heading.Recurring Deposit Accounts' | translate }}

+ + + +
-
-
-
-
-
- @if (!showClosedRecurringAccounts) { - - - - - - - - - - - - - - - - - - - - - + @if (!showClosedRecurringAccounts) { +
+
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Recurring Deposit Product' | translate }} - - {{ 'labels.inputs.Last Active' | translate }}{{ element.lastActiveTransactionDate | dateFormat }}{{ 'labels.inputs.Balance' | translate }} - {{ element.accountBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} - {{ 'labels.inputs.Actions' | translate }} - @if (element.status.submittedAndPendingApproval) { - - } - @if (!element.status.submittedAndPendingApproval && !element.status.active) { - - - } -
+ + + + + + + + + + + + + + + + + + + + - - - + + + - - - -
{{ 'labels.inputs.Account No' | translate }} + + + {{ 'labels.inputs.Recurring Deposit Product' | translate }} + + {{ 'labels.inputs.Last Active' | translate }}{{ element.lastActiveTransactionDate | dateFormat }}{{ 'labels.inputs.Balance' | translate }} + {{ element.accountBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} + {{ 'labels.inputs.Actions' | translate }} + @if (element.status.submittedAndPendingApproval) { + + } + @if (!element.status.submittedAndPendingApproval && !element.status.active) { + + + } + -
-

{{ 'labels.messages.No Active Recurring Deposit Accounts Available' | translate }}

-
- 		+
+ +

{{ 'labels.messages.No Active Recurring Deposit Accounts Available' | translate }}

+
+
- } - - - @if (showClosedRecurringAccounts) { - - - - - - - - - - - - - - - - - - - - - -
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Recurring Deposit Product' | translate }} - - {{ 'labels.inputs.Closed Date' | translate }}{{ element.timeline.closedOnDate | dateFormat }} -
-

{{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }}

-
-
- } - - -
-
-
-

{{ 'labels.inputs.Shares Accounts' | translate }}

+ + + +
-
-
-
-
-
- @if (!showClosedShareAccounts) { - - - - - - - - - - - - - - - - - - - - - + @if (!showClosedLoanAccounts) { +
+
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Share Product' | translate }} - - {{ 'labels.inputs.Approved Shares' | translate }}{{ element.totalApprovedShares }}{{ 'labels.inputs.Pending For Approval Shares' | translate }}{{ element.totalPendingForApprovalShares }}{{ 'labels.inputs.Actions' | translate }} - @if (element.status.submittedAndPendingApproval) { - - } - @if (!element.status.submittedAndPendingApproval && !element.status.active) { - - } - @if (!element.status.submittedAndPendingApproval && !element.status.active) { - - } -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - -
{{ 'labels.inputs.Account No' | translate }} + + + {{ 'labels.inputs.Loan Product' | translate }} + + {{ 'labels.inputs.Original Loan' | translate }} + {{ element.originalLoan | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} + {{ 'labels.inputs.Loan Balance' | translate }} + {{ element.loanBalance | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} + {{ 'labels.inputs.Amount Paid' | translate }} + {{ element.amountPaid | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }} + {{ 'labels.inputs.Type' | translate }} + + {{ 'labels.inputs.Actions' | translate }} + + + @if (element.status.active) { + + } + @if (element.status.pendingApproval) { + + + + } + @if (!element.status.pendingApproval && !element.status.active && !element.status.overpaid) { + + + + } + @if (!element.status.pendingApproval && !element.status.active && element.status.overpaid) { + + + + } + -
-

{{ 'labels.messages.No Active Share Accounts Available' | translate }}

-
- 		+
+ +

{{ 'labels.messages.No Active Loan Accounts Available' | translate }}

+
+
- } - - - @if (showClosedShareAccounts) { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{ 'labels.inputs.Account No' | translate }} - - - {{ 'labels.inputs.Share Product' | translate }}{{ element.productName }}{{ 'labels.inputs.Approved Shares' | translate }}{{ element.totalApprovedShares }}{{ 'labels.inputs.Pending For Approval Shares' | translate }}{{ element.totalPendingForApprovalShares }}{{ 'labels.inputs.Closed Date' | translate }}{{ element.timeline.closedOnDate | dateFormat }} -
-

{{ 'labels.messages.No Closed Share Accounts Available' | translate }}

-
-
- } - - -
-
-
-

{{ 'labels.heading.Collateral Data' | translate }}

+ + + +
-
-
-
-
-
- - - - - +
+
{{ 'labels.inputs.ID' | translate }}{{ element.collateralId }}
+ + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - + + + - - - -
{{ 'labels.inputs.ID' | translate }}{{ element.collateralId }}{{ 'labels.inputs.name' | translate }}{{ element.name }}{{ 'labels.inputs.name' | translate }}{{ element.name }}{{ 'labels.inputs.Quantity' | translate }}{{ element.quantity | formatNumber }}{{ 'labels.inputs.Quantity' | translate }}{{ element.quantity | formatNumber }}{{ 'labels.inputs.Total Value' | translate }} - {{ - element.basePrice * element.quantity | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' - }} - {{ 'labels.inputs.Total Value' | translate }} + {{ + element.basePrice * element.quantity | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' + }} + - {{ 'labels.inputs.Total Collateral Value' | translate }} - - {{ - (element.pctToBase * element.basePrice * element.quantity) / 100 - | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' - }} - + {{ 'labels.inputs.Total Collateral Value' | translate }} + + {{ + (element.pctToBase * element.basePrice * element.quantity) / 100 + | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' + }} + -
-

{{ 'labels.messages.No Collateral Data Available' | translate }}

-
- 		+
+ +

{{ 'labels.messages.No Collateral Data Available' | translate }}

+
+
+ + + + +
+ + + +
@@ -1063,4 +1123,4 @@
-
+
\ No newline at end of file diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.scss b/src/app/clients/clients-view/general-tab/general-tab.component.scss index 7c7dbdef1..825fc007e 100644 --- a/src/app/clients/clients-view/general-tab/general-tab.component.scss +++ b/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 { - 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; }