From 0c8848c18ada9923395e5d44c1ef24b48fa437d8 Mon Sep 17 00:00:00 2001
From: sasadib <adib@sismedika.com>
Date: Wed, 22 Jul 2026 11:42:50 +0700
Subject: [PATCH] feature: serah terima & print barcode

---
 .../acc-one-receive-order-asset/api/api.js    |  16 ++
 .../components/dialog-handover-asset.vue      | 160 ++++++++++++++++++
 .../components/dialog-receive-order-asset.vue |  64 +++----
 .../components/dialog-view-barcode.vue        | 141 +++++++++++++++
 .../components/main-layout.vue                |  68 +++++---
 .../acc-one-receive-order-asset/index.php     |   4 +-
 .../modules/order-asset.js                    |   4 +-
 .../modules/roasset.js                        |  98 ++++++++++-
 8 files changed, 491 insertions(+), 64 deletions(-)
 create mode 100644 test/vuex/acc-one-receive-order-asset/components/dialog-handover-asset.vue
 create mode 100644 test/vuex/acc-one-receive-order-asset/components/dialog-view-barcode.vue

diff --git a/test/vuex/acc-one-receive-order-asset/api/api.js b/test/vuex/acc-one-receive-order-asset/api/api.js
index 56f146c..a56ad58 100644
--- a/test/vuex/acc-one-receive-order-asset/api/api.js
+++ b/test/vuex/acc-one-receive-order-asset/api/api.js
@@ -70,3 +70,19 @@ export async function getListAttachment(params) {
 export async function getDetailDataROAsset(params) {
     return request("/getDetailDataROAsset", params)
 }
+
+export async function getRuangan(params) {
+    return request("/getRuangan", params)
+}
+
+export async function getAssetBelumSerahTerima(params) {
+    return request("/getAssetBelumSerahTerima", params)
+}
+
+export async function saveHandover(params) {
+    return request("/saveHandover", params)
+}
+
+export async function getBarcodes(params) {
+    return request("/getBarcodes", params)
+}
diff --git a/test/vuex/acc-one-receive-order-asset/components/dialog-handover-asset.vue b/test/vuex/acc-one-receive-order-asset/components/dialog-handover-asset.vue
new file mode 100644
index 0000000..1cf8953
--- /dev/null
+++ b/test/vuex/acc-one-receive-order-asset/components/dialog-handover-asset.vue
@@ -0,0 +1,160 @@
+<template>
+    <v-dialog v-model="dialog_handover_asset" persistent width="50vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                SERAH TERIMA BARANG ASSET
+            </v-card-title>
+            <v-card-text>
+                <p>Apakah Anda yakin ingin melakukan serah terima barang inventaris kepada user pemohon</p>
+                <v-form ref="formhandover" lazy-validation v-model="valid_formhandover">
+                    <v-data-table :headers="headers" :items="list_item_not_handed" hide-actions class="elevation-1">
+                        <template v-slot:items="props">
+                            <tr>
+                                <td class="text-xs-center">
+                                    <v-checkbox v-if="props.item.isHandoverDone == 'N'" v-model="props.item.checked"
+                                        hide-details @change="onChangeCheckbox(props.item)">
+                                    </v-checkbox>
+                                </td>
+                                <td class="text-xs-center">{{ props.item.M_ItemDesc }}</td>
+                                <td class="text-xs-center">{{ props.item.originalQty }}</td>
+                                <td class="text-xs-center">
+                                    <v-text-field v-if="props.item.checked" v-model="props.item.serahQty" type="number"
+                                        solo :rules="qtyRules(props.item.sisaQty)"></v-text-field>
+                                    <div v-else>
+                                        {{ props.item.serahQty }}
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </v-data-table>
+                    <v-layout row mt-2>
+                        <v-flex xs6 pr-1>
+                            <v-autocomplete v-model="selected_ruangan" :items="list_lokasi" label="Lokasi Penerima*"
+                                :rules="ruang_rules" outline item-value="M_RuanganID"
+                                item-text="M_RuanganName"></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs6 pl-1>
+                            <v-autocomplete label="Staff Penerima*" outline :rules="rules_staff"
+                                v-model="selected_staff" :items="list_staff" item-value="M_UserID"
+                                item-text="M_UserUsername"></v-autocomplete>
+                        </v-flex>
+                    </v-layout>
+                </v-form>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red" flat outline @click="closeHandOver()">Batal</v-btn>
+                <v-btn color="green" flat outline @click="simpanHandOver()">Ya, Serahkan Barang</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            selected_ruangan: 0,
+            selected_staff: 0,
+            valid_formhandover: true,
+            ruang_rules: [v => (v && Object.keys(v).length > 0) || 'Lokasi ruangan harus diisi'],
+            rules_staff: [v => (v && Object.keys(v).length > 0) || 'Staff harus diisi'],
+            headers: [
+                {
+                    text: "", align: "center", sortable: false, value: "checked",
+                    width: "10%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false, value: "itemname",
+                    width: "50%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY DITERIMA", align: "center", sortable: false, value: "qtyitem",
+                    width: "20%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY HANDOVER", align: "center", sortable: false, value: "qtysend",
+                    width: "20%", class: "pa-2 blue lighten-3 white--text",
+                },
+            ],
+        }
+    },
+    computed: {
+        dialog_handover_asset: {
+            get() {
+                return this.$store.state.roasset.dialog_handover_asset;
+            },
+            set(val) {
+                this.$store.commit("roasset/update_dialog_handover_asset", val)
+            }
+        },
+        selected_roasset: {
+            get() {
+                return this.$store.state.roasset.selected_roasset
+            },
+            set(val) {
+                this.$store.commit("roasset/update_selected_roasset", val)
+            }
+        },
+        list_item_not_handed: {
+            get() {
+                return this.$store.state.roasset.list_item_not_handed;
+            },
+            set(val) {
+                this.$store.commit("roasset/update_list_item_not_handed", val)
+            }
+        },
+        list_staff() {
+            return this.$store.state.orderAsset.list_staff;
+        },
+        list_lokasi() {
+            return this.$store.state.roasset.list_lokasi;
+        }
+    },
+    methods: {
+        onChangeCheckbox(item) {
+            if (item.checked) {
+                item.serahQty = item.sisaQty
+            } else {
+                item.serahQty = item.originalQty - item.sisaQty
+            }
+        },
+        qtyRules(originalQty) {
+            return [
+                v => Number(v) > 0 || "Jumlah harus diatas 0",
+                v => Number(v) <= Number(originalQty) || "Jumlah melebihi inventaris yang diterima"
+            ];
+        },
+        closeHandOver() {
+            this.selected_roasset = {};
+            this.selected_staff = 0;
+            this.selected_ruangan = 0;
+            this.$refs.formhandover.resetValidation();
+            this.dialog_handover_asset = false;
+        },
+        async simpanHandOver() {
+            if (this.$refs.formhandover.validate()) {
+                let checked = this.list_item_not_handed.filter((ele) => ele.checked);
+                if (checked.length < 1) {
+                    const snac = { color: 'error', msg: 'tidak ada item yg diterima', state: true };
+                    this.$store.commit("roasset/update_snackbar", snac);
+                    return;
+                }
+
+                let param = {
+                    staffID: this.selected_staff,
+                    receiveOrderPoID: this.selected_roasset.ReceiveOrderPoID,
+                    ruanganID: this.selected_ruangan,
+                    item: checked
+                }
+
+                await this.$store.dispatch("roasset/saveHandoverAsset", param);
+                this.selected_staff = 0;
+                this.selected_ruangan = 0;
+                this.$refs.formhandover.resetValidation();
+            }
+        }
+    },
+    watch: {}
+}
+</script>
diff --git a/test/vuex/acc-one-receive-order-asset/components/dialog-receive-order-asset.vue b/test/vuex/acc-one-receive-order-asset/components/dialog-receive-order-asset.vue
index af1a45e..97aedbb 100644
--- a/test/vuex/acc-one-receive-order-asset/components/dialog-receive-order-asset.vue
+++ b/test/vuex/acc-one-receive-order-asset/components/dialog-receive-order-asset.vue
@@ -22,8 +22,7 @@
                     </v-flex>
                     <v-flex xs4 pa-1>
                         <v-text-field hide-details outline placeholder="Nomor Delivery / Supplier Invoice"
