diff --git a/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html b/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html
index f8ddefe4..e9502124 100644
--- a/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html
+++ b/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html
@@ -1,29 +1,89 @@
-<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <form #postForm="ngForm" (ngSubmit)="exportCSV(postForm.value,postForm.id)" class="csv-form" >
-        <div class="container-fluid" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="50%">
-            <mat-label for="querytype" class="form-control">Filter By</mat-label>
-            <select id="querytype" name="cars" class="form-control" required ngModel matNativeControl>
-              <option value="transactionid">TRANSACTION ID</option>
-              <option value="payerid">PAYER ID</option>
-              <option value="payeeid">PAYEE ID</option>
-              <option value="externalid">EXTERNALID</option>
-              <option value="workflowinstancekey">WORKFLOWINSTANCEKEY</option>
-              <option value="errordescription">ERRORDESCRIPTION</option>
-            </select>
-          </mat-form-field>
-          <mat-form-field class="example-full-width form-group" fxFlex="50%">
-      
-            <mat-label for="querytype" class="form-control">Value</mat-label>
-            <input matInput type="textArea" class="form-control col-sm-4" id="filterBy" required ngModel name="transactionid"
-            placeholder="comma-separated-list">
-          </mat-form-field>
-        </div>
-        
-        
-        <button mat-stroked-button type="submit" [disabled]="!postForm.valid">
-          Export CSV
-        </button>
-      </form>
-</div>
+<div
+  class="container"
+  fxLayout="row wrap"
+  fxLayoutGap="2%"
+  fxLayout.lt-md="column"
+>
+  <form
+    #postForm="ngForm"
+    (ngSubmit)="exportCSV(postForm.value, postForm.id)"
+    class="csv-form"
+  >
+    <div
+      class="container-fluid"
+      fxLayout="row wrap"
+      fxLayoutGap="5%"
+      fxLayout.lt-md="column"
+    >
+      <mat-form-field>
+        <mat-label>TRANSACTION ID</mat-label>
+        <input
+          matInput
+          type="textArea"
+          class="form-control col-sm-4"
+          ngModel
+          name="transactionid"
+          placeholder="comma-separated-list"
+          id="transactionid"
+          (keyup)="arrayConvert($event)"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>External ID</mat-label>
+        <input
+          matInput
+          type="textArea"
+          class="form-control col-sm-4"
+          ngModel
+          name="externalid"
+          placeholder="comma-separated-list"
+          id="externalid"
+          (keyup)="arrayConvert($event)"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>WORKFLOW INSTANCE KEY</mat-label>
+        <input
+          matInput
+          type="textArea"
+          class="form-control col-sm-4"
+          ngModel
+          name="workflowinstancekey"
+          placeholder="comma-separated-list"
+          id="workflowinstancekey"
+          (keyup)="arrayConvert($event)"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>START DATE</mat-label>
+        <input
+          matInput
+          type="textArea"
+          class="form-control col-sm-4"
+          ngModel
+          name="startdate"
+          placeholder="comma-separated-list"
+          id="startdate"
+          (keyup)="arrayConvert($event)"
+        />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label for="querytype" class="form-control">Filter By</mat-label>
+        <select
+          id="querytype"
+          name="cars"
+          class="form-control col-sm-4"
+          ngModel
+          matNativeControl
+        >
+          <option value="ACCEPTED">ACCEPTED</option>
+          <option value="FAILED">Declined</option>
+        </select>
+      </mat-form-field>
+    </div>
 
+    <button mat-stroked-button type="submit" [disabled]="!postForm.valid">
+      Export CSV
+    </button>
+  </form>
+</div>
diff --git a/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.ts b/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.ts
index 47a24b52..25d2707a 100644
--- a/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.ts
+++ b/src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.ts
@@ -1,43 +1,61 @@
-import { Component, OnInit } from '@angular/core';
-
-import { HttpClient, HttpParams , HttpHeaders, JsonpClientBackend} from '@angular/common/http';
+import { Component, OnInit } from "@angular/core";
+import {
+  HttpClient,
+  HttpParams,
+  HttpHeaders,
+  JsonpClientBackend,
+} from "@angular/common/http";
 @Component({
-  selector: 'mifosx-incoming-request-export',
-  templateUrl: './incoming-request-export.component.html',
-  styleUrls: ['./incoming-request-export.component.scss']
+  selector: "mifosx-incoming-request-export",
+  templateUrl: "./incoming-request-export.component.html",
+  styleUrls: ["./incoming-request-export.component.scss"],
 })
 export class IncomingRequestExportComponent implements OnInit {
-  csvExport : [];
+  csvExport: [];
   csvName: string;
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
+  onSubmit() {
+    this.exportCSV(this.csvExport, this.csvName);
   }
-  onSubmit(){
-    this.exportCSV(this.csvExport,this.csvName);
+  arrayConvert(event: any) {
+    event.target.value.split(",");
   }
-  exportCSV(filterBy:any,filterName:string) {
-    console.log(filterBy);
-    var postData = filterBy.transactionid.split(',');
-    console.log(postData)
-    
-    this.http.post("/api/v1/transactionRequests/export?filterBy="+filterBy.cars,
-    
-    postData,{responseType: 'blob'as 'json',headers: new HttpHeaders().append("Content-Type", "application/json")}
-    )
-    .subscribe(
-        (val) => {
-            console.log("POST call successful value returned in body", 
-                        val);
-                        this.downLoadFile(val,"application/csv")
-        })
-}
-downLoadFile(data: any, type: string) {
-  let blob = new Blob([data], { type: type});
-  let url = window.URL.createObjectURL(blob);
-  let pwa = window.open(url);
-  if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
-      alert( 'Please disable your Pop-up blocker and try again.');
+  exportCSV(filterBy: any, filterName: string) {
+    const exportURl =
+      "api/v1/transactionRequests?command=export&state=" +
+      filterBy.cars +
+      "&startTo=" +
+      filterBy.startdate;
+    var postData = {
+      transactionId: filterBy.transactionid.split(","),
+      externalid: filterBy.externalid.split(","),
+      payeeid: filterBy.workflowinstancekey.split(","),
+    };
+
+    console.log(Object.values(postData).toString().split(","));
+    this.http
+      .post(
+        exportURl,
+
+        postData,
+        {
+          responseType: "blob" as "json",
+          headers: new HttpHeaders().append("Content-Type", "application/json"),
+        }
+      )
+      .subscribe((val) => {
+        console.log("POST call successful value returned in body", val);
+        this.downLoadFile(val, "application/csv");
+      });
+  }
+  downLoadFile(data: any, type: string) {
+    let blob = new Blob([data], { type: type });
+    let url = window.URL.createObjectURL(blob);
+    let pwa = window.open(url);
+    if (!pwa || pwa.closed || typeof pwa.closed == "undefined") {
+      alert("Please disable your Pop-up blocker and try again.");
+    }
   }
-}
 }