From 022d99875aea7321bfe15cfcddc1afcf55a31e9a Mon Sep 17 00:00:00 2001
From: Omair Saleh <uldvstar@gmail.com>
Date: Mon, 27 May 2019 09:46:49 +0800
Subject: [PATCH] large commit

---
 .../PackingList/UpdatePackingListLogic.php    |  59 ++
 .../DataTransferObjects/PackageObject.php     |  82 --
 .../DataTransferObjects/PackingListObject.php |  26 +-
 .../PackingList/UpdatesPackingList.php        |  38 +
 .../Controllers/Orders/OrderController.php    |   6 +-
 .../Orders/UpdatePackingListController.php    |  20 +
 app/Http/Resources/Order.php                  |   6 +-
 app/Http/Resources/OrderStep.php              |  24 +
 app/Traits/ChecksIfPackingListIsComplete.php  |  23 +
 .../2018_11_30_085832_create_packages.php     |   1 +
 .../assets/images/icons/packing-icon.png      | Bin 0 -> 13029 bytes
 .../assets/images/icons/processing-icon.png   | Bin 0 -> 7860 bytes
 .../assets/sass/modules/_tabs_accordian.scss  |  20 +-
 resources/assets/vue/app.js                   |   5 +-
 .../elements/CompanyProfileComponenet.vue     |  30 +-
 .../elements/CompanySummaryComponenet.vue     |  18 +-
 .../order/elements/OrderActionComponenet.vue  |   2 +-
 .../order/elements/OrderComponenet.vue        |   4 +-
 .../OrderDeliveryAddressComponenet.vue        |  30 +
 .../order/elements/OrderHeaderComponenet.vue  |   6 +-
 .../order/elements/OrderProfileComponent.vue  | 830 ++++++++++++++++++
 ...nenet.vue => OrderQuickViewComponenet.vue} |  13 +-
 .../order/elements/OrdersProfileComponent.vue |  43 -
 .../elements/steps/PackingStepComponenet.vue  | 372 +++++---
 .../views/partials/general/menu.blade.php     |   2 +-
 routes/api.php                                |   2 +-
 26 files changed, 1340 insertions(+), 322 deletions(-)
 create mode 100644 app/Classes/Modules/ControllersLogic/Orders/PackingList/UpdatePackingListLogic.php
 delete mode 100644 app/Classes/Modules/Orders/DataTransferObjects/PackageObject.php
 create mode 100644 app/Classes/Modules/Orders/Services/PackingList/UpdatesPackingList.php
 create mode 100644 app/Http/Controllers/Orders/UpdatePackingListController.php
 create mode 100644 app/Http/Resources/OrderStep.php
 create mode 100644 app/Traits/ChecksIfPackingListIsComplete.php
 create mode 100644 resources/assets/images/icons/packing-icon.png
 create mode 100644 resources/assets/images/icons/processing-icon.png
 create mode 100644 resources/assets/vue/components/order/elements/OrderDeliveryAddressComponenet.vue
 create mode 100644 resources/assets/vue/components/order/elements/OrderProfileComponent.vue
 rename resources/assets/vue/components/order/elements/{OrderHistoryComponenet.vue => OrderQuickViewComponenet.vue} (76%)
 delete mode 100644 resources/assets/vue/components/order/elements/OrdersProfileComponent.vue