-                            v-model="form_receive.reference" label="Referensi" :readonly="readonly_mode"
-                        ></v-text-field>
+                            v-model="form_receive.reference" label="Referensi" :readonly="readonly_mode"></v-text-field>
                     </v-flex>
                 </v-layout>
 
@@ -33,20 +32,14 @@
                             v-model="form_receive.ponumber" readonly></v-text-field>
                     </v-flex>
                     <v-flex xs2 pa-1>
-                        <v-autocomplete
-                            :items="list_cabang" hide-details outline
-                            v-model="form_receive.branchID" label="Cabang"
-                            item-text="M_BranchName" item-value="M_BranchID"
-                            @change="onChangeCabang" :readonly="readonly_mode"
-                        ></v-autocomplete>
+                        <v-autocomplete :items="list_cabang" hide-details outline v-model="form_receive.branchID"
+                            label="Cabang" item-text="M_BranchName" item-value="M_BranchID" @change="onChangeCabang"
+                            :readonly="readonly_mode"></v-autocomplete>
                     </v-flex>
                     <v-flex xs2 pa-1>
-                        <v-autocomplete
-                            :items="list_gudang" hide-details outline
-                            v-model="form_receive.gudangID" label="Gudang"
-                            item-text="WarehouseName" item-value="WarehouseID"
-                            :readonly="readonly_mode"
-                        ></v-autocomplete>
+                        <v-autocomplete :items="list_gudang" hide-details outline v-model="form_receive.gudangID"
+                            label="Gudang" item-text="WarehouseName" item-value="WarehouseID"
+                            :readonly="readonly_mode"></v-autocomplete>
                     </v-flex>
                     <v-flex xs4 pa-1>
                         <v-text-field hide-details outline label="Biaya Pengiriman" placeholder="0"
