Merge remote-tracking branch 'origin/feat-add-report' into develop

add button report request barang
add button report pengeluaran barang
2026-07-22 08:33:52 +07:00 · 2026-07-21 11:43:58 +07:00 · 2026-07-21 11:14:53 +07:00 · 2026-07-21 11:07:39 +07:00 · 2026-07-21 10:40:41 +07:00 · 2026-07-21 10:32:52 +07:00
24 changed files with 2104 additions and 80 deletions
--- a/test/vuex/acc-one-faktur-v4/components/listing.vue
+++ b/test/vuex/acc-one-faktur-v4/components/listing.vue
@@ -96,7 +96,7 @@
                        <td class="text-xs-center pa-2">Rp. {{ toRupiah(props.item.SupplierInvoiceGrandTotal) }}</td>
                        <td class="text-xs-center pa-2">{{ props.item.SupplierInvoiceStatus }}</td>
                        <td class="text-xs-center pa-2">
-                            <v-layout align-center justify-center row fill-height>
+                            <v-layout align-center justify-center row fill-height style="white-space: nowrap;">
                                <v-tooltip bottom class="pr-1">
                                    <template v-slot:activator="{ on }">
                                        <v-btn
@@ -162,7 +162,7 @@
                                    </v-tooltip>
                                </div>
                                <div v-show="props.item.SupplierInvoiceStatus == 'Approved'">
-                                    <v-tooltip bottom>
+                                    <v-tooltip bottom class="pr-1">
                                        <template v-slot:activator="{on}">
                                            <v-btn
                                                style="min-width: 40px; margin: 0;"
@@ -175,6 +175,18 @@
                                        <span>Detail Faktur</span>
                                    </v-tooltip>
                                </div>
+                                <v-tooltip bottom v-if="props.item.SupplierInvoiceStatus != 'Draft'">
+                                    <template v-slot:activator="{on}">
+                                        <v-btn
+                                            style="min-width: 40px; margin: 0;"
+                                            color="primary" small v-on="on" dark
+                                            @click="printout(props.item)"
+                                        >
+                                            <v-icon small>print</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Cetak PDF</span>
+                                </v-tooltip>
                            </v-layout>
                        </td>
                    </tr>
@@ -218,6 +230,15 @@
                </v-card-actions>
            </v-card>
        </v-dialog>
+
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>
    </div>
 </template>

@@ -237,6 +258,7 @@
            "dialog-item": httpVueLoader("./dialogItem.vue"),
            "dialog-view": httpVueLoader("./viewFaktur.vue"),
            "dialog-attachment": httpVueLoader("./dialog-attachment.vue"),
+            "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
        },
        mounted() {
            this.$store.dispatch("data/getListSupplier")
@@ -244,6 +266,10 @@
        },
        data() {
            return {
+                urlprint: "",
+                printtitle: "",
+                printwidth: "60%",
+                openprint: false,
                filterDateForm: false,
                filterEndDateForm: false,
                confirmDialog: false,
@@ -468,6 +494,15 @@
                if (item.SupplierInvoiceID != '') {
                    this.$store.dispatch("form/verifyFaktur", {fakturID: item.SupplierInvoiceID});
                }
+            },
+            printout(val) {
+                this.printwidth = "60%";
+                this.printtitle = "";
+                let user = one_user();
+                let username = user && user.M_StaffName ? user.M_StaffName : "";
+                let tm = Date.now();
+                this.urlprint = BASE_URL + "/one-api/report/rpt_faktur/pdf?id=" + val.SupplierInvoiceID + "&username=" + username + "&tm=" + tm;
+                this.openprint = true;
            }
        },
        watch: {
--- a/test/vuex/acc-one-item-out-v3/components/requestListing.vue
+++ b/test/vuex/acc-one-item-out-v3/components/requestListing.vue
@@ -228,6 +228,7 @@
              </td>
              <td
                class="text-xs-center pa-2"
+                style="white-space: nowrap;"
                v-bind:class="{
                  'amber lighten-4': isSelected(props.item),
                }"
@@ -263,24 +264,6 @@
                  >
                    <v-icon small color="white">check_circle_outline</v-icon>
                  </v-btn>
-                  <!-- <v-btn
-                    v-if="props.item.T_ItemOutIsConfirm == 'N' && approveLevelID == '2' && props.item.T_ItemOutApproveID == null"
-                    style="min-width: 25px; height: 25px; margin: 0;"
-                    small
-                    color="black" title="Edit"
-                    @click="updateRequest(props.item)"
-                  >
-                    <v-icon small color="white">edit</v-icon>
-                  </v-btn>
-                  <v-btn
-                    v-if="props.item.T_ItemOutIsConfirm == 'N' && approveLevelID == '2' && props.item.T_ItemOutApproveID == null"
-                    style="min-width: 25px; height: 25px; margin: 0;"
-                    small
-                    color="red" title="Hapus"
-                    @click="deleteRequest(props.item)"
-                  >
-                    <v-icon small color="white">delete</v-icon>
-                  </v-btn> -->
                </span>
                <span v-if="props.item.T_ItemOutStatus == 'Process' || props.item.T_ItemOutStatus == 'Rejected'">
                  <v-btn
@@ -292,6 +275,19 @@
                    <v-icon small color="white">receipt</v-icon>
                  </v-btn>
                </span>
+                <v-tooltip bottom v-if="props.item.T_ItemOutStatus != 'Draft'">
+                  <template v-slot:activator="{ on }">
+                    <v-btn
+                      style="min-width: 25px; height: 25px; margin: 0;"
+                      small
+                      color="primary" title="Cetak PDF" v-on="on"
+                      @click="printout(props.item)"
+                    >
+                      <v-icon small color="white">print</v-icon>
+                    </v-btn>
+                  </template>
+                  <span>Cetak PDF</span>
+                </v-tooltip>
              </td>
            </template>
          </v-data-table>
@@ -377,6 +373,14 @@
    <dialog-item-process></dialog-item-process>
    <dialog-item-preview></dialog-item-preview>
    <dialog-item-confirm></dialog-item-confirm>
+    <one-dialog-print
+        :title="printtitle"
+        :width="printwidth"
+        :height="600"
+        :status="openprint"
+        :urlprint="urlprint"
+        @close-dialog-print="openprint = false"
+    ></one-dialog-print>

  </div>
 </template>
@@ -415,9 +419,14 @@ module.exports = {
    "dialog-item-confirm": httpVueLoader("./dialogItemConfirm.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,
@@ -935,6 +944,15 @@ module.exports = {
      this.$store.dispatch("requester/getItemOuts", {
        ioID: val.T_ItemOutID
      });
+    },
+    printout(val) {
+      this.printwidth = "60%";
+      this.printtitle = "";
+      let user = one_user();
+      let username = user && user.M_StaffName ? user.M_StaffName : "";
+      let tm = Date.now();
+      this.urlprint = BASE_URL + "/one-api/report/rpt_pengeluaran_barang/pdf?id=" + val.T_ItemOutID + "&username=" + username + "&tm=" + tm;
+      this.openprint = true;
    }
  },

--- a/test/vuex/acc-one-item-usage-v3/components/itemUsedList.vue
+++ b/test/vuex/acc-one-item-usage-v3/components/itemUsedList.vue
@@ -38,6 +38,9 @@
        >DAFTAR ITEM DIGUNAKAN</v-toolbar-title
      >
      <v-spacer></v-spacer>
+      <v-btn icon @click="printout()" title="Cetak PDF">
+        <v-icon>print</v-icon>
+      </v-btn>
    </v-toolbar>
    <v-card class="pa-2">
      <div class="d-flex justify-start align-center" style="gap: 0.5rem">
@@ -317,6 +320,14 @@
      </v-dialog>
    </template>

+    <one-dialog-print
+        :title="printtitle"
+        :width="printwidth"
+        :height="600"
+        :status="openprint"
+        :urlprint="urlprint"
+        @close-dialog-print="openprint = false"
+    ></one-dialog-print>
  </div>
 </template>

@@ -346,9 +357,14 @@ module.exports = {
  components: {
    "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,
      headers: [
        {
          text: "TANGGAL/NO",
@@ -684,6 +700,23 @@ module.exports = {
          enddate: this.$store.state.used.fEndDate
      };
      this.$store.dispatch("used/confirmItemUsed", prm);
+    },
+    printout() {
+      this.printwidth = "60%";
+      this.printtitle = "";
+      let user = one_user();
+      let username = user && user.M_StaffName ? user.M_StaffName : "";
+      let tm = Date.now();
+
+      let division_id = this.$store.state.usage.selectedDivision && this.$store.state.usage.selectedDivision.DivisionID
+        ? this.$store.state.usage.selectedDivision.DivisionID
+        : 0;
+
+      let start_date = this.$store.state.used.fStartDate || moment(new Date()).format("YYYY-MM-DD");
+      let end_date = this.$store.state.used.fEndDate || moment(new Date()).format("YYYY-MM-DD");
+
+      this.urlprint = BASE_URL + "/one-api/report/rpt_pemakaian_item_divisi/pdf?start_date=" + start_date + "&end_date=" + end_date + "&division_id=" + division_id + "&username=" + username + "&tm=" + tm;
+      this.openprint = true;
    }
  },
 };
--- 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;
    }
  },
 };
--- a/test/vuex/acc-one-mutasi-receive/components/mutasiListing.vue
+++ b/test/vuex/acc-one-mutasi-receive/components/mutasiListing.vue
@@ -223,7 +223,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),
              }"
@@ -253,6 +254,18 @@
                    </template>
                    <span>Lihat Detail</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>
              <div v-show="props.item.MutasiHandoverStatus == 'Sent'">
                <v-tooltip bottom>
@@ -286,6 +299,14 @@
    <one-dialog-receive-layout></one-dialog-receive-layout>
    <one-dialog-view-layout></one-dialog-view-layout>
    <one-dialog-mutasi></one-dialog-mutasi>
+    <one-dialog-print
+        :title="printtitle"
+        :width="printwidth"
+        :height="600"
+        :status="openprint"
+        :urlprint="urlprint"
+        @close-dialog-print="openprint = false"
+    ></one-dialog-print>

  </div>
 </template>
@@ -323,9 +344,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,
@@ -624,6 +650,15 @@ module.exports = {
      this.$store.commit("mutasi/update_indeterminatex", false);
      this.$store.commit("mutasi/update_selected_barcode", []);
      this.$store.dispatch("mutasi/getBarcodes");
+    },
+    printout(val) {
+      this.printwidth = "60%";
+      this.printtitle = "";
+      let user = one_user();
+      let username = user && user.M_StaffName ? user.M_StaffName : "";
+      let tm = Date.now();
+      this.urlprint = BASE_URL + "/one-api/report/rpt_penerimaan_mutasi/pdf?id=" + val.MutasiHandoverID + "&username=" + username + "&tm=" + tm;
+      this.openprint = true;
    }
  },
 };
--- a/test/vuex/acc-one-mutasi-request/components/mutasiListing.vue
+++ b/test/vuex/acc-one-mutasi-request/components/mutasiListing.vue
@@ -217,12 +217,13 @@
            </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),
              }"
            >
-              <div v-show="props.item.MutasiRequestStatus === 'Draft'">
+              <template v-if="props.item.MutasiRequestStatus === 'Draft'">
                <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                        <v-btn 
@@ -247,7 +248,21 @@
                    </template>
                    <span>Hapus</span>
                </v-tooltip>
-              </div>
+              </template>
+              <template v-else>
+                <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>
+              </template>
            </td>
          </tr>
          </template>
@@ -265,6 +280,14 @@
    <one-dialog-item-mutasi></one-dialog-item-mutasi>
    <one-dialog-form-edit-mutasi></one-dialog-form-edit-mutasi>
    <one-dialog-rm-layout></one-dialog-rm-layout>
+    <one-dialog-print
+        :title="printtitle"
+        :width="printwidth"
+        :height="600"
+        :status="openprint"
+        :urlprint="urlprint"
+        @close-dialog-print="openprint = false"
+    ></one-dialog-print>

  </div>
 </template>
