diff --git a/app/Classes/General/Eloquent/Filters/PackingListOrderedByInvoiceDate.php b/app/Classes/General/Eloquent/Filters/PackingListOrderedByInvoiceDate.php
new file mode 100644
index 00000000..8a034934
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/PackingListOrderedByInvoiceDate.php
@@ -0,0 +1,29 @@
+<?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 App\Models\PackingList;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\DB;
+
+class PackingListOrderedByInvoiceDate implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return Builder|mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->join('transactions', function($join){
+            $join->on('transactions.owner_id', '=', 'packing_lists.id');
+            $join->on('transactions.owner_type', '=', PackingList::class);
+            $join->on('transactions.status', '=', ApprovalStatus::APPROVED);
+        })->orderBy('transactions.updated_at');
+    }
+
+}
diff --git a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
index b4d5fd4c..3a0175f7 100644
--- a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
@@ -121,7 +121,7 @@
                     <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], order_by: {column: 'updated_at', DESC: true}}">
+                            <list-component section="pendingPaymentSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [2], packing_list_ordered_by_invoice_date: true}">
                                 <template slot="list" slot-scope="{data}">
                                     <admin-payments-billing-component :data="data" invoice_status="Pending Payment" section="pendingPaymentSection" ></admin-payments-billing-component>
                                 </template>