diff --git a/test/vuex/acc-one-po-asset/components/dialog-create-order.vue b/test/vuex/acc-one-po-asset/components/dialog-create-order.vue
new file mode 100644
index 0000000..6c2e359
--- /dev/null
+++ b/test/vuex/acc-one-po-asset/components/dialog-create-order.vue
@@ -0,0 +1,70 @@
+<template>
+    <v-dialog v-model="dialog_create_order" persistent width="80vw">
+        <v-card style="max-height: 80vh; display: flex; flex-direction: column;">
+            <v-card-title class="headline grey lighten-2">BUAT ORDER ASET</v-card-title>
+            <template>
+                <div>
+                    <v-stepper non-linear v-model="steps">
+                        <v-stepper-header>
+                            <v-stepper-step editable step="1" @click="steps = 1">
+                                FORM ORDER ASET
+                            </v-stepper-step>
+                            <v-divider></v-divider>
+                            <v-stepper-step editable step="2" @click="steps = 2">
+                                FORM KONTRAK ASET
+                            </v-stepper-step>
+                            <v-divider></v-divider>
+                            <v-stepper-step editable step="3" @click="steps = 3">
+                                ITEM ORDER ASET
+                            </v-stepper-step>
+                        </v-stepper-header>
+
+                        <v-stepper-items>
+                            <v-stepper-content step="1">
+                                <form-order-asset></form-order-asset>
+                            </v-stepper-content>
+
+                            <v-stepper-content step="2">
+                                <form-kontrak-asset></form-kontrak-asset>
+                            </v-stepper-content>
+
+                            <v-stepper-content step="3">
+
+                            </v-stepper-content>
+                        </v-stepper-items>
+                    </v-stepper>
+                </div>
+            </template>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn @click="dialog_create_order = false" 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 {
+            steps: 1
+        }
+    },
+    components: {
+        'form-order-asset': httpVueLoader('./form-order-asset.vue'),
+        'form-kontrak-asset': httpVueLoader('./form-kontrak-asset.vue')
+    },
+    computed: {
+        dialog_create_order: {
+            get() {
+                return this.$store.state.orderAsset.dialog_create_order
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_dialog_create_order", val)
+            }
+        }
+    },
+    methods: {}
+}
+</script>
diff --git a/test/vuex/acc-one-po-asset/components/form-kontrak-asset.vue b/test/vuex/acc-one-po-asset/components/form-kontrak-asset.vue
new file mode 100644
index 0000000..136a879
--- /dev/null
+++ b/test/vuex/acc-one-po-asset/components/form-kontrak-asset.vue
@@ -0,0 +1,134 @@
+<template>
+    <div>
+        <v-layout row wrap>
+            <v-flex xs3 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 xs3 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" v-on="on" hide-details readonly outline
+                            label="Tanggal Kontrak"></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 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" hide-details
+                            label="Tanggal Mulai Kontrak" 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" hide-details
+                            label="Tanggal Akhir Kontrak" 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-layout>
+
+        <v-layout row wrap>
+            <v-flex xs2 pa-1>
+                <v-text-field v-model="form_kontrak.durasi_cicilan" hide-details outline placeholder="1"
+                    label="Durasi Kontrak (Bulan)" readonly></v-text-field>
+            </v-flex>
+            <v-flex xs2 pa-1>
+                <v-text-field v-model="form_kontrak.jumlah_cicilan" hide-details placeholder="1" outline
+                    label="Jumlah Cicilan"></v-text-field>
+            </v-flex>
+            <v-flex xs2 pa-1>
+                <v-text-field v-model="form_kontrak.tanggalBayar_cicilan" hide-details placeholder="1" outline
+                    label="Tanggal Bayar Cicilan"></v-text-field>
+            </v-flex>
+            <v-flex xs2 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-if="form_kontrak.type_downpayment == 'persen'" label="Jumlah Uang Muka" hide-details
+                    v-model="form_kontrak.besarNilai_downpayment" placeholder="0" suffix="%" outline></v-text-field>
+                <v-text-field v-else label="Jumlah Uang Muka" hide-details placeholder="0" prefix="Rp." outline
+                    v-model="form_kontrak.besarNilai_downpayment"></v-text-field>
+            </v-flex>
+        </v-layout>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            menuKontrakDate: false,
+            menuKontrakStartdate: false,
+            menuKontrakEnddate: false,
+        };
+    },
+    computed: {
+        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(startdate);
+            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.jumlah_downpayment = 0;
+            }
+        }
+    },
+    watch: {
+
+    }
+}
+</script>
diff --git a/test/vuex/acc-one-po-asset/components/form-order-asset.vue b/test/vuex/acc-one-po-asset/components/form-order-asset.vue
new file mode 100644
index 0000000..8babe44
--- /dev/null
+++ b/test/vuex/acc-one-po-asset/components/form-order-asset.vue
@@ -0,0 +1,121 @@
+<template>
+    <div>
+        <!-- first row -->
+        <v-layout row wrap>
+            <v-flex xs4 pa-1>
+                <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_order_asset.podate" no-title
+                        @input="menuPOdate = false"
+                    ></v-date-picker>
+                </v-menu>
+            </v-flex>
+            <v-flex xs4 pa-1>
+                <v-autocomplete
+                    :items="list_supplier" hide-details outline
+                    v-model="form_order_asset.supplierID" label="Supplier"
+                    item-text="SupplierName" item-value="SupplierID"
+                ></v-autocomplete>
+            </v-flex>
+            <v-flex xs4 pa-1>
+                <v-text-field
+                    v-model="form_order_asset.reference" hide-details outline
+                    label="Referensi" placeholder="nomor request" readonly
+                ></v-text-field>
+            </v-flex>
+        </v-layout>
+
+        <!-- 2nd row -->
+        <v-layout row wrap>
+            <v-flex xs4 pa-1>
+                <v-autocomplete
+                    :items="list_cabang" hide-details outline
+                    v-model="form_order_asset.branchID" label="Cabang"
+                    item-text="M_BranchName" item-value="M_BranchID"
+                ></v-autocomplete>
+            </v-flex>
+            <v-flex xs2 pa-1>
+                <v-autocomplete
+                    :items="['nominal', 'persen']" label="Tipe Nilai"
+                    v-model="form_order_asset.typepajak" hide-details outline
+                ></v-autocomplete>
+            </v-flex>
+            <v-flex xs2 pa-1>
+                <v-text-field
+                    v-if="form_order_asset.typepajak == 'persen'" label="Pajak"
+                    v-model="form_order_asset.valuepajak" hide-details outline
+                    placeholder="besar pajak dalam persen" suffix="%"
+                ></v-text-field>
+                <v-text-field
+                    v-else label="Pajak" outline prefix="Rp."
+                    v-model="form_order_asset.valuepajak" hide-details
+                    placeholder="besar pajak dalam rupiah"
+                ></v-text-field>
+            </v-flex>
+            <v-flex xs2 pa-1>
+                <v-autocomplete
+                    :items="['nominal', 'persen']" hide-details outline
+                    v-model="form_order_asset.typediskon" label="Tipe Nilai"
+                ></v-autocomplete>
+            </v-flex>
+            <v-flex xs2 pa-1>
+                <v-text-field
+                    v-if="form_order_asset.typediskon == 'persen'" label="Diskon"
+                    v-model="form_order_asset.valuediskon" hide-details outline
+                    placeholder="besar diskon dalam persen" suffix="%"
+                ></v-text-field>
+                <v-text-field
+                    v-else label="Diskon" outline prefix="Rp."
+                    v-model="form_order_asset.valuediskon" hide-details
+                    placeholder="besar diskon dalam rupiah"s
+                ></v-text-field>
+            </v-flex>
+        </v-layout>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            menuPOdate: false,
+        }
+    },
+    computed: {
+        form_order_asset: {
+            get() {
+                return this.$store.state.orderAsset.form_order_asset;
+            },
+            set(val) {
+                this.$store.commit('orderAsset/update_form_order_asset', val);
+            }
+        },
+        formatPOdate() {
+            return this.formatDate(this.form_order_asset.podate);
+        },
+        list_supplier() {
+            return this.$store.state.orderAsset.list_supplier;
+        },
+        list_cabang() {
+            return this.$store.state.orderAsset.list_cabang;
+        }
+    },
+    methods: {
+        formatDate(date) {
+            if (!date) return null;
+            const [year, month, day] = date.split('-');
+            return `${day}-${month}-${year}`;
+        },
+    }
+}
+</script>
diff --git a/test/vuex/acc-one-po-asset/components/main-layout.vue b/test/vuex/acc-one-po-asset/components/main-layout.vue
index 7b7983a..4c55f54 100644
--- a/test/vuex/acc-one-po-asset/components/main-layout.vue
+++ b/test/vuex/acc-one-po-asset/components/main-layout.vue
@@ -1,160 +1,131 @@
 <template>
