diff --git a/app/Classes/General/Eloquent/Filters/PendingPurchaseOrder.php b/app/Classes/General/Eloquent/Filters/PendingPurchaseOrder.php
index 4097cbe0..d3fa28f9 100644
--- a/app/Classes/General/Eloquent/Filters/PendingPurchaseOrder.php
+++ b/app/Classes/General/Eloquent/Filters/PendingPurchaseOrder.php
@@ -23,8 +23,6 @@ class PendingPurchaseOrder implements Filter
             });
         })->whereDoesntHave('transactions', function($transaction){
             return $transaction->where('type', TransactionType::PURCHASE_ORDER)->whereIn('status', [ApprovalStatus::PENDING_VERIFICATION, ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED]);
-        })->whereHas('transactions', function($transaction){
-            return $transaction->where('type', TransactionType::PAYMENT)->whereIn('status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED]);
         });
     }
 
diff --git a/app/Classes/Modules/Bookings/ControllersLogic/DownloadBookingDocumentLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/DownloadBookingDocumentLogic.php
index 514c32cd..d8fdb0df 100644
--- a/app/Classes/Modules/Bookings/ControllersLogic/DownloadBookingDocumentLogic.php
+++ b/app/Classes/Modules/Bookings/ControllersLogic/DownloadBookingDocumentLogic.php
@@ -3,6 +3,7 @@
 namespace App\Classes\Modules\Bookings\ControllersLogic;
 
 
+use App\Classes\ValueObjects\Constants\TransactionType;
 use Illuminate\Support\Facades\File;
 use ZipArchive;
 use Carbon\Carbon;
@@ -35,7 +36,11 @@ class DownloadBookingDocumentLogic
 
             $bookings = Booking::where('status', ApprovalStatus::COMPLETED)
                 ->whereDate('created_at', '>=', Carbon::parse($request->input('startDate')))
-                ->whereDate('created_at', '<=', Carbon::parse($request->input('endDate')))->get();
+                ->whereDate('created_at', '<=', Carbon::parse($request->input('endDate')))->whereHas('transactions', function ($query) use ($request){
+                    return $query->where('type', TransactionType::PAYMENT)->whereHas('transactions', function ($query) use ($request){
+                        return $query->where('type', TransactionType::BILL)->where('issuer', $request->input('supplier'));
+                    });
+                })->get();
 
             if (!count($bookings)) throw new MalformedRequestException('No available file to download');
 
diff --git a/app/Http/Controllers/Bookings/DownloadBookingDocumentController.php b/app/Http/Controllers/Bookings/DownloadBookingDocumentController.php
index 95427363..d2a7d85c 100644
--- a/app/Http/Controllers/Bookings/DownloadBookingDocumentController.php
+++ b/app/Http/Controllers/Bookings/DownloadBookingDocumentController.php
@@ -15,7 +15,7 @@ class DownloadBookingDocumentController
      * @throws \App\Classes\Exceptions\MalformedRequestException
      */
     public function download(Request $request, DownloadBookingDocumentLogic $logic) {
-        return $logic->execute($request);
+        $logic->execute($request);
     }
 
 }
\ No newline at end of file
diff --git a/resources/assets/vue/components/address/forms/AddressFormComponent.vue b/resources/assets/vue/components/address/forms/AddressFormComponent.vue
index 94cd9c9a..2a6de3d1 100644
--- a/resources/assets/vue/components/address/forms/AddressFormComponent.vue
+++ b/resources/assets/vue/components/address/forms/AddressFormComponent.vue
@@ -23,7 +23,7 @@
                             </div>
                             <div class="row m-b-15">
                                 <div class="col-7 p-r-5">
-                                    <validation-wrapper-component selecatable :validator="$v.parameters.district_id">
+                                    <validation-wrapper-component selectable :validator="$v.parameters.district_id">
                                         <label>District</label>
                                         <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
                                     </validation-wrapper-component>
diff --git a/resources/assets/vue/components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue b/resources/assets/vue/components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue
index cc79b885..e03fb36c 100644
--- a/resources/assets/vue/components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue
+++ b/resources/assets/vue/components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue
@@ -17,7 +17,7 @@
                     </div>
                     <div class="row m-b-15">
                         <div class="col">
-                            <validation-wrapper-component selecatable :validator="$v.parameters.segment_id">
+                            <validation-wrapper-component selectable :validator="$v.parameters.segment_id">
                                 <label>Segment</label>
                                 <selectable-component :endpoint="route('api.segment.list') + '?filters=' + JSON.stringify({'id_not_in': currentSegmentIds})" :section="'segmentsListSection_'+data.id" valueColumn="id" :labelColumn="['name']" v-model="parameters.segment_id"></selectable-component> 
                             </validation-wrapper-component>