@@ -301,9 +324,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,
@@ -546,6 +574,15 @@ module.exports = {
    deleteRM(data) {
      this.$store.commit("mutasi/update_selected_list_data", data);
      this.$store.commit("mutasi/update_dialog_delete", true);
+    },
+    printout(val) {
+      this.printwidth = "60%";
+      this.printtitle = "";
+      let user = one_user();
+      let username = user && user.M_StaffName ? user.M_StaffName : "";
+      let tm = Date.now();
+      this.urlprint = BASE_URL + "/one-api/report/rpt_request_mutasi/pdf?id=" + val.MutasiRequestID + "&username=" + username + "&tm=" + tm;
+      this.openprint = true;
    }
  },
 };
--- a/test/vuex/acc-one-payment-voucher/components/voucherListing.vue
+++ b/test/vuex/acc-one-payment-voucher/components/voucherListing.vue
@@ -192,25 +192,43 @@
                                        </v-chip>
                                    </td> 
                                    <template v-if="props.item.PaymentVoucherStatus == 'Draft'">
-                                        <td class="text-xs-center pa-2"
+                                        <td class="text-xs-center pa-2" style="white-space: nowrap;"
                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
-                                            @click="selectMe(props.item)"
                                        >
-                                            <v-icon small @click="openUpdateVoucher(props.item)"
-                                            >edit</v-icon
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click.stop="openUpdateVoucher(props.item)"
+                                                small title="Edit"
+                                                color="black"
                                            >
-                                            <v-icon small @click="deleteVoucher(props.item)"
-                                            >delete</v-icon
+                                                <v-icon small color="white">edit</v-icon>
+                                            </v-btn>
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click.stop="deleteVoucher(props.item)"
+                                                small title="Hapus"
+                                                color="red"
                                            >
+                                                <v-icon small color="white">delete</v-icon>
+                                            </v-btn>
                                        </td>
                                    </template>
                                    <template v-else>
                                        <td
-                                        class="text-xs-center pa-2"
+                                            class="text-xs-center pa-2" style="white-space: nowrap;"
                                            v-bind:class="{
                                                'amber lighten-4': isSelected(props.item),
                                            }"
-                                        ></td>
+                                        >
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click.stop="printout(props.item)"
+                                                small title="Cetak PDF"
+                                                color="primary"
+                                            >
+                                                <v-icon small color="white">print</v-icon>
+                                            </v-btn>
+                                        </td>
                                    </template>
                                </template>
                            </v-data-table>
@@ -234,6 +252,15 @@
        @forget-dialog-alert="dialogAlertDelete = false"
        @close-dialog-alert="closeAndDelete()"
        ></one-dialog-alert>
+
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>
    </div>
 </template>

