fix: budget visibility for spender DQA-1 (#4081)

Author: SahilK-027

src/app/fyle/dashboard/dashboard-budgets/dashboard-budgets.component.html

@@ -51,7 +51,6 @@
               </div>
 
               <!-- Budget info -->
-              <!-- TODO: @SahilK-027 to Humanize amount max values -->
               <div class="dashboard-budgets__item-info">
                 <div class="dashboard-budgets__item-info-container">
                   <!-- limit -->
@@ -62,7 +61,7 @@
                     <div>
                       @if (homeCurrency(); as homeCurrency) {
                         <span class="dashboard-budgets__item-info-stat-value">{{
-                          budget.amount_limit | currency: homeCurrency
+                          budget.amount_limit | humanizeCurrency: homeCurrency
                         }}</span>
                       } @else {
                         <div class="dashboard-budgets__item-info-stat-shimmer">
@@ -97,7 +96,7 @@
                     <div>
                       @if (homeCurrency(); as homeCurrency) {
                         <span class="dashboard-budgets__item-info-stat-value">{{
-                          budget.amount_spent | currency: homeCurrency
+                          budget.amount_spent | humanizeCurrency: homeCurrency
                         }}</span>
                       } @else {
                         <div class="dashboard-budgets__item-info-stat-shimmer">
@@ -116,7 +115,7 @@
                     <div>
                       @if (homeCurrency(); as homeCurrency) {
                         <span class="dashboard-budgets__item-info-stat-value">{{
-                          budget.amount_remaining | currency: homeCurrency
+                          budget.amount_remaining | humanizeCurrency: homeCurrency
                         }}</span>
                       } @else {
                         <div class="dashboard-budgets__item-info-stat-shimmer">

src/app/fyle/dashboard/dashboard-budgets/dashboard-budgets.component.scss

@@ -1,4 +1,3 @@
-// TODO: @SahilK-027 to fix this scss as per figma design
 @use '../../../../theme/colors.scss';
 
 .dashboard-budgets {

src/app/fyle/dashboard/dashboard-budgets/dashboard-budgets.component.spec.ts

@@ -10,6 +10,7 @@ import { getTranslocoTestingModule } from 'src/app/core/testing/transloco-testin
 import { Budget } from 'src/app/core/models/budget.model';
 import { BudgetTotalUtilisationInfoModalComponent } from './budget-total-utilisation-info-modal/budget-total-utilisation-info-modal.component';
 import { cloneDeep } from 'lodash';
+import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe';
 
 describe('DashboardBudgetsComponent', () => {
   let component: DashboardBudgetsComponent;
@@ -54,6 +55,7 @@ describe('DashboardBudgetsComponent', () => {
       providers: [
         { provide: CurrencyService, useValue: currencyServiceSpy },
         { provide: ModalController, useValue: modalControllerSpy },
+        FyCurrencyPipe,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],

src/app/fyle/dashboard/dashboard-budgets/dashboard-budgets.component.ts

@@ -10,6 +10,7 @@ import { CurrencyService } from 'src/app/core/services/currency.service';
 import { Subject, takeUntil } from 'rxjs';
 import { MatIcon } from '@angular/material/icon';
 import { BudgetTotalUtilisationInfoModalComponent } from './budget-total-utilisation-info-modal/budget-total-utilisation-info-modal.component';
+import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe';
 
 // install Swiper modules
 SwiperCore.use([Pagination]);
@@ -18,7 +19,7 @@ SwiperCore.use([Pagination]);
   selector: 'app-dashboard-budgets',
   templateUrl: './dashboard-budgets.component.html',
   styleUrls: ['./dashboard-budgets.component.scss'],
-  imports: [TranslocoPipe, SwiperModule, IonSkeletonText, CommonModule, MatIcon],
+  imports: [TranslocoPipe, SwiperModule, IonSkeletonText, CommonModule, MatIcon, HumanizeCurrencyPipe],
 })
 export class DashboardBudgetsComponent implements OnDestroy {
   readonly budgets = input<Budget[]>([]);

src/app/fyle/dashboard/dashboard.page.html

@@ -102,7 +102,7 @@
       }
       <app-stats></app-stats>
       @if (areDashboardTabsEnabled()) {
-        <ion-segment class="dashboard--segment" (ionChange)="onTabChange($event)" [value]="activeTabState()">
+        <ion-segment mode="md" class="dashboard--segment" (ionChange)="onTabChange($event)" [value]="activeTabState()">
           <ion-segment-button value="cards" class="text-capitalize"
             >{{ 'dashboard.cardsTab' | transloco }} ({{ cardCount() }})</ion-segment-button
           >

src/app/fyle/dashboard/dashboard.page.scss

@@ -31,6 +31,52 @@
     }
   }
 
+  &--segment {
+    ion-segment-button {
+      --indicator-color: transparent;
+      --color: #{colors.$black-light};
+      --color-checked: #{colors.$black-light};
+      --background: transparent;
+      --background-checked: transparent;
+      --border-radius: 0;
+      --border-width: 0;
+      --border-style: none;
+      --padding-start: 0;
+      --padding-end: 0;
+      --margin-start: 0;
+      --margin-end: 16px;
+      min-width: auto;
+      font-size: 14px;
+      font-weight: 500;
+      text-transform: capitalize;
+
+      &::part(indicator-background) {
+        background: transparent;
+      }
+
+      &.segment-button-checked {
+        --color: #{colors.$black-light};
+        color: colors.$black-light !important;
+        margin: 0;
+        padding: 0;
+
+        &::part(indicator-background) {
+          background: transparent;
+        }
+      }
+
+      &.segment-button-checked::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: colors.$brand-primary;
+      }
+    }
+  }
+
   &--greetings-text {
     padding: 8px 16px 4px 16px;
     font-size: 18px;
@@ -109,24 +155,31 @@
       0% {
         transform: rotate(0deg);
       }
+
       10% {
         transform: rotate(14deg);
       }
+
       20% {
         transform: rotate(-8deg);
       }
+
       30% {
         transform: rotate(14deg);
       }
+
       40% {
         transform: rotate(-4deg);
       }
+
       50% {
         transform: rotate(10deg);
       }
+
       60% {
         transform: rotate(0deg);
       }
+
       100% {
         transform: rotate(0deg);
       }