feat: Dashboard > Home: Expense and Report Stats display the exact am…

…ount
fylein · Dec 17, 2024 · 65f6377 · 65f6377
1 parent cb9cd69
commit 65f6377
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 17 deletions.
diff --git a/src/app/fyle/dashboard/stat-badge/stat-badge.component.html b/src/app/fyle/dashboard/stat-badge/stat-badge.component.html
@@ -2,7 +2,7 @@
   <div class="stat-badge--container">
     <ion-grid class="stat-badge--grid">
       <ion-row>
-        <ion-col class="stat-badge--count-col" size="4">
+        <ion-col class="stat-badge--count-col" size="3">
           <div *ngIf="!loading && reportState">
             <div
               *ngIf="!loading"
@@ -23,7 +23,7 @@
             <ion-skeleton-text animated></ion-skeleton-text>
           </div>
         </ion-col>
-        <ion-col class="stat-badge--grid-outer-col" size="8">
+        <ion-col class="stat-badge--grid-outer-col" size="9">
           <ion-grid class="stat-badge--grid">
             <ion-row>
               <ion-col class="stat-badge--grid-col">
@@ -44,7 +44,12 @@
                   <span class="stat-badge--currency">
                     {{ currencySymbol }}
                   </span>
-                  {{ value | humanizeCurrency: currency:true }}
+                  <ng-container *ngIf="!isSmallScreen && value < 1000000000; else humanize">
+                    {{ { value: value, currencyCode: currency, skipSymbol: true } | exactCurrency }}
+                  </ng-container>
+                  <ng-template #humanize>
+                    {{ value | humanizeCurrency : currency : true }}
+                  </ng-template>
                 </div>
                 <div *ngIf="loading">
                   <ion-skeleton-text

diff --git a/src/app/fyle/dashboard/stat-badge/stat-badge.component.scss b/src/app/fyle/dashboard/stat-badge/stat-badge.component.scss
@@ -29,11 +29,6 @@
     --ion-grid-column-padding: 4px;
   }
 
-  &--count-col {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
   &--count {
     min-width: 30px;
     min-height: 30px;
@@ -81,10 +76,12 @@
 
   &--amount {
     font-weight: 500;
+    font-size: 12px;
+    color: $black;
   }
 
   &--name {
-    font-size: 14px;
+    font-size: 12px;
     line-height: 18px;
     color: $blue-black;
     white-space: nowrap;

diff --git a/src/app/fyle/dashboard/stat-badge/stat-badge.component.spec.ts b/src/app/fyle/dashboard/stat-badge/stat-badge.component.spec.ts
@@ -3,6 +3,7 @@ import { IonicModule } from '@ionic/angular';
 import { getElementBySelector, getTextContent } from 'src/app/core/dom-helpers';
 import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe';
 import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe';
 import { ReportStates } from './report-states';
 
 import { StatBadgeComponent } from './stat-badge.component';
@@ -14,7 +15,7 @@ describe('StatBadgeComponent', () => {
   beforeEach(waitForAsync(() => {
     const fyCurrencyPipeSpy = jasmine.createSpyObj('FyCurrencyPipe', ['transform']);
     TestBed.configureTestingModule({
-      declarations: [StatBadgeComponent, HumanizeCurrencyPipe, FyCurrencyPipe],
+      declarations: [StatBadgeComponent, HumanizeCurrencyPipe, ExactCurrencyPipe, FyCurrencyPipe],
       imports: [IonicModule.forRoot()],
       providers: [
         {

diff --git a/src/app/fyle/dashboard/stat-badge/stat-badge.component.ts b/src/app/fyle/dashboard/stat-badge/stat-badge.component.ts
@@ -1,12 +1,13 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { ReportStates } from './report-states';
+import { HostListener } from '@angular/core';
 
 @Component({
   selector: 'app-stat-badge',
   templateUrl: './stat-badge.component.html',
   styleUrls: ['./stat-badge.component.scss'],
 })
-export class StatBadgeComponent {
+export class StatBadgeComponent implements OnInit {
   @Input() reportState: ReportStates;
 
   @Input() name: string;
@@ -25,6 +26,14 @@ export class StatBadgeComponent {
 
   @Output() badgeClicked = new EventEmitter();
 
+  // To track if the screen is small (360px or below)
+  isSmallScreen: boolean = false;
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: Event) {
+    this.isSmallScreen = window.innerWidth <= 360;
+  }
+
   onBadgeClicked() {
     if (!this.loading) {
       this.badgeClicked.emit(this.reportState);
@@ -33,4 +42,8 @@ export class StatBadgeComponent {
       }
     }
   }
+
+  ngOnInit() {
+    this.isSmallScreen = window.innerWidth <= 360;
+  }
 }
diff --git a/src/app/fyle/dashboard/stats/stats.component.scss b/src/app/fyle/dashboard/stats/stats.component.scss
@@ -20,7 +20,7 @@ $ccc-bank-name: #c4cae8;
   &--header {
     font-size: 14px;
     line-height: 18px;
-    color: $grey-light;
+    color: $black-light;
     font-weight: 500;
   }
 
@@ -87,14 +87,12 @@ $ccc-bank-name: #c4cae8;
   }
 
   &--report-stats-row {
-    padding-bottom: 18px;
-    padding-top: 18px;
+    padding: 24px 0 20px 0;
     --ion-grid-column-padding: 0;
   }
 
   &--expenses-stats-row {
-    padding-bottom: 18px;
-    padding-top: 8px;
+    padding: 24px 0 20px 0;
     --ion-grid-column-padding: 0;
   }
 }