@@ -263,10 +290,15 @@ module.exports = {
    components: {
        "dialog-form-voucher": httpVueLoader("./dialogFormVoucher.vue"),
        "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
-        "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue")
+        "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
+        "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
    },
    data() {
        return {
+            urlprint: "",
+            printtitle: "",
+            printwidth: "60%",
+            openprint: false,
            msgAlertDelete: "",
            dialogAlertDelete: false,
            xPVID: 0,
@@ -306,7 +338,7 @@ module.exports = {
                },
                {
                    text: "AKSI",
-                    align: "left",
+                    align: "center",
                    sortable: false,
                    value: "status",
                    width: "15%",
@@ -570,6 +602,15 @@ module.exports = {
            this.$store.commit("voucher/update_selected_purchase", this.$store.state.voucher.details);

            this.$store.commit("voucher/update_resume_total", {"totalRealitation": data.PaymentVoucherTotal} );
+        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_payment_voucher/pdf?id=" + val.PaymentVoucherID + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
        }
    },
    watch: {
--- a/test/vuex/acc-one-po-asset/components/dialog-add-item-aset.vue
+++ b/test/vuex/acc-one-po-asset/components/dialog-add-item-aset.vue
@@ -0,0 +1,244 @@
+<template>
+    <v-dialog v-model="dialog_add_itemaset" persistent width="60vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary title>
+                TAMBAH REQUEST ASET
+            </v-card-title>
+            <v-card-text>
+                <v-layout row wrap>
+                    <v-flex xs12>
+                        <v-text-field
+                            v-model="keyword" hide-details outline 
+                            label="cari" placeholder="nomor request aset"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 mt-2>
+                        <v-data-table
+                            :headers="headers" :items="list_requestaset.records" 
+                            v-model="temp_selectedrequest" item-key="PurchaseRequestDetailID" 
+                            class="elevation-1" hide-actions :loading="loading"
+                        >
+                            <template v-slot:headers="props">
+                                <tr>
+                                    <th class="blue lighten-3 white--text" style="width: 10%;">
+                                        <v-checkbox
+                                            :input-value="props.all" primary 
+                                            :indeterminate="props.indeterminate"
+                                            @click.native="toggleAll" hide-details
+                                        ></v-checkbox>
+                                    </th>
+                                    <th v-for="header in props.headers" :key="header.text"
+                                        :class="header.class" :style="{ width: header.width }"
+                                    >{{ header.text }}</th>
+                                </tr>
+                            </template>
+                            <template v-slot:items="props">
+                                <tr>
+                                    <td>
+                                        <v-checkbox 
+                                            v-model="props.selected" 
+                                            primary hide-details
+                                        ></v-checkbox>
+                                    </td>
+                                    <td class="text-xs-center pa-2">
+                                        {{ props.item.PurchaseRequestNumber }}
+                                    </td>
+                                    <td class="text-xs-center pa-2">
+                                        {{ props.item.M_ItemCode }}
+                                    </td>
+                                    <td class="text-xs-center pa-2">
+                                        {{ props.item.M_ItemDesc }}
+                                    </td>
+                                    <td class="text-xs-center pa-2">
+                                        {{ props.item.ItemUnitName }}
+                                    </td>
+                                    <td class="text-xs-center pa-2">
+                                        {{ props.item.RequestQty }}
+                                    </td>
+                                </tr>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn class="white--text" color="error" @click="batalrequest()">Batal</v-btn>
+                <v-btn class="white--text" color="primary" @click="simpanrequest()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            keyword: "",
+            loading: false,
+            temp_selectedrequest: [],
+            headers: [
+                {
+                    text: "NO PURCHASE REQ", align: "center", sortable: false,
+                    value: "noreq", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "KODE ITEM", align: "center", sortable: false,
+                    value: "kode", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false,
+                    value: "serve", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "SATUAN", align: "center", sortable: false,
+                    value: "unit", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "REQ QTY", align: "center", sortable: false,
+                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        dialog_add_itemaset: {
+            get() {
+                return this.$store.state.common.dialog_add_itemaset
+            },
+            set(val) {
+                this.$store.commit('common/update_dialog_add_itemaset', val)
+            }
+        },
+        list_requestaset: {
+            get() {
+                return this.$store.state.common.list_requestaset
+            },
+            set(val) {
+                this.$store.commit('common/update_list_requestaset', val)
+            }
+        },
+        form_orderaset: {
+            get() {
+                return this.$store.state.common.form_orderaset
+            },
+            set(val) {
+                this.$store.commit('common/update_form_orderaset', val)
+            }
+        },
+        item_orderaset: {
+            get() {
+                return this.$store.state.common.item_orderaset
+            },
+            set(val) {
+                this.$store.commit('common/update_item_orderaset', val)
+            }
+        },
+        summary_orderaset: {
+            get() {
+                return this.$store.state.common.summary_orderaset
+            },
+            set(val) {
+                this.$store.commit('common/update_summary_orderaset', val)
+            }
+        }
+    },
+    methods: {
+        searchrequest(search) {
+            this.loading = true
+            setTimeout(() => {
+                this.$store.dispatch('common/lookupOrderRequest', search)
+                this.loading = false
+            }, 500);
+        },
+        toggleAll() {
+            if (this.temp_selectedrequest.length > 0) {
+                this.temp_selectedrequest = []
+            } else {
+                this.temp_selectedrequest = this.list_requestaset.records.slice()
+            }
+        },
+        parseCurrency(value) {
+            let cleanvalue = 0;
+            if (!isNaN(value)) {
+                cleanvalue = value;
+            } else {
+                cleanvalue = String(value).replace(/\./g, '');
+                cleanvalue = cleanvalue.replace(',', '.');
+            }
+            return parseFloat(cleanvalue) || 0;
+        },
+        batalrequest() {
+            this.temp_selectedrequest = []
+            this.dialog_add_itemaset = false
+        },
+        simpanrequest() {
+            let request = JSON.parse(JSON.stringify(this.temp_selectedrequest))
+            let form = JSON.parse(JSON.stringify(this.form_orderaset))
+
+            const prnumber = [...new Set(request.map(item => item.PurchaseRequestNumber))].join(', ')
+            form.reference = prnumber
+            
+            const newitem = Object.values(request.reduce((acc, current) => {
+                const itemcode = current.M_ItemCode
+                if (!acc[itemcode]) {
+                    acc[itemcode] = {
+                        M_ItemID: current.M_ItemID,
+                        M_ItemCode: itemcode,
+                        M_ItemDesc: current.M_ItemDesc,
+                        ItemUnitID: current.ItemUnitID,
+                        ItemUnitName: current.ItemUnitName,
+                        SupplierPrice: Number(current.SupplierPrice),
+                        M_BranchName: current.M_BranchName,
+                        RequestQty: 0.00,
+                        DiskonAmount: 0.00,
+                        DiskonType: 'R',
+                        EndPrice: 0.00,
+                        TempTotal: 0.00,
+                        detail: []
+                    }
+                }
+
+                acc[itemcode].RequestQty += Number(current.RequestQty)
+                acc[itemcode].detail.push(current)
+                acc[itemcode].EndPrice = acc[itemcode].SupplierPrice - acc[itemcode].DiskonAmount
+                acc[itemcode].TempTotal = acc[itemcode].RequestQty * acc[itemcode].EndPrice
+                return acc
+            }, {}))
+
+            let subtotal = newitem.reduce((sum, item) => sum + Number(item.TempTotal), 0)
+            let disc = this.parseCurrency(form.valuediskon)
+            if (form.typediskon == 'percent') {
+                disc = subtotal * Number(form.valuediskon) / 100
+            }
+
+            let tax = this.parseCurrency(form.valuepajak)
+            if (form.typepajak == 'percent') {
+                tax = (subtotal - disc) * Number(form.valuepajak) / 100
+            }
+
+            let total = (subtotal - disc) + tax
+            let summary = {
+                subtotal: subtotal,
+                diskon: disc,
+                pajak: tax,
+                total: total
+            }
+
+            this.item_orderaset = newitem
+            this.form_orderaset = form
+            this.summary_orderaset = summary
+            this.temp_selectedrequest = []
+            this.dialog_add_itemaset = false
+        }
+    },
+    watch: {
+        keyword(newval, oldval) {
+            if (!newval) return
+            if (newval === oldval) return
+            if (newval.length < 1) return
+            this.searchrequest(newval)
+        },
+    }
+}
+</script>
--- a/test/vuex/acc-one-po-asset/components/dialog-create-contract.vue
+++ b/test/vuex/acc-one-po-asset/components/dialog-create-contract.vue
@@ -0,0 +1,259 @@
+<template>
+<v-dialog v-model="dialog_create_contract" persistent width="80vw">
+    <v-card style="max-height: 80vh; display: flex; flex-direction: column;">
+        <v-card-title class="headline grey lighten-2">BUAT KONTRAK BARU</v-card-title>
+        <v-card-text style="flex: 1 1 auto; overflow: visible;">
+            <!-- field forms -->
+            <v-layout row wrap>
+                <v-flex xs4 pa-1>
+                    <v-text-field
+                        v-model="form_kontrak.nama_kontrak" hide-details outline
+                        label="Nama Kontrak" placeholder="masukan nama kontrak"
+                    ></v-text-field>
+                </v-flex>
+                <v-flex xs4 pa-1>
+                    <v-menu
+                        v-model="menuKontrakDate" offset-y lazy min-width="290px"
+                        transition="scale-transition" max-width="290px" full-width
+                        :nudge-right="40" :close-on-content-click="false"
+                    >
+                        <template v-slot:activator="{ on }">
+                            <v-text-field
+                                v-model="formattedDateKontrak" label="Tanggal Kontrak"
+                                hide-details readonly outline v-on="on"
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker v-model="form_kontrak.tanggal_kontrak"
+                            no-title @input="menuKontrakDate = false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs4 pa-1>
+                    <v-autocomplete
+                        v-model="form_kontrak.supplierID_kontrak" hide-details
+                        :items="supplier_list" label="Supplier" outline
+                        item-text="SupplierName" item-value="SupplierID"
+                    ></v-autocomplete>
+                </v-flex>
+            </v-layout>
+
+            <v-layout row wrap>
+                <v-flex xs3 pa-1>
+                    <v-menu
+                        v-model="menuKontrakStartdate" offset-y lazy min-width="290px"
+                        transition="scale-transition" max-width="290px" full-width
+                        :nudge-right="40" :close-on-content-click="false"
+                    >
+                        <template v-slot:activator="{ on }">
+                            <v-text-field
+                                v-model="formattedStartdateKontrak" outline v-on="on"
+                                label="Tanggal Awal Kontrak" hide-details readonly
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker v-model="form_kontrak.tanggalAwal_kontrak"
+                            no-title @input="menuKontrakStartdate = false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs3 pa-1>
+                    <v-menu
+                        v-model="menuKontrakEnddate" offset-y lazy min-width="290px"
+                        transition="scale-transition" max-width="290px" full-width
+                        :nudge-right="40" :close-on-content-click="false"
+                    >
+                        <template v-slot:activator="{ on }">
+                            <v-text-field
+                                v-model="formattedEnddateKontrak" outline v-on="on"
+                                label="Tanggal Akhir Kontrak" hide-details readonly
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker v-model="form_kontrak.tanggalAkhir_kontrak"
+                            no-title @input="menuKontrakEnddate = false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs2 pa-1>
+                    <v-text-field
+                        v-model="form_kontrak.durasi_cicilan" hide-details outline
+                        label="Durasi Kontrak (Bulan)" placeholder="1" readonly
+                    ></v-text-field>
+                </v-flex>
+                <v-flex xs2 pa-1>
+                    <v-text-field
+                        v-model="form_kontrak.jumlah_cicilan" hide-details
+                        label="Jumlah Cicilan" placeholder="1" outline
+                    ></v-text-field>
+                </v-flex>
+                <v-flex xs2 pa-1>
+                    <v-text-field
+                        v-model="form_kontrak.tanggalBayar_cicilan" hide-details
+                        label="Tanggal Bayar Cicilan" placeholder="1" outline
+                    ></v-text-field>
+                </v-flex>
+            </v-layout>
+
+            <v-layout row wrap>
+                <v-flex xs4 pa-1>
+                    <v-text-field
+                        v-model="form_kontrak.besarNilai_cicilan" hide-details
+                        label="Besar Bayar Cicilan" placeholder="0" prefix="Rp." outline
+                    ></v-text-field>
+                </v-flex>
+                <v-flex xs1 pa-1>
+                    <v-autocomplete
+                        :items="['nominal', 'persen']" label="Tipe Nilai"
+                        v-model="form_kontrak.type_downpayment" hide-details
+                        @input="changeTypeAmount('DP')" outline
+                    ></v-autocomplete>
+                </v-flex>
+                <v-flex xs3 pa-1>
+                    <v-text-field
+                        v-model="form_kontrak.besarNilai_downpayment" hide-details
+                        label="Jumlah Uang Muka" placeholder="0" suffix="%" outline
+                    ></v-text-field>
+                </v-flex>
+                <v-flex xs1 pa-1>
+                    <v-autocomplete
+                        :items="['nominal', 'persen']" label="Tipe Nilai"
+                        v-model="form_kontrak.type_pajak" hide-details
+                        @input="changeTypeAmount('tax')" outline
+                    ></v-autocomplete>
+                </v-flex>
+                <v-flex xs3 pa-1>
+                    <v-text-field
+                        v-model="form_kontrak.besarNilai_pajak" hide-details
+                        label="Jumlah Pajak" placeholder="0" suffix="%" outline
+                    ></v-text-field>
+                </v-flex>
+            </v-layout>
+
+            <!-- table item -->
+            <v-layout row wrap class="mt-2">
+                <v-flex xs3 pa-1>
+                    <v-btn block color="info">TAMBAH ITEM</v-btn>
+                </v-flex>
+                <v-flex xs12 pa-1>
+                    <div style="max-height: 35vh; overflow-y: auto;">
+                        <v-data-table
+                            :headers="headers" :items="[]"
+                            item-key="M_ItemID" class="elevation-1" hide-actions
+                        >
+                            <template v-slot:items="props">
+                                <tr>
+                                    <td class="text-xs-center pa-1"></td>
+                                    <td class="text-xs-center pa-1"></td>
+                                    <td class="text-xs-center pa-1"></td>
+                                    <td class="text-xs-center pa-1"></td>
+                                    <td class="text-xs-center pa-1"></td>
+                                    <td class="text-xs-center pa-1"></td>
+                                </tr>
+                            </template>
+                        </v-data-table>
+                    </div>
+                </v-flex>
+            </v-layout>
+        </v-card-text>
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn @click="" color="error" class="white--text">Batal</v-btn>
+            <v-btn @click="" color="primary" class="white--text">Simpan</v-btn>
+        </v-card-actions>
+    </v-card>
+</v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            menuKontrakDate: false,
+            menuKontrakStartdate: false,
+            menuKontrakEnddate: false,
+            headers: [
+                {
+                    text: "NO", align: "center", sortable: false, value: "no",
+                    width: "5%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false, value: "item",
+                    width: "25%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "JUMLAH", align: "center", sortable: false, value: "qty",
+                    width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "HARGA", align: "center", sortable: false, value: "price",
+                    width: "25%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "TOTAL", align: "center", sortable: false, value: "total",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false, value: "act",
+                    width: "10%", class: "pa-1 blue lighten-3 white--text",
+                }
+            ]
+        };
+    },
+    computed: {
+        dialog_create_contract: {
+            get() {
+                return this.$store.state.kontrakAsset.dialog_create_contract
+            },
+            set(val) {
+                this.$store.commit("kontrakAsset/update_dialog_create_contract", val);
+            }
+        },
+        supplier_list() {
+            return [];
+        },
+        form_kontrak: {
+            get() {
+                return this.$store.state.kontrakAsset.form_kontrak
+            },
+            set(val) {
+                this.$store.commit("kontrakAsset/update_form_kontrak", val);
+            }
+        },
+        formattedDateKontrak() {
+            return this.formatDate(this.form_kontrak.tanggal_kontrak);
+        },
+        formattedStartdateKontrak() {
+            return this.formatDate(this.form_kontrak.tanggalAwal_kontrak);
+        },
+        formattedEnddateKontrak() {
+            return this.formatDate(this.form_kontrak.tanggalAkhir_kontrak);
+        }
+    },
+    methods: {
+        formatDate(date) {
+            if (!date) return null;
+            const [year, month, day] = date.split('-');
+            return `${day}-${month}-${year}`;
+        },
+        countMonths(startdate, enddate) {
+            const start = new Date(stardate);
+            const end = new Date(enddate);
+
+            let months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
+            if (end.getDate() > start.getDate()) {
+                months += 1;
+            }
+
+            return Math.max(months, 1);
+        },
+        changeTypeAmount(name) {
+            let form = this.form_kontrak;
+            if (name == 'DP') {
+                form_kontrak.jumlah_downpayment = 0;
+            }
+
+            if (name == 'tax') {
+                form_kontrak.jumlah_pajak = 0;
+            }
+        }
+    }
+}
+</script>
--- a/test/vuex/acc-one-po-asset/components/dialog-form-order-aset.vue
+++ b/test/vuex/acc-one-po-asset/components/dialog-form-order-aset.vue
@@ -0,0 +1,601 @@
+<template>
+<v-dialog v-model="dialog_form_orderaset" persistent width="70vw">
+    <v-card>
+        <v-card-title class="headline grey lighten-2">FORM PO ASET</v-card-title>
+        <v-card-text>
+            <!-- first row -->
+            <v-layout row wrap>
+                <v-flex xs4>
+                    <v-menu
+                        v-model="menuPOdate" offset-y lazy min-width="290px" 
+                        transition="scale-transition" max-width="290px" full-width
+                        :nudge-right="40" :close-on-content-click="false"
+                    >
+                        <template v-slot:activator="{on}">
+                            <v-text-field
+                                v-model="formatPOdate" label="Tanggal PO" 
+                                hide-details readonly v-on="on" outline
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker
+                            v-model="form_orderaset.podate" no-title 
+                            @input="menuPOdate = false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs4 pl-2>
+                    <v-autocomplete
+                        :items="list_supplier" hide-details outline 
+                        v-model="form_orderaset.supplierID" label="Vendor" 
+                        item-text="SupplierName" item-value="SupplierID" 
+                        @input="changeSupplierCabang()"
+                    ></v-autocomplete>
+                </v-flex>
+                <v-flex xs4 pl-2>
+                    <v-text-field
+                        v-model="form_orderaset.reference" hide-details outline 
+                        label="Referensi" placeholder="nomor request" readonly 
+                    ></v-text-field>
+                </v-flex>
+            </v-layout>
+
+            <!-- 2nd row -->
+            <v-layout row wrap class="mt-2">
+                <v-flex xs4>
+                    <v-autocomplete
+                        :items="list_branch" hide-details outline 
+                        v-model="form_orderaset.branchcode" label="Cabang" 
+                        item-text="M_BranchName" item-value="M_BranchCode" 
+                        @input="changeSupplierCabang()"
+                    ></v-autocomplete>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-autocomplete
+                        :items="['absolute', 'percent']" label="Pajak (PPN)" 
+                        v-model="form_orderaset.typepajak" hide-details 
+                        @input="changeTypeTaxDiskon('tax')" outline 
+                    ></v-autocomplete>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-text-field
+                        v-if="form_orderaset.typepajak == 'percent'" label="Pajak" 
+                        v-model="form_orderaset.valuepajak" hide-details outline 
+                        placeholder="besar pajak dalam persen" suffix="%" 
+                        @input="debounceCalcForm(form_orderaset)"
+                    ></v-text-field>
+                    <v-text-field
+                        v-else label="Pajak" outline prefix="Rp."
+                        v-model="form_orderaset.valuepajak" hide-details 
+                        placeholder="besar pajak dalam rupiah" 
+                        @input="debounceCalcForm(form_orderaset)"
+                        @focus="handleFocus(form_orderaset, 'formtax')"
+                        @blur="handleBlur(form_orderaset, 'formtax')"
+                    ></v-text-field>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-autocomplete
+                        :items="['absolute', 'percent']" hide-details 
+                        v-model="form_orderaset.typediskon" label="Diskon" 
+                        @input="changeTypeTaxDiskon('diskon')" outline 
+                    ></v-autocomplete>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-text-field
+                        v-if="form_orderaset.typediskon == 'percent'" label="Diskon" 
+                        v-model="form_orderaset.valuediskon" hide-details outline 
+                        placeholder="besar diskon dalam persen" suffix="%"
+                        @input="debounceCalcForm(form_orderaset)"
+                    ></v-text-field>
+                    <v-text-field
+                        v-else label="Diskon" outline prefix="Rp."
+                        v-model="form_orderaset.valuediskon" hide-details 
+                        placeholder="besar diskon dalam rupiah" 
+                        @input="debounceCalcForm(form_orderaset)" 
+                        @focus="handleFocus(form_orderaset, 'formdiskon')"
+                        @blur="handleBlur(form_orderaset, 'formdiskon')"
+                    ></v-text-field>
+                </v-flex>
+            </v-layout>
+
+            <v-layout row wrap class="mt-2">
+                <v-flex xs3>
+                    <v-btn
+                        block color="info" @click="addItemRequest()"
+                        :disabled="form_orderaset.branchcode == '' || form_orderaset.supplierID == ''"
+                    >TAMBAH ITEM</v-btn>
+                </v-flex>
+            </v-layout>
+
+            <!-- table item -->
+            <v-layout row wrap class="mt-2">
+                <v-flex xs12 v-if="item_orderaset.length > 0">
+                    <v-data-table
+                        :headers="headers" :items="item_orderaset" :expand="expand"
+                        item-key="M_ItemCode" class="elevation-1" hide-actions
+                    >
+                        <template v-slot:items="props">
+                            <tr>
+                                <td class="text-xs-center pa-2" 
+                                    @click="props.expanded = !props.expanded"
+                                >
+                                    <v-icon>{{ props.expanded
+                                        ? "keyboard_arrow_down"
+                                        : "keyboard_arrow_right"
+                                    }}</v-icon>
+                                </td>
+                                <td class="text-xs-center pa-2">
+                                    {{ props.item.M_ItemDesc }}
+                                </td>
+                                <td class="text-xs-center pa-2">
+                                    {{ props.item.RequestQty }}
+                                </td>
+                                <td class="text-xs-center pa-2">
+                                    Rp. {{ formatCurrency(props.item.SupplierPrice) }}
+                                </td>
+                                <td class="text-xs-center pa-2">
+                                    <v-layout row>
+                                        <v-menu open-on-hover top offset-y attach>
+                                            <v-btn slot="activator" color="primary" dark small>
+                                                <span v-if="props.item.DiskonType == 'R'">Rp</span>
+                                                <span v-else>%</span>
+                                            </v-btn>
+
+                                            <v-list>
+                                                <v-list-tile
+                                                    v-for="(name, index) in typedisc" :key="index"
+                                                    @click="changeDiscountPerItem(name, props.item)"
+                                                >
+                                                    <v-list-tile-title>{{ name }}</v-list-tile-title>
+                                                </v-list-tile>
+                                            </v-list>
+                                        </v-menu>
+                                        <v-text-field
+                                            v-if="props.item.DiskonType == 'R'" prefix="Rp." 
+                                            v-model="props.item.DiskonAmount" hide-details 
+                                            @input="debounceCalcItem(props.item)" solo 
+                                            @focus="handleFocus(props.item, 'itemdiskon')"
+                                            @blur="handleBlur(props.item, 'itemdiskon')"
+                                        ></v-text-field>
+                                        <v-text-field
+                                            v-if="props.item.DiskonType == 'P'" suffix="%" min="0"
+                                            v-model="props.item.DiskonAmount" hide-details solo
+                                            @input="debounceCalcItem(props.item)" type="number"
+                                        ></v-text-field>
+                                    </v-layout>
+                                </td>
+                                <td class="text-xs-center pa-2">
+                                    Rp. {{ formatCurrency(props.item.EndPrice) }}
+                                </td>
+                                <td class="text-xs-center pa-2">
+                                    Rp. {{ formatCurrency(props.item.TempTotal) }}
+                                </td>
+                                <td class="text-xs-center pa-2">
+                                    <v-btn
+                                        color="red" dark @click="{}" 
+                                        style="min-width: 40px; margin: 0;" small
+                                    >
+                                        <v-icon small>delete</v-icon>
+                                    </v-btn>
+                                </td>
+                            </tr>
+                        </template>
+                        
+                        <!-- expanded -->
+                        <template v-slot:expand="props">
+                            <v-card flat>
+                                <v-card-text>
+                                    <v-data-table
+                                        :headers="headers_detail" class="elevation-0" 
+                                        :items="props.item.detail" hide-actions
+                                    >
+                                        <template v-slot:items="detail">
+                                        <tr>
+                                            <td class="text-xs-center pa-2">
+                                                {{ detail.item.M_ItemDesc }}
+                                            </td>
+                                            <td class="text-xs-center pa-2">
+                                                {{ detail.item.PurchaseRequestNumber }}
+                                            </td>
+                                            <td class="text-xs-center pa-2">
+                                                {{ detail.item.M_BranchName }}
+                                            </td>
+                                            <td class="text-xs-center pa-2">
+                                                {{ detail.item.RequestQty }}
+                                            </td>
+                                            <td class="text-xs-center pa-2">
+                                                {{ detail.item.ItemUnitName }}
+                                            </td>
+                                            <td class="text-xs-center pa-2">
+                                                Rp. {{ formatCurrency(detail.item.SupplierPrice) }}
+                                            </td>
+                                            <td class="text-xs-center pa-2">
+                                                <v-btn
+                                                    color="red" flat @click="{}"
+                                                    style="min-width: 40px; margin: 0;" small
+                                                >
+                                                    <v-icon>delete</v-icon>
+                                                </v-btn>
+                                            </td>
+                                        </tr>
+                                        </template>
+                                    </v-data-table>
+                                </v-card-text>
+                            </v-card>
+                        </template>
+
+                        <!-- footer -->
+                        <template v-slot:footer>
+                            <tr>
+                                <td colspan="1" class="text-xs-left pa-2"></td>
+                                <td colspan="4" class="text-xs-left pa-2">
+                                    <strong>JUMLAH</strong>
+                                </td>
+                                <td colspan="2" class="text-xs-right pa-2">
+                                    <strong>
+                                        Rp. {{ formatCurrency(summary_orderaset.subtotal) }}
+                                    </strong>
+                                </td>
+                                <td colspan="1" class="text-xs-right pa-2"></td>
+                            </tr>
+                            <tr>
+                                <td colspan="1" class="text-xs-left pa-2"></td>
+                                <td colspan="4" class="text-xs-left pa-2">
+                                    <strong>DISKON</strong>
+                                </td>
+                                <td colspan="2" class="text-xs-right pa-2">
+                                    <strong>
+                                        Rp. {{ formatCurrency(summary_orderaset.diskon) }}
+                                    </strong>
+                                </td>
+                                <td colspan="1" class="text-xs-right pa-2"></td>
+                            </tr>
+                            <tr>
+                                <td colspan="1" class="text-xs-left pa-2"></td>
+                                <td colspan="4" class="text-xs-left pa-2">
+                                    <strong>PAJAK</strong>
+                                </td>
+                                <td colspan="2" class="text-xs-right pa-2">
+                                    <strong>
+                                       Rp. {{ formatCurrency(summary_orderaset.pajak) }}
+                                    </strong>
+                                </td>
+                                <td colspan="1" class="text-xs-right pa-2"></td>
+                            </tr>
+                            <tr>
+                                <td colspan="1" class="text-xs-left pa-2"></td>
+                                <td colspan="4" class="text-xs-left pa-2">
+                                    <strong>TOTAL</strong>
+                                </td>
+                                <td colspan="2" class="text-xs-right pa-2">
+                                    <strong>
+                                        Rp. {{ formatCurrency(summary_orderaset.total) }}
+                                    </strong>
+                                </td>
+                                <td colspan="1" class="text-xs-right pa-2"></td>
+                            </tr>
+                        </template>
+                    </v-data-table>
+                </v-flex>
+            </v-layout>
+        </v-card-text>
+
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn @click="batalOrder()" color="error" class="white--text">Batal</v-btn>
+            <v-btn @click="simpanOrder()" color="primary" class="white--text">Simpan</v-btn>
+        </v-card-actions>
+    </v-card>
+</v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            menuPOdate: false,
+            expand: false,
+            headers: [
+                {
+                    text: "", align: "center", sortable: false,
+                    value: "item", width: "5%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false,
+                    value: "item", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "JUMLAH", align: "center", sortable: false,
+                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "HARGA", align: "center", sortable: false,
+                    value: "price", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "DISKON", align: "center", sortable: false,
+                    value: "disc", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "HARGA SETELAH DISKON", align: "center", sortable: false,
+                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "TOTAL", align: "center", sortable: false,
+                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false,
+                    value: "disc", width: "5%", class: "pa-1 blue lighten-3 white--text",
+                }
+            ],
+            headers_detail: [
+                {
+                    text: "NAMA PRODUK", align: "center", sortable: false,
+                    value: "prod", width: "20%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "NO REQUEST", align: "center", sortable: false,
+                    value: "noreq", width: "20%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "REQUESTER", align: "center", sortable: false,
+                    value: "req", width: "20%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "JUMLAH", align: "center", sortable: false,
+                    value: "qty", width: "10%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "UNIT", align: "center", sortable: false,
+                    value: "unit", width: "10%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "HARGA", align: "center", sortable: false,
+                    value: "price", width: "15%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false,
+                    value: "act", width: "5%", class: "pa-1 blue lighten-4 black--text",
+                }
+            ],
+            typedisc: ["absolute", "percent"]
+        }
+    },
+    computed: {
+        dialog_form_orderaset: {
+            get() {
+                return this.$store.state.common.dialog_form_orderaset;
+            },
+            set(val) {
+                this.$store.commit('common/update_dialog_form_orderaset', val);
+            }
+        },
+        form_orderaset: {
+            get() {
+                return this.$store.state.common.form_orderaset;
+            },
+            set(val) {
+                this.$store.commit('common/update_form_orderaset', val);
+            }
+        },
+        item_orderaset: {
+            get() {
+                return this.$store.state.common.item_orderaset;
+            },
+            set(val) {
+                this.$store.commit('common/update_item_orderaset', val);
+            }
+        },
+        summary_orderaset: {
+            get() {
+                return this.$store.state.common.summary_orderaset
+            },
+            set(val) {
+                this.$store.commit('common/update_summary_orderaset', val)
+            }
+        },
+        formatPOdate() {
+            return this.formatDate(this.form_orderaset.podate);
+        },
+        list_supplier() {
+            return this.$store.state.common.list_supplier;
+        },
+        list_branch() {
+            return this.$store.state.common.list_branch;
+        }
+    },
+    methods: {
+        formatDate(date) {
+            if (!date) return null;
+            const [year, month, day] = date.split('-');
+            return `${day}-${month}-${year}`;
+        },
+        formatCurrency(value) {
+            const num = parseFloat(value);
+            if (isNaN(num)) return 0;
+            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        },
+        parseCurrency(value) {
+            let cleanvalue = 0;
+            if (!isNaN(value)) {
+                cleanvalue = value;
+            } else {
+                cleanvalue = String(value).replace(/\./g, '');
+                cleanvalue = cleanvalue.replace(',', '.');
+            }
+            return parseFloat(cleanvalue) || 0;
+        },
+        handleFocus(item, type) {
+            if (type == 'itemprice') {
+                const currentval = item.SupplierPrice
+                const parsedval = this.parseCurrency(currentval)
+                item.SupplierPrice = parsedval
+            }
+
+            if (type == 'itemdiskon') {
+                const currentdisc = item.DiskonAmount
+                const parseddisc = this.parseCurrency(currentdisc)
+                item.DiskonAmount = parseddisc
+            }
+
+            if (type == 'formdiskon') {
+                const currdisc = item.valuediskon
+                const formdisc = this.parseCurrency(currdisc)
+                item.valuediskon = formdisc
+            }
+
+            if (type == 'formtax') {
+                const currtax = item.valuepajak
+                const formtax = this.parseCurrency(currtax)
+                item.valuepajak = formtax
+            }
+        },
+        handleBlur(item, type) {
+            switch (type) {
+                case 'itemprice':
+                    const currentval = item.SupplierPrice
+                    const parsedval = this.parseCurrency(currentval)
+                    item.SupplierPrice = this.formatCurrency(parsedval)
+                    break;
+                case 'itemdiskon':
+                    const currentdisc = item.DiskonAmount
+                    const parseddisc = this.parseCurrency(currentdisc)
+                    item.DiskonAmount = this.formatCurrency(parseddisc)
+                    break;
+                case 'formdiskon':
+                    const currdisc = item.valuediskon
+                    const formdisc = this.parseCurrency(currdisc)
+                    item.valuediskon = this.formatCurrency(formdisc)
+                    break;
+                case 'formtax':
+                    const currtax = item.valuepajak
+                    const formtax = this.parseCurrency(currtax)
+                    item.valuepajak = this.formatCurrency(formtax)
+                    break;
+                default:
+                    break;
+            }
+        },
+        changeSupplierCabang() {
+            this.item_orderaset = []
+            this.debounceCalcForm(this.form_orderaset)
+        },
+        changeTypeTaxDiskon(type) {
+            let form = this.form_orderaset
+            switch (type) {
+                case 'tax':
+                    form.valuepajak = 0
+                    break;
+                case 'diskon':
+                    form.valuediskon = 0
+                    break;
+                case 'kontrak':
+                    
+                    break;            
+                default:
+                    break;
+            }
+            this.calculateFormSummary(form)
+        },
+        addItemRequest() {
+            this.$store.dispatch('common/lookupOrderRequest', 'SR')
+            this.$store.commit('common/update_dialog_add_itemaset', true)
+        },
+        changeDiscountPerItem(name, item) {
+            switch (name) {
+                case 'percent':
+                    item.DiskonType = 'P'
+                    item.DiskonAmount = 0.00
+                    break;
+                case 'absolute':
+                    item.DiskonType = 'R'
+                    item.DiskonAmount = 0.00
+                    break;
+                default:
+                    break;
+            }
+            this.calculateItemSummary(item)
+        },
+        calculateItemSummary(item) {
+            let current = JSON.parse(JSON.stringify(this.item_orderaset))
+            let changed = current.find(ele => ele.M_ItemCode == item.M_ItemCode)
+
+            const newqty = item.detail.reduce((sum, ele) => sum + Number(ele.RequestQty), 0)
+
+            let itemprice = this.parseCurrency(changed.SupplierPrice)
+            let currentdiskon = 0
+            if (item.DiskonType == 'R') {
+                currentdiskon = this.parseCurrency(changed.DiskonAmount)
+            }
+
+            if (item.DiskonType == 'P' && Number(changed.DiskonAmount) > 0) {
+                let percent = Number(changed.DiskonAmount)
+                currentdiskon = itemprice * percent / 100
+            }
+
+            changed.RequestQty = newqty
+            changed.EndPrice = itemprice - currentdiskon
+            changed.TempTotal = changed.EndPrice * changed.RequestQty
+
+            this.item_orderaset = current
+
+            /* update footer summary */ 
+            let summary = JSON.parse(JSON.stringify(this.summary_orderaset))
+            const subtotal = current.reduce((sum, acc) => sum + Number(acc.TempTotal), 0)
+            summary.subtotal = subtotal
+            this.summary_orderaset = summary
+
+            this.calculateFormSummary(this.form_orderaset)
+        },
+        calculateFormSummary(form) {
+            let summary = JSON.parse(JSON.stringify(this.summary_orderaset))
+
+            /* calculate diskon value */ 
+            let valuediskon = this.parseCurrency(form.valuediskon)
+            if (form.typediskon == 'percent' && valuediskon > 0) {
+                let percent = valuediskon
+                let value = (summary.subtotal * percent) / 100
+                summary.diskon = value
+            } else {
+                let absolute = valuediskon
+                summary.diskon = absolute
+            }
+
+            /* calculate tax value */ 
+            let valuepajak = this.parseCurrency(form.valuepajak)
+            if (form.typepajak == 'percent' && valuepajak > 0) {
+                let percent = valuepajak
+                let value = (summary.subtotal - summary.diskon) * percent / 100
+                summary.pajak = value
+            } else {
+                let absolute = valuepajak
+                summary.pajak = absolute
+            }
+
+            summary.total = (summary.subtotal - summary.diskon) + summary.pajak
+            this.summary_orderaset = summary
+        },
+        batalOrder() {
+
+        },
+        simpanOrder() {
+
+        }
+    },
+    watch: {
+        
+    },
+    created() {
+        this.debounceCalcForm = _.debounce((form) => {
+            this.calculateFormSummary(form)
+        }, 500)
+        this.debounceCalcItem = _.debounce((item) => {
+            this.calculateItemSummary(item)
+        }, 500)
+    },
+    destroyed() {
+        this.debounceCalcItem = null
+        this.debounceCalcForm = null
+    },
+}
+</script>
--- a/test/vuex/acc-one-po-asset/components/main-layout.vue
+++ b/test/vuex/acc-one-po-asset/components/main-layout.vue
@@ -56,7 +56,7 @@
                            Rp. {{ formatCurrency(props.item.PurchaseOrderGrandTotal) }}
                        </td>
                        <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderStatus }}</td>