diff --git a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
index fe611b69..3bf7fa65 100644
--- a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
+++ b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
@@ -74,7 +74,7 @@
                     </div>
                     <div class="row m-b-20" v-if="type !== 2">
                         <div class="col">
-                            <validation-wrapper-component selecatable :validator="$v.parameters.bank_name">
+                            <validation-wrapper-component selectable :validator="$v.parameters.bank_name">
                                 <label>Bank Name</label>
                                 <selectable-component endpoint="malaysian_banks.json" section="banksListSection" valueColumn="name" :labelColumn="['name']" v-model="parameters.bank_name"></selectable-component>
                             </validation-wrapper-component>
diff --git a/resources/assets/vue/components/bookings/elements/BillingComponent.vue b/resources/assets/vue/components/bookings/elements/BillingComponent.vue
index 83a2cb78..13e0b7eb 100644
--- a/resources/assets/vue/components/bookings/elements/BillingComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BillingComponent.vue
@@ -42,6 +42,12 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="col">
+                            <validation-wrapper-component selectable :validator="$v.parameters.supplier">
+                                <label>Supplier</label>
+                                <selectable-component :endpoint="route('api.company.list')" :options="{'business_type': 3}" section="supplierListSection" valueColumn="id" :labelColumn="['name']" v-model="parameters.supplier"></selectable-component>
+                            </validation-wrapper-component>
+                        </div>
                         <div class="col-12 col-md mb-2 mb-md-0">
                             <validation-wrapper-component :validator="$v.parameters.startDate">
                                 <label class="all-caps">Start Date</label>
@@ -76,6 +82,7 @@ export default {
                 startDate: '',
                 endDate: '',
                 type: 'INVOICE',
+                supplier: null
             },
             documents: ['INVOICE', 'PURCHASE_ORDER', 'DELIVER_ORDER', 'SUPPLIER_DELIVER_ORDER'],
             selectedDocumentStatus: false