-<div>
-    <v-toolbar color="primary" dark>
-        <v-toolbar-title class="white--text">PURCHASE ORDER ASET</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon @click="createNewContract()">
-            <v-icon large>add_box</v-icon>
-        </v-btn>
-        <v-btn icon @click="createNewOrder()">
-            <v-icon large>add_box</v-icon>
-        </v-btn>
-    </v-toolbar>
+    <div>
+        <v-toolbar color="primary" dark>
+            <v-toolbar-title class="white--text">PURCHASE ORDER ASET</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn icon @click="createNewOrder()">
+                <v-icon large>add_box</v-icon>
+            </v-btn>
+            <!-- <v-btn icon @click="createNewContract()">
+                <v-icon large>add_box</v-icon>
+            </v-btn>
+            <v-btn icon @click="createNewOrder()">
+                <v-icon large>add_box</v-icon>
+            </v-btn> -->
+        </v-toolbar>
 
-    <v-card class="pa-2">
-        <v-layout row align-center>
-            <v-flex xs3>
-                <v-menu
-                    v-model="menuStartdateFilter" 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="formattedStartdate" label="Tanggal Awal"
-                            hide-details readonly v-on="on" outline
-                        ></v-text-field>
-                    </template>
-                    <v-date-picker
-                        v-model="filterpo.startdate" no-title
-                        @input="menuStartdateFilter = false"
-                    ></v-date-picker>
-                </v-menu>
-            </v-flex>
-            <v-flex xs3 pl-2>
-                <v-menu
-                    v-model="menuEnddateFilter" 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="formattedEnddate" label="Tanggal Akhir"
-                            hide-details readonly v-on="on" outline
-                        ></v-text-field>
-                    </template>
-                    <v-date-picker
-                        v-model="filterpo.enddate" no-title
-                        @input="menuEnddateFilter = false"
-                    ></v-date-picker>
-                </v-menu>
-            </v-flex>
-            <v-flex xs3 pl-2>
-                <v-autocomplete
-                    :items="list_status" hide-details outline
-                    v-model="filterpo.status" label="Status"
-                ></v-autocomplete>
-            </v-flex>
-            <v-flex xs3 pl-2>
-                <v-text-field
-                    v-model="filterpo.search" hide-details outline
-                    label="Cari" placeholder="cari nomor po"
-                ></v-text-field>
-            </v-flex>
-        </v-layout>
-    </v-card>
+        <v-card class="pa-2">
+            <v-layout row align-center>
+                <v-flex xs3>
+                    <v-menu v-model="menuStartdateFilter" 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="formattedStartdate" label="Tanggal Awal" hide-details readonly
+                                v-on="on" outline></v-text-field>
+                        </template>
+                        <v-date-picker v-model="filterpo.startdate" no-title
+                            @input="menuStartdateFilter = false"></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs3 pl-2>
+                    <v-menu v-model="menuEnddateFilter" 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="formattedEnddate" label="Tanggal Akhir" hide-details readonly
+                                v-on="on" outline></v-text-field>
+                        </template>
+                        <v-date-picker v-model="filterpo.enddate" no-title
+                            @input="menuEnddateFilter = false"></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs3 pl-2>
+                    <v-autocomplete :items="list_status" hide-details outline v-model="filterpo.status"
+                        label="Status"></v-autocomplete>
+                </v-flex>
+                <v-flex xs3 pl-2>
+                    <v-text-field v-model="filterpo.search" hide-details outline label="Cari"
+                        placeholder="cari nomor po"></v-text-field>
+                </v-flex>
+            </v-layout>
+        </v-card>
 