-                        <td class="text-xs-center pa-2">
+                        <td class="text-xs-center pa-2" style="white-space: nowrap;">
                            <div v-show="props.item.PurchaseOrderStatus == 'Draft'">
                                <v-tooltip bottom>
                                    <template v-slot:activator="{ on }">
@@ -114,6 +114,15 @@
                                    </template>
                                        <span>Detail PO</span>
                                </v-tooltip>
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="primary" dark v-on="on" @click="printout(props.item)"
+                                        small style="min-width: 40px; margin: 0;">
+                                            <v-icon small>print</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Cetak PDF</span>
+                                </v-tooltip>
                            </div>
                        </td>
                    </tr>
@@ -133,6 +142,14 @@
        <dialog-add-attchment></dialog-add-attchment>
        <dialog-delete-order></dialog-delete-order>
        <dialog-create-order></dialog-create-order>
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>
    </div>
 </template>

@@ -145,6 +162,10 @@ module.exports = {
    },
    data() {
        return {
+            urlprint: "",
+            printtitle: "",
+            printwidth: "60%",
+            openprint: false,
            menuStartdateFilter: false,
            menuEnddateFilter: false,
            headers: [
@@ -187,6 +208,7 @@ module.exports = {
        'dialog-add-attchment': httpVueLoader('./dialog-add-attachment.vue'),
        'dialog-delete-order': httpVueLoader('./dialog-delete-order.vue'),
        'dialog-create-order': httpVueLoader('./dialog-create-order.vue'),
+        'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue'),
    },
    computed: {
        snackbar: {
@@ -289,6 +311,15 @@ module.exports = {
        viewDetailPO(item) {
            this.$store.commit("common/update_viewonlymode", true);
            this.$store.dispatch("kontrakAsset/getDetailDataPO", item.PurchaseOrderID);
+        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_purchase_order_asset/pdf?id=" + val.PurchaseOrderID + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
        }
    },
    watch: {
--- a/test/vuex/acc-one-po-asset/modules/poasset.js
+++ b/test/vuex/acc-one-po-asset/modules/poasset.js
@@ -0,0 +1,179 @@
+import * as api from '../api/api.js';
+
+export default {
+    namespaced: true,
+    state: {
+        /* common */
+        snackbar: {
+            color: 'success',
+            msg: '',
+            state: false
+        },
+        loading_process: false,
+        selected_orderaset: {},
+
+        /* main layout */
+        filterpo: {
+            startdate: moment(new Date()).format('YYYY-MM-DD'),
+            enddate: moment(new Date()).format('YYYY-MM-DD'),
+            status: 'All',
+            search: ''
+        },
+        list_status: ['All', 'Draft', 'Pending', 'Approved', 'Rejected', 'Completed'],
+        list_asetpo: {
+            records: [],
+            total: 0
+        },
+        currpage: 1,
+
+        /* form order aset */
+        dialog_form_orderaset: false,
+        list_supplier: [],
+        list_branch: [],
+        form_orderaset: {
+            podate: moment(new Date()).format('YYYY-MM-DD'),
+            supplierID: "",
+            reference: "",
+            branchcode: "",
+            typepajak: "persen",
+            valuepajak: 0,
+            typediskon: "persen",
+            valuediskon: 0
+        },
+        item_orderaset: [],
+        summary_orderaset: {
+            subtotal: 0,
+            diskon: 0,
+            pajak: 0,
+            total: 0
+        },
+
+        dialog_add_itemaset: false,
+        list_requestaset: {
+            records: [],
+            total: 0
+        },
+
+        /* delete order */
+        dialog_deleteorder: false,
+
+        /* attachment */
+        dialog_attachment: false,
+        prview_attachment: [],
+
+    },
+    mutations: {
+        /* common */
+        update_snackbar(state, val) {
+            state.snackbar = val
+        },
+        update_loading_process(state, val) {
+            state.loading_process = val
+        },
+        update_selected_orderaset(state, val) {
+            state.selected_orderaset = val
+        },
+
+        /* main layout */
+        update_filterpo(state, val) {
+            state.filterpo = val
+        },
+        update_list_status(state, val) {
+            state.list_status = val
+        },
+        update_list_asetpo(state, val) {
+            state.list_asetpo = val
+        },
+        update_currpage(state, val) {
+            state.currpage = val
+        },
+
+        /* form order aset */
+        update_dialog_form_orderaset(state, val) {
+            state.dialog_form_orderaset = val
+        },
+        update_list_supplier(state, val) {
+            state.list_supplier = val
+        },
+        update_list_branch(state, val) {
+            state.list_branch = val
+        },
+        update_form_orderaset(state, val) {
+            state.form_orderaset = val
+        },
+        update_item_orderaset(state, val) {
+            state.item_orderaset = val
+        },
+        update_summary_orderaset(state, val) {
+            state.summary_orderaset = val
+        },
+        update_dialog_add_itemaset(state, val) {
+            state.dialog_add_itemaset = val
+        },
+        update_list_requestaset(state, val) {
+            state.list_requestaset = val
+        },
+
+        /* delete order */
+        update_dialog_deleteorder(state, val) {
+            state.dialog_deleteorder = val
+        },
+
+        /* attachment */
+        update_dialog_attachment(state, val) {
+            state.dialog_attachment = val
+        },
+        update_prview_attachment(state, val) {
+            state.prview_attachment = val
+        }
+    },
+    actions: {
+        async lookupVendor(context) {
+            try {
+                const resp = await api.getListSupplier({token: one_token()});
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                } else {
+                    context.commit('update_list_supplier', resp.data)
+                }
+            } catch (error) {
+                let snac = {color: 'error', msg: error.message, state: true}
+                context.commit('update_snackbar', snac)
+            }
+        },
+        async lookupCabang(context) {
+            try {
+                const resp = await api.getListCabang({token: one_token()});
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_list_branch', resp.data)
+            } catch (error) {
+                let snac = {color: 'error', msg: error.message, state: true}
+                context.commit('update_snackbar', snac)
+            }
+        },
+        async lookupOrderRequest(context, keyword) {
+            try {
+                const form = context.state.form_orderaset
+                let param = {
+                    token: one_token(),
+                    branchcode: form.branchcode,
+                    search: keyword,
+                    currpage: 1,
+                    supplierID: form.supplierID
+                }
+                const resp = await api.searchRequestAset(param)
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_list_requestaset', resp.data)
+            } catch (error) {
+                let snac = {color: 'error', msg: error.message, state: true}
+                context.commit('update_snackbar', snac)
+            }
+        }
+    }
+}
--- a/test/vuex/acc-one-po-jasa/components/layoutPoJasa.vue
+++ b/test/vuex/acc-one-po-jasa/components/layoutPoJasa.vue
@@ -77,7 +77,7 @@
                    Rp. {{ formatCurrency(props.item.PurchaseOrderGrandTotal) }}
                </td>
                <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderStatus }}</td>
-                <td class="text-xs-center pa-2">
+                <td class="text-xs-center pa-2" style="white-space: nowrap;">
                    <div v-show="props.item.PurchaseOrderStatus == 'Draft'">
                        <v-tooltip bottom>
                            <template v-slot:activator="{ on }">
@@ -141,6 +141,18 @@
                            </template>
                            <span>Detail PO</span>
                        </v-tooltip>
+                        <v-tooltip bottom>
+                            <template v-slot:activator="{ on }">
+                                <v-btn
+                                    color="primary" dark v-on="on" small 
+                                    @click="printout(props.item)" 
+                                    style="min-width: 40px; margin: 0;"
+                                >
+                                    <v-icon small>print</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Cetak PDF</span>
+                        </v-tooltip>
                    </div>
                </td>
            </tr>
@@ -163,6 +175,14 @@
    <dialog-jasa-delete></dialog-jasa-delete>
    <dialog-jasa-attach></dialog-jasa-attach>
    <dialog-view-jasa></dialog-view-jasa>
+    <one-dialog-print
+        :title="printtitle"
+        :width="printwidth"
+        :height="600"
+        :status="openprint"
+        :urlprint="urlprint"
+        @close-dialog-print="openprint = false"
+    ></one-dialog-print>
 </div>
 </template>

@@ -175,6 +195,7 @@ module.exports = {
        'dialog-jasa-delete': httpVueLoader('./dialogDeletePoJasa.vue'),
        'dialog-jasa-attach': httpVueLoader('./dialogAddAttachment.vue'),
        'dialog-view-jasa': httpVueLoader('./dialogViewPoJasa.vue'),
+        'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue'),
    },
    mounted() {
        this.$store.dispatch("poservice/lookupVendor")
@@ -183,6 +204,10 @@ module.exports = {
    },
    data() {
        return {
+            urlprint: "",
+            printtitle: "",
+            printwidth: "60%",
+            openprint: false,
            menuStartdateFilter: false,
            menuEnddateFilter: false,
            headers: [
@@ -311,6 +336,15 @@ module.exports = {
        viewPO(item) {
            this.$store.dispatch("poservice/lookupDataPOJasa", item.PurchaseOrderID)
            this.$store.commit("poservice/update_dialog_viewpo", true);
+        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_purchase_order_jasa/pdf?id=" + val.PurchaseOrderID + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
        }
    },
    watch: {
--- a/test/vuex/acc-one-purchase-request-direct-approved/components/listingRequest.vue
+++ b/test/vuex/acc-one-purchase-request-direct-approved/components/listingRequest.vue
@@ -111,20 +111,29 @@
                                    {{ props.item.PurchaseRequestDirectStatus }}
                                </v-chip>
                            </td>
-                            <td class="text-xs-center pa-2">
+                            <td class="text-xs-center pa-2" style="white-space: nowrap;">
                                <div v-if="props.item.PurchaseRequestDirectStatus != 'Draft'">
                                    <v-btn
                                        v-if="props.item.PurchaseRequestDirectStatus == 'Pending'"
                                        small color="black" title="Edit" @click="{}"
+                                        style="min-width: 25px; height: 25px; margin: 0;"
                                    >
                                        <v-icon small color="white">edit</v-icon>
                                    </v-btn>
                                    <v-btn
                                        v-if="['Approved', 'Paid', 'Completed'].includes(props.item.PurchaseRequestDirectStatus)"
                                        small color="blue" title="Detail"
+                                        style="min-width: 25px; height: 25px; margin: 0;"
                                    >
                                        <v-icon small color="white">visibility</v-icon>
                                    </v-btn>
+                                    <v-btn
+                                        v-if="['Approved', 'Paid', 'Completed'].includes(props.item.PurchaseRequestDirectStatus)"
+                                        small color="primary" title="Cetak PDF" @click="printout(props.item)"
+                                        style="min-width: 25px; height: 25px; margin: 0;"
+                                    >
+                                        <v-icon small color="white">print</v-icon>
+                                    </v-btn>
                                </div>
                            </td>
                        </tr>
@@ -325,6 +334,16 @@
            <one-dialog-info :status="opendialoginfo" :msg="msginfo"
            @close-dialog-info="opendialoginfo = false"></one-dialog-info>
        </template>
+
+        <!-- dialog print -->
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>
    </v-layout>
 </div>
 </template>
@@ -349,9 +368,14 @@ module.exports = {
        "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
        "one-dialog-attachment": httpVueLoader("./formDialogAttachtment.vue"),
        "one-dialog-edit-req": httpVueLoader("./formEditRequest.vue"),
+        "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
    },
    data() {
        return {
+            urlprint: "",
+            printtitle: "",
+            printwidth: "60%",
+            openprint: false,
            msgAlertDeleteOrReject: "",
            dialogAlertRejectRequest: false,
            dialogAlertDeleteDetail: false,
@@ -376,7 +400,7 @@ module.exports = {
                },
                {
                    text: "TOTAL", align: "left", sortable: false,
-                    value: "description", width: "20%", class: "blue lighten-3 white--text",
+                    value: "description", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "STATUS", align: "center", sortable: false,
@@ -384,7 +408,7 @@ module.exports = {
                },
                {
                    text: "AKSI", align: "center", sortable: false,
-                    value: "action", width: "10%", class: "blue lighten-3 white--text",
+                    value: "action", width: "15%", class: "blue lighten-3 white--text",
                },
            ],
            detail_headers: [
@@ -742,6 +766,15 @@ module.exports = {
                })
            }
            this.dialogAlertUnapprove = false;
+        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_pr_direct_approval/pdf?id=" + val.PurchaseRequestDirectID + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
        }
    },
 }
--- a/test/vuex/acc-one-purchase-request-direct/components/requestListing.vue
+++ b/test/vuex/acc-one-purchase-request-direct/components/requestListing.vue
@@ -204,6 +204,7 @@
                  >
                    <td
                      class="text-xs-center pa-2"
+                      style="white-space: nowrap;"
                      v-bind:class="{
                        'amber lighten-4': isSelected(props.item),
                      }"
@@ -229,10 +230,20 @@
                  <template v-else>
                    <td
                      class="text-xs-center pa-2"
+                      style="white-space: nowrap;"
                      v-bind:class="{
                        'amber lighten-4': isSelected(props.item),
                      }"
-                    ></td>
+                    >
+                      <v-btn
+                        style="min-width: 25px; height: 25px; margin: 0;"
+                        @click="printout(props.item)"
+                        small title="Cetak PDF"
+                        color="primary"
+                      >
+                        <v-icon small color="white">print</v-icon>
+                      </v-btn>
+                    </td>
                  </template>
                </template>
              </v-data-table>
@@ -559,6 +570,14 @@
    <!-- <add-request-detail-dialog></add-request-detail-dialog> -->
    <form-add-request-detail-dialog></form-add-request-detail-dialog>
    <one-dialog-attachment></one-dialog-attachment>
+    <one-dialog-print
+      :title="printtitle"
+      :width="printwidth"
+      :height="600"
+      :status="openprint"
+      :urlprint="urlprint"
+      @close-dialog-print="openprint = false"
+    ></one-dialog-print>

    <!-- <one-dialog-alert
      :status="dialogAlertDeleteRequest"
@@ -606,9 +625,14 @@ module.exports = {
    "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
    "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
    "one-dialog-attachment": httpVueLoader("./formDialogAttachtment.vue"),
+    "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
  },
  data() {
    return {
+      urlprint: "",
+      printtitle: "",
+      printwidth: "60%",
+      openprint: false,
      msgAlertDeleteRequest: "",
      dialogAlertDeleteRequest: false,
      dialogAlertDeleteDetail: false,
@@ -1109,6 +1133,15 @@ module.exports = {
      this.$store.commit("requester/update_dialog_form", true);
      this.$store.commit("requester/update_cekFile", false);
      this.$store.commit("requester/update_actAttach", 'preview');
+    },
+    printout(val) {
+      this.printwidth = "60%";
+      this.printtitle = "";
+      let user = one_user();
+      let username = user && user.M_StaffName ? user.M_StaffName : "";
+      let tm = Date.now();
+      this.urlprint = BASE_URL + "/one-api/report/rpt_pr_direct/pdf?id=" + val.PurchaseRequestDirectID + "&username=" + username + "&tm=" + tm;
+      this.openprint = true;
    }
  },
 };
--- a/test/vuex/acc-one-purchase-request-nonpersediaan/components/requestListing.vue
+++ b/test/vuex/acc-one-purchase-request-nonpersediaan/components/requestListing.vue
@@ -101,32 +101,78 @@
                                    </td>

                                    <template v-if="props.item.prStatus == 'Draft'">
-                                        <td class="text-xs-center pa-2 pr-5" v-bind:class="{
+                                        <td class="text-xs-center pa-2" style="white-space: nowrap;" v-bind:class="{
                                            'amber lighten-4': isSelected(props.item),
                                        }">
-                                            <v-icon small @click="editRequest(props.item)">edit</v-icon>
-                                            <v-icon small @click="deleteRequest(props.item)">delete</v-icon>
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click="editRequest(props.item)"
+                                                small title="Edit"
+                                                color="black"
+                                            >
+                                                <v-icon small color="white">edit</v-icon>
+                                            </v-btn>
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click="deleteRequest(props.item)"
+                                                small title="Hapus"
+                                                color="red"
+                                            >
+                                                <v-icon small color="white">delete</v-icon>
+                                            </v-btn>
                                        </td>
                                    </template>
                                    <template v-else-if="props.item.prStatus == 'Pending'">
-                                        <td class="text-xs-center pa-2 pr-5" v-bind:class="{
+                                        <td class="text-xs-center pa-2" style="white-space: nowrap;" v-bind:class="{
                                            'amber lighten-4': isSelected(props.item),
                                        }">