@@ -92,12 +99,13 @@ export default {
             type: {
                 required
             },
+            supplier: {},
         }
     },
     methods: {
         submitSearch(){
             if(!this.validate()){ return; }
-            window.open(route('documents.download')+'?type='+this.parameters.type+'&startDate='+this.parameters.startDate+'&endDate='+this.parameters.endDate, '_blank');
+            window.open(route('documents.download')+'?type='+this.parameters.type+'&startDate='+this.parameters.startDate+'&endDate='+this.parameters.endDate+'&supplier='+this.parameters.supplier, '_blank');
         },
         updateDocumentType(documentType) {
             this.parameters.type = documentType;
diff --git a/resources/assets/vue/components/companies/forms/AssignSegmentFormComponent.vue b/resources/assets/vue/components/companies/forms/AssignSegmentFormComponent.vue
index c723631d..667bc76f 100644
--- a/resources/assets/vue/components/companies/forms/AssignSegmentFormComponent.vue
+++ b/resources/assets/vue/components/companies/forms/AssignSegmentFormComponent.vue
@@ -17,7 +17,7 @@
                     </div>
                     <div class="row m-b-15">
                         <div class="col">
-                            <validation-wrapper-component selecatable :validator="$v.parameters.segment_id">
+                            <validation-wrapper-component selectable :validator="$v.parameters.segment_id">
                                 <label>Segment</label>
                                 <selectable-component :endpoint="route('api.segment.list') + '?filters=' + JSON.stringify({'id_not_in': currentSegmentIds})" :section="multiple?'segmentsListSection_'+data.id:'segmentsListSection'" valueColumn="id" :labelColumn="['name']" v-model="parameters.segment_id"></selectable-component>                                
                             </validation-wrapper-component>
diff --git a/resources/assets/vue/components/general/forms/SelectableComponent.vue b/resources/assets/vue/components/general/forms/SelectableComponent.vue
index 95db6af8..acf91b7a 100644
--- a/resources/assets/vue/components/general/forms/SelectableComponent.vue
+++ b/resources/assets/vue/components/general/forms/SelectableComponent.vue
@@ -23,12 +23,17 @@
             valueColumn: {
                 type: String,
                 required: true
+            },
+            options: {
+                default () {
+                    return {}
+                }
             }
         },
         created(){
             if(!this.$store.getters.isInQueue(this.section)){
                 this.$store.dispatch('updateListQueue', {name: this.section});
-                this.$store.dispatch('crudRequest', {endpoint: this.endpoint, method: 'get'}).then(response => {
+                this.$store.dispatch('crudRequest', {endpoint: this.endpoint+'?filters='+JSON.stringify(this.options), method: 'get'}).then(response => {
                     let success = response.ok;
                     response.json().then(response => {
                         if(!success){return;}
diff --git a/resources/assets/vue/components/general/forms/ValidationWrapperComponent.vue b/resources/assets/vue/components/general/forms/ValidationWrapperComponent.vue
index d30fdbaf..285c19ff 100644
--- a/resources/assets/vue/components/general/forms/ValidationWrapperComponent.vue
+++ b/resources/assets/vue/components/general/forms/ValidationWrapperComponent.vue
@@ -2,7 +2,7 @@
     <div class="animate__animated" :class="[{'animate__shake': validator.$error}]">
         <div class="row">
             <div class="col">
-                <div class="form-group no-margin form-group-default" :class="[{' has-error': validator.$error}, {'form-group-default-select2': selecatable}, {'p-b-5': selecatable}]">
+                <div class="form-group no-margin form-group-default" :class="[{' has-error': validator.$error}, {'form-group-default-select2': selectable}, {'p-b-5': selectable}]">
                     <slot></slot>
                 </div>
             </div>
@@ -21,7 +21,7 @@
             validator: {
                 required: true
             },
-            selecatable: {
+            selectable: {
                 type: Boolean,
                 default: false
             }
diff --git a/resources/assets/vue/components/settings/forms/AddCurrencyFormComponent.vue b/resources/assets/vue/components/settings/forms/AddCurrencyFormComponent.vue
index 58ce0e64..380f96f9 100644
--- a/resources/assets/vue/components/settings/forms/AddCurrencyFormComponent.vue
+++ b/resources/assets/vue/components/settings/forms/AddCurrencyFormComponent.vue
@@ -17,7 +17,7 @@
                     </div>
                     <div class="row m-b-15">
                         <div class="col">
-                            <validation-wrapper-component selecatable :validator="$v.parameters.country_short_code">
+                            <validation-wrapper-component selectable :validator="$v.parameters.country_short_code">
                                 <label>Currency</label>
                                 <selectable-component :endpoint="route('api.service.list.countries')" section="countriesListSection" valueColumn="iso_3166_1_alpha2" :labelColumn="['currency', 'name']" v-model="parameters.country_short_code"></selectable-component>
                             </validation-wrapper-component>
diff --git a/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue b/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue
index 5405ae6e..a3ece6fa 100644
--- a/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue
+++ b/resources/assets/vue/components/settings/forms/SegmentServiceFormComponent.vue
@@ -43,7 +43,7 @@
                                 <div class="col p-l-5 p-r-5">
                                     <div class="row">
                                         <div class="col-5 p-r-0">
-                                            <validation-wrapper-component selecatable :validator="$v.custom_field">
+                                            <validation-wrapper-component selectable :validator="$v.custom_field">
                                                 <label>Custom Fields</label>
                                                 <select-component :options="inActiveFields" v-model="custom_field"></select-component>
                                             </validation-wrapper-component>
@@ -115,7 +115,7 @@
                                                     </validation-wrapper-component>
                                                 </div>
                                                 <div class="col-7 p-l-5 p-r-5" v-show="custom_fields.bank_id.active">
-                                                    <validation-wrapper-component selecatable :validator="$v.parameters.configurations.bank_id" >
+                                                    <validation-wrapper-component selectable :validator="$v.parameters.configurations.bank_id" >
                                                         <label>Receivable Bank Account</label>
                                                         <selectable-component :endpoint="route('api.bank.list')+'?filters={%22company_id%22:1}'" section="BankAccountListSection" valueColumn="id" :labelColumn="['bank_name', 'account_no']" v-model="parameters.configurations.bank_id"></selectable-component>
                                                         <div class="absolute lh-10" style="top: 0; right: 0;">
diff --git a/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue b/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue
index 002488cc..d92a8c84 100644
--- a/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue
+++ b/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue
@@ -97,7 +97,7 @@
                                     </validation-wrapper-component>
                                 </div>
                                 <div class="col">
-                                    <validation-wrapper-component selecatable :validator="$v.parameters.configurations.bank_id">
+                                    <validation-wrapper-component selectable :validator="$v.parameters.configurations.bank_id">
                                         <label>Receivable Bank Account</label>
                                         <selectable-component :endpoint="route('api.bank.list')+'?filters={%22company_id%22:1}'" section="BankAccountListSection" valueColumn="id" :labelColumn="['bank_name', 'account_no']" v-model="parameters.configurations.bank_id"></selectable-component>
                                     </validation-wrapper-component>