@@ -60,17 +53,17 @@
                             v-model="form_receive.catatan" :readonly="readonly_mode"></v-textarea>
                     </v-flex>
                     <v-flex xs3 pa-1 mt-1>
-                         <v-btn block color="info" @click="pickKontrakAset()"
-                            :disabled="isFormEmpty()" v-show="!readonly_mode">
+                        <v-btn block color="info" @click="pickKontrakAset()" :disabled="isFormEmpty()"
+                            v-show="!readonly_mode">
                             PILIH ORDER ASSET
                         </v-btn>
                     </v-flex>
                 </v-layout>
 
                 <v-layout row wrap class="mt-3">
-                     <v-flex xs12 v-if="order_received.length > 0">
-                        <v-data-table :headers="headers" :items="order_received"
-                            item-key="PODetailID" class="elevation-1" hide-actions>
+                    <v-flex xs12 v-if="order_received.length > 0">
+                        <v-data-table :headers="headers" :items="order_received" item-key="PODetailID"
+                            class="elevation-1" hide-actions>
                             <template v-slot:items="props">
                                 <tr>
                                     <td class="text-xs-center pa-1">
@@ -101,10 +94,8 @@
                                     <td class="text-xs-center pa-1">
                                         <v-tooltip bottom pr-2>
                                             <template v-slot:activator="{ on }">
-                                                <v-btn
-                                                    color="green" dark @click="openInspeksi(props.item)"
-                                                    style="min-width: 40px; margin: 0;" small v-on="on"
-                                                >
+                                                <v-btn color="green" dark @click="openInspeksi(props.item)"
+                                                    style="min-width: 40px; margin: 0;" small v-on="on">
                                                     <v-icon small>note_add</v-icon>
                                                 </v-btn>
                                             </template>
@@ -113,10 +104,8 @@
 
                                         <v-tooltip bottom v-show="!readonly_mode">
                                             <template v-slot:activator="{ on }">
-                                                <v-btn
-                                                    color="warning" dark @click="cancelOrder(props.item)"
-                                                    style="min-width: 40px; margin: 0;" small v-on="on"
-                                                >
+                                                <v-btn color="warning" dark @click="cancelOrder(props.item)"
+                                                    style="min-width: 40px; margin: 0;" small v-on="on">
                                                     <v-icon small>cancel</v-icon>
                                                 </v-btn>
                                             </template>
@@ -132,7 +121,8 @@
             <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn @click="batalReceiveOrder()" color="error" class="white--text">Batal</v-btn>