-                                            <v-icon small @click="previewRequest(props.item)">receipt</v-icon>
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click="previewRequest(props.item)"
+                                                small title="Preview Request"
+                                                color="blue"
+                                            >
+                                                <v-icon small color="white">receipt</v-icon>
+                                            </v-btn>
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click="printout(props.item)"
+                                                small title="Cetak PDF"
+                                                color="primary"
+                                            >
+                                                <v-icon small color="white">print</v-icon>
+                                            </v-btn>
                                        </td>
                                    </template>
                                    <template v-else-if="hasHandover(props.item.itemHandedOver)">
-                                        <td class="text-xs-center pa-2 pr-5"
+                                        <td class="text-xs-center pa-2" style="white-space: nowrap;"
                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item), }">
                                            <v-btn color="success" prepend-icon="mdi-check-circle"
                                                @click="confirmHandover(props.item)">
                                                Konfirmasi Terima
                                            </v-btn>
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click="printout(props.item)"
+                                                small title="Cetak PDF"
+                                                color="primary"
+                                            >
+                                                <v-icon small color="white">print</v-icon>
+                                            </v-btn>
                                        </td>
                                    </template>
                                    <template v-else>
-                                        <td class="text-xs-center pa-2 pr-5"
-                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item), }"></td>
+                                        <td class="text-xs-center pa-2" style="white-space: nowrap;"
+                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item), }">
+                                            <v-btn
+                                                style="min-width: 25px; height: 25px; margin: 0;"
+                                                @click="printout(props.item)"
+                                                small title="Cetak PDF"
+                                                color="primary"
+                                            >
+                                                <v-icon small color="white">print</v-icon>
+                                            </v-btn>
+                                        </td>
                                    </template>
                                </template>
                            </v-data-table>