-    <v-card class="pa-2 mt-2">
-        <v-data-table
-            :headers="headers" class="elevation-1"
-            :items="list_asetpo.records" hide-actions
-        >
-            <template v-slot:items="props">
-                <tr>
-                    <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderNumber }}</td>
-                    <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderDate }}</td>
-                    <td class="text-xs-center pa-2">{{ props.item.SupplierName }}</td>
-                    <td class="text-xs-center pa-2">{{ props.item.M_BranchName }}</td>
-                    <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderNote }}</td>
-                    <td class="text-xs-center pa-2">
-                        Rp. {{ formatCurrency(props.item.PurchaseOrderGrandTotal) }}
-                    </td>
-                    <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderStatus }}</td>
-                    <td class="text-xs-center pa-2">
-                        <div v-show="props.item.PurchaseOrderStatus == 'Draft'">
-                            <v-tooltip bottom>
-                                <template v-slot:activator="{ on }">
-                                    <v-btn
-                                        color="warning" dark v-on="on"
-                                        @click="" small
-                                        style="min-width: 40px; margin: 0;"
-                                    >
-                                        <v-icon small>send</v-icon>
-                                    </v-btn>
-                                </template>
-                                <span>Buat Request PO</span>
-                            </v-tooltip>
-                            <v-tooltip bottom>
-                                <template v-slot:activator="{ on }">
-                                    <v-btn
-                                        color="info" dark v-on="on"
-                                        @click="" small
-                                        style="min-width: 40px; margin: 0;"
-                                    >
-                                        <v-icon small>edit</v-icon>
-                                    </v-btn>
-                                </template>
-                                <span>Edit Request PO</span>
-                            </v-tooltip>
-                            <v-tooltip bottom>
-                                <template v-slot:activator="{ on }">
-                                    <v-btn
-                                        color="error" dark v-on="on"
-                                        @click="" small
-                                        style="min-width: 40px; margin: 0;"
-                                    >
-                                        <v-icon small>delete</v-icon>
-                                    </v-btn>
-                                </template>
-                                <span>Delete Request PO</span>
-                            </v-tooltip>
-                        </div>
-                        <div v-show="props.item.PurchaseOrderStatus != 'Draft'">
-                            <v-tooltip bottom>
-                                <template v-slot:activator="{ on }">
-                                    <v-btn
-                                        color="warning" dark v-on="on"
-                                        @click="viewPO(props.item)" small
-                                        style="min-width: 40px; margin: 0;"
-                                    >
-                                        <v-icon small>visibility</v-icon>
-                                    </v-btn>
-                                    <span>Detail PO</span>
-                                </template>
-                            </v-tooltip>
-                        </div>
-                    </td>
-                </tr>
-            </template>
-        </v-data-table>
-        <v-divider class="my-1"></v-divider>
-        <div class="pa-2 mt-1 text-xs-center">
-            <v-pagination v-model="currpage" :length="pagelength" :total-visible="10"></v-pagination>
-        </div>
-    </v-card>
+        <v-card class="pa-2 mt-2">
+            <v-data-table :headers="headers" class="elevation-1" :items="list_asetpo.records" hide-actions>
+                <template v-slot:items="props">
+                    <tr>
+                        <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderNumber }}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderDate }}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.SupplierName }}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.M_BranchName }}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderNote }}</td>
+                        <td class="text-xs-center pa-2">
+                            Rp. {{ formatCurrency(props.item.PurchaseOrderGrandTotal) }}
+                        </td>
+                        <td class="text-xs-center pa-2">{{ props.item.PurchaseOrderStatus }}</td>
+                        <td class="text-xs-center pa-2">
+                            <div v-show="props.item.PurchaseOrderStatus == 'Draft'">
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="warning" dark v-on="on" @click="" small
+                                            style="min-width: 40px; margin: 0;">
+                                            <v-icon small>send</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Buat Request PO</span>
+                                </v-tooltip>
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="info" dark v-on="on" @click="" small
+                                            style="min-width: 40px; margin: 0;">
+                                            <v-icon small>edit</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Edit Request PO</span>
+                                </v-tooltip>
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="error" dark v-on="on" @click="" small
+                                            style="min-width: 40px; margin: 0;">
+                                            <v-icon small>delete</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Delete Request PO</span>
+                                </v-tooltip>
+                            </div>
+                            <div v-show="props.item.PurchaseOrderStatus != 'Draft'">
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="warning" dark v-on="on" @click="viewPO(props.item)" small
+                                            style="min-width: 40px; margin: 0;">
+                                            <v-icon small>visibility</v-icon>
+                                        </v-btn>
+                                        <span>Detail PO</span>
+                                    </template>
+                                </v-tooltip>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <v-divider class="my-1"></v-divider>
+            <div class="pa-2 mt-1 text-xs-center">
+                <v-pagination v-model="currpage" :length="pagelength" :total-visible="10"></v-pagination>
+            </div>
+        </v-card>
 
-    <v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
-        {{ snackbar.msg }}
-        <v-btn class="ml-2" round flat @click="snackbar.state = false">Tutup</v-btn>
-    </v-snackbar>
+        <v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
+            {{ snackbar.msg }}
+            <v-btn class="ml-2" round flat @click="snackbar.state = false">Tutup</v-btn>
+        </v-snackbar>
 
-    <dialog-add-attchment></dialog-add-attchment>
-    <dialog-form-order-aset></dialog-form-order-aset>
-    <dialog-add-item-aset></dialog-add-item-aset>
-    <dialog-delete-order></dialog-delete-order>
+        <dialog-add-attchment></dialog-add-attchment>
+        <dialog-add-item-aset></dialog-add-item-aset>
+        <dialog-delete-order></dialog-delete-order>
 
-     <dialog-create-kontrak></dialog-create-kontrak>
-</div>
+        <!-- <dialog-form-order-aset></dialog-form-order-aset> -->
+        <!-- <dialog-create-kontrak></dialog-create-kontrak> -->
+        <dialog-create-order></dialog-create-order>
+    </div>
 </template>
 
 <script>
