diff --git a/src/app/core/mock-data/platform-report.data.ts b/src/app/core/mock-data/platform-report.data.ts
index 791e9c5231..f87773bb6c 100644
--- a/src/app/core/mock-data/platform-report.data.ts
+++ b/src/app/core/mock-data/platform-report.data.ts
@@ -36,16 +36,19 @@ export const platformReportData: Report = deepFreeze({
       state: ApprovalState.APPROVAL_DONE,
     },
   ],
-  created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
+  created_at: new Date('2023-07-11T16:24:01.335Z'),
   currency: 'USD',
   employee: {
+    org_name: 'Staging Loaded',
+    level: undefined,
+    mobile: '123456098',
     ach_account: {
       added: true,
       verified: null,
     },
     business_unit:
       'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-    code: null,
+    code: '101',
     department: {
       code: null,
       display_name: '0000000 / arun',
@@ -108,16 +111,22 @@ export const allReportsPaginated1: PlatformApiResponse<Report[]> = deepFreeze({
     {
       amount: 100,
       approvals: [],
+      org_name: 'Staging Loaded',
+      level: null,
+      mobile: '123456098',
       created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
       currency: 'USD',
       employee: {
+        org_name: 'Staging Loaded',
+        level: null,
+        mobile: '123456098',
         ach_account: {
           added: true,
           verified: null,
         },
         business_unit:
           'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-        code: null,
+        code: '101',
         department: {
           code: null,
           display_name: '0000000 / arun',
@@ -147,7 +156,7 @@ export const allReportsPaginated1: PlatformApiResponse<Report[]> = deepFreeze({
       last_approved_at: null,
       last_paid_at: null,
       last_resubmitted_at: null,
-      last_submitted_at: null,
+      last_submitted_at: new Date('2023-02-01T13:02:35.097839+00:00'),
       next_approver_user_ids: null,
       num_expenses: 0,
       org_id: 'orNVthTo2Zyo',
@@ -173,13 +182,16 @@ export const allReportsPaginated1: PlatformApiResponse<Report[]> = deepFreeze({
       created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
       currency: 'USD',
       employee: {
+        org_name: 'Staging Loaded',
+        level: null,
+        mobile: '123456098',
         ach_account: {
           added: true,
           verified: null,
         },
         business_unit:
           'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-        code: null,
+        code: '101',
         department: {
           code: null,
           display_name: '0000000 / arun',
@@ -261,13 +273,16 @@ export const allReportsPaginatedWithApproval: PlatformApiResponse<Report[]> = de
       created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
       currency: 'USD',
       employee: {
+        org_name: 'Staging Loaded',
+        level: null,
+        mobile: '123456098',
         ach_account: {
           added: true,
           verified: null,
         },
         business_unit:
           'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-        code: null,
+        code: '101',
         department: {
           code: null,
           display_name: '0000000 / arun',
@@ -323,13 +338,16 @@ export const allReportsPaginatedWithApproval: PlatformApiResponse<Report[]> = de
       created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
       currency: 'USD',
       employee: {
+        org_name: 'Staging Loaded',
+        level: null,
+        mobile: '123456098',
         ach_account: {
           added: true,
           verified: null,
         },
         business_unit:
           'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-        code: null,
+        code: '101',
         department: {
           code: null,
           display_name: '0000000 / arun',
@@ -392,13 +410,16 @@ export const filteredReportsData: PlatformApiResponse<Report[]> = deepFreeze({
       created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
       currency: 'USD',
       employee: {
+        org_name: 'Staging Loaded',
+        level: null,
+        mobile: '123456098',
         ach_account: {
           added: true,
           verified: null,
         },
         business_unit:
           'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-        code: null,
+        code: '101',
         department: {
           code: null,
           display_name: '0000000 / arun',
@@ -461,13 +482,16 @@ export const allReportsPaginated2: PlatformApiResponse<Report[]> = deepFreeze({
       created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
       currency: 'USD',
       employee: {
+        org_name: 'Staging Loaded',
+        level: null,
+        mobile: '123456098',
         ach_account: {
           added: true,
           verified: null,
         },
         business_unit:
           'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-        code: null,
+        code: '101',
         department: {
           code: null,
           display_name: '0000000 / arun',
@@ -523,13 +547,16 @@ export const allReportsPaginated2: PlatformApiResponse<Report[]> = deepFreeze({
       created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
       currency: 'USD',
       employee: {
+        org_name: 'Staging Loaded',
+        level: null,
+        mobile: '123456098',
         ach_account: {
           added: true,
           verified: null,
         },
         business_unit:
           'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-        code: null,
+        code: '101',
         department: {
           code: null,
           display_name: '0000000 / arun',
@@ -589,13 +616,16 @@ export const submittedReportData: Report = deepFreeze({
   created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
   currency: 'USD',
   employee: {
+    org_name: 'Staging Loaded',
+    level: null,
+    mobile: '123456098',
     ach_account: {
       added: true,
       verified: null,
     },
     business_unit:
       'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-    code: null,
+    code: '101',
     department: {
       code: null,
       display_name: '0000000 / arun',
@@ -671,13 +701,16 @@ export const submittedReportDataWithApproval: Report = deepFreeze({
   created_at: new Date('2023-07-11T06:19:28.260142+00:00'),
   currency: 'USD',
   employee: {
+    org_name: 'Staging Loaded',
+    level: null,
+    mobile: '123456098',
     ach_account: {
       added: true,
       verified: null,
     },
     business_unit:
       'A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed A very long Business Unit indeed',
-    code: null,
+    code: '101',
     department: {
       code: null,
       display_name: '0000000 / arun',
@@ -738,6 +771,14 @@ export const expectedSingleReport: Report[] = deepFreeze([allReportsPaginated1.d
 
 export const expectedReportsSinglePage: Report[] = deepFreeze([...allReportsPaginated1.data]);
 
+export const sentBackReportData: Report = deepFreeze({ ...submittedReportData, state: 'APPROVER_INQUIRY' });
+
+export const reportWithExpenses: Report = deepFreeze({
+  ...platformReportData,
+  num_expenses: 3,
+  amount: 100,
+});
+
 export const expectedReportsSinglePageWithApproval: Report[] = deepFreeze([...allReportsPaginatedWithApproval.data]);
 
 export const expectedReportsSinglePageFiltered: Report[] = deepFreeze([...filteredReportsData.data]);
diff --git a/src/app/core/models/platform/v1/level.model.ts b/src/app/core/models/platform/v1/level.model.ts
index 8507596fb0..39bd5b5d2f 100644
--- a/src/app/core/models/platform/v1/level.model.ts
+++ b/src/app/core/models/platform/v1/level.model.ts
@@ -1,11 +1,11 @@
 export interface Level {
   id: string;
-  org_id: string;
-  created_at: Date;
-  updated_at: Date;
+  org_id?: string;
+  created_at?: Date;
+  updated_at?: Date;
   name: string;
   band: string;
-  code: string;
-  description: string;
-  is_enabled: boolean;
+  code?: string;
+  description?: string;
+  is_enabled?: boolean;
 }
diff --git a/src/app/core/models/platform/v1/report.model.ts b/src/app/core/models/platform/v1/report.model.ts
index a451898605..08e5b1bc6d 100644
--- a/src/app/core/models/platform/v1/report.model.ts
+++ b/src/app/core/models/platform/v1/report.model.ts
@@ -1,9 +1,10 @@
 import { ReportApprovals } from '../report-approvals.model';
+import { Level } from './level.model';
 
 export interface Report {
   id: string;
   org_id: string;
-  created_at: Date;
+  created_at: Date | string;
   updated_at: Date;
   user_id: string;
   user: {
@@ -42,7 +43,10 @@ export interface Report {
     };
     code: string;
     org_id: string;
+    org_name: string;
     department_id: string;
+    level: Level;
+    mobile: string;
     department: {
       id: string;
       code: string;
diff --git a/src/app/core/services/report.service.spec.ts b/src/app/core/services/report.service.spec.ts
index fbdb4e3967..e8813d49bb 100644
--- a/src/app/core/services/report.service.spec.ts
+++ b/src/app/core/services/report.service.spec.ts
@@ -655,7 +655,7 @@ describe('ReportService', () => {
 
   it('updateReportPurpose(): should update the report purpose', (done) => {
     spenderPlatformV1ApiService.post.and.returnValue(of(platformReportData));
-    reportService.updateReportPurpose(reportData1).subscribe((res) => {
+    reportService.updateReportPurpose(platformReportData).subscribe((res) => {
       expect(res).toEqual(platformReportData);
       expect(spenderPlatformV1ApiService.post).toHaveBeenCalledOnceWith('/reports', {
         data: {
@@ -670,7 +670,7 @@ describe('ReportService', () => {
 
   it('approverUpdateReportPurpose(): should update the report purpose for approver', (done) => {
     approverPlatformApiService.post.and.returnValue(of(platformReportData));
-    reportService.approverUpdateReportPurpose(reportData1).subscribe((res) => {
+    reportService.approverUpdateReportPurpose(platformReportData).subscribe((res) => {
       expect(res).toEqual(platformReportData);
       expect(approverPlatformApiService.post).toHaveBeenCalledOnceWith('/reports', {
         data: {
diff --git a/src/app/core/services/report.service.ts b/src/app/core/services/report.service.ts
index cd295af2d8..037b2c8840 100644
--- a/src/app/core/services/report.service.ts
+++ b/src/app/core/services/report.service.ts
@@ -210,12 +210,12 @@ export class ReportService {
   @CacheBuster({
     cacheBusterNotifier: reportsCacheBuster$,
   })
-  updateReportPurpose(erpt: ExtendedReport): Observable<Report> {
+  updateReportPurpose(report: Report): Observable<Report> {
     const params = {
       data: {
-        id: erpt.rp_id,
-        source: erpt.rp_source,
-        purpose: erpt.rp_purpose,
+        id: report.id,
+        source: report.source,
+        purpose: report.purpose,
       },
     };
     return this.spenderPlatformV1ApiService.post('/reports', params);
@@ -579,12 +579,12 @@ export class ReportService {
     );
   }
 
-  approverUpdateReportPurpose(erpt: ExtendedReport): Observable<Report> {
+  approverUpdateReportPurpose(report: Report): Observable<Report> {
     const params: { data: Pick<Report, 'id' | 'source' | 'purpose'> } = {
       data: {
-        id: erpt.rp_id,
-        source: erpt.rp_source,
-        purpose: erpt.rp_purpose,
+        id: report.id,
+        source: report.source,
+        purpose: report.purpose,
       },
     };
     return this.approverPlatformApiService.post('/reports', params);
diff --git a/src/app/fyle/my-view-report/my-view-report.page.html b/src/app/fyle/my-view-report/my-view-report.page.html
index abea74ae2e..076261f63f 100644
--- a/src/app/fyle/my-view-report/my-view-report.page.html
+++ b/src/app/fyle/my-view-report/my-view-report.page.html
@@ -8,8 +8,8 @@
     </ion-buttons>
     <ion-title mode="md" class="page-title"> View Report </ion-title>
     <ion-buttons mode="md" slot="end">
-      <ng-container *ngIf="erpt$|async as erpt">
-        <ng-container *ngIf="erpt.rp_num_transactions">
+      <ng-container *ngIf="report$|async as report">
+        <ng-container *ngIf="report.num_expenses">
           <ion-button class="view-reports--btn-container__btn" (click)="shareReport()">
             <mat-icon svgIcon="share"></mat-icon>
           </ion-button>
@@ -25,7 +25,7 @@
 </ion-header>
 
 <ion-content class="view-reports--container">
-  <div class="view-reports--body full-height" *ngIf="erpt$|async as erpt">
+  <div class="view-reports--body full-height" *ngIf="report$|async as report">
     <div class="view-reports--wrapper">
       <div class="view-reports--card">
         <ion-grid>
@@ -33,9 +33,9 @@
             <ion-col size="8">
               <div class="view-reports--purpose-amount-block">
                 <div class="view-reports--purpose-amount-block__purpose">
-                  {{erpt.rp_purpose | ellipsis: 35}}
+                  {{report.purpose | ellipsis: 35}}
                   <ion-icon
-                    *ngIf="(canEdit$|async) && erpt && (erpt.rp_state === 'DRAFT' || erpt.rp_state === 'APPROVER_INQUIRY' || erpt.rp_state === 'APPROVER_PENDING')"
+                    *ngIf="(canEdit$|async) && report && (report.state === 'DRAFT' || report.state === 'APPROVER_INQUIRY' || report.state === 'APPROVER_PENDING')"
                     [src]="'../../../../assets/svg/edit.svg'"
                     slot="icon-only"
                     (click)="editReportName()"
@@ -48,7 +48,7 @@
               <div class="view-reports--amount ion-text-nowrap">
                 <span class="view-reports--purpose-amount-block__currency">{{ reportCurrencySymbol }}</span>
                 <span class="view-reports--purpose-amount-block__amount">
-                  {{ erpt.rp_amount || 0 | humanizeCurrency: erpt.rp_currency:true }}
+                  {{ report.amount || 0 | humanizeCurrency: report.currency:true }}
                 </span>
               </div>
             </ion-col>
@@ -58,8 +58,8 @@
             <ion-col size="5"> </ion-col>
             <ion-col size="7">
               <ng-container *ngIf="(simplifyReportsSettings$ | async) as simplifyReportsSettings">
-                <div class="view-reports--report-state-pill state-pill state-{{erpt.rp_state | reportState}}">
-                  {{erpt.rp_state | reportState : simplifyReportsSettings.enabled | snakeCaseToSpaceCase}}
+                <div class="view-reports--report-state-pill state-pill state-{{report.state | reportState}}">
+                  {{report.state | reportState : simplifyReportsSettings.enabled | snakeCaseToSpaceCase}}
                 </div>
               </ng-container>
             </ion-col>
@@ -71,13 +71,13 @@
                 <div class="view-reports--submitted-date">
                   <div>
                     <span class="view-reports--submitted-date__text"
-                      >{{erpt.rp_state === "DRAFT" ? "Created on : " : "Submitted on : " }}
+                      >{{report.state === "DRAFT" ? "Created on : " : "Submitted on : " }}
                     </span>
-                    <span *ngIf="erpt.rp_state === 'DRAFT'" class="view-reports--submitted-date__date"
-                      >{{erpt.rp_created_at | date: 'MMM dd, YYYY'}}</span
+                    <span *ngIf="report.state === 'DRAFT'" class="view-reports--submitted-date__date"
+                      >{{report.created_at | date: 'MMM dd, YYYY'}}</span
                     >
-                    <span *ngIf="erpt.rp_state !== 'DRAFT'" class="view-reports--submitted-date__date"
-                      >{{erpt.rp_submitted_at | date: 'MMM dd, YYYY'}}</span
+                    <span *ngIf="report.state !== 'DRAFT'" class="view-reports--submitted-date__date"
+                      >{{report.last_submitted_at | date: 'MMM dd, YYYY'}}</span
                     >
                   </div>
                 </div>
@@ -94,24 +94,18 @@
       </div>
 
       <div class="view-reports--approvers-wrapper">
-        <div
-          class="view-reports--approvers-section"
-          *ngIf="(erpt.rp_state !== 'DRAFT') && (reportApprovals$|async) as reportApprovals"
-        >
-          <div *ngIf="reportApprovals.length > 0" class="view-reports--approval-state-block">
+        <div class="view-reports--approvers-section" *ngIf="(report.state !== 'DRAFT')">
+          <div *ngIf="report.approvals.length > 0" class="view-reports--approval-state-block">
             <div class="view-reports--approvers">Approvers</div>
-            <div *ngFor="let ap of reportApprovals">
+            <div *ngFor="let approver of report.approvals">
               <div class="view-reports--approvers-list">
-                <div>{{ ap.approver_name }}</div>
+                <div>{{ approver.approver_user.full_name }}</div>
                 <div class="view-reports--approver-state-section">
-                  <div class="view-reports--approver-state-section__date" *ngIf="ap.state === 'APPROVAL_DONE'">
-                    <span>{{ap.updated_at | date: 'MMM dd, YYYY'}}</span>
-                  </div>
                   <div
-                    class="view-reports--approver-state-pill view-reports--approver-state-pill__{{ap.state | lowercase}}"
+                    class="view-reports--approver-state-pill view-reports--approver-state-pill__{{approver.state | lowercase}}"
                   ></div>
                   <span
-                    >{{ ap.state === 'APPROVAL_DONE' ? 'Approved' : (ap.state | titlecase |
+                    >{{ approver.state === 'APPROVAL_DONE' ? 'Approved' : (approver.state | titlecase |
                     snakeCaseToSpaceCase)}}</span
                   >
                 </div>
@@ -153,7 +147,7 @@
         <!-- Expenses section -->
         <ng-container *ngIf="segmentValue === Segment.EXPENSES">
           <app-fy-loading-screen *ngIf="isExpensesLoading"></app-fy-loading-screen>
-          <div *ngIf="!isExpensesLoading && erpt.rp_num_transactions > 0">
+          <div *ngIf="!isExpensesLoading && report.num_expenses > 0">
             <div class="view-reports--divider"></div>
             <div class="view-reports--expenses-card-block">
               <div *ngFor="let expense of expenses$|async as list; let i = index;">
@@ -173,7 +167,7 @@
               <ion-spinner name="crescent"></ion-spinner>
             </ng-template>
           </div>
-          <div class="view-reports--expenses-zero-state" *ngIf="!isExpensesLoading && erpt.rp_num_transactions === 0">
+          <div class="view-reports--expenses-zero-state" *ngIf="!isExpensesLoading && report.num_expenses === 0">
             <div class="text-center">
               <img src="../../../assets/images/zero-states/expenses.png" alt="No expense in this report" />
               <div class="view-reports--zero-state-header">Looks like this report is empty.</div>
@@ -308,7 +302,7 @@
 </ion-content>
 
 <ion-footer
-  *ngIf="segmentValue !== Segment.COMMENTS && (((erpt$|async)?.rp_state === 'DRAFT' && (erpt$|async)?.rp_num_transactions !== 0) || (canResubmitReport$ | async))"
+  *ngIf="segmentValue !== Segment.COMMENTS && (((report$|async)?.state === 'DRAFT' && (report$|async)?.num_expenses !== 0) || (canResubmitReport$ | async))"
 >
   <ion-toolbar class="cta-footer fy-footer-cta-container" mode="md">
     <div class="view-reports--cta-container">
@@ -331,7 +325,7 @@
       </ion-button>
       <ion-button
         class="fy-footer-cta fy-footer-cta--primary"
-        *ngIf="(erpt$|async)?.rp_state === 'DRAFT' && (erpt$|async)?.rp_num_transactions !== 0"
+        *ngIf="(report$|async)?.state === 'DRAFT' && (report$|async)?.num_expenses !== 0"
         (click)="submitReport()"
       >
         Submit Report
@@ -342,7 +336,7 @@
 
 <ion-footer
   class="view-reports--add-expense-footer"
-  *ngIf="segmentValue === Segment.EXPENSES && ((erpt$|async)?.rp_state === 'APPROVER_PENDING') && unreportedExpenses"
+  *ngIf="segmentValue === Segment.EXPENSES && ((report$|async)?.state === 'APPROVER_PENDING') && unreportedExpenses"
 >
   <div class="view-reports--add-expense-footer__block">
     <div class="view-reports--add-expense-footer__cta" (click)="showAddExpensesToReportModal()">
diff --git a/src/app/fyle/my-view-report/my-view-report.page.spec.ts b/src/app/fyle/my-view-report/my-view-report.page.spec.ts
index 5483771a80..dab66994ec 100644
--- a/src/app/fyle/my-view-report/my-view-report.page.spec.ts
+++ b/src/app/fyle/my-view-report/my-view-report.page.spec.ts
@@ -15,7 +15,7 @@ import { approversData1 } from 'src/app/core/mock-data/approver.data';
 import { apiEouRes } from 'src/app/core/mock-data/extended-org-user.data';
 import { fyModalProperties, shareReportModalProperties } from 'src/app/core/mock-data/model-properties.data';
 import { apiReportActions } from 'src/app/core/mock-data/report-actions.data';
-import { expectedAllReports, newReportParam } from 'src/app/core/mock-data/report.data';
+import { expectedAllReports } from 'src/app/core/mock-data/report.data';
 import { ExpenseView } from 'src/app/core/models/expense-view.enum';
 import { AuthService } from 'src/app/core/services/auth.service';
 import { LoaderService } from 'src/app/core/services/loader.service';
@@ -41,7 +41,12 @@ import { SnakeCaseToSpaceCase } from 'src/app/shared/pipes/snake-case-to-space-c
 import { NetworkService } from '../../core/services/network.service';
 import { TrackingService } from '../../core/services/tracking.service';
 import { txnStatusData } from 'src/app/core/mock-data/transaction-status.data';
-import { platformReportData } from 'src/app/core/mock-data/platform-report.data';
+import {
+  expectedReportsSinglePage,
+  paidReportData,
+  platformReportData,
+  sentBackReportData,
+} from 'src/app/core/mock-data/platform-report.data';
 import {
   expenseData,
   expenseResponseData2,
@@ -56,6 +61,7 @@ import { AddExpensesToReportComponent } from './add-expenses-to-report/add-expen
 import { ShareReportComponent } from './share-report/share-report.component';
 import { EditReportNamePopoverComponent } from './edit-report-name-popover/edit-report-name-popover.component';
 import { SpenderReportsService } from 'src/app/core/services/platform/v1/spender/reports.service';
+import { expectedSentBackResponseSingularReport } from 'src/app/core/mock-data/report-stats.data';
 
 describe('MyViewReportPage', () => {
   let component: MyViewReportPage;
@@ -81,7 +87,6 @@ describe('MyViewReportPage', () => {
   beforeEach(waitForAsync(() => {
     const reportServiceSpy = jasmine.createSpyObj('ReportService', [
       'getReport',
-      'getApproversByReportId',
       'actions',
       'updateReportDetails',
       'updateReportPurpose',
@@ -118,7 +123,7 @@ describe('MyViewReportPage', () => {
     const statusServiceSpy = jasmine.createSpyObj('StatusService', ['find', 'createStatusMap', 'post']);
     const refinerServiceSpy = jasmine.createSpyObj('RefinerService', ['startSurvey']);
     const orgSettingsServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']);
-    const spenderReportsServiceSpy = jasmine.createSpyObj('SpenderReportsService', ['addExpenses']);
+    const spenderReportsServiceSpy = jasmine.createSpyObj('SpenderReportsService', ['addExpenses', 'getReportById']);
 
     TestBed.configureTestingModule({
       declarations: [
@@ -233,7 +238,7 @@ describe('MyViewReportPage', () => {
     orgSettingsService = TestBed.inject(OrgSettingsService) as jasmine.SpyObj<OrgSettingsService>;
     spenderReportsService = TestBed.inject(SpenderReportsService) as jasmine.SpyObj<SpenderReportsService>;
 
-    component.erpt$ = of(newReportParam);
+    component.report$ = of(platformReportData);
     component.canEdit$ = of(true);
     component.canDelete$ = of(true);
 
@@ -303,15 +308,14 @@ describe('MyViewReportPage', () => {
 
   describe('ionViewWillEnter():', () => {
     it('should load report and report status', fakeAsync(() => {
-      const erpt = cloneDeep({ ...expectedAllReports[0], rp_state: 'APPROVER_INQUIRY' });
+      const report = cloneDeep(sentBackReportData);
       spyOn(component, 'setupNetworkWatcher');
       loaderService.showLoader.and.resolveTo();
-      reportService.getReport.and.returnValue(of(erpt));
+      spenderReportsService.getReportById.and.returnValue(of(sentBackReportData));
       authService.getEou.and.resolveTo(apiEouRes);
       const mockStatusData = cloneDeep(newEstatusData1);
       statusService.find.and.returnValue(of(mockStatusData));
       statusService.createStatusMap.and.returnValue(systemCommentsWithSt);
-      reportService.getApproversByReportId.and.returnValue(of(approversData1));
       expensesService.getReportExpenses.and.returnValue(of(expenseResponseData2));
       reportService.actions.and.returnValue(of(apiReportActions));
       expensesService.getAllExpenses.and.returnValue(of([expenseData, expenseData]));
@@ -323,13 +327,13 @@ describe('MyViewReportPage', () => {
 
       expect(component.setupNetworkWatcher).toHaveBeenCalledTimes(1);
       expect(loaderService.showLoader).toHaveBeenCalledTimes(1);
-      expect(reportService.getReport).toHaveBeenCalledOnceWith(component.reportId);
+      expect(spenderReportsService.getReportById).toHaveBeenCalledOnceWith(component.reportId);
       expect(loaderService.hideLoader).toHaveBeenCalledTimes(1);
       expect(authService.getEou).toHaveBeenCalledTimes(1);
       expect(statusService.find).toHaveBeenCalledOnceWith(component.objectType, component.reportId);
 
-      component.erpt$.subscribe((res) => {
-        expect(res).toEqual(erpt);
+      component.report$.subscribe((res) => {
+        expect(res).toEqual(report);
       });
 
       component.estatuses$.subscribe((res) => {
@@ -352,11 +356,6 @@ describe('MyViewReportPage', () => {
 
       expect(component.segmentValue).toEqual(ReportPageSegment.COMMENTS);
 
-      expect(reportService.getApproversByReportId).toHaveBeenCalledOnceWith(component.reportId);
-      component.reportApprovals$.subscribe((res) => {
-        expect(res).toEqual(approversData1);
-      });
-
       expect(expensesService.getReportExpenses).toHaveBeenCalledOnceWith(component.reportId);
 
       expect(reportService.actions).toHaveBeenCalledOnceWith(component.reportId);
@@ -400,12 +399,11 @@ describe('MyViewReportPage', () => {
       spyOn(component, 'getSimplifyReportSettings').and.returnValue(true);
       component.objectType = 'transactions';
       loaderService.showLoader.and.resolveTo();
-      reportService.getReport.and.returnValue(of(null));
       authService.getEou.and.resolveTo(apiEouRes);
       const mockStatusData = cloneDeep(newEstatusData1);
       statusService.find.and.returnValue(of(mockStatusData));
       statusService.createStatusMap.and.returnValue(systemCommentsWithSt);
-      reportService.getApproversByReportId.and.returnValue(of(approversData1));
+      spenderReportsService.getReportById.and.returnValue(of(null));
       expensesService.getReportExpenses.and.returnValue(of(expenseResponseData2));
       reportService.actions.and.returnValue(of(apiReportActions));
       expensesService.getAllExpenses.and.returnValue(of([expenseData, expenseData]));
@@ -417,12 +415,12 @@ describe('MyViewReportPage', () => {
 
       expect(component.setupNetworkWatcher).toHaveBeenCalledTimes(1);
       expect(loaderService.showLoader).toHaveBeenCalledTimes(1);
-      expect(reportService.getReport).toHaveBeenCalledOnceWith(component.reportId);
+      expect(spenderReportsService.getReportById).toHaveBeenCalledOnceWith(component.reportId);
       expect(loaderService.hideLoader).toHaveBeenCalledTimes(1);
       expect(authService.getEou).toHaveBeenCalledTimes(1);
       expect(statusService.find).toHaveBeenCalledOnceWith(component.objectType, component.reportId);
 
-      component.erpt$.subscribe((res) => {
+      component.report$.subscribe((res) => {
         expect(res).toBeNull();
       });
 
@@ -445,11 +443,6 @@ describe('MyViewReportPage', () => {
 
       expect(component.segmentValue).toEqual(ReportPageSegment.EXPENSES);
 
-      expect(reportService.getApproversByReportId).toHaveBeenCalledOnceWith(component.reportId);
-      component.reportApprovals$.subscribe((res) => {
-        expect(res).toEqual(approversData1);
-      });
-
       expect(expensesService.getReportExpenses).toHaveBeenCalledOnceWith(component.reportId);
 
       expect(reportService.actions).toHaveBeenCalledOnceWith(component.reportId);
@@ -488,20 +481,20 @@ describe('MyViewReportPage', () => {
   });
 
   it('updateReportName(): should update report name', () => {
-    const mockErpt = cloneDeep(newReportParam);
-    component.erpt$ = of(mockErpt);
+    const mockReport = cloneDeep(platformReportData);
+    component.report$ = of(mockReport);
     fixture.detectChanges();
     reportService.updateReportPurpose.and.returnValue(of(platformReportData));
     spyOn(component.loadReportDetails$, 'next');
 
     component.updateReportName('#3:  Jul 2023 - Office expense');
-    expect(reportService.updateReportPurpose).toHaveBeenCalledOnceWith(mockErpt);
+    expect(reportService.updateReportPurpose).toHaveBeenCalledOnceWith(mockReport);
     expect(component.loadReportDetails$.next).toHaveBeenCalledTimes(1);
   });
 
   describe('editReportName(): ', () => {
     it('should edit report name', fakeAsync(() => {
-      component.erpt$ = of(cloneDeep({ ...expectedAllReports[0], rp_state: 'DRAFT' }));
+      component.report$ = of(cloneDeep({ ...platformReportData, state: 'DRAFT' }));
       component.canEdit$ = of(true);
       fixture.detectChanges();
 
@@ -519,7 +512,7 @@ describe('MyViewReportPage', () => {
       expect(popoverController.create).toHaveBeenCalledOnceWith({
         component: EditReportNamePopoverComponent,
         componentProps: {
-          reportName: expectedAllReports[0].rp_purpose,
+          reportName: platformReportData.purpose,
         },
         cssClass: 'fy-dialog-popover',
       });
@@ -527,7 +520,7 @@ describe('MyViewReportPage', () => {
     }));
 
     it('should not edit report name if data does not contain name', fakeAsync(() => {
-      component.erpt$ = of(cloneDeep({ ...expectedAllReports[0], rp_state: 'DRAFT' }));
+      component.report$ = of(cloneDeep({ ...expectedReportsSinglePage[0], state: 'DRAFT' }));
       component.canEdit$ = of(true);
       fixture.detectChanges();
 
@@ -545,7 +538,7 @@ describe('MyViewReportPage', () => {
       expect(popoverController.create).toHaveBeenCalledOnceWith({
         component: EditReportNamePopoverComponent,
         componentProps: {
-          reportName: expectedAllReports[0].rp_purpose,
+          reportName: expectedReportsSinglePage[0].purpose,
         },
         cssClass: 'fy-dialog-popover',
       });
@@ -554,19 +547,19 @@ describe('MyViewReportPage', () => {
   });
 
   it('deleteReport(): should delete report', () => {
-    component.erpt$ = of(expectedAllReports[0]);
+    component.report$ = of(expectedReportsSinglePage[0]);
     fixture.detectChanges();
     spyOn(component, 'deleteReportPopup').and.returnValue(null);
 
     component.deleteReport();
 
-    expect(component.deleteReportPopup).toHaveBeenCalledOnceWith(expectedAllReports[0]);
+    expect(component.deleteReportPopup).toHaveBeenCalledOnceWith(expectedReportsSinglePage[0]);
   });
 
   describe('getDeleteReportPopupParams(): ', () => {
     it('should get delete report popup props', (done) => {
       reportService.delete.and.returnValue(of(undefined));
-      const props = component.getDeleteReportPopupParams(expectedAllReports[0]);
+      const props = component.getDeleteReportPopupParams(paidReportData);
       props.componentProps.deleteMethod().subscribe(() => {
         expect(reportService.delete).toHaveBeenCalledOnceWith(component.reportId);
         expect(trackingService.deleteReport).toHaveBeenCalledTimes(1);
@@ -577,7 +570,7 @@ describe('MyViewReportPage', () => {
     it('should return null info message if number of txns is 0', (done) => {
       reportService.delete.and.returnValue(of(undefined));
       const props = component.getDeleteReportPopupParams(
-        cloneDeep({ ...expectedAllReports[0], rp_num_transactions: 0, rp_state: 'DRAFT' })
+        cloneDeep({ ...expectedReportsSinglePage[0], num_expenses: 0, state: 'DRAFT' })
       );
       expect(props.componentProps.infoMessage).toBeNull();
       props.componentProps.deleteMethod().subscribe(() => {
@@ -595,19 +588,17 @@ describe('MyViewReportPage', () => {
 
     popoverController.create.and.resolveTo(deleteReportPopoverSpy);
 
-    component.deleteReportPopup(expectedAllReports[0]);
+    component.deleteReportPopup(platformReportData);
     tick(2000);
 
     expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'my_reports']);
-    expect(component.getDeleteReportPopupParams).toHaveBeenCalledOnceWith(expectedAllReports[0]);
-    expect(popoverController.create).toHaveBeenCalledOnceWith(
-      component.getDeleteReportPopupParams(expectedAllReports[0])
-    );
+    expect(component.getDeleteReportPopupParams).toHaveBeenCalledOnceWith(platformReportData);
+    expect(popoverController.create).toHaveBeenCalledOnceWith(component.getDeleteReportPopupParams(platformReportData));
   }));
 
   it('resubmitReport(): should resubmit report', () => {
     component.segmentValue = ReportPageSegment.EXPENSES;
-    component.erpt$ = of(cloneDeep({ ...expectedAllReports[0], rp_state: 'DRAFT', rp_num_transactions: 3 }));
+    component.report$ = of(cloneDeep({ ...platformReportData, state: 'DRAFT', num_expenses: 3 }));
     component.canResubmitReport$ = of(true);
     fixture.detectChanges();
 
@@ -643,7 +634,7 @@ describe('MyViewReportPage', () => {
 
   it('submitReport(): should submit report', () => {
     component.segmentValue = ReportPageSegment.EXPENSES;
-    component.erpt$ = of(cloneDeep({ ...expectedAllReports[0], rp_state: 'DRAFT', rp_num_transactions: 3 }));
+    component.report$ = of(cloneDeep({ ...platformReportData, state: 'DRAFT', num_expenses: 3 }));
     fixture.detectChanges();
 
     const properties = {
@@ -706,7 +697,7 @@ describe('MyViewReportPage', () => {
 
     it('should go to edit expense page if canEdit is true', () => {
       component.canEdit$ = of(true);
-      component.erpt$ = of(expectedAllReports[0]);
+      component.report$ = of(platformReportData);
 
       fixture.detectChanges();
       component.goToTransaction({
@@ -721,7 +712,7 @@ describe('MyViewReportPage', () => {
         {
           id: expenseData.id,
           navigate_back: true,
-          remove_from_report: expectedAllReports[0].rp_num_transactions > 1,
+          remove_from_report: platformReportData.num_expenses > 1,
         },
       ]);
     });
@@ -751,7 +742,7 @@ describe('MyViewReportPage', () => {
 
     it('should go to edit mileage page if category is mileage and canEdit is true', () => {
       component.canEdit$ = of(true);
-      component.erpt$ = of(expectedAllReports[0]);
+      component.report$ = of(platformReportData);
 
       fixture.detectChanges();
       component.goToTransaction({
@@ -766,7 +757,7 @@ describe('MyViewReportPage', () => {
         {
           id: mileageExpense.id,
           navigate_back: true,
-          remove_from_report: expectedAllReports[0].rp_num_transactions > 1,
+          remove_from_report: platformReportData.num_expenses > 1,
         },
       ]);
     });
@@ -796,7 +787,7 @@ describe('MyViewReportPage', () => {
 
     it('should go to edit per diem page if category is per diem and canEdit is true', () => {
       component.canEdit$ = of(true);
-      component.erpt$ = of(expectedAllReports[0]);
+      component.report$ = of(platformReportData);
 
       fixture.detectChanges();
       component.goToTransaction({
@@ -811,7 +802,7 @@ describe('MyViewReportPage', () => {
         {
           id: perDiemExpense.id,
           navigate_back: true,
-          remove_from_report: expectedAllReports[0].rp_num_transactions > 1,
+          remove_from_report: platformReportData.num_expenses > 1,
         },
       ]);
     });
@@ -874,7 +865,7 @@ describe('MyViewReportPage', () => {
     expect(modalController.create).toHaveBeenCalledOnceWith({
       component: FyViewReportInfoComponent,
       componentProps: {
-        erpt$: component.erpt$,
+        report$: component.report$,
         expenses$: component.expenses$,
         view: ExpenseView.individual,
       },
@@ -935,7 +926,7 @@ describe('MyViewReportPage', () => {
 
   it('addExpense(): should navigate to expense page', () => {
     component.segmentValue = ReportPageSegment.EXPENSES;
-    component.erpt$ = of(cloneDeep({ ...expectedAllReports[0], rp_state: 'DRAFT' }));
+    component.report$ = of(cloneDeep({ ...platformReportData, state: 'DRAFT' }));
     fixture.detectChanges();
 
     const addExpenseButton = getElementBySelector(fixture, '.view-reports--add-more-container') as HTMLElement;
@@ -954,7 +945,7 @@ describe('MyViewReportPage', () => {
     const expense2 = { ...expenseData, id: 'txcSFe6efB62' };
     it('should show modal to add expense to report', fakeAsync(() => {
       component.segmentValue = ReportPageSegment.EXPENSES;
-      component.erpt$ = of(cloneDeep({ ...expectedAllReports[0], rp_state: 'DRAFT', rp_num_transactions: 3 }));
+      component.report$ = of(cloneDeep({ ...platformReportData, state: 'DRAFT', num_expenses: 3 }));
       component.unreportedExpenses = [expense1, expense2];
       fixture.detectChanges();
 
@@ -991,7 +982,7 @@ describe('MyViewReportPage', () => {
 
     it('should not add txns to report if there is no data', fakeAsync(() => {
       component.segmentValue = ReportPageSegment.EXPENSES;
-      component.erpt$ = of(cloneDeep({ ...expectedAllReports[0], rp_state: 'DRAFT', rp_num_transactions: 3 }));
+      component.report$ = of(cloneDeep({ ...platformReportData, state: 'DRAFT', num_expenses: 3 }));
       component.unreportedExpenses = [expense1, expense2];
       fixture.detectChanges();
 
diff --git a/src/app/fyle/my-view-report/my-view-report.page.ts b/src/app/fyle/my-view-report/my-view-report.page.ts
index 9de76546d2..9310731c9a 100644
--- a/src/app/fyle/my-view-report/my-view-report.page.ts
+++ b/src/app/fyle/my-view-report/my-view-report.page.ts
@@ -1,5 +1,4 @@
 import { Component, ElementRef, EventEmitter, ViewChild } from '@angular/core';
-import { ExtendedReport } from 'src/app/core/models/report.model';
 import { Observable, from, noop, concat, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { ReportService } from 'src/app/core/services/report.service';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -26,7 +25,6 @@ import { ExpenseView } from 'src/app/core/models/expense-view.enum';
 import { OrgSettingsService } from 'src/app/core/services/org-settings.service';
 import { ReportPageSegment } from 'src/app/core/enums/report-page-segment.enum';
 import { OrgSettings } from 'src/app/core/models/org-settings.model';
-import { Approver } from 'src/app/core/models/v1/approver.model';
 import { ExtendedOrgUser } from 'src/app/core/models/extended-org-user.model';
 import { ExpensesService } from 'src/app/core/services/platform/v1/spender/expenses.service';
 import { AddExpensesToReportComponent } from './add-expenses-to-report/add-expenses-to-report.component';
@@ -35,6 +33,8 @@ import { ShareReportComponent } from './share-report/share-report.component';
 import { PlatformHandlerService } from 'src/app/core/services/platform-handler.service';
 import { BackButtonActionPriority } from 'src/app/core/models/back-button-action-priority.enum';
 import { SpenderReportsService } from 'src/app/core/services/platform/v1/spender/reports.service';
+import { Report, ReportState } from 'src/app/core/models/platform/v1/report.model';
+
 @Component({
   selector: 'app-my-view-report',
   templateUrl: './my-view-report.page.html',
@@ -45,12 +45,10 @@ export class MyViewReportPage {
 
   @ViewChild(IonContent, { static: false }) content: IonContent;
 
-  erpt$: Observable<ExtendedReport>;
+  report$: Observable<Report>;
 
   expenses$: Observable<Expense[]>;
 
-  reportApprovals$: Observable<Approver[]>;
-
   canEdit$: Observable<boolean>;
 
   canDelete$: Observable<boolean>;
@@ -167,10 +165,10 @@ export class MyViewReportPage {
 
     this.segmentValue = ReportPageSegment.EXPENSES;
 
-    this.erpt$ = this.loadReportDetails$.pipe(
+    this.report$ = this.loadReportDetails$.pipe(
       tap(() => this.loaderService.showLoader()),
       switchMap(() =>
-        this.reportService.getReport(this.reportId).pipe(finalize(() => this.loaderService.hideLoader()))
+        this.spenderReportsService.getReportById(this.reportId).pipe(finalize(() => this.loaderService.hideLoader()))
       ),
       shareReplay(1)
     );
@@ -223,19 +221,15 @@ export class MyViewReportPage {
       map((res) => res.filter((estatus) => estatus.st_org_user_id !== 'SYSTEM').length)
     );
 
-    this.erpt$.pipe(take(1)).subscribe((erpt) => {
-      this.reportCurrencySymbol = getCurrencySymbol(erpt?.rp_currency, 'wide');
+    this.report$.pipe(take(1)).subscribe((report) => {
+      this.reportCurrencySymbol = getCurrencySymbol(report?.currency, 'wide');
 
       //For sent back reports, show the comments section instead of expenses when opening the report
-      if (erpt?.rp_state === 'APPROVER_INQUIRY') {
+      if (report?.state === 'APPROVER_INQUIRY') {
         this.segmentValue = ReportPageSegment.COMMENTS;
       }
     });
 
-    this.reportApprovals$ = this.reportService
-      .getApproversByReportId(this.reportId)
-      .pipe(map((reportApprovals) => reportApprovals));
-
     this.expenses$ = this.loadReportTxns$.pipe(
       tap(() => (this.isExpensesLoading = true)),
       switchMap(() =>
@@ -266,7 +260,7 @@ export class MyViewReportPage {
       .pipe(
         map(
           (orgSetting) =>
-            orgSetting?.corporate_credit_card_settings?.enabled && orgSetting?.pending_cct_expense_restriction?.enabled
+            orgSetting?.corporate_credit_card_settings?.enabled && orgSetting.pending_cct_expense_restriction?.enabled
         ),
         switchMap((filterPendingTxn: boolean) => {
           if (filterPendingTxn) {
@@ -316,12 +310,12 @@ export class MyViewReportPage {
   }
 
   updateReportName(reportName: string): void {
-    this.erpt$
+    this.report$
       .pipe(
         take(1),
-        switchMap((erpt) => {
-          erpt.rp_purpose = reportName;
-          return this.reportService.updateReportPurpose(erpt);
+        switchMap((report) => {
+          report.purpose = reportName;
+          return this.reportService.updateReportPurpose(report);
         })
       )
       .subscribe(() => {
@@ -333,14 +327,14 @@ export class MyViewReportPage {
 
   editReportName(): void {
     this.reportNameChangeStartTime = new Date().getTime();
-    this.erpt$
+    this.report$
       .pipe(take(1))
       .pipe(
-        switchMap((erpt) => {
+        switchMap((report) => {
           const editReportNamePopover = this.popoverController.create({
             component: EditReportNamePopoverComponent,
             componentProps: {
-              reportName: erpt.rp_purpose,
+              reportName: report.purpose,
             },
             cssClass: 'fy-dialog-popover',
           });
@@ -348,7 +342,7 @@ export class MyViewReportPage {
         }),
         tap((editReportNamePopover) => editReportNamePopover.present()),
         switchMap(
-          (editReportNamePopover) => editReportNamePopover?.onWillDismiss() as Promise<{ data: { reportName: string } }>
+          (editReportNamePopover) => editReportNamePopover.onWillDismiss() as Promise<{ data: { reportName: string } }>
         )
       )
       .subscribe((editReportNamePopoverDetails) => {
@@ -360,10 +354,10 @@ export class MyViewReportPage {
   }
 
   deleteReport(): void {
-    this.erpt$.pipe(take(1)).subscribe((res) => this.deleteReportPopup(res));
+    this.report$.pipe(take(1)).subscribe((res) => this.deleteReportPopup(res));
   }
 
-  getDeleteReportPopupParams(erpt: ExtendedReport): {
+  getDeleteReportPopupParams(report: Report): {
     component: typeof FyDeleteDialogComponent;
     cssClass: string;
     backdropDismiss: boolean;
@@ -382,7 +376,7 @@ export class MyViewReportPage {
         header: 'Delete Report',
         body: 'Are you sure you want to delete this report?',
         infoMessage:
-          erpt.rp_state === 'DRAFT' && erpt.rp_num_transactions === 0
+          report.state === ReportState.DRAFT && report.num_expenses === 0
             ? null
             : 'Deleting the report will not delete any of the expenses.',
         deleteMethod: (): Observable<void> =>
@@ -391,12 +385,12 @@ export class MyViewReportPage {
     };
   }
 
-  async deleteReportPopup(erpt: ExtendedReport): Promise<void> {
-    const deleteReportPopover = await this.popoverController.create(this.getDeleteReportPopupParams(erpt));
+  async deleteReportPopup(report: Report): Promise<void> {
+    const deleteReportPopover = await this.popoverController.create(this.getDeleteReportPopupParams(report));
 
     await deleteReportPopover.present();
 
-    const { data } = (await deleteReportPopover?.onDidDismiss()) as { data: { status: string } };
+    const { data } = (await deleteReportPopover.onDidDismiss()) as { data: { status: string } };
 
     if (data && data.status === 'success') {
       this.router.navigate(['/', 'enterprise', 'my_reports']);
@@ -463,13 +457,13 @@ export class MyViewReportPage {
       const route = this.getTransactionRoute(category, canEdit);
 
       if (canEdit) {
-        this.erpt$.pipe(take(1)).subscribe((erpt) =>
+        this.report$.pipe(take(1)).subscribe((report) =>
           this.router.navigate([
             route,
             {
               id: expense.id,
               navigate_back: true,
-              remove_from_report: erpt.rp_num_transactions > 1,
+              remove_from_report: report.num_expenses > 1,
             },
           ])
         );
@@ -500,7 +494,7 @@ export class MyViewReportPage {
 
     await shareReportModal.present();
 
-    const { data } = (await shareReportModal?.onWillDismiss()) as { data: { email: string } };
+    const { data } = (await shareReportModal.onWillDismiss()) as { data: { email: string } };
 
     if (data && data.email) {
       const params = {
@@ -522,7 +516,7 @@ export class MyViewReportPage {
     const viewInfoModal = await this.modalController.create({
       component: FyViewReportInfoComponent,
       componentProps: {
-        erpt$: this.erpt$,
+        report$: this.report$,
         expenses$: this.expenses$,
         view: ExpenseView.individual,
       },
@@ -530,7 +524,7 @@ export class MyViewReportPage {
     });
 
     await viewInfoModal.present();
-    await viewInfoModal?.onWillDismiss();
+    await viewInfoModal.onWillDismiss();
 
     this.trackingService.clickViewReportInfo({ view: ExpenseView.individual });
   }
@@ -583,7 +577,7 @@ export class MyViewReportPage {
         tap((addExpensesToReportModal) => addExpensesToReportModal.present()),
         switchMap(
           (addExpensesToReportModal) =>
-            addExpensesToReportModal?.onWillDismiss() as Promise<{ data: { selectedExpenseIds: string[] } }>
+            addExpensesToReportModal.onWillDismiss() as Promise<{ data: { selectedExpenseIds: string[] } }>
         )
       )
       .subscribe((addExpensesToReportModalDetails) => {
diff --git a/src/app/fyle/view-team-report/view-team-report.page.html b/src/app/fyle/view-team-report/view-team-report.page.html
index 36799e44dc..5ec1d78ab6 100644
--- a/src/app/fyle/view-team-report/view-team-report.page.html
+++ b/src/app/fyle/view-team-report/view-team-report.page.html
@@ -21,7 +21,7 @@
 </ion-header>
 
 <ion-content class="view-reports--container">
-  <div class="view-reports--body" *ngIf="erpt$|async as erpt">
+  <div class="view-reports--body" *ngIf="report$|async as report">
     <div>
       <div class="view-reports--card">
         <ion-grid>
@@ -29,9 +29,9 @@
             <ion-col size="8">
               <div class="view-reports--purpose-amount-block">
                 <div class="view-reports--purpose-amount-block__purpose">
-                  {{erpt.rp_purpose | ellipsis: 35}}
+                  {{report.purpose | ellipsis: 35}}
                   <ion-icon
-                    *ngIf="(canEdit$|async) && erpt && (erpt.rp_state === 'APPROVER_PENDING')"
+                    *ngIf="(canEdit$|async) && report && (report.state === 'APPROVER_PENDING')"
                     [src]="'../../../../assets/svg/edit.svg'"
                     slot="icon-only"
                     (click)="editReportName()"
@@ -44,7 +44,7 @@
               <div class="view-reports--amount">
                 <span class="view-reports--purpose-amount-block__currency">{{ reportCurrencySymbol }}</span>
                 <span class="view-reports--purpose-amount-block__amount">
-                  {{ erpt.rp_amount || 0 | humanizeCurrency: erpt.rp_currency:true }}
+                  {{ report.amount || 0 | humanizeCurrency: report.currency:true }}
                 </span>
               </div>
             </ion-col>
@@ -54,8 +54,8 @@
             <ion-col size="5"> </ion-col>
             <ion-col size="7">
               <ng-container *ngIf="(simplifyReportsSettings$ | async) as simplifyReportsSettings">
-                <div class="view-reports--report-state-pill state-pill state-{{erpt.rp_state | reportState}}">
-                  {{erpt.rp_state | reportState : simplifyReportsSettings.enabled | snakeCaseToSpaceCase}}
+                <div class="view-reports--report-state-pill state-pill state-{{report.state | reportState}}">
+                  {{report.state | reportState : simplifyReportsSettings.enabled | snakeCaseToSpaceCase}}
                 </div>
               </ng-container>
             </ion-col>
@@ -66,7 +66,9 @@
               <div class="view-reports--employee-name">
                 <div>
                   <span class="view-reports--employee-name__text">Employee : </span>
-                  <span class="view-reports--employee-name__name">{{erpt.us_full_name | ellipsis: 30}}</span>
+                  <span class="view-reports--employee-name__name"
+                    >{{report.employee.user.full_name | ellipsis: 30}}</span
+                  >
                 </div>
               </div>
             </ion-col>
@@ -79,7 +81,7 @@
                   <div>
                     <span class="view-reports--submitted-date__text">Submitted on: </span>
                     <span class="view-reports--submitted-date__date"
-                      >{{erpt.rp_submitted_at | date: 'MMM dd, YYYY'}}</span
+                      >{{report.last_submitted_at | date: 'MMM dd, YYYY'}}</span
                     >
                   </div>
                 </div>
@@ -95,37 +97,32 @@
         </ion-grid>
       </div>
 
-      <div
-        class="view-reports--approvers-section"
-        *ngIf="(erpt.rp_state !== 'DRAFT') && (reportApprovals$|async) as reportApprovals"
-      >
-        <div *ngIf="reportApprovals.length > 0" class="view-reports--approval-state-block">
+      <div class="view-reports--approvers-section" *ngIf="(report.state !== 'DRAFT')">
+        <div *ngIf="approvals.length > 0" class="view-reports--approval-state-block">
           <div class="view-reports--approvers-title-block">
             <div class="view-reports--approvers">Approvers</div>
             <div *ngIf="actions$|async as actions">
               <app-fy-approver
                 *ngIf="actions.can_add_approver"
-                [approverEmailsList]="getApproverEmails(reportApprovals)"
-                [id]="erpt.rp_id"
-                [ownerEmail]="erpt.us_email"
+                [approverEmailsList]="getApproverEmails(approvals)"
+                [id]="report.id"
+                [ownerEmail]="report.employee.user.email"
                 [type]="'TEAM_REPORT'"
                 (notify)="onUpdateApprover($event)"
               >
               </app-fy-approver>
             </div>
           </div>
-          <div *ngFor="let ap of reportApprovals">
+          <div *ngFor="let approver of approvals">
             <div class="view-reports--approvers-list">
-              <div>{{ ap.approver_name }}</div>
+              <div>{{ approver.approver_user.full_name }}</div>
               <div class="view-reports--approver-state-section">
-                <span *ngIf="ap.state === 'APPROVAL_DONE'" class="view-reports--approved-date">
-                  {{ ap.updated_at | date: 'MMM dd, YYYY'}}
-                </span>
                 <div
-                  class="view-reports--approver-state-pill view-reports--approver-state-pill__{{ap.state | lowercase}}"
+                  class="view-reports--approver-state-pill view-reports--approver-state-pill__{{approver.state | lowercase}}"
                 ></div>
                 <span
-                  >{{ ap.state === 'APPROVAL_DONE' ? 'Approved' : (ap.state | titlecase | snakeCaseToSpaceCase)}}</span
+                  >{{ approver.state === 'APPROVAL_DONE' ? 'Approved' : (approver.state | titlecase |
+                  snakeCaseToSpaceCase)}}</span
                 >
               </div>
             </div>
@@ -157,7 +154,7 @@
         <!-- Expenses Section -->
         <div *ngIf="isExpensesView">
           <app-fy-loading-screen *ngIf="isExpensesLoading"></app-fy-loading-screen>
-          <div *ngIf="!isExpensesLoading && erpt.rp_num_transactions > 0">
+          <div *ngIf="!isExpensesLoading && report.num_expenses > 0">
             <div class="view-reports--divider"></div>
             <div class="view-reports-expense-card-block">
               <div *ngFor="let expense of expenses$|async as list; let i = index;">
@@ -177,7 +174,7 @@
               <ion-spinner name="crescent"></ion-spinner>
             </ng-template>
           </div>
-          <div class="view-reports--expenses-zero-state" *ngIf="!isExpensesLoading && erpt.rp_num_transactions === 0">
+          <div class="view-reports--expenses-zero-state" *ngIf="!isExpensesLoading && report.num_expenses === 0">
             <div class="text-center">
               <img src="../../../assets/images/zero-states/expenses.png" alt="No expense in this report" />
             </div>
diff --git a/src/app/fyle/view-team-report/view-team-report.page.spec.ts b/src/app/fyle/view-team-report/view-team-report.page.spec.ts
index 0772b9eb9f..3ce1b089ad 100644
--- a/src/app/fyle/view-team-report/view-team-report.page.spec.ts
+++ b/src/app/fyle/view-team-report/view-team-report.page.spec.ts
@@ -5,13 +5,18 @@ import { FormsModule } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
-import { IonicModule, ModalController, PopoverController } from '@ionic/angular';
+import {
+  IonicModule,
+  ModalController,
+  PopoverController,
+  SegmentChangeEventDetail,
+  SegmentCustomEvent,
+} from '@ionic/angular';
 import { finalize, of } from 'rxjs';
 import { click, getElementBySelector, getTextContent } from 'src/app/core/dom-helpers';
 import { approversData1, approversData4, approversData5, approversData6 } from 'src/app/core/mock-data/approver.data';
 import { apiEouRes } from 'src/app/core/mock-data/extended-org-user.data';
 import { apiReportActions } from 'src/app/core/mock-data/report-actions.data';
-import { expectedAllReports, expectedReportSingleResponse, newReportParam } from 'src/app/core/mock-data/report.data';
 import { ExpenseView } from 'src/app/core/models/expense-view.enum';
 import { AuthService } from 'src/app/core/services/auth.service';
 import { LoaderService } from 'src/app/core/services/loader.service';
@@ -43,7 +48,12 @@ import { txnStatusData } from 'src/app/core/mock-data/transaction-status.data';
 import { pdfExportData1, pdfExportData2 } from 'src/app/core/mock-data/pdf-export.data';
 import { EditReportNamePopoverComponent } from '../my-view-report/edit-report-name-popover/edit-report-name-popover.component';
 import { cloneDeep } from 'lodash';
-import { platformReportData } from 'src/app/core/mock-data/platform-report.data';
+import {
+  allReportsPaginatedWithApproval,
+  expectedReportsSinglePage,
+  platformReportData,
+  reportWithExpenses,
+} from 'src/app/core/mock-data/platform-report.data';
 import {
   expenseData,
   expenseResponseData,
@@ -53,6 +63,7 @@ import {
 } from 'src/app/core/mock-data/platform/v1/expense.data';
 import { ExpensesService as ApproverExpensesService } from 'src/app/core/services/platform/v1/approver/expenses.service';
 import { FyViewReportInfoComponent } from 'src/app/shared/components/fy-view-report-info/fy-view-report-info.component';
+import { ApproverReportsService } from 'src/app/core/services/platform/v1/approver/reports.service';
 
 describe('ViewTeamReportPageV2', () => {
   let component: ViewTeamReportPage;
@@ -75,6 +86,7 @@ describe('ViewTeamReportPageV2', () => {
   let statusService: jasmine.SpyObj<StatusService>;
   let humanizeCurrency: jasmine.SpyObj<HumanizeCurrencyPipe>;
   let orgSettingsService: jasmine.SpyObj<OrgSettingsService>;
+  let approverReportsService: jasmine.SpyObj<ApproverReportsService>;
 
   beforeEach(waitForAsync(() => {
     const approverExpensesServiceSpy = jasmine.createSpyObj('ApproverExpensesService', [
@@ -86,7 +98,6 @@ describe('ViewTeamReportPageV2', () => {
       'getReport',
       'getTeamReport',
       'getExports',
-      'getApproversByReportId',
       'actions',
       'delete',
       'approve',
@@ -114,6 +125,7 @@ describe('ViewTeamReportPageV2', () => {
     const statusServiceSpy = jasmine.createSpyObj('StatusService', ['find', 'createStatusMap', 'post']);
     const humanizeCurrencySpy = jasmine.createSpyObj('HumanizeCurrencyPipe', ['transform']);
     const orgSettingsServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']);
+    const approverReportsServiceSpy = jasmine.createSpyObj('ApproverReportsService', ['getReportById']);
 
     TestBed.configureTestingModule({
       declarations: [ViewTeamReportPage, EllipsisPipe, HumanizeCurrencyPipe],
@@ -200,6 +212,10 @@ describe('ViewTeamReportPageV2', () => {
           provide: OrgSettingsService,
           useValue: orgSettingsServiceSpy,
         },
+        {
+          provide: ApproverReportsService,
+          useValue: approverReportsServiceSpy,
+        },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
@@ -224,6 +240,7 @@ describe('ViewTeamReportPageV2', () => {
     statusService = TestBed.inject(StatusService) as jasmine.SpyObj<StatusService>;
     humanizeCurrency = TestBed.inject(HumanizeCurrencyPipe) as jasmine.SpyObj<HumanizeCurrencyPipe>;
     orgSettingsService = TestBed.inject(OrgSettingsService) as jasmine.SpyObj<OrgSettingsService>;
+    approverReportsService = TestBed.inject(ApproverReportsService) as jasmine.SpyObj<ApproverReportsService>;
 
     fixture.detectChanges();
   }));
@@ -241,7 +258,7 @@ describe('ViewTeamReportPageV2', () => {
 
   it('loadReports(): should load reports', (done) => {
     loaderService.showLoader.and.resolveTo();
-    reportService.getReport.and.returnValue(of(expectedAllReports[0]));
+    approverReportsService.getReportById.and.returnValue(of(expectedReportsSinglePage[0]));
     loaderService.hideLoader.and.resolveTo();
 
     component
@@ -252,9 +269,9 @@ describe('ViewTeamReportPageV2', () => {
         })
       )
       .subscribe((res) => {
-        expect(res).toEqual(expectedAllReports[0]);
+        expect(res).toEqual(expectedReportsSinglePage[0]);
         expect(loaderService.showLoader).toHaveBeenCalledTimes(1);
-        expect(reportService.getReport).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
+        expect(approverReportsService.getReportById).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
         done();
       });
   });
@@ -288,7 +305,10 @@ describe('ViewTeamReportPageV2', () => {
     });
 
     it('should return undefined if approval settings not present', () => {
-      const result = component.getReportClosureSettings({ ...orgSettingsData, getReportClosureSettings: undefined });
+      const result = component.getReportClosureSettings({
+        ...orgSettingsData,
+        simplified_report_closure_settings: undefined,
+      });
       expect(result).toBeUndefined();
     });
 
@@ -300,26 +320,24 @@ describe('ViewTeamReportPageV2', () => {
 
   describe('ionViewWillEnter():', () => {
     it('should initialize the variables and load reports and statuses', fakeAsync(() => {
+      spyOn(component, 'loadReports').and.returnValue(of(expectedReportsSinglePage[0]));
       spyOn(component, 'setupNetworkWatcher');
       spyOn(component, 'getApprovalSettings').and.returnValue(true);
       spyOn(component, 'getReportClosureSettings').and.returnValue(true);
-      spyOn(component, 'isUserActiveInCurrentSeqApprovalQueue').and.returnValue(null);
       loaderService.showLoader.and.resolveTo();
-      spyOn(component, 'loadReports').and.returnValue(of(expectedAllReports[0]));
       loaderService.hideLoader.and.resolveTo();
       authService.getEou.and.resolveTo(apiEouRes);
       const mockStatus = cloneDeep(newEstatusData1);
       statusService.find.and.returnValue(of(mockStatus));
       orgSettingsService.get.and.returnValue(of(orgSettingsData));
       statusService.createStatusMap.and.returnValue(systemCommentsWithSt);
-      reportService.getTeamReport.and.returnValue(of(expectedAllReports[0]));
+      approverReportsService.getReportById.and.returnValues(of(expectedReportsSinglePage[0]));
       const mockPdfExportData = cloneDeep(pdfExportData1);
       reportService.getExports.and.returnValue(
         of({
           results: mockPdfExportData,
         })
       );
-      reportService.getApproversByReportId.and.returnValue(of(approversData1));
       approverExpensesService.getReportExpenses.and.returnValue(of(expenseResponseData2));
       reportService.actions.and.returnValue(of(apiReportActions));
 
@@ -347,15 +365,16 @@ describe('ViewTeamReportPageV2', () => {
         });
       });
 
-      expect(reportService.getTeamReport).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
+      expect(component.getApprovalSettings).toHaveBeenCalledOnceWith(orgSettingsData);
+      expect(approverReportsService.getReportById).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
       expect(statusService.createStatusMap).toHaveBeenCalledOnceWith(component.systemComments, component.type);
 
       component.totalCommentsCount$.subscribe((res) => {
         expect(res).toEqual(3);
       });
 
-      component.erpt$.subscribe((res) => {
-        expect(res).toEqual(expectedAllReports[0]);
+      component.report$.subscribe((res) => {
+        expect(res).toEqual(expectedReportsSinglePage[0]);
       });
 
       expect(component.eou).toEqual(apiEouRes);
@@ -369,7 +388,6 @@ describe('ViewTeamReportPageV2', () => {
       expect(component.userComments).toEqual([expectedNewStatusData[2], expectedNewStatusData[3]]);
 
       expect(reportService.getExports).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
-      expect(reportService.getApproversByReportId).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
 
       expect(approverExpensesService.getReportExpenses).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
 
@@ -381,8 +399,8 @@ describe('ViewTeamReportPageV2', () => {
         expect(res).toEqual(['ajain@fyle.in', 'arjun.m@fyle.in']);
       });
 
-      component.reportApprovals$.subscribe((res) => {
-        expect(res).toEqual([approversData1[0]]);
+      component.report$.subscribe((res) => {
+        expect(res).toEqual(expectedReportsSinglePage[0]);
       });
 
       component.actions$.subscribe((res) => {
@@ -402,8 +420,6 @@ describe('ViewTeamReportPageV2', () => {
       });
 
       expect(reportService.actions).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
-      expect(component.getApprovalSettings).toHaveBeenCalledOnceWith(orgSettingsData);
-      expect(component.isUserActiveInCurrentSeqApprovalQueue).toHaveBeenCalledOnceWith(apiEouRes, [approversData1[0]]);
 
       expect(component.reportExpensesIds).toEqual(['txcSFe6efB6R', 'txcSFe6efB6R']);
       expect(component.isSequentialApprovalEnabled).toBeTrue();
@@ -416,23 +432,21 @@ describe('ViewTeamReportPageV2', () => {
       spyOn(component, 'setupNetworkWatcher');
       spyOn(component, 'getApprovalSettings').and.returnValue(false);
       spyOn(component, 'getReportClosureSettings').and.returnValue(true);
-      spyOn(component, 'isUserActiveInCurrentSeqApprovalQueue').and.returnValue(null);
       loaderService.showLoader.and.resolveTo();
-      spyOn(component, 'loadReports').and.returnValue(of(expectedAllReports[0]));
+      spyOn(component, 'loadReports').and.returnValue(of(expectedReportsSinglePage[0]));
       loaderService.hideLoader.and.resolveTo();
       authService.getEou.and.resolveTo(apiEouRes);
       const mockStatus = cloneDeep(newEstatusData1);
       statusService.find.and.returnValue(of(mockStatus));
       orgSettingsService.get.and.returnValue(of(orgSettingsData));
       statusService.createStatusMap.and.returnValue(systemCommentsWithSt);
-      reportService.getTeamReport.and.returnValue(of(expectedAllReports[0]));
+      approverReportsService.getReportById.and.returnValue(of(expectedReportsSinglePage[0]));
       const mockPdfExportData = cloneDeep(pdfExportData2);
       reportService.getExports.and.returnValue(
         of({
           results: mockPdfExportData,
         })
       );
-      reportService.getApproversByReportId.and.returnValue(of(approversData1));
       approverExpensesService.getReportExpenses.and.returnValue(of(expenseResponseData2));
       reportService.actions.and.returnValue(of(apiReportActions));
       fixture.detectChanges();
@@ -461,15 +475,15 @@ describe('ViewTeamReportPageV2', () => {
         });
       });
 
-      expect(reportService.getTeamReport).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
+      expect(approverReportsService.getReportById).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
       expect(statusService.createStatusMap).toHaveBeenCalledOnceWith(component.systemComments, component.type);
 
       component.totalCommentsCount$.subscribe((res) => {
         expect(res).toEqual(3);
       });
 
-      component.erpt$.subscribe((res) => {
-        expect(res).toEqual(expectedAllReports[0]);
+      component.report$.subscribe((res) => {
+        expect(res).toEqual(expectedReportsSinglePage[0]);
       });
 
       expect(component.systemComments).toEqual(systemComments1);
@@ -481,7 +495,6 @@ describe('ViewTeamReportPageV2', () => {
       expect(component.userComments).toEqual([expectedNewStatusData[2], expectedNewStatusData[3]]);
 
       expect(reportService.getExports).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
-      expect(reportService.getApproversByReportId).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
 
       expect(approverExpensesService.getReportExpenses).toHaveBeenCalledOnceWith(activatedRoute.snapshot.params.id);
 
@@ -493,10 +506,6 @@ describe('ViewTeamReportPageV2', () => {
         expect(res).toEqual(['arjun.m@fyle.in', 'ajain@fyle.in']);
       });
 
-      component.reportApprovals$.subscribe((res) => {
-        expect(approversData1[0]);
-      });
-
       component.actions$.subscribe((res) => {
         expect(res).toEqual(apiReportActions);
       });
@@ -534,9 +543,9 @@ describe('ViewTeamReportPageV2', () => {
   });
 
   it('getApproverEmails(): should get approver emails', () => {
-    const result = component.getApproverEmails(approversData1);
+    const result = component.getApproverEmails(allReportsPaginatedWithApproval.data[0].approvals);
 
-    expect(result).toEqual(['ashutosh.m@fyle.in', '123@fye.in', 'chethan.m+90@fyle.in']);
+    expect(result).toEqual(['aditya.b@fyle.in', 'aastha.b@fyle.in']);
   });
 
   it('toggleTooltip(): should toggle tooltip', () => {
@@ -547,32 +556,6 @@ describe('ViewTeamReportPageV2', () => {
     expect(component.canShowTooltip).toBeTrue();
   });
 
-  describe('isUserActiveInCurrentSeqApprovalQueue(): ', () => {
-    it('should check whether the user is active', () => {
-      const result = component.isUserActiveInCurrentSeqApprovalQueue(apiEouRes, approversData4);
-
-      expect(result).toBeFalse();
-    });
-
-    it('should return false if no approvers match', () => {
-      const result = component.isUserActiveInCurrentSeqApprovalQueue(apiEouRes, []);
-
-      expect(result).toBeFalse();
-    });
-
-    it('should return whethere the user is active after comparing ranks', () => {
-      const result = component.isUserActiveInCurrentSeqApprovalQueue(apiEouRes, approversData5);
-
-      expect(result).toBeTrue();
-    });
-
-    it("should return false when approver's rank less than minimum rank", () => {
-      const result = component.isUserActiveInCurrentSeqApprovalQueue(apiEouRes, approversData6);
-
-      expect(result).toBeFalse();
-    });
-  });
-
   it('deleteReport(): should delete report', async () => {
     popupService.showPopup.and.resolveTo('primary');
     loaderService.showLoader.and.resolveTo();
@@ -615,7 +598,7 @@ describe('ViewTeamReportPageV2', () => {
       reportService.approve.and.returnValue(of(undefined));
       refinerService.startSurvey.and.returnValue(null);
 
-      component.erpt$ = of(expectedReportSingleResponse);
+      component.report$ = of(reportWithExpenses);
       component.expenses$ = of(expenseResponseData);
       fixture.detectChanges();
 
@@ -639,11 +622,11 @@ describe('ViewTeamReportPageV2', () => {
         cssClass: 'pop-up-in-center',
       });
       expect(humanizeCurrency.transform).toHaveBeenCalledOnceWith(
-        expectedReportSingleResponse.rp_amount,
-        expectedReportSingleResponse.rp_currency,
+        reportWithExpenses.amount,
+        reportWithExpenses.currency,
         false
       );
-      expect(reportService.approve).toHaveBeenCalledOnceWith(expectedReportSingleResponse.rp_id);
+      expect(reportService.approve).toHaveBeenCalledOnceWith(platformReportData.id);
       expect(refinerService.startSurvey).toHaveBeenCalledOnceWith({ actionName: 'Approve Report' });
       expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'team_reports']);
     });
@@ -841,7 +824,7 @@ describe('ViewTeamReportPageV2', () => {
     expect(modalController.create).toHaveBeenCalledOnceWith({
       component: FyViewReportInfoComponent,
       componentProps: {
-        erpt$: component.erpt$,
+        report$: component.report$,
         expenses$: component.expenses$,
         view: ExpenseView.team,
       },
@@ -959,17 +942,17 @@ describe('ViewTeamReportPageV2', () => {
 
   it('should show report information correctly', () => {
     spyOn(component, 'openViewReportInfoModal');
-    component.erpt$ = of(expectedAllReports[0]);
+    component.report$ = of(expectedReportsSinglePage[0]);
     fixture.detectChanges();
 
     expect(getTextContent(getElementBySelector(fixture, '.view-reports--employee-name__name'))).toEqual(
-      expectedAllReports[0].us_full_name
+      expectedReportsSinglePage[0].employee.user.full_name
     );
     expect(getTextContent(getElementBySelector(fixture, '.view-reports--submitted-date__date'))).toEqual(
       'Feb 01, 2023'
     );
     expect(getTextContent(getElementBySelector(fixture, '.view-reports--purpose-amount-block__amount'))).toEqual(
-      '0.00'
+      '100.00'
     );
 
     const openButton = getElementBySelector(fixture, '.view-reports--view-info') as HTMLElement;
@@ -979,20 +962,20 @@ describe('ViewTeamReportPageV2', () => {
   });
 
   it('updateReportName(): should update report name', () => {
-    const mockErpt = cloneDeep(newReportParam);
-    component.erpt$ = of(mockErpt);
+    const mockReport = cloneDeep(platformReportData);
+    component.report$ = of(mockReport);
     fixture.detectChanges();
     reportService.approverUpdateReportPurpose.and.returnValue(of(platformReportData));
     spyOn(component.loadReportDetails$, 'next');
 
     component.updateReportName('#3:  Jul 2023 - Office expense');
-    expect(reportService.approverUpdateReportPurpose).toHaveBeenCalledOnceWith(mockErpt);
+    expect(reportService.approverUpdateReportPurpose).toHaveBeenCalledOnceWith(mockReport);
     expect(component.loadReportDetails$.next).toHaveBeenCalledTimes(1);
   });
 
   describe('editReportName(): ', () => {
     beforeEach(() => {
-      component.erpt$ = of(cloneDeep({ ...expectedAllReports[0] }));
+      component.report$ = of(cloneDeep({ ...expectedReportsSinglePage[0] }));
       spyOn(component, 'updateReportName').and.returnValue(null);
     });
 
@@ -1007,7 +990,7 @@ describe('ViewTeamReportPageV2', () => {
       expect(popoverController.create).toHaveBeenCalledOnceWith({
         component: EditReportNamePopoverComponent,
         componentProps: {
-          reportName: expectedAllReports[0].rp_purpose,
+          reportName: expectedReportsSinglePage[0].purpose,
         },
         cssClass: 'fy-dialog-popover',
       });
@@ -1025,7 +1008,7 @@ describe('ViewTeamReportPageV2', () => {
       expect(popoverController.create).toHaveBeenCalledOnceWith({
         component: EditReportNamePopoverComponent,
         componentProps: {
-          reportName: expectedAllReports[0].rp_purpose,
+          reportName: expectedReportsSinglePage[0].purpose,
         },
         cssClass: 'fy-dialog-popover',
       });
diff --git a/src/app/fyle/view-team-report/view-team-report.page.ts b/src/app/fyle/view-team-report/view-team-report.page.ts
index 89096b83a8..43866f9da8 100644
--- a/src/app/fyle/view-team-report/view-team-report.page.ts
+++ b/src/app/fyle/view-team-report/view-team-report.page.ts
@@ -1,6 +1,5 @@
 import { Component, ElementRef, EventEmitter, ViewChild } from '@angular/core';
 import { Observable, from, Subject, concat, forkJoin, BehaviorSubject } from 'rxjs';
-import { ExtendedReport } from 'src/app/core/models/report.model';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ReportService } from 'src/app/core/services/report.service';
 import { AuthService } from 'src/app/core/services/auth.service';
@@ -24,7 +23,6 @@ import { ExtendedStatus } from 'src/app/core/models/extended_status.model';
 import { PopupAlertComponent } from 'src/app/shared/components/popup-alert/popup-alert.component';
 import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe';
 import { ExtendedOrgUser } from 'src/app/core/models/extended-org-user.model';
-import { Approver } from 'src/app/core/models/v1/approver.model';
 import { OrgSettingsService } from 'src/app/core/services/org-settings.service';
 import { PdfExport } from 'src/app/core/models/pdf-exports.model';
 import { EditReportNamePopoverComponent } from '../my-view-report/edit-report-name-popover/edit-report-name-popover.component';
@@ -32,6 +30,11 @@ import { ExpensesService } from 'src/app/core/services/platform/v1/approver/expe
 import { Expense } from 'src/app/core/models/platform/v1/expense.model';
 import { ShareReportComponent } from './share-report/share-report.component';
 import { FyViewReportInfoComponent } from 'src/app/shared/components/fy-view-report-info/fy-view-report-info.component';
+import { ApproverReportsService } from 'src/app/core/services/platform/v1/approver/reports.service';
+import { Report } from 'src/app/core/models/platform/v1/report.model';
+import { ReportActions } from 'src/app/core/models/report-actions.model';
+import { OrgSettings } from 'src/app/core/models/org-settings.model';
+import { ApprovalState, ReportApprovals } from 'src/app/core/models/platform/report-approvals.model';
 @Component({
   selector: 'app-view-team-report',
   templateUrl: './view-team-report.page.html',
@@ -42,17 +45,15 @@ export class ViewTeamReportPage {
 
   @ViewChild(IonContent, { static: false }) content: IonContent;
 
-  erpt$: Observable<ExtendedReport>;
+  report$: Observable<Report>;
 
   expenses$: Observable<Expense[]>;
 
-  sharedWith$: Observable<any[]>;
-
-  reportApprovals$: Observable<any>;
+  sharedWith$: Observable<string[]>;
 
   refreshApprovals$ = new Subject();
 
-  actions$: Observable<any>;
+  actions$: Observable<ReportActions>;
 
   hideAllExpenses = true;
 
@@ -92,7 +93,7 @@ export class ViewTeamReportPage {
 
   systemEstatuses: ExtendedStatus[];
 
-  userComments: any;
+  userComments: ExtendedStatus[];
 
   totalCommentsCount$: Observable<number>;
 
@@ -100,11 +101,11 @@ export class ViewTeamReportPage {
 
   objectType = 'reports';
 
-  objectId = this.activatedRoute.snapshot.params.id;
+  objectId = this.activatedRoute.snapshot.params.id as string;
 
   isCommentAdded: boolean;
 
-  expensesAmountSum$: Observable<any>;
+  expensesAmountSum$: Observable<number>;
 
   reportExpensesIds: string[];
 
@@ -130,6 +131,8 @@ export class ViewTeamReportPage {
 
   timeSpentOnEditingReportName: number;
 
+  approvals: ReportApprovals[];
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private reportService: ReportService,
@@ -148,14 +151,15 @@ export class ViewTeamReportPage {
     private refinerService: RefinerService,
     private statusService: StatusService,
     private humanizeCurrency: HumanizeCurrencyPipe,
-    private orgSettingsService: OrgSettingsService
+    private orgSettingsService: OrgSettingsService,
+    private approverReportsService: ApproverReportsService
   ) {}
 
-  ionViewWillLeave() {
+  ionViewWillLeave(): void {
     this.onPageExit.next(null);
   }
 
-  setupNetworkWatcher() {
+  setupNetworkWatcher(): void {
     const networkWatcherEmitter = new EventEmitter<boolean>();
     this.networkService.connectivityWatcher(networkWatcherEmitter);
     this.isConnected$ = concat(this.networkService.isOnline(), networkWatcherEmitter.asObservable()).pipe(
@@ -170,37 +174,37 @@ export class ViewTeamReportPage {
     });
   }
 
-  getApproverEmails(reportApprovals) {
-    return reportApprovals.map((approver) => approver.approver_email);
+  getApproverEmails(reportApprovals: ReportApprovals[]): string[] {
+    return reportApprovals.map((approver) => approver.approver_user.email);
   }
 
-  loadReports(): Observable<ExtendedReport> {
+  loadReports(): Observable<Report> {
     return this.loadReportDetails$.pipe(
       tap(() => this.loaderService.showLoader()),
       switchMap(() =>
-        this.reportService
-          .getReport(this.activatedRoute.snapshot.params.id)
+        this.approverReportsService
+          .getReportById(this.activatedRoute.snapshot.params.id as string)
           .pipe(finalize(() => this.loaderService.hideLoader()))
       ),
       shareReplay(1)
     );
   }
 
-  getApprovalSettings(orgSettings) {
+  getApprovalSettings(orgSettings: OrgSettings): boolean {
     return orgSettings?.approval_settings?.enable_sequential_approvers;
   }
 
-  getReportClosureSettings(orgSettings) {
+  getReportClosureSettings(orgSettings: OrgSettings): boolean {
     return orgSettings?.simplified_report_closure_settings?.enabled;
   }
 
-  ionViewWillEnter() {
+  ionViewWillEnter(): void {
     this.isExpensesLoading = true;
     this.setupNetworkWatcher();
 
-    this.navigateBack = this.activatedRoute.snapshot.params.navigate_back;
+    this.navigateBack = this.activatedRoute.snapshot.params.navigate_back as boolean;
 
-    this.erpt$ = this.loadReports();
+    this.report$ = this.loadReports();
     this.eou$ = from(this.authService.getEou());
 
     this.eou$.subscribe((eou) => (this.eou = eou));
@@ -229,10 +233,6 @@ export class ViewTeamReportPage {
     );
 
     this.estatuses$.subscribe((estatuses) => {
-      const reversalStatus = estatuses.filter(
-        (status) => status.st_comment.indexOf('created') > -1 && status.st_comment.indexOf('reversal') > -1
-      );
-
       this.systemComments = estatuses.filter((status) => ['SYSTEM', 'POLICY'].indexOf(status.st_org_user_id) > -1);
 
       this.type =
@@ -259,30 +259,30 @@ export class ViewTeamReportPage {
       map((res) => res.filter((estatus) => estatus.st_org_user_id !== 'SYSTEM').length)
     );
 
-    this.erpt$ = this.refreshApprovals$.pipe(
+    this.report$ = this.refreshApprovals$.pipe(
       switchMap(() =>
         from(this.loaderService.showLoader()).pipe(
-          switchMap(() => this.reportService.getTeamReport(this.activatedRoute.snapshot.params.id))
+          switchMap(() => this.approverReportsService.getReportById(this.activatedRoute.snapshot.params.id as string))
         )
       ),
       shareReplay(1),
       finalize(() => from(this.loaderService.hideLoader()))
     );
 
-    this.erpt$.pipe(filter((erpt) => !!erpt)).subscribe((erpt: ExtendedReport) => {
-      this.reportCurrencySymbol = getCurrencySymbol(erpt.rp_currency, 'wide');
-      this.reportName = erpt.rp_purpose;
+    this.report$.pipe(filter((report) => !!report)).subscribe((report: Report) => {
+      this.reportCurrencySymbol = getCurrencySymbol(report.currency, 'wide');
+      this.reportName = report.purpose;
       /**
-       * if current user is remove from approver, erpt call will go again to fetch current report details
-       * so checking if report details are available in erpt than continue execution
+       * if current user is remove from approver, report call will go again to fetch current report details
+       * so checking if report details are available in report than continue execution
        * else redirect them to team reports
        */
-      if (erpt) {
-        this.isReportReported = ['APPROVER_PENDING'].indexOf(erpt.rp_state) > -1;
+      if (report) {
+        this.isReportReported = ['APPROVER_PENDING'].indexOf(report.state) > -1;
       }
     });
 
-    this.sharedWith$ = this.reportService.getExports(this.activatedRoute.snapshot.params.id).pipe(
+    this.sharedWith$ = this.reportService.getExports(this.activatedRoute.snapshot.params.id as string).pipe(
       map((pdfExports: { results: PdfExport[] }) =>
         pdfExports.results
           .sort((a, b) => (a.created_at < b.created_at ? 1 : b.created_at < a.created_at ? -1 : 0))
@@ -291,17 +291,7 @@ export class ViewTeamReportPage {
       )
     );
 
-    this.reportApprovals$ = this.refreshApprovals$.pipe(
-      startWith(true),
-      switchMap(() => this.reportService.getApproversByReportId(this.activatedRoute.snapshot.params.id)),
-      map((reportApprovals) =>
-        reportApprovals
-          .filter((approval) => ['APPROVAL_PENDING', 'APPROVAL_DONE'].indexOf(approval.state) > -1)
-          .map((approval) => approval)
-      )
-    );
-
-    this.expenses$ = this.expensesService.getReportExpenses(this.activatedRoute.snapshot.params.id).pipe(
+    this.expenses$ = this.expensesService.getReportExpenses(this.activatedRoute.snapshot.params.id as string).pipe(
       shareReplay(1),
       finalize(() => (this.isExpensesLoading = false))
     );
@@ -310,7 +300,7 @@ export class ViewTeamReportPage {
       map((expenses) => expenses.reduce((acc, curr) => acc + curr.amount, 0))
     );
 
-    this.actions$ = this.reportService.actions(this.activatedRoute.snapshot.params.id).pipe(shareReplay(1));
+    this.actions$ = this.reportService.actions(this.activatedRoute.snapshot.params.id as string).pipe(shareReplay(1));
 
     this.canEdit$ = this.actions$.pipe(map((actions) => actions.can_edit));
     this.canDelete$ = this.actions$.pipe(map((actions) => actions.can_delete));
@@ -319,13 +309,18 @@ export class ViewTeamReportPage {
     forkJoin({
       expenses: this.expenses$,
       eou: this.eou$,
-      approvals: this.reportApprovals$.pipe(take(1)),
+      report: this.report$.pipe(take(1)),
       orgSettings: this.orgSettingsService.get(),
-    }).subscribe(({ expenses, eou, approvals, orgSettings }) => {
+    }).subscribe(({ expenses, eou, report, orgSettings }) => {
+      this.approvals = report.approvals.filter(
+        (approval) => [ApprovalState.APPROVAL_PENDING, ApprovalState.APPROVAL_DONE].indexOf(approval.state) > -1
+      );
       this.reportExpensesIds = expenses.map((expense) => expense.id);
       this.isSequentialApprovalEnabled = this.getApprovalSettings(orgSettings);
       this.canApprove = this.isSequentialApprovalEnabled
-        ? this.isUserActiveInCurrentSeqApprovalQueue(eou, approvals)
+        ? report.next_approver_user_ids &&
+          report.next_approver_user_ids.length > 0 &&
+          report.next_approver_user_ids.includes(eou.us.id)
         : true;
       this.canShowTooltip = true;
     });
@@ -333,26 +328,11 @@ export class ViewTeamReportPage {
     this.refreshApprovals$.next(null);
   }
 
-  toggleTooltip() {
+  toggleTooltip(): void {
     this.canShowTooltip = !this.canShowTooltip;
   }
 
-  isUserActiveInCurrentSeqApprovalQueue(eou: ExtendedOrgUser, approvers: Approver[]): boolean {
-    const currentApproverRank = approvers.find((approver) => approver.approver_id === eou.ou.id)?.rank;
-
-    const approverRanks = approvers
-      .filter((approver) => approver.state === 'APPROVAL_PENDING')
-      .map((approver) => approver.rank);
-
-    if (approverRanks.length > 0) {
-      const minRank = approverRanks.reduce((prev, curr) => (prev < curr ? prev : curr));
-      return currentApproverRank === minRank;
-    }
-
-    return false;
-  }
-
-  async deleteReport() {
+  async deleteReport(): Promise<void> {
     const popupResult = await this.popupService.showPopup({
       header: 'Delete Report',
       message: `
@@ -371,7 +351,7 @@ export class ViewTeamReportPage {
     if (popupResult === 'primary') {
       from(this.loaderService.showLoader())
         .pipe(
-          switchMap(() => this.reportService.delete(this.activatedRoute.snapshot.params.id)),
+          switchMap(() => this.reportService.delete(this.activatedRoute.snapshot.params.id as string)),
           finalize(() => from(this.loaderService.hideLoader()))
         )
         .subscribe(() => {
@@ -380,14 +360,14 @@ export class ViewTeamReportPage {
     }
   }
 
-  async approveReport() {
+  async approveReport(): Promise<void> {
     if (!this.canApprove) {
       this.toggleTooltip();
     } else {
-      const erpt = await this.erpt$.pipe(take(1)).toPromise();
+      const report = await this.report$.pipe(take(1)).toPromise();
       const expenses = await this.expenses$.toPromise();
 
-      const rpAmount = this.humanizeCurrency.transform(erpt.rp_amount, erpt.rp_currency, false);
+      const rpAmount = this.humanizeCurrency.transform(report.amount, report.currency, false);
       const flaggedExpensesCount = expenses.filter(
         (expense) => expense.is_policy_flagged || expense.is_manually_flagged
       ).length;
@@ -395,7 +375,7 @@ export class ViewTeamReportPage {
         componentProps: {
           flaggedExpensesCount,
           title: 'Approve Report',
-          message: erpt.rp_num_transactions + ' expenses of amount ' + rpAmount + ' will be approved',
+          message: report.num_expenses + ' expenses of amount ' + rpAmount + ' will be approved',
           primaryCta: {
             text: 'Approve',
             action: 'approve',
@@ -411,10 +391,10 @@ export class ViewTeamReportPage {
 
       await popover.present();
 
-      const { data } = await popover.onWillDismiss();
+      const { data } = (await popover.onWillDismiss()) as { data: { action: string } };
 
       if (data && data.action === 'approve') {
-        this.reportService.approve(erpt.rp_id).subscribe(() => {
+        this.reportService.approve(report.id).subscribe(() => {
           this.refinerService.startSurvey({ actionName: 'Approve Report' });
           this.router.navigate(['/', 'enterprise', 'team_reports']);
         });
@@ -422,13 +402,13 @@ export class ViewTeamReportPage {
     }
   }
 
-  onUpdateApprover(message: boolean) {
+  onUpdateApprover(message: boolean): void {
     if (message) {
       this.refreshApprovals$.next(null);
     }
   }
 
-  goToTransaction({ expense, expenseIndex }: { expense: Expense; expenseIndex: number }) {
+  goToTransaction({ expense, expenseIndex }: { expense: Expense; expenseIndex: number }): void {
     const category = expense.category && expense.category.name.toLowerCase();
 
     let route: string;
@@ -451,7 +431,8 @@ export class ViewTeamReportPage {
     ]);
   }
 
-  async shareReport(event) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async shareReport(event): Promise<void> {
     const popover = await this.popoverController.create({
       component: ShareReportComponent,
       cssClass: 'dialog-popover',
@@ -459,7 +440,7 @@ export class ViewTeamReportPage {
 
     await popover.present();
 
-    const { data } = await popover.onWillDismiss();
+    const { data } = (await popover.onWillDismiss()) as { data: { email: string } };
 
     if (data.email) {
       const params = {
@@ -473,7 +454,7 @@ export class ViewTeamReportPage {
     }
   }
 
-  async sendBack() {
+  async sendBack(): Promise<void> {
     const popover = await this.popoverController.create({
       component: FyPopoverComponent,
       componentProps: {
@@ -484,7 +465,7 @@ export class ViewTeamReportPage {
     });
 
     await popover.present();
-    const { data } = await popover.onWillDismiss();
+    const { data } = (await popover.onWillDismiss()) as { data: { comment: string } };
 
     if (data && data.comment) {
       const status = {
@@ -495,7 +476,7 @@ export class ViewTeamReportPage {
         notify: false,
       };
 
-      this.reportService.inquire(this.activatedRoute.snapshot.params.id, statusPayload).subscribe(() => {
+      this.reportService.inquire(this.activatedRoute.snapshot.params.id as string, statusPayload).subscribe(() => {
         const message = 'Report Sent Back successfully';
         this.matSnackBar.openFromComponent(ToastMessageComponent, {
           ...this.snackbarProperties.setSnackbarProperties('success', { message }),
@@ -508,11 +489,11 @@ export class ViewTeamReportPage {
     }
   }
 
-  async openViewReportInfoModal() {
+  async openViewReportInfoModal(): Promise<void> {
     const viewInfoModal = await this.modalController.create({
       component: FyViewReportInfoComponent,
       componentProps: {
-        erpt$: this.erpt$,
+        report$: this.report$,
         expenses$: this.expenses$,
         view: ExpenseView.team,
       },
@@ -525,7 +506,7 @@ export class ViewTeamReportPage {
     this.trackingService.clickViewReportInfo({ view: ExpenseView.team });
   }
 
-  segmentChanged(event) {
+  segmentChanged(event: { detail: { value: string } }): void {
     if (event && event.detail && event.detail.value) {
       if (event.detail.value === 'expenses') {
         this.isExpensesView = true;
@@ -546,16 +527,17 @@ export class ViewTeamReportPage {
     }
   }
 
-  addComment() {
+  addComment(): void {
     if (this.newComment) {
       const data = {
         comment: this.newComment,
       };
 
       this.newComment = null;
-      this.commentInput.nativeElement.focus();
+      (this.commentInput.nativeElement as HTMLElement).focus();
       this.isCommentAdded = true;
 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       this.statusService.post(this.objectType, this.objectId, data).subscribe((res) => {
         this.refreshEstatuses$.next(null);
         setTimeout(() => {
@@ -584,12 +566,12 @@ export class ViewTeamReportPage {
   }
 
   updateReportName(reportName: string): void {
-    this.erpt$
+    this.report$
       .pipe(
         take(1),
-        switchMap((erpt) => {
-          erpt.rp_purpose = reportName;
-          return this.reportService.approverUpdateReportPurpose(erpt);
+        switchMap((report) => {
+          report.purpose = reportName;
+          return this.reportService.approverUpdateReportPurpose(report);
         })
       )
       .subscribe(() => {
@@ -601,14 +583,14 @@ export class ViewTeamReportPage {
 
   editReportName(): void {
     this.reportNameChangeStartTime = new Date().getTime();
-    this.erpt$
+    this.report$
       .pipe(take(1))
       .pipe(
-        switchMap((erpt) => {
+        switchMap((report) => {
           const editReportNamePopover = this.popoverController.create({
             component: EditReportNamePopoverComponent,
             componentProps: {
-              reportName: erpt.rp_purpose,
+              reportName: report.purpose,
             },
             cssClass: 'fy-dialog-popover',
           });
diff --git a/src/app/shared/components/fy-view-report-info/fy-view-report-info.component.spec.ts b/src/app/shared/components/fy-view-report-info/fy-view-report-info.component.spec.ts
index 2884f0cf44..cfe896091c 100644
--- a/src/app/shared/components/fy-view-report-info/fy-view-report-info.component.spec.ts
+++ b/src/app/shared/components/fy-view-report-info/fy-view-report-info.component.spec.ts
@@ -1,14 +1,13 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 
 import { FyViewReportInfoComponent } from './fy-view-report-info.component';
-import { reportParam } from 'src/app/core/mock-data/report.data';
 import { of } from 'rxjs';
 import { ExpenseView } from 'src/app/core/models/expense-view.enum';
 import { OrgUserSettingsService } from 'src/app/core/services/org-user-settings.service';
 import { TrackingService } from 'src/app/core/services/tracking.service';
 import { AuthService } from 'src/app/core/services/auth.service';
 import { OrgSettingsService } from 'src/app/core/services/org-settings.service';
-import { ModalController } from '@ionic/angular';
+import { ModalController, SegmentCustomEvent } from '@ionic/angular';
 import { DatePipe, KeyValue } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { orgSettingsRes } from 'src/app/core/mock-data/org-settings.data';
@@ -18,6 +17,7 @@ import { costCentersData } from 'src/app/core/mock-data/cost-centers.data';
 import { cloneDeep } from 'lodash';
 import { expenseResponseData, expenseResponseData2 } from 'src/app/core/mock-data/platform/v1/expense.data';
 import { ExpensesService as SharedExpensesService } from 'src/app/core/services/platform/v1/shared/expenses.service';
+import { platformReportData } from 'src/app/core/mock-data/platform-report.data';
 
 describe('FyViewReportInfoComponent', () => {
   let component: FyViewReportInfoComponent;
@@ -103,11 +103,11 @@ describe('FyViewReportInfoComponent', () => {
 
   it('ionViewWillEnter(): should update report details and currency and set Reimbursable according to paymentModeData', () => {
     component.view = ExpenseView.team;
-    const erpt = {
-      'Report Name': 'My Testing Report',
+    const report = {
+      'Report Name': '#3:  Jul 2023 - Office expense',
       Owner: 'Abhishek Jain',
-      'Report Number': 'C/2022/10/R/37',
-      'Created On': datePipe.transform(new Date('2022-10-31T13:54:46.317208'), 'MMM d, y'),
+      'Report Number': 'C/2023/07/R/17',
+      'Created On': datePipe.transform(new Date('2023-07-11T13:54:46.317208'), 'MMM d, y'),
     };
     const paymentModeSummaryMock = {
       reimbursable: {
@@ -122,13 +122,13 @@ describe('FyViewReportInfoComponent', () => {
     orgSettingsService.get.and.returnValue(of(orgSettingsRes));
     sharedExpensesService.getCurrenyWiseSummary.and.returnValue(currencySummaryData);
     sharedExpensesService.getPaymentModeWiseSummary.and.returnValue(paymentModeSummaryMock);
-    component.erpt$ = of(reportParam);
+    component.report$ = of({ ...platformReportData, amount: 46040 });
     component.expenses$ = of(expenseResponseData);
     fixture.detectChanges();
     component.ionViewWillEnter();
-    expect(component.reportDetails).toEqual(erpt);
+    expect(component.reportDetails).toEqual(report);
     expect(component.reportCurrency).toEqual('USD');
-    expect(component.createEmployeeDetails).toHaveBeenCalledOnceWith(reportParam);
+    expect(component.createEmployeeDetails).toHaveBeenCalledOnceWith({ ...platformReportData, amount: 46040 });
     expect(component.amountComponentWiseDetails).toEqual({
       'Total Amount': 46040,
       Reimbursable: 4600,
@@ -136,16 +136,16 @@ describe('FyViewReportInfoComponent', () => {
     expect(component.getCCCAdvanceSummary).toHaveBeenCalledOnceWith(paymentModeSummaryMock, orgSettingsRes);
     expect(sharedExpensesService.getCurrenyWiseSummary).toHaveBeenCalledOnceWith(expenseResponseData);
     expect(component.amountCurrencyWiseDetails).toEqual(currencySummaryData);
-    expect(component.isForeignCurrency).toBe(false);
+    expect(component.isForeignCurrency).toBeFalse();
   });
 
   it('ionViewWillEnter(): should update report details and currency and set Reimbursable amount', () => {
     component.view = ExpenseView.team;
-    const erpt = {
-      'Report Name': 'My Testing Report',
+    const report = {
+      'Report Name': '#3:  Jul 2023 - Office expense',
       Owner: 'Abhishek Jain',
-      'Report Number': 'C/2022/10/R/37',
-      'Created On': datePipe.transform(new Date('2022-10-31T13:54:46.317208'), 'MMM d, y'),
+      'Report Number': 'C/2023/07/R/17',
+      'Created On': datePipe.transform(new Date('2023-07-11T16:24:01.335Z'), 'MMM d, y'),
     };
     const paymentModeSummaryMock = {
       reimbursable: {
@@ -160,21 +160,21 @@ describe('FyViewReportInfoComponent', () => {
     orgSettingsService.get.and.returnValue(of(orgSettingsRes));
     sharedExpensesService.getCurrenyWiseSummary.and.returnValue(currencySummaryData);
     sharedExpensesService.getPaymentModeWiseSummary.and.returnValue(paymentModeSummaryMock);
-    component.erpt$ = of(reportParam);
+    component.report$ = of(platformReportData);
     component.expenses$ = of(expenseResponseData2);
     fixture.detectChanges();
     component.ionViewWillEnter();
-    expect(component.reportDetails).toEqual(erpt);
+    expect(component.reportDetails).toEqual(report);
     expect(component.reportCurrency).toEqual('USD');
-    expect(component.createEmployeeDetails).toHaveBeenCalledOnceWith(reportParam);
+    expect(component.createEmployeeDetails).toHaveBeenCalledOnceWith(platformReportData);
     expect(component.amountComponentWiseDetails).toEqual({
-      'Total Amount': 46040,
+      'Total Amount': 0,
       Reimbursable: 207000.78,
     });
     expect(component.getCCCAdvanceSummary).toHaveBeenCalledOnceWith(paymentModeSummaryMock, orgSettingsRes);
     expect(sharedExpensesService.getCurrenyWiseSummary).toHaveBeenCalledOnceWith(expenseResponseData2);
     expect(component.amountCurrencyWiseDetails).toEqual(currencySummaryData);
-    expect(component.isForeignCurrency).toBe(false);
+    expect(component.isForeignCurrency).toBeFalse();
   });
 
   it('should always return 0', () => {
@@ -299,54 +299,95 @@ describe('FyViewReportInfoComponent', () => {
     expect(btnSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('createEmployeeDetails(): should update employee details', fakeAsync(() => {
-    const expectedEmployeeDetails = {
-      'Employee ID': reportParam.ou_employee_id,
-      Organization: reportParam.ou_org_name,
-      Department: reportParam.ou_department,
-      'Sub Department': reportParam.ou_sub_department,
-      Location: reportParam.ou_location,
-      Level: reportParam.ou_level,
-      'Employee Title': reportParam.ou_title,
-      'Business Unit': reportParam.ou_business_unit,
-      Mobile: reportParam.ou_mobile,
-    };
-
-    const expectedAllowedCostCenters = 'SMS1, test cost, cost centers mock data 1, cost center service 2';
-
-    authService.getEou.and.returnValue(Promise.resolve(apiEouRes));
-    orgUserSettingsService.getAllowedCostCentersByOuId.and.returnValue(of(costCentersData));
-    component.createEmployeeDetails(reportParam);
-    expect(component.employeeDetails).toEqual(expectedEmployeeDetails);
-    tick(1000);
-    expect(authService.getEou).toHaveBeenCalledTimes(1);
-    expect(orgUserSettingsService.getAllowedCostCentersByOuId).toHaveBeenCalledOnceWith(reportParam.ou_id);
-    expect(component.employeeDetails['Allowed Cost Centers']).toEqual(expectedAllowedCostCenters);
-  }));
-
-  it('createEmployeeDetails(): should update employee details but not update the cost centers when API throw an error', fakeAsync(() => {
-    const expectedEmployeeDetails = {
-      'Employee ID': reportParam.ou_employee_id,
-      Organization: reportParam.ou_org_name,
-      Department: reportParam.ou_department,
-      'Sub Department': reportParam.ou_sub_department,
-      Location: reportParam.ou_location,
-      Level: reportParam.ou_level,
-      'Employee Title': reportParam.ou_title,
-      'Business Unit': reportParam.ou_business_unit,
-      Mobile: reportParam.ou_mobile,
-    };
-
-    const expectedAllowedCostCenters = 'SMS1, test cost, cost centers mock data 1, cost center service 2';
-
-    authService.getEou.and.throwError('An Error Occured');
-    component.createEmployeeDetails(reportParam);
-    expect(component.employeeDetails).toEqual(expectedEmployeeDetails);
-    tick(1000);
-    expect(authService.getEou).toHaveBeenCalledTimes(1);
-    expect(orgUserSettingsService.getAllowedCostCentersByOuId).not.toHaveBeenCalledOnceWith(reportParam.ou_id);
-    expect(component.employeeDetails['Allowed Cost Centers']).not.toEqual(expectedAllowedCostCenters);
-  }));
+  describe('createEmployeeDetails():', () => {
+    it('should update employee details', fakeAsync(() => {
+      const expectedEmployeeDetails = {
+        'Employee ID': platformReportData.employee.code,
+        Organization: platformReportData.employee.org_name,
+        Department: platformReportData.employee.department.name,
+        'Sub Department': platformReportData.employee.department.sub_department,
+        Location: platformReportData.employee.location,
+        Level: platformReportData.employee.level,
+        'Employee Title': platformReportData.employee.title,
+        'Business Unit': platformReportData.employee.business_unit,
+        Mobile: platformReportData.employee.mobile,
+      };
+
+      const expectedAllowedCostCenters = 'SMS1, test cost, cost centers mock data 1, cost center service 2';
+
+      authService.getEou.and.resolveTo(apiEouRes);
+      orgUserSettingsService.getAllowedCostCentersByOuId.and.returnValue(of(costCentersData));
+      component.createEmployeeDetails(platformReportData);
+      expect(component.employeeDetails).toEqual(expectedEmployeeDetails);
+      tick(1000);
+      expect(authService.getEou).toHaveBeenCalledTimes(1);
+      expect(orgUserSettingsService.getAllowedCostCentersByOuId).toHaveBeenCalledOnceWith(
+        platformReportData.employee.id
+      );
+      expect(component.employeeDetails['Allowed Cost Centers']).toEqual(expectedAllowedCostCenters);
+    }));
+
+    it('should update employee details but not update the cost centers when API throw an error', fakeAsync(() => {
+      const expectedEmployeeDetails = {
+        'Employee ID': platformReportData.employee.code,
+        Organization: platformReportData.employee.org_name,
+        Department: platformReportData.employee.department?.name,
+        'Sub Department': platformReportData.employee.department.sub_department,
+        Location: platformReportData.employee.location,
+        Level: platformReportData.employee.level?.name,
+        'Employee Title': platformReportData.employee.title,
+        'Business Unit': platformReportData.employee.business_unit,
+        Mobile: platformReportData.employee.mobile,
+      };
+
+      const expectedAllowedCostCenters = 'SMS1, test cost, cost centers mock data 1, cost center service 2';
+
+      authService.getEou.and.throwError('An Error Occured');
+      component.createEmployeeDetails(platformReportData);
+      expect(component.employeeDetails).toEqual(expectedEmployeeDetails);
+      tick(1000);
+      expect(authService.getEou).toHaveBeenCalledTimes(1);
+      expect(orgUserSettingsService.getAllowedCostCentersByOuId).not.toHaveBeenCalledOnceWith(
+        platformReportData.employee.id
+      );
+      expect(component.employeeDetails['Allowed Cost Centers']).not.toEqual(expectedAllowedCostCenters);
+    }));
+
+    it('should have undefined when employee department and level values are undefined', fakeAsync(() => {
+      const modifiedPlatformReportData = {
+        ...platformReportData,
+        employee: {
+          ...platformReportData.employee,
+          level: null,
+          department: null,
+        },
+      };
+      const expectedEmployeeDetails = {
+        'Employee ID': modifiedPlatformReportData.employee.code,
+        Organization: modifiedPlatformReportData.employee.org_name,
+        Department: undefined,
+        'Sub Department': undefined,
+        Location: modifiedPlatformReportData.employee.location,
+        Level: undefined,
+        'Employee Title': modifiedPlatformReportData.employee.title,
+        'Business Unit': modifiedPlatformReportData.employee.business_unit,
+        Mobile: modifiedPlatformReportData.employee.mobile,
+      };
+
+      const expectedAllowedCostCenters = 'SMS1, test cost, cost centers mock data 1, cost center service 2';
+
+      authService.getEou.and.resolveTo(apiEouRes);
+      orgUserSettingsService.getAllowedCostCentersByOuId.and.returnValue(of(costCentersData));
+      component.createEmployeeDetails(modifiedPlatformReportData);
+      expect(component.employeeDetails).toEqual(expectedEmployeeDetails);
+      tick(1000);
+      expect(authService.getEou).toHaveBeenCalledTimes(1);
+      expect(orgUserSettingsService.getAllowedCostCentersByOuId).toHaveBeenCalledOnceWith(
+        modifiedPlatformReportData.employee.id
+      );
+      expect(component.employeeDetails['Allowed Cost Centers']).toEqual(expectedAllowedCostCenters);
+    }));
+  });
 
   it('getCCCAdvanceSummary(): should update amountComponentWiseDetails', () => {
     const paymentModeSummaryMock = {
@@ -364,7 +405,7 @@ describe('FyViewReportInfoComponent', () => {
       },
     };
     component.amountComponentWiseDetails = {
-      'Total Amount': reportParam.rp_amount,
+      'Total Amount': platformReportData.amount,
       Reimbursable: 0,
     };
     component.getCCCAdvanceSummary(paymentModeSummaryMock, orgSettingsRes);
@@ -382,7 +423,7 @@ describe('FyViewReportInfoComponent', () => {
       },
     };
     component.amountComponentWiseDetails = {
-      'Total Amount': reportParam.rp_amount,
+      'Total Amount': platformReportData.amount,
       Reimbursable: 0,
     };
     component.getCCCAdvanceSummary(paymentModeSummaryMock, orgSettingsRes);
@@ -393,7 +434,7 @@ describe('FyViewReportInfoComponent', () => {
   it('getCCCAdvanceSummary(): should update amountComponentWiseDetails if paymentModeWiseData dont have amount in advance', () => {
     const paymentModeSummaryMock = {};
     component.amountComponentWiseDetails = {
-      'Total Amount': reportParam.rp_amount,
+      'Total Amount': platformReportData.amount,
       Reimbursable: 0,
     };
     component.getCCCAdvanceSummary(paymentModeSummaryMock, orgSettingsRes);
@@ -417,7 +458,7 @@ describe('FyViewReportInfoComponent', () => {
       },
     };
     component.amountComponentWiseDetails = {
-      'Total Amount': reportParam.rp_amount,
+      'Total Amount': platformReportData.amount,
       Reimbursable: 0,
     };
     const orgSettingsRes2 = cloneDeep(orgSettingsRes);
diff --git a/src/app/shared/components/fy-view-report-info/fy-view-report-info.component.ts b/src/app/shared/components/fy-view-report-info/fy-view-report-info.component.ts
index 312f63d8ea..47cd55c346 100644
--- a/src/app/shared/components/fy-view-report-info/fy-view-report-info.component.ts
+++ b/src/app/shared/components/fy-view-report-info/fy-view-report-info.component.ts
@@ -1,6 +1,5 @@
-import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, ElementRef } from '@angular/core';
 import { ModalController, Platform } from '@ionic/angular';
-import { ExtendedReport } from 'src/app/core/models/report.model';
 import { Observable, combineLatest } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { KeyValue, DatePipe } from '@angular/common';
@@ -12,6 +11,8 @@ import { OrgSettingsService } from 'src/app/core/services/org-settings.service';
 import { PaymentModeSummary } from 'src/app/core/models/payment-mode-summary.model';
 import { Expense } from 'src/app/core/models/platform/v1/expense.model';
 import { ExpensesService as SharedExpensesService } from 'src/app/core/services/platform/v1/shared/expenses.service';
+import { Report } from 'src/app/core/models/platform/v1/report.model';
+import { OrgSettings } from 'src/app/core/models/org-settings.model';
 
 type AmountDetails = {
   'Total Amount': number;
@@ -34,8 +35,8 @@ type PaymentMode = {
   templateUrl: './fy-view-report-info.component.html',
   styleUrls: ['./fy-view-report-info.component.scss'],
 })
-export class FyViewReportInfoComponent implements OnInit {
-  @Input() erpt$: Observable<ExtendedReport>;
+export class FyViewReportInfoComponent {
+  @Input() report$: Observable<Report>;
 
   @Input() expenses$: Observable<Expense[]>;
 
@@ -71,32 +72,31 @@ export class FyViewReportInfoComponent implements OnInit {
     private authService: AuthService
   ) {}
 
-  get ExpenseView() {
+  get ExpenseView(): typeof ExpenseView {
     return ExpenseView;
   }
 
-  ngOnInit(): void {}
-
-  ionViewWillEnter() {
-    this.erpt$.pipe(filter((erpt) => !!erpt)).subscribe((erpt) => {
+  ionViewWillEnter(): void {
+    this.report$.pipe(filter((report) => !!report)).subscribe((report) => {
+      const createdDate = this.datePipe.transform(report.created_at, 'MMM d, y');
       this.reportDetails = {
-        'Report Name': erpt.rp_purpose,
-        Owner: erpt.us_full_name,
-        'Report Number': erpt.rp_claim_number,
-        'Created On': this.datePipe.transform(erpt.rp_created_at, 'MMM d, y'),
+        'Report Name': report.purpose,
+        Owner: report.employee.user.full_name,
+        'Report Number': report.seq_num,
+        'Created On': createdDate,
       };
-      this.reportCurrency = erpt.rp_currency;
+      this.reportCurrency = report.currency;
 
       if (this.view === ExpenseView.team) {
-        this.createEmployeeDetails(erpt);
+        this.createEmployeeDetails(report);
       }
     });
 
     const orgSettings$ = this.orgSettingsService.get();
-    combineLatest([this.expenses$, this.erpt$, orgSettings$]).subscribe(([expenses, erpt, orgSettings]) => {
+    combineLatest([this.expenses$, this.report$, orgSettings$]).subscribe(([expenses, report, orgSettings]) => {
       const paymentModeWiseData: PaymentModeSummary = this.sharedExpensesService.getPaymentModeWiseSummary(expenses);
       this.amountComponentWiseDetails = {
-        'Total Amount': erpt.rp_amount,
+        'Total Amount': report.amount,
         Reimbursable: paymentModeWiseData.reimbursable?.amount || 0,
       };
       if (orgSettings) {
@@ -110,13 +110,14 @@ export class FyViewReportInfoComponent implements OnInit {
     });
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
   originalOrder = (a: KeyValue<string, any>, b: KeyValue<string, any>): number => 0;
 
-  closeModal() {
+  closeModal(): void {
     this.modalController.dismiss();
   }
 
-  segmentChanged(event) {
+  segmentChanged(event: { detail: { value: string } }): void {
     if (event && event.detail && event.detail.value) {
       if (event.detail.value === 'report') {
         this.isReportView = true;
@@ -140,10 +141,13 @@ export class FyViewReportInfoComponent implements OnInit {
     }
   }
 
-  onSwipeReport(event) {
+  onSwipeReport(event: { direction: number }): void {
     this.isSwipe = true;
     if (event && event.direction === 2) {
-      this.elementRef.nativeElement.getElementsByClassName('view-info--segment-block-container__btn')[1].click();
+      const elementRef: HTMLElement = (this.elementRef.nativeElement as HTMLElement).getElementsByClassName(
+        'view-info--segment-block-container__btn'
+      )[1] as HTMLElement;
+      elementRef.click();
       this.trackingService.viewReportInfo({
         view: this.view,
         action: 'swipe',
@@ -152,13 +156,21 @@ export class FyViewReportInfoComponent implements OnInit {
     }
   }
 
-  onSwipeAmount(event) {
+  onSwipeAmount(event: { direction: number }): void {
     this.isSwipe = true;
+
     if (event && event.direction === 4) {
-      this.elementRef.nativeElement.getElementsByClassName('view-info--segment-block-container__btn')[0].click();
+      const elementRef: HTMLElement = (this.elementRef.nativeElement as HTMLElement).getElementsByClassName(
+        'view-info--segment-block-container__btn'
+      )[0] as HTMLElement;
+      elementRef.click();
     }
+
     if (this.view === ExpenseView.team && event && event.direction === 2) {
-      this.elementRef.nativeElement.getElementsByClassName('view-info--segment-block-container__btn')[2].click();
+      const elementRef: HTMLElement = (this.elementRef.nativeElement as HTMLElement).getElementsByClassName(
+        'view-info--segment-block-container__btn'
+      )[2] as HTMLElement;
+      elementRef.click();
     }
     this.trackingService.viewReportInfo({
       view: this.view,
@@ -167,10 +179,13 @@ export class FyViewReportInfoComponent implements OnInit {
     });
   }
 
-  onSwipeEmployee(event) {
+  onSwipeEmployee(event: { direction: number }): void {
     this.isSwipe = true;
     if (event && event.direction === 4) {
-      this.elementRef.nativeElement.getElementsByClassName('view-info--segment-block-container__btn')[1].click();
+      const elementRef: HTMLElement = (this.elementRef.nativeElement as HTMLElement).getElementsByClassName(
+        'view-info--segment-block-container__btn'
+      )[1] as HTMLElement;
+      elementRef.click();
       this.trackingService.viewReportInfo({
         view: this.view,
         action: 'swipe',
@@ -179,22 +194,22 @@ export class FyViewReportInfoComponent implements OnInit {
     }
   }
 
-  async createEmployeeDetails(erpt: ExtendedReport) {
+  async createEmployeeDetails(report: Report): Promise<void> {
     this.employeeDetails = {
-      'Employee ID': erpt.ou_employee_id,
-      Organization: erpt.ou_org_name,
-      Department: erpt.ou_department,
-      'Sub Department': erpt.ou_sub_department,
-      Location: erpt.ou_location,
-      Level: erpt.ou_level,
-      'Employee Title': erpt.ou_title,
-      'Business Unit': erpt.ou_business_unit,
-      Mobile: erpt.ou_mobile,
+      'Employee ID': report.employee.code,
+      Organization: report.employee.org_name,
+      Department: report.employee.department?.name,
+      'Sub Department': report.employee.department?.sub_department,
+      Location: report.employee.location,
+      Level: report.employee.level?.name,
+      'Employee Title': report.employee.title,
+      'Business Unit': report.employee.business_unit,
+      Mobile: report.employee.mobile,
     };
     try {
       const orgUser = await this.authService.getEou();
-      if (erpt.ou_org_id === orgUser.ou.org_id) {
-        this.orgUserSettingsService.getAllowedCostCentersByOuId(erpt.ou_id).subscribe((costCenters) => {
+      if (report.org_id === orgUser.ou.org_id) {
+        this.orgUserSettingsService.getAllowedCostCentersByOuId(report.employee.id).subscribe((costCenters) => {
           const allowedCostCenters = costCenters.map((costCenter) => costCenter.name).join(', ');
           this.employeeDetails['Allowed Cost Centers'] = allowedCostCenters;
         });
@@ -204,7 +219,7 @@ export class FyViewReportInfoComponent implements OnInit {
     }
   }
 
-  getCCCAdvanceSummary(paymentModeWiseData: PaymentMode, orgSettings: any) {
+  getCCCAdvanceSummary(paymentModeWiseData: PaymentMode, orgSettings: OrgSettings): void {
     if (orgSettings.corporate_credit_card_settings && orgSettings.corporate_credit_card_settings.enabled) {
       this.amountComponentWiseDetails.CCC = paymentModeWiseData.ccc?.amount || 0;
     }