@@ -151,6 +197,15 @@
        <one-dialog-alert :status="dialogAlertDeleteDetail" :msg="msgAlertDeleteRequest"
            @forget-dialog-alert="dialogAlertDeleteDetail = false"
            @close-dialog-alert="closeAndDeleteDetail()"></one-dialog-alert>
+
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>
    </div>
 </template>

@@ -184,9 +239,14 @@ module.exports = {
        "dialog-confirm-handover": httpVueLoader("./dialogConfirmHandover.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,
@@ -225,10 +285,10 @@ module.exports = {
                },
                {
                    text: "AKSI",
-                    align: "left",
+                    align: "center",
                    sortable: false,
                    value: "action",
-                    width: "5%",
+                    width: "15%",
                    class: "blue lighten-3 white--text",
                },
            ],
@@ -692,6 +752,15 @@ module.exports = {
            this.$store.commit("requester/updateSelectedMainTable", item);
            this.$store.commit("requester/updateDialogConfirmHandover", true);
        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_stock_request_np/pdf?id=" + val.prId + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
+        },
    },
 };
 </script>
--- a/test/vuex/acc-one-purchase-request-persediaan/components/requestListing.vue
+++ b/test/vuex/acc-one-purchase-request-persediaan/components/requestListing.vue
@@ -211,29 +211,54 @@
                    v-if="props.item.prStatus == 'Draft'"
                  >
                    <td
