diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
new file mode 100644
index 00000000..0aa7c413
--- /dev/null
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -0,0 +1,46 @@
+<template>
+    <el-row>
+        <el-steps v-bind:value="value" :active="value" :alignCenter="true" process-status="wait" finish-status="success">
+            <el-step title="Booking"></el-step>
+            <el-step title="Payment"></el-step>
+            <el-step title="Order Confirmation"></el-step>
+            <el-step title="Processing Transfer"></el-step>
+            <el-step title="Transfer Complete"></el-step>
+            <el-step title="Order Complete"></el-step>
+        </el-steps>
+    </el-row>
+</template>
+
+
+<style type="text/css">
+    /* .el-row {
+        margin: 20px 0;
+    }
+
+    .el-steps {
+        padding-top: 70px;
+    }
+
+    .el-step .el-step__main {
+        transform: translateY(-70px);
+    }
+    .el-step__title.is-wait {
+        font-size: 10pt;
+    }
+    .el-step__title {
+        line-height: 1.4;
+    }
+
+    .el-step .is-success .el-step__line {
+        background-color: #67c23a;
+    } */
+</style>
+
+<script>
+export default {
+  props: ['value'],
+  data: () => ({
+    status: 1
+  })
+}
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/middleware/auth.js b/resources/assets/js/middleware/auth.js
index 1302a8b7..138da317 100644
--- a/resources/assets/js/middleware/auth.js
+++ b/resources/assets/js/middleware/auth.js
@@ -3,11 +3,9 @@ import store from '~/store'
 export default async (to, from, next) => {
   if (!store.getters['auth/check']) {
     next({ name: 'login' })
-  } 
-  else if (store.getters['auth/user'].role == "admin"){
-    next({ name : 'admin.home' })
-  }
-  else {
+  } else if (store.getters['auth/user'].role == 'admin') {
+    next({ name: 'admin.home' })
+  } else {
     next()
   }
 }
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
index 8af30930..054eb81f 100644
--- a/resources/assets/js/pages/auth/login.vue
+++ b/resources/assets/js/pages/auth/login.vue
@@ -80,32 +80,37 @@ export default {
 
   methods: {
     async login () {
-      const loading = this.$loading({
-          lock: true,
-          text: 'Logging in',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        });
 
       // Submit the form.
       const { data } = await this.form.post('/api/login')
 
+
+      // Add loading screen
+      const loading = this.$loading({
+        lock: true,
+        text: 'Logging in',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
       // Save the token.
       this.$store.dispatch('auth/saveToken', {
         token: data.token,
-        remember: this.remember
+        remember: this.remember,
       })
 
       // Fetch the user.
       await this.$store.dispatch('auth/fetchUser')
 
+
+
       // Redirect home.
-      if(store.getters['auth/user'].role === 'admin'){
-        loading.close();
+      if (store.getters['auth/user'].role === 'admin') {
         this.$router.push({ name: 'admin.home' })
+        loading.close()
       }
-      loading.close();
       this.$router.push({ name: 'home' })
+      loading.close()
     }
   }
 }
diff --git a/resources/assets/js/pages/auth/register.vue b/resources/assets/js/pages/auth/register.vue
index be69fc71..9792e4ec 100644
--- a/resources/assets/js/pages/auth/register.vue
+++ b/resources/assets/js/pages/auth/register.vue
@@ -96,10 +96,9 @@ export default {
       await this.$store.dispatch('auth/updateUser', { user: data })
 
       // Redirect home.
-      if(store.getters['auth/user'].role === 'admin'){
+      if (store.getters['auth/user'].role === 'admin') {
         this.$router.push({ name: 'admin.home' })
-      }
-      else{
+      } else {
         this.$router.push({ name: 'home' })
       }
     }
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
new file mode 100644
index 00000000..1cb07172
--- /dev/null
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -0,0 +1,166 @@
+<template>
+    <el-main>
+        <progress-track v-model="status"></progress-track>
+
+        <div align="center">
+            <h4 style="margin-top:5%;">Order Completed</h4>
+            <br>
+        </div>
+
+        <!-- upload card -->
+        <br>
+        <el-row :gutter="12" justify="center" align="center">
+            <el-col :span="8">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>Purchase Order</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+                  <el-row type="flex" :gutter="12">
+                        <el-col :span="12">
+                            <a target=" _blank" href="https://placeholder.com">
+                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+                            </a>
+                        </el-col>
+                    </el-row>
+
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>Invoice</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+                    <el-row type="flex" :gutter="12">
+                        <el-col :span="12">
+                            <a target=" _blank" href="https://placeholder.com">
+                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+                            </a>
+                        </el-col>
+                    </el-row>
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>China Bank Slip</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+                    <el-row type="flex" :gutter="12">
+                        <el-col :span="12">
+                            <a target=" _blank" href="https://placeholder.com">
+                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+                            </a>
+                        </el-col>
+                    </el-row>
+                </el-card>
+            </el-col>
+        </el-row>
+        <br>
+
+        <!-- order details -->
+        <el-row justify="center" align="center">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span>Order Details</span>
+                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                </div>
+                <el-row :gutter="12">
+                    <el-col :span="12">
+                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+                            <el-table-column prop="data1" align="right" width="200" />
+                            <el-table-column prop="data2" align="left" width="200" />
+                        </el-table>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+                            <el-table-column prop="data1" align="right" width="200" />
+                            <el-table-column prop="data2" align="left" width="200" />
+                        </el-table>
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-row>
+        <br>
+
+        <el-row justify="center" align="center">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span>Order Bankin Slip</span>
+                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                </div>
+                <el-row :gutter="12">
+                    <el-col :span="22" style="text-align:center">
+                        <img src="http://via.placeholder.com/600x400" class="image">
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-row>
+    </el-main>
+</template>
+<style>
+    .booking-details {
+        font-weight: bold;
+    }
+</style>
+<script>
+    import VueCountdown from '@dmaksimovic/vue-countdown'
+    import ProgressTrack from '~/components/ProgressTrack'
+
+    export default {
+        components: {
+            'progress-track': ProgressTrack
+        },
+        data() {
+            return {
+                status: 6,
+                bookingConfirmTable: [{
+                    data1: 'Order Number :',
+                    data2: '001'
+                }, {
+                    data1: 'Date :',
+                    data2: '25/5/2018'
+                }, {
+                    data1: 'Customer Marking :',
+                    data2: 'CIEF/150ECE'
+                }, {
+                    data1: '',
+                    data2: ''
+                }, {
+                    data1: 'Payment Method :',
+                    data2: 'Cash/Bank Transfer'
+                }, {
+                    data1: '',
+                    data2: ''
+                }],
+                bookingConfirmTable2: [{
+                    data1: 'CNY/RMB :',
+                    data2: 'CNY 120,500.00'
+                }, {
+                    data1: '+ Service Charge :',
+                    data2: 'CNY 20.00'
+                }, {
+                    data1: '/ RATE :',
+                    data2: '1.63'
+                }, {
+                    data1: '',
+                    data2: 'MYR 73,848.04'
+                }, {
+                    data1: '+ GST 6% :',
+                    data2: 'MYR 4,430.88'
+                }, {
+                    data1: '',
+                    data2: 'MYR 78,278.92'
+                }, {
+                    data1: '',
+                    data2: ''
+                }]
+            }
+        },
+        methods: {
+
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
new file mode 100644
index 00000000..58812c71
--- /dev/null
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -0,0 +1,115 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"></progress-track>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+      <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+  import VueCountdown from '@dmaksimovic/vue-countdown'
+  import ProgressTrack from '~/components/ProgressTrack'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 3,
+        bookingConfirmTable: [{
+          data1: 'Order Number :',
+          data2: '001'
+        }, {
+          data1: 'Date :',
+          data2: '25/5/2018'
+        }, {
+          data1: 'Customer Marking :',
+          data2: 'CIEF/150ECE'
+        }, {
+          data1: '',
+          data2: ''
+        }, {
+          data1: 'Payment Method :',
+          data2: 'Cash/Bank Transfer'
+        }, {
+          data1: '',
+          data2: ''
+        }],
+        bookingConfirmTable2:[{
+          data1: 'CNY/RMB :',
+          data2: 'CNY 120,500.00'
+        }, {
+          data1: '+ Service Charge :',
+          data2: 'CNY 20.00'
+        }, {
+          data1: '/ RATE :',
+          data2: '1.63'
+        }, {
+          data1: '',
+          data2: 'MYR 73,848.04'
+        }, {
+          data1: '+ GST 6% :',
+          data2: 'MYR 4,430.88'
+        }, {
+          data1: '',
+          data2: 'MYR 78,278.92'
+        }, {
+          data1: '',
+          data2: ''
+        }
+        ]
+      }
+    },
+    methods: {
+
+
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
new file mode 100644
index 00000000..e70b0242
--- /dev/null
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -0,0 +1,151 @@
+<template>
+    <el-main>
+        <progress-track v-model="status"></progress-track>
+
+        <div align="center">
+            <h4 style="margin-top:5%;">Processing Invoice</h4>
+            <br>
+        </div>
+
+        <!-- upload card -->
+        <br>
+        <el-row :gutter="12" justify="center" align="center">
+            <el-col :span="12">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>Purchase Order</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+                  <el-row type="flex" :gutter="12">
+                        <el-col :span="12">
+                            <a target=" _blank" href="https://placeholder.com">
+                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+                            </a>
+                        </el-col>
+                    </el-row>
+
+                </el-card>
+            </el-col>
+            <el-col :span="12">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>China Bank Slip</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+                    <el-row type="flex" :gutter="12">
+                        <el-col :span="12">
+                            <a  target=" _blank" href="https://placeholder.com">
+                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+                            </a>
+                        </el-col>
+                    </el-row>
+                </el-card>
+            </el-col>
+        </el-row>
+        <br>
+
+        <!-- order details -->
+        <el-row justify="center" align="center">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span>Order Details</span>
+                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                </div>
+                <el-row :gutter="12">
+                    <el-col :span="12">
+                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+                            <el-table-column prop="data1" align="right" width="200" />
+                            <el-table-column prop="data2" align="left" width="200" />
+                        </el-table>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+                            <el-table-column prop="data1" align="right" width="200" />
+                            <el-table-column prop="data2" align="left" width="200" />
+                        </el-table>
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-row>
+        <br>
+
+        <el-row justify="center" align="center">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span>Order Bankin Slip</span>
+                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                </div>
+                <el-row :gutter="12">
+                    <el-col :span="22" style="text-align:center">
+                        <img src="http://via.placeholder.com/600x400" class="image">
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-row>
+    </el-main>
+</template>
+<style>
+    .booking-details {
+        font-weight: bold;
+    }
+</style>
+<script>
+    import VueCountdown from '@dmaksimovic/vue-countdown'
+    import ProgressTrack from '~/components/ProgressTrack'
+
+    export default {
+        components: {
+            'progress-track': ProgressTrack
+        },
+        data() {
+            return {
+                status: 5,
+                bookingConfirmTable: [{
+                    data1: 'Order Number :',
+                    data2: '001'
+                }, {
+                    data1: 'Date :',
+                    data2: '25/5/2018'
+                }, {
+                    data1: 'Customer Marking :',
+                    data2: 'CIEF/150ECE'
+                }, {
+                    data1: '',
+                    data2: ''
+                }, {
+                    data1: 'Payment Method :',
+                    data2: 'Cash/Bank Transfer'
+                }, {
+                    data1: '',
+                    data2: ''
+                }],
+                bookingConfirmTable2: [{
+                    data1: 'CNY/RMB :',
+                    data2: 'CNY 120,500.00'
+                }, {
+                    data1: '+ Service Charge :',
+                    data2: 'CNY 20.00'
+                }, {
+                    data1: '/ RATE :',
+                    data2: '1.63'
+                }, {
+                    data1: '',
+                    data2: 'MYR 73,848.04'
+                }, {
+                    data1: '+ GST 6% :',
+                    data2: 'MYR 4,430.88'
+                }, {
+                    data1: '',
+                    data2: 'MYR 78,278.92'
+                }, {
+                    data1: '',
+                    data2: ''
+                }]
+            }
+        },
+        methods: {
+
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
new file mode 100644
index 00000000..c9c7b4d9
--- /dev/null
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -0,0 +1,117 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"></progress-track>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+      <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+  import VueCountdown from '@dmaksimovic/vue-countdown'
+  import ProgressTrack from '~/components/ProgressTrack'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 4,
+        bookingConfirmTable: [{
+          data1: 'Order Number :',
+          data2: '001'
+        }, {
+          data1: 'Date :',
+          data2: '25/5/2018'
+        }, {
+          data1: 'Customer Marking :',
+          data2: 'CIEF/150ECE'
+        }, {
+          data1: '',
+          data2: ''
+        }, {
+          data1: 'Payment Method :',
+          data2: 'Cash/Bank Transfer'
+        }, {
+          data1: '',
+          data2: ''
+        }],
+        bookingConfirmTable2:[{
+          data1: 'CNY/RMB :',
+          data2: 'CNY 120,500.00'
+        }, {
+          data1: '+ Service Charge :',
+          data2: 'CNY 20.00'
+        }, {
+          data1: '/ RATE :',
+          data2: '1.63'
+        }, {
+          data1: '',
+          data2: 'MYR 73,848.04'
+        }, {
+          data1: '+ GST 6% :',
+          data2: 'MYR 4,430.88'
+        }, {
+          data1: '',
+          data2: 'MYR 78,278.92'
+        }, {
+          data1: '',
+          data2: ''
+        }
+        ]
+      }
+    },
+    methods: {
+
+
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
new file mode 100644
index 00000000..fb2a2c31
--- /dev/null
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -0,0 +1,171 @@
+<template>
+    <el-main>
+        <progress-track v-model="status"></progress-track>
+
+        <div align="center">
+            <h4 style="margin-top:5%;">Transfer Completed</h4>
+            <h5> Please upload your PO </h5>
+            <br>
+        </div>
+
+        <!-- upload card -->
+        <br>
+        <el-row :gutter="12" justify="center" align="center">
+            <el-col :span="12">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>Upload PO</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+
+                    <!-- upload image -->
+                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove"
+                        :file-list="fileList" multiple>
+                        <i class="el-icon-upload"></i>
+                        <div class="el-upload__text">Drop file here or
+                            <em>click to upload</em>
+                        </div>
+                        <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+                    </el-upload>
+
+                    <br>
+
+                    <div class="bottom clearfix" style="text-align:right;">
+                        <el-button @click="uploadPo" type="primary">Submit</el-button>
+                    </div>
+                    <!-- upload image end -->
+
+                </el-card>
+            </el-col>
+            <el-col :span="12">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>China Bank Slip</span>
+                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                    </div>
+                    <el-row type="flex" :gutter="12">
+                        <el-col :span="12">
+                            <a href="https://placeholder.com">
+                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+                            </a>
+                        </el-col>
+                    </el-row>
+                </el-card>
+            </el-col>
+        </el-row>
+        <br>
+
+        <!-- order details -->
+        <el-row justify="center" align="center">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span>Order Details</span>
+                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                </div>
+                <el-row :gutter="12">
+                    <el-col :span="12">
+                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+                            <el-table-column prop="data1" align="right" width="200" />
+                            <el-table-column prop="data2" align="left" width="200" />
+                        </el-table>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+                            <el-table-column prop="data1" align="right" width="200" />
+                            <el-table-column prop="data2" align="left" width="200" />
+                        </el-table>
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-row>
+        <br>
+
+        <el-row justify="center" align="center">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                    <span>Order Bankin Slip</span>
+                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+                </div>
+                <el-row :gutter="12">
+                    <el-col :span="22" style="text-align:center">
+                        <img src="http://via.placeholder.com/600x400" class="image">
+                    </el-col>
+                </el-row>
+            </el-card>
+        </el-row>
+    </el-main>
+</template>
+<style>
+    .booking-details {
+        font-weight: bold;
+    }
+</style>
+<script>
+    import VueCountdown from '@dmaksimovic/vue-countdown'
+    import ProgressTrack from '~/components/ProgressTrack'
+
+    export default {
+        components: {
+            'progress-track': ProgressTrack
+        },
+        data() {
+            return {
+                status: 5,
+                bookingConfirmTable: [{
+                    data1: 'Order Number :',
+                    data2: '001'
+                }, {
+                    data1: 'Date :',
+                    data2: '25/5/2018'
+                }, {
+                    data1: 'Customer Marking :',
+                    data2: 'CIEF/150ECE'
+                }, {
+                    data1: '',
+                    data2: ''
+                }, {
+                    data1: 'Payment Method :',
+                    data2: 'Cash/Bank Transfer'
+                }, {
+                    data1: '',
+                    data2: ''
+                }],
+                bookingConfirmTable2: [{
+                    data1: 'CNY/RMB :',
+                    data2: 'CNY 120,500.00'
+                }, {
+                    data1: '+ Service Charge :',
+                    data2: 'CNY 20.00'
+                }, {
+                    data1: '/ RATE :',
+                    data2: '1.63'
+                }, {
+                    data1: '',
+                    data2: 'MYR 73,848.04'
+                }, {
+                    data1: '+ GST 6% :',
+                    data2: 'MYR 4,430.88'
+                }, {
+                    data1: '',
+                    data2: 'MYR 78,278.92'
+                }, {
+                    data1: '',
+                    data2: ''
+                }]
+            }
+        },
+        methods: {
+            uploadPo(){
+                this.$message({
+                showClose: true,
+                message: 'Your PO has been uploaded. We are processing the Invoice.',
+                type: 'success',
+                duration: 5000,
+                });
+                this.$router.push({
+                name: 'home'
+                })
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
new file mode 100644
index 00000000..7b8f829b
--- /dev/null
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -0,0 +1,123 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"></progress-track>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Waiting For Payment</h4>
+    </div>
+  
+    <el-row justify="center" align="center">
+      <el-table :data="bookingDetails" style="width: 50%; margin: 0 auto; margin-top: 2%; margin-bottom:2%" :show-header="false" align="center">
+        <el-table-column prop="label" align="right" />
+        <el-table-column class-name="booking-details" prop="data" align="left"/>
+      </el-table>
+    </el-row>
+
+    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
+
+
+    <div align="center">
+      Time Left :
+      <vue-countdown ref="countdown" :seconds="3600" :auto-start="false" label="Time Left :" @time-expire="handleTimeExpire" />
+
+      <!-- <button v-on:click="startTimer">Start timer</button> -->
+    </div>
+    <br>
+
+
+
+    <!-- upload image -->
+    <el-upload :on-preview="handlePictureCardPreview" :on-remove="handleRemove" list-type="picture-card" align="center">
+      <i class="el-icon-plus" />
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img :src="dialogImageUrl" width="100%" alt="">
+    </el-dialog>
+    <br>
+    <!-- upload image end -->
+
+    <!-- <el-form label-width="300px">
+        <el-form-item label="Amount (RM) :"> -->
+    <div align="center">
+      Bankin Amount (RM) :
+      <el-input placeholder="Enter Amount" style="width: 20%" />
+      <br>
+      <br>
+    </div>
+    <!-- </el-form-item>
+    </el-form> -->
+
+    <div align="center">
+      <el-button type="submit" @click="submitUserSlip">Submit</el-button>
+      <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
+        Upload Later
+      </router-link>
+    </div>
+
+  </el-main>
+</template>
+<style>
+.booking-details{
+  font-weight: bold;
+}
+</style>
+<script>
+  import VueCountdown from '@dmaksimovic/vue-countdown'
+  import ProgressTrack from '~/components/ProgressTrack'
+
+  export default {
+    name: 'MyComponent',
+    components: {
+      'vue-countdown': VueCountdown,
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 2,
+        start: false,
+        dialogImageUrl: '',
+        dialogVisible: false,
+        bookingDetails: [
+        {
+          label: 'Exchange',
+          data: 'RMB 10,000',
+        },
+        {
+          label: 'Payment',
+          data: 'MYR 5,000',
+        },
+        ]
+      }
+    },
+    mounted() {
+      this.$refs.countdown.start()
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList)
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url
+        this.dialogVisible = true
+      },
+      submitUserSlip() {
+        this.$message({
+          showClose: true,
+          message: 'Your bankinslip has been submitted, please wait admin to approve.',
+          type: 'success',
+          duration: 5000,
+        });
+        this.$router.push({
+          name: 'home'
+        })
+      },
+      handleTimeExpire() {
+        alert('Time is up!')
+      },
+      startTimer() {
+        this.start = true
+      },
+
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 69b59a57..9b21ef47 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -2,285 +2,520 @@
 
   <el-main>
 
-<!-- Input-Amount -->
+    <!-- Input-Amount -->
     <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col :span="8"><div class="grid-content bg-purple" align="left"><el-input placeholder="Amount" v-model="Booking.amount"></el-input></div></el-col>
-        <el-col :span="10"><div class="grid-content bg-purple" align="center"> <el-select v-model="value" placeholder="MYR">
-              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"></el-option>
-              </el-select></div></el-col>      
+      <el-col :span="20">
+        <div class="grid-content bg-purple" align="center">
+          I need :
+          <el-select v-model="value" placeholder="RMB">
+            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" />
+          </el-select>
+        </div>
+      </el-col>
     </el-row>
-<!-- Input-Amount-end -->
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
+        <div class="grid-content bg-purple" align="left">
+          <el-input v-model="booking.amount" placeholder="Amount" />
+        </div>
+      </el-col>
+    </el-row>
+    <!-- Input-Amount-end -->
     <hr>
-<!-- Rate-Display -->
-<br>
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple" align="right"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="left"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">Cheque</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">BA</div></el-col>
-</el-row>
+    <!-- Rate-Display -->
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <div class="grid-content bg-purple" align="right" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="left" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">Cheque</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">BA</div>
+      </el-col>
+    </el-row>
 
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle></i></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="left">X1 :</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
-</el-row>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="left">
+          <div class="grid-content bg-purple" align="right">
+            <i type="button" class="el-icon-question" circle/>
+          </div>
+        </el-tooltip>
+      </el-col>
+      <!-- <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col> -->
+      <el-col>
+        <div class="grid-content bg-purple" align="left">X1 :</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.56</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.64</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.62</div>
+      </el-col>
+    </el-row>
 
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_cash')">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_cheque')">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_ba')">Book</el-button></div></el-col>
-</el-row>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button>
+        </div>
+      </el-col>
+    </el-row>
 
-<br>
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle></i></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="left">X2 :</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
-</el-row>
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="left">
+          <div class="grid-content bg-purple" align="right">
+            <i type="button" class="el-icon-question" circle/>
+          </div>
+        </el-tooltip>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="left">X2 :</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.56</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.64</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">1.62</div>
+      </el-col>
+    </el-row>
 
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x2_cash')">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x2_cheque')">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button></div></el-col>
-</el-row>
-<!-- Rate-Display-end -->
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- Rate-Display-end -->
 
-<!-- Form_popup -->
-<el-dialog title="Booking" :visible.sync="dialogFormVisible" center fullscreen:true>
-  <el-form><div align="center">
-    <el-form-item>
-      <el-input type="text" placeholder="China Beneficiary Account" style="width: 80%" v-model="Booking.account_name"></el-input>
-    </el-form-item>
-    <el-form-item>
-      <el-input type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" v-model="Booking.bank_name"></el-input>
-    </el-form-item>
-    <el-form-item>
-      <el-input type="text" placeholder="Branch / 分行/支行" style="width: 80%" v-model="Booking.bank_branch"></el-input>
-    </el-form-item>
-    <el-form-item>
-      <el-input type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%" v-model="Booking.account_num"></el-input>
-    </el-form-item></div>
-  </el-form>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">Cancel</el-button>
-    <el-button type="submit" @click="createBooking">Book Now</el-button>
-  </span>
-</el-dialog>
-<!-- Form_popup-end -->
+    <!-- Form_popup -->
+    <el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
+      <el-form>
+        <div align="center">
+          <el-form-item>
+            <el-input v-model="booking.account_name" type="text" placeholder="China Beneficiary Account" style="width: 80%" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="booking.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="booking.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="booking.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">Cancel</el-button>
+        <el-button type="submit" @click="getCalculationValue">Book Now</el-button>
+        <!--<el-button type="submit" @click="createBooking">Book Now</el-button>-->
+      </span>
+    </el-dialog>
+    <!-- Form_popup-end -->
 
-<!-- Booking_confirmation_popup -->
-<el-dialog title="Booking Confirmation" :visible.sync="dialogFormVisible1" center fullscreen:true>
+    <!-- Booking_confirmation_popup -->
+    <el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" :fullscreen="true" center>
 
-<!-- Table_booking_confirmation -->
-<el-table :data="tableData1" align="center">
-        <el-table-column prop="data1" align="right" width="200"></el-table-column>
-        <el-table-column prop="data2" align="left" width="200"></el-table-column>
-</el-table>
-<!-- Table_booking_confirmation-end -->  
- 
-  <span slot="footer" class="dialog-footer">
-    <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
-    <el-button type="primary" @click="dialogFormVisible1 = false">Confirm</el-button>
-  </span>
-</el-dialog>
-<!-- Booking_confirmation_popup -->
-
-  <br><br>
-  <hr>
-
-<!-- Booking Table -->
-  <el-row :gutter="20" >
-    <div>
-      <el-table>
-        <el-table-column  label="Order No" sortable width="106">
-        </el-table-column>
-        <el-table-column  label="Date" sortable width="92">
-        </el-table-column>
-        <!-- <el-table-column  label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
-        </el-table-column> -->
-                <el-table-column label="Rate" sortable width="74">
-        </el-table-column>
-                <el-table-column label="Amount" sortable justify="center" width="98"> 
-        </el-table-column>
-                        <el-table-column label="Transfer Amount (RMB / USD)" :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" width="133">
-        </el-table-column>
-                       <el-table-column label="ETA" sortable width="92">
-        </el-table-column>
-                       <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
-        </el-table-column> -->
-                         <el-table-column label="Status" :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler">
-        </el-table-column>
-                         <el-table-column label="Balance Amount (RMB/USD)" sortable width="100">
-        </el-table-column>
-                         <el-table-column label="Time Left" sortable>
-        </el-table-column>
-        <el-table-column label="Tag" width="82" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]"
-          :filter-method="filterTag" filter-placement="bottom-end">
-          <template slot-scope="scope">
-            <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
-          </template>
-        </el-table-column>
+      <!-- Table_booking_confirmation -->
+      <el-table :data="bookingConfirmTable" align="center">
+        <el-table-column prop="data1" align="right" width="200" />
+        <el-table-column prop="data2" align="left" width="200" />
       </el-table>
+      <!-- Table_booking_confirmation-end -->
+
+      <span slot="footer" class="dialog-footer">
+        <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
+        <el-button type="primary" @click="createBooking">Confirm</el-button>
+      </span>
+    </el-dialog>
+    <!-- Booking_confirmation_popup -->
+
+    <br>
+    <br>
+    <hr>
+
+    <!-- Booking Table -->
+    <el-row :gutter="20">
+      <div>
+        <el-table :data="bookingTable">
+          <el-table-column label="No." width="106">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+            <el-button type="text" slot-scope="scope" @click="(event) => { BookingStatus(event, scope.row.booking_no) }"> {{scope.row.booking_no}}</el-button>
+          </el-table-column>
+          <el-table-column label="Date" prop="date" width="120" sortable/>
+          <!-- <el-table-column  label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
+        </el-table-column> -->
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
+            prop="transfer_amount" width="150" />
+          <!-- <el-table-column label="ETA" sortable width="100"/> -->
+          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+        </el-table-column> -->
+          <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
+          <el-table-column label="Status" width="106">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.status }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <el-table-column prop="timeout" label="Bankin Timeout" />
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+            label="" width="180" filter-placement="bottom-end">
+            <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
     </el-row>
-<!-- Booking Table-end -->
+    <!-- Booking Table-end -->
 
   </el-main>
 </template>
-
-
-
+<style>
+  .el-tag {
+    cursor: pointer;
+  }
+</style>
 <script>
-import Form from 'vform'
-import LoginWithGithub from '~/components/LoginWithGithub'
-import store from '~/store'
-import axios from 'axios'
+  import Form from 'vform'
+  import LoginWithGithub from '~/components/LoginWithGithub'
+  import store from '~/store'
+  import axios from 'axios'
 
   export default {
     middleware: ['auth'],
 
-    data () {
+    data() {
       return {
-        Booking: {amount:'', account_name:'', bank_name:'', bank_branch:'', account_num:''},
+        status: '',
+        booking: {
+          amount: '',
+          account_name: '',
+          bank_name: '',
+          bank_branch: '',
+          account_num: ''
+        },
         term: '',
         options1: [{
           value: 'RMB',
-          label: 'RMB to MYR'
+          label: 'RMB'
         }],
         options2: [{
           value2: 'MYR',
-          label2: 'MYR to RMB'
+          label2: 'MYR'
         }],
-        value: '',
-        value2: '',
-        input: '',
+        value: 'RMB',
         dialogFormVisible: false,
         dialogFormVisible1: false,
         formLabelWidth: '0px',
-        tableData1: [{
+        bookingTable: [{
+            date: '12/1/2018',
+            booking_no: '001',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(1/6)',
+            status_desc: 'Waiting for payment',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '002',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(2/6)',
+            status_desc: 'Waiting verification',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '003',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(3/6)',
+            status_desc: 'Processing transfer',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '004',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(4/6)',
+            status_desc: 'Transfer Complete, please upload your PO',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '005',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(5/6)',
+            status_desc: 'Processing invoice',
+            timeout: '56:00:00'
+          },
+          {
+            date: '12/1/2018',
+            booking_no: '006',
+            rate: '1.23',
+            amount: 'RM 1000',
+            transfer_amount: 'RMB 10000',
+            status: '(6/6)',
+            status_desc: 'Order Completed',
+            timeout: '56:00:00'
+          }
+        ],
+        bookingConfirmTable: [{
           data1: 'Order Number :',
           data2: '001'
-        },{
+        }, {
           data1: 'Date :',
           data2: '25/5/2018'
-        },{
+        }, {
           data1: 'Customer Marking :',
           data2: 'CIEF/150ECE'
-        },{
+        }, {
           data1: '',
           data2: ''
-        },{
+        }, {
           data1: 'Payment Method :',
           data2: 'Cash/Bank Transfer'
-        },{
+        }, {
           data1: '',
           data2: ''
-        },{
+        }, {
           data1: 'CNY/RMB :',
           data2: 'CNY 120,500.00'
-        },{
+        }, {
           data1: '+ Service Charge :',
           data2: 'CNY 20.00'
-        },{
+        }, {
           data1: '/ RATE :',
           data2: '1.63'
-        },{
+        }, {
           data1: '',
           data2: 'MYR 73,848.04'
-        },{
+        }, {
           data1: '+ GST 6% :',
           data2: 'MYR 4,430.88'
-        },{
+        }, {
           data1: '',
           data2: 'MYR 78,278.92'
-        },{
+        }, {
           data1: '',
           data2: ''
-        },{
+        }, {
           data1: 'China Beneficiary Acc :',
           data2: ''
-        },{
+        }, {
           data1: '',
           data2: 'PENDING'
-        },{
+        }, {
           data1: '',
           data2: ''
-        },{
+        }, {
           data1: 'Bank In Amount :',
           data2: 'MYR 78,278.92'
-        },{
+        }, {
           data1: '',
           data2: ''
-        }],
-      };
+        }]
+      }
     },
     methods: {
+      // TODO fetch booking data on load 
+
       formatter(row, column) {
-        return row.address;
+        return row.address
       },
       filterTag(value, row) {
-        return row.tag === value;
+        return row.tag === value
       },
       filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
+        const property = column['property']
+        return row[property] === value
       },
-      acceptTerm: function(newterm){
+      acceptTerm: function (newterm) {
+        if (this.booking.amount == '') {
+          this.$message({
+            message: 'Please input amount',
+            type: 'warning'
+          });
+          return;
+        }
+        this.dialogFormVisible = true
         this.term = newterm
       },
-      createBooking : function(){
+      getCalculationValue() {
+        this.dialogFormVisible = false
         this.dialogFormVisible1 = true
-  
-        let newBooking = {
-          amount: this.Booking.amount,
-          account_name: this.Booking.account_name,
-          bank_name: this.Booking.bank_name,
-          bank_branch: this.Booking.bank_branch,
-          account_num: this.Booking.account_num,
-          term: this.term
+      },
+      createBooking: function () {
+        this.$router.push({
+          name: 'booking.user.upload'
+        })
+        // this.dialogFormVisible1 = true
+
+        // let newBooking = {
+        //   amount: this.booking.amount,
+        //   account_name: this.booking.account_name,
+        //   bank_name: this.booking.bank_name,
+        //   bank_branch: this.booking.bank_branch,
+        //   account_num: this.booking.account_num,
+        //   term: this.term
+        // }
+        // console.log(newBooking)
+        // axios.post('api/booking', newBooking)
+        //   .then((response) => {
+        //     console.log(response)
+
+        //     // this code to insert the input data into the database (success)
+        //     // this.Booking.amount = amount;
+        //     // this.Booking.account_name = account_name;
+        //     // this.Booking.bank_name = bank_name;
+        //     // this.Booking.branch = bank_branch;
+        //     // this.Booking.account_num = account_num;
+        //     // this.term = term;
+        //   })
+        //   .catch((error) => {
+        //     console.log(error)
+        //   })
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
+      BookingStatus(index, row) {
+
+        // TODO : Get booking status from server 
+        this.status = 6
+        
+        switch (this.status) {
+          case 1:
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+      
+          case 2:
+            this.$router.push({
+              name: 'booking.user.upload'
+            })
+            break;
+          case 3:
+            this.$router.push({
+              name: 'booking.confirmation'
+            })
+            break;
+          case 4:
+            this.$router.push({
+              name: 'booking.transfer'
+            })
+            break;
+
+          case 5:
+            this.$router.push({
+              name: 'booking.user.uploadpo'
+            })
+            break;
+
+          case 6:
+            this.$router.push({
+              name: 'booking.complete'
+            })
+            break;
+          default:
+            break
         }
-        console.log(newBooking);
-        axios.post('api/booking', newBooking)
+
+
+        // axios.post('api/booking/'+ id + '/status', newBooking)
+        //   .then((response) => {
+        //     console.log(response)
+
+        //     // this code to insert the input data into the database (success)
+        //     // this.Booking.amount = amount;
+        //     // this.Booking.account_name = account_name;
+        //     // this.Booking.bank_name = bank_name;
+        //     // this.Booking.branch = bank_branch;
+        //     // this.Booking.account_num = account_num;
+        //     // this.term = term;
+        //   })
+        //   .catch((error) => {
+        //     console.log(error)
+        // })
+      },
+      BookingList() {
+        axios.get('api/booking')
           .then((response) => {
-            console.log(response);
-            
-            //this code to insert the input data into the database (success)
-            // this.Booking.amount = amount;
-            // this.Booking.account_name = account_name;
-            // this.Booking.bank_name = bank_name;
-            // this.Booking.branch = bank_branch;
-            // this.Booking.account_num = account_num;
-            // this.term = term;
-            
+            console.log(response)
+            this.list = response.data
           })
-          .catch((error) => {
-            console.log(error);
-          });
-        },
-        BookingList(){
-          axios.get('api/booking')
-          .then((response) => {
-            console.log(response);
-            this.list = response.data;
-          })
-        }
-  },    
-}
+      }
+    }
+
+  }
 </script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/upload.vue b/resources/assets/js/pages/upload.vue
deleted file mode 100644
index 9b391033..00000000
--- a/resources/assets/js/pages/upload.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <el-main>
-        <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
-        <div align="center">
-            <h3>Your order has been book</h3>
-            <h3>Please upload the bank slip</h3>
-        </div>
-
-    <div align="center">
-        Time Left :
-        <vue-countdown label="Time Left :" v-on:time-expire="handleTimeExpire" :seconds="3600" v-bind:auto-start="false" ref="countdown"></vue-countdown>
-
-        <!-- <button v-on:click="startTimer">Start timer</button> -->
-    </div><br>
-
-
-<!-- upload image -->
-        <el-upload
-            list-type="picture-card"
-            :on-preview="handlePictureCardPreview"
-            :on-remove="handleRemove" align="center">
-            <i class="el-icon-plus"></i>
-        </el-upload>
-    <el-dialog :visible.sync="dialogVisible">
-        <img width="100%" :src="dialogImageUrl" alt="">
-    </el-dialog><br>
-<!-- upload image end -->
-
-    <!-- <el-form label-width="300px">
-        <el-form-item label="Amount (RM) :"> -->
-    <div align="center">
-        Amount (RM) : <el-input placeholder="Enter Amount" style="width: 20%"></el-input><br><br>
-    </div>
-        <!-- </el-form-item>
-    </el-form> -->
-
-    <div align="center">
-        <el-button type="submit">Submit</el-button>
-        <el-button type="text">Upload Later</el-button>
-    </div>
-
-    </el-main>
-</template>
-
-<script>
-import VueCountdown from '@dmaksimovic/vue-countdown';
-
-  export default {
-      name: 'my-component',
-    data() {
-      return {
-        start: false,
-        dialogImageUrl: '',
-        dialogVisible: false
-      };
-    },
-    mounted() {
-        this.$refs.countdown.start();
-    },
-    components: {
-        'vue-countdown': VueCountdown
-    },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      handleTimeExpire () {
-            alert('Time is up!');
-        },
-        startTimer () {
-            this.start = true;
-        }
-    }
-  }
-</script>  
-        
-        
-        
-        
-    
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index b7e4448c..9d72ad75 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -6,23 +6,29 @@ const PasswordReset = () => import('~/pages/auth/password/reset').then(m => m.de
 const NotFound = () => import('~/pages/errors/404').then(m => m.default || m)
 
 const Home = () => import('~/pages/home').then(m => m.default || m)
-const Upload = () => import('~/pages/upload').then(m => m.default || m)
 const Settings = () => import('~/pages/settings/index').then(m => m.default || m)
 const SettingsProfile = () => import('~/pages/settings/profile').then(m => m.default || m)
 const SettingsPassword = () => import('~/pages/settings/password').then(m => m.default || m)
 
+// Booking
+const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
+const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.default || m)
+const Transfer = () => import('~/pages/booking/transfer').then(m => m.default || m)
+const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default || m)
+const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
+const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
+
+
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
 
 export default [
   { path: '/', name: 'welcome', component: Welcome },
-
   { path: '/login', name: 'login', component: Login },
   { path: '/register', name: 'register', component: Register },
   { path: '/password/reset', name: 'password.request', component: PasswordEmail },
   { path: '/password/reset/:token', name: 'password.reset', component: PasswordReset },
 
   { path: '/home', name: 'home', component: Home },
-  { path: '/upload', name: 'upload', component: Upload },
   { path: '/settings',
     component: Settings,
     children: [
@@ -30,8 +36,16 @@ export default [
       { path: 'profile', name: 'settings.profile', component: SettingsProfile },
       { path: 'password', name: 'settings.password', component: SettingsPassword }
     ] },
+  
+  // Booking
+  { path: '/booking/upload-user-bankslip', name: 'booking.user.upload', component: Upload },
+  { path: '/booking/confirmation', name: 'booking.confirmation', component: Confirmation },
+  { path: '/booking/transfer', name: 'booking.transfer', component: Transfer },
+  { path: '/booking/upload-po', name: 'booking.user.uploadpo', component: UploadPo },
+  { path: '/booking/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
+  { path: '/booking/complete', name: 'booking.complete', component: Completed },
+
 
   { path: '/admin', name: 'admin.home', component: AdminHome },
-
   { path: '*', component: NotFound }
 ]