diff --git a/resources/assets/vue/components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue
new file mode 100644
index 00000000..99be4562
--- /dev/null
+++ b/resources/assets/vue/components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue
@@ -0,0 +1,83 @@
+<template>
+    <div class="row m-b-20">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <div class="row m-l-0 m-r-0">
+                        <div class="col-12 col-md mb-2 mb-md-0 p-l-3 p-r-3 p-md-0">
+                            <validation-wrapper-component :validator="$v.parameters.startDate">
+                                <label class="all-caps">Start Date</label>
+                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col-12 col-md mb-2 mb-md-0 p-l-3 p-r-3 p-md-0">
+                            <validation-wrapper-component :validator="$v.parameters.endDate">
+                                <label class="all-caps">End Date</label>
+                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col-12 col-md-auto p-l-3 p-r-3 p-md-0">
+                            <div class="btn btn-lg btn-primary fs-11 w-100 h-100 d-flex justify-content-center align-items-center" @click="downloadReport()">
+                                <span>
+                                    Export
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import componentHandler from "../../../general/mixins/componentHandler";
+import { required } from "vuelidate/lib/validators";
+
+export default {
+    props: {
+        section:{
+            type: String,
+            required: true
+        }
+    },
+    data(){
+        return {
+            parameters: {
+                startDate: '',
+                endDate: '',
+            },
+        }
+    },
+    validations: {
+        parameters: {
+            startDate: {
+                required
+            },
+            endDate: {
+                required
+            },
+        }
+    },
+    methods: {
+        downloadReport(){
+            var apiRoute = '';
+            if(!this.validate()){ return; }
+            switch(this.section) {
+                case 'paymentsReportSection':
+                    apiRoute = route('paymentTransactions.export');
+                    break;
+                case 'walletsReportSection':
+                    apiRoute = route('walletTransactions.export');
+                    break;
+            }
+            window.open(apiRoute + '?startDate=' + this.parameters.startDate + '&endDate=' + this.parameters.endDate, '_blank');
+        },
+        updateDocumentType(documentType) {
+            this.parameters.type = documentType;
+            this.selectedDocumentStatus = !this.selectedDocumentStatus
+        }
+    },
+    mixins: [componentHandler]
+};
+</script>
diff --git a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
index 840c2009..8c200a60 100644
--- a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
@@ -129,6 +129,11 @@
                     </div>
                     <div class="row tabsContainer tabContent hide" tab-name="paidInvoice">
                         <div class="col">
+                            <div class="row">
+                                <div class="col-12 col-md-6 no-padding">
+                                    <download-billing-with-dates-component section="paymentsReportSection" ></download-billing-with-dates-component>
+                                </div>
+                            </div>
                             <list-component section="paidInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [3]}">
                                 <template slot="list" slot-scope="{data}">
                                     <admin-payments-billing-component :data="data" invoice_status="Paid Invoice" section="paidInvoiceSection" ></admin-payments-billing-component>
@@ -146,4 +151,4 @@
     export default {
         mixins: [componentHandler]
     }
-</script>
\ No newline at end of file
+</script>