diff --git a/app/Classes/Modules/Addresses/ControllersLogic/ListStatesLogic.php b/app/Classes/Modules/Addresses/ControllersLogic/ListStatesLogic.php
new file mode 100644
index 00000000..3d6c484f
--- /dev/null
+++ b/app/Classes/Modules/Addresses/ControllersLogic/ListStatesLogic.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Classes\Modules\Addresses\ControllersLogic;
+
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Addresses\Services\ListsAddresses;
+use App\Classes\Modules\Addresses\Services\ListsStates;
+use App\Classes\Modules\Addresses\Standards\Rules\CanListAddresses;
+use App\Http\Resources\AddressResource;
+use App\Http\Resources\StateResource;
+use ErrorException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class ListStatesLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Retrieved Addresses',
+            'message' => 'You have successfully retrieved a list of Addresses'
+        ];
+    }
+
+    /** @var ListsStates */
+    private $listStates;
+
+    /**
+     * ListStatesLogic constructor.
+     * @param ListsStates $listStates
+     */
+    public function __construct(ListsStates $listStates)
+    {
+        $this->listStates = $listStates;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $query = $this->listStates->execute($this->listStates->deserializeFilters($request->input('filters')));
+
+        return $this->collectionResponse(StateResource::collection($query));
+
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Addresses/Services/ListsStates.php b/app/Classes/Modules/Addresses/Services/ListsStates.php
new file mode 100644
index 00000000..5591b823
--- /dev/null
+++ b/app/Classes/Modules/Addresses/Services/ListsStates.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Classes\Modules\Addresses\Services;
+
+
+use App\Classes\General\Eloquent\AbstractListRecord;
+use App\Models\State;
+use Illuminate\Database\Eloquent\Builder;
+
+class ListsStates extends AbstractListRecord
+{
+
+    /** @var State */
+    private $repository;
+
+    /**
+     * ListsStates constructor.
+     * @param State $repository
+     */
+    public function __construct(State $repository)
+    {
+        $this->repository = $repository;
+    }
+
+
+    /**
+     * @return Builder
+     */
+    function getRepository(): Builder
+    {
+        return $this->repository->newQuery();
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Orders/Processors/UpdateDoFromVTPortalProcessor.php b/app/Classes/Modules/Orders/Processors/UpdateDoFromVTPortalProcessor.php
index 74fb7f62..980ebf01 100644
--- a/app/Classes/Modules/Orders/Processors/UpdateDoFromVTPortalProcessor.php
+++ b/app/Classes/Modules/Orders/Processors/UpdateDoFromVTPortalProcessor.php
@@ -74,7 +74,6 @@ class UpdateDoFromVTPortalProcessor
                 $vt_do = $this->fetchesDataFRomVTPortal->clientRequest('http://portal.vtnation.com.my/Services/DataControllerService.asmx/GetPage', 'POST', json_decode('{"controller":"Do","view":"grid1","request":{"PageIndex":-1,"PageSize":10000,"Filter": ["FullMarking:$contains$%js%\"' . $order->reference . '\"\u0000"]}}'), '');
 
                 $vt_do = $this->fetchesDataFRomVTPortal->getResponseBody($vt_do);
-
                 if ($vt_do) {
                     foreach ($vt_do->Rows as $key => $row) {
                         $vt_do_update = $this->fetchesDataFRomVTPortal->clientRequest(
@@ -91,7 +90,7 @@ class UpdateDoFromVTPortalProcessor
                                 "Values": [
                                     {
                                         "Name": "ShippingAddress",
-                                        "NewValue": "' . $address->street_one . ' ' . $address->street_two  . ' '. $address->district->name.' '. $address->post_code.' '.$address->state->name.' '.$address->country->name.'",
+                                        "NewValue": "' . $address->street_one . ' ' . $address->street_two  . ' '. $address->district->name.' '. $address->postcode.' '.$address->state->name.' '.$address->country->name.'",
                                         "Modified": true,
                                         "ReadOnly": false,
                                         "Error": null
diff --git a/app/Classes/Modules/Orders/Processors/UpdateDoFromYDPortalProcessor.php b/app/Classes/Modules/Orders/Processors/UpdateDoFromYDPortalProcessor.php
index 2f732ffd..1404f149 100644
--- a/app/Classes/Modules/Orders/Processors/UpdateDoFromYDPortalProcessor.php
+++ b/app/Classes/Modules/Orders/Processors/UpdateDoFromYDPortalProcessor.php
@@ -45,25 +45,15 @@ class UpdateDoFromYDPortalProcessor
 
             foreach ($packing_lists as $key => $row) {
                 if ($row->status === ApprovalStatus::SUSPENDED) {
-                    $this->fetchesDataFRomYDPortal->clientRequest(
-                        'http://www.yd-wl.com/api/UpdateOrderAddress.ashx',
-                        'POST',
-                        [
-                            'expressno' => $row->reference,
-                            'customers_name' => '',
-                            'cellphone' => '',
-                            'postcode' => '',
-                            'streetAddress' => ''
-                        ]);
-
-
                     continue;
                 }
 
                 $contact = $address->contacts()->first();
+                $remark = $address->remarks()->first();
 
                 $phone = $contact ? $contact->phone : null;
                 $reference = $contact ? $contact->reference : null;
+                $remark = $remark ? $remark->content :  'URGENT!!! PLEASE CALL BEFORE ONE DAY DELIVERY.';
 
                 $this->fetchesDataFRomYDPortal->clientRequest(
                 'http://www.yd-wl.com/api/UpdateOrderAddress.ashx', 
@@ -73,7 +63,7 @@ class UpdateDoFromYDPortalProcessor
                     'customers_name' => $reference,
                     'cellphone' => $phone,
                     'postcode' => $address->postcode,
-                    'streetAddress' => $address->street_one . ' ' . $address->street_two  . ' '. $address->district->name.' '. $address->post_code.' '.$address->state->name.' '.$address->country->name.' '.$address->postcode
+                    'streetAddress' => $address->street_one . ' ' . $address->street_two  . ' '. $address->district->name.' '. $address->post_code.' '.$address->state->name.' '.$address->country->name.' '.$address->postcode.' || '.$remark
 
                 ]);
 
diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/UpdatePackingListStatusLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/UpdatePackingListStatusLogic.php
index d7d8a8a4..4eb67646 100644
--- a/app/Classes/Modules/PackingLists/ControllersLogic/UpdatePackingListStatusLogic.php
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/UpdatePackingListStatusLogic.php
@@ -11,6 +11,7 @@ use App\Classes\Modules\PackingLists\Services\UpdatesPackingListStatus;
 use App\Classes\Modules\PackingLists\Standards\Rules\CanUpdatePackingList;
 use App\Classes\Modules\PackingLists\DataTransferObjects\PackingListObject;
 use App\Classes\Modules\Orders\Processors\UpdateDoFromVTPortalProcessor;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Classes\ValueObjects\Constants\OrderRoleTypes;
 use App\Http\Resources\PackingListResource;
 use ErrorException;
@@ -70,7 +71,8 @@ class UpdatePackingListStatusLogic extends AbstractControllerLogic
         $packingList = $this->fetchesPackingList->execute(['id' => $request->route('id')]);
 
         $packing_list = $this->updatesPackingListStatus->execute($packingList, $request->route('status'));
-        $address = $packing_list->owner()->first()->addresses()->first();
+        $address = $packing_list->owner()->first()->addresses()->where('status', ApprovalStatus::APPROVED)->first();
+
 
         $appointee = $address->owner->orderRoles()->where('role_id', '=', OrderRoleTypes::ORIGIN_FREIGHT_FORWARDER)->first()->appointee->id;
         $appointee === 2  ? $this->updateDoFromVTPortalProcessor->execute($address) : $this->updateDoFromYDPortalProcessor->execute($address);
diff --git a/app/Http/Controllers/Addresses/ListStatesController.php b/app/Http/Controllers/Addresses/ListStatesController.php
new file mode 100644
index 00000000..dee2d1c6
--- /dev/null
+++ b/app/Http/Controllers/Addresses/ListStatesController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Addresses;
+
+use App\Classes\Modules\Addresses\ControllersLogic\ListStatesLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class ListStatesController
+{
+    /**
+     * @param Request $request
+     * @param ListStatesLogic $logic
+     * @return JsonResponse
+     */
+    public function list(Request $request, ListStatesLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
\ No newline at end of file
diff --git a/app/Http/Resources/CompanyResource.php b/app/Http/Resources/CompanyResource.php
index 38459a35..6d16651b 100644
--- a/app/Http/Resources/CompanyResource.php
+++ b/app/Http/Resources/CompanyResource.php
@@ -28,10 +28,10 @@ class CompanyResource extends JsonResource
             'business_type' => (int) $this->business_type,
             'status' => (int) $this->status,
             'contact' => new ContactResource ($this->when($this->has('contacts'), $this->contacts->first())),
-            'employee' => new UserResource($companyModule->employees()->first()),
+            'employee' => (int) $this->business_type == 1 ? new UserResource($companyModule->employees()->first()) : '',
             'company_module' => new CompanyModuleResource($companyModule),
-            'last_order' => new OrderResource($companyModule ? $companyModule->orders()->orderBy('id', 'DESC')->first(): null),
-            'order_count' => $this->orders()->count(),
+            'last_order' => (int) $this->business_type == 1 ? new OrderResource($companyModule ? $companyModule->orders()->orderBy('id', 'DESC')->first(): null) : '',
+            'order_count' => (int) $this->business_type == 1 ? $this->orders()->count() : '',
             'identification' => new DocumentResource($this->documents->whereIn('document_type', DocumentType::IDENTIFICATION_DOCUMENTS)->whereIn('status', [ApprovalStatus::PENDING_VERIFICATION, ApprovalStatus::APPROVED])->first()),
             'created_at' => $this->created_at->format('d-m-Y')
 
diff --git a/app/Http/Resources/StateResource.php b/app/Http/Resources/StateResource.php
new file mode 100644
index 00000000..b9d71dae
--- /dev/null
+++ b/app/Http/Resources/StateResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class StateResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+            'country' => $this->country,
+        ];
+    }
+}
diff --git a/app/Models/State.php b/app/Models/State.php
index fa920454..3f7036ac 100644
--- a/app/Models/State.php
+++ b/app/Models/State.php
@@ -2,7 +2,7 @@
 
 namespace App\Models;
 
-use Illuminate\Database\Eloquent\Relations\HasOne;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\SoftDeletes;
 
 /**
@@ -21,10 +21,10 @@ class State extends AbstractModel
     protected $dates = ['deleted_at'];
 
     /**
-     * @return HasOne
+     * @return BelongsTo
      */
-    public function country(): HasOne
+    public function country(): BelongsTo
     {
-        return $this->hasOne(Country::class, 'country_id', 'id');
+        return $this->belongsTo(Country::class, 'country_id', 'id');
     }
 }
diff --git a/resources/assets/sass/modules/_typography.scss b/resources/assets/sass/modules/_typography.scss
index dbc80e6f..a22dc2fc 100644
--- a/resources/assets/sass/modules/_typography.scss
+++ b/resources/assets/sass/modules/_typography.scss
@@ -643,6 +643,10 @@ hr{
     cursor: pointer !important;
 }
 
+.not-allowed {
+    cursor: not-allowed !important;
+}
+
 /* Labels
 ------------------------------------
 */
diff --git a/resources/assets/vue/components/general/forms/SelectableComponent.vue b/resources/assets/vue/components/general/forms/SelectableComponent.vue
index ab0ed0b5..d86c35cc 100644
--- a/resources/assets/vue/components/general/forms/SelectableComponent.vue
+++ b/resources/assets/vue/components/general/forms/SelectableComponent.vue
@@ -34,7 +34,7 @@
                         if(!success){return;}
 
                         let vm = this;
-                        let mappedList = $.map(response.payload.data, function(value){
+                        let mappedList = response.payload.data.map(function(value){
                             let preservedValue = value;
                             return {'id': !isNaN(value[vm.valueColumn]) ? parseInt(value[vm.valueColumn]) : value[vm.valueColumn],
                                 'text': vm.labelColumn.map(function(label){
diff --git a/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue b/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue
new file mode 100644
index 00000000..0175534f
--- /dev/null
+++ b/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue
@@ -0,0 +1,290 @@
+<template>
+    <div class="row">
+        <div class="col no-margin">
+            <div class="row m-b-15">
+                <div class="col-sm-4">
+                    <label>Order No:</label>
+                    <input type="text" class="form-control form-input" placeholder="12345678" v-model="filters.reference_like">
+                </div>
+                <div class="col-sm-4">
+                    <label>Order Status:</label>
+                    <div class="col">
+                        <div class="row m-b-5 m-r-10">
+                            <div class="col p-l-0 p-r-0">
+                                <div class="btn btn-xs b-grey btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="orderStatusFilterDropDownStatus = !orderStatusFilterDropDownStatus">
+                                    <div class="row">
+                                        <div class="col p-t-5 p-b-5 fs-11">
+                                            {{orderStatus}}
+                                        </div>
+                                        <div class="col-auto b-l b-success">
+                                            <div class="row h-100 align-items-center">
+                                                <div class="col">
+                                                    <i class="fa" :class="[{'fa-angle-down': !orderStatusFilterDropDownStatus}, {'fa-angle-up': orderStatusFilterDropDownStatus}]"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="relative w-100">
+                                    <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !orderStatusFilterDropDownStatus}]" style="top: 100%; right: 0; z-index: 1;">
+                                        <div class="row text-left no-margin bg-white">
+                                            <div class="col no-padding">
+                                                <div class="row no-margin" v-for="status in orderStatusFilterArray">
+                                                    <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': orderStatus === status}, {'text-white': orderStatus === status}, {'hover-primary': orderStatus !== status}, {'pointer': orderStatus !== status}]" @click="updateOrderStatusFilter(status)">
+                                                        <div class="row align-items-center justify-content-center">
+                                                            <div class="col">
+                                                                <div class="font-heading fs-11">{{status}}</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
+            <div class="row" v-show="!$store.getters.isLoading(section)">
+                <div class="col">
+                    <div class="row m-b-15">
+                        <div class="col-auto p-r-5">
+                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none" @click="updateFilters(filters)">
+                                <div class="row align-items-center">
+                                    <div class="col p-r-5">Search</div>
+                                    <div class="col-auto p-l-10">
+                                        <i class="fa fa-search fs-16"></i>
+                                    </div>
+                                </div>
+                            </button>
+                        </div>
+                        <div class="col-auto p-l-5">
+                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-secondary b-rad-none bg-secondary" @click="resetFilter()">
+                                <div class="row align-items-center">
+                                    <div class="col p-r-5 text-white">Reset</div>
+                                    <div class="col-auto p-l-10">
+                                        <i class="fa fa-refresh fs-16 text-white"></i>
+                                    </div>
+                                </div>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="row" key="2" v-show="!$store.getters.isLoading(section)">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <table class="display w-100 m-b-10">
+                                                <thead>
+                                                    <tr>
+                                                        <th class="padding-10 b-a b-grey bg-master-light pointer" :class="[{'bg-primary-lighter': filters.order_by.column == 'reference'}]" @click="updateOrderBy('reference')">Order No <i class="fa float-right" :class="[{'fa-angle-down': filters.order_by.column == 'reference' && filters.order_by.DESC == false}, {'fa-angle-up': filters.order_by.column == 'reference' && filters.order_by.DESC == true}]"></i></th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Warehouse</th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Delivery Address</th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Marking</th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light pointer" :class="[{'bg-primary-lighter': filters.order_by.column == 'created_at'}]" @click="updateOrderBy('created_at')">Date <i class="fa float-right" :class="[{'fa-angle-down': filters.order_by.column == 'created_at' && filters.order_by.DESC == false}, {'fa-angle-up': filters.order_by.column == 'created_at' && filters.order_by.DESC == true}]"></i></th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Total CBM</th>
+                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed"></th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr v-for="data in $store.getters.getListData(section)">
+                                                        <td class="padding-10 b-a b-grey">{{data.reference}}</td>
+                                                        <td class="padding-10 b-a b-grey">{{data.warehouse.name}} {{$store.getters.isAdmin ? data.warehouse.reference : ''}}</td>
+                                                        <td class="padding-10 b-a b-grey">{{data.address.reference}} <i class="fa fa-info-circle float-right" data-html="true" v-tooltip:right="'<h6 class=\'text-white text-left fs-13 m-t-0 m-b-5 semi-bold\'>'+data.address.reference+'</h6><p class=\'text-white text-left lh-17 no-margin\'>'+data.address.street_one+' '+(data.address.street_two ? data.address.street_two : '')+', '+ data.address.district.name+', '+data.address.post_code+' '+data.address.state.name+', '+data.address.country.name+'</p>'" ></i></td>
+                                                        <td class="padding-10 b-a b-grey"><a :href="route('customer.profile', data.company_module.marking)">{{data.company_module.marking}}</a></td>
+                                                        <td class="padding-10 b-a b-grey">{{data.created_at}}</td>
+                                                        <td class="padding-10 b-a b-grey">{{(Math.ceil((data.parcels.origin_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.in_transit_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.delivered_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}</td>
+                                                            <td class="padding-10 b-a b-grey"><a :href="route('order.show', data.reference)"><i class="fa fa-eye pointer"></i></a></td>
+                                                    </tr>
+                                                    <tr v-show="metaData.total === 0">
+                                                        <td class="b-a b-grey" colspan="7">
+                                                            <div class="row align-items-center justify-content-center p-t-50 p-b-50">
+                                                                <div class="col-10">
+                                                                    <div class="row align-items-center justify-content-center  hint-text">
+                                                                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
+                                                                    </div>
+                                                                    <div class="row text-center">
+                                                                        <div class="col">
+                                                                            <div class="row m-t-20">
+                                                                                <div class="col">
+                                                                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="row m-t-5 align-items-center justify-content-center hide">
+                                                                                <div class="col">
+                                                                                    <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col d-flex justify-content-center flex-column">
+                                            <span>Showing {{metaData.from}} to {{metaData.to}} of {{metaData.total}} entries</span>
+                                        </div>
+                                        <div class="col d-flex justify-content-end align-items-center">
+                                            <div class="m-r-10">Show</div>
+                                            <div class="row m-b-5 m-r-10">
+                                                <div class="col p-r-0">
+                                                    <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="perPageFilterDropDownStatus = !perPageFilterDropDownStatus">
+                                                        <div class="row">
+                                                            <div class="col p-t-5 p-b-5 fs-9">
+                                                                {{filters.per_page}}
+                                                            </div>
+                                                            <div class="col-auto b-l b-success">
+                                                                <div class="row h-100 align-items-center">
+                                                                    <div class="col">
+                                                                        <i class="fa" :class="[{'fa-angle-down': !perPageFilterDropDownStatus}, {'fa-angle-up': perPageFilterDropDownStatus}]"></i>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="relative w-100">
+                                                        <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !perPageFilterDropDownStatus}]" style="top: 100%; right: 0; z-index: 1;">
+                                                            <div class="row text-left no-margin bg-white">
+                                                                <div class="col no-padding">
+                                                                    <div class="row no-margin" v-for="num in pageFilterArray">
+                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': filters.per_page === num}, {'text-white': filters.per_page === num}, {'hover-primary': filters.per_page !== num}, {'pointer': filters.per_page !== num}]" @click="updatePerPageFilter(num)">
+                                                                            <div class="row align-items-center justify-content-center">
+                                                                                <div class="col">
+                                                                                    <div class="font-heading">{{num}}</div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div>entries</div> 
+                                        </div>
+                                        <div class="col-auto" v-show="filters.per_page < metaData.total">
+                                            <pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data(){
+            return {
+                section: 'ListOrderTableSection',
+                emptyListSection: false,
+                pageFilterArray: [2, 5, 10, 20, 50],
+                perPageFilterDropDownStatus: false,
+                orderStatus: 'Active',
+                orderStatusFilterArray: ['Active', 'Complete', 'Pending Verification', 'Cancelled'],
+                orderStatusFilterDropDownStatus: false,
+                filters: {
+                    per_page: 2, 
+                    status_in: [1], 
+                    with_packing_lists: true,
+                    reference_like: '',
+                    order_by: {
+                        column: 'id',
+                        DESC: false,
+                    },
+                },
+                metaData: {
+                    from: null,
+                    to: null,
+                    total: null,
+                    current_page: null,
+                },
+            }
+        },
+        created(){
+            this.setDecoratorDefault();
+            this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
+        },
+        computed: {
+            pendingList () {
+                return this.$store.getters.isInCompleteQueue(this.section);
+            }
+        },
+        watch: {
+            pendingList(inComplete){
+                if(inComplete){
+                    this.fetchList();
+                }
+            }
+        },
+        methods: {
+            fetchList(){
+                let listDecorators = this.$store.getters.getListDetails(this.section);
+                this.submit(this.route('api.order.list') + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
+            },
+            updateOrderBy(field) {
+                field == this.filters.order_by.column ? this.filters.order_by.DESC = !this.filters.order_by.DESC  : '';
+                this.filters.order_by.column = field;
+                this.updateFilters(this.filters);
+            },
+            updateOrderStatusFilter(status) {
+                this.orderStatusFilterDropDownStatus = false;
+                this.orderStatus = status;
+
+                switch(status) {
+                    case 'Active':
+                        this.filters.status_in = [2];
+                        break;
+
+                    case 'Complete':
+                        this.filters.status_in = [3];
+                        break;
+
+                    case 'Pending Verification':
+                        this.filters.status_in = [1];
+                        break;
+                        
+                    case 'Cancelled':
+                        this.filters.status_in = [4, 5, 6];
+                        break;
+                }
+
+                this.updateFilters(this.filters);
+            },
+            updatePerPageFilter(number) {
+                this.perPageFilterDropDownStatus = false;
+                this.filters.per_page = parseInt(number);
+                this.updateFilters(this.filters);
+            },
+            updateFilters(filters){
+                this.filters = filters;
+                this.setDecoratorDefault();
+                this.submit(route('api.order.list') + '?page=' + this.metaData.current_page + '&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
+                this.$refs.pagination.makePagination(response.payload.meta, response.payload.links);
+                this.metaData = response.payload.meta;
+            },
+            resetFilter() {
+                this.filters.order_by.column = 'id';
+                this.filters.order_by.DESC = false;
+                this.filters.reference_like = '';
+                this.updateFilters(this.filters);
+            },
+        }
+    }
+</script>
diff --git a/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue b/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
index 101eca6a..a23f3a7c 100644
--- a/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
+++ b/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
@@ -40,7 +40,7 @@
     export default {
         props: {
             data: {
-                type: Object,
+                type: String,
                 required: false
             },
             section: {
diff --git a/resources/assets/vue/components/settings/elements/StatesChargesComponent.vue b/resources/assets/vue/components/settings/elements/StatesChargesComponent.vue
new file mode 100644
index 00000000..9e58b60d
--- /dev/null
+++ b/resources/assets/vue/components/settings/elements/StatesChargesComponent.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="row m-b-15 parentContainer">
+        <div class="col">
+            <div class="row align-items-center">
+                <div class="col-auto p-r-0">
+                    <div class="padding-5 bg-master-lightest">
+                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#333333"><path d="M15.05,25.8v105.35h4.3v2.15c0,3.53669 2.91331,6.45 6.45,6.45h50.5376c1.67444,3.75213 5.30105,6.45 9.6624,6.45c4.36203,0 7.98734,-2.69797 9.6624,-6.45h50.5376c3.53669,0 6.45,-2.91331 6.45,-6.45v-2.15h4.3v-105.35h-64.5c-2.60352,0 -4.86855,1.23893 -6.45,3.08643c-1.58145,-1.8475 -3.84648,-3.08643 -6.45,-3.08643zM19.35,30.1h60.2c2.40083,0 4.3,1.89917 4.3,4.3c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-2.40083 1.89917,-4.3 4.3,-4.3h60.2v96.75h-60.2c-2.60352,0 -4.86855,1.23893 -6.45,3.08643c-1.58145,-1.8475 -3.84648,-3.08643 -6.45,-3.08643h-60.2zM86,40.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,49.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM119.68193,53.57363v4.12783c-8.0754,0.7482 -12.97979,5.32437 -12.97979,12.23232c0,5.8351 3.64818,9.8429 10.31748,11.54785l2.66231,0.68867v13.63906c-4.45695,-0.50955 -7.33113,-2.99253 -7.62998,-6.55078h-6.33662c0.0301,6.9402 5.41175,11.63533 13.9666,12.20293v3.88428h4.09844v-3.91367c8.7634,-0.7482 13.81963,-5.32289 13.81963,-12.65224c0,-6.192 -3.53195,-9.99125 -11.03975,-11.8166l-2.77988,-0.62568v-12.8958c3.9474,0.47945 6.64034,3.04917 6.76074,6.34082h6.24844c-0.1806,-6.67145 -5.26273,-11.39315 -13.00918,-12.08115v-4.12783zM86,58.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM119.68193,63.4124v12.05596c-4.3086,-0.8686 -6.58018,-2.99112 -6.58018,-6.07207c0,-3.26155 2.75103,-5.77534 6.58018,-5.98389zM86,66.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,75.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM123.78037,82.94717c5.08475,1.01695 7.44521,3.07924 7.44521,6.52139c0,3.79905 -2.71951,6.12871 -7.44521,6.39961zM86,83.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,92.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,101.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,109.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,118.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM23.65,131.15h55.9c2.40083,0 4.3,1.89917 4.3,4.3h4.3c0,-2.40083 1.89917,-4.3 4.3,-4.3h55.9v2.15c0,1.21481 -0.93519,2.15 -2.15,2.15h-53.56523l-0.41992,1.6083c-0.72235,2.78276 -3.19533,4.8417 -6.21484,4.8417c-3.01952,0 -5.49455,-2.05645 -6.21484,-4.8375l-0.41992,-1.6125h-53.56523c-1.21481,0 -2.15,-0.93519 -2.15,-2.15z"></path></g></g></svg>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-10">
+                            <div class="font-heading all-caps fs-8 muted">State</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="font-heading all-caps">{{data.name}}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-10">
+                            <div class="font-heading all-caps fs-8 muted">City Center Charges</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="font-heading all-caps">MYR 0.00</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-10">
+                            <div class="font-heading all-caps fs-8 muted">Outskirt Charges</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="font-heading all-caps">MYR 0.00</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <div class="row">
+                        <div class="col">
+                            <div class="btn btn-xs btn-primary pointer m-t-10 requestModal" data-type="editCharges">Edit</div>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editCharges">
+                                <edit-state-charges-form-component :data="data"></edit-state-charges-form-component>
+                            </modal-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: false
+            },
+            section: {
+                default: ''
+            },
+        },
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/settings/elements/WarehouseChargesComponent.vue b/resources/assets/vue/components/settings/elements/WarehouseChargesComponent.vue
new file mode 100644
index 00000000..59611841
--- /dev/null
+++ b/resources/assets/vue/components/settings/elements/WarehouseChargesComponent.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="row m-b-15 parentContainer">
+        <div class="col">
+            <div class="row align-items-center">
+                <div class="col-auto p-r-0">
+                    <div class="padding-5 bg-master-lightest">
+                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#333333"><path d="M15.05,25.8v105.35h4.3v2.15c0,3.53669 2.91331,6.45 6.45,6.45h50.5376c1.67444,3.75213 5.30105,6.45 9.6624,6.45c4.36203,0 7.98734,-2.69797 9.6624,-6.45h50.5376c3.53669,0 6.45,-2.91331 6.45,-6.45v-2.15h4.3v-105.35h-64.5c-2.60352,0 -4.86855,1.23893 -6.45,3.08643c-1.58145,-1.8475 -3.84648,-3.08643 -6.45,-3.08643zM19.35,30.1h60.2c2.40083,0 4.3,1.89917 4.3,4.3c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-2.40083 1.89917,-4.3 4.3,-4.3h60.2v96.75h-60.2c-2.60352,0 -4.86855,1.23893 -6.45,3.08643c-1.58145,-1.8475 -3.84648,-3.08643 -6.45,-3.08643h-60.2zM86,40.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,49.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM119.68193,53.57363v4.12783c-8.0754,0.7482 -12.97979,5.32437 -12.97979,12.23232c0,5.8351 3.64818,9.8429 10.31748,11.54785l2.66231,0.68867v13.63906c-4.45695,-0.50955 -7.33113,-2.99253 -7.62998,-6.55078h-6.33662c0.0301,6.9402 5.41175,11.63533 13.9666,12.20293v3.88428h4.09844v-3.91367c8.7634,-0.7482 13.81963,-5.32289 13.81963,-12.65224c0,-6.192 -3.53195,-9.99125 -11.03975,-11.8166l-2.77988,-0.62568v-12.8958c3.9474,0.47945 6.64034,3.04917 6.76074,6.34082h6.24844c-0.1806,-6.67145 -5.26273,-11.39315 -13.00918,-12.08115v-4.12783zM86,58.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM119.68193,63.4124v12.05596c-4.3086,-0.8686 -6.58018,-2.99112 -6.58018,-6.07207c0,-3.26155 2.75103,-5.77534 6.58018,-5.98389zM86,66.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,75.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM123.78037,82.94717c5.08475,1.01695 7.44521,3.07924 7.44521,6.52139c0,3.79905 -2.71951,6.12871 -7.44521,6.39961zM86,83.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,92.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,101.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,109.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,118.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM23.65,131.15h55.9c2.40083,0 4.3,1.89917 4.3,4.3h4.3c0,-2.40083 1.89917,-4.3 4.3,-4.3h55.9v2.15c0,1.21481 -0.93519,2.15 -2.15,2.15h-53.56523l-0.41992,1.6083c-0.72235,2.78276 -3.19533,4.8417 -6.21484,4.8417c-3.01952,0 -5.49455,-2.05645 -6.21484,-4.8375l-0.41992,-1.6125h-53.56523c-1.21481,0 -2.15,-0.93519 -2.15,-2.15z"></path></g></g></svg>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-10">
+                            <div class="font-heading all-caps fs-8 muted">Warehouse Name</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="font-heading all-caps">{{data.name}}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-10">
+                            <div class="font-heading all-caps fs-8 muted">Extra Charges</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="font-heading all-caps">MYR 0.00</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <div class="row">
+                        <div class="col">
+                            <div class="btn btn-xs btn-primary pointer m-t-10 requestModal" data-type="editWarehouseCharges">Edit</div>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editWarehouseCharges">
+                                <edit-warehouse-charges-form-component :data="data"></edit-warehouse-charges-form-component>
+                            </modal-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: false
+            },
+            section: {
+                default: ''
+            },
+        },
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/settings/forms/EditStateChargesFormComponent.vue b/resources/assets/vue/components/settings/forms/EditStateChargesFormComponent.vue
new file mode 100644
index 00000000..ac4052c6
--- /dev/null
+++ b/resources/assets/vue/components/settings/forms/EditStateChargesFormComponent.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="row m-b-10">
+                <div class="col">
+                    <h2 class="text-center bold">{{data.name}}</h2>
+                </div>
+            </div>
+            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.cityCenterCharges">
+                <label class="text-primary">City Center Charges (MYR)</label>
+                <div class="controls">
+                    <input type="text" class="form-control fs-12" v-model="cityCenterCharges">
+                </div>
+            </validation-wrapper-component>
+            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.outskirtCharges">
+                <label class="text-primary">Outskirt Charges (MYR)</label>
+                <div class="controls">
+                    <input type="text" class="form-control fs-12" v-model="outskirtCharges">
+                </div>
+            </validation-wrapper-component>
+            <div class="row m-t-15">
+                <div class="col-auto p-r-5">
+                    <div class="btn btn-lg btn-default b-rad-none" data-dismiss="modal">Cancel</div>
+                </div>
+                <div class="col p-l-5">
+                    <!-- <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.assign.order', data, orderNo), 'put', section, true, true)">Confirm</div> -->
+                    <div class="btn btn-primary w-100 btn-lg">Confirm</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: false
+            },
+            section: {
+                default: ''
+            },
+        },
+        data() {
+            return {
+                cityCenterCharges: '', 
+                outskirtCharges : '', 
+            };
+        },
+        validations: {
+            parameters: {
+                cityCenterCharges: { required },
+                outskirtCharges: { required },
+            }
+        },
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/settings/forms/EditWarehouseChargesFormComponent.vue b/resources/assets/vue/components/settings/forms/EditWarehouseChargesFormComponent.vue
new file mode 100644
index 00000000..a078576f
--- /dev/null
+++ b/resources/assets/vue/components/settings/forms/EditWarehouseChargesFormComponent.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="row m-b-10">
+                <div class="col">
+                    <h2 class="text-center">{{data.name}}</h2>
+                </div>
+            </div>
+            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.extraCharges">
+                <label class="text-primary">Extra Charges (MYR)</label>
+                <div class="controls">
+                    <input type="text" class="form-control fs-12" v-model="extraCharges">
+                </div>
+            </validation-wrapper-component>
+            <div class="row m-t-15">
+                <div class="col-auto p-r-5">
+                    <div class="btn btn-lg btn-default b-rad-none" data-dismiss="modal">Cancel</div>
+                </div>
+                <div class="col p-l-5">
+                    <!-- <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.assign.order', data, orderNo), 'put', section, true, true)">Confirm</div> -->
+                    <div class="btn btn-primary w-100 btn-lg">Confirm</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: false
+            },
+            section: {
+                default: ''
+            },
+        },
+        data() {
+            return {
+                extraCharges: '', 
+            };
+        },
+        validations: {
+            parameters: {
+                extraCharges: { required },
+            }
+        },
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue b/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue
index 002488cc..eac2a388 100644
--- a/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue
+++ b/resources/assets/vue/components/settings/forms/ServiceFormComponent.vue
@@ -22,7 +22,7 @@
                                 <input type="text" class="form-control" v-model="parameters.name">
                             </validation-wrapper-component>
                         </div>
-                        <div class="col-auto pointer bg-master-lightest m-r-10" @click="parameters.configurations.billable = !parameters.configurations.billable">
+                        <div class="col-auto pointer bg-master-lightest m-r-10 d-none" @click="parameters.configurations.billable = !parameters.configurations.billable">
                             <div class="row h-100 align-items-center">
                                 <div class="col-auto p-r-0">
                                     <div class="icon-thumbnail fs-12 icon-25 btn-rounded" :class="[{'bg-success': parameters.configurations.billable}, {'bg-white': !parameters.configurations.billable}]">
@@ -59,11 +59,17 @@
                     <div class="row m-b-20">
                         <div class="col">
                             <div class="row m-b-10">
-                                <div class="col p-r-5">
+                                <!-- <div class="col p-r-5">
                                     <validation-wrapper-component :validator="$v.parameters.configurations.service_charge.value">
                                         <label>Service Charge</label>
                                         <input type="text" class="form-control" v-model.lazy="parameters.configurations.service_charge.value"  v-money="percentage">
                                     </validation-wrapper-component>
+                                </div> -->
+                                <div class="col p-r-5">
+                                    <validation-wrapper-component :validator="$v.parameters.configurations.service_charge.value">
+                                        <label>Price Per CBM</label>
+                                        <input type="text" class="form-control" v-model.lazy="parameters.configurations.service_charge.value"  v-money="percentage">
+                                    </validation-wrapper-component>
                                 </div>
                                 <div class="col p-l-5 p-r-20">
                                     <div class="row">
@@ -82,14 +88,14 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col p-l-5" v-show="parameters.configurations.billable">
+                                <div class="col p-l-5 d-none" v-show="parameters.configurations.billable">
                                     <validation-wrapper-component :validator="$v.parameters.configurations.tax.value">
                                         <label>Tax</label>
                                         <input type="text" class="form-control" v-model.lazy="parameters.configurations.tax.value"  v-money="percentage">
                                     </validation-wrapper-component>
                                 </div>
                             </div>
-                            <div class="row m-b-5">
+                            <div class="row m-b-5 d-none">
                                 <div class="col-5 p-r-0" v-show="parameters.configurations.billable">
                                     <validation-wrapper-component :validator="$v.parameters.configurations.po_limit.value">
                                         <label>Abandoned PO Limit **</label>
@@ -103,7 +109,7 @@
                                     </validation-wrapper-component>
                                 </div>
                             </div>
-                            <div class="row m-b-10" v-show="parameters.configurations.billable">
+                            <div class="row m-b-10 d-none" v-show="parameters.configurations.billable">
                                 <div class="col">
                                     <div class="fs-8 muted">** Abandoned PO's limit is only applicable to transfers that have been paid in full.</div>
                                 </div>
diff --git a/resources/assets/vue/components/user/elements/UserComponent.vue b/resources/assets/vue/components/user/elements/UserComponent.vue
index 20b57e6f..601c0097 100644
--- a/resources/assets/vue/components/user/elements/UserComponent.vue
+++ b/resources/assets/vue/components/user/elements/UserComponent.vue
@@ -4,7 +4,7 @@
             <div class="row align-items-center">
                 <div class="col-auto p-r-0">
                     <div class="padding-5 bg-master-lightest">
-                       <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style="fill: rgb(0, 0, 0);"><defs><linearGradient x1="108.17188" y1="101.74069" x2="108.17188" y2="111.89675" gradientUnits="userSpaceOnUse" id="color-1_KpyVqYNRzRZq_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="77.9375" y1="79.95313" x2="77.9375" y2="91.83188" gradientUnits="userSpaceOnUse" id="color-2_KpyVqYNRzRZq_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="53.75" y1="79.95313" x2="53.75" y2="91.83188" gradientUnits="userSpaceOnUse" id="color-3_KpyVqYNRzRZq_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="65.84375" y1="96.33075" x2="65.84375" y2="107.41131" gradientUnits="userSpaceOnUse" id="color-4_KpyVqYNRzRZq_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="119.59375" y1="88.18494" x2="119.59375" y2="97.09131" gradientUnits="userSpaceOnUse" id="color-5_KpyVqYNRzRZq_gr5"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="25.67369" x2="86" y2="144.96375" gradientUnits="userSpaceOnUse" id="color-6_KpyVqYNRzRZq_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal;"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M108.17188,111.32163v0c4.08231,0 7.39063,-3.30831 7.39063,-7.39062v-1.806h-14.78125v1.806c0,4.08231 3.30831,7.39063 7.39063,7.39063z" fill="url(#color-1_KpyVqYNRzRZq_gr1)"></path><circle cx="29" cy="32" transform="scale(2.6875,2.6875)" r="2" fill="url(#color-2_KpyVqYNRzRZq_gr2)"></circle><circle cx="20" cy="32" transform="scale(2.6875,2.6875)" r="2" fill="url(#color-3_KpyVqYNRzRZq_gr3)"></circle><path d="M65.30625,106.78244h1.075c4.15488,0 7.525,-3.37012 7.525,-7.525v-2.50744h-16.125v2.50744c0,4.15756 3.37013,7.525 7.525,7.525z" fill="url(#color-4_KpyVqYNRzRZq_gr4)"></path><circle cx="44.5" cy="34.5" transform="scale(2.6875,2.6875)" r="1.5" fill="url(#color-5_KpyVqYNRzRZq_gr5)"></circle><path d="M147.8125,114.26444v-18.54106c1.65281,-1.88931 2.6875,-4.33225 2.6875,-7.03588c0,-2.70363 -1.03469,-5.14388 -2.6875,-7.03587v-0.90031c0,-11.36812 -5.55506,-21.45969 -14.10937,-27.87206v-8.53012c0,-2.42144 -1.24969,-4.59294 -3.34594,-5.80769c-2.09625,-1.22013 -4.601,-1.22819 -6.708,-0.02419l-7.009,4.00438c-1.14756,-0.55094 -2.42144,-0.86538 -3.76519,-0.86538c-1.33031,0 -2.59881,0.32519 -3.74906,0.87613l-7.02781,-4.01512c-2.10431,-1.204 -4.60906,-1.19594 -6.708,0.02419c-1.33837,0.77669 -2.28438,1.96994 -2.82725,3.34325c-4.62519,-5.26213 -10.64519,-9.14556 -17.45531,-11.02681c-0.65844,-3.78669 -3.94256,-6.67038 -7.92006,-6.67038h-2.6875c-3.9775,0 -7.26162,2.88369 -7.92275,6.67038c-15.523,4.28656 -27.01475,19.006 -27.01475,36.507v3.22769c-4.67894,1.64475 -8.0625,6.08988 -8.0625,11.47294c0,6.40162 5.0525,11.60194 11.3735,11.9325c0.45419,2.32738 1.1395,4.57144 2.05862,6.69994c-11.80887,9.51644 -18.80712,24.07731 -18.80712,39.41219v7.70237h97.95131h1.48619h40.3125v-7.31269c0,-9.55944 -2.85412,-18.61631 -8.0625,-26.23537zM138.77712,104.43625c0.41388,-1.62056 0.70681,-3.28681 0.84656,-4.99875h0.12631c0.93256,0 1.82212,-0.15587 2.6875,-0.38163v8.7075c-1.15294,-1.16369 -2.37306,-2.27631 -3.66038,-3.32712zM96.75806,100.69794c0.91644,-2.1285 1.60444,-4.37256 2.05594,-6.69725c6.321,-0.33325 11.3735,-5.54163 11.3735,-12.12869c0,-2.11506 -0.59663,-4.07425 -1.56144,-5.80231c1.72806,-1.75763 3.14169,-3.75713 4.24894,-5.91519c4.01781,7.80181 12.13675,13.158 21.5,13.158v13.62025c0,12.84625 -9.72069,23.45112 -22.188,24.88356c-3.14169,-8.18881 -8.39844,-15.46119 -15.42894,-21.11837zM37.625,87.6985v-3.48569v-6.27531c4.44512,0 8.0625,-3.61737 8.0625,-8.0625v-5.375c0,-1.4835 1.20669,-2.6875 2.6875,-2.6875h34.9375c1.48081,0 2.6875,1.204 2.6875,2.6875v5.375c0,4.44513 3.61738,8.0625 8.0625,8.0625v9.761c0,15.36444 -12.65812,27.864 -28.21875,27.864c-15.56062,0 -28.21875,-12.49956 -28.21875,-27.864zM104.8125,82.0655c0,3.225 -2.31663,5.91787 -5.375,6.50375v-0.87075v-11.98356v-0.33863c3.05569,0.58856 5.375,3.29487 5.375,6.68919zM145.125,88.6875c0,2.96431 -2.41069,5.375 -5.375,5.375v-10.75c2.96431,0 5.375,2.41069 5.375,5.375zM142.3085,78.27881c-0.82237,-0.20156 -1.67162,-0.34131 -2.5585,-0.34131h-5.375c-10.37375,0 -18.8125,-8.44144 -18.8125,-18.8125h-5.375c0,4.85363 -1.85975,9.44387 -5.15194,12.91881c-0.88688,-0.62081 -1.8705,-1.08844 -2.91056,-1.45125v-3.225c0,-4.79719 -0.89763,-9.374 -2.46981,-13.60144c3.91031,-1.7415 8.17,-2.70363 12.49956,-2.70363c15.84819,0 28.86644,12.00238 30.15375,27.21631zM126.31788,43.18275c0.60738,-0.34669 1.14219,-0.11288 1.34375,0.00537c0.20156,0.11556 0.66919,0.46225 0.66919,1.161v5.19225c-2.49938,-1.25775 -5.16806,-2.22794 -7.96306,-2.87831c0.03763,-0.04569 0.0645,-0.09675 0.10481,-0.13975zM97.42188,48.762v-4.41287c0,-0.69875 0.46762,-1.04544 0.66919,-1.161c0.20156,-0.11556 0.73369,-0.34669 1.34375,-0.00537l5.68137,3.24381c-0.00269,0.00806 -0.00806,0.01344 -0.01075,0.0215c-2.63913,0.52406 -5.19763,1.333 -7.64594,2.42413c-0.0215,-0.03762 -0.04569,-0.07256 -0.0645,-0.11288h0.02687zM65.84375,34.9375c17.04144,0 30.90625,14.54744 30.90625,32.42738v5.19763h-2.6875c-1.48081,0 -2.6875,-1.204 -2.6875,-2.6875v-5.375c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-34.9375c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v5.375c0,1.4835 -1.20669,2.6875 -2.6875,2.6875h-2.6875v-5.19763c0,-17.87994 13.86481,-32.42737 30.90625,-32.42737zM32.25,88.56925c-3.05837,-0.58856 -5.375,-3.30294 -5.375,-6.69725c0,-3.22231 2.31931,-5.90981 5.375,-6.49569v2.56119v6.27531v3.48569zM37.52825,105.50856c5.96894,9.25844 16.41794,15.42894 28.3155,15.42894c11.87606,0 22.30894,-6.14631 28.28325,-15.37519c1.677,1.41094 3.23306,2.91862 4.6655,4.52844c-7.87169,10.0405 -20.04337,15.98794 -32.94875,15.98794c-12.986,0 -25.09587,-5.934 -32.96756,-16.00675c1.43512,-1.62325 2.98313,-3.15244 4.65206,-4.56337zM110.1875,142.4375h-10.75v-5.375h-5.375v5.375h-56.4375v-5.375h-5.375v5.375h-10.75v-2.32737c0,-9.27725 2.87025,-18.232 7.98725,-25.6925c8.89562,10.73387 22.15844,17.03875 36.3565,17.03875c14.11744,0 27.46088,-6.31563 36.35919,-17.03338c5.13044,7.43094 7.98456,16.297 7.98456,25.68713zM150.5,142.4375h-8.0625v-5.375h-5.375v5.375h-21.5v-2.32737c0,-4.50425 -0.59663,-8.901 -1.70925,-13.115c10.18025,-1.53456 18.70769,-8.10819 22.96469,-17.11131c8.71019,7.81525 13.68206,18.76681 13.68206,30.616z" fill="url(#color-6_KpyVqYNRzRZq_gr6)"></path></g></g></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M68.21211,19.35c-10.40566,0 -19.76153,5.69414 -26.54746,11.22871c-6.78594,5.54297 -11.11113,11.10274 -11.11113,11.10274l-1.94004,2.48594l3.03184,0.89023c0,0 1.17578,0.32754 2.58672,1.77207c1.40254,1.43613 2.90586,3.88848 2.90586,8.53281c0,6.02168 0.92383,10.88438 1.38574,12.94199c-1.20098,1.0918 -1.97363,2.63711 -1.97363,4.36719c0,1.39414 0.41992,2.58672 0.76426,3.7541c0.16797,0.58789 0.33594,1.13379 0.44512,1.54531c0.10918,0.41152 0.13437,0.81465 0.13437,0.50391c0,2.92266 2.45234,5.19863 5.33301,5.30781c0.39473,8.33125 4.40918,15.68828 10.52324,20.53418v8.02051c-3.09902,0.94062 -10.54004,3.34258 -18.11543,6.92031c-4.94668,2.33477 -9.91855,5.14824 -13.79024,8.48242c-3.87168,3.33418 -6.79434,7.32344 -6.79434,12.00976v12.9h111.8v-12.9c0,-2.31797 -0.72226,-4.46797 -1.91484,-6.45h32.01484v-8.17168c0,-3.7793 -2.34316,-6.92871 -5.34141,-9.51543c-2.99824,-2.58672 -6.81113,-4.73672 -10.59043,-6.52559c-6.85313,-3.225 -12.95039,-5.00547 -14.16816,-5.3498v-0.5375h22.23906l0.37793,-1.67969c0,0 3.18301,-14.03379 3.18301,-30.17559c0,-10.17891 -2.61191,-18.76211 -6.86152,-24.90977c-4.04805,-5.82851 -9.7002,-9.38945 -15.83105,-9.75059c-0.95742,-1.18418 -5.51778,-6.58437 -13.85742,-6.58437c-5.57656,0 -11.43027,1.34375 -16.60371,3.56934c-0.31074,-0.31074 -0.61309,-0.62988 -0.93223,-0.91543c-3.50215,-3.07383 -7.61738,-4.3084 -11.2623,-4.56875c-0.58789,-0.93223 -1.6293,-2.39355 -3.7877,-4.08164c-3.09902,-2.41035 -8.0709,-4.75352 -15.30195,-4.75352zM68.21211,23.65c6.31562,0 10.23769,1.95684 12.64805,3.84649c2.41875,1.88965 3.2166,3.55254 3.2166,3.55254l0.58789,1.20098h1.33535c2.86387,0 6.71875,1.0918 9.71699,3.7373c3.00664,2.64551 5.33301,6.77754 5.33301,13.4627c0,5.99649 -1.42773,14.74766 -1.84766,17.2c-0.0084,0 -0.0168,0 -0.03359,0c-0.18476,0 -0.15117,0.04199 -0.26875,0.05879v-6.50879c0,-7.35703 -3.00664,-12.30371 -6.03008,-15.23476c-3.02344,-2.93106 -6.18965,-4.00606 -6.18965,-4.00606l-1.22617,-0.41152l-0.94063,0.89863c0,0 -1.35215,1.32695 -4.61914,2.82187c-3.26699,1.49492 -8.32285,3.03184 -15.39434,3.03184c-3.87168,0 -8.96953,1.36895 -13.39551,4.45957c-4.40918,3.08223 -8.0793,8.12129 -8.09609,14.95762c-0.11758,-0.0168 -0.09238,-0.06719 -0.27715,-0.06719c-0.05039,0 -0.10078,0.0168 -0.15117,0.0168c-0.43672,-2.07441 -1.14219,-6.12246 -1.14219,-11.3043c0,-5.62695 -2.01562,-9.36426 -4.12363,-11.53105c-0.89863,-0.92383 -1.1002,-0.76426 -1.88125,-1.22617c1.48652,-1.74688 4.24961,-4.8459 8.95273,-8.68398c6.39121,-5.21543 15.02481,-10.27129 23.82637,-10.27129zM116.1,34.4c6.9959,0 11.16992,5.57656 11.16992,5.57656l0.64668,0.87344h1.0834c4.87109,0 9.59941,2.76309 13.24434,8.0373c3.65332,5.27422 6.10566,13.01758 6.10566,22.45742c0,14.09258 -2.30117,25.29609 -2.77988,27.55527h-18.60254c5.41699,-3.7541 8.48242,-10.34687 8.48242,-17.60312v-9.95215c0,-5.3918 -1.76367,-9.07871 -3.61973,-11.32949c-1.85605,-2.25078 -3.94726,-3.16621 -3.94726,-3.16621l-1.50332,-0.62988l-1.01621,1.26816c0,0 -1.22617,1.57891 -4.05645,3.09062c-2.82188,1.51172 -7.09668,2.85547 -13.11836,1.96524l-0.62988,4.24961c6.95391,1.03301 12.27012,-0.5375 15.78066,-2.42715c2.40195,-1.28496 2.89746,-2.05762 3.68691,-2.86387c0.41153,0.23516 0.67188,0.25195 1.49492,1.25137c1.26816,1.53691 2.62871,4.10684 2.62871,8.5916v9.95215c0,8.44043 -4.38398,14.95762 -12.11895,16.33496l-0.61309,0.11758l-0.45351,0.41152c-0.51231,0.46191 -1.14219,0.73906 -1.86445,0.73906c-0.72226,0 -1.35215,-0.26875 -1.86445,-0.73906l-0.45352,-0.41152l-0.61309,-0.11758c-7.17227,-1.27656 -11.41348,-7.0043 -12.00137,-14.55449c1.16738,-0.62988 2.07441,-1.65449 2.51953,-2.90586c0.58789,0.94902 1.6209,1.52851 2.73789,1.52851c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225c-0.57109,0 -1.13379,0.15117 -1.6293,0.44512c0.27715,-0.94063 0.5543,-1.91484 0.5543,-3.02344c0,-1.76367 -0.79785,-3.31738 -2.02402,-4.41758c0.39473,-2.26758 2.02402,-11.97617 2.02402,-18.8041c0,-4.99707 -1.21777,-9.06191 -3.12422,-12.25332c4.41758,-1.74688 9.34746,-2.79668 13.87422,-2.79668zM86,45.48594c0.5207,0.20156 1.88125,0.62988 3.88008,2.56152c2.35156,2.28438 4.71992,5.9293 4.71992,12.15254v13.55508l3.2334,-1.89805c0.5543,-0.31914 1.0666,-0.60469 1.42774,-0.78945c0.04199,-0.0252 0.05879,-0.0252 0.10078,-0.05039c0.98262,0.10078 1.68809,0.78945 1.68809,1.64609v0.0084c0,0.15957 -0.26035,1.41934 -0.58789,2.54473c-0.16797,0.5543 -0.33594,1.11699 -0.47871,1.6293c-0.13438,0.5123 -0.27715,0.87344 -0.27715,1.6293c0,0.57109 -0.47031,1.075 -1.20937,1.075h-3.89688v2.93945c0,11.65703 -8.40684,21.29004 -19.47598,23.26367l-0.61309,0.10078l-0.46191,0.42832c-0.83984,0.76426 -1.89805,1.21777 -3.09902,1.21777c-1.20098,0 -2.25918,-0.46191 -3.10742,-1.22617l-0.45352,-0.41992l-0.61309,-0.10078c-11.06914,-1.97363 -19.47598,-11.60664 -19.47598,-23.26367v-2.93945h-3.89688c-0.73906,0 -1.20937,-0.50391 -1.20937,-1.075c0,-0.75586 -0.14277,-1.11699 -0.28555,-1.6293c-0.14278,-0.51231 -0.31074,-1.075 -0.47871,-1.6293c-0.32754,-1.12539 -0.57949,-2.38516 -0.57949,-2.54473c0,-0.86504 0.70547,-1.55371 1.68809,-1.65449c0.04199,0.0252 0.05879,0.0252 0.10078,0.05039c0.36113,0.18476 0.87344,0.47031 1.42774,0.78945l3.2334,1.89805v-6.9959c0,-5.3582 2.6707,-8.96113 6.26524,-11.47226c3.59453,-2.51113 8.16328,-3.68691 10.93476,-3.68691c7.70137,0 13.39551,-1.68809 17.1832,-3.41816c2.81347,-1.28496 3.55254,-2.07441 4.3168,-2.6959zM59.125,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM82.775,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM123.625,75.25c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM97.93418,88.81348c1.36895,4.19082 3.89688,7.77695 7.41582,10.17891v4.72832c-1.93164,0.57109 -9.98574,3.04023 -17.2,6.60117v-5.99648c4.8375,-3.84649 8.33125,-9.28028 9.78418,-15.51191zM122.55,101.11719v6.38281c-0.25195,0.49551 -1.83926,3.43496 -6.45,3.43496c-4.61074,0 -6.19805,-2.93945 -6.45,-3.43496v-6.37441c0.72227,0.24356 1.45293,0.46191 2.22559,0.62149c1.17578,0.88184 2.62871,1.45293 4.22441,1.45293c1.5957,0 3.05703,-0.57109 4.23281,-1.45293c0.76426,-0.16797 1.50332,-0.37793 2.21719,-0.62988zM58.05,107.12207c2.29277,1.20098 4.77031,2.1248 7.39902,2.65391c1.52012,1.20938 3.40137,2.02402 5.50098,2.02402c2.09121,0 3.96406,-0.81465 5.47578,-2.01562c2.63711,-0.5207 5.12305,-1.44453 7.42422,-2.65391v12.59766c-0.26035,0.5207 -3.66172,7.12188 -12.9,7.12188c-9.23828,0 -12.63965,-6.60117 -12.9,-7.12188zM105.35,108.21387v0.47031l0.22676,0.45352c0,0 3.2334,6.09726 10.52324,6.09726c7.28984,0 10.52324,-6.09726 10.52324,-6.09726l0.22676,-0.45352v-0.44512c2.23399,0.68027 6.79434,2.1332 12.32891,4.73672c3.56934,1.68809 7.11348,3.72891 9.62461,5.8957c2.51113,2.1668 3.84648,4.3168 3.84648,6.25684v3.87168h-31.20859c-0.44512,-0.42832 -0.90703,-0.84824 -1.38574,-1.25976c-1.44453,-1.24297 -3.08223,-2.39356 -4.77871,-3.50215c0.5207,-0.40313 0.82305,-1.02461 0.82305,-1.68809c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.03301,0 -1.92324,0.73906 -2.11641,1.75527c-1.82246,-1.02461 -3.68691,-2.00722 -5.56816,-2.89746c-5.51777,-2.60351 -10.91797,-4.56035 -14.67207,-5.81172c5.17344,-2.38516 10.81719,-4.2916 13.75664,-5.23223zM53.75,116.86426v4.03965l0.22676,0.46191c0,0 5.07266,9.78418 16.97324,9.78418c11.90059,0 16.97324,-9.78418 16.97324,-9.78418l0.22676,-0.46191v-4.03965c3.45176,1.0834 9.77578,3.2166 16.28457,6.29043c4.72832,2.23399 9.43145,4.92988 12.81601,7.84414c3.38457,2.91426 5.29941,5.9125 5.29941,8.75117v8.6h-103.2v-8.6c0,-2.83867 1.91484,-5.83691 5.29941,-8.75117c3.38457,-2.91426 8.0877,-5.61016 12.81601,-7.84414c6.50879,-3.07383 12.83281,-5.20703 16.28457,-6.29043zM122.55,120.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM131.15,120.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM139.75,120.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM27.95,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM36.55,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM45.15,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM53.75,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM62.35,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM70.95,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM88.15,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM96.75,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM105.35,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM113.95,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g></g></svg>
                     </div>
                 </div>
                 <div class="col-4">
diff --git a/resources/views/emails/layout/base.blade.php b/resources/views/emails/layout/base.blade.php
index 0f58c396..ec9a6f85 100644
--- a/resources/views/emails/layout/base.blade.php
+++ b/resources/views/emails/layout/base.blade.php
@@ -82,6 +82,9 @@
         .pointer {
             cursor: pointer;
         }
+        .not-allowed {
+            cursor: not-allowed;
+        }
         .text-complete {
             color: #009add;
         }
diff --git a/resources/views/pages/orders/table.blade.php b/resources/views/pages/orders/table.blade.php
new file mode 100644
index 00000000..9f42cef6
--- /dev/null
+++ b/resources/views/pages/orders/table.blade.php
@@ -0,0 +1,13 @@
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
+
+@extends('layouts.base_portal')
+@section('inner_content')
+    {{--<div class="row m-b-20" v-if="$store.getters.isAdmin">--}}
+        {{--<div class="col"></div>--}}
+        {{--<div class="col-auto">--}}
+            {{--<a :href="route('orders.refresh')"><div class="btn btn-sm btn-warning all-caps b-rad-none pointer"><i class="fa fa-refresh m-r-10"></i>Refresh Orders</div></a>--}}
+        {{--</div>--}}
+    {{--</div>--}}
+    {{--<order-search-section-component v-show="!$store.getters.isShowing('createOrderForm')"></order-search-section-component>--}}
+    <orders-table-section-component></orders-table-section-component>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/settings.blade.php b/resources/views/pages/settings.blade.php
index c82482dd..b6d89f9f 100644
--- a/resources/views/pages/settings.blade.php
+++ b/resources/views/pages/settings.blade.php
@@ -127,6 +127,46 @@
                                     </div>
                                 </div>
                             </div>
+                            <div class="row m-b-5">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row">
+                                                <div class="col bg-master-light tabButton" tab-name="stateCharges">
+                                                    <div class="row align-items-center">
+                                                        <div class="col-auto  p-t-10 p-b-10 b-r b-grey">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#333333"><path d="M15.05,25.8v105.35h4.3v2.15c0,3.53669 2.91331,6.45 6.45,6.45h50.5376c1.67444,3.75213 5.30105,6.45 9.6624,6.45c4.36203,0 7.98734,-2.69797 9.6624,-6.45h50.5376c3.53669,0 6.45,-2.91331 6.45,-6.45v-2.15h4.3v-105.35h-64.5c-2.60352,0 -4.86855,1.23893 -6.45,3.08643c-1.58145,-1.8475 -3.84648,-3.08643 -6.45,-3.08643zM19.35,30.1h60.2c2.40083,0 4.3,1.89917 4.3,4.3c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-2.40083 1.89917,-4.3 4.3,-4.3h60.2v96.75h-60.2c-2.60352,0 -4.86855,1.23893 -6.45,3.08643c-1.58145,-1.8475 -3.84648,-3.08643 -6.45,-3.08643h-60.2zM86,40.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,49.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM119.68193,53.57363v4.12783c-8.0754,0.7482 -12.97979,5.32437 -12.97979,12.23232c0,5.8351 3.64818,9.8429 10.31748,11.54785l2.66231,0.68867v13.63906c-4.45695,-0.50955 -7.33113,-2.99253 -7.62998,-6.55078h-6.33662c0.0301,6.9402 5.41175,11.63533 13.9666,12.20293v3.88428h4.09844v-3.91367c8.7634,-0.7482 13.81963,-5.32289 13.81963,-12.65224c0,-6.192 -3.53195,-9.99125 -11.03975,-11.8166l-2.77988,-0.62568v-12.8958c3.9474,0.47945 6.64034,3.04917 6.76074,6.34082h6.24844c-0.1806,-6.67145 -5.26273,-11.39315 -13.00918,-12.08115v-4.12783zM86,58.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM119.68193,63.4124v12.05596c-4.3086,-0.8686 -6.58018,-2.99112 -6.58018,-6.07207c0,-3.26155 2.75103,-5.77534 6.58018,-5.98389zM86,66.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,75.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM123.78037,82.94717c5.08475,1.01695 7.44521,3.07924 7.44521,6.52139c0,3.79905 -2.71951,6.12871 -7.44521,6.39961zM86,83.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,92.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,101.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,109.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,118.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM23.65,131.15h55.9c2.40083,0 4.3,1.89917 4.3,4.3h4.3c0,-2.40083 1.89917,-4.3 4.3,-4.3h55.9v2.15c0,1.21481 -0.93519,2.15 -2.15,2.15h-53.56523l-0.41992,1.6083c-0.72235,2.78276 -3.19533,4.8417 -6.21484,4.8417c-3.01952,0 -5.49455,-2.05645 -6.21484,-4.8375l-0.41992,-1.6125h-53.56523c-1.21481,0 -2.15,-0.93519 -2.15,-2.15z"></path></g></g></svg>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="fs-12 m-t-5 all-caps m-b-5">States Charges</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row m-b-5">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row">
+                                                <div class="col bg-master-light tabButton" tab-name="warehouseCharges">
+                                                    <div class="row align-items-center">
+                                                        <div class="col-auto  p-t-10 p-b-10 b-r b-grey">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#333333"><path d="M15.05,25.8v105.35h4.3v2.15c0,3.53669 2.91331,6.45 6.45,6.45h50.5376c1.67444,3.75213 5.30105,6.45 9.6624,6.45c4.36203,0 7.98734,-2.69797 9.6624,-6.45h50.5376c3.53669,0 6.45,-2.91331 6.45,-6.45v-2.15h4.3v-105.35h-64.5c-2.60352,0 -4.86855,1.23893 -6.45,3.08643c-1.58145,-1.8475 -3.84648,-3.08643 -6.45,-3.08643zM19.35,30.1h60.2c2.40083,0 4.3,1.89917 4.3,4.3c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-2.40083 1.89917,-4.3 4.3,-4.3h60.2v96.75h-60.2c-2.60352,0 -4.86855,1.23893 -6.45,3.08643c-1.58145,-1.8475 -3.84648,-3.08643 -6.45,-3.08643h-60.2zM86,40.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,49.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM119.68193,53.57363v4.12783c-8.0754,0.7482 -12.97979,5.32437 -12.97979,12.23232c0,5.8351 3.64818,9.8429 10.31748,11.54785l2.66231,0.68867v13.63906c-4.45695,-0.50955 -7.33113,-2.99253 -7.62998,-6.55078h-6.33662c0.0301,6.9402 5.41175,11.63533 13.9666,12.20293v3.88428h4.09844v-3.91367c8.7634,-0.7482 13.81963,-5.32289 13.81963,-12.65224c0,-6.192 -3.53195,-9.99125 -11.03975,-11.8166l-2.77988,-0.62568v-12.8958c3.9474,0.47945 6.64034,3.04917 6.76074,6.34082h6.24844c-0.1806,-6.67145 -5.26273,-11.39315 -13.00918,-12.08115v-4.12783zM86,58.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM119.68193,63.4124v12.05596c-4.3086,-0.8686 -6.58018,-2.99112 -6.58018,-6.07207c0,-3.26155 2.75103,-5.77534 6.58018,-5.98389zM86,66.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,75.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM123.78037,82.94717c5.08475,1.01695 7.44521,3.07924 7.44521,6.52139c0,3.79905 -2.71951,6.12871 -7.44521,6.39961zM86,83.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,92.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,101.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,109.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,118.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM23.65,131.15h55.9c2.40083,0 4.3,1.89917 4.3,4.3h4.3c0,-2.40083 1.89917,-4.3 4.3,-4.3h55.9v2.15c0,1.21481 -0.93519,2.15 -2.15,2.15h-53.56523l-0.41992,1.6083c-0.72235,2.78276 -3.19533,4.8417 -6.21484,4.8417c-3.01952,0 -5.49455,-2.05645 -6.21484,-4.8375l-0.41992,-1.6125h-53.56523c-1.21481,0 -2.15,-0.93519 -2.15,-2.15z"></path></g></g></svg>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="fs-12 m-t-5 all-caps m-b-5">Warehouse Charges</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </template>
                     </div>
                 </div>
@@ -347,6 +387,56 @@
                             </div>
                         </div>
                     </div>
+                    <div class="row tabsContainer hide tabContent" tab-name="stateCharges">
+                        <div class="col">
+                            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading('postcodes')"></loading-component>
+                            <div class="row" v-show="!$store.getters.isLoading('postcodes')">
+                                <div class="col">
+                                    <div class="row p-b-5 m-b-20 b-b b-grey align-items-center parentContainer">
+                                        <div class="col">
+                                            <div class="font-heading all-caps fs-10 hint-text">
+                                                State Charges
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-b-20">
+                                        <div class="col">
+                                            <list-component section="allStateChargesSection" :endpoint="route('api.address.state.list')" :options="{country_id: 1}">
+                                                <template slot="list" slot-scope="{data}">
+                                                    <states-charges-component :data="data"></states-charges-component>
+                                                </template>
+                                            </list-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row tabsContainer hide tabContent" tab-name="warehouseCharges">
+                        <div class="col">
+                            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading('postcodes')"></loading-component>
+                            <div class="row" v-show="!$store.getters.isLoading('postcodes')">
+                                <div class="col">
+                                    <div class="row p-b-5 m-b-20 b-b b-grey align-items-center parentContainer">
+                                        <div class="col">
+                                            <div class="font-heading all-caps fs-10 hint-text">
+                                                Warehouse Charges
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-b-20">
+                                        <div class="col">
+                                        <list-component key="2" section="warhouseListSection" :endpoint="route('api.company.list')" :options="{'has_business_module_type': 3}">
+                                            <template slot="list" slot-scope="{data}">
+                                            <warehouse-charges-component :data="data"></warehouse-charges-component>
+                                            </template>
+                                        </list-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </template>
             </div>
         </div>
diff --git a/routes/address.php b/routes/address.php
index 5b3c6a1b..96cfe8ab 100644
--- a/routes/address.php
+++ b/routes/address.php
@@ -11,6 +11,8 @@ Route::group(['prefix' => 'address', 'as' => 'address.', 'namespace' => 'Address
 
     Route::get('district/list', 'ListDistrictsController@list')->name('district.list');
 
+    Route::get('state/list', 'ListStatesController@list')->name('state.list');
+
     Route::post('/create', 'CreateAddressController@create')->name('create');
 
     Route::put('/update/{id}', 'UpdateAddressController@update')->name('update');
diff --git a/routes/web.php b/routes/web.php
index f01fc716..e29f6333 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -63,6 +63,10 @@ Route::get('/orders', function () {
     return view('pages.orders.index');
 })->name('orders');
 
+Route::get('/orders-table', function () {
+    return view('pages.orders.table');
+})->name('ordersTable');
+
 Route::get('/order/show/{order_number}', function ($orderNumber) {
     return view('pages.orders.profile', ['id' => $orderNumber]);
 })->name('order.show');
@@ -77,7 +81,7 @@ Route::get('/warehouse-list', function () {
 
 Route::get('/unclaimed-packinglist', function () {
     return view('pages.unclaimed_packinglist');
-})->name('warehouse.list');
+})->name('unclaimed-packinglist.list');
 
 Route::get('/containers', function () {
     return view('pages.containers');