diff --git a/app/Classes/General/Eloquent/Filters/HasParcelWithTransportBetweenDate.php b/app/Classes/General/Eloquent/Filters/HasParcelWithTransportBetweenDate.php
new file mode 100644
index 00000000..3a86d2e5
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/HasParcelWithTransportBetweenDate.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\Log;
+
+class HasParcelWithTransportBetweenDate implements Filter
+{
+    public static function apply(Builder $builder, $value)
+    {
+        if (is_string($value)) $value = json_decode($value, true) ?? [];
+
+        $start = Carbon::make(data_get($value, 'start_date'))?->startOfDay();
+        $end   = Carbon::make(data_get($value, 'end_date'))?->endOfDay();
+
+        if (!$start && !$end) return $builder;
+        if ($start && $end && $start->gt($end)) [$start, $end] = [$end, $start];
+
+        return $builder->whereHas('transports', function (Builder $q) use ($start, $end) {
+            if ($start && $end && $start->isSameDay($end)) return $q->whereDate('drop_date', $start->toDateString());
+            if ($start && $end) return $q->whereBetween('drop_date', [$start, $end]);
+            return $start
+                ? $q->where('drop_date', '>=', $start)
+                : $q->where('drop_date', '<=', $end);
+        });
+    }
+}
diff --git a/resources/assets/vue/components/companies/elements/WarehouseListExportComponent.vue b/resources/assets/vue/components/companies/elements/WarehouseListExportComponent.vue
index 6f7a3f0c..bc608ca5 100644
--- a/resources/assets/vue/components/companies/elements/WarehouseListExportComponent.vue
+++ b/resources/assets/vue/components/companies/elements/WarehouseListExportComponent.vue
@@ -1,58 +1,74 @@
 <template>
-    <form @submit.prevent="exportData" target="_blank">
-      <div class="form-group row">
-        <label for="start_date" class="col-sm-2 col-form-label">Start Date</label>
-        <div class="col-sm-10">
-          <input type="date" class="form-control" id="start_date" v-model="startDate">
-        </div>
-      </div>
+    <div>
+        <form @submit.prevent="exportData" target="_blank">
+            <div class="form-group row">
+                <label for="start_date" class="col-sm-2 col-form-label">Start Date</label>
+                <div class="col-sm-10">
+                    <input type="date" class="form-control" id="start_date" v-model="startDate" />
+                </div>
+            </div>
 
-      <div class="form-group row">
-        <label for="end_date" class="col-sm-2 col-form-label">End Date</label>
-        <div class="col-sm-10">
-          <input type="date" class="form-control" id="end_date" v-model="endDate">
-        </div>
-      </div>
+            <div class="form-group row">
+                <label for="end_date" class="col-sm-2 col-form-label">End Date</label>
+                <div class="col-sm-10">
+                    <input type="date" class="form-control" id="end_date" v-model="endDate" />
+                </div>
+            </div>
 
-      <div class="form-group row">
-        <div class="col-sm-10 offset-sm-2">
-          <button type="submit" class="btn btn-primary">Export</button>
-        </div>
-      </div>
-    </form>
+            <div class="form-group row">
+                <div class="col-sm-10 offset-sm-2">
+                    <span class="btn btn-white border" @click="searchData">Search</span>
+                    <button type="submit" class="btn btn-primary">Export</button>
+                </div>
+            </div>
+        </form>   
+
+        <list-component :key="parcelComponentFilterKey" :section="section" :endpoint="route('api.packing_list.list')" :options="{packing_list_type: 1, per_page: 20, order_by: {column: 'arrival_date', DESC: true}, with_arrival_date: true, with_arrival_date_check: true, has_parcel_with_transport_between_date: {start_date: startDate, end_date: endDate}}" >
+            <template slot="list" slot-scope="{data}">
+                <parcel-component v-for="packages in data.packages" :data="packages" :key="packages.id" :section="section"></parcel-component>
+            </template>
+        </list-component>     
+    </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        startDate: '',
-        endDate: ''
-      };
-    },
-    methods: {
-        exportData(){
-            const url = route('packing_list.arrived_parcel.export');
-            const queryParams = new URLSearchParams({
-            start_date: this.startDate,
-            end_date: this.endDate
-            }).toString();
+    export default {
+        data() {
+            return {
+                startDate: "",
+                endDate: "",
+                parcelComponentFilterKey: 1,
+                section: "warehouseListSection",
+            };
+        },
+        methods: {
+            exportData() {
+                const url = route("packing_list.arrived_parcel.export");
+                const queryParams = new URLSearchParams({
+                    start_date: this.startDate,
+                    end_date: this.endDate,
+                }).toString();
 
-            if(window.LARAVEL_VAPOR_ENABLED){
-                this.submit(`${url}?${queryParams}`, 'get', this.section, false, false);
-            }
-            else{
-                window.open(`${url}?${queryParams}`, '_blank');
-            }
-        },
-        successHandler(response) {
-            if(window.LARAVEL_VAPOR_ENABLED){
-                if (response.src) {
-                    // window.location.href = response.src;
-                    window.open(response.src, '_blank');
+                if (window.LARAVEL_VAPOR_ENABLED) {
+                    this.submit(`${url}?${queryParams}`, "get", "warehouseListSection", false, false);
+                } else {
+                    window.open(`${url}?${queryParams}`, "_blank");
                 }
+            },
+            successHandler(response) {
+                if (window.LARAVEL_VAPOR_ENABLED) {
+                    if (response.src) {
+                        // window.location.href = response.src;
+                        window.open(response.src, "_blank");
+                    }
+                }
+            },
+
+            searchData(){
+                console.log(this.startDate, this.endDate);
+                console.log(this.parcelComponentFilterKey);
+                this.parcelComponentFilterKey++;
             }
         },
-    }
-  };
+    };
 </script>
diff --git a/resources/views/pages/warehouse_list.blade.php b/resources/views/pages/warehouse_list.blade.php
index 8db747a3..2ea9bedb 100644
--- a/resources/views/pages/warehouse_list.blade.php
+++ b/resources/views/pages/warehouse_list.blade.php
@@ -58,11 +58,11 @@
                 </div>
             </form> -->
 
-            <list-component section="warehouseListSection" :endpoint="route('api.packing_list.list')" :options="{packing_list_type: 1, per_page: 20, order_by: {column: 'arrival_date', DESC: true}, with_arrival_date: true}" >
+            <!-- <list-component section="warehouseListSection" :endpoint="route('api.packing_list.list')" :options="{packing_list_type: 1, per_page: 20, order_by: {column: 'arrival_date', DESC: true}, with_arrival_date: true}" >
                 <template slot="list" slot-scope="{data}">
                     <parcel-component v-for="packages in data.packages" :data="packages" :key="packages.id"></parcel-component>
                 </template>
-            </list-component>
+            </list-component> -->
         </div>
     </div>
 @endsection