diff --git a/app/Classes/General/Eloquent/AbstractListRecord.php b/app/Classes/General/Eloquent/AbstractListRecord.php
index 01e66c29..0d110942 100644
--- a/app/Classes/General/Eloquent/AbstractListRecord.php
+++ b/app/Classes/General/Eloquent/AbstractListRecord.php
@@ -39,6 +39,11 @@ abstract class AbstractListRecord extends AbstractGetRecord
             $query = $query->orderBy($filters->get('order_by')->column, $filters->get('order_by')->DESC ? 'DESC': 'ASC');
         }
 
+        if($filters->has('group_by')){
+            $query = $query->groupBy($filters->get('group_by')->column);
+        }
+
+        //dd($query->toSql());
         return $filters->has('per_page') ? $query->paginate($filters->get('per_page')) : $query->get();
 
     }
diff --git a/app/Classes/General/Eloquent/Filters/CreditTerm.php b/app/Classes/General/Eloquent/Filters/CreditTerm.php
new file mode 100644
index 00000000..c2d5e724
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/CreditTerm.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\SegmentConstants;
+use App\Classes\ValueObjects\Constants\TransactionType;
+use Illuminate\Database\Eloquent\Builder;
+
+class CreditTerm implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return Builder|mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder;
+
+        return $builder->whereHas('packingLists.owner', function($query) use($value) {
+             $query->whereHas('companyModule.connections', function($query) use($value){
+                if ($value) {
+                     $query->whereHas('segments', function($query) {
+                         $query->where('segments.id' , 3);
+                    });
+                }else{
+                     $query->whereDoesntHave('segments', function($query) {
+                         $query->where('segments.id' , 3);
+                    });
+                }
+            });
+        });
+    }
+
+}
diff --git a/app/Classes/General/Eloquent/Filters/PaymentDay.php b/app/Classes/General/Eloquent/Filters/PaymentDay.php
new file mode 100644
index 00000000..14b45e81
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/PaymentDay.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Builder;
+
+class PaymentDay implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->whereHas('transactions', function (Builder $query) use($value) {
+            $query->where('transactions.type', 1)->whereRaw("DATEDIFF(NOW(), transactions.updated_at) <= $value");
+        });
+    }
+}
diff --git a/app/Classes/Modules/Accounts/Services/AuthenticatesUser.php b/app/Classes/Modules/Accounts/Services/AuthenticatesUser.php
index 92f03f38..900c8180 100644
--- a/app/Classes/Modules/Accounts/Services/AuthenticatesUser.php
+++ b/app/Classes/Modules/Accounts/Services/AuthenticatesUser.php
@@ -23,4 +23,4 @@ class AuthenticatesUser
 
     }
 
-}
\ No newline at end of file
+}
diff --git a/resources/assets/vue/components/paymentsBilling/elements/PaymentFilterComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/PaymentFilterComponent.vue
new file mode 100644
index 00000000..f3948361
--- /dev/null
+++ b/resources/assets/vue/components/paymentsBilling/elements/PaymentFilterComponent.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="row" >
+        <div class="col">
+            <loading-component v-if="isLoading"></loading-component>
+            <div class="row" v-if="!isLoading">
+                <div class="col">
+                    <div class="row m-b-15">
+                        <div class="col-8 p-r-0">
+                            <div class="row">
+                                <div class="col p-r-0">
+                                    <div class="form-group no-margin form-group-default b-rad-none">
+                                        <label class="text-primary">Payment Due Days</label>
+                                        <input type="text" class="form-control"  v-model.trim="parameters.due" />
+                                    </div>
+                                </div>
+                                 <div class="col-auto">
+                                    <div class=" no-margin">
+                                        <input type="checkbox" checked="" value="0" id="checkbox2"  v-model.trim="parameters.segment">
+                                        <label for="checkbox2 bold no-margin">Credit terms</label>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                        <div class="col p-l-0">
+                            <div class="btn btn-primary b-rad-none" @click="fetchPaymentList()">
+                                <i class="fa fa-filter lh-40"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+    import LoadingComponent from "../../general/elements/LoadingComponent";
+    export default {
+        components: {LoadingComponent},
+         props: {
+            endpoint: {
+                type: String,
+                required: true
+            },
+         },
+        data(){
+            return {
+                section: 'pendingPaymentSection',
+                isLoading: false,
+                data: null,
+                parameters: {
+                    due: '',
+                    segment: false
+                },
+            }
+        },
+        validations: {
+            due: {},
+        },
+        methods: {
+            fetchPaymentList(){
+
+                this.$store.dispatch('reloadList', {name: this.section});
+                this.$store.dispatch('updateListQueue', {name: this.section, page:1, filters: {per_page:5, group_by: 'DATE(transactions.updated_at)', has_invoice_status_in:[2], payment_day:this.parameters.due, credit_term:this.parameters.segment }});
+
+                //this.$store.dispatch('toggleSection', {name: this.section, status: true});
+                //this.$store.dispatch('updateListQueue', {name: this.section, page:1, filters: {per_page:5, group_by: 'transactions.id', payment_day:this.due,has_invoice_status_in:[2] /*,credit_term:[0.0]*/ }});
+                //let a = this.$store.getters.getListData('pendingPaymentSection');
+                //console.log(a);
+
+                // this.$store.dispatch('crudRequest', {endpoint: this.endpoint, method: 'get',parameters:{name: this.section, page:1, filters: {per_page:5, group_by: 'transactions.id', payment_day:this.due,has_invoice_status_in:[2] /*,credit_term:[0.0]*/ }}}).then(response => {
+
+                //    console.log(response);
+                    // let success = response.ok;
+                    // response.json().then(response => {
+                    //     if(!success){return;}
+
+
+
+                    //     this.$store.dispatch('completeList', {name: this.section, data: a})
+
+                    // });
+                //});
+            },
+
+        }
+    }
+</script>
diff --git a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
index 8c200a60..fbfe5961 100644
--- a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
@@ -120,6 +120,7 @@
                     </div>
                     <div class="row tabsContainer tabContent hide" tab-name="pendingPayment">
                         <div class="col">
+                            <payment-filter-component :endpoint="route('api.packing_list.list')" :data="data"></payment-filter-component>
                             <list-component section="pendingPaymentSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [2]}">
                                 <template slot="list" slot-scope="{data}">
                                     <admin-payments-billing-component :data="data" invoice_status="Pending Payment" section="pendingPaymentSection" ></admin-payments-billing-component>