-                      class="text-xs-center pa-2 pr-5"
+                      class="text-xs-center pa-2"
+                      style="white-space: nowrap;"
                      v-bind:class="{
                        'amber lighten-4': isSelected(props.item),
                      }"
                    >
-                      <v-icon small @click="editRequest(props.item)"
-                        >edit</v-icon
+                      <v-btn
+                        style="min-width: 25px; height: 25px; margin: 0;"
+                        @click="editRequest(props.item)"
+                        small title="Edit"
+                        color="black"
                      >
-                      <v-icon small @click="deleteRequest(props.item)"
-                        >delete</v-icon
+                        <v-icon small color="white">edit</v-icon>
+                      </v-btn>
+                      <v-btn
+                        style="min-width: 25px; height: 25px; margin: 0;"
+                        @click="deleteRequest(props.item)"
+                        small title="Hapus"
+                        color="red"
                      >
+                        <v-icon small color="white">delete</v-icon>
+                      </v-btn>
                    </td>
                  </template>
                  <template v-else>
                    <td
-                      class="text-xs-center pa-2 pr-5"
+                      class="text-xs-center pa-2"
+                      style="white-space: nowrap;"
                      v-bind:class="{
                        'amber lighten-4': isSelected(props.item),
                      }"
                    >
-                      <v-icon small @click="previewRequest(props.item)"
-                        >receipt</v-icon
+                      <v-btn
+                        style="min-width: 25px; height: 25px; margin: 0;"
+                        @click="previewRequest(props.item)"
+                        small title="Preview Request"
+                        color="blue"
                      >
+                        <v-icon small color="white">receipt</v-icon>
+                      </v-btn>
+                      <v-btn
+                        style="min-width: 25px; height: 25px; margin: 0;"
+                        @click="printout(props.item)"
+                        small title="Cetak PDF"
+                        color="primary"
+                      >
+                        <v-icon small color="white">print</v-icon>
+                      </v-btn>
                    </td>
                  </template>
                </template>
@@ -254,6 +279,14 @@
    <add-purchase-request-dialog></add-purchase-request-dialog>
    <add-request-detail-dialog></add-request-detail-dialog>
    <riwayat-dialog></riwayat-dialog>
+    <one-dialog-print
+      :title="printtitle"
+      :width="printwidth"
+      :height="600"
+      :status="openprint"
+      :urlprint="urlprint"
+      @close-dialog-print="openprint = false"
+    ></one-dialog-print>

    <one-dialog-alert
      :status="dialogAlertDeleteRequest"
@@ -300,9 +333,14 @@ module.exports = {
    "riwayat-dialog": httpVueLoader("./dialogRiwayat.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,
@@ -344,7 +382,7 @@ module.exports = {
          align: "center",
          sortable: false,
          value: "action",
-          width: "10%",
+          width: "15%",
          class: "blue lighten-3 white--text",
        },
      ],
@@ -788,6 +826,15 @@ module.exports = {
        });
      }
    },
+    printout(val) {
+      this.printwidth = "60%";
+      this.printtitle = "";
+      let user = one_user();
+      let username = user && user.M_StaffName ? user.M_StaffName : "";
+      let tm = Date.now();
+      this.urlprint = BASE_URL + "/one-api/report/rpt_stock_request/pdf?id=" + val.prId + "&username=" + username + "&tm=" + tm;
+      this.openprint = true;
+    },
  },
 };
 </script>
--- a/test/vuex/acc-one-receive-item-po-inventaris/components/oneRoLayout.vue
+++ b/test/vuex/acc-one-receive-item-po-inventaris/components/oneRoLayout.vue
@@ -83,7 +83,7 @@
                                    BELUM KONFIRMASI
                                </v-chip>
                            </td>
-                            <td class="text-xs-center">
+                            <td class="text-xs-center" style="white-space: nowrap;">
                                <div v-show="props.item.ReceiveOrderPoConfirmed === 'N'">
                                    <v-tooltip bottom>
                                        <template v-slot:activator="{ on }">
@@ -183,6 +183,17 @@
                                        </template>
                                        <span>Lihat detail</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"
+                                            >
+                                                <v-icon small color="white" v-on="on">print</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Cetak PDF</span>
+                                    </v-tooltip>
                                    <span v-show="props.item.ReceiveOrderPoIsHandover === 'N'">
                                        <v-tooltip bottom>
                                            <template v-slot:activator="{ on }">
@@ -219,6 +230,14 @@
        <one-dialog-ro-handover></one-dialog-ro-handover>
        <one-dialog-form-document></one-dialog-form-document>
        <one-dialog-print-barcode></one-dialog-print-barcode>
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>

        <!-- snackbar -->
        <v-snackbar
@@ -244,12 +263,17 @@ module.exports = {
        'one-dialog-ro-handover': httpVueLoader('./dialogHandOver.vue'),
        'one-dialog-form-document': httpVueLoader('./formDialogDocument.vue'),
        'one-dialog-print-barcode': httpVueLoader('./dialogPrintBarcode.vue'),
+        'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue'),
    },
    mounted() {
        this.$store.dispatch("ro/search")
    },
    data() {
        return {
+            urlprint: "",
+            printtitle: "",
+            printwidth: "60%",
+            openprint: false,
            menuStartDateFilter: false,
            menuEndDateFilter: false,
            headers: [
@@ -283,7 +307,7 @@ module.exports = {
                },
                {
                    text: "AKSI", align: "center", sortable: false, value: "act",
-                    width: "10%", class: "pa-2 text-center  blue lighten-3 white--text",
+                    width: "15%", class: "pa-2 text-center  blue lighten-3 white--text",
                },
            ]
        }
@@ -411,6 +435,15 @@ module.exports = {
            this.$store.commit("ro/update_indeterminatex", false);
            this.$store.commit("ro/update_selected_barcode", []);
            this.$store.dispatch("ro/getBarcodes");
+        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_receive_item_po_inventaris/pdf?id=" + val.ReceiveOrderPoID + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
        }
    },
    watch: {
--- a/test/vuex/acc-one-receive-item-po-v2/components/oneRoLayout.vue
+++ b/test/vuex/acc-one-receive-item-po-v2/components/oneRoLayout.vue
@@ -83,7 +83,7 @@
                                    BELUM KONFIRMASI
                                </v-chip>
                            </td>
-                            <td class="text-xs-center">
+                            <td class="text-xs-center" style="white-space: nowrap;">
                                <div v-show="props.item.ReceiveOrderPoConfirmed === 'N'">
                                    <v-tooltip bottom>
                                        <template v-slot:activator="{ on }">
@@ -131,6 +131,17 @@
                                        </template>
                                        <span>Lihat detail</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"
+                                            >
+                                                <v-icon small color="white" v-on="on">print</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Cetak PDF</span>
+                                    </v-tooltip>
                                </div>
                            </td>
                        </tr>
@@ -151,6 +162,14 @@
        <one-dialog-item-batch></one-dialog-item-batch>
        <one-dialog-ro-layout></one-dialog-ro-layout>
        <one-dialog-ro-view></one-dialog-ro-view>
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>

        <!-- snackbar -->
        <v-snackbar
@@ -173,12 +192,17 @@ module.exports = {
        'one-dialog-item-batch': httpVueLoader('./dialogBatchItem.vue'),
        'one-dialog-ro-layout': httpVueLoader('./dialogRoLayout.vue'),
        'one-dialog-ro-view': httpVueLoader('./dialogViewRO.vue'),
+        'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue'),
    },
    mounted() {
        this.$store.dispatch("ro/search")
    },
    data() {
        return {
+            urlprint: "",
+            printtitle: "",
+            printwidth: "60%",
+            openprint: false,
            menuStartDateFilter: false,
            menuEndDateFilter: false,
            headers: [
@@ -212,7 +236,7 @@ module.exports = {
                },
                {
                    text: "AKSI", align: "center", sortable: false, value: "act",
-                    width: "10%", class: "pa-2 text-center  blue lighten-3 white--text",
+                    width: "15%", class: "pa-2 text-center  blue lighten-3 white--text",
                },
            ]
        }
@@ -293,6 +317,15 @@ module.exports = {
            this.$store.dispatch("ro/getWarehouse");
            this.$store.dispatch("ro/getItemUpdate");
            this.$store.commit("form/update_dialog_form_receive_item_edit", true);
+        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_receive_item_po/pdf?id=" + val.ReceiveOrderPoID + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
        }
    },
    watch: {
--- a/test/vuex/acc-one-receive-jasa/components/one-layout.vue
+++ b/test/vuex/acc-one-receive-jasa/components/one-layout.vue
@@ -92,7 +92,7 @@
                    </div>

                </td>
-                <td class="text-xs-center pa-2">
+                <td class="text-xs-center pa-2" style="white-space: nowrap;">
                    <div v-show="props.item.ReceiveOrderPoConfirmed != 'Y'">
                        <v-tooltip bottom pr-2>
                            <template v-slot:activator="{ on }">
@@ -151,7 +151,7 @@
                            </template>
                            <span>Detail Order</span>
                        </v-tooltip>
-                        <v-tooltip bottom>
+                        <v-tooltip bottom pr-2>
                            <template v-slot:activator="{ on }">
                                <v-btn
                                    color="green" dark @click="addAttachment(props.item)"
@@ -162,6 +162,17 @@
                            </template>
                            <span>View Nota</span>
                        </v-tooltip>
+                        <v-tooltip bottom>
+                            <template v-slot:activator="{ on }">
+                                <v-btn
+                                    color="primary" dark @click="printout(props.item)"
+                                    style="min-width: 40px; margin: 0;" small v-on="on"
+                                >
+                                    <v-icon small>print</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>Cetak PDF</span>
+                        </v-tooltip>
                    </div>
                </td>
            </tr>
@@ -185,6 +196,14 @@
    <dialog-delete-ro></dialog-delete-ro>
    <dialog-confirm-ro></dialog-confirm-ro>
    <dialog-edit-ro></dialog-edit-ro>
+    <one-dialog-print
+        :title="printtitle"
+        :width="printwidth"
+        :height="600"
+        :status="openprint"
+        :urlprint="urlprint"
+        @close-dialog-print="openprint = false"
+    ></one-dialog-print>
 </div>
 </template>

@@ -198,6 +217,7 @@ module.exports = {
        'dialog-delete-ro': httpVueLoader('./dialog-delete-ro.vue'),
        'dialog-confirm-ro': httpVueLoader('./dialog-confirm-ro.vue'),
        'dialog-edit-ro': httpVueLoader('./dialog-edit-ro.vue'),
+        'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue'),
    },
    mounted() {
        this.$store.dispatch('roservice/lookupCabang');
@@ -207,6 +227,10 @@ module.exports = {
    },
    data() {
        return {
+            urlprint: "",
+            printtitle: "",
+            printwidth: "60%",
+            openprint: false,
            menuStartdateFilter: false,
            menuEnddateFilter: false,
            headers: [
@@ -315,6 +339,15 @@ module.exports = {
                this.$store.commit("roservice/update_selected_rojasa", item)
                this.$store.commit("roservice/update_dialog_deletero", true)
            }
+        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_receive_order_jasa/pdf?id=" + val.ReceiveOrderPoID + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
        }
    },
    watch: {
--- a/test/vuex/acc-one-receive-order-asset/components/main-layout.vue
+++ b/test/vuex/acc-one-receive-order-asset/components/main-layout.vue
@@ -68,7 +68,7 @@
                                <v-chip small color="warning" text-color="white">Unconfirmed</v-chip>
                            </div>
                        </td>
-                        <td class="text-xs-center pa-2">
+                        <td class="text-xs-center pa-2" style="white-space: nowrap;">
                            <div v-show="props.item.ReceiveOrderPoConfirmed != 'Y'">
                                <v-tooltip bottom pr-2>
                                    <template v-slot:activator="{ on }">
@@ -132,6 +132,15 @@
                                    </template>
                                    <span>View Document</span>
                                </v-tooltip>
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="primary" dark @click="printout(props.item)"
+                                            style="min-width: 40px; margin: 0;" small v-on="on">
+                                            <v-icon small>print</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Cetak PDF</span>
+                                </v-tooltip>
                            </div>
                        </td>
                    </tr>
@@ -154,6 +163,14 @@
        <dialog-confirm-order-asset></dialog-confirm-order-asset>
        <dialog-pick-contract></dialog-pick-contract>
        <dialog-inspeksi></dialog-inspeksi>
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>
    </div>
 </template>

@@ -166,6 +183,7 @@ module.exports = {
        'dialog-confirm-order-asset': httpVueLoader('./dialog-confirm-receive.vue'),
        'dialog-pick-contract': httpVueLoader('./dialog-pick-contract.vue'),
        'dialog-inspeksi': httpVueLoader('./dialog-inspeksi.vue'),
+        'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue'),
    },
    mounted() {
        this.$store.dispatch("orderAsset/listingCabang");
@@ -174,6 +192,10 @@ module.exports = {
    },
    data() {
        return {
+            urlprint: "",
+            printtitle: "",
+            printwidth: "60%",
+            openprint: false,
            menuStartdateFilter: false,
            menuEnddateFilter: false,
            headers: [
@@ -282,6 +304,15 @@ module.exports = {
        deleteRO(item) {
            this.$store.commit("roasset/update_selected_roasset", item)
            this.$store.commit("roasset/update_dialog_delete", true);
+        },
+        printout(val) {
+            this.printwidth = "60%";
+            this.printtitle = "";
+            let user = one_user();
+            let username = user && user.M_StaffName ? user.M_StaffName : "";
+            let tm = Date.now();
+            this.urlprint = BASE_URL + "/one-api/report/rpt_receive_order_asset/pdf?id=" + val.ReceiveOrderPoID + "&username=" + username + "&tm=" + tm;
+            this.openprint = true;
        }
    },
    watch: {
--- a/test/vuex/acc-one-receive-surat-jalan/components/listing.vue
+++ b/test/vuex/acc-one-receive-surat-jalan/components/listing.vue
@@ -83,6 +83,16 @@
                                {{ props.item.SuratJalanStatus }}
                            </v-chip>
                        </td>
+                        <td class="text-xs-center pa-2" style="white-space: nowrap;">
+                            <v-btn
+                                style="min-width: 25px; height: 25px; margin: 0;"
+                                @click="printout(props.item)"
+                                small title="Cetak PDF"
+                                color="primary"
+                            >
+                                <v-icon small color="white">print</v-icon>
+                            </v-btn>
+                        </td>
                    </tr>
                </template>
            </v-data-table>
@@ -91,11 +101,23 @@
                <v-pagination v-model="paginat" :length="paginat_len" :total-visible="5"></v-pagination>
            </div>
        </v-card>
+
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>
    </v-layout>
 </template>

 <script>
    module.exports = {
+        components: {
+            "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
+        },
        mounted() {
            this.$store.dispatch("suratjalan/LookupBranches")
            this.$store.dispatch("suratjalan/LookupEkpedisi")
@@ -105,6 +127,10 @@
        },
        data() {
            return {
+                urlprint: "",
+                printtitle: "",
+                printwidth: "60%",
+                openprint: false,
                menuStartDate: false,
                menuEndDate: false,
                headers: [
@@ -130,7 +156,11 @@
                    },
                    {
                        text: "STATUS", align: "center", sortable: false,
-                        value: "requestDate", width: "15%", class: "blue lighten-3 white--text",
+                        value: "requestDate", width: "10%", class: "blue lighten-3 white--text",
+                    },
+                    {
+                        text: "AKSI", align: "center", sortable: false,
+                        value: "action", width: "10%", class: "blue lighten-3 white--text",
                    }
                ]
            }
@@ -232,6 +262,15 @@
                    default:
                        return "gray"
                }
+            },
+            printout(val) {
+                this.printwidth = "60%";
+                this.printtitle = "";
+                let user = one_user();
+                let username = user && user.M_StaffName ? user.M_StaffName : "";
+                let tm = Date.now();
+                this.urlprint = BASE_URL + "/one-api/report/rpt_receive_transfer/pdf?id=" + val.SuratJalanID + "&username=" + username + "&tm=" + tm;
+                this.openprint = true;
            }
        },
    }
--- a/test/vuex/acc-one-request-item-out/components/requestListing.vue
+++ b/test/vuex/acc-one-request-item-out/components/requestListing.vue
@@ -220,6 +220,7 @@
              >
                <td
                  class="text-xs-center pa-2"
+                  style="white-space: nowrap;"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                  }"
@@ -247,6 +248,7 @@
              <template v-else-if="props.item.rioStatus == 'Send Request'">
                <td
                  class="text-xs-center pa-2 pr-5"
+                  style="white-space: nowrap;"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                  }"
@@ -277,15 +279,34 @@
                >
                <v-icon color="white" small>receipt</v-icon>
                </v-btn>
+                <v-btn
+                    style="min-width: 25px; height: 25px; margin: 0;"
+                    @click="printout(props.item)"
+                    color="primary"
+                    small title="Cetak PDF"
+                    class="d-block mx-auto mb-2"
+                >
+                <v-icon color="white" small>print</v-icon>
+                </v-btn>
                </td>
              </template>
              <template v-else>
                <td
                  class="text-xs-center pa-2"
+                  style="white-space: nowrap;"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                  }"
-                ></td>
+                >
+                  <v-btn
+                      style="min-width: 25px; height: 25px; margin: 0;"
+                      @click="printout(props.item)"
+                      color="primary"
+                      small title="Cetak PDF"
+                  >
+                  <v-icon color="white" small>print</v-icon>
+                  </v-btn>
+                </td>
              </template>
            </template>
          </v-data-table>
@@ -336,6 +357,14 @@
      </v-card>
    </v-dialog>

+    <one-dialog-print
+        :title="printtitle"
+        :width="printwidth"
+        :height="600"
+        :status="openprint"
+        :urlprint="urlprint"
+        @close-dialog-print="openprint = false"
+    ></one-dialog-print>
  </div>
 </template>

@@ -370,9 +399,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,
@@ -398,7 +432,7 @@ module.exports = {
          align: "left",
          sortable: false,
          value: "keterangan",
-          width: "40%",
+          width: "35%",
          class: "blue lighten-3 white--text",
        },
        {
@@ -414,7 +448,7 @@ module.exports = {
          align: "center",
          sortable: false,
          value: "action",
-          width: "10%",
+          width: "15%",
          class: "blue lighten-3 white--text",
        },
      ],
@@ -907,6 +941,15 @@ module.exports = {
        });
      }
    },
