diff --git a/test/vuex/acc-one-mutasi-handover/components/mutasiListing.vue b/test/vuex/acc-one-mutasi-handover/components/mutasiListing.vue
index 300a930..2e763f9 100644
--- a/test/vuex/acc-one-mutasi-handover/components/mutasiListing.vue
+++ b/test/vuex/acc-one-mutasi-handover/components/mutasiListing.vue
@@ -217,7 +217,8 @@
             </td>
             
             <td
-              class="text-xs-center"
+              class="text-xs-center pa-2"
+              style="white-space: nowrap;"
               v-bind:class="{
                 'amber lighten-4': isSelected(props.item),
               }"
@@ -235,6 +236,18 @@
                     </template>
                     <span>Lihat Detail</span>
                 </v-tooltip>
+                <v-tooltip bottom v-if="props.item.MutasiRequestStatus != 'Draft'">
+                    <template v-slot:activator="{ on }">
+                        <v-btn 
+                            style="min-width: 30px; height: 30px; margin: 0;"
+                            small @click="printout(props.item)" color="primary"
+                            class="mt-1 mb-1"
+                        >
+                            <v-icon small color="white" v-on="on">print</v-icon>
+                        </v-btn>
+                    </template>
+                    <span>Cetak PDF</span>
+                </v-tooltip>
               </div>
               <div v-show="props.item.MutasiRequestStatus == 'Approved'">
                 <v-tooltip bottom>
@@ -249,6 +262,18 @@
                     </template>
                     <span>Kirim Mutasi</span>
                 </v-tooltip>
+                <v-tooltip bottom>
+                    <template v-slot:activator="{ on }">
+                        <v-btn 
+                            style="min-width: 30px; height: 30px; margin: 0;"
+                            small @click="printout(props.item)" color="primary"
+                            class="mt-1 mb-1"
+                        >
+                            <v-icon small color="white" v-on="on">print</v-icon>
+                        </v-btn>
+                    </template>
+                    <span>Cetak PDF</span>
+                </v-tooltip>
               </div>
             </td>
           </tr>
@@ -267,6 +292,14 @@
     <one-dialog-item-mutasi></one-dialog-item-mutasi>
     <one-dialog-send-layout></one-dialog-send-layout>
     <one-dialog-view-layout></one-dialog-view-layout>
+    <one-dialog-print
+        :title="printtitle"
+        :width="printwidth"
+        :height="600"
+        :status="openprint"
+        :urlprint="urlprint"
+        @close-dialog-print="openprint = false"
+    ></one-dialog-print>
 
   </div>
 </template>
@@ -303,9 +336,14 @@ module.exports = {
     "approve-dialog": httpVueLoader("./approveDialog.vue"),
     "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
     "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
+    "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
   },
   data() {
     return {
+      urlprint: "",
+      printtitle: "",
+      printwidth: "60%",
+      openprint: false,
       msgAlertDeleteRequest: "",
       dialogAlertDeleteRequest: false,
       dialogAlertDeleteDetail: false,
@@ -593,6 +631,16 @@ module.exports = {
       this.$store.dispatch("form/getCategory");
       this.$store.dispatch("form/getBranchAsal");
       this.$store.dispatch("form/getBranchTujuan");
+    },
+    printout(val) {
+      this.printwidth = "60%";
+      this.printtitle = "";
+      let user = one_user();
+      let username = user && user.M_StaffName ? user.M_StaffName : "";
+      let tm = Date.now();
+      let id = val.MutasiHandoverID ? val.MutasiHandoverID : val.MutasiRequestID;
+      this.urlprint = BASE_URL + "/one-api/report/rpt_penyerahan_mutasi/pdf?id=" + id + "&username=" + username + "&tm=" + tm;
+      this.openprint = true;
     }
   },
 };