feat: changing order of stats to expenses->reports (#2981)

fylein · May 13, 2024 · 6131537 · 6131537
1 parent b5c9e2e
commit 6131537
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 34 deletions.
diff --git a/src/app/fyle/dashboard/stats/stats.component.html b/src/app/fyle/dashboard/stats/stats.component.html
@@ -1,5 +1,36 @@
 <div class="stats">
   <ion-grid class="stats--body">
+    <ion-row class="stats--expenses-stats-row" *ngIf="isConnected$ | async">
+      <ion-col class="stats--expenses-stats-col">
+        <div class="stats--header">ALL EXPENSES</div>
+      </ion-col>
+    </ion-row>
+    <ion-row *ngIf="isConnected$ | async">
+      <ion-col class="stats--report-badge-col stats--report-badge-col__left stats--report-badge-col__top" size="6">
+        <app-stat-badge
+          [currency]="homeCurrency$ | async"
+          [currencySymbol]="currencySymbol$ | async"
+          [name]="'Incomplete'"
+          [expenseState]="'DRAFT'"
+          [count]="(incompleteExpensesStats$ | async)?.count"
+          [value]="(incompleteExpensesStats$ | async)?.sum"
+          [loading]="isIncompleteExpensesStatsLoading"
+          (badgeClicked)="goToExpensesPage($event)"
+        ></app-stat-badge>
+      </ion-col>
+      <ion-col class="stats--report-badge-col stats--report-badge-col__right stats--report-badge-col__top" size="6">
+        <app-stat-badge
+          [currency]="homeCurrency$ | async"
+          [currencySymbol]="currencySymbol$ | async"
+          [name]="'Complete'"
+          [expenseState]="'COMPLETE'"
+          [count]="(unreportedExpensesStats$ | async)?.count"
+          [value]="(unreportedExpensesStats$ | async)?.sum"
+          [loading]="isUnreportedExpensesStatsLoading"
+          (badgeClicked)="goToExpensesPage($event)"
+        ></app-stat-badge>
+      </ion-col>
+    </ion-row>
     <ion-row class="stats--report-stats-row" *ngIf="isConnected$ | async">
       <ion-col class="stats--report-stats-col">
         <div class="stats--header">EXPENSE REPORTS</div>
@@ -102,38 +133,6 @@
         </ion-row>
       </ng-template>
     </ng-container>
-
-    <ion-row class="stats--expenses-stats-row" *ngIf="isConnected$ | async">
-      <ion-col class="stats--expenses-stats-col">
-        <div class="stats--header">ALL EXPENSES</div>
-      </ion-col>
-    </ion-row>
-    <ion-row *ngIf="isConnected$ | async">
-      <ion-col class="stats--report-badge-col stats--report-badge-col__left stats--report-badge-col__top" size="6">
-        <app-stat-badge
-          [currency]="homeCurrency$ | async"
-          [currencySymbol]="currencySymbol$ | async"
-          [name]="'Incomplete'"
-          [expenseState]="'DRAFT'"
-          [count]="(incompleteExpensesStats$ | async)?.count"
-          [value]="(incompleteExpensesStats$ | async)?.sum"
-          [loading]="isIncompleteExpensesStatsLoading"
-          (badgeClicked)="goToExpensesPage($event)"
-        ></app-stat-badge>
-      </ion-col>
-      <ion-col class="stats--report-badge-col stats--report-badge-col__right stats--report-badge-col__top" size="6">
-        <app-stat-badge
-          [currency]="homeCurrency$ | async"
-          [currencySymbol]="currencySymbol$ | async"
-          [name]="'Complete'"
-          [expenseState]="'COMPLETE'"
-          [count]="(unreportedExpensesStats$ | async)?.count"
-          [value]="(unreportedExpensesStats$ | async)?.sum"
-          [loading]="isUnreportedExpensesStatsLoading"
-          (badgeClicked)="goToExpensesPage($event)"
-        ></app-stat-badge>
-      </ion-col>
-    </ion-row>
   </ion-grid>
 
   <ng-container *ngIf="!(isConnected$ | async)">

diff --git a/src/app/fyle/dashboard/stats/stats.component.scss b/src/app/fyle/dashboard/stats/stats.component.scss
@@ -88,13 +88,13 @@ $ccc-bank-name: #c4cae8;
 
   &--report-stats-row {
     padding-bottom: 18px;
-    padding-top: 8px;
+    padding-top: 18px;
     --ion-grid-column-padding: 0;
   }
 
   &--expenses-stats-row {
     padding-bottom: 18px;
-    padding-top: 18px;
+    padding-top: 8px;
     --ion-grid-column-padding: 0;
   }
 }