-                <v-btn :disabled="readonly_mode" @click="simpanReceivedOrder()" color="primary" class="white--text">Simpan</v-btn>
+                <v-btn :disabled="readonly_mode" @click="simpanReceivedOrder()" color="primary"
+                    class="white--text">Simpan</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -140,15 +130,15 @@
 
 <style scoped>
 .style-limit-heightcard {
-  max-height: 60vh;
-  display: flex;
-  flex-direction: column;
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
 }
 
 .style-limit-heightcontent {
-  overflow-y: auto;
-  flex: 1 1 auto;
-  min-height: 0;
+    overflow-y: auto;
+    flex: 1 1 auto;
+    min-height: 0;
 }
 </style>
 
@@ -268,7 +258,7 @@ module.exports = {
                     pengirim: ""
                 };
 
-            this.$store.dispatch("orderAsset/listingStaff");
+            this.$store.dispatch("orderAsset/listingStaff", { ROID: "0", isSerahTerima: 'N' });
             this.$store.commit("orderAsset/update_selected_item_received", selectedItem);
             this.$store.commit("orderAsset/update_form_inspeksi", formInspeksi);
             this.$store.commit("orderAsset/update_dialog_inspeksi", true);
@@ -280,7 +270,7 @@ module.exports = {
         },
         simpanReceivedOrder() {
             if (this.order_received.length <= 0) {
-                let snac = {color: 'warning', msg: "item tidak boleh kosong", state: true}
+                let snac = { color: 'warning', msg: "item tidak boleh kosong", state: true }
                 this.$store.commit("roasset/update_snackbar", snac)
                 return;
             }
@@ -292,7 +282,7 @@ module.exports = {
                     this.$store.dispatch("orderAsset/editReceiveOrder");
                 }
             } else {
-                let snac = {color: 'warning', msg: "proses masih berjalan", state: true}
+                let snac = { color: 'warning', msg: "proses masih berjalan", state: true }
                 this.$store.commit("roasset/update_snackbar", snac)
             }
         },
