feat: Report card section display exact amount (#3328)

fylein · Dec 11, 2024 · 2884198 · 2884198
1 parent 044025c
commit 2884198
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 39 deletions.
diff --git a/src/app/fyle/my-reports/my-reports.page.html b/src/app/fyle/my-reports/my-reports.page.html
@@ -72,7 +72,7 @@
     </ng-container>
 
     <ng-template #loading>
-      <app-fy-loading-screen class="my-reports--shimmers"></app-fy-loading-screen>
+      <app-fy-loading-screen [isNewLoaderEnabled]="true" class="my-reports--shimmers"></app-fy-loading-screen>
     </ng-template>
     <div *ngIf="(count$ | async) === 0" class="my-reports--zero-state">
       <app-fy-zero-state

diff --git a/src/app/shared/components/reports-card/reports-card.component.html b/src/app/shared/components/reports-card/reports-card.component.html
@@ -1,35 +1,49 @@
+<!-- Report Date -->
 <div *ngIf="showDate" class="reports-card--date">
   {{ report.created_at | date : 'MMM dd, YYYY' }}
 </div>
+
+<!-- Report cards -->
 <div
   class="reports-card"
   [ngClass]="{ 'reports-card__with-border': !showDate }"
   (click)="onGoToReport()"
   *ngIf="!actionOpened"
   matRipple
 >
-  <div class="reports-card--divider" *ngIf="!showDate"></div>
-  <div class="reports-card--main-info">
-    <div class="reports-card--purpose-amount-block">
-      <div class="reports-card--purpose">
-        <span>{{ report.purpose | ellipsis : 40 }}</span>
-      </div>
-      <div class="reports-card--amount-block ion-text-nowrap">
-        <span class="reports-card--currency">{{ reportCurrencySymbol }}</span>
-        <span class="reports-card--amount">
-          {{ report.amount || 0 | humanizeCurrency : report.currency : true }}
-        </span>
+  <div class="reports-card--container">
+    <div class="reports-card--main-info">
+      <!-- Icon -->
+      <mat-icon class="reports-card--list-icon" svgIcon="list"></mat-icon>
+
+      <div class="reports-card--purpose-num-amount-block">
+        <!-- Report name  -->
+        <div class="reports-card--purpose">
+          <span>{{ report.purpose | ellipsis : 40 }}</span>
+        </div>
+
+        <!-- Number of expenses -->
+        <div class="reports-card--no-transactions">
+          <span>{{ report.num_expenses }} </span>
+          <span>{{ report.num_expenses === 1 ? 'Expense' : 'Expenses' }}</span>
+        </div>
+
+        <!-- Total amount -->
+        <div class="reports-card--amount-block ion-text-nowrap">
+          <span class="reports-card--currency">{{ reportCurrencySymbol }}</span>
+          <span class="reports-card--amount">
+            {{ { value: report.amount || 0, currencyCode: report.currency, skipSymbol: true } | exactCurrency }}
+          </span>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="reports-card--secondary-info">
-    <div class="reports-card--secondary-info-block">
-      <div class="reports-card--no-transactions">
-        <span>{{ report.num_expenses }} </span>
-        <span>{{ report.num_expenses === 1 ? 'Expense' : 'Expenses' }}</span>
-      </div>
-      <div class="state-pill state-{{ report.state | reportState }}">
-        {{ report.state | reportState : simplifyReportsEnabled | snakeCaseToSpaceCase }}
+
+    <!-- Report status -->
+    <div class="reports-card--secondary-info">
+      <div class="reports-card--secondary-info-block">
+        <div class="state-pill state-{{ report.state | reportState }}">
+          {{ report.state | reportState : simplifyReportsEnabled | snakeCaseToSpaceCase }}
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/app/shared/components/reports-card/reports-card.component.scss b/src/app/shared/components/reports-card/reports-card.component.scss
@@ -1,26 +1,22 @@
 @import '../../../../theme/colors.scss';
 
 .reports-card {
-  padding: 16px;
+  padding: 12px;
+  margin-bottom: 6px;
   background-color: $pure-white;
 
-  &__with-border {
-    padding-top: 0;
-  }
-
   &__no-top-margin {
     margin-top: 0;
   }
 
   &--divider {
-    border-bottom: 1px solid $grey-lighter;
     margin-bottom: 16px;
   }
 
   &--date {
-    color: $grey-light;
+    color: $black-light;
     font-size: 14px;
-    padding: 16px 0 12px 16px;
+    padding: 24px 14px 16px 14px;
     background-color: $white;
     font-weight: 500;
   }
@@ -31,8 +27,23 @@
     margin-right: 20px;
   }
 
+  &--container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
   &--main-info {
+    display: flex;
+    gap: 8px;
     margin-bottom: 6px;
+    width: 80%;
+  }
+
+  &--list-icon {
+    width: 16px;
+    height: 16px;
+    padding-top: 2px;
   }
 
   &--icon-policy-violation {
@@ -47,9 +58,10 @@
     justify-content: space-between;
   }
 
-  &--purpose-amount-block {
+  &--purpose-num-amount-block {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    width: 100%;
   }
 
   &--currency {
@@ -60,26 +72,31 @@
     margin-right: -2px;
   }
 
+  &--amount-block {
+    margin-top: 10px;
+  }
+
   &--amount {
     color: $black;
-    font-size: 20px;
+    font-size: 16px;
     line-height: 1.3;
-    margin-right: 6px;
     font-weight: 500;
   }
 
   &--purpose {
-    line-height: 23px;
     color: $black-2;
-    font-size: 18px;
+    font-size: 14px;
     font-weight: 500;
-    max-width: 60%;
+    max-width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &--no-transactions {
-    font-size: 14px;
+    font-size: 12px;
     line-height: 18px;
-    color: $blue-black;
+    color: $dark-grey;
   }
 }
 

diff --git a/src/app/shared/components/reports-card/reports-card.component.spec.ts b/src/app/shared/components/reports-card/reports-card.component.spec.ts
@@ -5,6 +5,7 @@ import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { EllipsisPipe } from '../../pipes/ellipses.pipe';
 import { HumanizeCurrencyPipe } from '../../pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe';
 import { FyCurrencyPipe } from '../../pipes/fy-currency.pipe';
 import { CurrencyPipe } from '@angular/common';
 import { ReportState } from '../../pipes/report-state.pipe';
@@ -18,7 +19,14 @@ describe('ReportsCardComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ReportsCardComponent, EllipsisPipe, HumanizeCurrencyPipe, ReportState, SnakeCaseToSpaceCase],
+      declarations: [
+        ReportsCardComponent,
+        EllipsisPipe,
+        HumanizeCurrencyPipe,
+        ExactCurrencyPipe,
+        ReportState,
+        SnakeCaseToSpaceCase,
+      ],
       imports: [IonicModule.forRoot(), MatIconTestingModule, MatIconModule],
       providers: [FyCurrencyPipe, CurrencyPipe],
     }).compileComponents();