+    printout(val) {
+      this.printwidth = "60%";
+      this.printtitle = "";
+      let user = one_user();
+      let username = user && user.M_StaffName ? user.M_StaffName : "";
+      let tm = Date.now();
+      this.urlprint = BASE_URL + "/one-api/report/rpt_request_pengeluaran_barang/pdf?id=" + val.rioId + "&username=" + username + "&tm=" + tm;
+      this.openprint = true;
+    }
  },
 };
 </script>
--- a/test/vuex/acc-one-surat-jalan/components/listing.vue
+++ b/test/vuex/acc-one-surat-jalan/components/listing.vue
@@ -84,13 +84,24 @@
                                {{ props.item.SuratJalanStatus }}
                            </v-chip>
                        </td>
-                        <td class="text-xs-center pa-2">
-                            <v-icon
-                                small @click="deleteSJ(props.item)" color="red"
+                        <td class="text-xs-center pa-2" style="white-space: nowrap;">
+                            <v-btn
+                                style="min-width: 25px; height: 25px; margin: 0;"
+                                @click="deleteSJ(props.item)"
+                                small title="Hapus"
+                                color="red"
                                :disabled="props.item.SuratJalanStatus != 'Draft'"
                            >
-                                delete
-                            </v-icon>
+                                <v-icon small color="white">delete</v-icon>
+                            </v-btn>
+                            <v-btn
+                                style="min-width: 25px; height: 25px; margin: 0;"
+                                @click="printout(props.item)"
+                                small title="Cetak PDF"
+                                color="primary"
+                            >
+                                <v-icon small color="white">print</v-icon>
+                            </v-btn>
                        </td>
                    </tr>
                </template>
@@ -100,18 +111,33 @@
                <v-pagination v-model="paginat" :length="paginat_len" :total-visible="5"></v-pagination>
            </div>
        </v-card>
+
+        <one-dialog-print
+            :title="printtitle"
+            :width="printwidth"
+            :height="600"
+            :status="openprint"
+            :urlprint="urlprint"
+            @close-dialog-print="openprint = false"
+        ></one-dialog-print>
    </v-layout>
 </template>

 <script>
    module.exports = {
-        components: {},
+        components: {
+            "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
+        },
        mounted() {
            this.$store.dispatch("suratjalan/getBranches");
            this.$store.dispatch("suratjalan/listingSuratJalan");
        },
        data() {
            return {
+                urlprint: "",
+                printtitle: "",
+                printwidth: "60%",
+                openprint: false,
                menuStartDate: false,
                menuEndDate: false,
                headers: [
@@ -287,6 +313,15 @@
            },
            newForm() {
                this.$store.dispatch("suratjalan/newForm")
+            },
+            printout(val) {
+                this.printwidth = "60%";
+                this.printtitle = "";
+                let user = one_user();
+                let username = user && user.M_StaffName ? user.M_StaffName : "";
+                let tm = Date.now();
+                this.urlprint = BASE_URL + "/one-api/report/rpt_surat_jalan/pdf?id=" + val.SuratJalanID + "&username=" + username + "&tm=" + tm;
+                this.openprint = true;
            }
        },
        watch: {
Author	SHA1	Message	Date
sasadib	a38e9b1d38	Merge remote-tracking branch 'origin/feat-add-report' into develop	2026-07-22 08:33:52 +07:00
Hanan Askarim	5370d08529	add button report request barang	2026-07-21 11:43:58 +07:00
Hanan Askarim	3a875230eb	add button report pengeluaran barang	2026-07-21 11:14:53 +07:00
Hanan Askarim	7491892aea	add button report pemakaian item per divisi	2026-07-21 11:07:39 +07:00
Hanan Askarim	2bbebe20fe	add button report request mutasi	2026-07-21 10:40:41 +07:00
Hanan Askarim	6c69ab1d6b	add button report penyerahan mutasi	2026-07-21 10:32:52 +07:00
Hanan Askarim	984049cb01	add button report penerimaan mutasi	2026-07-21 10:25:08 +07:00
Hanan Askarim	33a5e07566	add button report faktur	2026-07-21 10:09:02 +07:00
Hanan Askarim	90602d4aa7	add button report payment voucher	2026-07-21 09:52:01 +07:00
Hanan Askarim	927d009c15	add button report receive order asset	2026-07-21 09:43:00 +07:00
Hanan Askarim	ba320134f8	add button report po asset	2026-07-21 09:21:31 +07:00
Hanan Askarim	5d0351d2a5	add button report receive po jasa	2026-07-21 09:12:43 +07:00
Hanan Askarim	bee1396917	add button report po jasa	2026-07-21 09:05:39 +07:00
Hanan Askarim	b8a7f777cc	add button report receive item po inventaris	2026-07-21 08:57:48 +07:00
Hanan Askarim	b867fca7b7	add button report receive item po	2026-07-21 08:38:19 +07:00
Hanan Askarim	8cc82e79d1	add button report receive surat jalan	2026-07-20 16:56:32 +07:00
Hanan Askarim	10719f2efe	add button report surat jalan	2026-07-20 16:50:12 +07:00
Hanan Askarim	e0536e554d	add button report pr non persediaan	2026-07-20 16:42:49 +07:00
Hanan Askarim	4c7ef4dce7	add request stock button report	2026-07-20 16:26:51 +07:00
Hanan Askarim	1ffe6ad384	add button report purchase request direct approval	2026-07-20 16:14:56 +07:00
Hanan Askarim	79c5cb513a	add button report purchase request direct	2026-07-20 15:59:00 +07:00