diff --git a/test/vuex/acc-one-receive-order-asset/components/dialog-view-barcode.vue b/test/vuex/acc-one-receive-order-asset/components/dialog-view-barcode.vue
new file mode 100644
index 0000000..e847e61
--- /dev/null
+++ b/test/vuex/acc-one-receive-order-asset/components/dialog-view-barcode.vue
@@ -0,0 +1,141 @@
+<template>
+    <v-dialog v-model="dialog_barcode" persistent max-width="50vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                CETAK BARCODE ASSET
+            </v-card-title>
+            <v-card-text>
+                <v-layout pa-2 class="grey lighten-2" row>
+                    <v-flex xs1>
+                        <v-checkbox style="padding-top: 0; margin-top: 0" hide-details color="grey darken-1"
+                            v-model="bar_chx_all" :indeterminate="indeterminatex" @change="changeCbxAll(bar_chx_all)">
+                        </v-checkbox>
+                    </v-flex>
+                    <v-flex xs3> ITEM </v-flex>
+                    <v-flex xs3> RUANGAN </v-flex>
+                    <v-flex xs4> NUMBER BARCODE </v-flex>
+                    <v-flex xs1> CETAK </v-flex>
+                </v-layout>
+                <v-layout align-center pa-2 v-for="(vs, idx) in list_barcode" :key="vs.id" class="grey lighten-4" row>
+                    <v-flex xs1>
+                        <v-checkbox style="padding-top: 0; margin-top: 0" color="grey darken-1" hide-details
+                            v-model="vs.chex" @change="checkTop()"></v-checkbox>
+                    </v-flex>
+                    <v-flex xs3>{{ vs.M_ItemDesc }}</v-flex>
+                    <v-flex xs3>{{ vs.M_RuanganName }}</v-flex>
+                    <v-flex xs4>{{ vs.T_BarcodeBarangNumber }}</v-flex>
+                    <v-flex xs1>
+                        <span @click="printSingleBarcode(vs)"
+                            class="icon-medium-fill-base-small xs1 white--text grey darken-1 ml-1 icon-print"></span>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" @click="closeDialogBarcode()">Tutup</v-btn>
+                 <v-btn dark color="grey darken-1" @click="printMultipleBarcode()">Cetak terpilih
+                    [ {{ selected_barcode.length }} ]
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            bar_chx_all: false,
+            indeterminatex: false,
+            selected_barcode: []
+        }
+    },
+    computed: {
+        dialog_barcode: {
+            get() {
+                return this.$store.state.roasset.dialog_barcode
+            },
+            set(val) {
+                this.$store.commit("roasset/update_dialog_barcode", val)
+            }
+        },
+        selected_roasset: {
+            get() {
+                return this.$store.state.roasset.selected_roasset
+            },
+            set(val) {
+                this.$store.commit("roasset/update_selected_roasset", val)
+            }
+        },
+        list_barcode: {
+            get() {
+                return this.$store.state.roasset.list_barcode
+            },
+            set(val) {
+                this.$store.commit("roasset/update_list_barcode", val)
+            }
+        }
+    },
+    methods: {
+        changeCbxAll(value) {
+            let arr = this.list_barcode;
+            this.indeterminatex = false;
+            arr.forEach((el) => {
+                el.chex = value;
+            });
+            let selected = _.filter(arr, function (o) {
+                return o.chex;
+            });
+            this.selected_barcode = selected;
+        },
+        checkTop() {
+            let barcodes = this.list_barcode;
+            let selected = _.filter(barcodes, function (o) {
+                return o.chex;
+            });
+
+            this.bar_chx_all = false;
+            this.indeterminatex = false;
+            if (selected.length > 0 && barcodes.length === selected.length) {
+                this.bar_chx_all = true;
+                this.indeterminatex = false;
+            }
+            if (selected.length > 0 && barcodes.length > selected.length) {
+                this.bar_chx_all = false;
+                this.indeterminatex = true;
+            }
+            this.selected_barcode = selected;
+        },
+        printSingleBarcode(value) {
+            var inp = {
+                nama_item: value.M_ItemDesc,
+                no_inv: value.T_BarcodeBarangNumber,
+                lokasi: value.M_RuanganName,
+                cabang: value.M_BranchName
+            };
+
+            one_print_qrcode_inv(inp);
+        },
+        printMultipleBarcode() {
+            var barcodes = this.selected_barcode;
+            barcodes.forEach(value => {
+                var inp = {
+                    nama_item: value.M_ItemDesc,
+                    no_inv: value.T_BarcodeBarangNumber,
+                    lokasi: value.M_RuanganName,
+                    cabang: value.M_BranchName
+                };
+
+                one_print_qrcode_inv(inp);
+            });
+        },
+        closeDialogBarcode() {
+            this.bar_chx_all = false
+            this.indeterminatex = false
+            this.selected_barcode = []
+            this.dialog_barcode = false
+        }
+    },
+    watch: {}
+}
+</script>
diff --git a/test/vuex/acc-one-receive-order-asset/components/main-layout.vue b/test/vuex/acc-one-receive-order-asset/components/main-layout.vue
index e22d5ab..7c556ff 100644
--- a/test/vuex/acc-one-receive-order-asset/components/main-layout.vue
+++ b/test/vuex/acc-one-receive-order-asset/components/main-layout.vue
@@ -81,10 +81,8 @@
                                 </v-tooltip>
                                 <v-tooltip bottom pr-2>
                                     <template v-slot:activator="{ on }">
-                                        <v-btn
-                                            color="warning" dark @click="confirmRO(props.item)"
-                                            style="min-width: 40px; margin: 0;" small v-on="on"
-                                        >
+                                        <v-btn color="warning" dark @click="confirmRO(props.item)"
+                                            style="min-width: 40px; margin: 0;" small v-on="on">
                                             <v-icon small>send</v-icon>
                                         </v-btn>
                                     </template>
@@ -92,10 +90,8 @@
                                 </v-tooltip>
                                 <v-tooltip bottom pr-2>
                                     <template v-slot:activator="{ on }">
-                                        <v-btn
-                                            color="info" dark @click="editRO(props.item)" v-on="on"
-                                            style="min-width: 40px; margin: 0;" small
-                                        >
+                                        <v-btn color="info" dark @click="editRO(props.item)" v-on="on"
+                                            style="min-width: 40px; margin: 0;" small>
                                             <v-icon small>edit</v-icon>
                                         </v-btn>
                                     </template>
@@ -103,10 +99,8 @@
                                 </v-tooltip>
                                 <v-tooltip bottom>
                                     <template v-slot:activator="{ on }">
