diff --git a/app/Booking.php b/app/Booking.php
index beae4a40..c63969cc 100644
--- a/app/Booking.php
+++ b/app/Booking.php
@@ -32,8 +32,8 @@ class Booking extends Model
         return $this->belongsTo('app\User');
     }
 
-    public function bookingSupplier(){
-        return $this->belongsTo('app\BookingSupplier ');
+    public function supplierBooking(){
+        return $this->hasOne(SupplierBooking::class);
     }
 
     public function chinaBankSlip(){
diff --git a/app/Http/Controllers/BookingSupplierController.php b/app/Http/Controllers/BookingSupplierController.php
index 4201a2da..12fd33ab 100644
--- a/app/Http/Controllers/BookingSupplierController.php
+++ b/app/Http/Controllers/BookingSupplierController.php
@@ -29,13 +29,15 @@ class BookingSupplierController extends Controller
 
     public function show($id)
     {
-        $bookingsupplier = SupplierBooking::has('supplier-booking')->findOrFail($id);
+        $booking = Booking::where('id', $id)->first();
 
-        $response = [
-            'supplier-booking' => $bookingsupplier
-        ];
+        if (!$booking){
+            return response()->json(['message' => 'Booking not found'], 404);
+        }
 
-        return response()->json($response, 200);
+        $supplier_booking = $booking->supplierBooking()->first();
+
+        return response()->json($supplier_booking ,200);
     }
 
     // Only for single booking 
@@ -62,7 +64,7 @@ class BookingSupplierController extends Controller
         $booking = Booking::find($booking_id);
 
         // update existing booking supplier if exist 
-        $bookingsupplier = SupplierBooking::where('book_id', $booking_id)->first();
+        $bookingsupplier = SupplierBooking::where('booking_id', $booking_id)->first();
 
         if (!$bookingsupplier){
             $bookingsupplier = new SupplierBooking();
@@ -76,7 +78,7 @@ class BookingSupplierController extends Controller
         $bookingsupplier->rebate = $rebate;       
         $bookingsupplier->amountInRMB = $amountInRMB;
         $bookingsupplier->rmbBankAmount = $rmbBankAmount;
-        $bookingsupplier->book_id = $booking->id;
+        $bookingsupplier->booking_id = $booking->id;
         $bookingsupplier->save();
 
         // update booking status 
diff --git a/app/SupplierBooking.php b/app/SupplierBooking.php
index 9f660105..1fb5c4c5 100644
--- a/app/SupplierBooking.php
+++ b/app/SupplierBooking.php
@@ -16,7 +16,7 @@ class SupplierBooking extends Model
     }
 
     public function booking(){
-        return $this->hasOne('App\Booking');
+        return $this->belongTo('App\Booking');
     }
 
     public function supplierBookingTtem()
diff --git a/database/migrations/2018_07_02_104306_rename_booking_foreignkey_from_supplierbooking_table.php b/database/migrations/2018_07_02_104306_rename_booking_foreignkey_from_supplierbooking_table.php
new file mode 100644
index 00000000..f1a1dbd6
--- /dev/null
+++ b/database/migrations/2018_07_02_104306_rename_booking_foreignkey_from_supplierbooking_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameBookingForeignkeyFromSupplierbookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function($table)
+        {
+            $table->dropForeign(['book_id']);
+            $table->dropColumn('book_id');
+            $table->integer('booking_id')->unsigned();
+            $table->foreign('booking_id')->references('id')->on('bookings');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index db8d2df3..4c125232 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -200,7 +200,9 @@
         </div>
         <el-row :gutter="12" style="text-align:center">
           <el-col :span="20" style="text-align:center">
-            <canvas id="myCanvas" v-insert-message="exampleContent"></canvas>
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <br>
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
           </el-col>
         </el-row>
       </el-card>
@@ -236,6 +238,7 @@
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
   import axios from 'axios'
+  import Canvas2Image from 'canvas2image'
 
   export default {
     components: {
@@ -251,6 +254,8 @@
           bia: null,
           user_bankslip_path: null,
         },
+        supplier_booking:{
+        },
         supplier: null,
         supplier_options: null,
         exampleContent: "This is TEXT"
@@ -278,10 +283,32 @@
           })
         })
 
+      axios
+        .get('/api/supplier-booking/' + this.$route.params.id)
+        .then((response) => {
+          loading.close()
+          this.supplier_booking = response.data
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
 
 
     },
     methods: {
+      downloadReport(){
+        let canvas = document.getElementById('myCanvas')
+     var dataString = canvas.toDataURL("image/png");
+     console.log(dataString)
+      var link = document.createElement("a");
+      link.download = 'image';
+      link.href = dataString;
+      link.click();
+      },
       completeReport() {
         // TODO : send request to change status
         this.loading_btn = true
@@ -356,10 +383,10 @@
         ctx.textAlign = "right";
         //// Row 1
         ctx.fillText("Payment Voucher :", column1X, rowHeight[1] - 5);
-        ctx.fillText("0323", column3X, rowHeight[1] - 5);
+        ctx.fillText(binding.value.id, column3X, rowHeight[1] - 5);
         //// Row 2
         ctx.fillText("Date :", column1X, rowHeight[2] - 5);
-        ctx.fillText("4 September 2017", column3X, rowHeight[2] - 5);
+        ctx.fillText(binding.value.created_at, column3X, rowHeight[2] - 5);
         //// Row 3
         ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
         ctx.font = "bold 14px Arial";
@@ -369,7 +396,7 @@
         ctx.font = "13px Arial";
         //// Row 4
         ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
-        ctx.fillText("010707", column3X, rowHeight[4] - 5);
+        ctx.fillText(binding.value.id, column3X, rowHeight[4] - 5);
         //// Row 4
         ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
         ctx.fillText("Full Payment", column3X, rowHeight[5] - 5);