diff --git a/app/Classes/Modules/ControllersLogic/Orders/PackingList/UpdatePackingListLogic.php b/app/Classes/Modules/ControllersLogic/Orders/PackingList/UpdatePackingListLogic.php
new file mode 100644
index 0000000..b0f5ef3
--- /dev/null
+++ b/app/Classes/Modules/ControllersLogic/Orders/PackingList/UpdatePackingListLogic.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Classes\Modules\ControllersLogic\Orders\PackingList;
+
+use App\Classes\Modules\ControllerLogic\Exceptions\InternalServerErrorException;
+use App\Classes\Modules\Orders\DataTransferObjects\OrderObject;
+use App\Classes\Modules\Orders\DataTransferObjects\PackingListObject;
+use App\Classes\Modules\Orders\Services\PackingList\UpdatesPackingList;
+use App\Classes\ValueObjects\Constants\HttpStatus;
+use App\Traits\ChecksIfPackingListIsComplete;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class UpdatePackingListLogic
+{
+
+    use ChecksIfPackingListIsComplete;
+
+    /** @var UpdatesPackingList */
+    private $updatesPackingList;
+
+    /**
+     * UpdatePackingListLogic constructor.
+     * @param UpdatesPackingList $updatesPackingList
+     */
+    public function __construct(UpdatesPackingList $updatesPackingList)
+    {
+        $this->updatesPackingList = $updatesPackingList;
+    }
+
+
+    /**
+     * @param String $orderId
+     * @param Request $request
+     * @return JsonResponse
+     * @throws InternalServerErrorException
+     */
+    public function execute(String $orderId, Request $request){
+
+        try {
+
+            $orderObject = new OrderObject($orderId);
+
+            $packingListObject = new PackingListObject($request->input('reference_no'), $request->input('packages'));
+
+            $confirmed = $this->checkPackingListIsComplete($packingListObject->getPackages());
+
+            $this->updatesPackingList->execute($orderObject, $packingListObject, $confirmed);
+
+            return new JsonResponse(null, HttpStatus::RESOURCE_CREATED);
+
+        } catch (\Exception $exception){
+            throw new InternalServerErrorException("Failed to update order's packing list because {$exception->getMessage()}");
+        }
+
+
+
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Orders/DataTransferObjects/PackageObject.php b/app/Classes/Modules/Orders/DataTransferObjects/PackageObject.php
deleted file mode 100644
index bd8c8b8..0000000
--- a/app/Classes/Modules/Orders/DataTransferObjects/PackageObject.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<?php
-
-namespace App\Classes\Modules\Orders\DataTransferObjects;
-
-
-class PackageObject
-{
-
-    /** @var string */
-    private $description;
-
-    /** @var integer */
-    private $quantity;
-
-    /** @var integer */
-    private $width;
-
-    /** @var integer */
-    private $height;
-
-    /** @var integer */
-    private $length;
-
-    /**
-     * PackageObject constructor.
-     * @param string $description
-     * @param int $quantity
-     * @param int $width
-     * @param int $height
-     * @param int $length
-     */
-    public function __construct(string $description, int $quantity, int $width, int $height, int $length)
-    {
-        $this->description = $description;
-        $this->quantity = $quantity;
-        $this->width = $width;
-        $this->height = $height;
-        $this->length = $length;
-    }
-
-    /**
-     * @return string
-     */
-    public function getDescription(): string
-    {
-        return $this->description;
-    }
-
-    /**
-     * @return int
-     */
-    public function getQuantity(): int
-    {
-        return $this->quantity;
-    }
-
-    /**
-     * @return int
-     */
-    public function getWidth(): int
-    {
-        return $this->width;
-    }
-
-    /**
-     * @return int
-     */
-    public function getHeight(): int
-    {
-        return $this->height;
-    }
-
-    /**
-     * @return int
-     */
-    public function getLength(): int
-    {
-        return $this->length;
-    }
-
-
-}
\ No newline at end of file
diff --git a/app/Classes/Modules/Orders/DataTransferObjects/PackingListObject.php b/app/Classes/Modules/Orders/DataTransferObjects/PackingListObject.php
index 89489db..83ede23 100644
--- a/app/Classes/Modules/Orders/DataTransferObjects/PackingListObject.php
+++ b/app/Classes/Modules/Orders/DataTransferObjects/PackingListObject.php
@@ -9,25 +9,21 @@ class PackingListObject
     /** @var string */
     private $referenceId;
 
-    /** @var boolean */
-    private $confirmed;
-
     /** @var PackageObject[] */
     private $packages;
 
     /**
      * PackingListObject constructor.
      * @param string $referenceId
-     * @param bool $confirmed
-     * @param array $packages
+     * @param PackageObject[] $packages
      */
-    public function __construct(string $referenceId, bool $confirmed, array $packages)
+    public function __construct(string $referenceId, array $packages)
     {
         $this->referenceId = $referenceId;
-        $this->confirmed = $confirmed;
         $this->packages = $packages;
     }
 
+
     /**
      * @return string
      */
@@ -37,21 +33,11 @@ class PackingListObject
     }
 
     /**
-     * @return bool
+     * @return array
      */
-    public function isConfirmed(): bool
+    public function getPackages(): array
     {
-        return $this->confirmed;
-    }
-
-    /**
-     * @return PackageObject[]
-     */
-    public function getPackages()
-    {
-        return array_map(function($package){
-            return new PackageObject($package['description'], $package['quantity'], $package['width'], $package['height'], $package['length']);
-        }, $this->packages);
+        return $this->packages;
     }
 
 
diff --git a/app/Classes/Modules/Orders/Services/PackingList/UpdatesPackingList.php b/app/Classes/Modules/Orders/Services/PackingList/UpdatesPackingList.php
new file mode 100644
index 0000000..1397364
--- /dev/null
+++ b/app/Classes/Modules/Orders/Services/PackingList/UpdatesPackingList.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Classes\Modules\Orders\Services\PackingList;
+
+
+use App\Classes\Modules\Orders\DataTransferObjects\OrderObject;
+use App\Classes\Modules\Orders\DataTransferObjects\PackingListObject;
+use App\Models\PackingList;
+
+class UpdatesPackingList
+{
+
+    /** @var PackingList */
+    private $repository;
+
+    /**
+     * UpdatesPackingList constructor.
+     * @param PackingList $repository
+     */
+    public function __construct(PackingList $repository)
+    {
+        $this->repository = $repository;
+    }
+
+
+    public function execute(OrderObject $orderObject, PackingListObject $packingListObject, bool $confirmed){
+
+        $packingList = $this->repository->firstOrCreate(['order_id' => $orderObject->getOrderId()],
+            [
+                'reference_no' => $packingListObject->getReferenceId(),
+                'confirmed' => $confirmed
+            ]);
+
+        $packingList->packages()->delete();
+        $packingList->packages()->createMany($packingListObject->getPackages());
+    }
+
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Orders/OrderController.php b/app/Http/Controllers/Orders/OrderController.php
index b1db9ec..cb45254 100644
--- a/app/Http/Controllers/Orders/OrderController.php
+++ b/app/Http/Controllers/Orders/OrderController.php
@@ -2,9 +2,6 @@
 
 namespace App\Http\Controllers\Orders;
 
-use App\Classes\ControllersLogic\Orders\CreateOrder;
-use App\Classes\Modules\ControllersLogic\Orders\UpdateOrderStepLogic;
-use App\Classes\Modules\Orders\DataTransferObjects\PackageObject;
 use App\Classes\Modules\Orders\DataTransferObjects\PackingListObject;
 use App\Models\CustomIssues;
 use App\Models\Order;
@@ -19,7 +16,7 @@ class OrderController extends Controller
 {
 
     public function show($id){
-        $order = Order::findOrFail($id)->first();
+        $order = order::findOrFail($id);
         return new OrderResource($order);
     }
 
@@ -36,6 +33,7 @@ class OrderController extends Controller
     }
 
     public function updatePackingList(String $orderId, Request $request){
+        dd($request->input('packages'));
         $packingList = PackingList::updateOrCreate(['order_id' => $orderId],['reference_no' => $request->input('reference_no')]);
         $confirmed = true;
         $packages = [];
diff --git a/app/Http/Controllers/Orders/UpdatePackingListController.php b/app/Http/Controllers/Orders/UpdatePackingListController.php
new file mode 100644
index 0000000..88dbc9f
--- /dev/null
+++ b/app/Http/Controllers/Orders/UpdatePackingListController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Orders;
+
+use App\Classes\Modules\ControllersLogic\Orders\PackingList\UpdatePackingListLogic;
+use Illuminate\Http\Request;
+
+class UpdatePackingListController
+{
+    /**
+     * @param String $orderId
+     * @param Request $request
+     * @param UpdatePackingListLogic $logic
+     * @throws \App\Classes\Modules\ControllerLogic\Exceptions\InternalServerErrorException
+     */
+    public function update(String $orderId, Request $request , UpdatePackingListLogic $logic){
+        $logic->execute($orderId, $request);
+    }
+
+}
\ No newline at end of file
diff --git a/app/Http/Resources/Order.php b/app/Http/Resources/Order.php
index d172872..1641d31 100644
--- a/app/Http/Resources/Order.php
+++ b/app/Http/Resources/Order.php
@@ -5,6 +5,8 @@ namespace App\Http\Resources;
 use App\Classes\Modules\Orders\Services\ListsOrderHistory;
 use App\Classes\Modules\Steps\GetStep;
 use App\Classes\Modules\Steps\StepAttachments;
+use App\Models\OrderStep;
+use App\Http\Resources\OrderStep as OrderStepResource;
 use Illuminate\Http\Resources\Json\JsonResource;
 use App\Models\AddressBook;
 
@@ -27,13 +29,13 @@ class Order extends JsonResource
             'supplier_id' => $this->supplier_id,
             'warehouse_id' => $this->warehouse_id,
             'address' => new \App\Http\Resources\AddressBook($addressBook),
-            'current_step' => $this->current_step,
             'complete' => (float)$this->complete,
             'date' => $this->created_at->format('d/m/Y'),
-            'steps' => [
+            'current_step' => [
                 'details' => (new GetStep())->execute($this->current_step),
                 'attachments' => (new StepAttachments())->execute($this->id, $this->current_step)
             ],
+            'steps' => OrderStepResource::collection(OrderStep::where('order_id', $this->id)->orderBy('sequence')->get()),
             'details' => (new ListsOrderHistory())->execute($this->id, $this->created_at, $this->complete, $this->updated_at)
         ];
     }
diff --git a/app/Http/Resources/OrderStep.php b/app/Http/Resources/OrderStep.php
new file mode 100644
index 0000000..ba13201
--- /dev/null
+++ b/app/Http/Resources/OrderStep.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Classes\Modules\Steps\GetStep;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class OrderStep extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return [
+            'complete' => $this->complete,
+            'reference_id' => $this->reference_id,
+            'details' => (new GetStep())->execute($this->reference_id)
+        ];
+    }
+}
diff --git a/app/Traits/ChecksIfPackingListIsComplete.php b/app/Traits/ChecksIfPackingListIsComplete.php
new file mode 100644
index 0000000..0b2ac55
--- /dev/null
+++ b/app/Traits/ChecksIfPackingListIsComplete.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Traits;
+
+
+trait ChecksIfPackingListIsComplete
+{
+    public function checkPackingListIsComplete(array $packages): bool {
+
+        if(empty($packages)){
+            return false;
+        }
+
+        foreach ($packages as $package) {
+            if($package['width'] == 0 || $package['length'] == 0 || $package['height'] == 0){
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+}
\ No newline at end of file
diff --git a/database/migrations/2018_11_30_085832_create_packages.php b/database/migrations/2018_11_30_085832_create_packages.php
index 355fa1f..7eaf329 100644
--- a/database/migrations/2018_11_30_085832_create_packages.php
+++ b/database/migrations/2018_11_30_085832_create_packages.php
@@ -16,6 +16,7 @@ class CreatePackages extends Migration
         Schema::create('packages', function (Blueprint $table) {
             $table->increments('id');
             $table->integer('list_id')->unsigned()->index();
+            $table->integer('type')->default(0);
             $table->string('description');
             $table->integer('width');
             $table->integer('length');
diff --git a/resources/assets/images/icons/packing-icon.png b/resources/assets/images/icons/packing-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc9a3784018c273e15c7a639336638d3f00daa7d
GIT binary patch
literal 13029
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
W)xBa}kZ`R)|7(}c{vcg)4F6x|jew2-

literal 0
HcmV?d00001

diff --git a/resources/assets/images/icons/processing-icon.png b/resources/assets/images/icons/processing-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..44ec0ff5ea6e4ac5ae1ba566fb3af6657ce75022
GIT binary patch
literal 7860
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

literal 0
HcmV?d00001

diff --git a/resources/assets/sass/modules/_tabs_accordian.scss b/resources/assets/sass/modules/_tabs_accordian.scss
index 5f90783..60ae67b 100644
--- a/resources/assets/sass/modules/_tabs_accordian.scss
+++ b/resources/assets/sass/modules/_tabs_accordian.scss
@@ -150,7 +150,7 @@
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     width: 100%;
     position: absolute;
-    bottom: -2px;
+    bottom: -1px;
     z-index: 120;
     left: 0;
   }
@@ -168,7 +168,7 @@
         content: '';
         left: 0;
         z-index: 125;
-        top: 100%;
+        top: calc(100% - 1px);
         &.nav-tabs-primary{
           background-color: $color-primary;
         }
@@ -635,6 +635,22 @@
   }
 }
 
+.nav-item {
+  .arrow_tab {
+    overflow: hidden;
+    background-color: $color-master-lighter;
+    opacity: 0.5;
+    border-color: $color-master-light;
+  }
+  .active {
+    .arrow_tab {
+      opacity: 1;
+      background-color: $color-white !important;
+      border-color: $color-white;
+    }
+  }
+}
+
 /* Panel Groups
 ------------------------------------
 */
diff --git a/resources/assets/vue/app.js b/resources/assets/vue/app.js
index d0ea778..2c02568 100644
--- a/resources/assets/vue/app.js
+++ b/resources/assets/vue/app.js
@@ -80,10 +80,11 @@ Vue.component('order-page-component', require('./components/order/elements/Order
 Vue.component('order-select-component', require('./components/order/elements/OrderSelectComponent.vue'));
 
 Vue.component('order-component', require('./components/order/elements/OrderComponenet.vue'));
-Vue.component('order-profile-component', require('./components/order/elements/OrdersProfileComponent.vue'));
+Vue.component('order-profile-component', require('./components/order/elements/OrderProfileComponent.vue'));
 Vue.component('order-header-component', require('./components/order/elements/OrderHeaderComponenet.vue'));
 Vue.component('order-action-component', require('./components/order/elements/OrderActionComponenet.vue'));
-Vue.component('order-history-component', require('./components/order/elements/OrderHistoryComponenet.vue'));
+Vue.component('order-delivery-address-component', require('./components/order/elements/OrderDeliveryAddressComponenet.vue'));
+Vue.component('order-quick-view-component', require('./components/order/elements/OrderQuickViewComponenet.vue'));
 
 
 Vue.component('confirm-order-component', require('./components/order/elements/steps/ConfirmOrderComponent.vue'));
diff --git a/resources/assets/vue/components/company/elements/CompanyProfileComponenet.vue b/resources/assets/vue/components/company/elements/CompanyProfileComponenet.vue
index 01051fe..21d3e5b 100644
--- a/resources/assets/vue/components/company/elements/CompanyProfileComponenet.vue
+++ b/resources/assets/vue/components/company/elements/CompanyProfileComponenet.vue
@@ -114,6 +114,16 @@
                                         Complete
                                     </a>
                                 </li>
+                                <li class="ml-auto">
+                                    <div class="row h-100 parentContainer">
+                                        <div class="col">
+                                            <button class="btn btn-xs btn-primary b-rad-none no-border h-100 fs-11 all-caps semi-bold p-l-20 p-r-20 requestModal"  data-type="newOrder">Create new order</button>
+                                            <modal-component type="newOrder">
+                                                <order-form-component :data="companyId"></order-form-component>
+                                            </modal-component>
+                                        </div>
+                                    </div>
+                                </li>
                             </ul>
                             <div class="tab-content bg-transparent p-l-0 p-r-0">
                                 <div class="tab-pane active" id="processing">
@@ -158,26 +168,6 @@
                     </div>
                 </div>
             </div>
-            <!--<div class="col-2 p-t-40 p-r-0 p-l-0">-->
-                <!--<div class="row m-b-15 parentContainer">-->
-                    <!--<div class="col">-->
-                        <!--<button class="btn btn-sm btn-block btn-primary b-rad-none all-caps bold p-t-10 p-b-10 requestModal"  data-type="newOrder"><i class="fa fa-shopping-basket fs-14 m-r-5"></i> New Order</button>-->
-                        <!--<modal-component type="newOrder">-->
-                            <!--<order-form-component :data="companyId"></order-form-component>-->
-                        <!--</modal-component>-->
-                    <!--</div>-->
-                <!--</div>-->
-                <!--<div class="row m-b-15">-->
-                    <!--<div class="col">-->
-                        <!--<button class="btn btn-sm btn-block btn-info b-rad-none all-caps bold p-t-10 p-b-10"><i class="fa fa-envelope-open-o fs-14 m-r-5"></i> Send Invite</button>-->
-                    <!--</div>-->
-                <!--</div>-->
-                <!--<div class="row">-->
-                    <!--<div class="col">-->
-                        <!--<button class="btn btn-sm btn-block btn-info bg-master bg-master b-rad-none all-caps bold p-t-10 p-b-10"><i class="fa fa-line-chart fs-14 m-r-5"></i> Reports</button>-->
-                    <!--</div>-->
-                <!--</div>-->
-            <!--</div>-->
         </div>
     </div>
 </template>
diff --git a/resources/assets/vue/components/company/elements/CompanySummaryComponenet.vue b/resources/assets/vue/components/company/elements/CompanySummaryComponenet.vue
index dd8b6a1..9290729 100644
--- a/resources/assets/vue/components/company/elements/CompanySummaryComponenet.vue
+++ b/resources/assets/vue/components/company/elements/CompanySummaryComponenet.vue
@@ -8,41 +8,41 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col text-justify">
+                <div class="col">
                     <p class="m-b-0 bold">{{this.company.name}}</p>
                 </div>
             </div>
             <div class="row">
-                <div class="col text-justify">
-                    <small class="muted">{{this.company.street_one || ''}} {{ this.company.street_two || '' }} {{this.company.city || '' }} {{this.company.post_code || ''}} {{this.company.state || ''}} {{this.company.country || ''}}</small>
+                <div class="col">
+                    <small class="muted fs-12">{{this.company.street_one || ''}} {{ this.company.street_two || '' }} {{this.company.city || '' }} {{this.company.post_code || ''}} {{this.company.state || ''}} {{this.company.country || ''}}</small>
                 </div>
             </div>
             <div class="row no-margin">
                 <div class="col">
                     <div class="row m-t-15 p-t-5 p-b-5 b-t b-b b-grey">
                         <div class="col p-l-0">
-                            <small class="muted fs-10 all-caps">Registration No:</small>
+                            <small class="muted fs-9 all-caps">Registration No:</small>
                         </div>
                         <div class="col-auto p-r-0">
-                            <small v-if="this.company.registration_no !==''" class="text-complete fs-10 bold">{{this.company.registration_no}}</small>
+                            <small v-if="this.company.registration_no !==''" class="muted fs-10 bold">{{this.company.registration_no}}</small>
                             <small v-else class="muted fs-8 hint-text">Empty</small>
                         </div>
                     </div>
                     <div class="row p-t-5 p-b-5 b-b b-grey">
                         <div class="col p-l-0">
-                            <small class="muted fs-10 all-caps">Tax No:</small>
+                            <small class="muted fs-9 all-caps">Tax No:</small>
                         </div>
                         <div class="col-auto p-r-0">
-                            <small v-if="this.company.tax_no !==''" class="text-complete fs-10 bold">{{this.company.tax_no}}</small>
+                            <small v-if="this.company.tax_no !==''" class="muted fs-10 bold">{{this.company.tax_no}}</small>
                             <small v-else class="muted fs-8 hint-text">Empty</small>
                         </div>
                     </div>
                     <div class="row p-t-5 p-b-5">
                         <div class="col p-l-0">
-                            <small class="muted fs-10 all-caps">Email:</small>
+                            <small class="muted fs-9 all-caps">Email:</small>
                         </div>
                         <div class="col-auto p-r-0">
-                            <small v-if="this.company.email !==''" class="text-complete fs-10 bold">{{this.company.email}}</small>
+                            <small v-if="this.company.email !==''" class="muted fs-10 bold">{{this.company.email}}</small>
                             <small v-else class="muted fs-8 hint-text">Empty</small>
                         </div>
                     </div>
diff --git a/resources/assets/vue/components/order/elements/OrderActionComponenet.vue b/resources/assets/vue/components/order/elements/OrderActionComponenet.vue
index 59594c6..94a89c2 100644
--- a/resources/assets/vue/components/order/elements/OrderActionComponenet.vue
+++ b/resources/assets/vue/components/order/elements/OrderActionComponenet.vue
@@ -6,7 +6,7 @@
                     <small class="text-danger fs-10 requestModal pointer"  data-type="delete"><i class="fa fa-times"></i> delete order</small>
                 </div>
                 <div class="col-auto">
-                    <component :is="stepComponent(this.order.current_step)" :attachments="this.order.steps.attachments" :data="this.order.id"></component>
+                    <component :is="stepComponent(this.order.current_step.details.reference_id)" :attachments="this.order.current_step.attachments" :data="this.order.id"></component>
                     <div class="btn btn-sm btn-default b-rad-none">View Details</div>
                 </div>
             </div>
diff --git a/resources/assets/vue/components/order/elements/OrderComponenet.vue b/resources/assets/vue/components/order/elements/OrderComponenet.vue
index 0f73d73..ed67b08 100644
--- a/resources/assets/vue/components/order/elements/OrderComponenet.vue
+++ b/resources/assets/vue/components/order/elements/OrderComponenet.vue
@@ -2,8 +2,8 @@
     <div class="row m-b-10 parentContainer bg-white">
         <div class="col">
             <order-header-component :data="this.data"></order-header-component>
-            <order-action-component :data="this.data"></order-action-component>
-            <order-history-component :data="this.data"></order-history-component>
+            <order-action-component class="b-t b-grey" :data="this.data"></order-action-component>
+            <order-quick-view-component :data="this.data"></order-quick-view-component>
         </div>
     </div>
 </template>
diff --git a/resources/assets/vue/components/order/elements/OrderDeliveryAddressComponenet.vue b/resources/assets/vue/components/order/elements/OrderDeliveryAddressComponenet.vue
new file mode 100644
index 0000000..7cc3328
--- /dev/null
+++ b/resources/assets/vue/components/order/elements/OrderDeliveryAddressComponenet.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="bold m-b-5">{{this.order.address.reference}}</div>
+            <div class="hint-text semi-bold">{{this.order.address.contact}}</div>
+            <div class="m-t-15 m-b-15 hint-text">{{this.order.address.street_one || ''}} {{ this.order.address.street_two || '' }} {{this.order.address.city || '' }} {{this.order.address.post_code || ''}} {{this.order.address.state || ''}} {{this.order.address.country || ''}}</div>
+            <small class="block text-complete pointer all-caps">Change Address</small>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            'data': {
+                required: true
+            }
+        },
+        data() {
+            return {
+                order: this.data,
+            }
+        },
+        watch: {
+            'data': function() {
+                this.order = this.data;
+            }
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/order/elements/OrderHeaderComponenet.vue b/resources/assets/vue/components/order/elements/OrderHeaderComponenet.vue
index 1550e9a..fb146a4 100644
--- a/resources/assets/vue/components/order/elements/OrderHeaderComponenet.vue
+++ b/resources/assets/vue/components/order/elements/OrderHeaderComponenet.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="row no-margin">
         <div class="col">
-            <div class="row no-margin p-t-10 p-b-10 b-b b-grey">
+            <div class="row no-margin p-t-10 p-b-10">
                 <div class="col p-l-0">
                     <div class="row">
                         <div class="col">
@@ -21,13 +21,13 @@
                         <div class="col"></div>
                         <div class="col-auto">
                             <span class="fs-11 muted">Status: </span>
-                            <span class="text-capitalize bold text-danger fs-11" v-if="!this.order.complete">{{this.order.steps.details.initial_name}}</span>
+                            <span class="text-capitalize bold text-danger fs-11" v-if="!this.order.complete">{{this.order.current_step.details.initial_name}}</span>
                             <span class="text-capitalize bold text-success fs-11" v-if="this.order.complete">Complete</span>
                         </div>
                     </div>
                     <div class="row" >
                         <div class="col text-right muted">
-                            <span class="fs-11 inline v-align-middle" v-if="!this.order.complete">{{this.order.steps.details.description}}</span>
+                            <span class="fs-11 inline v-align-middle" v-if="!this.order.complete">{{this.order.current_step.details.description}}</span>
                             <span class="fs-11 inline v-align-middle" v-if="this.order.complete">Order has been delivered</span>
                         </div>
                     </div>
diff --git a/resources/assets/vue/components/order/elements/OrderProfileComponent.vue b/resources/assets/vue/components/order/elements/OrderProfileComponent.vue
new file mode 100644
index 0000000..4fdc30f
--- /dev/null
+++ b/resources/assets/vue/components/order/elements/OrderProfileComponent.vue
@@ -0,0 +1,830 @@
+<template>
+    <div class="row m-t-30">
+        <div class="col">
+            <div class="row m-b-50">
+                <div class="col">
+                    <div class="row m-b-30">
+                        <div class="col text-center">
+                            <h2 class="all-caps">Order No: <span class="text-primary bold">#{{this.order.marking}}</span></h2>
+                            <p class="all-caps">{{this.order.current_step.details.description}}</p>
+                        </div>
+                    </div>
+                    <div class="row align-items-center justify-content-center">
+                        <div class="col text-center" v-for="(step, index) in order.steps">
+                            <div class="row align-items-center justify-content-center">
+                                <div class="col no-padding" >
+                                    <div class="row align-items-center justify-content-center">
+                                        <div class="col-auto b-a btn-rounded b-thick no-padding" v-bind:class="[{'b-success': step.complete === '1'}, {'b-grey': step.complete === '0'}, {'b-info': step.reference_id === order.current_step.details.reference_id}]" style=" width: 50px; ">
+                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                 width="35" height="46"
+                                                 viewBox="0 0 192 192"
+                                                 style=" fill:#000000;">
+                                                <g v-if="step.reference_id === 'PS_PROCESSING'" 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,192v-192h192v192z" fill="none"></path><g :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M81,117c0,1.656 -1.344,3 -3,3h-24c-1.656,0 -3,-1.344 -3,-3v-12c0,-1.656 1.344,-3 3,-3h24c1.656,0 3,1.344 3,3z"></path><path d="M147,111c0,-8.283 -6.717,-15 -15,-15v15z"></path><rect x="29" y="18" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="18" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="22" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="26" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="30" transform="scale(3,3)" width="10" height="2"></rect><rect x="29" y="22" transform="scale(3,3)" width="10" height="2"></rect><rect x="29" y="26" transform="scale(3,3)" width="10" height="2"></rect><path d="M159,111c0,-13.875 -10.521,-25.323 -24,-26.823v-36.693c0,-2.403 -0.939,-4.665 -2.637,-6.363l-20.484,-20.484c-1.698,-1.698 -3.96,-2.637 -6.363,-2.637h-63.516c-4.962,0 -9,4.038 -9,9v114c0,4.962 4.038,9 9,9h72v-6h-72c-1.656,0 -3,-1.344 -3,-3v-114c0,-1.656 1.344,-3 3,-3h63v15c0,4.962 4.038,9 9,9h15v36.177c-13.479,1.5 -24,12.948 -24,26.823c0,13.875 10.521,25.323 24,26.823v6.177h-9v21c0,4.962 4.038,9 9,9h6c4.962,0 9,-4.038 9,-9v-21h-9v-6.177c13.479,-1.5 24,-12.948 24,-26.823zM135,168h-6c-1.656,0 -3,-1.344 -3,-3v-3h12v3c0,1.656 -1.344,3 -3,3zM138,156h-12v-6h12zM111,39v-10.758l13.758,13.758h-10.758c-1.656,0 -3,-1.344 -3,-3zM111,111c0,-11.577 9.423,-21 21,-21c11.577,0 21,9.423 21,21c0,11.577 -9.423,21 -21,21c-11.577,0 -21,-9.423 -21,-21z"></path></g></g>
+                                                <g v-if="step.reference_id === 'MS_WAREHOUSE_RECEIVING'" 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,192v-192h192v192z" fill="none"></path><g id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M132,108h-24c0,-6.63 -5.37,-12 -12,-12v-24c19.89,0 36,16.11 36,36z"></path><path d="M148.572,68.154l8.583,-8.583c2.34,-2.337 2.34,-6.147 0,-8.484l-4.242,-4.242c-2.337,-2.337 -6.147,-2.337 -8.484,0l-8.583,8.583c-10.335,-7.854 -23.043,-12.732 -36.846,-13.353v-6.075h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6v6.075c-35.004,1.575 -63,30.54 -63,65.925c0,36.393 29.607,66 66,66c36.393,0 66,-29.607 66,-66c0,-14.958 -5.01,-28.764 -13.428,-39.846zM87,24h18l0.006,6h-18.006zM149.847,105c-1.515,-27.378 -23.469,-49.332 -50.847,-50.847v-6c30.687,1.527 55.32,26.16 56.847,56.847zM96,156c-26.466,0 -48,-21.534 -48,-48c0,-26.466 21.534,-48 48,-48c26.466,0 48,21.534 48,48c0,26.466 -21.534,48 -48,48zM148.671,51.087l4.242,4.242l-8.193,8.193c-1.35,-1.476 -2.766,-2.892 -4.242,-4.242zM93,48.153v6c-27.378,1.515 -49.332,23.469 -50.847,50.847h-6c1.527,-30.687 26.16,-55.32 56.847,-56.847zM36.153,111h6c1.515,27.378 23.469,49.332 50.847,50.847v6c-30.687,-1.527 -55.32,-26.16 -56.847,-56.847zM99,167.847v-6c27.378,-1.515 49.332,-23.469 50.847,-50.847h6c-1.527,30.687 -26.16,55.32 -56.847,56.847z"></path><path d="M132,111v-6h-21.303c-1.197,-5.868 -5.829,-10.5 -11.697,-11.697v-21.303h-6v21.303c-6.837,1.395 -12,7.452 -12,14.697c0,8.271 6.729,15 15,15c7.245,0 13.302,-5.163 14.697,-12zM96,117c-4.962,0 -9,-4.038 -9,-9c0,-4.962 4.038,-9 9,-9c4.962,0 9,4.038 9,9c0,4.962 -4.038,9 -9,9z"></path><path d="M60,108h-6c0,23.16 18.84,42 42,42v-6c-19.851,0 -36,-16.149 -36,-36z"></path></g></g>
+                                                <g v-if="step.reference_id === 'MS_WAREHOUSE_PACKING'" 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,192v-192h192v192z" fill="none"></path><g id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><rect x="37" y="18" transform="scale(3,3)" width="11" height="2"></rect><path d="M147,141l-6,9v-87l6,-9z"></path><rect x="12" y="18" transform="scale(3,3)" width="11" height="2"></rect><path d="M159,30h-105v6h105c4.962,0 9,4.038 9,9v81h6v-81c0,-8.271 -6.729,-15 -15,-15z"></path><rect x="10" y="48" transform="scale(3,3)" width="10" height="2"></rect><rect x="10" y="44" transform="scale(3,3)" width="9" height="2"></rect><rect x="30" y="46" transform="scale(3,3)" width="2" height="4"></rect><rect x="34" y="46" transform="scale(3,3)" width="2" height="4"></rect><rect x="38" y="46" transform="scale(3,3)" width="2" height="4"></rect><path d="M156,42h-102.855c-2.073,0 -4.101,0.723 -5.703,2.04l-26.151,21.438c-2.094,1.716 -3.291,4.254 -3.291,6.96v80.562c0,4.962 4.038,9 9,9h96c0.207,0 0.414,-0.006 0.615,-0.021c4.428,-0.198 8.721,-1.809 12.189,-4.578l22.812,-18.252c2.151,-1.716 3.384,-4.284 3.384,-7.041v-84.108c0,-3.309 -2.691,-6 -6,-6zM57,72h36v15c0,1.656 -1.344,3 -3,3h-29.7c-1.725,0 -3.3,-1.431 -3.3,-3zM94.947,66h-32.478l22.227,-18h32.751zM51.243,48.681c0.537,-0.441 1.209,-0.681 1.902,-0.681h22.014l-22.221,18h-22.818zM123.258,155.988c-0.192,0.009 -0.381,0.012 -0.57,0.012h-17.688h-78c-1.656,0 -3,-1.344 -3,-3v-80.562c0,-0.153 0.075,-0.288 0.099,-0.438h26.901v15c0,4.878 4.26,9 9.3,9h29.7c4.962,0 9,-4.038 9,-9v-15h27v81c0,1.566 -1.206,2.856 -2.742,2.988zM128.235,66h-23.682l22.503,-18h23.394l-21.069,16.857c-0.432,0.342 -0.792,0.741 -1.146,1.143zM156,132.108c0,0.924 -0.411,1.779 -1.131,2.352l-22.812,18.252c-0.018,0.015 -0.039,0.033 -0.057,0.048v-80.88c0,-0.915 0.411,-1.764 1.125,-2.334l22.875,-18.306z"></path></g></g>
+                                                <g v-if="step.reference_id === 'PS_SHIPPING'" 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,192v-192h192v192z" fill="none"></path><g :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M96,1.5c-2.55,0 -4.5,1.95 -4.5,4.5v36h-15c-6.6,0 -12,5.4 -12,12v22.5h-9c-6.6,0 -12,5.4 -12,12v30c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5v-30c0,-1.65 1.35,-3 3,-3h111c1.65,0 3,1.35 3,3v41.10059l-56.70117,-22.80176h-0.14941c-0.15,0 -0.29824,-0.14941 -0.44824,-0.14941c-0.15,0 -0.30117,-0.14941 -0.45117,-0.14941c-0.6,-0.15 -1.19883,-0.15 -1.79883,0c-0.15,0 -0.30117,0.14941 -0.45117,0.14941c-0.15,0 -0.30117,-0.00059 -0.45117,0.14941h-0.14941l-74.85059,30c-2.25,0.9 -3.29883,3.30176 -2.54883,5.55176l7.95117,24c0.75,2.4 3.29824,3.60058 5.69824,2.85058c2.4,-0.75 3.60059,-3.30117 2.85059,-5.70117l-6.75,-20.10059l65.25,-25.79883v63.29883c-2.7,-0.75 -5.25059,-2.24824 -7.35059,-4.19825c-1.65,-1.65 -4.64883,-1.65 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-4.5,0 -8.70059,-1.79825 -11.85059,-4.94825c-1.65,-1.65 -4.64883,-1.65 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-4.5,0 -8.70059,-1.79825 -11.85059,-4.94825c-1.8,-1.8 -4.64883,-1.8 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-2.55,0 -4.5,1.95 -4.5,4.5c0,2.55 1.95,4.5 4.5,4.5c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883h60h0.75h0.14942c0.15,0 0.45059,-0.14942 0.60058,-0.14942c0.15,0 0.14883,0.00059 0.29883,-0.14942c0.15,0 0.30175,-0.14942 0.30175,-0.14942c0.15,0 0.14883,-0.15234 0.29883,-0.15234c0.15,0 0.30175,-0.14942 0.30175,-0.14942l0.14942,-0.14942c0.15,-0.15 0.29883,-0.14883 0.29883,-0.29883l0.14942,-0.15234c0.15,-0.15 0.15175,-0.29883 0.30175,-0.29883c0,0 0.14942,-0.14883 0.14942,-0.29883c0.15,-0.15 0.14883,-0.30175 0.29883,-0.30175c0.15,-0.15 0.15175,-0.45058 0.30175,-0.60058l15,-45c0.6,-2.7 -0.45117,-5.1 -2.70117,-6l-9.14942,-3.59766v-44.70117c0,-6.6 -5.4,-12 -12,-12h-9v-22.5c0,-6.6 -5.4,-12 -12,-12h-15v-36c0,-2.55 -1.95,-4.5 -4.5,-4.5zM100.5,10.5h21v31.5h-21zM76.5,51h69c1.65,0 3,1.35 3,3v22.5h-75v-22.5c0,-1.65 1.35,-3 3,-3zM80.85059,136.61133c-1.1625,0 -2.32441,0.41426 -3.14941,1.23926l-0.60059,0.60058c-0.15,0.3 -0.30117,0.45 -0.45117,0.75c-0.15,0.3 -0.14883,0.59942 -0.29883,0.89942c0,0.3 -0.14941,0.59941 -0.14941,0.89941c0,1.2 0.44766,2.39941 1.34766,3.14941c0.9,0.9 1.95234,1.35059 3.15234,1.35059c1.2,0 2.69824,-0.45059 3.44824,-1.35059c0.9,-0.9 1.35059,-1.94941 1.35059,-3.14941c0,-0.3 0.00059,-0.59941 -0.14941,-0.89941c0,-0.3 -0.15176,-0.59941 -0.30176,-0.89942c-0.15,-0.3 -0.29824,-0.45 -0.44824,-0.75c-0.15,-0.3 -0.30059,-0.45058 -0.60059,-0.60058c-0.825,-0.825 -1.98691,-1.23926 -3.14941,-1.23926zM6,175.23633c-0.3,0 -0.59941,0.03925 -0.89941,0.11425c-0.3,0 -0.59941,0.14883 -0.89941,0.29883c-0.3,0.15 -0.45,0.30117 -0.75,0.45117c-0.3,0.15 -0.45,0.30059 -0.75,0.60058c-0.9,0.9 -1.35059,1.94942 -1.35059,3.14942c0,0.3 -0.00059,0.59941 0.14941,0.89942c0.15,0.15 0.14883,0.45 0.29883,0.75c0.15,0.3 0.30117,0.6 0.45117,0.75c0.15,0.3 0.30059,0.45 0.60059,0.75c0.15,0.15 0.45,0.45058 0.75,0.60058c0.3,0.15 0.45,0.29825 0.75,0.44825c0.3,0.15 0.59941,0.15175 0.89941,0.30175c0.3,0 0.59941,0.14942 0.89941,0.14942c0.3,0 0.59941,0.00059 0.89941,-0.14942c0.3,0 0.60234,-0.15175 0.90234,-0.30175c0.3,-0.15 0.6,-0.29825 0.75,-0.44825c0.3,-0.15 0.45,-0.30058 0.75,-0.60058c0.15,-0.15 0.44766,-0.45 0.59766,-0.75c0.15,-0.3 0.30117,-0.45 0.45117,-0.75c0.15,-0.3 0.14883,-0.59941 0.29883,-0.89942c0,-0.3 0.15234,-0.59941 0.15234,-0.89942c0,-0.3 -0.00234,-0.60234 -0.15234,-0.90234c0,-0.3 -0.14883,-0.59942 -0.29883,-0.89942c-0.15,-0.3 -0.30117,-0.6 -0.45117,-0.75c-0.15,-0.3 -0.29766,-0.45 -0.59766,-0.75c-0.15,-0.15 -0.45,-0.45058 -0.75,-0.60058c-0.3,-0.15 -0.45,-0.29825 -0.75,-0.44825c-0.45,0.15 -0.75176,0.15 -1.05176,0c-0.3,-0.075 -0.59941,-0.11425 -0.89941,-0.11425z"></path></g></g>
+                                                <g v-if="step.reference_id === 'MS_WAREHOUSE_ARRIVAL'" 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,192v-192h192v192z" fill="none"></path><g id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M96,102c-6.618,0 -12,-5.382 -12,-12h6c0,3.309 2.691,6 6,6c3.309,0 6,-2.691 6,-6h6c0,6.618 -5.382,12 -12,12z"></path><rect x="25" y="13" transform="scale(3,3)" width="14" height="2"></rect><rect x="16" y="49" transform="scale(3,3)" width="18" height="2"></rect><rect x="16" y="45" transform="scale(3,3)" width="18" height="2"></rect><rect x="16" y="41" transform="scale(3,3)" width="18" height="2"></rect><path d="M174,99v-9.024c0,-4.947 -4.029,-8.976 -8.976,-8.976h-18.864l-3.96,-11.886c-1.221,-3.657 -4.632,-6.114 -8.487,-6.114h-16.713v-6h12v-21c0,-4.962 -4.038,-9 -9,-9h-48c-4.962,0 -9,4.038 -9,9v21h12v6h-16.713c-3.855,0 -7.266,2.457 -8.487,6.117l-3.96,11.883h-18.864c-4.947,0 -8.976,4.029 -8.976,8.976v9.024h6v60h-6v6h156v-6h-6v-60zM69,51v-15c0,-1.656 1.344,-3 3,-3h48c1.656,0 3,1.344 3,3v15zM81,57h30v6h-30zM108,159h-66v-42h66zM150,129h-6v6h6v12h-18v-30h18zM132,153h18v6h-18zM162,159h-6v-42c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v42h-12v-42c0,-3.309 -2.691,-6 -6,-6h-66c-3.309,0 -6,2.691 -6,6v42h-6v-60h42v-6h-48v-3.024c0,-1.641 1.335,-2.976 2.976,-2.976h45.024v-6h-19.839l3.327,-9.981c0.405,-1.206 1.53,-2.019 2.799,-2.019h75.429c1.269,0 2.394,0.813 2.799,2.016l3.324,9.984h-19.839v6h45.024c1.641,0 2.976,1.335 2.976,2.976v3.024h-48v6h42z"></path><path d="M105,75h-18c-4.962,0 -9,4.038 -9,9v9h36v-9c0,-4.962 -4.038,-9 -9,-9zM108,87h-24v-3c0,-1.656 1.344,-3 3,-3h18c1.656,0 3,1.344 3,3z"></path></g></g>
+                                                <g v-if="step.reference_id === 'MS_WAREHOUSE_UNPACKING'" 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,192v-192h192v192z" fill="none"></path><g :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M35.39941,47.39941l-16.04883,0.60059c-2.55,0.15 -4.50059,2.09941 -4.35059,4.64941c0.15,2.55 2.09941,4.35059 4.64941,4.35059l13.35059,-0.45117l23.25,40.5c0.9,1.5 2.39941,2.25 3.89941,2.25c0.75,0 1.5,-0.14766 2.25,-0.59766c2.1,-1.2 2.84942,-4.05234 1.64941,-6.15234l-24.59766,-42.89941c-0.9,-1.5 -2.40176,-2.25 -4.05176,-2.25zM133.65234,67.3916c-0.87187,-0.0668 -1.76426,0.10957 -2.55176,0.55957l-23.39941,13.5c-0.75,0.45 -0.90059,1.34766 -0.60059,2.09766l6,10.35059c1.2,2.1 0.45059,4.94941 -1.64941,6.14941l-7.80176,4.5c-2.1,1.2 -4.94941,0.45059 -6.14941,-1.64941l-6,-10.35059c-0.45,-0.75 -1.35059,-0.89766 -2.10059,-0.59766l-23.39941,13.5c-2.1,1.2 -2.84941,4.04941 -1.64941,6.14941l9.44824,16.35059c-15.3,1.8 -27.14883,14.99942 -27.29883,30.89941c0,8.85 3.60117,16.94942 9.45117,22.64942h-7.95117c-2.55,0 -4.5,1.95 -4.5,4.5c0,2.55 1.95,4.5 4.5,4.5h75c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-22.95117c1.2,-1.2 2.25234,-2.40059 3.15234,-3.60058c1.35,0.9 3.29883,1.04942 4.79883,0.14942l64.95117,-37.34766c2.1,-1.2 2.84942,-4.05234 1.64942,-6.15234l-37.35058,-64.94824c-0.75,-1.3125 -2.14453,-2.09766 -3.59766,-2.20899zM78,136.5h0.14941c12.45,0.15 22.50059,10.19941 22.35059,22.64942c-0.15,12.3 -10.2,22.35058 -22.5,22.35058c-12.6,-0.15 -22.65,-10.19941 -22.5,-22.64942c0.15,-12.3 10.2,-22.35058 22.5,-22.35058zM25.5,181.46192c-1.1625,0 -2.32441,0.41425 -3.14941,1.23925c-0.15,0.15 -0.45059,0.45 -0.60059,0.75c-0.15,0.3 -0.30117,0.45 -0.45117,0.75c-0.15,0.3 -0.14883,0.59942 -0.29883,0.89942c0,0.3 -0.14941,0.59941 -0.14941,0.89942c0,1.2 0.45058,2.39942 1.35058,3.14942c0.9,0.9 1.94941,1.35058 3.14941,1.35058c1.2,0 2.39941,-0.45058 3.14941,-1.35058c0.9,-0.9 1.35059,-1.94942 1.35059,-3.14942c0,-0.3 0.00059,-0.59941 -0.14941,-0.89942c0,-0.3 -0.15176,-0.59941 -0.30176,-0.89942c0.15,-0.15 0.00059,-0.45 -0.14941,-0.75c-0.15,-0.3 -0.30059,-0.45 -0.60059,-0.75c-0.825,-0.825 -1.98691,-1.23925 -3.14941,-1.23925z"></path></g></g>
+                                                <g v-if="step.reference_id === 'PS_DELIVERY'" 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,192v-192h192v192z" fill="none"></path><g id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M177,126v-15c0,-4.962 -4.038,-9 -9,-9h-13.971c-1.221,0 -2.313,-0.732 -2.775,-1.863l-11.913,-29.163c-1.533,-3.066 -4.617,-4.974 -8.046,-4.974h-17.295v-9c0,-4.962 -4.038,-9 -9,-9h-49.767c-3.57,-8.784 -12.183,-15 -22.233,-15h-24v24c0,11.16 7.665,20.535 18,23.211v45.789c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h3h9.27c1.434,8.499 8.826,15 17.73,15c8.904,0 16.293,-6.501 17.73,-15h36.27h3h6.27c1.434,8.499 8.826,15 17.73,15c8.904,0 16.293,-6.501 17.73,-15h18.27h3c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM15,57v-18h18c9.927,0 18,8.073 18,18c0,9.927 -8.073,18 -18,18c-9.927,0 -18,-8.073 -18,-18zM57,153c-6.618,0 -12,-5.382 -12,-12c0,-6.618 5.382,-12 12,-12c6.618,0 12,5.382 12,12c0,6.618 -5.382,12 -12,12zM74.73,138c-1.434,-8.499 -8.826,-15 -17.73,-15c-8.904,0 -16.293,6.501 -17.73,15h-6.27v-57c13.233,0 24,-10.767 24,-24c0,-1.017 -0.084,-2.016 -0.207,-3h48.207c1.656,0 3,1.344 3,3v18h-42v6h42v6h-30v6h30v6h-18v6h18v33zM138,153c-6.618,0 -12,-5.382 -12,-12c0,-6.618 5.382,-12 12,-12c6.618,0 12,5.382 12,12c0,6.618 -5.382,12 -12,12zM138,123c-8.901,0 -16.293,6.501 -17.73,15h-6.27v-66h17.295c1.143,0 2.172,0.636 2.586,1.449l11.817,28.956c1.392,3.402 4.662,5.595 8.331,5.595h13.971c1.656,0 3,1.344 3,3v15h-6c-3.309,0 -6,2.691 -6,6v6h-3.27c-1.437,-8.499 -8.829,-15 -17.73,-15zM165,138v-6h6v6z"></path><path d="M45,54h-9v-9h-6v15h15z"></path><circle cx="19" cy="47" transform="scale(3,3)" r="2"></circle><circle cx="46" cy="47" transform="scale(3,3)" r="2"></circle><path d="M123,78h3.96c1.233,0 2.34,0.75 2.799,1.893l9.591,23.979c0.789,1.977 -0.666,4.128 -2.793,4.128h-13.557c-1.656,0 -3,-1.344 -3,-3v-24c0,-1.656 1.344,-3 3,-3z"></path></g></g>
+                                            </svg>
+                                            <div class="absolute" style="top: -2px;right: -6px;" v-if="step.complete === '1'">
+                                                <div class="bg-success btn-rounded no-padding">
+                                                    <div class="fs-8 text-white"><i class="fa fa-check fs-10 padding-5"></i></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-t-10">
+                                        <div class="col">
+                                            <small class="all-caps fs-11"  v-bind:class="[{'muted': step.complete === '0' &&  step.reference_id !== order.current_step.details.reference_id}, {'text-success': step.complete === '1'}]" style=" white-space: nowrap; "><span v-if="step.complete === '1'">{{step.details.final_name}}</span><span v-else>{{step.details.initial_name}}</span></small>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-auto no-padding hint-text" v-if="index !== (order.steps.length - 1)">
+                                    <div class="fs-15 m-b-25 " v-bind:class="[{'muted': step.complete !== '1'}]">
+                                        <i class="fa fa-ellipsis-h" style=" margin-right: 1px; "></i><i class="fa fa-ellipsis-h"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-30">
+                <div class="col-3">
+                    <div class="row no-margin">
+                        <div class="col bg-white p-t-20 p-b-20 hint-text">
+                            <div class="row m-b-15">
+                                <div class="col">
+                                    <span class="all-caps muted fs-11">Shipping Address</span>
+                                </div>
+                            </div>
+                            <div class="row fs-12">
+                                <div class="col">
+                                    <order-delivery-address-component :data="this.order"></order-delivery-address-component>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-l-0 m-r-0 m-t-15 m-b-20">
+                        <div class="col bg-info p-t-20 p-b-20">
+                            <div class="row m-b-20">
+                                <div class="col"><span class="all-caps text-info-lighter hint-text fs-11 bold">Receive Note</span></div>
+                            </div>
+                            <div class="row fs-12">
+                                <div class="col">
+                                    <div class="row m-b-15">
+                                        <div class="col">
+                                            <div class="row m-b-5">
+                                                <div class="col"><span class="all-caps text-white hint-text fs-9">Warehouse</span></div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="all-caps fs-11 text-white no-margin">GZ-BY-V01 广州白云江高仓库</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-auto">
+                                            <div class="row m-b-5">
+                                                <div class="col"><span class="all-caps text-white hint-text fs-9">Receive Date</span></div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="all-caps text-warning no-margin bold fs-11">06/05/2019</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <div class="row m-b-5">
+                                                <div class="col"><span class="all-caps text-white hint-text fs-9    ">Tracking Number</span></div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="all-caps no-margin text-white fs-11">432456453</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-t-20">
+                                        <div class="col"><small class="block text-complete-lighter pointer all-caps">Edit Note</small></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-7">
+                    <div class="row m-l-0 m-r-0 m-b-20">
+                        <ul class="nav" data-init-reponsive-tabs="dropdownfx">
+                            <li class="col-4 nav-item">
+                                <a href="#" class="active" data-toggle="tab" data-target="#overview">
+                                    <div class="row fs-12">
+                                        <div class="col padding-25 arrow_tab b-r">
+                                            <div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
+                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                     width="130" height="130"
+                                                     viewBox="0 0 192 192"
+                                                     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,192v-192h192v192z" fill="none"></path><g fill="#000000"><g id="surface1"><path d="M26.88,7.68v176.64h138.24v-176.64zM34.56,15.36h122.88v161.28h-122.88zM57.6,46.08v7.68h76.8v-7.68zM57.6,84.48v7.68h49.92v-7.68zM122.88,84.48v7.68h11.52v-7.68zM57.6,107.52v7.68h30.72v-7.68zM122.88,107.52v7.68h11.52v-7.68zM57.6,130.56v7.68h49.92v-7.68zM122.88,130.56v7.68h11.52v-7.68z"></path></g></g></g></svg>
+                                            </div>
+                                            <h5 class="bold all-caps m-t-0">Overview</h5>
+                                            <small class="muted">Overview of the order's packing list, shipping and delivery details</small>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="col-4 nav-item">
+                                <a href="#" data-toggle="tab" data-target="#timeline">
+                                    <div class="row fs-12">
+                                        <div class="col padding-25 arrow_tab b-r">
+                                            <div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
+                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                     width="150" height="150"
+                                                     viewBox="0 0 192 192"
+                                                     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,192v-192h192v192z" fill="none"></path><g id="Слой_1" fill="#000000"><circle cx="32" cy="32" transform="scale(3,3)" r="4"></circle><path d="M96,21c-15.81,0 -30.78,4.866 -43.533,13.998l-9.132,-9.132c-1.572,-1.569 -3.804,-2.208 -5.967,-1.692c-2.163,0.51 -3.876,2.073 -4.578,4.185l-8.28,24.828c-1.173,3.516 -0.273,7.326 2.346,9.948c1.863,1.863 4.323,2.856 6.855,2.856c1.032,0 2.076,-0.168 3.099,-0.507l24.831,-8.274c2.109,-0.702 3.675,-2.418 4.185,-4.578c0.51,-2.166 -0.123,-4.398 -1.695,-5.967l-7.368,-7.371c11.556,-8.022 25.029,-12.294 39.237,-12.294c38.046,0 69,30.951 69,69c0,38.049 -30.954,69 -69,69c-38.046,0 -69,-30.951 -69,-69h-6c0,41.355 33.645,75 75,75c41.355,0 75,-33.645 75,-75c0,-41.355 -33.645,-75 -75,-75zM59.988,51.255c-0.048,0.198 -0.189,0.246 -0.243,0.267l-24.831,8.277c-1.374,0.45 -2.793,0.12 -3.813,-0.903c-1.017,-1.017 -1.353,-2.442 -0.897,-3.81l8.277,-24.831c0.015,-0.051 0.063,-0.195 0.267,-0.243c0.033,-0.009 0.066,-0.012 0.096,-0.012c0.141,0 0.219,0.078 0.249,0.108l20.799,20.802c0.036,0.036 0.144,0.147 0.096,0.345z"></path><path d="M68.121,128.121l19.62,-19.62c2.373,1.572 5.208,2.499 8.259,2.499c8.271,0 15,-6.729 15,-15c0,-7.245 -5.163,-13.302 -12,-14.697v-24.303h-6v24.303c-6.837,1.395 -12,7.452 -12,14.697c0,3.054 0.927,5.886 2.499,8.259l-19.62,19.62zM96,87c4.962,0 9,4.038 9,9c0,4.962 -4.038,9 -9,9c-4.962,0 -9,-4.038 -9,-9c0,-4.962 4.038,-9 9,-9z"></path><path d="M96,159c34.74,0 63,-28.263 63,-63h-6c0,31.431 -25.569,57 -57,57z"></path></g></g></svg>
+                                            </div>
+                                            <h5 class="bold all-caps m-t-0">Timeline</h5>
+                                            <small class="muted">View order's detailed history outlining the order's every step and update</small>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="col-4 nav-item">
+                                <a href="#" data-toggle="tab" data-target="#payments">
+                                    <div class="row fs-12">
+                                        <div class="col padding-25 arrow_tab">
+                                            <div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
+                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                     width="150" height="150"
+                                                     viewBox="0 0 192 192"
+                                                     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,192v-192h192v192z" fill="none"></path><g id="Слой_1" fill="#000000"><rect x="49" y="12" transform="scale(3,3)" width="2" height="36"></rect><path d="M153,30h-6v-3c0,-4.962 -4.038,-9 -9,-9h-96c-4.962,0 -9,4.038 -9,9v105v9v12c0,4.962 4.038,9 9,9h9v3c0,4.962 4.038,9 9,9h39h18h3c4.962,0 9,-4.038 9,-9v-3h9c4.962,0 9,-4.038 9,-9v-3h6c3.309,0 6,-2.691 6,-6v-108c0,-3.309 -2.691,-6 -6,-6zM39,27c0,-1.653 1.344,-3 3,-3h96c1.656,0 3,1.347 3,3v105v9c0,1.653 -1.344,3 -3,3h-9v-18h-12h-18h-48v18h-9c-1.656,0 -3,-1.347 -3,-3v-9zM42,156c-1.656,0 -3,-1.347 -3,-3v-3.552c0.942,0.336 1.944,0.552 3,0.552h9v6zM60,168c-1.656,0 -3,-1.347 -3,-3v-33h18v15h6v-15h6v21h6v-21h6v36zM105,168v-36h6v36zM123,165c0,1.653 -1.344,3 -3,3h-3v-36h6zM138,156h-9v-6h9c1.056,0 2.058,-0.216 3,-0.552v3.552c0,1.653 -1.344,3 -3,3zM153,144h-6v-3v-9v-96h6z"></path><path d="M57,60h66c3.309,0 6,-2.691 6,-6v-12c0,-3.309 -2.691,-6 -6,-6h-66c-3.309,0 -6,2.691 -6,6v12c0,3.309 2.691,6 6,6zM57,42h66v12h-66z"></path><path d="M57,84h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM57,72h6v6h-6z"></path><path d="M123,66h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM123,78h-6v-6h6z"></path><path d="M57,108h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM57,96h6v6h-6z"></path><path d="M81,84h18c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM81,72h18v6h-18z"></path><path d="M75,102c0,3.309 2.691,6 6,6h18c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6zM81,96h18v6h-18z"></path><path d="M123,90h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM123,102h-6v-6h6z"></path><rect x="19" y="38" transform="scale(3,3)" width="22" height="2"></rect><rect x="35" y="44" transform="scale(3,3)" width="2" height="12"></rect></g></g></svg>
+                                            </div>
+                                            <h5 class="bold all-caps m-t-0">Payments</h5>
+                                            <small class="muted">View order's outstanding payments and payment's receipts</small>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="tab-content">
+                        <div class="tab-pane fade show active" id="overview">
+                            <div class="row no-margin">
+                                <div class="col">
+                                    <div class="row fs-12">
+                                        <div class="col">
+                                            <div class="row bg-white all-caps muted p-t-10 p-b-10 b-b b-grey">
+                                                <div class="col">
+                                                    <small class="bold all-caps">Packing List</small>
+                                                </div>
+                                                <div class="col text-right">
+                                                    <small class="all-caps text-complete pointer">Edit List</small>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <div class="row align-items-center justify-content-center b-b b-grey">
+                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">1. 玄关/家</small></div>
+                                                        <div class="col-1"></div>
+                                                        <div class="col-3">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
+                                                                <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,192v-192h192v192z" fill="none"></path>
+                                                                    <g fill="#4d6286">
+                                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
+                                                                    </g>
+                                                                </g>
+                                                            </svg>
+                                                            <small class="m-l-5 m-r-5 text-info hint-text">x</small>
+                                                            <small class="bold text-info">12</small>
+                                                        </div>
+                                                        <div class="col text-right"><small class="muted bold">300 x 300 x 300 cm</small></div>
+                                                    </div>
+                                                    <div class="row align-items-center justify-content-center b-b b-grey">
+                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">1. 玄关/家</small></div>
+                                                        <div class="col-1"></div>
+                                                        <div class="col-3">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
+                                                                <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,192v-192h192v192z" fill="none"></path>
+                                                                    <g fill="#4d6286">
+                                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
+                                                                    </g>
+                                                                </g>
+                                                            </svg>
+                                                            <small class="m-l-5 m-r-5 text-info hint-text">x</small>
+                                                            <small class="bold text-info">12</small>
+                                                        </div>
+                                                        <div class="col text-right"><small class="muted bold">300 x 300 x 300 cm</small></div>
+                                                    </div>
+                                                    <div class="row align-items-center justify-content-center b-b b-grey">
+                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">1. 玄关/家</small></div>
+                                                        <div class="col-1"></div>
+                                                        <div class="col-3">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
+                                                                <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,192v-192h192v192z" fill="none"></path>
+                                                                    <g fill="#4d6286">
+                                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
+                                                                    </g>
+                                                                </g>
+                                                            </svg>
+                                                            <small class="m-l-5 m-r-5 text-info hint-text">x</small>
+                                                            <small class="bold text-info">12</small>
+                                                        </div>
+                                                        <div class="col text-right"><small class="muted bold">300 x 300 x 300 cm</small></div>
+                                                    </div>
+                                                    <div class="row align-items-center justify-content-center b-b b-grey">
+                                                        <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">1. 玄关/家</small></div>
+                                                        <div class="col-1"></div>
+                                                        <div class="col-3">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 192 192" 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,192v-192h192v192z" fill="none"></path>
+                                                                    <g fill="#4d6286">
+                                                                        <g id="surface1">
+                                                                            <path d="M95.07692,29.53846c-0.80769,0.11538 -1.58654,0.34615 -2.30769,0.69231l-87,43.61538c-0.72115,0.11538 -1.41346,0.34615 -2.07692,0.69231c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.14423 0,0.31731 0,0.46154c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.14423 0,0.31731 0,0.46154c0,0.14423 0,0.31731 0,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.02885,0.375 -0.02885,0.77885 0,1.15385v33.46154c-0.02885,2.85577 1.58654,5.45192 4.15385,6.69231l22.15385,11.07692c1.99038,0.98077 4.32693,0.98077 6.34615,0.0577c2.01923,-0.95193 3.49038,-2.74039 4.03846,-4.90385l29.76923,15.92308v6c0.02884,2.71154 1.52884,5.19231 3.92308,6.46154l22.15385,11.76923c2.16346,1.15385 4.75961,1.15385 6.92308,0l88.61538,-45.69231c2.39423,-1.26923 3.89423,-3.75 3.92308,-6.46154v-33.92308c0.0577,-0.54808 0.0577,-1.06731 0,-1.61538c0,-0.63461 -0.08654,-1.24039 -0.23077,-1.84615c-0.11538,-0.40384 -0.28846,-0.77885 -0.46154,-1.15385c0,-0.08654 0,-0.14423 0,-0.23077c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c0,-0.08654 0,-0.14423 0,-0.23077c-0.05769,-0.14423 -0.14423,-0.31731 -0.23077,-0.46154c-0.20192,-0.31731 -0.43269,-0.63461 -0.69231,-0.92308c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c-0.14423,-0.08654 -0.31731,-0.17307 -0.46154,-0.23077c-0.40384,-0.43269 -0.86538,-0.83654 -1.38462,-1.15385c-0.08654,0 -0.14423,0 -0.23077,0l-0.46154,-0.23077c-0.23077,-0.08654 -0.46154,-0.17307 -0.69231,-0.23077l-24.69231,-12.46154c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-23.76923,-11.76923c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-27.46154,-13.61538c-1.29808,-0.63461 -2.74039,-0.86538 -4.15385,-0.69231zM96,45.23077l12.92308,6.46154l-72,36l-12.92308,-6.46154zM125.53846,60l12.92308,6.46154l-72,36l-12.92308,-6.46154zM155.07692,74.76923l12.92308,6.46154l-72,36l-12.92308,-6.46154zM14.76923,93.23077l17.30769,8.53846c0.80769,0.66346 1.75961,1.125 2.76923,1.38462l27,13.61538c0.375,0.17308 0.75,0.34615 1.15385,0.46154l0.23077,0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077h0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077l28.38462,14.30769c0.43269,0.20192 0.92308,0.34615 1.38462,0.46154c0.23077,0.08654 0.46154,0.17308 0.69231,0.23077l1.15385,0.69231v20.53846l-14.76923,-7.84615v-6c-0.02884,-2.71153 -1.52884,-5.19231 -3.92308,-6.46154l-44.30769,-23.76923c-2.07692,-1.15385 -4.58654,-1.24039 -6.72115,-0.23077c-2.13462,1.00962 -3.69231,2.97116 -4.125,5.30769l-7.38462,-3.69231z"></path>
+                                                                        </g>
+                                                                    </g>
+                                                                </g>
+                                                            </svg>
+                                                            <small class="m-l-5 m-r-5 text-info hint-text">x</small>
+                                                            <small class="bold text-info">3</small>
+                                                        </div>
+                                                        <div class="col text-right"><small class="muted bold">300 x 300 x 300 cm</small></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-4 bg-master-lighter p-t-15 p-b-15 hint-text">
+                                    <div class="row m-b-20 fs-12">
+                                        <div class="col">
+                                            <div class="row m-l-0 m-r-0 m-b-5">
+                                                <div class="col no-padding b-b" style="border-color: rgb(204, 204, 204);">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="bold all-caps p-b-5 no-margin hint-text" >Shipping</div>
+                                                        </div>
+                                                        <div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <div class="row m-b-5 align-items-center justify-content-center">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETD</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">06-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETA</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">10-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-success fs-8"></i></div>
+                                                    </div>
+                                                    <div class="row m-b-5 align-items-center justify-content-center">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETD</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">06-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETA</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">10-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-danger fs-8"></i></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row fs-12">
+                                        <div class="col">
+                                            <div class="row m-l-0 m-r-0 m-b-5">
+                                                <div class="col no-padding b-b" style="border-color: rgb(204, 204, 204);">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="bold all-caps p-b-5 no-margin hint-text" >Delivery</div>
+                                                        </div>
+                                                        <div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                    <div class="row m-b-10 align-items-center justify-content-center">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETD</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">06-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="row">
+                                                                <div class="col"><small class="muted">ETA</small></div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col"><small class="bold">10-05-2019</small></div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-success fs-8"></i></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="tab-pane fade" id="timeline">
+                            <div class="row fs-12 m-l-0 m-r-0 m-b-20"><div class="col p-l-0 p-r-0 bg-white">
+                                <div class="row all-caps muted m-l-0 m-r-0 m-b-15 p-t-10 p-b-10 b-b b-grey">
+                                    <div class="col">
+                                        <small class="bold all-caps">Order's History</small>
+                                    </div>
+                                </div>
+                                <div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                23-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Custom clearance is successful</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                23-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Arrived to Malaysian port</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                23-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">[ETD: 2019-05-06, ETA: 2019-05-09] Your Order has been scheduled for shipping </div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                09-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Invoice has been issued, waiting for shipping payment</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                09-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">[44 Packages, 32.30 CBM] Your order has been loaded into container</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                06-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Arrived at Collier-Fadel warehouse in china</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                21-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Collier-Fadel confirmed as your order's warehouse</div></div></div></div><div class="row m-l-0 m-r-0 p-b-15 relative order-history"><div class="absolute bullet-connector hint-text"></div> <div class="col"><div class="row align-items-center justify-content-center"><div class="col-auto p-r-10"><div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div></div> <div class="col-auto hint-text p-l-0">
+                                21-05-2019
+                            </div> <div class="col p-l-0 semi-bold lh-20">Order number has been created</div></div></div></div></div></div>
+                        </div>
+                        <div class="tab-pane fade" id="payments">
+                            <div class="row m-b-20">
+                                <div class="col">
+                                    <div class="row p-b-5 b-b b-grey fs-12 m-b-15 m-l-0 m-r-0">
+                                        <div class="col no-padding">
+                                            <small class="all-caps muted bold">Invoices</small>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row fs-12 m-l-0 m-r-0 m-b-15">
+                                                <div class="col bg-white ">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Invoice No.</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="bold all-caps">214441830</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Status</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-danger bold all-caps">Unpaid</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Issue</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">06-05-2019</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Type</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">Shipping</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps muted">Total</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">RM 212.25</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row fs-12 m-l-0 m-r-0 m-b-15">
+                                                <div class="col bg-white ">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Invoice No.</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="bold all-caps">214441830</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Status</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-danger bold all-caps">Unpaid</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Issue</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">06-05-2019</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Type</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">Service</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps muted">Total</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">RM 212.25</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row p-b-5 b-b b-grey fs-12 m-b-15 m-l-0 m-r-0">
+                                        <div class="col no-padding">
+                                            <small class="all-caps muted bold">Receipts</small>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row fs-12 m-l-0 m-r-0 m-b-15">
+                                                <div class="col bg-white ">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Receipt No.</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="bold all-caps">214441830</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Status</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">Paid</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Issue</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">06-05-2019</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Type</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">Shipping</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps muted">Total</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">RM 212.25</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row fs-12 m-l-0 m-r-0 m-b-15">
+                                                <div class="col bg-white ">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Receipt No.</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="bold all-caps">214441830</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Status</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">Paid</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Issue</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">06-05-2019</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col hint-text">
+                                                                    <small class="all-caps muted hint-text">Type</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps">Service</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="all-caps muted">Total</small>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <small class="text-success bold all-caps">RM 212.25</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col no-padding">
+                            <div class="btn btn-sm btn-block btn-success b-rad-none requestModal">Order Packed</div>
+                        </div>
+                    </div>
+                    <div class="row b-a b-grey">
+                        <div class="col bg-white">
+                            <div class="row p-t-5 p-b-5 bg-master-lighter">
+                                <div class="col fs-11"><small class="all-caps text-info bold ">Order Information</small></div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row bg-master-lightest">
+                                        <div class="col fs-11">
+                                            <div class="row  p-t-5 p-b-5 no-margin">
+                                                <div class="col no-padding"><small class="all-caps ">Date Created:</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">02-05-2019</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row  p-t-5 p-b-5 no-margin">
+                                                <div class="col no-padding"><small class="all-caps ">Total CBM:</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">3.12</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row bg-master-lightest">
+                                        <div class="col fs-11">
+                                            <div class="row  p-t-5 p-b-5 no-margin">
+                                                <div class="col no-padding"><small class="all-caps">Number of Packages:</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">14</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-t-20">
+                        <div class="col bg-white">
+                            <div class="row bg-master-lighter text-success p-t-5 p-b-5 ">
+                                <div class="col fs-11"><small class="all-caps bold">Payment Summary</small></div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row p-t-10 m-b-5 m-l-0 m-r-0">
+                                                <div class="col no-padding"><small class="all-caps">Shipping Fee</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">RM 212.25</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row m-b-5 m-l-0 m-r-0">
+                                                <div class="col no-padding"><small class="all-caps">Service Fee</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">RM 41.25</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row p-b-5 b-b b-grey m-l-0 m-r-0">
+                                                <div class="col no-padding"><small class="all-caps">Discount</small></div>
+                                                <div class="col-auto no-padding text-right"><small class="bold">RM 0.00</small></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="row align-items-end p-t-5 p-b-10 no-margin">
+                                                <div class="col-auto no-padding ">
+                                                    <div class="row">
+                                                        <div class="col"><small class="all-caps">Paid</small></div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col"><small class="bold text-primary no-margin">RM 00.00</small></div>
+                                                    </div>
+                                                </div>
+                                                <div class="col no-padding text-right">
+                                                    <div class="row">
+                                                        <div class="col"><small class="all-caps">Outstanding</small></div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <h6 class="bold text-success no-margin">RM 353.50</h6>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['data'],
+        data() {
+            return {
+                orderId: this.data,
+                order: null
+            }
+        },
+        created(){
+            this.fetchOrder();
+        },
+        methods: {
+            fetchOrder(){
+
+                fetch(route('api.order.profile', {'id': this.orderId})).then(response => response.json())
+                    .then(response => {
+                        this.order = response.data;
+                    })
+                    .catch(error => console.log(error))
+            },
+            iconColor(complete, isCurrentStep){
+                if(complete === '1'){
+                    return '#47b5ab';
+                }
+
+                if(isCurrentStep){
+                    return '#4d6286';
+                }
+
+                return '#bababa';
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/order/elements/OrderHistoryComponenet.vue b/resources/assets/vue/components/order/elements/OrderQuickViewComponenet.vue
similarity index 76%
rename from resources/assets/vue/components/order/elements/OrderHistoryComponenet.vue
rename to resources/assets/vue/components/order/elements/OrderQuickViewComponenet.vue
index b7615d6..47485f2 100644
--- a/resources/assets/vue/components/order/elements/OrderHistoryComponenet.vue
+++ b/resources/assets/vue/components/order/elements/OrderQuickViewComponenet.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="row m-t-5">
+    <div class="row">
         <div class="col">
             <div class="row">
                 <div class="col">
@@ -13,14 +13,7 @@
                             <small class="muted all-caps">Delivery Address</small>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="bold m-b-5">{{this.order.address.reference}}</div>
-                            <div class="hint-text semi-bold">{{this.order.address.contact}}</div>
-                            <div class="m-t-15 m-b-15 hint-text">{{this.order.address.street_one || ''}} {{ this.order.address.street_two || '' }} {{this.order.address.city || '' }} {{this.order.address.post_code || ''}} {{this.order.address.state || ''}} {{this.order.address.country || ''}}</div>
-                            <small class="block text-complete text-underline pointer">Change Address</small>
-                        </div>
-                    </div>
+                    <order-delivery-address-componenet :data="this.data"></order-delivery-address-componenet>
                 </div>
                 <div class="col-9 p-l-0">
                     <div class="row m-l-0 m-r-0 m-b-15">
@@ -54,7 +47,9 @@
 </template>
 
 <script>
+    import OrderDeliveryAddressComponenet from "./OrderDeliveryAddressComponenet";
     export default {
+        components: {OrderDeliveryAddressComponenet},
         props: {
             'data': {
                 required: true
diff --git a/resources/assets/vue/components/order/elements/OrdersProfileComponent.vue b/resources/assets/vue/components/order/elements/OrdersProfileComponent.vue
deleted file mode 100644
index 64b468c..0000000
--- a/resources/assets/vue/components/order/elements/OrdersProfileComponent.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <div class="row m-t-50">
-        <div class="col">
-            <div class="row">
-                <div class="col-6 bg-white">
-                    <order-header-component :data="this.order"></order-header-component>
-                </div>
-            </div>
-            <div class="row m-t-30">
-                <div class="col-9 bg-white">
-                    <order-history-component :data="this.order"></order-history-component>
-                </div>
-                <div class="col">
-                    <order-action-component :data="this.order"></order-action-component>
-                </div>
-            </div>
-
-        </div>
-    </div>
-</template>
-<script>
-    export default {
-        props: ['data'],
-        data() {
-            return {
-                orderId: this.data,
-                order: null
-            }
-        },
-        created(){
-            this.fetchOrder();
-        },
-        methods: {
-            fetchOrder(){
-                fetch(route('api.order.profile', {'id': this.orderId})).then(response => response.json())
-                    .then(response => {
-                        this.order = response.data;
-                    })
-                    .catch(error => console.log(error))
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue b/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue
index ec4cc21..8ca1bab 100644
--- a/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue
+++ b/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue
@@ -14,137 +14,232 @@
                             </div>
                         </div>
                     </div>
-                    <form method="post" >
-                        <div class="form-group form-group-default input-group">
-                            <div class="row w-100">
-                                <div class="col no-padding">
-                                    <label class="muted block">Packing List No.</label>
-                                    <input class="form-control block" v-model="packingList.reference_no">
-                                </div>
+                    <div class="form-group form-group-default input-group">
+                        <div class="row w-100">
+                            <div class="col no-padding">
+                                <label class="muted block">Packing List No.</label>
+                                <input class="form-control block" v-model="packingList.reference_no">
                             </div>
                         </div>
-                        <div class="row m-b-15" v-for="(item, index) in packingList.packages">
-                            <div class="col p-b-15 bg-master-lightest">
-                                <div class="row p-t-10 p-b-10">
-                                    <div class="col p-l-5 b-l b-grey" style=" border-left-width: 3px; ">
-                                        <span class="bold muted fs-10 all-caps">Package {{index + 1}}</span>
-                                    </div>
-                                    <div class="col-auto text-danger no-padding">
-                                        <i @click="removePackage(index)" v-if="index !== 0" class="fa fa-times"></i>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col p-l-0">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Description</label>
-                                                    <input class="form-control block" v-model="item.description">
+                    </div>
+                    <div class="row m-l-0 m-r-0 m-b-15">
+                        <div class="col no-padding">
+                            <div class="row packages" v-for="i in Math.ceil(packingList.packages.length / 3)">
+                                <div class="col-4 b-r b-grey bg-master-lightest no-padding text-center package-thumbnail"  v-for="(item, index) in packingList.packages.slice((i - 1) * 3, i * 3)">
+                                    <div class="row">
+                                        <div class="col no-padding">
+                                            <div class="row">
+                                                <div class="col no-padding text-left">
+                                                    <div class="status-border"  :class="[{'active': item.length > 0 && item.height > 0 && item.width > 0 && item.description !== '' }]"></div>
+                                                </div>
+                                                <div class="col text-right no-padding">
+                                                    <i @click="removePackage(index)" class="fa fa-times  text-white bg-danger padding-5 pointer"></i>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="col-4 no-padding">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Quantity</label>
-                                                    <input class="form-control block" v-model="item.quantity" v-on:keypress="isNumber(false)" >
-                                                </div>
-                                                <div class="col-auto no-padding">
-                                                    <div class="input-group-addon pointer inline no-padding" style=" min-width: auto; ">
-                                                        <div class="row align-items-center justify-content-center h-100">
-                                                            <div class="col no-padding h-100">
-                                                                <div @click="item.quantity++" class="row align-items-center justify-content-center h-50">
-                                                                    <div class="col p-l-10 p-r-10">
-                                                                        <i class="fa fa-angle-up text-success"></i>
-                                                                    </div>
-                                                                </div>
-                                                                <div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50">
-                                                                    <div class="col p-l-10 p-r-10">
-                                                                        <i class="fa fa-angle-down text-success"></i>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
+                                    <div class="row align-items-center justify-content-center p-t-25 p-b-25">
+                                        <div class="col-auto hint-text p-r-10">
+                                            <svg v-if="item.type === 0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
+                                                <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,192v-192h192v192z" fill="none"></path>
+                                                    <g fill="#000">
+                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
+                                                    </g>
+                                                </g>
+                                            </svg>
+                                            <svg v-if="item.type === 1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
+                                                <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,192v-192h192v192z" fill="none"></path>
+                                                    <g fill="#000">
+                                                        <g id="surface1">
+                                                            <path d="M95.07692,29.53846c-0.80769,0.11538 -1.58654,0.34615 -2.30769,0.69231l-87,43.61538c-0.72115,0.11538 -1.41346,0.34615 -2.07692,0.69231c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.14423 0,0.31731 0,0.46154c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.14423 0,0.31731 0,0.46154c0,0.14423 0,0.31731 0,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.02885,0.375 -0.02885,0.77885 0,1.15385v33.46154c-0.02885,2.85577 1.58654,5.45192 4.15385,6.69231l22.15385,11.07692c1.99038,0.98077 4.32693,0.98077 6.34615,0.0577c2.01923,-0.95193 3.49038,-2.74039 4.03846,-4.90385l29.76923,15.92308v6c0.02884,2.71154 1.52884,5.19231 3.92308,6.46154l22.15385,11.76923c2.16346,1.15385 4.75961,1.15385 6.92308,0l88.61538,-45.69231c2.39423,-1.26923 3.89423,-3.75 3.92308,-6.46154v-33.92308c0.0577,-0.54808 0.0577,-1.06731 0,-1.61538c0,-0.63461 -0.08654,-1.24039 -0.23077,-1.84615c-0.11538,-0.40384 -0.28846,-0.77885 -0.46154,-1.15385c0,-0.08654 0,-0.14423 0,-0.23077c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c0,-0.08654 0,-0.14423 0,-0.23077c-0.05769,-0.14423 -0.14423,-0.31731 -0.23077,-0.46154c-0.20192,-0.31731 -0.43269,-0.63461 -0.69231,-0.92308c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c-0.14423,-0.08654 -0.31731,-0.17307 -0.46154,-0.23077c-0.40384,-0.43269 -0.86538,-0.83654 -1.38462,-1.15385c-0.08654,0 -0.14423,0 -0.23077,0l-0.46154,-0.23077c-0.23077,-0.08654 -0.46154,-0.17307 -0.69231,-0.23077l-24.69231,-12.46154c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-23.76923,-11.76923c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-27.46154,-13.61538c-1.29808,-0.63461 -2.74039,-0.86538 -4.15385,-0.69231zM96,45.23077l12.92308,6.46154l-72,36l-12.92308,-6.46154zM125.53846,60l12.92308,6.46154l-72,36l-12.92308,-6.46154zM155.07692,74.76923l12.92308,6.46154l-72,36l-12.92308,-6.46154zM14.76923,93.23077l17.30769,8.53846c0.80769,0.66346 1.75961,1.125 2.76923,1.38462l27,13.61538c0.375,0.17308 0.75,0.34615 1.15385,0.46154l0.23077,0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077h0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077l28.38462,14.30769c0.43269,0.20192 0.92308,0.34615 1.38462,0.46154c0.23077,0.08654 0.46154,0.17308 0.69231,0.23077l1.15385,0.69231v20.53846l-14.76923,-7.84615v-6c-0.02884,-2.71153 -1.52884,-5.19231 -3.92308,-6.46154l-44.30769,-23.76923c-2.07692,-1.15385 -4.58654,-1.24039 -6.72115,-0.23077c-2.13462,1.00962 -3.69231,2.97116 -4.125,5.30769l-7.38462,-3.69231z"></path>
+                                                        </g>
+                                                    </g>
+                                                </g>
+                                            </svg>
+                                        </div>
+                                        <div class="col-auto no-padding">
+                                            <i class="fa fa-times fs-14 lh-26"></i>
+                                        </div>
+                                        <div class="col text-left p-l-10">
+                                            <div class="row">
+                                                <div class="col no-padding"><input type="text" class="fs-22 bold b-l b-t b-b b-grey bg-transparent w-100 h-100 font-montserrat p-l-10" v-model="item.quantity" v-on:keypress="isNumber(true)"></div>
+                                                <div class="col-auto bg-master-lighter no-padding h-100">
+                                                    <div @click="item.quantity++" class="row align-items-center justify-content-center h-50 pointer">
+                                                        <div class="col p-l-5 p-r-5">
+                                                            <i class="fa fa-angle-up text-success"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50 pointer">
+                                                        <div class="col p-l-5 p-r-5">
+                                                            <i class="fa fa-angle-down text-success"></i>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col p-l-5 p-r-0">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Length</label>
-                                                    <input class="form-control block" v-model="item.length" v-on:keypress="isNumber(true)">
-                                                </div>
-                                                <div class="col-auto no-padding">
-                                                    <div class="input-group-addon inline" style="min-width:auto;">
-                                                        <div class="row align-items-center justify-content-center h-100">
-                                                            <div class="col no-padding text-center">
-                                                                <small>cm</small>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col p-l-0 p-r-5">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Width</label>
-                                                    <input class="form-control block" v-model="item.width" v-on:keypress="isNumber(true)">
-                                                </div>
-                                                <div class="col-auto no-padding">
-                                                    <div class="input-group-addon inline" style="min-width:auto;">
-                                                        <div class="row align-items-center justify-content-center h-100">
-                                                            <div class="col no-padding text-center">
-                                                                <small>cm</small>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col p-l-5 p-r-5">
-                                        <div class="form-group form-group-default input-group">
-                                            <div class="row w-100">
-                                                <div class="col no-padding">
-                                                    <label class="muted block">Height</label>
-                                                    <input class="form-control block" v-model="item.height" v-on:keypress="isNumber(true)">
-                                                </div>
-                                                <div class="col-auto no-padding">
-                                                    <div class="input-group-addon inline" style="min-width:auto;">
-                                                        <div class="row align-items-center justify-content-center h-100">
-                                                            <div class="col no-padding text-center">
-                                                                <small>cm</small>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
+                                    <div class="row">
+                                        <div class="col-auto p-t-5 p-b-5 bg-master-light">
+                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                 width="15" height="15"
+                                                 viewBox="0 0 192 192"
+                                                 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,192v-192h192v192z" fill="none"></path><g fill="#000000"><path d="M6,1.5c-2.55,0 -4.5,1.95 -4.5,4.5v180c0,2.55 1.95,4.5 4.5,4.5h33c2.55,0 4.5,-1.95 4.5,-4.5v-180c0,-2.55 -1.95,-4.5 -4.5,-4.5zM75,1.5c-10.8,0 -19.5,8.7 -19.5,19.5c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-5.85 4.65,-10.5 10.5,-10.5h76.5v10.5c0,10.8 8.7,19.5 19.5,19.5h14.39942h0.60058c1.8,0 3.45117,-1.20117 4.20117,-2.70117c0.3,-0.6 0.44825,-1.19883 0.44825,-1.79883v-0.60059c-0.3,-9 -3.89825,-17.39824 -10.19825,-23.69824c-6.6,-6.6 -15.15117,-10.20117 -24.45117,-10.20117zM10.5,10.5h24v171h-24v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5zM160.5,10.95117c5.1,0.9 9.75,3.29883 13.5,7.04883c3.75,3.75 6.14883,8.4 7.04883,13.5h-10.04883c-5.85,0 -10.5,-4.65 -10.5,-10.5zM59.71289,40.54395c-0.45469,0.02109 -0.9123,0.10488 -1.3623,0.25488c-1.65,0.6 -2.85059,2.40117 -2.85059,4.20117v141c0,2.55 1.95,4.5 4.5,4.5h126c1.8,0 3.44883,-1.05117 4.04883,-2.70117c0.75,-1.65 0.45,-3.44883 -0.75,-4.79883l-126,-141c-0.9,-1.0125 -2.22188,-1.51934 -3.58594,-1.45605zM186,51c-2.55,0 -4.5,1.95 -4.5,4.5v100.5c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5v-100.5c0,-2.55 -1.95,-4.5 -4.5,-4.5zM64.5,56.85059l111.45117,124.64941h-111.45117zM89.71289,119.14453c-0.45469,0.02109 -0.9123,0.10488 -1.3623,0.25488c-1.65,0.6 -2.85059,2.40117 -2.85059,4.20117v32.39941c0,2.55 1.95,4.5 4.5,4.5h28.95117c1.8,0 3.44883,-1.05117 4.04883,-2.70117c0.75,-1.65 0.45,-3.44883 -0.75,-4.79883l-28.95117,-32.39941c-0.9,-1.0125 -2.22187,-1.51934 -3.58594,-1.45605zM94.5,135.45117l14.39941,16.04883h-14.39941z"></path></g></g></svg>
+                                            <div class="absolute padding-5 bg-danger btn-rounded" style=" right: 10px; top: 6px; ">
 
+                                            </div>
+                                        </div>
+                                        <div class="col no-padding">
+                                            <input type="text" class="fs-12 bold bg-master-lighter no-border w-100 font-montserrat p-l-15 p-r-15 p-t-5 p-b-5 thumbnail-input" placeholder="Description" v-model="item.description">
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                        <div class="row">
-                            <div class="col p-l-0">
-                                <div @click="AddPackage" class="btn btn-xs btn-complete pointer all-caps b-rad-none"><i class="fa fa-plus m-r-0"></i> Add Package</div>
+                    </div>
+                    <div class="row m-b-15" v-for="(item, index) in packingList.packages">
+                        <div class="col p-b-15 bg-master-lightest">
+                            <div class="row p-t-10 p-b-10">
+                                <div class="col p-l-5 b-l b-grey" style=" border-left-width: 3px; ">
+                                    <span class="bold muted fs-10 all-caps">Package {{index + 1}}</span>
+                                </div>
+                                <div class="col-auto text-danger no-padding">
+                                    <i @click="removePackage(index)" v-if="index !== 0" class="fa fa-times"></i>
+                                </div>
                             </div>
-                            <div class="col-auto no-padding">
-                                <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
-                                <button type="submit" class="btn b-rad-none btn-success" @click="updatePackingList" data-dismiss="modal">Confirm</button>
+                            <div class="row">
+                                <div class="col p-l-0">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Description</label>
+                                                <input class="form-control block" v-model="item.description">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-4 no-padding">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Quantity</label>
+                                                <input class="form-control block" v-model="item.quantity" v-on:keypress="isNumber(false)" >
+                                            </div>
+                                            <div class="col-auto no-padding">
+                                                <div class="input-group-addon pointer inline no-padding" style=" min-width: auto; ">
+                                                    <div class="row align-items-center justify-content-center h-100">
+                                                        <div class="col no-padding h-100">
+                                                            <div @click="item.quantity++" class="row align-items-center justify-content-center h-50">
+                                                                <div class="col p-l-10 p-r-10">
+                                                                    <i class="fa fa-angle-up text-success"></i>
+                                                                </div>
+                                                            </div>
+                                                            <div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50">
+                                                                <div class="col p-l-10 p-r-10">
+                                                                    <i class="fa fa-angle-down text-success"></i>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col p-l-5 p-r-0">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Length</label>
+                                                <input class="form-control block" v-model="item.length" v-on:keypress="isNumber(true)">
+                                            </div>
+                                            <div class="col-auto no-padding">
+                                                <div class="input-group-addon inline" style="min-width:auto;">
+                                                    <div class="row align-items-center justify-content-center h-100">
+                                                        <div class="col no-padding text-center">
+                                                            <small>cm</small>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col p-l-0 p-r-5">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Width</label>
+                                                <input class="form-control block" v-model="item.width" v-on:keypress="isNumber(true)">
+                                            </div>
+                                            <div class="col-auto no-padding">
+                                                <div class="input-group-addon inline" style="min-width:auto;">
+                                                    <div class="row align-items-center justify-content-center h-100">
+                                                        <div class="col no-padding text-center">
+                                                            <small>cm</small>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col p-l-5 p-r-5">
+                                    <div class="form-group form-group-default input-group">
+                                        <div class="row w-100">
+                                            <div class="col no-padding">
+                                                <label class="muted block">Height</label>
+                                                <input class="form-control block" v-model="item.height" v-on:keypress="isNumber(true)">
+                                            </div>
+                                            <div class="col-auto no-padding">
+                                                <div class="input-group-addon inline" style="min-width:auto;">
+                                                    <div class="row align-items-center justify-content-center h-100">
+                                                        <div class="col no-padding text-center">
+                                                            <small>cm</small>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="row m-b-20">
+                        <div class="col no-padding">
+                            <div class="row ">
+                                <div @click="AddPackage(0)"  class="col-3 hint-text m-r-15 pointer bg-master-lightest text-center no-padding add-package">
+                                    <div class="row align-items-center justify-content-center relative" style="opacity: 0.3;">
+                                        <div class="col padding-15" style=" height: 125px; "><img src="https://www.pngarts.com/files/1/Package-Box-PNG-Free-Download.png" style="width: 100%;"></div>
+                                        <div class="absolute w-100 h-100 text-center plus-thumbnail"><i class="fa fa-plus fs-50 m-auto"></i></div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col bg-master-lighter fs-11 p-t-5 p-b-5 hint-text"><small class="all-caps title">Carton</small></div>
+                                    </div>
+                                </div>
+                                <div @click="AddPackage(1)"  class="col-3 hint-text m-r-15 pointer bg-master-lightest text-center no-padding add-package">
+                                    <div class="row align-items-center justify-content-center relative" style="opacity: 0.3;">
+                                        <div class="col padding-15" style=" height: 125px; "><img src="http://iconbug.com/data/6e/256/2f229a2663bc61dfe5aedeace2ca8837.png" style="width: 100%;"></div>
+                                        <div class="absolute w-100 h-100 text-center plus-thumbnail"><i class="fa fa-plus fs-50 m-auto"></i></div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col bg-master-lighter fs-11 p-t-5 p-b-5 hint-text"><small class="all-caps title">Pallet</small></div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </form>
+                    </div>
+                    <div class="row">
+                        <div class="col text-right no-padding">
+                            <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
+                            <button type="submit" class="btn b-rad-none btn-success" @click="updatePackingList" data-dismiss="modal">Confirm</button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </modal-component>
@@ -201,7 +296,47 @@
         </modal-component>
     </div>
 </template>
+<style>
+    .plus-thumbnail {
+        display: flex;
+        opacity: 0.4;
+        background-color: #fff;
+    }
+    .add-package:hover .plus-thumbnail {
+        background-color: #ececec;
+        color: #787878;
+    }
+    .add-package:hover .title {
+        color: #bababa;
+    }
+    .thumbnail-input::-webkit-input-placeholder { /* Edge */
+        color: #bababa;
+        font-weight: normal !important;
+    }
 
+    .thumbnail-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
+        color: #bababa;
+        font-weight: normal !important;
+    }
+
+    .thumbnail-input::placeholder {
+        color: #bababa;
+        font-weight: normal !important;
+    }
+    .packages .package-thumbnail:last-child {
+        border-right : none !important;
+    }
+    .package-thumbnail .status-border {
+        border-style: solid;
+        border-width: 7px 8px 0 0;
+        border-color: transparent;
+        border-top-color: #ececec ;
+    }
+    .package-thumbnail .status-border.active {
+        border-top-color: #47b5ab;
+        opacity: 0.6;
+    }
+</style>
 <script>
     import notificationConstant from '../../../../../js/notification';
     export default {
@@ -219,13 +354,7 @@
                 packingList: {
                     reference_no: '',
                     confirmed: 0,
-                    packages: [{
-                        description: '',
-                        quantity: 1,
-                        width: 0.0,
-                        height: 0.0,
-                        length: 0.0
-                    }]
+                    packages: []
                 },
                 actionData: {
                     complete_date: ''
@@ -294,9 +423,10 @@
 
                 })
             },
-            AddPackage(){
+            AddPackage(type){
                 this.packingList.packages.push({
                     description: '',
+                    type: type,
                     quantity: 1,
                     width: 0.0,
                     height: 0.0,
diff --git a/resources/views/partials/general/menu.blade.php b/resources/views/partials/general/menu.blade.php
index b2c5e4e..c97bf47 100644
--- a/resources/views/partials/general/menu.blade.php
+++ b/resources/views/partials/general/menu.blade.php
@@ -1,5 +1,5 @@
 <div class="bg-white b-b b-grey">
-    <div class="container no-padding">
+    <div class="container">
         <div class="menu-bar header-sm-height" data-pages-init='horizontal-menu' data-hide-extra-li="2">
             <a href="#" class="btn-link toggle-sidebar hidden-lg-up pg pg-close" data-toggle="horizontal-menu">
             </a>
diff --git a/routes/api.php b/routes/api.php
index 4be1fe1..626f129 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -125,7 +125,7 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
 
         Route::post('/{orderId}/update', 'updateOrderStepController@update')->name('step.update');
 
-        Route::post('/{orderId}/packing-list', 'OrderController@updatePackingList')->name('packages.update');
+        Route::post('/{orderId}/packing-list', 'UpdatePackingListController@update')->name('packages.update');
 
         Route::post('/{orderId}/shipping-arrangement', 'OrderController@orderShippingArrangement')->name('shipping.arrangement.create');
         Route::post('/{orderId}/shipping-arrangement/reschedule', 'OrderController@rescheduleShipping')->name('shipping.arrangement.reschedule');