@@ -210,6 +181,7 @@ module.exports = {
         'dialog-delete-order': httpVueLoader('./dialog-delete-order.vue'),
 
         'dialog-create-kontrak': httpVueLoader('./dialog-create-contract.vue'),
+        'dialog-create-order': httpVueLoader('./dialog-create-order.vue'),
     },
     computed: {
         snackbar: {
@@ -251,7 +223,7 @@ module.exports = {
         pagelength() {
             const total = this.list_asetpo.total;
             if (total === undefined || total < 1) return 1;
-            return Math.ceil(total/10);
+            return Math.ceil(total / 10);
         }
     },
     methods: {
@@ -271,6 +243,9 @@ module.exports = {
         createNewContract() {
             this.$store.commit("kontrakAsset/update_dialog_create_contract", true);
         },
+        createNewOrder() {
+            this.$store.commit("orderAsset/update_dialog_create_order", true);
+        },
         viewPO(item) {
 
         }
diff --git a/test/vuex/acc-one-po-asset/modules/kontrak-asset.js b/test/vuex/acc-one-po-asset/modules/kontrak-asset.js
index 488a767..ae94773 100644
--- a/test/vuex/acc-one-po-asset/modules/kontrak-asset.js
+++ b/test/vuex/acc-one-po-asset/modules/kontrak-asset.js
@@ -5,17 +5,14 @@ export default {
         form_kontrak: {
             nama_kontrak: '',
             tanggal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
-            supplierID_kontrak: '',
             tanggalAwal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
             tanggalAkhir_kontrak: moment(new Date()).format('YYYY-MM-DD'),
             durasi_cicilan: 1,
             jumlah_cicilan: 1,
             tanggalBayar_cicilan: 1,
             besarNilai_cicilan: 0,
-            type_downpayment: 'nominal',
-            besarNilai_downpayment: 0,
-            type_pajak: 'persen',
-            besarNilai_pajak: 0
+            type_downpayment: 'persen',
+            besarNilai_downpayment: 0
         }
     },
     mutations: {
diff --git a/test/vuex/acc-one-po-asset/modules/order-asset.js b/test/vuex/acc-one-po-asset/modules/order-asset.js
new file mode 100644
index 0000000..9f17a34
--- /dev/null
+++ b/test/vuex/acc-one-po-asset/modules/order-asset.js
@@ -0,0 +1,36 @@
+export default {
+    namespaced: true,
+    state: {
+        /* dialog create order */
+        dialog_create_order: false,
+        form_order_asset: {
+            podate: moment(new Date()).format('YYYY-MM-DD'),
+            supplierID: "",
+            reference: "",
+            branchID: "",
+            typepajak: "persen",
+            valuepajak: 0,
+            typediskon: "persen",
+            valuediskon: 0
+        },
+        list_supplier: [],
+        list_cabang: []
+    },
+    mutations: {
+        update_dialog_create_order(state, val) {
+            state.dialog_create_order = val
+        },
+        update_form_order_asset(state, val) {
+            state.form_order_asset = val
+        },
+        update_list_supplier(state, val) {
+            state.list_supplier = val
+        },
+        update_list_cabang(state, val) {
+            state.list_cabang = val
+        }
+    },
+    actions: {
+
+    }
+}
diff --git a/test/vuex/acc-one-po-asset/modules/poasset.js b/test/vuex/acc-one-po-asset/modules/poasset.js
index 60d3288..5b3e1e4 100644
--- a/test/vuex/acc-one-po-asset/modules/poasset.js
+++ b/test/vuex/acc-one-po-asset/modules/poasset.js
@@ -35,9 +35,9 @@ export default {
             supplierID: "",
             reference: "",
             branchcode: "",
-            typepajak: "percent",
+            typepajak: "persen",
             valuepajak: 0,
-            typediskon: "percent",
+            typediskon: "persen",
             valuediskon: 0
         },
         item_orderaset: [],
diff --git a/test/vuex/acc-one-po-asset/store.js b/test/vuex/acc-one-po-asset/store.js
index ec641b2..7025cd9 100644
--- a/test/vuex/acc-one-po-asset/store.js
+++ b/test/vuex/acc-one-po-asset/store.js
@@ -1,11 +1,13 @@
 import system from "../../../apps/modules/system/system.js";
 import kontrakAsset from "./modules/kontrak-asset.js";
+import orderAsset from "./modules/order-asset.js";
 import poasset from "./modules/poasset.js";
 export const store = new Vuex.Store({
     modules: {
         system: system,
         poasset: poasset,
-        kontrakAsset: kontrakAsset
+        kontrakAsset: kontrakAsset,
+        orderAsset: orderAsset
     },
     state: {},
     mutations: {},
diff --git a/test/vuex/acc-one-receive-jasa/components/dialog-add-jasa.vue b/test/vuex/acc-one-receive-jasa/components/dialog-add-jasa.vue
index 18a47b0..885c537 100644
--- a/test/vuex/acc-one-receive-jasa/components/dialog-add-jasa.vue
+++ b/test/vuex/acc-one-receive-jasa/components/dialog-add-jasa.vue
@@ -6,24 +6,24 @@
             <v-layout row wrap>
                 <v-flex xs12>
                     <v-autocomplete
-                        v-model="temp_selected_order" :loading="loading" 
-                        :items="list_pojasa.records" hide-no-data 
-                        :search-input.sync="keyword" cache-items 
-                        outline label="Cari nomor order jasa" hide-details 
+                        v-model="temp_selected_order" :loading="loading"
+                        :items="list_pojasa.records" hide-no-data
+                        :search-input.sync="keyword" cache-items
+                        outline label="Cari nomor order jasa" hide-details
                         item-text="PurchaseOrderNumber" return-object
                     ></v-autocomplete>
                 </v-flex>
                 <v-flex xs12 mt-2>
                     <v-data-table
-                        :headers="headers" class="elevation-1" hide-actions 
-                        :items="temp_selected_order ? [temp_selected_order] : []" 
+                        :headers="headers" class="elevation-1" hide-actions
+                        :items="temp_selected_order ? [temp_selected_order] : []"
                         :expand="expand" item-key="PurchaseOrderID"
                     >
                         <template v-slot:items="props">
                             <tr @click="props.expanded = !props.expanded">
                                 <td class="text-xs-center pa-2">
                                     <v-icon>{{ props.expanded
-                                        ? "keyboard_arrow_down" 
+                                        ? "keyboard_arrow_down"
                                         : "keyboard_arrow_right"
                                     }}</v-icon>
                                 </td>
@@ -31,8 +31,8 @@
                                 <td class="text-xs-center pa-2">{{ props.item.SupplierName }}</td>
                                 <td class="text-xs-center pa-2">{{ props.item.T_KontrakJasaJenisKontrak }}</td>
                                 <td class="text-xs-center pa-2">
-                                    {{ props.item.T_KontrakJasaJenisKontrak == 'once' 
-                                        ? props.item.T_KontrakJasaEndDate 
+                                    {{ props.item.T_KontrakJasaJenisKontrak == 'once'
+                                        ? props.item.T_KontrakJasaEndDate
                                         : props.item.periode
                                     }}
                                 </td>
@@ -193,7 +193,7 @@ module.exports = {
         simpanReceive() {
             var formrojasa = JSON.parse(JSON.stringify(this.form_rojasa));
             const receiveOrder = JSON.parse(JSON.stringify(this.temp_selected_order));
-            
+
             formrojasa.TJasaID = receiveOrder.T_KontrakJasaID
             formrojasa.reference = receiveOrder.PurchaseOrderNumber
             formrojasa.typekontrak = receiveOrder.T_KontrakJasaJenisKontrak
@@ -201,10 +201,10 @@ module.exports = {
             formrojasa.enddate = receiveOrder.T_KontrakJasaEndDate
             let used = receiveOrder.T_KontrakJasaUsedCount + " / " +  receiveOrder.T_KontrakJasaJumlahPI
             formrojasa.usedcount = used
-            
+
             this.data_rojasa = receiveOrder.detail;
             this.form_rojasa = formrojasa;
-            
+
             this.temp_selected_order = null
             this.list_pojasa = {}
             this.dialog_pickjasa = false
@@ -229,14 +229,14 @@ module.exports = {
                             let current = {}
 
                             if (curr.PurchaseOrderID) {
-                                current = list.find((item) => 
+                                current = list.find((item) =>
                                     item.PurchaseOrderID == curr.PurchaseOrderID
                                 )
                                 this.temp_selected_order = current
-                            } 
+                            }
 
                             if (form.reference) {
-                                current = list.find((item) => 
+                                current = list.find((item) =>
                                     item.PurchaseOrderNumber == form.reference
                                 )
                                 this.temp_selected_order = current
@@ -248,4 +248,4 @@ module.exports = {
         }
     },
 }
-</script>
\ No newline at end of file
+</script>
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 e69de29..cdcb0f2 100644
--- a/test/vuex/acc-one-receive-order-asset/api/api.js
+++ b/test/vuex/acc-one-receive-order-asset/api/api.js
@@ -0,0 +1,20 @@
+const URL = "";
+
+async function request(endpoint, param) {
+    try {
+        const resp = await axios.post(URL + endpoint, param);
+        if (resp.status !== 200) {
+            throw new Error(resp.statusText);
+        }
+        return resp.data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function lookupOrderAssetReceived(param) {
+    return request("/lookupOrderAssetReceived", param);
+}
diff --git a/test/vuex/acc-one-receive-order-asset/components/dialog-add-attachment.vue b/test/vuex/acc-one-receive-order-asset/components/dialog-add-attachment.vue
new file mode 100644
index 0000000..cadddaa
--- /dev/null
+++ b/test/vuex/acc-one-receive-order-asset/components/dialog-add-attachment.vue
@@ -0,0 +1,198 @@
+<template>
+    <div>
+        <v-dialog v-model="dialog_attachment" persistent max-width="60vw">
+            <v-card>
+                <v-card-title class="headline grey lighten-2" primary-title>
+                    UPLOAD BUKTI TERIMA ASET
+                </v-card-title>
+                <v-card-text>
+                    <v-layout row wrap>
+                        <v-flex xs12 class="mb-2 pa-2" style="border: 1px solid black;">
+                            <input type="file" id="files" ref="files" multiple accept="image/*"
+                                v-on:change="addAttachment($event)">
+                        </v-flex>
+                        <v-flex v-for="(nota) in preview_attachment" xs4 class="pa-2"
+                            :key="nota.attach_id || nota.img_url">
+                            <div style="position: relative; padding-bottom: 35px;">
+                                <v-img :src="makeImageURL(nota)" aspect-ratio="1" contain class="grey lighten-2"
+                                    @click="fullview(nota, -1)"></v-img>
+                            </div>
+                        </v-flex>
+                        <v-flex v-for="(url, index) in attachViews" xs4 class="pa-2" :key="index">
+                            <div style="position: relative; padding-bottom: 35px;">
+                                <v-img :src="url" aspect-ratio="1" contain class="grey lighten-2"
+                                    @click="fullview(url, index)"></v-img>
+                                <v-icon color="red" class="close-button" @click="removeAttachment(index)">close</v-icon>
+                            </div>
+                        </v-flex>
+                    </v-layout>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn @click="BatalAddAttachment()" color="error" class="white--text">Batal</v-btn>
+                    <v-btn v-if="selected_roasset.ReceiveOrderPoConfirmed != 'Y'" @click="SimpanAttachment()"
+                        color="primary" class="white--text">Simpan</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <v-dialog v-model="dialog_fullview" persistent max-width="50vw">
+            <v-card>
+                <v-card-title class="headline grey lighten-2" primary-title>
+                    {{ viewtitle }}
+                    <v-spacer></v-spacer>
+                    <v-btn color="red" fab small outline @click="dialog_fullview = false">
+                        <v-icon color="red">close</v-icon>
+                    </v-btn>
+                </v-card-title>
+                <v-card-text style="max-height: 80vh; overflow-y: auto;">
+                    <div class="pa-2">
+                        <v-img :src="viewurl" contain class="grey lighten-2"></v-img>
+                    </div>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn class="mr-2" color="red" flat outline @click="dialog_fullview = false">
+                        Tutup
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<style>
+.close-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 1;
+    cursor: pointer;
+}
+</style>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            attachViews: [],
+            attachFiles: [],
+            dialog_fullview: false,
+            viewtitle: "",
+            viewurl: ""
+        }
+    },
+    computed: {
+        dialog_attachment: {
+            get() {
+                return this.$store.state.roasset.dialog_attachment
+            },
+            set(val) {
+                this.$store.commit("roasset/update_dialog_attachment", val)
+            }
+        },
+        selected_roasset: {
+            get() {
+                return this.$store.state.roasset.selected_roasset
+            },
+            set(val) {
+                this.$store.commit("roasset/update_selected_roasset", val)
+            }
+        },
+        preview_attachment: {
+            get() {
+                return this.$store.state.roasset.preview_attachment
+            },
+            set(val) {
+                this.$store.commit("roasset/update_preview_attachment", val)
+            }
+        },
+        loading_process: {
+            get() {
+                return this.$store.state.roasset.loading_process
+            },
+            set(val) {
+                this.$store.commit("roasset/update_loading_process", val)
+            }
+        }
+    },
+    methods: {
+        addAttachment(event) {
+            const files = event.target.files;
+            if (files.length == 0) {
+                return;
+            }
+
+            for (let index = 0; index < files.length; index++) {
+                const file = files[index];
+                const url = URL.createObjectURL(file);
+
+                this.attachFiles.push(file);
+                this.attachViews.push(url);
+            }
+            event.target.value = null;
+        },
+        fullview(url, index) {
+            if (index < 0) {
+                this.viewtitle = url.img_url;
+                this.viewurl = this.makeImageURL(url);
+            } else {
+                this.viewtitle = this.attachFiles[index].name;
+                this.viewurl = url;
+            }
+            this.dialog_fullview = true;
+        },
+        makeImageURL(nota) {
+            if (nota.url) {
+                return nota.url;
+            }
+
+            if (nota.src) {
+                return nota.src;
+            }
+
+            const year = new Date(nota.created).getFullYear();
+            const baseURL = BASE_URL + `/one-media/order-asset/${year}/`;
+            return baseURL + nota.img_url;
+        },
+        removeAttachment(index) {
+            URL.revokeObjectURL(this.attachViews[index]);
+            this.attachFiles.splice(index, 1);
+            this.attachViews.splice(index, 1);
+        },
+        clearAttachment() {
+            this.attachViews.forEach(function (url) {
+                URL.revokeObjectURL(url);
+            });
+            this.attachFiles = [];
+            this.attachViews = [];
+        },
+        BatalAddAttachment() {
+            this.clearAttachment();
+            this.preview_attachment = [];
+            this.dialog_attachment = false;
+        },
+        SimpanAttachment() {
+            if (!this.loading_process) {
+
+            } else {
+                let snac = { color: 'warning', msg: 'proses sedang berjalan', state: true };
+                this.$store.commit("roasset/update_snackbar", snac);
+            }
+        }
+    },
+    watch: {
+        dialog_fullview(val) {
+            if (!val) {
+                this.viewurl = "";
+                this.viewtitle = "";
+            }
+        },
+        dialog_attachment(val) {
+            if (val) {
+                this.clearAttachment();
+            }
+        }
+    }
+}
+</script>
diff --git a/test/vuex/acc-one-receive-order-asset/components/dialog-delete-order-asset.vue b/test/vuex/acc-one-receive-order-asset/components/dialog-delete-order-asset.vue
new file mode 100644
index 0000000..f180a30
--- /dev/null
+++ b/test/vuex/acc-one-receive-order-asset/components/dialog-delete-order-asset.vue
@@ -0,0 +1,64 @@
+<template>
+    <v-dialog v-model="dialog_delete" persistent width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2">DELETE RECEIVE ORDER ASSET</v-card-title>
+            <v-card-text>
+                <v-flex xs3 class="pr-2"><strong>Tanggal</strong></v-flex>
+                <v-flex xs9>: {{  }}</v-flex>
+
+                <v-flex xs3 class="pr-2"><strong>Nomor</strong></v-flex>
+                <v-flex xs9>: {{  }}</v-flex>
+
+                <v-flex xs3 class="pr-2"><strong>Nomor Referensi</strong></v-flex>
+                <v-flex xs9>: {{  }}</v-flex>
+
+                <v-flex xs3 class="pr-2"><strong>Supplier</strong></v-flex>
+                <v-flex xs9>: {{  }}</v-flex>
+
+                <v-flex xs3 class="pr-2"><strong>Catatan</strong></v-flex>
+                <v-flex xs9>: {{  }}</v-flex>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn @click="batalDelete()" color="error" class="white--text">Batal</v-btn>
+                <v-btn @click="confirmDelete()" color="primary" class="white--text">Hapus</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+
+<script>
+module.exports = {
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        dialog_delete: {
+            get() {
+                return this.$store.state.roasset.dialog_delete
+            },
+            set(val) {
+                this.$store.commit("roasset/update_dialog_delete", val)
+            }
+        },
+        selected_roasset: {
+            get() {
+                return this.$store.state.roasset.selected_roasset
+            },
+            set(val) {
+                this.$store.commit("roasset/update_selected_roasset", val)
+            }
+        }
+    },
+    methods: {
+        batalDelete() {
+            this.dialog_delete = false
+        },
+        confirmDelete() { }
+    },
+    watch: {}
+}
+</script>
diff --git a/test/vuex/acc-one-receive-order-asset/components/dialog-pick-contract.vue b/test/vuex/acc-one-receive-order-asset/components/dialog-pick-contract.vue
new file mode 100644
index 0000000..7b2b7c8
--- /dev/null
+++ b/test/vuex/acc-one-receive-order-asset/components/dialog-pick-contract.vue
@@ -0,0 +1,81 @@
+<template>
+    <v-dialog v-model="dialog_pick_contract" persistent width="50vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2">PILIH KONTRAK ORDER ASET</v-card-title>
+            <v-card-text>
+                <v-layout row wrap>
+                    <v-flex xs12>
+                        <v-autocomplete :items="[]" :loading="loading" hide-no-data cache-items outline
+                            :search-input.sync="searchkey" label="Kontrak Order Aset" return-object
+                            v-model="temp_selected" hide-details></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs12 mt-2>
+                        <v-data-table :headers="headers" :items="[]" class="elevation-1" hide-actions>
+                            <template v-slot:items="props">
+                                <tr>
+                                    <td class="text-xs-start pa-2">
+                                        {{ }}
+                                    </td>
+                                    <td class="text-xs-start pa-2">
+                                        {{ }}
+                                    </td>
+                                    <td class="text-xs-start 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="cancelPickContract()" color="error" class="white--text">Batal</v-btn>
+                <v-btn @click="pickContractOrder()" color="primary" class="white--text">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            searchkey: "",
+            loading: false,
+            temp_selected: null,
+            headers: [
+                {
+                    text: "ITEM", align: "center", sortable: false, value: "date",
+                    width: "60%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "UNIT", align: "center", sortable: false, value: "date",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "SATUAN", align: "center", sortable: false, value: "date",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        dialog_pick_contract: {
+            get() {
+                return this.$store.state.roasset.dialog_pick_contract;
+            },
+            set(val) {
+                this.$store.commit("roasset/update_dialog_pick_contract", val);
+            }
+        }
+    },
+    methods: {
+        cancelPickContract() {
+            this.dialog_pick_contract = false;
+        },
+        pickContractOrder() { }
+    },
+    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
new file mode 100644
index 0000000..1f94f37
--- /dev/null
+++ b/test/vuex/acc-one-receive-order-asset/components/dialog-receive-order-asset.vue
@@ -0,0 +1,159 @@
+<template>
+    <v-dialog v-model="dialog_receive_aset" persistent width="70vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2">FORM TERIMA ASET</v-card-title>
+            <v-card-text style="max-height: 80vh; overflow-y: auto;">
+                <v-layout row wrap>
+                    <v-flex xs4>
+                        <v-menu offset-y lazy min-width="290px" transition="scale-transition" max-width="290px"
+                            v-model="menuROdate" full-width :nudge-right="40" :close-on-content-click="false">
+                            <template v-slot:activator="{ on }">
+                                <v-text-field label="Tanggal RO" hide-details readonly v-on="on" outline
+                                    v-model="formattedRODate"></v-text-field>
+                            </template>
+                            <v-date-picker no-title @input="menuROdate = false"
+                                v-model="form_receive.date"></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex xs4 pl-2>
+                        <v-autocomplete :items="[]" hide-details outline label="Vendor" v-model="form_receive.supplier"
+                            item-text="SupplierName" item-value="SupplierID" @input=""></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs4 pl-2>
+                        <v-text-field hide-details outline placeholder="Nomor Delivery / Supplier Invoice"
+                            v-model="form_receive.reference" label="Referensi"></v-text-field>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row wrap class="mt-2">
+                    <v-flex xs2>
+                        <v-text-field hide-details outline label="No PO" placeholder="nomor po"
+                            v-model="form_receive.ponumber" readonly></v-text-field>
+                    </v-flex>
+                    <v-flex xs2 pl-2>
+                        <v-text-field hide-details outline label="Total Tagihan" placeholder="0"
+                            v-model="form_receive.totalbill" readonly></v-text-field>
+                    </v-flex>
+                    <v-flex xs2 pl-2>
+                        <v-text-field hide-details outline label="Uang Muka" placeholder="0"
+                            v-model="form_receive.downpayment" readonly></v-text-field>
+                    </v-flex>
+                    <v-flex xs2 pl-2>
+                        <v-text-field hide-details outline label="Cicilan" placeholder="0"
+                            v-model="form_receive.cicilan" readonly></v-text-field>
+                    </v-flex>
+                    <v-flex xs2 pl-2>
+                        <v-text-field hide-details outline label="Lama Kontrak (bulan)" placeholder="0"
+                            v-model="form_receive.contractlength" readonly></v-text-field>
+                    </v-flex>
+                    <v-flex xs2 pl-2>
+                        <v-text-field hide-details outline label="Tanggal Bayar" placeholder="0"
+                            v-model="form_receive.datepayment" readonly></v-text-field>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row wrap class="mt-2">
+                    <v-flex xs12>
+                        <v-textarea auto-grow rows="1" outline label="Catatan" hide-details
+                            v-model="form_receive.catatan"></v-textarea>
+                    </v-flex>
+                    <v-flex xs3 mt-2>
+                        <!-- :disabled="form_receive.supplier == ''" -->
+                         <v-btn block color="info" @click="pickKontrakAset()">
+                            PILIH KONTRAK
+                        </v-btn>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row wrap class="mt-3">
+                    <!-- <v-flex xs12 v-if="item_receive.length > 0"> -->
+                    <v-flex xs12>
+                        <v-data-table :headers="headers" :items="[]" class="elevation-1" hide-actions>
+                            <template v-slot:items="props">
+                                <tr>
+                                    <td></td>
+                                </tr>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn @click="dialog_receive_aset = false" color="error" class="white--text">Batal</v-btn>
+                <v-btn color="primary" class="white--text">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            menuROdate: false,
+            headers: [
+                {
+                    text: "ITEM", align: "center", sortable: false,
+                    value: "nopo", width: "40%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY", align: "center", sortable: false,
+                    value: "type", width: "10%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "UNIT ITEM", align: "center", sortable: false,
+                    value: "item", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "INSPEKSI", align: "center", sortable: false,
+                    value: "inspec", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false,
+                    value: "act", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        dialog_receive_aset: {
+            get() {
+                return this.$store.state.roasset.dialog_receive_aset
+            },
+            set(val) {
+                this.$store.commit("roasset/update_dialog_receive_aset", val)
+            }
+        },
+        form_receive: {
+            get() {
+                return this.$store.state.roasset.form_receive
+            },
+            set(val) {
+                this.$store.commit("roasset/update_form_receive", val)
+            }
+        },
+        item_receive: {
+            get() {
+                return this.$store.state.roasset.item_receive
+            },
+            set(val) {
+                this.$store.commit("roasset/update_item_receive", val)
+            }
+        },
+        formattedRODate() {
+            return this.formatDate(this.form_receive.date)
+        }
+    },
+    methods: {
+        formatDate(date) {
+            if (!date) return null;
+            const [year, month, day] = date.split('-');
+            return `${day}-${month}-${year}`;
+        },
+        pickKontrakAset() {
+            this.$store.commit("roasset/update_dialog_pick_contract", true);
+        }
+    }
+}
+</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 bc392ed..866101c 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
@@ -3,7 +3,7 @@
         <v-toolbar color="primary" dark>
             <v-toolbar-title class="white--text">RECEIVE ORDER ASET</v-toolbar-title>
             <v-spacer></v-spacer>
-            <v-btn icon>
+            <v-btn icon @click="openDialogReceive()">
                 <v-icon large>add_box</v-icon>
             </v-btn>
         </v-toolbar>
@@ -11,20 +11,22 @@
         <v-card class="pa-2">
             <v-layout row align-center>
                 <v-flex xs3>
-                    <v-menu v-model="menuStartdateFilter" offset-y lazy min-width="290px" transition="scale-transition" max-width="290px" full-width
-                        :nudge-right="40" :close-on-content-click="false">
+                    <v-menu v-model="menuStartdateFilter" 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="formattedStartdate" label="Tanggal Awal" hide-details readonly v-on="on" outline></v-text-field>
+                            <v-text-field label="Tanggal Awal" hide-details readonly v-on="on" outline
+                                v-model="formattedStartdate"></v-text-field>
                         </template>
                         <v-date-picker v-model="filterasset.startdate" no-title
                             @input="menuStartdateFilter = false"></v-date-picker>
                     </v-menu>
                 </v-flex>
                 <v-flex xs3 pl-2>
-                    <v-menu v-model="menuEnddateFilter" offset-y lazy min-width="290px" transition="scale-transition" max-width="290px" full-width
-                        :nudge-right="40" :close-on-content-click="false">
+                    <v-menu v-model="menuEnddateFilter" 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="formattedEnddate" label="Tanggal Akhir" hide-details readonly v-on="on" outline></v-text-field>
+                            <v-text-field v-model="formattedEnddate" label="Tanggal Akhir" hide-details readonly
+                                v-on="on" outline></v-text-field>
                         </template>
                         <v-date-picker v-model="filterasset.enddate" no-title
                             @input="menuEnddateFilter = false"></v-date-picker>
@@ -42,7 +44,48 @@
         </v-card>
 
         <v-card class="pa-2 mt-2">
-            <v-data-table :headers="headers" :items="list_roasset.records" class="elevation-1" hide-actions></v-data-table>
+            <v-data-table :headers="headers" :items="list_roasset.records" class="elevation-1" hide-actions>
+                <template v-slot:items="props">
+                    <tr>
+                        <td class="text-xs-center pa-2">
+                            {{ props.item.date }}
+                        </td>
+                        <td class="text-xs-center pa-2">
+                            {{ props.item.receiveordernumber }} <br>
+                            {{ props.item.purchaseordernumber }}
+                        </td>
+                        <td class="text-xs-center pa-2">
+                            {{ props.item.suppliername }}
+                        </td>
+                        <td class="text-xs-start pa-2">
+                            <v-layout row wrap>
+                                <v-flex xs6>
+                                    Total tagihan : {{ props.item.totaltagihan }} <br>
+                                    Besar uang muka : {{ props.item.uangmuka }} <br>
+                                </v-flex>
+                                <v-flex xs6 pl-2>
+                                    Status cicilan : {{ props.item.cicilanterbayar }} / {{ props.item.numbercicilan }} <br>
+                                    Besar cicilan : {{ props.item.besarcicilan }} <br>
+                                </v-flex>
+                            </v-layout>
+                        </td>
+                        <td class="text-xs-center pa-2">
+                            {{ props.item.status }}
+                        </td>
+                        <td class="text-xs-center pa-2">
+                            <v-tooltip bottom pr-2>
+                                <template v-slot:activator="{ on }">
+                                    <v-btn color="green" dark @click="uploadAttachment(props.item)"
+                                        style="min-width: 40px; margin: 0;" small v-on="on">
+                                        <v-icon small>attachment</v-icon>
+                                    </v-btn>
+                                </template>
+                                <span>Upload Bukti</span>
+                            </v-tooltip>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
             <v-divider class="my-1"></v-divider>
             <div class="pa-2 mt-1 text-xs-center">
                 <v-pagination v-model="currpage" :length="pagelength" :total-visible="10"></v-pagination>
@@ -53,43 +96,53 @@
             {{ snackbar.msg }}
             <v-btn class="ml-2" round flat @click="snackbar.state = false">Tutup</v-btn>
         </v-snackbar>
+
+        <dialog-receive-aset></dialog-receive-aset>
+        <dialog-add-attachment></dialog-add-attachment>
+        <dialog-delete-order-asset></dialog-delete-order-asset>
+        <dialog-pick-contract></dialog-pick-contract>
     </div>
 </template>
 
 <script>
 module.exports = {
+    components: {
+        'dialog-receive-aset': httpVueLoader('./dialog-receive-order-asset.vue'),
+        'dialog-add-attachment': httpVueLoader('./dialog-add-attachment.vue'),
+        'dialog-delete-order-asset': httpVueLoader('./dialog-delete-order-asset.vue'),
+        'dialog-pick-contract': httpVueLoader('./dialog-pick-contract.vue'),
+    },
+    mounted() {
+        this.$store.dispatch("roasset/lookupOrderAssetReceived")
+    },
     data() {
         return {
             menuStartdateFilter: false,
             menuEnddateFilter: false,
             headers: [
                 {
-                    text: "TANGGAL RO", align: "center", sortable: false,
-                    value: "date", width: "10%", class: "pa-1 blue lighten-3 white--text",
+                    text: "TANGGAL RECEIVE", align: "center", sortable: false, value: "date",
+                    width: "15%", class: "pa-1 blue lighten-3 white--text",
                 },
                 {
-                    text: "NOMOR RO", align: "center", sortable: false,
-                    value: "noro", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                    text: "NOMOR RO/PO", align: "start", sortable: false, value: "noropo",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
                 },
                 {
-                    text: "NOMOR PO", align: "center", sortable: false,
-                    value: "nopo", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                    text: "SUPPLIER", align: "center", sortable: false, value: "supplier",
+                    width: "15%", class: "pa-1 blue lighten-3 white--text",
                 },
                 {
-                    text: "SUPPLIER", align: "center", sortable: false,
-                    value: "supp", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                    text: "INFO", align: "center", sortable: false, value: "note",
+                    width: "25%", class: "pa-1 blue lighten-3 white--text",
                 },
                 {
-                    text: "CATATAN", align: "center", sortable: false,
-                    value: "note", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                    text: "STATUS", align: "center", sortable: false, value: "status",
+                    width: "10%", class: "pa-1 blue lighten-3 white--text",
                 },
                 {
-                    text: "STATUS", align: "center", sortable: false,
-                    value: "status", width: "10%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "AKSI", align: "center", sortable: false,
-                    value: "acts", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                    text: "AKSI", align: "center", sortable: false, value: "acts",
+                    width: "15%", class: "pa-1 blue lighten-3 white--text",
                 },
             ]
         }
@@ -128,7 +181,7 @@ module.exports = {
         pagelength() {
             let total = this.list_roasset.total
             if (total === undefined || total < 1) return 1
-            return Math.ceil(total/10)
+            return Math.ceil(total / 10)
         },
         formattedStartdate() {
             return this.formatDate(this.filterasset.startdate)
@@ -142,6 +195,13 @@ module.exports = {
             if (!date) return null;
             const [year, month, day] = date.split('-');
             return `${day}-${month}-${year}`;
+        },
+        openDialogReceive() {
+            this.$store.commit("roasset/update_dialog_receive_aset", true)
+        },
+        uploadAttachment(item) {
+            this.$store.commit("roasset/update_selected_roasset", item)
+            this.$store.commit("roasset/update_dialog_attachment", true);
         }
     }
 }
diff --git a/test/vuex/acc-one-receive-order-asset/index.php b/test/vuex/acc-one-receive-order-asset/index.php
index 2885b6f..1b59d1a 100644
--- a/test/vuex/acc-one-receive-order-asset/index.php
+++ b/test/vuex/acc-one-receive-order-asset/index.php
@@ -16,7 +16,7 @@
             <v-content style="background: #F5E8DF!important">
                 <v-container fluid fill-height class="px-1 py-2">
                     <v-flex xs12 fill-height pa-1>
-
+                        <main-layout></main-layout>
                     </v-flex>
                 </v-container>
             </v-content>
@@ -46,7 +46,8 @@
             methods: {},
             components: {
                 'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
-                'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue')
+                'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                'main-layout': httpVueLoader('./components/main-layout.vue')
             }
         })
     </script>
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 6813dcb..2de5791 100644
--- a/test/vuex/acc-one-receive-order-asset/modules/roasset.js
+++ b/test/vuex/acc-one-receive-order-asset/modules/roasset.js
@@ -22,7 +22,32 @@ export default {
             records: [],
             total: 0
         },
-        currpage: 1
+        currpage: 1,
+        selected_roasset: {},
+
+        /* form receive */
+        dialog_receive_aset: false,
+        form_receive: {
+            date: moment(new Date()).format('YYYY-MM-DD'),
+            supplier: "",
+            reference: "",
+            ponumber: "",
+            contractlength: 0,
+            datepayment: "",
+            cicilan: 0,
+            downpayment: 0,
+            totalbill: 0,
+            catatan: ""
+        },
+        item_receive: [],
+        dialog_pick_contract: false,
+
+        /* upload attachment */
+        dialog_attachment: false,
+        preview_attachment: [],
+
+        /* delete */
+        dialog_delete: false
     },
     mutations: {
         /* common */
@@ -45,7 +70,75 @@ export default {
         },
         update_currpage(state, val) {
             state.currpage = val
+        },
+        update_selected_roasset(state, val) {
+            state.selected_roasset = val
+        },
+
+        /* form receive */
+        update_dialog_receive_aset(state, val) {
+            state.dialog_receive_aset = val
+        },
+        update_form_receive(state, val) {
+            state.form_receive = val
+        },
+        update_item_receive(state, val) {
+            state.item_receive = val
+        },
+        update_dialog_pick_contract(state, val) {
+            state.dialog_pick_contract = val
+        },
+
+        /* attachment */
+        update_dialog_attachment(state, val) {
+            state.dialog_attachment = val
+        },
+        update_preview_attachment(state, val) {
+            state.preview_attachment = val
+        },
+
+        /* delete */
+        update_dialog_delete(state, val) {
+            state.dialog_delete = val
         }
     },
-    actions: {}
+    actions: {
+        async lookupOrderAssetReceived(context) {
+            try {
+                // const param = {
+                //     token: one_token(),
+                // }
+
+                // const resp = await api.lookupOrderAssetReceived(param);
+                // if (resp.status != "OK") {
+                //     throw new Error(resp.message);
+                // }
+
+                // context.commit("update_list_roasset", resp.data);
+
+                const dummy = {
+                    records: [
+                        {
+                            date: moment(new Date()).format('YYYY-MM-DD'),
+                            receiveordernumber: "GR-003/SDM-14/SM-1/VI/2026",
+                            purchaseordernumber: "PO-002/OPR-RL/SM-2/VI/2026",
+                            suppliername: "PT MEJA ABADI",
+                            uangmuka: 4000000,
+                            totaltagihan: 10000000,
+                            besarcicilan: 500000,
+                            numbercicilan: 12,
+                            cicilanterbayar: 0,
+                            status: "Unconfirmed"
+                        }
+                    ],
+                    total: 1
+                }
+
+                context.commit("update_list_roasset", dummy);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: false };
+                context.commit("update_snackbar", snac);
+            }
+        }
+    }
 }