feat: Dashboard > Home: Card expenses section display exact amount (#…

…3367)
fylein · Dec 18, 2024 · d6b8355 · d6b8355
1 parent 6aaac4c
commit d6b8355
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.html b/src/app/shared/components/spent-cards/card-detail/card-detail.component.html
@@ -25,7 +25,21 @@
           <span class="stats--expenses-amount-currency">
             {{ currencySymbol }}
           </span>
-          {{ cardDetail.stats.totalDraftValue | humanizeCurrency : homeCurrency : true }}
+          <ng-container
+            *ngIf="
+              !isSmallScreen &&
+                cardDetail.stats.totalDraftValue > -1000000000 &&
+                cardDetail.stats.totalDraftValue < 1000000000;
+              else humanizeDraftAmount
+            "
+          >
+            {{
+              { value: cardDetail.stats.totalDraftValue, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency
+            }}
+          </ng-container>
+          <ng-template #humanizeDraftAmount>
+            {{ cardDetail.stats.totalDraftValue | humanizeCurrency : homeCurrency : true }}
+          </ng-template>
         </div>
       </div>
       <div class="stats--ccc-stats-title">
@@ -43,7 +57,21 @@
           <span class="stats--expenses-amount-currency">
             {{ currencySymbol }}
           </span>
-          {{ cardDetail.stats.totalAmountValue | humanizeCurrency : homeCurrency : true }}
+          <ng-container
+            *ngIf="
+              !isSmallScreen &&
+                cardDetail.stats.totalAmountValue > -1000000000 &&
+                cardDetail.stats.totalAmountValue < 1000000000;
+              else humanizeTotalAmount
+            "
+          >
+            {{
+              { value: cardDetail.stats.totalAmountValue, currencyCode: homeCurrency, skipSymbol: true } | exactCurrency
+            }}
+          </ng-container>
+          <ng-template #humanizeTotalAmount>
+            {{ cardDetail.stats.totalAmountValue | humanizeCurrency : homeCurrency : true }}
+          </ng-template>
         </div>
       </div>
       <div class="stats--ccc-stats-title">

diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.scss b/src/app/shared/components/spent-cards/card-detail/card-detail.component.scss
@@ -41,22 +41,29 @@
     margin-top: 16px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
 
     &__margin-top {
       margin-top: 24px;
     }
   }
 
-  &--ccc-classified-count,
+  &--ccc-classified-count {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 28px;
+    color: $black;
+  }
+
   &--ccc-classified-amount {
     font-weight: 500;
-    font-size: 18px;
+    font-size: 14px;
     line-height: 28px;
     color: $black;
   }
 
   &--ccc-stats-title {
-    font-size: 16px;
+    font-size: 14px;
     line-height: 20px;
     color: $black-2;
   }

diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.spec.ts b/src/app/shared/components/spent-cards/card-detail/card-detail.component.spec.ts
@@ -6,6 +6,7 @@ import { IonicModule } from '@ionic/angular';
 import { TrackingService } from 'src/app/core/services/tracking.service';
 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 { MaskNumber } from 'src/app/shared/pipes/mask-number.pipe';
 import { CardDetailComponent } from './card-detail.component';
 import { cardDetailsRes } from 'src/app/core/mock-data/platform-corporate-card-detail.data';
@@ -41,7 +42,13 @@ describe('CardDetailComponent', () => {
     ]);
     const orgSettingServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']);
     TestBed.configureTestingModule({
-      declarations: [CardDetailComponent, HumanizeCurrencyPipe, MaskNumber, MockCorporateCardComponent],
+      declarations: [
+        CardDetailComponent,
+        HumanizeCurrencyPipe,
+        ExactCurrencyPipe,
+        MaskNumber,
+        MockCorporateCardComponent,
+      ],
       imports: [IonicModule.forRoot(), RouterModule, RouterTestingModule],
       providers: [
         FyCurrencyPipe,

diff --git a/src/app/shared/components/spent-cards/card-detail/card-detail.component.ts b/src/app/shared/components/spent-cards/card-detail/card-detail.component.ts
@@ -16,6 +16,9 @@ export class CardDetailComponent {
 
   @Input() currencySymbol: string;
 
+  // To track if the screen is small (320px or below)
+  isSmallScreen = window.innerWidth <= 320;
+
   constructor(
     private router: Router,
     private trackingService: TrackingService,