-                                        <v-btn
-                                            color="red" dark @click="deleteRO(props.item)"
-                                            style="min-width: 40px; margin: 0;" small v-on="on"
-                                        >
+                                        <v-btn color="red" dark @click="deleteRO(props.item)"
+                                            style="min-width: 40px; margin: 0;" small v-on="on">
                                             <v-icon small>delete</v-icon>
                                         </v-btn>
                                     </template>
@@ -114,6 +108,15 @@
                                 </v-tooltip>
                             </div>
                             <div v-show="props.item.ReceiveOrderPoConfirmed == 'Y'">
+                                <v-tooltip bottom pr-2>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="black lighten-2" dark @click="viewBarcode(props.item)"
+                                            style="min-width: 40px; margin: 0;" small v-on="on">
+                                            <v-icon small>print</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>View Barcode</span>
+                                </v-tooltip>
                                 <v-tooltip bottom pr-2>
                                     <template v-slot:activator="{ on }">
                                         <v-btn color="info" dark @click="viewDetail(props.item)"
@@ -125,14 +128,14 @@
                                 </v-tooltip>
                                 <v-tooltip bottom pr-2>
                                     <template v-slot:activator="{ on }">
-                                        <v-btn color="green" dark @click="uploadAttachment(props.item)"
+                                        <v-btn color="orange" dark @click="uploadAttachment(props.item)"
                                             style="min-width: 40px; margin: 0;" small v-on="on">
                                             <v-icon small>attach_file</v-icon>
                                         </v-btn>
                                     </template>
                                     <span>View Document</span>
                                 </v-tooltip>
-                                <v-tooltip bottom>
+                                <v-tooltip bottom pr-2>
                                     <template v-slot:activator="{ on }">
                                         <v-btn color="primary" dark @click="printout(props.item)"
                                             style="min-width: 40px; margin: 0;" small v-on="on">
@@ -141,6 +144,17 @@
                                     </template>
                                     <span>Cetak PDF</span>
                                 </v-tooltip>
+                                <span v-show="props.item.ReceiveOrderPoIsHandover == 'N'">
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn color="green" dark @click="handOverRO(props.item)"
+                                                style="min-width: 40px; margin: 0;" small v-on="on">
+                                                <v-icon small>move_to_inbox</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Serah Terima</span>
+                                    </v-tooltip>
+                                </span>
                             </div>
                         </td>
                     </tr>
@@ -163,14 +177,10 @@
         <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>
+        <dialog-view-barcode></dialog-view-barcode>
+        <dialog-handover-asset></dialog-handover-asset>
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="600" :status="openprint" :urlprint="urlprint"
+            @close-dialog-print="openprint = false"></one-dialog-print>
     </div>
 </template>
 
@@ -183,6 +193,8 @@ 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'),
+        'dialog-view-barcode': httpVueLoader('./dialog-view-barcode.vue'),
+        'dialog-handover-asset': httpVueLoader('./dialog-handover-asset.vue'),
         'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue'),
     },
     mounted() {
@@ -313,6 +325,18 @@ module.exports = {
             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;
+        },
+        viewBarcode(item) {
+            this.$store.dispatch("roasset/lookupBarcodes", item.ReceiveOrderPoID);
+            this.$store.commit("roasset/update_selected_roasset", item);
+            this.$store.commit("roasset/update_dialog_barcode", true);
+        },
+        handOverRO(item) {
+            this.$store.commit("roasset/update_selected_roasset", item);
+            this.$store.dispatch("roasset/lookupRuangan");
+            this.$store.dispatch("orderAsset/listingStaff", { ROID: item.ReceiveOrderPoID, isSerahTerima: 'Y' });
+            this.$store.dispatch("roasset/lookupAssetNotHanded", item.ReceiveOrderPoID);
+            this.$store.commit("roasset/update_dialog_handover_asset", true);
         }
     },
     watch: {
diff --git a/test/vuex/acc-one-receive-order-asset/index.php b/test/vuex/acc-one-receive-order-asset/index.php
index 1b59d1a..0afc902 100644
--- a/test/vuex/acc-one-receive-order-asset/index.php
+++ b/test/vuex/acc-one-receive-order-asset/index.php
@@ -4,10 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>ACCONE | Receive Order Asset</title>
     <link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
     <link rel="stylesheet" href="../../../libs/vendor/css/icomoon-fonts.css">
     <link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
-    <title>One</title>
 </head>
 <body>
     <div v-cloak id="app">
@@ -35,6 +35,8 @@
     <script src="../../../libs/vendor/vuetify.js"></script>
     <script src="../../../libs/vendor/httpVueLoader.js"></script>
     <script src="../../../libs/one_global.js"></script>
+    <script src="../../../libs/one_print_barcode.js"></script>
+    <script src="../../../libs/vendor/sheetjs-master/xlsx.full.min.js"></script>
 
     <!-- App Script -->
     <script type="module">
diff --git a/test/vuex/acc-one-receive-order-asset/modules/order-asset.js b/test/vuex/acc-one-receive-order-asset/modules/order-asset.js
index 9d64cb3..072542b 100644
--- a/test/vuex/acc-one-receive-order-asset/modules/order-asset.js
+++ b/test/vuex/acc-one-receive-order-asset/modules/order-asset.js
@@ -131,9 +131,9 @@ export default {
                 context.commit("roasset/update_snackbar", snac, { root: true });
             }
         },
-        async listingStaff(context) {
+        async listingStaff(context, params) {
             try {
-                const params = { token: one_token() };
+                params.token = one_token();
                 const resp = await api.getListStaff(params);
                 if (resp.status != 'OK') {
                     throw new Error(resp.message);
diff --git a/test/vuex/acc-one-receive-order-asset/modules/roasset.js b/test/vuex/acc-one-receive-order-asset/modules/roasset.js
index fb16c2d..dddb67e 100644
--- a/test/vuex/acc-one-receive-order-asset/modules/roasset.js
+++ b/test/vuex/acc-one-receive-order-asset/modules/roasset.js
@@ -33,7 +33,14 @@ export default {
         dialog_delete: false,
 
         /* confirm */
-        dialog_confirm: false
+        dialog_confirm: false,
+
+        /* barcode */
+        dialog_barcode: false,
+        list_barcode: [],
+        dialog_handover_asset: false,
+        list_item_not_handed: [],
+        list_lokasi: []
     },
     mutations: {
         /* common */
@@ -74,8 +81,26 @@ export default {
             state.dialog_delete = val
         },
 
+        /* delete */
         update_dialog_confirm(state, val) {
             state.dialog_confirm = val
+        },
+
+        /* barcode */
+        update_dialog_barcode(state, val) {
+            state.dialog_barcode = val
+        },
+        update_list_barcode(state, val) {
+            state.list_barcode = val
+        },
+        update_dialog_handover_asset(state, val) {
+            state.dialog_handover_asset = val
+        },
+        update_list_item_not_handed(state, val) {
+            state.list_item_not_handed = val
+        },
+        update_list_lokasi(state, val) {
+            state.list_lokasi = val
         }
     },
     actions: {
@@ -209,6 +234,75 @@ export default {
                 const snac = { color: 'error', msg: e.message, state: false };
                 context.commit("update_snackbar", snac);
             }
-        }
+        },
+
+        async lookupRuangan(context) {
+            try {
+                const params = {
+                    token: one_token(),
+                    search: ''
+                };
+                const resp = await api.getRuangan(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit("update_list_lokasi", resp.data);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac);
+            }
+        },
+        async lookupAssetNotHanded(context, id) {
+            try {
+                const params = {
+                    token: one_token(),
+                    ROID: id
+                };
+                const resp = await api.getAssetBelumSerahTerima(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit("update_list_item_not_handed", resp.data);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac);
+            }
+        },
+        async saveHandoverAsset(context, params) {
+            try {
+                params.token = one_token();
+                const resp = await api.saveHandover(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                const snac = { color: 'success', msg: resp.data, state: true };
+                context.commit("update_snackbar", snac);
+                context.dispatch("lookupOrderAssetReceived");
+                context.commit("update_dialog_handover_asset", false);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac);
+            }
+        },
+        async lookupBarcodes(context, id) {
+            try {
+                const params = {
+                    token: one_token(),
+                    ROID: id
+                };
+                const resp = await api.getBarcodes(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_list_barcode', resp.data);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac);
+            }
+        },
     }
 }