first commit + add fe component vue accone

test/vuex/acc-one-faktur-v4/api/data.js

@@ -0,0 +1,181 @@
+const URL = "/one-api/mockup/purchase/faktur/Fakturv4/";
+
+export async function LookupStaff(params) {
+    try {
+        var response = await axios.post(URL + "LookupStaff", params)
+        if (response.status !== 200) {
+            return {
+                status: "ERR",
+                message: response.statusText,
+            };
+        }
+
+        let data = response.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function LookupSupplier(params) {
+    try {
+        var response = await axios.post(URL + "LookupSupplier", params)
+        if (response.status !== 200) {
+            return {
+                status: "ERR",
+                message: response.statusText
+            };
+        }
+
+        let data = response.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function LookupPO(params) {
+    try {
+        var response = await axios.post(URL + "LookupPO", params)
+        if (response.status !== 200) {
+            return {
+                status: "ERR",
+                message: response.statusText
+            };
+        }
+
+        let data = response.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function LookupDetailPO(params) {
+    try {
+        var response = await axios.post(URL + "LookupDetailPO", params)
+        if (response.status !== 200) {
+            return {
+                status: "ERR",
+                message: error.statusText
+            };
+        }
+
+        let data = response.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function LookupRO(params) {
+    try {
+        var response = await axios.post(URL + "LookupRO", params)
+        if (response.status !== 200) {
+            return {
+                status: "ERR",
+                message: response.statusText
+            };
+        }
+
+        let data = response.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function LookupItemRO(params) {
+    try {
+        var response = await axios.post(URL + "LookupItemRO", params)
+        if (response.status !== 200) {
+            return {
+                status: "ERR",
+                message: response.statusText
+            };
+        }
+
+        let data = response.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function LookupFaktur(params) {
+    try {
+        var resp = await axios.post(URL + "LookupListFaktur", params)
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+
+        let data = resp.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function LookupFakturDetail(params) {
+    try {
+        var resp = await axios.post(URL + "LookupFakturDetail", params)
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+
+        let data = resp.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function LookupAttachment(params) {
+    try {
+        const resp = await axios.post(URL + "LookupAttachment", params)
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            }
+        }
+
+        let data = resp.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}

test/vuex/acc-one-faktur-v4/api/form.js

@@ -0,0 +1,121 @@
+const URL = "/one-api/mockup/purchase/faktur/Fakturv4/";
+
+export async function CreateFaktur(params) {
+    try {
+        var resp = await axios.post(URL + "CreateFaktur", params)
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+
+        let data = resp.data
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function UpdateFaktur(params) {
+    try {
+        var resp = await axios.post(URL + "UpdateFaktur", params)
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+
+        let data = resp.data
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function DeleteFaktur(params) {
+    try {
+        var resp = await axios.post(URL + "DeleteFaktur", params)
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            }
+        }
+
+        let data = resp.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function ApproveFaktur(params) {
+    try {
+        var resp = await axios.post(URL + "ApproveFaktur", params)
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            }
+        }
+
+        let data = resp.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function RejectFaktur(params) {
+    try {
+        let resp = await axios.post(URL + "RejectFaktur", params)
+        if (resp.status !== 200) {
+            return {
+                status: 'ERR',
+                message: resp.statusText
+            }
+        }
+
+        let data = resp.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function VerifyFaktur(params) {
+    try {
+        let resp = await axios.post(URL + "VerifyFaktur", params)
+        if (resp.status !== 200) {
+            return {
+                status: 'ERR',
+                message: resp.statusText
+            }
+        }
+
+        let data = resp.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}

test/vuex/acc-one-faktur-v4/components/dialog-attachment.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <v-dialog v-model="dialog_attachment" persistent max-width="60vw">
+            <v-card>
+                <v-card-title class="headline grey lighten-2" primary-title>
+                    BUKTI PENERIMAAN
+                </v-card-title>
+                <v-card-text>
+                    <v-layout row wrap>
+                        <v-flex v-for="(docs) in preview_attachment" xs4 class="pa-2" :key="docs.attach_id">
+                            <div style="position: relative; padding-bottom: 35px;">
+                                <v-img :src="makeImgUrl(docs)" aspect-ratio="1" contain class="grey lighten-2"
+                                    @click="fullview(docs)"></v-img>
+                            </div>
+                        </v-flex>
+                    </v-layout>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn @click="dialog_attachment = false" color="error" class="white--text">Tutup</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>
+                    {{ doctitle }}
+                    <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="docurl" 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>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            dialog_fullview: false,
+            doctitle: "",
+            docurl: ""
+        }
+    },
+    computed: {
+        dialog_attachment: {
+            get() {
+                return this.$store.state.data.dialog_attachment
+            },
+            set(val) {
+                this.$store.commit("data/update_dialog_attachment", val)
+            }
+        },
+        preview_attachment: {
+            get() {
+                return this.$store.state.data.preview_attachment
+            },
+            set(val) {
+                this.$store.commit("data/update_preview_attachment", val)
+            }
+        }
+    },
+    methods: {
+        fullview(docs) {
+            this.doctitle = docs.img_url
+            this.docurl = this.makeImgUrl(docs)
+            this.dialog_fullview = true
+        },
+        makeImgUrl(docs) {
+            const year = new Date(docs.created).getFullYear()
+            let baseURL = BASE_URL;
+
+            switch (docs.category) {
+                case "4":
+                    baseURL += `/one-media/order-jasa/${year}/`
+                    return baseURL + docs.img_url
+                case "2":
+                    baseURL += `/one-media/order-inventaris/${year}/`
+                    return baseURL + docs.img_url
+                default:
+                    return null
+            }
+        }
+    },
+    watch: {
+
+    },
+}
+</script>

test/vuex/acc-one-faktur-v4/components/dialog.vue

@@ -0,0 +1,487 @@
+<template>
+    <v-dialog v-model="dialogCreate" persistent max-width="85%">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                FORM FAKTUR PO
+            </v-card-title>
+            <v-card-text class="pt-0 pb-0 mt-4">
+                <v-form ref="formCreate" v-model="validationForm" lazy-validation>
+                    <v-layout row wrap>
+                        <v-flex pr-2 xs2>
+                            <v-menu
+                                v-model="menuDateForm" 
+                                transition="scale-transition"
+                                :close-on-content-click="false"
+                                :nudge-right="40" lazy
+                                full-width offset-y
+                                max-width="290px" min-width="290px"
+                            >
+                                <template v-slot:activator="{on}">
+                                    <v-text-field
+                                        label="Tanggal Faktur" readonly
+                                        :value="DateFormatted" v-on="on"
+                                        outline hide-details
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker 
+                                    no-title v-model="form_date" 
+                                    @input="menuDateForm = false"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-menu
+                                v-model="menuDueDateForm"
+                                transition="scale-transition"
+                                :close-on-content-click="false"
+                                :nudge-right="40" lazy
+                                full-width offset-y
+                                max-width="290px" min-width="290px"
+                            >
+                                <template v-slot:activator="{on}">
+                                    <v-text-field
+                                        label="Tanggal Jatuh Tempo" readonly
+                                        :value="DueDateFormatted" v-on="on"
+                                        hide-details outline
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker 
+                                    no-title v-model="form_duedate" 
+                                    @input="menuDueDateForm = false"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-autocomplete readonly
+                                v-model="form_supplier"
+                                label="Supplier" menu-icon="mdi-chevron-down"
+                                item-text="SupplierName"
+                                :items="list_supplier.records"
+                                :rules="rules_text" outline
+                                return-object required
+                            ></v-autocomplete>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-text-field readonly
+                                v-model="form_refnumber"
+                                label="Nomor Referensi"
+                                :rules="rules_text"
+                                outline required
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-text-field
+                                v-model="form_tax_invoicenum"
+                                label="Nomor Faktur Pajak"
+                                :rules="rules_text"
+                                required outline
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex xs2>
+                            <v-menu
+                                v-model="menuTaxInvoiceDateForm"
+                                transition="scale-transition"
+                                :close-on-content-click="false"
+                                :nudge-right="40" lazy
+                                full-width offset-y
+                                max-width="290px" min-width="290px"
+                            >
+                                <template v-slot:activator="{on}">
+                                    <v-text-field
+                                        label="Tanggal Faktur Pajak" readonly
+                                        :value="TaxInvDateFormatted" v-on="on"
+                                        outline hide-details
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker 
+                                    no-title v-model="form_tax_invoicedate" 
+                                    @input="menuTaxInvoiceDateForm = false"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row wrap>
+                        <v-flex pr-2 xs2>
+                            <v-autocomplete
+                                v-model="form_disc_type"
+                                label="Tipe Diskon" menu-icon="mdi-chevron-down"
+                                item-text="SupplierName"
+                                :items="['Percentage', 'Absolute']"
+                                outline required :rules="rules_text"
+                            ></v-autocomplete>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-text-field
+                                v-if="this.form_disc_type == 'Percentage'"
+                                v-model="form_disc_percent" 
+                                label="Diskon (%)" suffix="%"
+                                :rules="rules_number" 
+                                outline type="number"
+                            ></v-text-field>
+                            <v-text-field
+                                v-else
+                                v-model="form_disc_amount"
+                                label="Nilai diskon"
+                                :rules="rules_number"
+                                outline type="number"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-text-field
+                                v-model="form_tax_percent_pph"
+                                label="Pajak Penghasilan (%)" suffix="%"
+                                :rules="rules_number"
+                                outline type="number"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-text-field
+                                v-model="form_tax_percent_ppn"
+                                label="Pajak Pendapatan (%)" suffix="%"
+                                :rules="rules_number"
+                                outline type="number"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-text-field
+                                v-model="form_shipping_cost"
+                                label="Biaya Pengiriman"
+                                :rules="rules_number"
+                                outline type="number"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex xs2>
+                            <v-text-field
+                                v-model="form_adjust_amount"
+                                label="Jumlah Penyesuaian"
+                                :rules="rules_number"
+                                outline type="number"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex xs12>
+                            <v-textarea
+                                label="Catatan Penyesuaian"
+                                v-model="form_adjust_note"
+                                outline rows="2"
+                            ></v-textarea>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row wrap>
+                        <v-flex pr-2 xs3>
+                            <v-autocomplete
+                                v-model="form_po"
+                                label="Purchase Order" menu-icon="mdi-chevron-down"
+                                item-text="PurchaseOrderNumber"
+                                :items="list_po.records" return-object
+                                outline required :rules="rules_text"
+                            ></v-autocomplete>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-text-field
+                                v-model="form_grandtotal"
+                                label="Jumlah total"
+                                :rules="rules_number"
+                                type="number" required outline
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-text-field
+                                v-model="form_paidamount"
+                                label="Jumlah dibayar"
+                                :rules="rules_number"
+                                type="number" required outline
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs2>
+                            <v-menu
+                                v-model="menuReceivedDateForm" 
+                                transition="scale-transition"
+                                :close-on-content-click="false"
+                                :nudge-right="40" lazy
+                                full-width offset-y
+                                max-width="290px" min-width="290px"
+                            >
+                                <template v-slot:activator="{on}">
+                                    <v-text-field
+                                        label="Tanggal Diterima" readonly outline
+                                        :value="ReceivedDateFormatted" v-on="on"
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker 
+                                    no-title v-model="form_receiveddate" 
+                                    @input="menuReceivedDateForm = false"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex xs3>
+                            <v-autocomplete
+                                v-model="form_receivedby"
+                                label="Diterima Oleh" menu-icon="mdi-chevron-down"
+                                item-text="M_StaffName"
+                                :items="list_staff.records"
+                                :rules="rules_text" outline
+                                return-object required
+                            ></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs12>
+                            <v-textarea
+                                label="Catatan Faktur"
+                                v-model="form_note"
+                                outline rows="2"
+                            ></v-textarea>
+                        </v-flex>
+                    </v-layout>
+                </v-form>
+                <v-flex xs2>
+                    <v-btn
+                        block color="info"
+                        :disabled="isObjectEmpty(this.form_supplier)"
+                        @click="dialogAddItem()"
+                    >
+                        TAMBAHKAN ITEM
+                    </v-btn>
+                </v-flex>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" flat @click="closeDialog()">
+                    Tutup
+                </v-btn>
+                <v-btn color="primary" dark @click="">
+                    Simpan
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+    module.exports =  {
+        components: {},
+        mounted() {
+            
+        },
+        data() {
+            return {
+                validationForm: false,
+                menuDateForm: false,
+                menuDueDateForm: false,
+                menuTaxInvoiceDateForm: false,
+                menuReceivedDateForm: false,
+                rules_text: [(v) => !!v || "Tidak boleh kosong"],
+                rules_number: [(v) => !isNaN(v) || "Tidak boleh kosong"],
+            }
+        },
+        computed: {
+            dialogCreate: {
+                get() {
+                    return this.$store.state.form.opendialog;
+                },
+                set(val) {
+                    this.$store.commit("form/update_opendialog", val);
+                }
+            },
+            form_date: {
+                get() {
+                    return this.$store.state.form.form_date;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_date", val);
+                }
+            },
+            DateFormatted() {
+                return this.formatDate(this.form_date);
+            },
+            form_duedate: {
+                get() {
+                    return this.$store.state.form.form_duedate
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_duedate", val)
+                }
+            },
+            DueDateFormatted() {
+                return this.formatDate(this.form_duedate)
+            },
+            form_supplier: {
+                get() {
+                    return this.$store.state.form.form_supplier;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_supplier", val);
+                }
+            },
+            form_refnumber: {
+                get() {
+                    return this.$store.state.form.form_refnumber;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_refnumber", val);
+                }
+            },
+            form_tax_invoicenum: {
+                get() {
+                    return this.$store.state.form.form_tax_invoicenum;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_tax_invoicenum", val);
+                }
+            },
+            form_tax_invoicedate: {
+                get() {
+                    return this.$store.state.form.form_tax_invoicedate;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_tax_invoicedate", val);
+                }
+            },
+            TaxInvDateFormatted() {
+                return this.formatDate(this.form_tax_invoicedate);
+            },
+            form_disc_type: {
+                get() {
+                    return this.$store.state.form.form_disc_type;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_disc_type", val);
+                }
+            },
+            form_disc_percent: {
+                get() {
+                    return this.$store.state.form.form_disc_percent;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_disc_percent", val);
+                }
+            },
+            form_disc_amount: {
+                get() {
+                    return this.$store.state.form.form_disc_amount;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_disc_amount", val);
+                }
+            },
+            form_tax_percent_pph: {
+                get() {
+                    return this.$store.state.form.form_tax_percent_pph;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_tax_percent_pph", val);
+                }
+            },
+            form_tax_percent_ppn: {
+                get() {
+                    return this.$store.state.form.form_tax_percent_ppn;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_tax_percent_ppn", val);
+                }
+            },
+            form_shipping_cost: {
+                get() {
+                    return this.$store.state.form.form_shipping_cost;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_shipping_cost", val);
+                }
+            },
+            form_adjust_amount: {
+                get() {
+                    return this.$store.state.form.form_adjust_amount;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_adjust_amount", val);
+                }
+            },
+            form_adjust_note: {
+                get() {
+                    return this.$store.state.form.form_adjust_note;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_adjust_note", val);
+                }
+            },
+            form_po: {
+                get() {
+                    return this.$store.state.form.form_po;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_po", val)
+                }
+            },
+            form_grandtotal: {
+                get() {
+                    return this.$store.state.form.form_grandtotal;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_grandtotal", val);
+                }
+            },
+            form_paidamount: {
+                get() {
+                    return this.$store.state.form.form_paidamount;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_paidamount", val);
+                }
+            },
+            form_note: {
+                get() {
+                    return this.$store.state.form.form_note;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_note", val);
+                }
+            },
+            form_receiveddate: {
+                get() {
+                    return this.$store.state.form.form_receiveddate;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_receiveddate", val);
+                }
+            },
+            ReceivedDateFormatted() {
+                return this.formatDate(this.form_receiveddate);
+            },
+            form_receivedby: {
+                get() {
+                    return this.$store.state.form.form_receivedby;
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_receivedby", val);
+                }
+            },
+            list_supplier() {
+                return this.$store.state.data.list_supplier;
+            },
+            list_staff() {
+                return this.$store.state.data.list_staff;
+            },
+            list_po() {
+                return this.$store.state.data.list_po;
+            }
+        },
+        methods: {
+            closeDialog() {
+                this.dialogCreate = false
+            },
+            formatDate(date) {
+                if (!date) return null;
+
+                const [year, month, day] = date.split("-");
+                return `${day}-${month}-${year}`;
+            },
+            dialogAddItem() {
+
+            },
+            isObjectEmpty(obj) {
+                return Object.keys(obj).length === 0 && obj.constructor === Object;
+            }
+        },
+        watch: {
+
+        }
+    }
+</script>

test/vuex/acc-one-faktur-v4/components/dialogItem.vue

@@ -0,0 +1,263 @@
+<template>
+    <v-dialog persistent max-width="60%" v-model="dialog_item">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                TAMBAH ITEM
+            </v-card-title>
+
+            <v-card-text>
+                <v-layout row wrap>
+                    <v-flex pr-2 xs6>
+                        <v-autocomplete
+                            v-model="form_ro"
+                            label="Cari Receive Order"
+                            return-object outline @input="lookupItem"
+                            :items="list_ro.records"
+                            item-text="ReceiveOrderPoNumber"
+                        ></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs6>
+                        <v-text-field
+                            v-model="search_item"
+                            label="Cari Item"
+                            outline hide-details
+                        ></v-text-field>
+                    </v-flex>
+
+                    <v-flex xs12>
+                        <v-data-table
+                            v-model="selected_item"
+                            :headers="header"
+                            :items="list_item.records" select-all
+                            :loading="false" item-key="ReceiveOrderPoDetailID"
+                            hide-actions class="elevation-1"
+                        >
+                            <template v-slot:headers="props">
+                                <tr>
+                                    <th width="5%" class="blue lighten-3 white--text">
+                                        <v-checkbox
+                                            :input-value="props.all" primary hide-details
+                                            :indeterminate="props.indeterminate" @click.stop="checkItemAll"
+                                        ></v-checkbox>
+                                    </th>
+                                    <th
+                                        v-for="header in props.headers" :class="header.class"
+                                        :key="header.text" :width="header.width">
+                                        {{ header.text }}
+                                    </th>
+                                </tr>
+                            </template>
+                            <template v-slot:items="props">
+                                <tr :active="props.selected" @click="">
+                                    <td>
+                                        <v-checkbox
+                                            :input-value="props.selected"
+                                            primary hide-details
+                                            @click.stop="checkPerItem(props.item)"
+                                        ></v-checkbox>
+                                    </td>
+                                    <td class="text-xs-center">{{ props.item.M_ItemCode }}</td>
+                                    <td class="text-xs-center">{{ props.item.M_ItemDesc }}</td>
+                                    <td class="text-xs-center">Rp {{ toRupiah(props.item.ReceiveOrderPoDetailPrice) }}</td>
+                                    <td class="text-xs-center">{{ props.item.ReceiveOrderPoDetailQty }} {{ props.item.ReceiveOrderPoItemUnitName }}</td>
+                                </tr>
+                            </template>
+                        </v-data-table>
+                        <div class="text-xs-center my-2">
+                            <v-pagination v-model="page_item" :length="length_page" :total-visible="5"></v-pagination>
+                        </div>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" flat @click="closeDialogItem()">Tutup</v-btn>
+                <v-btn color="success" flat @click="tambahItem()">Tambahkan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+    module.exports = {
+        mounted() {
+            
+        },
+        data() {
+            return {
+                temp: [],
+                header: [
+                    {
+                        text: "KODE ITEM",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "15%",
+                        class: "blue lighten-3 white--text",
+                    },
+                    {
+                        text: "NAMA ITEM",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "35%",
+                        class: "blue lighten-3 white--text",
+                    },
+                    {
+                        text: "PRICE",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "30%",
+                        class: "blue lighten-3 white--text",
+                    },
+                    {
+                        text: "QTY",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "15%",
+                        class: "blue lighten-3 white--text",
+                    },
+                ]
+            }
+        },
+        computed: {
+            search_item: {
+                get() {
+                    return this.$store.state.data.search_item;
+                },
+                set(val) {
+                    this.$store.commit("data/update_search_item", val)
+                }
+            },
+            dialog_item: {
+                get() {
+                    return this.$store.state.form.dialog_item
+                },
+                set(val) {
+                    this.$store.commit("form/update_dialog_item", val)
+                }
+            },
+            form_ro: {
+                get() {
+                    return this.$store.state.form.form_ro
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_ro", val)
+                }
+            },
+            selected_item: {
+                get() {
+                    return this.$store.state.data.selected_item
+                },
+                set(val) {
+                    this.$store.commit("data/update_selected_item", val)
+                }
+            },
+            page_item: {
+                get() {
+                    return this.$store.state.data.page_item
+                },
+                set(val) {
+                    this.$store.commit("data/update_page_item", val)
+                    this.$store.dispatch("data/getListItemRO")
+                }
+            },
+            length_page() {
+                let total = this.list_item.total
+                if (total == undefined || total == 0) return 1
+                return Math.ceil(total/5)
+            },
+            list_ro() {
+                return this.$store.state.data.list_ro;
+            },
+            list_item() {
+                return this.$store.state.data.list_item;
+            }
+        },
+        methods: {
+            closeDialogItem() {
+                this.dialog_item = false
+                this.selected_item = []
+            },
+            lookupItem() {
+                this.$store.dispatch("data/getListItemRO")
+            },
+            toRupiah(data) {
+                // Input validation
+                if (!data) return '0,00'
+                
+                // Ensure we're working with a number
+                if (typeof data !== 'number') {
+                    data = parseFloat(data)
+                }
+                
+                // Handle invalid numbers
+                if (isNaN(data)) return '0,00'
+                
+                // Convert to string with exactly 2 decimal places without rounding
+                // This preserves the exact value for display
+                const parts = data.toString().split('.')
+                const wholePart = parts[0]
+                let decimalPart = parts.length > 1 ? parts[1] : '00'
+                
+                // Ensure we have exactly 2 decimal digits for display
+                if (decimalPart.length > 2) {
+                    decimalPart = decimalPart.substring(0, 2)
+                } else if (decimalPart.length < 2) {
+                    decimalPart = decimalPart.padEnd(2, '0')
+                }
+                
+                // Format the whole number part with dots as thousand separators
+                const formatted = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+                
+                // Return the formatted number
+                return `${formatted},${decimalPart}`
+            },
+            tambahItem() {
+                let item = this.selected_item
+                this.$store.commit("form/update_form_item", item)
+                this.dialog_item = false
+                this.selected_item = []
+            },
+            checkPerItem(item){
+                const currentSelected = [...this.selected_item]
+                const index = currentSelected.findIndex(selected => selected.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID)
+                
+                if (index > -1) {
+                    currentSelected.splice(index, 1) // Item is selected, remove it
+                } else {
+                    currentSelected.push(item) // Item is not selected, add it
+                }
+                
+                this.selected_item = currentSelected
+            },
+            checkItemAll() {
+                const allItems = this.list_item.records
+                const currentSelected = this.selected_item
+                
+                const allSelected = allItems.length === currentSelected.length
+                
+                if (allSelected) {
+                    this.selected_item = []
+                } else {
+                    this.selected_item = [...allItems]
+                }
+            },
+            fn_searchItemRO: _.debounce(function () {
+                this.$store.dispatch("data/getListItemRO")
+            }, 1000)
+        },
+        watch: {
+            search_item(val, old) {
+                if (val === old) return;
+                if (!val) return
+                console.log("search");
+
+                this.fn_searchItemRO()
+            }
+        }
+    }
+</script>

test/vuex/acc-one-faktur-v4/components/dialogform.vue

@@ -0,0 +1,476 @@
+<template>
+    <v-dialog v-model="dialogCreate" persistent max-width="90%">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                {{ this.is_create ? "FORM PURCHASE INVOICE" : "EDIT FORM PURCHASE INVOICE" }}
+            </v-card-title>
+
+            <v-card-text class="pt-0 pb-0 mt-4">
+                <v-form ref="formCreate" v-model="validationForm" lazy-validation>
+                    <v-layout row wrap>
+                        <v-flex pr-2 xs3>
+                            <v-menu readonly
+                                v-model="menuDateForm" transition="scale-transition"
+                                full-width offset-y lazy :nudge-right="40"
+                                max-width="290px" min-width="290px"
+                                :close-on-content-click="false"
+                            >
+                                <template v-slot:activator="{on}">
+                                    <v-text-field
+                                        label="Tanggal" readonly v-on="on"
+                                        outline hide-details :value="DateFormated"
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker readonly
+                                    no-title v-model="form_faktur.form_date" @input="menuDateForm = false"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex pr-2 xs3>
+                            <v-menu readonly
+                                v-model="menuDueDateForm" transition="scale-transition"
+                                full-width offset-y lazy :nudge-right="40"
+                                max-width="290px" min-width="290px"
+                                :close-on-content-click="false"
+                            >
+                                <template v-slot:activator="{on}">
+                                    <v-text-field
+                                        label="Tanggal Jatuh Tempo" readonly v-on="on"
+                                        outline hide-details :value="DueDateFormated"
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker readonly
+                                    no-title v-model="form_faktur.form_duedate"
+                                    @input="menuDueDateForm = false"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex pr-2 xs3>
+                            <v-menu
+                                v-model="menuDraftDateForm" transition="scale-transition"
+                                full-width offset-y lazy :nudge-right="40"
+                                max-width="290px" min-width="290px"
+                                :close-on-content-click="false"
+                            >
+                                <template v-slot:activator="{on}">
+                                    <v-text-field
+                                        label="Tanggal Rencana Bayar" readonly v-on="on"
+                                        :value="DraftDateFormated" outline :rules="rules_text"
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker
+                                    no-title v-model="form_faktur.form_draftdate"
+                                    @input="menuDraftDateForm = false"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex pr-2 xs3>
+                            <v-autocomplete
+                                v-model="form_faktur.form_supplier"
+                                label="Supplier" menu-icon="mdi-chevron-down"
+                                item-text="SupplierName" @input="searchPO"
+                                :items="list_supplier.records" readonly
+                                :rules="rules_text" outline
+                                return-object required
+                            ></v-autocomplete>
+                        </v-flex>
+
+                        <!-- 2nd row -->
+                        <v-flex pr-2 xs3>
+                            <v-text-field
+                                v-model="form_faktur.form_po.ReceiveOrderPoNumber"
+                                label="Nomor GRN" outline :rules="rules_text" readonly
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs3>
+                            <v-text-field
+                                v-model="form_faktur.form_refnumber" readonly
+                                label="Nomor Referensi Penerimaan" outline :rules="rules_text"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs3>
+                            <v-text-field
+                                v-model="form_faktur.form_supplier_invoicenum"
+                                label="Nomor Invoice Supplier" outline :rules="rules_text"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex pr-2 xs3>
+                            <v-menu
+                                v-model="menuSupplierDateForm" transition="scale-transition"
+                                full-width offset-y lazy :nudge-right="40"
+                                max-width="290px" min-width="290px"
+                                :close-on-content-click="false"
+                            >
+                                <template v-slot:activator="{on}">
+                                    <v-text-field
+                                        label="Tanggal Invoice Supplir" readonly v-on="on"
+                                        :value="SupplierInvoiceDateFormated" outline :rules="rules_text"
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker
+                                    no-title v-model="form_faktur.form_supplier_invoicedate"
+                                    @input="menuSupplierDateForm = false"
+                                ></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+
+                        <!-- 5th row -->
+                        <v-flex xs12>
+                            <v-textarea
+                                v-model="form_faktur.form_note"
+                                label="Catatan" outline rows="2"
+                            ></v-textarea>
+                        </v-flex>
+                    </v-layout>
+                </v-form>
+                <v-data-table
+                    v-if="form_item.length > 0"
+                    :headers="headers" hide-actions
+                    :items="form_item" class="elevation-1 mt-2"
+                    item-key="ReceiveOrderPoDetailID"
+                >
+                    <template slot="items" slot-scope="props">
+                        <tr>
+                            <td class="text-xs-center">{{ props.item.PurchaseOrderNumber }}</td>
+                            <td class="text-xs-center">{{ props.item.M_ItemDesc }}</td>
+                            <td class="text-xs-center">{{ props.item.ReceiveOrderPoDetailQty }} {{ props.item.ReceiveOrderPoItemUnitName }} </td>
+                            <td class="text-xs-right">Rp. {{ toRupiah(props.item.ReceiveOrderPoDetailPrice) }}</td>
+                            <td class="text-xs-right">
+                                <kbd v-if="props.item.PurchaseOrderSummaryDiscountType == 'P'">{{ props.item.Discount }}%</kbd>
+                                Rp. {{ calcItemDisc(props.item) }}
+                            </td>
+                            <td class="text-xs-right">Rp. {{ calcSubtal(props.item) }}</td>
+                            <td class="text-xs-right">Rp. {{ calcTotal(props.item) }}</td>
+                        </tr>
+                    </template>
+                    <template v-slot:footer>
+                        <tr>
+                            <td :colspan="6">
+                                <strong class="ml-2">SUBTOTAL</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_subtotal) }}</strong>
+                            </td>
+                        </tr>
+                        <tr v-if="form_faktur.form_shipping_cost > 0.00">
+                            <td :colspan="6">
+                                <strong class="ml-2">BIAYA PENGIRIMAN</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_shipping_cost) }}</strong>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td :colspan="6">
+                                <strong class="ml-2">DISKON</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_disc_amount) }}</strong>
+                            </td>
+                        </tr>
+                        <!-- <tr>
+                            <td :colspan="6" class="text-xs-right">
+                                <strong class="ml-2">PAJAK (PPN)</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_tax_amount_ppn) }}</strong>
+                            </td>
+                        </tr> -->
+                        <!-- <tr>
+                            <td :colspan="6" class="text-xs-right">
+                                <strong class="ml-2">PAJAK PENGHASILAN (PPH)</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_tax_amount_pph) }}</strong>
+                            </td>
+                        </tr> -->
+                        <tr>
+                            <td :colspan="6">
+                                <strong class="ml-2">PAJAK</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_tax_amount_ppn + form_faktur.form_tax_amount_pph) }}</strong>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td :colspan="6">
+                                <strong class="ml-2">GRAND TOTAL</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_grandtotal) }}</strong>
+                            </td>
+                        </tr>
+                    </template>
+                </v-data-table>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" flat @click="closeDialog()" :disabled="isSubmitting">
+                    Tutup
+                </v-btn>
+                <v-btn color="primary" dark @click="simpanFaktur()" :disabled="isSubmitting" :loading="isSubmitting">
+                    Simpan
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+    module.exports = {
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                isSubmitting: false,
+                validationForm: false,
+                menuDateForm: false,
+                menuDueDateForm: false,
+                menuDraftDateForm: false,
+                menuTaxDateForm: false,
+                menuSupplierDateForm: false,
+                rules_text: [(v) => !!v || "Tidak boleh kosong"],
+                rules_number: [(v) => !isNaN(v) || "Tidak boleh kosong"],
+                headers: [
+                    {
+                        text: 'NOMOR PO', align: 'center', sortable: false, value: 'item',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'ITEM', align: 'center', sortable: false, value: 'item',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'QTY', align: 'center', sortable: false, value: 'qty',
+                        width: '10%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'HARGA', align: 'center', sortable: false, value: 'price',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'DISKON', align: 'center', sortable: false, value: 'disc',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'HARGA DISKON', align: 'center', sortable: false, value: 'pricedisc',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'JUMLAH', align: 'center', sortable: false, value: 'total',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    }
+                ]
+            }
+        },
+        computed: {
+            dialogCreate: {
+                get() {
+                    return this.$store.state.form.opendialog;
+                },
+                set(val) {
+                    this.$store.commit("form/update_opendialog", val)
+                }
+            },
+            form_faktur: {
+                get() {
+                    return this.$store.state.form.form_faktur
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_faktur", val)
+                }
+            },
+            dialog_item: {
+                get() {
+                    return this.$store.state.form.dialog_item;
+                },
+                set(val) {
+                    this.$store.commit("form/update_dialog_item", val)
+                }
+            },
+            form_item: {
+                get() {
+                    return this.$store.state.form.form_item
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_item", val)
+                }
+            },
+            is_create: {
+                get() {
+                    return this.$store.state.form.is_create
+                },
+                set(val) {
+                    this.$store.commit("form/update_is_create", val)
+                }
+            },
+            DateFormated() {
+                return this.formatDate(this.form_faktur.form_date);
+            },
+            DueDateFormated() {
+                return this.formatDate(this.form_faktur.form_duedate);
+            },
+            SupplierInvoiceDateFormated() {
+                return this.formatDate(this.form_faktur.form_supplier_invoicedate);
+            },
+            DraftDateFormated() {
+                return this.formatDate(this.form_faktur.form_draftdate);
+            },
+            list_supplier() {
+                return this.$store.state.data.list_supplier;
+            },
+            list_po() {
+                return this.$store.state.data.list_po;
+            },
+            rupiah() {
+                return this.toRupiah(this.form_faktur.form_grandtotal);
+            }
+        },
+        methods: {
+            simpanFaktur() {
+                if (this.$refs.formCreate.validate()) {
+                    this.isSubmitting = true;
+                    console.log("isSubmitting should be true=> ", this.isSubmitting)
+
+                    if (this.is_create) {
+                        this.$store.dispatch("form/createFaktur")
+                        this.isSubmitting=false;
+                        console.log("isSubmitting should be false=> ", this.isSubmitting)
+                    } else {
+                        this.$store.dispatch("form/updateFaktur")
+                        this.isSubmitting=false;
+                    }
+                }
+            },
+            closeDialog() {
+                this.dialogCreate = false
+                this.$store.commit("data/update_list_item", {records: [], total: 0})
+                this.$store.dispatch("form/resetForm")
+                this.$refs.formCreate.resetValidation()
+            },
+            formatDate(date) {
+                if (!date) return null
+                const [year, month, day] = date.split("-")
+                return `${day}-${month}-${year}`;
+            },
+            searchPO() {
+                /* add tanggal jatuh tempo */
+                let faktur = JSON.parse(JSON.stringify(this.form_faktur));
+                let supplier_top = faktur.form_supplier.SupplierTermOfPayment;
+
+                let tempdate = new Date(faktur.form_date);
+                tempdate.setDate(tempdate.getDate() + Number(supplier_top));
+
+                faktur.form_duedate = tempdate.toISOString().split('T')[0];
+                this.form_faktur = faktur;
+
+                /* get listting po */
+                this.$store.dispatch("data/getListPO");
+            },
+            detailPO() {
+                this.$store.dispatch("data/getDetailPO");
+                this.form_item = []
+                this.$store.commit("form/update_form_ro", {})
+                this.$store.commit("data/update_list_item", {records: [], total: 0})
+            },
+            isObjectEmpty(obj) {
+                return Object.keys(obj).length === 0 && obj.constructor === Object;
+            },
+            dialogAddItem() {
+                this.dialog_item = true
+                this.$store.dispatch("data/getListRO");
+                this.$store.commit("data/update_selected_item", this.form_item)
+            },
+            deleteItemFaktur(item) {
+                let arr = this.form_item
+                if (!arr) {
+                    return
+                }
+
+                let newArr = arr.filter(x => x.ReceiveOrderPoDetailID !== item.ReceiveOrderPoDetailID)
+                this.form_item = newArr
+            },
+            toRupiah(data) {
+                // Input validation
+                if (!data) return '0,00'
+
+                // Ensure we're working with a number
+                if (typeof data !== 'number') {
+                    data = parseFloat(data)
+                }
+
+                // Handle invalid numbers
+                if (isNaN(data)) return '0,00'
+
+                // Convert to string with exactly 2 decimal places without rounding
+                // This preserves the exact value for display
+                const parts = data.toString().split('.')
+                const wholePart = parts[0]
+                let decimalPart = parts.length > 1 ? parts[1] : '00'
+
+                // Ensure we have exactly 2 decimal digits for display
+                if (decimalPart.length > 2) {
+                    decimalPart = decimalPart.substring(0, 2)
+                } else if (decimalPart.length < 2) {
+                    decimalPart = decimalPart.padEnd(2, '0')
+                }
+
+                // Format the whole number part with dots as thousand separators
+                const formatted = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+
+                // Return the formatted number
+                return `${formatted},${decimalPart}`
+            },
+            calcItemDisc(item) {
+                if (item.PurchaseOrderSummaryDiscountType == 'R') {
+                    this.form_item.find(a => a.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID).disc_amount = item.Discount
+                    return this.toRupiah(item.Discount)
+                }
+
+                let d = (Number(item.ReceiveOrderPoDetailPrice) * Number(item.Discount)) / 100
+                this.form_item.find(a => a.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID).disc_amount = d
+                return this.toRupiah(d.toString())
+            },
+            calcSubtal(item) {
+                price = Number(item.ReceiveOrderPoDetailPrice)
+                disc = Number(item.Discount)
+
+                if (item.PurchaseOrderSummaryDiscountType == 'R') {
+                    return this.toRupiah((price - disc).toString())
+                }
+
+                let d = (price * disc) / 100
+                return this.toRupiah((price - d).toString())
+            },
+            calcTotal(item) {
+                qty = Number(item.ReceiveOrderPoDetailQty)
+                price = Number(item.ReceiveOrderPoDetailPrice)
+                disc = Number(item.Discount)
+                let tl = 0
+
+                if (item.PurchaseOrderSummaryDiscountType == 'R') {
+                    tl = qty * (price - disc)
+                    this.form_item.find(a => a.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID).subtotal = tl
+                    return this.toRupiah((tl).toString())
+                }
+
+                let d = (price * disc) / 100
+                tl = qty * (price - d)
+                this.form_item.find(a => a.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID).subtotal = tl
+                return this.toRupiah((tl).toString())
+            },
+            fn_calcSummary: _.debounce(function () {
+                this.$store.dispatch("form/calcSummary")
+            }, 1000),
+            fn_adjust: _.debounce(function () {
+                this.$store.dispatch("form/calcSummary")
+            }, 1000)
+        },
+        watch: {
+            form_item(newValue, oldValue) {
+                this.fn_calcSummary();
+            },
+        }
+    }
+</script>

test/vuex/acc-one-faktur-v4/components/listing.vue

@@ -0,0 +1,477 @@
+<template>
+    <div style="width: 100%;">
+        <v-toolbar color="primary" dark>
+            <v-toolbar-title class="white--text">PURCHASE INVOICE</v-toolbar-title>
+            <v-spacer></v-spacer>
+           <!-- <v-btn icon @click="newFaktur()">
+                <v-icon large>add_box</v-icon>
+            </v-btn> -->
+        </v-toolbar>
+
+        <v-card class="pa-2">
+            <v-layout row wrap>
+                <v-flex xs2 pr-2>
+                    <v-menu
+                        v-model="filterDateForm" transition="scale-transition"
+                        full-width offset-y lazy :nudge-right="40"
+                        max-width="290px" min-width="290px"
+                        :close-on-content-click="false"
+                    >
+                        <template v-slot:activator="{on}">
+                            <v-text-field
+                                label="Tanggal Awal" readonly v-on="on"
+                                outline hide-details :value="DateFormated"
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker
+                            no-title v-model="filter.date" @input="filterDateForm = false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs2 pr-2>
+                    <v-menu
+                        v-model="filterEndDateForm" transition="scale-transition"
+                        full-width offset-y lazy :nudge-right="40"
+                        max-width="290px" min-width="290px"
+                        :close-on-content-click="false"
+                    >
+                        <template v-slot:activator="{on}">
+                            <v-text-field
+                                label="Tanggal Akhir" readonly v-on="on"
+                                outline hide-details :value="EndDateFormated"
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker
+                            no-title v-model="filter.enddate" @input="filterEndDateForm = false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs3 pr-2>
+                    <v-autocomplete
+                        v-model="filter.supplier" label="Supplier" hide-details item-value="SupplierID"
+                        :items="list_supplier.records" outline item-text="SupplierName" clearable
+                    ></v-autocomplete>
+                </v-flex>
+                <v-flex xs2 pr-2>
+                    <v-autocomplete
+                        v-model="filter.status" label="Status" hide-details
+                        :items="statusFaktur" outline
+                    ></v-autocomplete>
+                </v-flex>
+                <v-flex xs3>
+                    <v-layout row justify-space-between>
+                        <v-flex xs10 pr-2>
+                            <v-text-field
+                                v-model="filter.nomor" hide-details outline
+                                label="Nomor Faktur / Delivery / Supplier Invoice"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex xs2>
+                            <v-btn
+                                dark color="primary" @click="searchFaktur()"
+                                style="height: 40px; min-width: 40px;"
+                            >
+                                <v-icon>search</v-icon>
+                            </v-btn>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+        <v-card class="pa-2 mt-2">
+            <v-data-table
+                :headers="headers" :items="list_faktur.records"
+                hide-actions class="elevation-1 mb-2"
+            >
+                <template v-slot:items="props">
+                    <tr>
+                        <td class="text-xs-center pa-2">{{ props.index + 1}}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.SupplierInvoiceNumber }}</td>
+                        <td class="text-xs-center pa-2">{{ deFormatedDate(props.item.SupplierInvoiceDate) }}</td>
+                        <td class="text-xs-center pa-2">{{ deFormatedDate(props.item.SupplierInvoiceDueDate) }}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.SupplierName }}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.WarehouseName }}</td>
+                        <td class="text-xs-center pa-2 text-truncate">{{ props.item.SupplierInvoiceNote }}</td>
+                        <td class="text-xs-center pa-2">Rp. {{ toRupiah(props.item.SupplierInvoiceGrandTotal) }}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.SupplierInvoiceStatus }}</td>
+                        <td class="text-xs-center pa-2">
+                            <v-layout align-center justify-center row fill-height>
+                                <v-tooltip bottom class="pr-1">
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn
+                                            color="info" dark small v-on="on"
+                                            style="min-width: 40px; margin: 0;"
+                                            @click="viewAttachment(props.item)"
+                                        >
+                                            <v-icon small>attachment</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Bukti Penerimaan</span>
+                                </v-tooltip>
+                                <div v-show="props.item.SupplierInvoiceStatus == 'Draft'">
+                                    <v-tooltip bottom pr-2>
+                                        <template v-slot:activator="{on}">
+                                            <v-btn
+                                                color="warning" dark small v-on="on"
+                                                style="min-width: 40px; margin: 0;"
+                                                @click="editFaktur(props.item)"
+                                            >
+                                                <v-icon small>edit</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Edit Draft</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom pr-2>
+                                        <template v-slot:activator="{on}">
+                                            <v-btn
+                                                color="success" dark small v-on="on"
+                                                style="min-width: 40px; margin: 0;"
+                                                @click="fakturVerify(props.item)"
+                                            >
+                                                <v-icon small>send</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Verifikasi Draft</span>
+                                    </v-tooltip>
+                                </div>
+                                <div v-show="props.item.SupplierInvoiceStatus == 'Verified'">
+                                    <v-tooltip bottom pr-2>
+                                        <template v-slot:activator="{on}">
+                                            <v-btn
+                                                color="success" dark small v-on="on"
+                                                style="min-width: 40px; margin: 0;"
+                                                @click="fakturApprove(props.item)"
+                                            >
+                                                <v-icon small>done_all</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Approve Faktur</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom pr-2>
+                                        <template v-slot:activator="{on}">
+                                            <v-btn
+                                                color="error" dark small v-on="on"
+                                                style="min-width: 40px; margin: 0;"
+                                                @click="fakturReject(props.item)"
+                                            >
+                                                <v-icon small>block</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Tolak Faktur</span>
+                                    </v-tooltip>
+                                </div>
+                                <div v-show="props.item.SupplierInvoiceStatus == 'Approved'">
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{on}">
+                                            <v-btn
+                                                style="min-width: 40px; margin: 0;"
+                                                color="blue" small v-on="on" dark
+                                                @click="viewFaktur(props.item)"
+                                            >
+                                                <v-icon small>visibility</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Detail Faktur</span>
+                                    </v-tooltip>
+                                </div>
+                            </v-layout>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <v-divider></v-divider>
+            <div class="pa-2 mt-2 text-xs-center">
+                <v-pagination v-model="page_list" :length="list_length" :total-visible="10"></v-pagination>
+            </div>
+        </v-card>
+
+        <dialog-form></dialog-form>
+        <dialog-item></dialog-item>
+        <dialog-view></dialog-view>
+        <dialog-attachment></dialog-attachment>
+
+        <v-snackbar
+            v-model="snack.isOpen" :timeout="3000" :multi-line="false"
+            :vertical="false" :top="true" :color="snack.color"
+        >
+            {{ snack.message }}
+            <v-btn class="pl-2" flat @click="closeSnackbar()">Tutup</v-btn>
+        </v-snackbar>
+
+        <v-dialog v-model="confirmDialog" persistent max-width="50%">
+            <v-card>
+                <v-card-title class="headline grey lighten-2" primary-title>
+                    KONFIRMASI HAPUS FAKTUR
+                </v-card-title>
+                <v-card-text class="pt-0 pb-0 mt-4">
+                    <h4>Apakah anda yakin ingin menghapus faktur no: {{ this.fakturdelete.SupplierInvoiceNumber }}</h4>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="error" flat @click="confirmDialog = false">
+                        Batal
+                    </v-btn>
+                    <v-btn color="primary" dark @click="deleteFaktur()">
+                        Hapus
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<style scoped>
+.text-truncate {
+    max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>
+
+<script>
+    module.exports = {
+        components: {
+            "dialog-form": httpVueLoader("./dialogform.vue"),
+            "dialog-item": httpVueLoader("./dialogItem.vue"),
+            "dialog-view": httpVueLoader("./viewFaktur.vue"),
+            "dialog-attachment": httpVueLoader("./dialog-attachment.vue"),
+        },
+        mounted() {
+            this.$store.dispatch("data/getListSupplier")
+            this.$store.dispatch("data/getListFaktur")
+        },
+        data() {
+            return {
+                filterDateForm: false,
+                filterEndDateForm: false,
+                confirmDialog: false,
+                fakturdelete: {},
+                statusFaktur: ['All', 'Draft', 'Verified', 'Approved', 'Rejected', 'Scheduled', 'Paid', 'Partially Paid', 'Canceled'],
+                headers: [
+                    {
+                        text: 'NO', align: 'center', sortable: false, value: 'no',
+                        width: '5%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'NOMOR FAKTUR', align: 'center', sortable: false, value: 'nomor',
+                        width: '10%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'TANGGAL', align: 'center', sortable: false, value: 'tanggal',
+                        width: '10%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'JATUH TEMPO', align: 'center', sortable: false, value: 'jatuhtempo',
+                        width: '10%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'SUPPLIER', align: 'center', sortable: false, value: 'supplier',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'GUDANG PENERIMA', align: 'center', sortable: false, value: 'warehouse',
+                        width: '10%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'CATATAN', align: 'center', sortable: false, value: 'supplier',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'TOTAL', align: 'center', sortable: false, value: 'status',
+                        width: '10%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'STATUS', align: 'center', sortable: false, value: 'status',
+                        width: '5%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'AKSI', align: 'center', sortable: false, value: 'aksi',
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                ]
+            }
+        },
+        computed: {
+            dialogCreate: {
+                get() {
+                    return this.$store.state.form.opendialog;
+                },
+                set(val) {
+                    this.$store.commit("form/update_opendialog", val);
+                }
+            },
+            snack: {
+                get() {
+                    return this.$store.state.data.snack;
+                },
+                set(val) {
+                    this.$store.commit("data/update_snack", val)
+                }
+            },
+            page_list: {
+                get() {
+                    return this.$store.state.data.page_list
+                },
+                set(val) {
+                    this.$store.commit("data/update_page_list", val)
+                    this.$store.dispatch("data/getListFaktur")
+                }
+            },
+            list_length() {
+                let total = this.list_faktur.total
+                if (total == undefined || total == 0) return 1
+                return Math.ceil(total/10)
+            },
+            list_faktur() {
+                return this.$store.state.data.list_faktur
+            },
+            filter: {
+                get() {
+                    return this.$store.state.data.filter
+                },
+                set(val) {
+                    this.$store.commit("data/update_filter", val)
+                }
+            },
+            list_supplier() {
+                return this.$store.state.data.list_supplier;
+            },
+            DateFormated() {
+                return this.formatDate(this.filter.date)
+            },
+            EndDateFormated() {
+                return this.formatDate(this.filter.enddate)
+            },
+            is_create: {
+                get() {
+                    return this.$store.state.form.is_create
+                },
+                set(val) {
+                    this.$store.commit("form/update_is_create", val)
+                }
+            },
+            viewFakturDialog: {
+                get() {
+                    return this.$store.state.data.viewfaktur
+                },
+                set(val) {
+                    this.$store.commit("data/update_viewfaktur", val)
+                }
+            }
+        },
+        methods: {
+            newFaktur() {
+                this.is_create = true;
+                this.dialogCreate = true;
+                this.$store.dispatch("data/getListSupplier");
+                this.$store.dispatch("data/getListStaff");
+                this.$store.dispatch("form/resetForm");
+            },
+            viewAttachment(item) {
+                let param = {
+                    roID: item.ReceiveOrderPoID,
+                    category: item.PurchaseOrderItemCategoryID
+                }
+
+                this.$store.dispatch('data/getListAttachment', param)
+                this.$store.commit('data/update_dialog_attachment', true)
+            },
+            editFaktur(item) {
+                this.is_create = false
+                this.dialogCreate = true;
+                this.$store.dispatch("data/getListSupplier");
+                this.$store.dispatch("data/getDetailFaktur", {SInvoiceID: item.SupplierInvoiceID});
+            },
+            viewFaktur(item) {
+                this.viewFakturDialog = true;
+                this.$store.dispatch("data/getListSupplier");
+                this.$store.dispatch("data/getDetailFaktur", {SInvoiceID: item.SupplierInvoiceID});
+            },
+            konfirmDelete(item) {
+                this.confirmDialog = true
+                this.fakturdelete = item
+            },
+            toRupiah(data) {
+                // Input validation
+                if (!data) return '0,00'
+
+                // Ensure we're working with a number
+                if (typeof data !== 'number') {
+                    data = parseFloat(data)
+                }
+
+                // Handle invalid numbers
+                if (isNaN(data)) return '0,00'
+
+                // Convert to string with exactly 2 decimal places without rounding
+                // This preserves the exact value for display
+                const parts = data.toString().split('.')
+                const wholePart = parts[0]
+                let decimalPart = parts.length > 1 ? parts[1] : '00'
+
+                // Ensure we have exactly 2 decimal digits for display
+                if (decimalPart.length > 2) {
+                    decimalPart = decimalPart.substring(0, 2)
+                } else if (decimalPart.length < 2) {
+                    decimalPart = decimalPart.padEnd(2, '0')
+                }
+
+                // Format the whole number part with dots as thousand separators
+                const formatted = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+
+                // Return the formatted number
+                return `${formatted},${decimalPart}`
+            },
+            deleteFaktur() {
+                this.$store.dispatch("form/deleteFaktur", {SInvoiceID: this.fakturdelete.SupplierInvoiceID})
+                this.fakturdelete = {}
+                this.confirmDialog = false
+            },
+            closeSnackbar() {
+                let snacc = { isOpen: false, message: "", color: "error" }
+                this.snack = snacc
+            },
+            formatDate(date) {
+                if (!date) return null
+                const [year, month, day] = date.split("-")
+                return `${day}-${month}-${year}`;
+            },
+            deFormatedDate(date) {
+                if (!date) return null;
+
+                const [day, month, year] = date.split("-");
+                return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+            },
+            searchFaktur() {
+                this.$store.dispatch("data/getListFaktur")
+            },
+            fakturApprove(item) {
+                if (item.SupplierInvoiceID != '') {
+                    this.$store.dispatch("form/approveFaktur", {fakturID: item.SupplierInvoiceID});
+                }
+            },
+            fakturReject(item) {
+                if (item.SupplierInvoiceID != '') {
+                    this.$store.dispatch("form/rejectFaktur", {fakturID: item.SupplierInvoiceID});
+                }
+            },
+            fakturVerify(item) {
+                // console.log(item)
+                // Validation before verify
+                if (item.SupplierInvoiceSupplierInvoiceNumber == '' || item.SupplierInvoiceSupplierInvoiceNumber == null) {
+                    this.snack = { isOpen: true, message: "Nomor invoice supplier tidak boleh kosong", color: "error" }
+                    return
+                }
+
+                if (item.SupplierInvoiceID != '') {
+                    this.$store.dispatch("form/verifyFaktur", {fakturID: item.SupplierInvoiceID});
+                }
+            }
+        },
+        watch: {
+
+        }
+    }
+</script>

test/vuex/acc-one-faktur-v4/components/viewFaktur.vue

@@ -0,0 +1,412 @@
+<template>
+    <v-dialog v-model="viewfakturDialog" persistent max-width="90%">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                FAKTUR PO
+            </v-card-title>
+
+            <v-card-text>
+                <v-layout row wrap>
+                    <!-- 1st row -->
+                    <v-flex pr-2 xs3>
+                        <v-menu
+                            v-model="menuDateForm" transition="scale-transition"
+                            full-width offset-y lazy :nudge-right="40"
+                            max-width="290px" min-width="290px"
+                            :close-on-content-click="false"
+                        >
+                            <template v-slot:activator="{on}">
+                                <v-text-field
+                                    label="Tanggal" readonly disabled
+                                    outline hide-details :value="DateFormated"
+                                ></v-text-field>
+                            </template>
+                            <v-date-picker
+                                no-title v-model="form_faktur.form_date" 
+                                readonly disabled
+                            ></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex pr-2 xs3>
+                        <v-menu
+                            v-model="menuDueDateForm" transition="scale-transition"
+                            full-width offset-y lazy :nudge-right="40"
+                            max-width="290px" min-width="290px"
+                            :close-on-content-click="false"
+                        >
+                            <template v-slot:activator="{on}">
+                                <v-text-field
+                                    label="Tanggal Jatuh Tempo" readonly disabled
+                                    outline hide-details :value="DueDateFormated"
+                                ></v-text-field>
+                            </template>
+                            <v-date-picker
+                                no-title v-model="form_faktur.form_duedate" 
+                                readonly disabled 
+                            ></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex pr-2 xs3>
+                        <v-menu
+                            v-model="menuDraftDateForm" transition="scale-transition"
+                            full-width offset-y lazy :nudge-right="40"
+                            max-width="290px" min-width="290px"
+                            :close-on-content-click="false"
+                        >
+                            <template v-slot:activator="{on}">
+                                <v-text-field
+                                    label="Tanggal Rencana Bayar" readonly disabled v-on="on"
+                                    :value="DraftDateFormated" outline :rules="rules_text"
+                                ></v-text-field>
+                            </template>
+                            <v-date-picker
+                                no-title v-model="form_faktur.form_draftdate"
+                                readonly disabled 
+                            ></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex pr-2 xs3>
+                        <v-text-field
+                            :value="form_faktur.form_supplier ? form_faktur.form_supplier.SupplierName : ''"
+                            label="Supplier" readonly disabled outline
+                        ></v-text-field>
+                    </v-flex>
+
+                    <!-- 2nd row -->
+                    <v-flex pr-2 xs3>
+                        <v-text-field
+                            :value="form_faktur.form_po 
+                                ? form_faktur.form_po.ReceiveOrderPoNumber 
+                                : ''"
+                            label="Nomor GRN" readonly disabled outline
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex pr-2 xs3>
+                        <v-text-field
+                            v-model="form_faktur.form_refnumber" readonly disabled
+                            label="Nomor Referensi" outline 
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex pr-2 xs3>
+                        <v-text-field
+                            v-model="form_faktur.form_supplier_invoicenum" readonly disabled
+                            label="Nomor Invoice Supplier" outline 
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex pr-2 xs3>
+                        <v-menu
+                            v-model="menuSupplierDateForm" transition="scale-transition"
+                            full-width offset-y lazy :nudge-right="40"
+                            max-width="290px" min-width="290px"
+                            :close-on-content-click="false"
+                        >
+                            <template v-slot:activator="{on}">
+                                <v-text-field
+                                    label="Tanggal Invoice Supplier" readonly disabled
+                                    :value="SupplierInvoiceDateFormated" outline hide-details
+                                ></v-text-field>
+                            </template>
+                            <v-date-picker
+                                no-title v-model="form_faktur.form_supplier_invoicedate"
+                                @input="menuSupplierDateForm = false" readonly disabled
+                            ></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+
+                    <!-- 3rd row -->
+                    <v-flex xs12>
+                        <v-textarea
+                            v-model="form_faktur.form_note"  readonly disabled
+                            label="Catatan" outline rows="2"
+                        ></v-textarea>
+                    </v-flex>
+                </v-layout>
+
+                <v-data-table
+                    v-if="form_item.length > 0"
+                    :headers="headers" hide-actions
+                    :items="form_item" class="elevation-1 mt-2"
+                    item-key="ReceiveOrderPoDetailID"
+                >
+                    <template slot="items" slot-scope="props">
+                        <tr>
+                            <td class="text-xs-center">{{ props.item.PurchaseOrderNumber }}</td>
+                            <td class="text-xs-center">{{ props.item.M_ItemDesc }}</td>
+                            <td class="text-xs-center">{{ props.item.ReceiveOrderPoDetailQty }}</td>
+                            <td class="text-xs-center">Rp. {{ toRupiah(props.item.ReceiveOrderPoDetailPrice) }}</td>
+                            <td class="text-xs-center">
+                                <kbd v-if="props.item.PurchaseOrderSummaryDiscountType == 'P'">{{ props.item.Discount }}%</kbd>
+                                Rp. {{ calcItemDisc(props.item) }}
+                            </td>
+                            <td class="text-xs-center">Rp. {{ calcSubtal(props.item) }}</td>
+                            <td class="text-xs-right">Rp. {{ calcTotal(props.item) }}</td>
+                        </tr>
+                    </template>
+                    <template v-slot:footer>
+                        <tr>
+                            <td :colspan="6">
+                                <strong class="ml-2">SUBTOTAL</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_subtotal) }}</strong>
+                            </td>
+                        </tr>
+                        <tr v-if="form_faktur.form_shipping_cost > 0.00">
+                            <td :colspan="6">
+                                <strong class="ml-2">BIAYA PENGIRIMAN</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_shipping_cost) }}</strong>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td :colspan="6">
+                                <strong class="ml-2">DISKON</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <!-- <kbd v-if="form_faktur.form_disc_type == 'P'">{{ parseFloat(form_faktur.form_disc_po).toFixed(2) }}%</kbd> -->
+                                <strong>Rp. {{ toRupiah(form_faktur.form_disc_amount) }}</strong>
+                            </td>
+                        </tr>
+                        <!-- <tr>
+                            <td :colspan="5" class="text-xs-left">
+                                <strong class="ml-4">PAJAK PENDAPATAN (PPN)</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-center">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_tax_amount_ppn) }}</strong>
+                            </td>
+                        </tr> -->
+                        <!-- <tr>
+                            <td :colspan="5" class="text-xs-left">
+                                <strong class="ml-4">PAJAK PENGHASILAN (PPH)</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-center">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_tax_amount_pph) }}</strong>
+                            </td>
+                        </tr> -->
+                        <tr>
+                            <td :colspan="6">
+                                <strong class="ml-2">PAJAK</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_tax_amount_ppn + form_faktur.form_tax_amount_pph) }}</strong>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td :colspan="6">
+                                <strong class="ml-2">GRAND TOTAL</strong>
+                            </td>
+                            <td :colspan="1" class="text-xs-right">
+                                <strong>Rp. {{ toRupiah(form_faktur.form_grandtotal) }}</strong>
+                            </td>
+                        </tr>
+                    </template>
+                </v-data-table>
+
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" flat @click="closeDialog()">
+                    Tutup
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+    module.exports = {
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                menuDateForm: false,
+                menuDueDateForm: false,
+                menuDraftDateForm: false,
+                menuTaxDateForm: false,
+                menuSupplierDateForm: false,
+                rules_text: [(v) => !!v || "Tidak boleh kosong"],
+                rules_number: [(v) => !isNaN(v) || "Tidak boleh kosong"],
+                headers: [
+                    {
+                        text: 'NOMOR PO', align: 'center', sortable: false, value: 'item', 
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'ITEM', align: 'center', sortable: false, value: 'item', 
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'QTY', align: 'center', sortable: false, value: 'qty', 
+                        width: '10%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'HARGA', align: 'center', sortable: false, value: 'price', 
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'DISKON', align: 'center', sortable: false, value: 'disc', 
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'HARGA DISKON', align: 'center', sortable: false, value: 'pricedisc', 
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    },
+                    {
+                        text: 'JUMLAH', align: 'center', sortable: false, value: 'total', 
+                        width: '15%', class: 'blue lighten-3 white--text'
+                    }
+                ]
+            }
+        },
+        computed: {
+            viewfakturDialog: {
+                get() {
+                    return this.$store.state.data.viewfaktur
+                },
+                set(val) {
+                    this.$store.commit("data/update_viewfaktur", val)
+                }
+            },
+            form_faktur: {
+                get() {
+                    return this.$store.state.form.form_faktur
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_faktur", val)
+                }
+            },
+            form_item: {
+                get() {
+                    return this.$store.state.form.form_item
+                },
+                set(val) {
+                    this.$store.commit("form/update_form_item", val)
+                }
+            },
+            DateFormated() {
+                return this.formatDate(this.form_faktur.form_date);
+            },
+            DueDateFormated() {
+                return this.formatDate(this.form_faktur.form_duedate);
+            },
+            SupplierInvoiceDateFormated() {
+                return this.formatDate(this.form_faktur.form_supplier_invoicedate);
+            },
+            DraftDateFormated() {
+                return this.formatDate(this.form_faktur.form_draftdate);
+            },
+            list_supplier() {
+                return this.$store.state.data.list_supplier;
+            },
+            list_po() {
+                return this.$store.state.data.list_po;
+            },
+            rupiah() {
+                return this.toRupiah(this.form_faktur.form_grandtotal);
+            }
+        },
+        methods: {
+            closeDialog() {
+                this.viewfakturDialog = false
+                this.$store.commit("data/update_list_item", {records: [], total: 0})
+                this.$store.dispatch("form/resetForm")
+            },
+            formatDate(date) {
+                if (!date) return null
+                const [year, month, day] = date.split("-")
+                return `${day}-${month}-${year}`;
+            },
+            searchPO() {
+                this.$store.dispatch("data/getListPO");
+            },
+            detailPO() {
+                this.$store.dispatch("data/getDetailPO");
+                this.form_item = []
+                this.$store.commit("form/update_form_ro", {})
+                this.$store.commit("data/update_list_item", {records: [], total: 0})
+            },
+            toRupiah(data) {
+                // Input validation
+                if (!data) return '0,00'
+                
+                // Ensure we're working with a number
+                if (typeof data !== 'number') {
+                    data = parseFloat(data)
+                }
+                
+                // Handle invalid numbers
+                if (isNaN(data)) return '0,00'
+                
+                // Convert to string with exactly 2 decimal places without rounding
+                // This preserves the exact value for display
+                const parts = data.toString().split('.')
+                const wholePart = parts[0]
+                let decimalPart = parts.length > 1 ? parts[1] : '00'
+                
+                // Ensure we have exactly 2 decimal digits for display
+                if (decimalPart.length > 2) {
+                    decimalPart = decimalPart.substring(0, 2)
+                } else if (decimalPart.length < 2) {
+                    decimalPart = decimalPart.padEnd(2, '0')
+                }
+                
+                // Format the whole number part with dots as thousand separators
+                const formatted = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+                
+                // Return the formatted number
+                return `${formatted},${decimalPart}`
+            },
+            calcItemDisc(item) {
+                if (item.PurchaseOrderSummaryDiscountType == 'R') {
+                    this.form_item.find(a => a.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID).disc_amount = item.Discount
+                    return this.toRupiah(item.Discount)
+                }
+
+                let d = (Number(item.ReceiveOrderPoDetailPrice) * Number(item.Discount)) / 100
+                this.form_item.find(a => a.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID).disc_amount = d
+                return this.toRupiah(d.toString())
+            },
+            calcSubtal(item) {
+                price = Number(item.ReceiveOrderPoDetailPrice)
+                disc = Number(item.Discount)
+
+                if (item.PurchaseOrderSummaryDiscountType == 'R') {
+                    return this.toRupiah((price - disc).toString())
+                }
+
+                let d = (price * disc) / 100
+                return this.toRupiah((price - d).toString())
+            },
+            calcTotal(item) {
+                qty = Number(item.ReceiveOrderPoDetailQty)
+                price = Number(item.ReceiveOrderPoDetailPrice)
+                disc = Number(item.Discount)
+                let tl = 0
+
+                if (item.PurchaseOrderSummaryDiscountType == 'R') {
+                    tl = qty * (price - disc)
+                    this.form_item.find(a => a.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID).subtotal = tl
+                    return this.toRupiah((tl).toString())
+                }
+                
+                let d = (price * disc) / 100
+                tl = qty * (price - d)
+                this.form_item.find(a => a.ReceiveOrderPoDetailID === item.ReceiveOrderPoDetailID).subtotal = tl
+                return this.toRupiah((tl).toString())
+            },
+            fn_calcSummary: _.debounce(function () {
+                this.$store.dispatch("form/calcSummary")
+            }, 1000),
+            fn_adjust: _.debounce(function () {
+                this.$store.dispatch("form/calcSummary")
+            }, 1000)
+        },
+        watch: {
+            form_item(newValue, oldValue) {
+                this.fn_calcSummary();
+            },
+        }
+    }
+</script>

test/vuex/acc-one-faktur-v4/index.php

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <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">
+            <v-app id="smartApp">
+                <one-navbar></one-navbar>
+                <v-content style="background: #F5E8DF!important">
+                    <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+                        <v-layout row wrap>
+                            <v-flex xs12 fill-height pa-1>
+                                <one-listing></one-listing>
+                            </v-flex>
+                        </v-layout>
+                    </v-container>
+                </v-content>
+                <one-footer></one-footer>
+            </v-app>
+        </div>
+
+        <!-- Vendor -->
+        <script src="../../../libs/vendor/moment.min.js"></script>
+        <script src="../../../libs/vendor/numeral.min.js"></script>
+        <script src="../../../libs/vendor/moment-locale-id.js"></script>
+        <script src="../../../libs/vendor/lodash.js"></script>
+        <script src="../../../libs/vendor/axios.min.js"></script>
+        <script src="../../../libs/vendor/vue.js"></script>
+        <script src="../../../libs/vendor/vuex.js"></script>
+        <script src="../../../libs/vendor/vuetify.js"></script>
+        <script src="../../../libs/vendor/httpVueLoader.js"></script>
+        <script src="../../../libs/one_global.js"></script>
+
+        <!-- App Script -->
+        <script type="module">
+            import { store } from './store.js';
+            window.store = store;
+            new Vue({
+                store,
+                el: "#app",
+                methods: {
+                    
+                },
+                components: {
+                    'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+                    'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                    'one-listing': httpVueLoader('./components/listing.vue')
+                }
+            })
+        </script>
+        <style>
+            [v-cloak] {
+                display: none;
+            }
+        </style>
+    </body>
+</html>

test/vuex/acc-one-faktur-v4/module/data.js

@@ -0,0 +1,355 @@
+import * as api from "../api/data.js";
+
+export default {
+    namespaced: true,
+    state: {
+        snack: {
+            isOpen: false,
+            color: "success",
+            message: ""
+        },
+        list_staff: {
+            records: [],
+            total: 0
+        },
+        list_po: {
+            records: [],
+            total: 0
+        },
+        list_supplier: {
+            records: [],
+            total: 0
+        },
+        list_ro: {
+            records: [],
+            total: 0
+        },
+        list_item: {
+            records: [],
+            total: 0
+        },
+        selected_item: [],
+        page_item: 1,
+        search_item: "",
+
+        page_list: 1,
+        list_faktur: {
+            records: [],
+            total: 0
+        },
+        filter: {
+            date: moment(new Date()).format("YYYY-MM-DD"),
+            enddate: moment(new Date()).format("YYYY-MM-DD"),
+            supplier: "0",
+            status: "All",
+            nomor: ""
+        },
+        viewfaktur: false,
+
+        dialog_attachment: false,
+        preview_attachment: []
+    },
+    mutations: {
+        update_snack(state, data) {
+            state.snack = data
+        },
+        update_list_staff(state, data) {
+            state.list_staff = data
+        },
+        update_list_po(state, data) {
+            state.list_po = data
+        },
+        update_list_supplier(state, data) {
+            state.list_supplier = data
+        },
+        update_list_ro(state, data) {
+            state.list_ro = data
+        },
+        update_list_item(state, data) {
+            state.list_item = data
+        },
+        update_selected_item(state, data) {
+            state.selected_item = data
+        },
+        update_page_item(state, data) {
+            state.page_item = data
+        },
+        update_search_item(state, data) {
+            state.search_item = data
+        },
+        update_page_list(state, data) {
+            state.page_list = data
+        },
+        update_list_faktur(state, data) {
+            state.list_faktur = data
+        },
+        update_filter(state, data) {
+            state.filter = data
+        },
+        update_viewfaktur(state, data) {
+            state.viewfaktur = data
+        },
+        update_dialog_attachment(state, data) {
+            state.dialog_attachment = data
+        },
+        update_preview_attachment(state, data) {
+            state.preview_attachment = data
+        }
+    },
+    actions: {
+        async getListPO(context) {
+            try {
+                let supid = context.rootState.form.form_faktur.form_supplier.SupplierID
+                let payload = {
+                    token: one_token(),
+                    supID: supid
+                }
+
+                let response = await api.LookupPO(payload)
+                if (response.status != "OK") {
+
+                } else {
+                    let po = response.data
+                    context.commit("update_list_po", po)
+                }
+            } catch (error) {
+
+            }
+        },
+        async getListSupplier(context) {
+            try {
+                let payload = {
+                    token: one_token(),
+                    name: ""
+                }
+
+                let response = await api.LookupSupplier(payload)
+                if (response.status != "OK") {
+                    let snacc = {isOpen: true, message: response.message, color: "error"}
+                    context.commit("update_snack", snacc)
+                } else {
+                    let sup = response.data
+                    context.commit("update_list_supplier", sup)
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("update_snack", snacc)
+            }
+        },
+        async getListStaff(context) {
+            try {
+                let payload = {
+                    token: one_token(),
+                    name: ""
+                }
+
+                let response = await api.LookupStaff(payload)
+                if (response.status != "OK") {
+                    let snacc = {isOpen: true, message: response.message, color: "error"}
+                    context.commit("update_snack", snacc)
+                } else {
+                    let staff = response.data
+                    context.commit("update_list_staff", staff)
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("update_snack", snacc)
+            }
+        },
+        async getDetailPO(context) {
+            try {
+                let supid = context.rootState.form.form_faktur.form_supplier.SupplierID
+                let numpo = context.rootState.form.form_faktur.form_po.ReceiveOrderPoNumber
+                let payload = {
+                    token: one_token(),
+                    supID: supid,
+                    numPO: numpo,
+                }
+
+                let response = await api.LookupDetailPO(payload)
+                if (response.status != "OK") {
+                    let snacc = {isOpen: true, message: response.message, color: "error"}
+                    context.commit("update_snack", snacc)
+                } else {
+                    let po = response.data.records
+                    let form = context.rootState.form.form_faktur
+
+                    let duedate = moment(po.PurchaseOrderDate).add(Number(po.PurchaseOrderPaymentTerm), 'days').format("YYYY-MM-DD")
+
+                    form.form_duedate = duedate
+                    form.form_refnumber = po.PurchaseOrderRefNumber
+                    form.form_tax_percent_pph = po.PurchaseOrderTaxPercentPph
+                    form.form_tax_percent_ppn = po.PurchaseOrderTaxPercentPpn
+                    form.form_disc_po = po.DiscountType == 'R' ? po.SupplierInvoiceDiscountAmount : po.SupplierInvoiceDiscountPercent
+                    form.form_disc_type = po.DiscountType
+                    form.form_shipping_cost = po.PurchaseOrderShippingCost
+
+
+                    context.commit("form/update_form_faktur", form, {root: true})
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("update_snack", snacc)
+            }
+        },
+        async getListRO(context) {
+            try {
+                let poID = context.rootState.form.form_faktur.form_po.PurchaseOrderID
+                let supID = context.rootState.form.form_faktur.form_supplier.SupplierID
+
+                let payload = {
+                    token: one_token(),
+                    poID: poID,
+                    supplierID: supID
+                }
+
+                var resp = await api.LookupRO(payload)
+                if (resp.status != "OK") {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("update_snack", snacc)
+                } else {
+                    context.commit("update_list_ro", resp.data)
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("update_snack", snacc)
+            }
+        },
+        async getListItemRO(context) {
+            try {
+                let payload = {
+                    token: one_token(),
+                    poID: context.rootState.form.form_faktur.form_po.PurchaseOrderID,
+                    roID: context.rootState.form.form_ro.ReceiveOrderPoID,
+                    name: context.state.search_item,
+                    currpage: context.state.page_item,
+                }
+
+                let resp = await api.LookupItemRO(payload)
+                if (resp.status != "OK") {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("update_snack", snacc)
+                } else {
+                    context.commit("update_list_item", resp.data)
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("update_snack", snacc)
+            }
+        },
+        async getListFaktur(context) {
+            try {
+                let payload = {
+                    token: one_token(),
+                    page: context.state.page_list,
+                    nomor: context.state.filter.nomor,
+                    status: context.state.filter.status,
+                    enddate: context.state.filter.enddate,
+                    date: context.state.filter.date,
+                    supplier: context.state.filter.supplier
+                }
+
+                let resp = await api.LookupFaktur(payload)
+                if (resp.status != "OK") {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("update_snack", snacc)
+                } else {
+                    context.commit("update_list_faktur", resp.data)
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("update_snack", snacc)
+            }
+        },
+        async getDetailFaktur(context, params) {
+            try {
+                params.token = one_token()
+                let resp = await api.LookupFakturDetail(params)
+                if (resp.status != 'OK') {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("data/update_snack", snacc)
+                } else {
+                    let temp = resp.data
+                    let faktur = context.rootState.form.form_faktur
+                    faktur.form_date = temp.SupplierInvoiceDate
+                    faktur.form_duedate = temp.SupplierInvoiceDueDate
+                    faktur.form_draftdate = temp.SupplierInvoiceDraftPaymentDate
+                    faktur.form_supplier = {
+                        SupplierCode: temp.SupplierCode,
+                        SupplierName: temp.SupplierName,
+                        SupplierID: temp.SupplierInvoiceSupplierID
+                    }
+                    faktur.form_po = {
+                        PurchaseOrderID: temp.SupplierInvoicePurchaseOrderID,
+                        PurchaseOrderDate: temp.PurchaseOrderDate,
+                        ReceiveOrderPoID: temp.SupplierInvoiceReceiveOrderPoID,
+                        ReceiveOrderPoNumber: temp.ReceiveOrderPoNumber
+                    }
+                    let po = faktur.form_po
+                    console.log(po)
+                    context.commit("update_list_po", po)
+                    faktur.form_refnumber = temp.SupplierInvoiceRefNumber
+                    faktur.form_supplier_invoicenum = temp.SupplierInvoiceSupplierInvoiceNumber
+                    faktur.form_supplier_invoicedate = temp.SupplierInvoiceSupplierInvoiceDate
+                    faktur.form_tax_percent_pph = temp.SupplierInvoiceTaxPercentPph
+                    faktur.form_tax_percent_ppn = temp.SupplierInvoiceTaxPercentPpn
+                    faktur.form_disc_po = temp.DiscountType == 'R' ? temp.SupplierInvoiceDiscountAmount : temp.SupplierInvoiceDiscountPercent
+                    faktur.form_disc_type = temp.DiscountType
+                    faktur.form_note = temp.SupplierInvoiceNote
+                    faktur.form_adjust_amount = temp.SupplierInvoiceAdjustmentAmount
+                    faktur.form_adjust_note = temp.SupplierInvoiceAdjustmentNote
+                    faktur.form_shipping_cost = temp.SupplierInvoiceShippingCost
+                    faktur.fakturID = temp.SupplierInvoiceID
+
+                    context.commit("form/update_form_faktur", faktur, {root: true})
+
+                    let detail = resp.data.detail
+                    let mapitem = []
+                    detail.forEach(item => {
+                        let a = {
+                            "PurchaseOrderNumber": item.PurchaseOrderNumber,
+                            "ReceiveOrderPoDetailPurchaseOrderID": item.SupplierInvoiceDetailPurchaseOrderID,
+                            "ReceiveOrderPoDetailPurchaseOrderSummaryID": item.SupplierInvoiceDetailPurchaseOrderSummaryID,
+                            "ReceiveOrderPoDetailReceiveOrderPoID": item.SupplierInvoiceDetailReceiveOrderPoID,
+                            "ReceiveOrderPoDetailID": item.SupplierInvoiceDetailReceiveOrderPoDetailID,
+                            "M_ItemID": item.SupplierInvoiceDetailItemID,
+                            "M_ItemCode": item.M_ItemCode,
+                            "M_ItemDesc": item.M_ItemDesc,
+                            "ReceiveOrderPoItemUnitID": item.SupplierInvoiceDetailItemUnitID,
+                            "ReceiveOrderPoDetailQty": item.SupplierInvoiceDetailQty,
+                            "ReceiveOrderPoDetailPrice": item.SupplierInvoiceDetailPrice,
+                            "Discount": item.SupplierInvoiceDetailDiscountDiscountType == 'P' ? item.SupplierInvoiceDetailDiscountPercent: item.SupplierInvoiceDetailDiscountDiscountRupiah,
+                            "PurchaseOrderSummaryDiscountType": item.SupplierInvoiceDetailDiscountDiscountType,
+                            "ReceiveOrderPoDetailDiskonPoProrata": item.SupplierInvoiceDetailDiscountPoProrata,
+                            "disc_amount": item.SupplierInvoiceDetailDiscountAmount,
+                            "subtotal": item.SupplierInvoiceDetailTotal
+                        }
+
+                        mapitem.push(a)
+                    });
+
+                    context.commit("form/update_form_item", mapitem, {root: true})
+                    //context.dispatch("getListPO");
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("update_snack", snacc)
+            }
+        },
+        async getListAttachment(context, param) {
+            try {
+                param.token = one_token()
+
+                const resp = await api.LookupAttachment(param)
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_preview_attachment', resp.data)
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("update_snack", snacc)
+            }
+        }
+    }
+}

test/vuex/acc-one-faktur-v4/module/form.js

@@ -0,0 +1,345 @@
+import * as api from "../api/form.js";
+
+export default {
+    namespaced: true,
+    state: {
+        opendialog: false,
+        user: one_user(),
+        form_faktur: {
+            form_date: moment(new Date()).format("YYYY-MM-DD"),
+            form_duedate: moment(new Date()).format("YYYY-MM-DD"),
+            form_draftdate: moment(new Date()).format("YYYY-MM-DD"),
+            form_supplier: {},
+            form_po: {},
+            form_refnumber: "",
+            form_supplier_invoicenum: "",
+            form_supplier_invoicedate: moment(new Date()).format("YYYY-MM-DD"),
+            form_tax_percent_pph: 0.00,
+            form_tax_amount_pph: 0.00,
+            form_tax_percent_ppn: 0.00,
+            form_tax_amount_ppn: 0.00,
+            form_disc_po: 0.00,
+            form_disc_amount: 0.00,
+            form_disc_type: "",
+            form_subtotal: 0.00,
+            form_grandtotal: 0.00,
+            form_note: "",
+            form_adjust_amount: 0.00,
+            form_adjust_note: "",
+            form_shipping_cost: 0.00,
+        },
+
+        // form tambah item
+        dialog_item: false,
+        form_ro: {},
+        form_item: [],
+        is_create: false,
+    },
+    mutations: {
+        update_opendialog(state, data) {
+            state.opendialog = data
+        },
+        update_form_faktur(state, data) {
+            state.form_faktur = data
+        },
+        update_form_ro(state, data) {
+            state.form_ro = data
+        },
+        update_form_item(state, data) {
+            state.form_item = data
+        },
+        update_dialog_item(state, data) {
+            state.dialog_item = data
+        },
+        update_is_create(state, data) {
+            state.is_create = data
+        }
+    },
+    actions: {
+        resetForm(context) {
+            const form_faktur = {
+                form_date: moment(new Date()).format("YYYY-MM-DD"),
+                form_duedate: moment(new Date()).format("YYYY-MM-DD"),
+                form_draftdate: moment(new Date()).format("YYYY-MM-DD"),
+                form_supplier: {},
+                form_po: {},
+                form_refnumber: "",
+                form_supplier_invoicenum: "",
+                form_supplier_invoicedate: moment(new Date()).format("YYYY-MM-DD"),
+                form_tax_percent_pph: 0.00,
+                form_tax_amount_pph: 0.00,
+                form_tax_percent_ppn: 0.00,
+                form_tax_amount_ppn: 0.00,
+                form_disc_po: 0.00,
+                form_disc_amount: 0.00,
+                form_disc_type: "R",
+                form_subtotal: 0.00,
+                form_grandtotal: 0.00,
+                form_note: "",
+                form_adjust_amount: 0.00,
+                form_adjust_note: "",
+                form_shipping_cost: 0.00,
+            }
+            context.commit("update_form_faktur", form_faktur)
+            context.commit("update_form_ro", {})
+            context.commit("update_form_item", [])
+            context.commit("data/update_list_po", {records: [], total: 0}, {root: true})
+        },
+        async calcSummary(context) {
+            try {
+                let item = context.state.form_item
+                let faktur = context.state.form_faktur
+                if (item.length > 0) {
+                    let sub = 0
+                    let podisc = 0
+                    item.forEach(ite => {
+                        let price = Number(ite.ReceiveOrderPoDetailPrice)
+                        let disc = Number(ite.Discount)
+                        let qty = Number(ite.ReceiveOrderPoDetailQty)
+                  
+                        if (ite.PurchaseOrderSummaryDiscountType == 'P') {
+                            disc = (price * Number(ite.Discount)) / 100
+                        }
+
+                        sub = sub + (qty * (price - disc))
+                        podisc = podisc + Number(ite.ReceiveOrderPoDetailDiskonPoProrata)
+                    });
+
+                    let pph = (sub - podisc) * (Number(faktur.form_tax_percent_pph) / 100)
+                    let ppn = (sub - podisc) * (Number(faktur.form_tax_percent_ppn) / 100)
+                    let grandtotal = (sub - podisc + pph + ppn) + Number(faktur.form_adjust_amount) + Number(faktur.form_shipping_cost)
+                    
+                    // Store exact values with 2 decimal places using floor instead of rounding
+                    // This prevents rounding errors in financial calculations
+                    faktur.form_subtotal = sub
+                    faktur.form_disc_amount = podisc
+                    faktur.form_tax_amount_ppn = ppn
+                    faktur.form_tax_amount_pph = pph
+                    faktur.form_grandtotal = grandtotal
+                } else {
+                    faktur.form_subtotal = 0.00
+                    faktur.form_disc_amount = 0.00
+                    faktur.form_grandtotal = 0.00
+                    faktur.form_tax_amount_pph = 0.00
+                    faktur.form_tax_amount_ppn = 0.00
+                    faktur.form_adjust_amount = 0.00
+                    faktur.form_adjust_note = ""
+                }
+
+                context.commit("update_form_faktur", faktur)
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("data/update_snack", snacc, {root: true})
+            }
+        },
+        async createFaktur(context) {
+            try {
+                let item = context.state.form_item
+                let para_item = []
+                
+                let param = {
+                    SIPoID: context.state.form_faktur.form_po.PurchaseOrderID,
+                    SIDate: context.state.form_faktur.form_date,
+                    SIDueDate: context.state.form_faktur.form_duedate,
+                    SIDraftDate: context.state.form_faktur.form_draftdate,
+                    SISupplierID: context.state.form_faktur.form_supplier.SupplierID,
+                    SIRefNumber: context.state.form_faktur.form_refnumber,
+                    SISupplierInvoiceNumber: context.state.form_faktur.form_supplier_invoicenum,
+                    SISupplierInvoiceDate: context.state.form_faktur.form_supplier_invoicedate,
+                    SISubTotal: context.state.form_faktur.form_subtotal,
+                    SIDiscountPercent: context.state.form_faktur.form_disc_type == 'P' ? context.state.form_faktur.form_disc_po : 0,
+                    SIDiscountAmount: context.state.form_faktur.form_disc_amount,
+                    SITaxPercentPph: context.state.form_faktur.form_tax_percent_pph,
+                    SITaxAmountPph: context.state.form_faktur.form_tax_amount_pph,
+                    SITaxPercentPpn: context.state.form_faktur.form_tax_percent_ppn,
+                    SITaxAmountPpn: context.state.form_faktur.form_tax_amount_ppn,
+                    SIShippingCost: context.state.form_faktur.form_shipping_cost,
+                    SIAdjustmentAmount: context.state.form_faktur.form_adjust_amount,
+                    SIAdjustmentNote: context.state.form_faktur.form_adjust_note,
+                    SIGrandTotal: context.state.form_faktur.form_grandtotal,
+                    SINote: context.state.form_faktur.form_note,
+                    SIReceiveDate: moment(new Date()).format("YYYY-MM-DD"),
+                    SIReceivedBy: context.state.user.M_UserID,
+                    SIStatus: 'Draft',
+                    SIDetail: [],
+                    token: one_token()
+                }
+
+                item.forEach(ele => {
+                    let a = {
+                        SIDPOID: ele.ReceiveOrderPoDetailPurchaseOrderID,
+                        SIDPOSummaryID: ele.ReceiveOrderPoDetailPurchaseOrderSummaryID,
+                        SIDROID: ele.ReceiveOrderPoDetailReceiveOrderPoID,
+                        SIDRODetailID: ele.ReceiveOrderPoDetailID,
+                        SIDItemID: ele.M_ItemID,
+                        SIDItemUnitID: ele.ReceiveOrderPoItemUnitID,
+                        SIDDescription: ele.M_ItemDesc,
+                        SIDQty: ele.ReceiveOrderPoDetailQty,
+                        SIDPrice: ele.ReceiveOrderPoDetailPrice,
+                        SIDDiscountPercent: ele.PurchaseOrderSummaryDiscountType == 'P' ? ele.Discount: 0,
+                        SIDDiscountRupiah: ele.PurchaseOrderSummaryDiscountType == 'R' ? ele.Discount: 0,
+                        SIDDiscountType: ele.PurchaseOrderSummaryDiscountType,
+                        SIDDiscountAmount: ele.disc_amount,
+                        SIDDiscountPOProrata: ele.ReceiveOrderPoDetailDiskonPoProrata,
+                        SIDTotal: ele.subtotal
+                    }
+                    para_item.push(a)
+                });
+
+                param.SIDetail = para_item
+
+                let resp = await api.CreateFaktur(param)
+                if (resp.status != 'OK') {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                } else {
+                    let snacc = {isOpen: true, message: 'Success', color: "success"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                    context.dispatch("data/getListFaktur", {}, {root: true})
+                    context.commit("update_opendialog", false)
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("data/update_snack", snacc, {root: true})
+            }
+        },
+        async updateFaktur(context) {
+            try {
+                let faktur = context.state.form_faktur
+                let param = {
+                    SIPoID: faktur.form_po.PurchaseOrderID,
+                    SIDate: faktur.form_date,
+                    SIDueDate: faktur.form_duedate,
+                    SIDraftDate: faktur.form_draftdate,
+                    SISupplierID: faktur.form_supplier.SupplierID,
+                    SIRefNumber: faktur.form_refnumber,
+                    SISupplierInvoiceNumber: faktur.form_supplier_invoicenum,
+                    SISupplierInvoiceDate: faktur.form_supplier_invoicedate,
+                    SISubTotal: faktur.form_subtotal,
+                    SIDiscountPercent: faktur.form_disc_type == 'P' ? faktur.form_disc_po : 0,
+                    SIDiscountAmount: faktur.form_disc_amount,
+                    SITaxPercentPph: faktur.form_tax_percent_pph,
+                    SITaxAmountPph: faktur.form_tax_amount_pph,
+                    SITaxPercentPpn: faktur.form_tax_percent_ppn,
+                    SITaxAmountPpn: faktur.form_tax_amount_ppn,
+                    SIShippingCost: faktur.form_shipping_cost,
+                    SIAdjustmentAmount: faktur.form_adjust_amount,
+                    SIAdjustmentNote: faktur.form_adjust_note,
+                    SIGrandTotal: faktur.form_grandtotal,
+                    SINote: faktur.form_note,
+                    SIStatus: 'Draft',
+                    SIDetail: [],
+                    fakturID: faktur.fakturID,
+                    token: one_token()
+                }
+
+                let item = context.state.form_item
+                let detail = []
+                item.forEach(ele => {
+                    let a = {
+                        SIDPOID: ele.ReceiveOrderPoDetailPurchaseOrderID,
+                        SIDPOSummaryID: ele.ReceiveOrderPoDetailPurchaseOrderSummaryID,
+                        SIDROID: ele.ReceiveOrderPoDetailReceiveOrderPoID,
+                        SIDRODetailID: ele.ReceiveOrderPoDetailID,
+                        SIDItemID: ele.M_ItemID,
+                        SIDItemUnitID: ele.ReceiveOrderPoItemUnitID,
+                        SIDDescription: ele.M_ItemDesc,
+                        SIDQty: ele.ReceiveOrderPoDetailQty,
+                        SIDPrice: ele.ReceiveOrderPoDetailPrice,
+                        SIDDiscountPercent: ele.PurchaseOrderSummaryDiscountType == 'P' ? ele.Discount: 0,
+                        SIDDiscountRupiah: ele.PurchaseOrderSummaryDiscountType == 'R' ? ele.Discount: 0,
+                        SIDDiscountType: ele.PurchaseOrderSummaryDiscountType,
+                        SIDDiscountAmount: ele.disc_amount,
+                        SIDDiscountPOProrata: ele.ReceiveOrderPoDetailDiskonPoProrata,
+                        SIDTotal: ele.subtotal
+                    }
+                    detail.push(a)
+                })
+                param.SIDetail = detail
+                // console.log('param update', param)
+
+                let resp = await api.UpdateFaktur(param)
+                if (resp.status != 'OK') {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                } else {
+                    let snacc = {isOpen: true, message: 'Success', color: "success"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                    context.dispatch("data/getListFaktur", {}, {root: true})
+                    context.commit("update_opendialog", false)
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("data/update_snack", snacc, {root: true})
+            }
+        },
+        async deleteFaktur(context, params) {
+            try {
+                params.token = one_token()
+                let resp = await api.DeleteFaktur(params)
+                if (resp.status != 'OK') {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                } else {
+                    let snacc = {isOpen: true, message: 'Success', color: "success"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                    context.dispatch("data/getListFaktur", {}, {root: true})
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("data/update_snack", snacc, {root: true})
+            }
+        },
+        async approveFaktur(context, param) {
+            try {
+                param.token = one_token()
+                let resp = await api.ApproveFaktur(param)
+                if (resp.status != 'OK') {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                } else {
+                    let snacc = {isOpen: true, message: 'Success', color: "success"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                    context.dispatch("data/getListFaktur", {}, {root: true})
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("data/update_snack", snacc, {root: true})
+            }
+        },
+        async rejectFaktur(context, param) {
+            try {
+                param.token = one_token()
+                let resp = await api.RejectFaktur(param)
+                if (resp.status != 'OK') {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                } else {
+                    let snacc = {isOpen: true, message: 'Success', color: "success"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                    context.dispatch("data/getListFaktur", {}, {root: true})
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("data/update_snack", snacc, {root: true})
+            }
+        },
+        async verifyFaktur(context, param) {
+            try {
+                param.token = one_token()
+                let resp = await api.VerifyFaktur(param)
+                if (resp.status != 'OK') {
+                    let snacc = {isOpen: true, message: resp.message, color: "error"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                } else {
+                    let snacc = {isOpen: true, message: 'Success', color: "success"}
+                    context.commit("data/update_snack", snacc, {root: true})
+                    context.dispatch("data/getListFaktur", {}, {root: true})
+                }
+            } catch (error) {
+                let snacc = {isOpen: true, message: error.message, color: "error"}
+                context.commit("data/update_snack", snacc, {root: true})
+            }
+        }
+    }
+}

test/vuex/acc-one-faktur-v4/store.js

@@ -0,0 +1,14 @@
+import system from "../../../apps/modules/system/system.js";
+import data from "./module/data.js";
+import form from "./module/form.js";
+
+export const store = new Vuex.Store({
+    modules: {
+        system: system,
+        form: form,
+        data: data
+    },
+    state: {},
+    mutations: {},
+    actions: {},
+});

test/vuex/acc-one-md-item/api/item.js

@@ -0,0 +1,227 @@
+const URL = "/one-api/mockup/masterdata/accounting/";
+
+export async function getGroup(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/get_group_filter", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function search(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/search", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function getCategory(token, prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/get_category", {
+        token: token,
+        search: prm
+    });
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function getGroupX(token, prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/get_group", {
+        token: token,
+        search: prm
+    });
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function get_subgroup(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/get_subgroup", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function get_fa_class(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/get_fa_class", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function get_inventaris_gol(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/get_inventaris_gol", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function get_unit(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/get_unit", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function save_item(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/save_item", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function update_item(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/update_item", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function delete_item(prm) {
+  try {
+    var resp = await axios.post(URL + "mditem/delete_item", prm);
+    if (resp.status !== 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText,
+      };
+    }
+
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}

test/vuex/acc-one-md-item/index.php

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <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">
+        <v-app id="smartApp">
+            <one-navbar></one-navbar>
+            <v-content style="background:#F5E8DF!important">
+                <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+                    <v-layout row wrap>
+                        <v-flex xs12 class="left" fill-height pa-1>
+                            <one-md-item-list></one-md-item-list>
+                        </v-flex>
+                    </v-layout>
+                </v-container>
+            </v-content>
+            <one-footer> </one-footer>
+        </v-app>
+    </div>
+
+    <!-- Vendor -->
+    <script src="../../../libs/vendor/moment.min.js"></script>
+    <script src="../../../libs/vendor/numeral.min.js"></script>
+    <script src="../../../libs/vendor/moment-locale-id.js"></script>
+    <script src="../../../libs/vendor/lodash.js"></script>
+    <script src="../../../libs/vendor/axios.min.js"></script>
+    <script src="../../../libs/vendor/vue.js"></script>
+    <script src="../../../libs/vendor/vuex.js"></script>
+    <script src="../../../libs/vendor/vuetify.js"></script>
+    <script src="../../../libs/vendor/httpVueLoader.js"></script>
+    <script src="../../../libs/one_global.js"></script>
+    <!-- App Script -->
+
+    <script type="module">
+        import {
+            store
+        } from './store.js';
+        window.store = store;
+        new Vue({
+            store,
+            el: '#app',
+            methods: {
+
+            },
+            components: {
+                'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+                'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                'one-md-item-list': httpVueLoader('./components/oneMdItemList.vue'),
+            }
+        })
+    </script>
+    <style>
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+</body>
+
+</html>

test/vuex/acc-one-md-item/modules/item.js

@@ -0,0 +1,470 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/item.js"
+
+export default {
+    namespaced: true,
+    state: {
+        autocomplete_status: 0,
+        search_error_message: "",
+        groups: [],
+        selected_group: {"Nat_GroupID": "0", "Nat_GroupName": "All"},
+        search_status: 0,
+        items: [],
+        total_page: 0,
+        selected_item: {},
+        current_page: 1,
+        xsearch: "",
+        dialog_form: false,
+        act: "new",
+        categories: [],
+        selected_category: {},
+        group_x: [],
+        selected_group_x: {},
+        subgroups: [],
+        selected_subgroup: {},
+        fa_class: [],
+        selected_fa_class: {},
+        fa_inventaris_gol: [],
+        selected_fa_inventaris_gol: {},
+        errors: [],
+        item_units: [],
+        selected_item_unit: {},
+        class_type: [
+            {"id": 1, "Fa_ClassType": "Kendaraan", "flagtype": "vehicle"},
+            {"id": 2, "Fa_ClassType": "Operasional", "flagtype": "operational"},
+            {"id": 3, "Fa_ClassType": "Gedung", "flagtype": "building"},
+            {"id": 4, "Fa_ClassType": "Mechanical Elektrical & IT", "flagtype": "meit"},
+            {"id": 5, "Fa_ClassType": "Software & Laboratorium System", "flagtype": "software"},
+            {"id": 6, "Fa_ClassType": "Peralatan Kantor", "flagtype": "office"},
+            {"id": 7, "Fa_ClassType": "Peralatan Umum", "flagtype": "general"},
+            {"id": 8, "Fa_ClassType": "Tanah", "flagtype": "land"},
+        ],
+        selected_class_type: {},
+
+        save_status: 0,
+        item_errors: [],
+        alert_success: false,
+        alert_error: false,
+        msg_success: "",
+        save_error_message: "",
+        opendialoginfo: false,
+        msginfo: "",
+        last_id: 0,
+    },
+    mutations: {
+        update_autocomplete_status(state, val) {
+            state.autocomplete_status = val
+        },
+        update_search_error_message(state, val) {
+            state.search_error_message = val
+        },
+        update_groups(state, val) {
+            state.groups = val
+        },
+        update_selected_group(state, val) {
+            state.selected_group = val
+        },
+        update_search_status(state, val) {
+            state.search_status = val
+        },
+        update_items(state, val) {
+            state.items = val
+        },
+        update_total_page(state, val) {
+            state.total_page = val
+        },
+        update_selected_item(state, val) {
+            state.selected_item = val
+        },
+        update_current_page(state, val) {
+            state.current_page = val
+        },
+        update_xsearch(state, val) {
+            state.xsearch = val
+            state.current_page = 1
+        },
+        update_dialog_form(state, val) {
+            state.dialog_form = val
+        },
+        update_act(state, val) {
+            state.act = val
+        },
+        update_categories(state, val) {
+            state.categories = val
+        },
+        update_selected_category(state, val) {
+            state.selected_category = val
+        },
+        update_group_x(state, val) {
+            state.group_x = val
+        },
+        update_selected_group_x(state, val) {
+            state.selected_group_x = val
+        },
+        update_subgroups(state, val) {
+            state.subgroups = val
+        },
+        update_selected_subgroup(state, val) {
+            state.selected_subgroup = val
+        },
+        update_fa_class(state, val) {
+            state.fa_class = val
+        },
+        update_selected_fa_class(state, val) {
+            state.selected_fa_class = val
+        },
+        update_fa_inventaris_gol(state, val) {
+            state.fa_inventaris_gol = val
+        },
+        update_selected_fa_inventaris_gol(state, val) {
+            state.selected_fa_inventaris_gol = val
+        },
+        update_errors(state, val) {
+            state.errors = val
+        },
+        update_item_units(state, val) {
+            state.item_units = val
+        },
+        update_selected_item_unit(state, val) {
+            state.selected_item_unit = val
+        },
+        update_class_type(state, val) {
+            state.class_type = val
+        },
+        update_selected_class_type(state, val) {
+            state.selected_class_type = val
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_item_errors(state, val) {
+            state.item_errors = val
+        },
+        update_alert_success(state, val) {
+            state.alert_success = val
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_alert_error(state, val) {
+            state.alert_error = val
+        },
+        update_opendialoginfo(state, val) {
+            state.opendialoginfo = val
+        },
+        update_msginfo(state, val) {
+            state.msginfo = val
+        },
+        update_last_id(state, val) {
+            state.last_id = val
+        },
+    },
+    actions: {
+        async getGroup(context) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                let resp = await api.getGroup({ token: one_token() });
+                if (resp.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                    };
+
+                    context.commit("update_groups", data.records);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message)
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async search(context, prm) {
+            context.commit("update_search_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.search(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                    context.commit("update_search_status", 3)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    context.commit("update_search_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total_page: resp.data.total_page,
+                    };
+
+                    context.commit("update_items", data.records);
+                    context.commit("update_total_page", data.total_page);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message)
+                context.commit("update_search_status", 3)
+            }
+        },
+        async getCategory(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                let resp = await api.getCategory(one_token(), prm);
+                if (resp.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                    };
+
+                    context.commit("update_categories", data.records);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message)
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async getGroupX(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                let resp = await api.getGroupX(one_token(), prm);
+                if (resp.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                    };
+
+                    context.commit("update_group_x", data.records);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message)
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async get_subgroup(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.get_subgroup(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                    };
+
+                    context.commit("update_subgroups", data.records);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message)
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async get_fa_class(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.get_fa_class(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                    };
+
+                    context.commit("update_fa_class", data.records);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message)
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async get_inventaris_gol(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.get_inventaris_gol(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                    };
+
+                    context.commit("update_fa_inventaris_gol", data.records);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message)
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async get_unit(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.get_unit(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_search_error_message", resp.message)
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_search_error_message", "")
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                    };
+
+                    context.commit("update_item_units", data.records);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message)
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+
+        // save item
+        async save_item(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.save_item(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_status", 3)
+                    context.commit("update_alert_error", true)
+                } else {
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    };
+
+                    if (data.total !== -1) {
+                        context.commit("update_item_errors", [])
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form", false)
+                        var msg = "Item " + prm.itemname + " sudah tersimpan dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("search", {
+                            current_page: context.state.current_page,
+                            search: context.state.xsearch,
+                            group_id: context.state.selected_group.Nat_GroupID
+                        })
+                    } else {
+                        context.commit("update_item_errors", resp.data.errors)
+                        context.commit("update_opendialoginfo", true)
+                        context.commit("update_msginfo", resp.data.errors[0].msg)
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_error_message", e.message)
+                context.commit("update_save_status", 3)
+                context.commit("update_alert_error", true)
+            }
+        },
+
+        // edit item
+        async update_item(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.update_item(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_status", 3)
+                    context.commit("update_alert_error", true)
+                } else {
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    };
+
+                    if (data.total !== -1) {
+                        context.commit("update_item_errors", [])
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form", false)
+                        var msg = "Item " + prm.itemname + " sudah terupdate dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("search", {
+                            current_page: context.state.current_page,
+                            search: context.state.xsearch,
+                            group_id: context.state.selected_group.Nat_GroupID
+                        })
+                    } else {
+                        context.commit("update_item_errors", [])
+                        context.commit("update_opendialoginfo", true)
+                        context.commit("update_msginfo", "error update")
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_error_message", e.message)
+                context.commit("update_save_status", 3)
+                context.commit("update_alert_error", true)
+            }
+        },
+
+        // delete item
+        async delete_item(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.delete_item(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_status", 3)
+                    context.commit("update_alert_error", true)
+                } else {
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    };
+
+                    if (data.total !== -1) {
+                        context.commit("update_item_errors", [])
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form", false)
+                        var msg = "Item " + prm.itemname + " sudah terhapus dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("search", {
+                            current_page: context.state.current_page,
+                            search: context.state.xsearch,
+                            group_id: context.state.selected_group.Nat_GroupID
+                        })
+                    } else {
+                        context.commit("update_item_errors", [])
+                        context.commit("update_opendialoginfo", true)
+                        context.commit("update_msginfo", "error delete")
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_error_message", e.message)
+                context.commit("update_save_status", 3)
+                context.commit("update_alert_error", true)
+            }
+        },
+    }
+};

test/vuex/acc-one-md-item/store.js

@@ -0,0 +1,17 @@
+import item from "./modules/item.js";
+import system from "../../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        item: item,
+        system: system
+    },
+    state: {
+
+    },
+    mutations: {
+        
+    },
+    actions: {
+
+    }
+})

test/vuex/acc-one-purchase-request-nonpersediaan/api/api.js

@@ -0,0 +1,448 @@
+const URL = "/one-api/mockup/purchase/requester/";
+
+export async function search(payload) {
+  try {
+    var response = await axios.post(URL + "PurchaseRequestNonPersediaan/search", payload);
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function searchDetail(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/searchDetail",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function getRegional(payload) {
+  try {
+    var response = await axios.post(URL + "PurchaseRequestNonPersediaan/getRegionalBranchByUser", payload);
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function getBranch(payload) {
+  try {
+    var response = await axios.post(URL + "PurchaseRequestNonPersediaan/getBranch", payload);
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function saveRequest(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/saveRequest",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function updateRequest(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/updateRequest",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function deleteRequest(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/deleteRequest",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function saveDetail(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/saveDetail",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+export async function updateDetail(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/updateDetail",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+export async function deleteDetail(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/deleteDetail",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function orderRequest(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/orderRequest",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function getUnit(token, prm) {
+  try {
+      var resp = await axios.post(URL + 'PurchaseRequestNonPersediaan/getUnit', {
+          token: token,
+          search: prm
+      });
+      if (resp.status != 200) {
+          return {
+              status: "ERR",
+              message: resp.statusText
+          };
+      }
+      let data = resp.data;
+      return data;
+  } catch (e) {
+      return {
+          status: "ERR",
+          message: e.message
+      };
+  }
+}
+
+
+export async function getDivisionByUser(token) {
+  try {
+      var resp = await axios.post(URL + 'PurchaseRequestNonPersediaan/getDivisionByUser', {
+          token: token
+      });
+      if (resp.status != 200) {
+          return {
+              status: "ERR",
+              message: resp.statusText
+          };
+      }
+      let data = resp.data;
+      return data;
+  } catch (e) {
+      return {
+          status: "ERR",
+          message: e.message
+      };
+  }
+}
+
+
+export async function getItems(payload) {
+  try {
+      var resp = await axios.post(URL + 'PurchaseRequestNonPersediaan/getItems', payload);
+      if (resp.status != 200) {
+          return {
+              status: "ERR",
+              message: resp.statusText
+          };
+      }
+      let data = resp.data;
+      return data;
+  } catch (e) {
+      return {
+          status: "ERR",
+          message: e.message
+      };
+  }
+}
+
+export async function getItemGroupSubGroup(payload) {
+  try {
+    var resp = await axios.post(URL + 'PurchaseRequestNonPersediaan/getItemGroupSubGroup', payload);
+    if (resp.status != 200) {
+      return {  
+        status: "ERR",
+        message: resp.statusText
+      };
+    }
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message
+    };
+  }
+}
+
+export async function getUnitByItemId(payload) {
+  try {
+    var resp = await axios.post(URL + 'PurchaseRequestNonPersediaan/getUnitByItemId', payload);
+    if (resp.status != 200) {
+      return {
+        status: "ERR",
+        message: resp.statusText
+      };
+    }
+    let data = resp.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message
+    };
+  }
+}
+
+export async function savePurchaseRequest(payload) {
+  try {
+    var response = await axios.post(URL + 'PurchaseRequestNonPersediaan/savePurchaseRequest', payload);
+    if (response.status != 200) {
+      return {
+        status: "ERR",
+        message: response.statusText
+      };
+    }
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message
+    };
+  }
+}
+
+export async function saveAndDoPurchaseRequest(payload){
+  try {
+    var response = await axios.post(URL + 'PurchaseRequestNonPersediaan/saveAndDoPurchaseRequest', payload);
+    if (response.status != 200) {
+      return {
+        status: "ERR",
+        message: response.statusText
+      };
+    }
+    let data = response.data;
+    return data;
+  } catch (e) {
+    
+    return {
+      status: "ERR",
+      message: e.message
+    };
+  }
+}
+
+export async function getAPI(fn,payload) {
+  try {
+    let urx = URL + 'PurchaseRequestNonPersediaan/'+fn;
+    console.log(urx);
+    var response = await axios.post(urx, payload);
+    if (response.status != 200) {
+      return {
+        status: "ERR",
+        message: response.statusText
+      };
+    }
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message
+    };
+  }
+} 
+
+export async function getRiwayatItem(payload) {
+  try {
+    var response = await axios.post(URL + "PurchaseRequestNonPersediaan/getRiwayatItem", payload);
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}
+
+export async function confirmHandOver(payload) {
+  try {
+    var response = await axios.post(
+      URL + "PurchaseRequestNonPersediaan/confirmHandOver",
+      payload
+    );
+    if (response.status !== 200) {
+      return {
+        status: "ERR",
+        message: response.statusText,
+      };
+    }
+
+    let data = response.data;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      message: e.message,
+    };
+  }
+}

test/vuex/acc-one-purchase-request-nonpersediaan/components/addPurchaseRequestDialog.vue

@@ -0,0 +1,952 @@
+<template>
+    <v-layout row justify-center>
+        <v-dialog v-model="dialogUnit" persistent max-width="25%">
+            <v-card>
+                <v-card-title class="title grey lighten-2" primary-title>
+                    Ganti Satuan {{ selectedItem.itemDesc ? selectedItem.itemDesc : "" }}
+                </v-card-title>
+                <v-card-text>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <v-select :loading="loadingUnit" v-model="selectedUnit" return-object :items="unitOptions"
+                                label="Pilih Satuan" item-text="unitName"></v-select>
+                        </v-flex>
+                    </v-layout>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="error" flat @click="dialogUnit = false">
+                        Tutup
+                    </v-btn>
+                    <v-btn color="primary" flat @click="saveUnit()">Ganti</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <v-dialog v-model="dialogRequest" persistent max-width="75%">
+            <v-card>
+                <v-card-title class="headline grey lighten-2" primary-title>
+                    FORM STOCK REQUEST
+                </v-card-title>
+                <v-card-text class="pt-0 pb-0">
+                    <v-layout row>
+                        <v-flex pa-2 xs6>
+                            <v-menu v-model="menuDateUse" :close-on-content-click="false" transition="scale-transition"
+                                :nudge-right="40" lazy :disabled="act == 'preview'" offset-y full-width
+                                max-width="290px" min-width="290px">
+                                <template v-slot:activator="{ on }">
+                                    <v-text-field :value="dateUseFormatted" label="Tanggal Permintaan" readonly
+                                        v-on="on" @blur="dDateUse = deFormatedDate(dateUseFormatted)"></v-text-field>
+                                </template>
+                                <v-date-picker no-title v-model="xDateUse" @input="menuDateUse = false"></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex pa-2 xs6>
+                            <v-autocomplete v-model="xRegional" label="Regional*" menu-icon="mdi-chevron-down"
+                                :items="regionalOptions" item-text="S_RegionalName" :disabled="act == 'preview'"
+                                item-value="S_RegionalID" return-object readonly :error="errors.regional"
+                                :error-messages="errors.regional ? 'Regional harus diisi' : ''"></v-autocomplete>
+                        </v-flex>
+                        <v-flex pa-2 xs6>
+                            <v-autocomplete v-model="xBranch" :label="user.M_BranchID != '0' ? 'Cabang*' : 'Cabang'"
+                                menu-icon="mdi-chevron-down" :items="branchOptions" item-text="M_BranchName"
+                                item-value="M_BranchCode" placeholder="Pilih Cabang" :disabled="act == 'preview'"
+                                return-object :error="errors.branch"
+                                :error-messages="errors.branch ? 'Cabang harus diisi' : ''"></v-autocomplete>
+                        </v-flex>
+                        <v-flex pa-2 xs6>
+                            <v-select v-model="selectedItemCategory" label="Kategori Item*" :items="itemCategoryOptions"
+                                item-text="itemCategoryName" item-value="itemCategoryID" return-object
+                                menu-icon="mdi-chevron-down" hide-details :error="errors.itemCategory"
+                                :error-messages="errors.itemCategory ? 'Kategori Item harus dipilih' : ''"></v-select>
+
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row>
+                        <v-flex pa-2 pl-0 xs12>
+                            <v-text-field v-model="xDescription" label="Keterangan*" :disabled="act == 'preview'"
+                                :error="errors.description" required
+                                :error-messages="errors.description ? 'Keterangan harus diisi' : ''"></v-text-field>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row>
+                        <v-flex pa-2 pl-0 xs12>
+                            <!-- <v-btn v-if="dialogItem == false && act != 'preview'" color="primary" @click="dialogItem = true">Pilih Item</v-btn> -->
+                            <v-btn v-if="dialogItem == false && act != 'preview'" color="primary"
+                                @click="validateAndOpenItemDialog">Pilih
+                                Item</v-btn>
+                            <v-btn v-if="dialogItem == true && act != 'preview'" color="primary"
+                                @click="dialogItem = false">Tutup Pilih
+                                Item</v-btn>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout v-if="errors.details" row>
+                        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                            <v-alert :value="true" type="error" dismissible v-html="msgErrDetails">
+                            </v-alert>
+                        </v-flex>
+                    </v-layout>
+                    <div v-if="dialogItem == true && act != 'preview'">
+                        <v-divider></v-divider>
+                        <v-card elevation="10" class=" mt-2">
+                            <v-layout row>
+                                <v-flex class="mt-2" pa-2 pb-0 xs3>
+                                    <v-text-field v-model="searchItem" label="Cari..." placeholder="Ketikkan item"
+                                        style="max-width: 250px" hide-details></v-text-field>
+                                </v-flex>
+                                <v-flex class="mt-2" pa-2 pb-0 xs3>
+                                    <v-autocomplete v-model="selectedDivision" :items="divisionOptions" label="Divisi"
+                                        return-object menu-icon="mdi-chevron-down" item-text="DivisionName" hide-details
+                                        item-value="DivisionID"></v-autocomplete>
+
+                                </v-flex>
+                                <v-flex class="mt-2" pa-2 pb-0 xs3>
+                                    <v-autocomplete v-model="selectedItemGroup" :items="itemGroupOptions" hide-details
+                                        label="Grup" return-object menu-icon="mdi-chevron-down"
+                                        item-text="Nat_GroupName" item-value="Nat_GroupID"></v-autocomplete>
+
+                                </v-flex>
+                                <v-flex class="mt-2" pa-2 pb-0 xs3>
+                                    <v-autocomplete v-model="selectedItemSubGroup" :items="itemSubGroupOptions"
+                                        return-object hide-details label="Sub Grup" menu-icon="mdi-chevron-down"
+                                        item-text="Nat_SubGroupName" item-value="Nat_SubGroupID"></v-autocomplete>
+
+                                </v-flex>
+                                <v-flex class="mt-2" pa-2 pb-0 xs2>
+                                    <v-btn dark color="success" style="min-width: 40px; height: 40px; margin: 0"
+                                        @click="itemSearch()">
+                                        <v-icon>search</v-icon>
+                                    </v-btn>
+                                </v-flex>
+                            </v-layout>
+
+                            <v-layout row>
+                                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                                    <v-data-table :headers="headers" :items="items" :loading="loadingItem" hide-actions
+                                        class="elevation-1">
+                                        <template slot="items" slot-scope="props">
+                                            <td class="text-xs-left pa-2"
+                                                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                                @click="selectMe(props.item)">
+                                                <div style="display: flex;flex-direction: column; align-items: center;">
+                                                    {{ props.item.itemCode }}
+                                                    <v-chip small style="border-radius: 5px; flex-grow: 0">
+                                                        {{ props.item.itemDesc }}
+                                                    </v-chip>
+                                                </div>
+                                            </td>
+                                            <td class="text-xs-center pa-2"
+                                                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                                @click="selectMe(props.item)">
+                                                {{ props.item.remaining_stock }}
+                                            </td>
+                                            <td class="text-xs-center pa-2"
+                                                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                                @click="selectMe(props.item)">
+                                                {{ props.item.unitName }}
+                                            </td>
+                                            <td class="text-xs-center pa-2"
+                                                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                                @click="selectMe(props.item)">
+                                                <v-btn v-if="checkSelected(props.item) == false"
+                                                    style="min-width: 35px; height: 35px; margin: 0" small
+                                                    color="success" @click="addItem(props.item)"><v-icon
+                                                        small>check</v-icon></v-btn>
+
+                                                <v-btn style="min-width: 35px; height: 35px; margin: 0;" small
+                                                    color="info" @click="get_riwayat(props.item.itemId)">
+                                                    <v-icon small>history</v-icon>
+                                                </v-btn>
+                                            </td>
+                                        </template>
+                                    </v-data-table>
+                                </v-flex>
+                            </v-layout>
+                            <v-divider></v-divider>
+                            <v-layout row>
+                                <v-flex xs6>
+                                    <v-pagination style="margin-top: 10px; margin-bottom: 10px"
+                                        v-model="itemCurrentPage" :length="itemTotalPage"
+                                        :total-visible="7"></v-pagination>
+                                </v-flex>
+                                <v-flex class="pt-2 text-xs-right" xs6>
+                                    <v-btn color="primary" @click="dialogItem = false">Tutup Pilih Item</v-btn>
+                                </v-flex>
+                            </v-layout>
+                        </v-card>
+                        <v-divider></v-divider>
+                    </div>
+                    <v-card elevation="0" flat class=" mt-2">
+                        <v-layout row style="max-height: 600px; overflow: auto">
+                            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                                <v-data-table :headers="headersItems" :items="selectedItems" hide-actions
+                                    :loading="loadingDetailRequest" class="elevation-1">
+                                    <template slot="items" slot-scope="props">
+                                        <td class="text-xs-left pa-2"
+                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                            @click="selectMe(props.item)">
+                                            <div style="
+                              display: flex;
+                              flex-direction: column;
+                              align-items: center;
+                            ">
+                                                {{ props.item.itemCode }}
+                                                <v-chip small style="border-radius: 5px; flex-grow: 0">
+                                                    {{ props.item.itemDesc }}
+                                                </v-chip>
+                                            </div>
+                                        </td>
+                                        <td class="text-xs-center pa-2"
+                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                            @click="selectMe(props.item)">
+                                            <v-btn depressed v-if="act != 'preview'" small color="primary"
+                                                @click="openDialogUnit(props.item)">{{ props.item.unitName }}</v-btn>
+                                            <span v-else>{{ props.item.unitName }}</span>
+                                        </td>
+                                        <td class="text-xs-center pa-2"
+                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                            @click="selectMe(props.item)">
+                                            <v-text-field v-if="act != 'preview'" v-model="props.item.qty"
+                                                @change="updateQuantity(props.item)"></v-text-field>
+                                            <span v-else>{{ props.item.qty }}</span>
+
+                                        </td>
+                                        <td class="text-xs-center pa-2"
+                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                            @click="selectMe(props.item)">
+                                            <v-text-field prefix="Rp" v-if="props.item.isEditingPrice == 'Y'"
+                                                v-model="props.item.price" outlined @blur="updatePrice(props.item)"
+                                                @click.stop></v-text-field>
+                                            <v-text-field prefix="Rp" v-else :value="oneMoney(props.item.price)"
+                                                outlined readonly @click.stop="changePrice(props.item)"></v-text-field>
+                                        </td>
+                                        <td class="text-xs-right pa-2"
+                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                            @click="selectMe(props.item)">
+                                            <span>Rp {{ oneMoney(props.item.price * props.item.qty) }}</span>
+                                        </td>
+                                        <td class="text-xs-center pa-2"
+                                            v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                            @click="selectMe(props.item)">
+                                            <v-btn v-if="act != 'preview'"
+                                                style="min-width: 35px; height: 35px; margin: 0" small color="error"
+                                                dark @click="deleteItem(props.item)"><v-icon
+                                                    small>close</v-icon></v-btn>
+
+                                            <v-btn style="min-width: 35px; height: 35px; margin: 0;" small color="info"
+                                                @click="get_riwayat(props.item.itemId)">
+                                                <v-icon small>history</v-icon>
+                                            </v-btn>
+
+                                        </td>
+                                    </template>
+                                </v-data-table>
+                            </v-flex>
+                        </v-layout>
+                    </v-card>
+                </v-card-text>
+
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn v-if="act === 'new'" color="info" :disabled="loadingSave" dark
+                        @click="saveAndRequestPurchase()">Save &
+                        Request Purchase</v-btn>
+                    <v-btn v-if="act === 'edit'" color="info" :disabled="loadingSave" dark
+                        @click="requestPending()">Request
+                        Purchase</v-btn>
+                    <v-btn color="error" flat @click="closeDialogRequest()">Tutup</v-btn>
+                    <v-btn v-if="act === 'new'" color="primary" :disabled="loadingSave" dark
+                        @click="savePurchaseRequest()">Simpan</v-btn>
+                    <v-btn v-if="act === 'edit'" color="primary" :disabled="loadingSave" dark
+                        @click="updatePurchaseRequest()">Simpan
+                        Perubahan</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <one-dialog-alert :status="dialogConfirmRequest"
+            :msg="'Yakin mau melakukan Purchase Request? Tidak bisa diedit setelah melakukan Request'"
+            @forget-dialog-alert="dialogConfirmRequest = false" @close-dialog-alert="confirmAndRequestPurchase()"
+            confirmLabel="Yakin" cancelLabel="Batal"></one-dialog-alert>
+    </v-layout>
+</template>
+
+<script>
+module.exports = {
+    name: "AddPurchaseRequestDialog",
+    components: {
+        "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue")
+    },
+    data() {
+        return {
+            errors: { regional: false, branch: false, description: false, details: false },
+            msgErrDetails: "<p>Data item belum ada. Silahkan masukkan data item terlebih dahulu.</p>",
+            itemUnitChange: {},
+            dialogItem: false,
+            regionalRules: [(v) => !!v || "Regional harus diisi"],
+            branchRules: [(v) => !!v || "Cabang harus diisi"],
+            descRules: [(v) => !!v || "Keterangan harus diisi"],
+            validationForm: true,
+            dialogConfirmRequest: false,
+            headers: [
+                {
+                    text: "ITEM PERSEDIAAN",
+                    align: "center",
+                    sortable: false,
+                    value: "itemName",
+                    width: "15%",
+                    class: "success lighten-3 white--text",
+                },
+                {
+                    text: "SISA STOCK",
+                    align: "center",
+                    sortable: false,
+                    value: "qty",
+                    width: "10%",
+                    class: "success lighten-3 white--text",
+                },
+                {
+                    text: "SATUAN",
+                    align: "center",
+                    sortable: false,
+                    value: "unitName",
+                    width: "15%",
+                    class: "success lighten-3 white--text",
+                },
+                {
+                    text: "AKSI",
+                    align: "center",
+                    sortable: false,
+                    value: "action",
+                    width: "10%",
+                    class: "success lighten-3 white--text",
+                },
+            ],
+            headersItems: [
+                {
+                    text: "ITEM PERSEDIAAN",
+                    align: "center",
+                    sortable: false,
+                    value: "itemName",
+                    width: "15%",
+                    class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "SATUAN",
+                    align: "center",
+                    sortable: false,
+                    value: "unitName",
+                    width: "15%",
+                    class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "JUMLAH",
+                    align: "center",
+                    sortable: false,
+                    value: "qty",
+                    width: "5%",
+                    class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "HARGA",
+                    align: "center",
+                    sortable: false,
+                    value: "price",
+                    width: "12%",
+                    class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "TOTAL",
+                    align: "center",
+                    sortable: false,
+                    value: "total",
+                    width: "10%",
+                    class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI",
+                    align: "center",
+                    sortable: false,
+                    value: "action",
+                    width: "10%",
+                    class: "blue lighten-3 white--text",
+                },
+            ]
+        };
+    },
+    computed: {
+        itemCategoryOptions() {
+            return this.$store.state.requester.itemCategoryOptions;
+        },
+        selectedItemCategory: {
+            get() {
+                return this.$store.state.requester.selectedItemCategory;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedItemCategory", val);
+            },
+        },
+        loadingDetailRequest() {
+            return this.$store.state.requester.loadingDetailRequest;
+        },
+        loadingUnit() {
+            return this.$store.state.requester.loadingUnit;
+        },
+        dialogUnit: {
+            get() {
+                return this.$store.state.requester.dialogUnit;
+            },
+            set(val) {
+                this.$store.commit("requester/updateDialogUnit", val);
+            },
+        },
+        selectedUnit: {
+            get() {
+                return this.$store.state.requester.selectedUnit;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedUnit", val);
+            },
+        },
+        unitOptions: {
+            get() {
+                return this.$store.state.requester.unitOptions;
+            },
+            set(val) {
+                this.$store.commit("requester/updateUnitOptions", val);
+            },
+        },
+        dialogRequest: {
+            get() {
+                return this.$store.state.requester.dialogRequest;
+            },
+            set(val) {
+                this.$store.commit("requester/updateDialogRequest", val);
+            },
+        },
+        menuDateUse: {
+            get() {
+                return this.$store.state.requester.menuDateUse;
+            },
+            set(val) {
+                this.$store.commit("requester/updateMenuDateUse", val);
+            },
+        },
+        dateUseFormatted() {
+            return this.formatDate(this.xDateUse);
+        },
+        dDateUse: {
+            get() {
+                return this.$store.state.requester.dDateUse;
+            },
+            set(val) {
+                this.$store.commit("requester/updateDDateUse", val);
+            },
+        },
+        xDateUse: {
+            get() {
+                return this.$store.state.requester.xDateUse;
+            },
+            set(val) {
+                this.$store.commit("requester/updateXDateUse", val);
+            },
+        },
+        xBranch: {
+            get() {
+                return this.$store.state.requester.xBranch;
+            },
+            set(val) {
+                this.$store.commit("requester/updateXBranch", val);
+            },
+        },
+        branchOptions() {
+            return this.$store.state.requester.branchOptions;
+        },
+        regionalOptions() {
+            return this.$store.state.requester.regionalOptions;
+        },
+        xRegional: {
+            get() {
+                return this.$store.state.requester.xRegional;
+            },
+            set(val) {
+                this.$store.commit("requester/updateXRegional", val);
+            },
+        },
+        xDescription: {
+            get() {
+                return this.$store.state.requester.xDescription;
+            },
+            set(val) {
+                this.$store.commit("requester/updateXDescription", val);
+            },
+        },
+        xPRID() {
+            return this.$store.state.requester.xPRID;
+        },
+        act() {
+            return this.$store.state.requester.act;
+        },
+        itemCurrentPage: {
+            get() {
+                return this.$store.state.requester.itemCurrentPage;
+            },
+            set(val) {
+                this.$store.commit("requester/updateItemCurrentPage", val);
+                this.$store.dispatch("requester/getItems", {
+                    search: this.searchItem,
+                    division: this.selectedDivision.DivisionID ? this.selectedDivision.DivisionID : "",
+                    itemGroup: this.selectedItemGroup.Nat_GroupID ? this.selectedItemGroup.Nat_GroupID : "",
+                    itemSubGroup: this.selectedItemSubGroup.Nat_SubGroupID ? this.selectedItemSubGroup.Nat_SubGroupID : "",
+                    itemCategory: this.selectedItemCategory.itemCategoryID ? this.selectedItemCategory.itemCategoryID : "",
+                });
+            },
+        },
+        itemTotalPage: {
+            get() {
+                return this.$store.state.requester.itemTotalPage;
+            },
+        },
+        items: {
+            get() {
+                return this.$store.state.requester.items;
+            },
+            set(val) {
+                this.$store.commit("requester/updateItems", val);
+            }
+        },
+        selectedItem: {
+            get() {
+                return this.$store.state.requester.selectedItem;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedItem", val);
+            }
+        },
+        searchItem: {
+            get() {
+                return this.$store.state.requester.searchItem;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSearchItem", val);
+            }
+        },
+        loadingItem: {
+            get() {
+                return this.$store.state.requester.loadingItem;
+            },
+            set(val) {
+                this.$store.commit("requester/updateLoadingItem", val);
+            }
+        },
+        itemGroupOptions: {
+            get() {
+                return this.$store.state.requester.itemGroupOptions;
+            },
+            set(val) {
+                this.$store.commit("requester/updateItemGroupOptions", val);
+            }
+        },
+        selectedItemGroup: {
+            get() {
+                return this.$store.state.requester.selectedItemGroup;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedItemGroup", val);
+                console.log("Selected Item Group", val);
+                this.$store.commit("requester/updateItemSubGroupOptions", val.subGroups);
+                this.$store.commit("requester/updateSelectedItemSubGroup", val.subGroups[0]);
+            }
+        },
+        itemSubGroupOptions: {
+            get() {
+                return this.$store.state.requester.itemSubGroupOptions;
+            },
+            set(val) {
+                this.$store.commit("requester/updateItemSubGroupOptions", val);
+            }
+        },
+        selectedItemSubGroup: {
+            get() {
+                return this.$store.state.requester.selectedItemSubGroup;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedItemSubGroup", val);
+
+            }
+        },
+        loadingItemSubGroup: {
+            get() {
+                return this.$store.state.requester.loadingItemSubGroup;
+            },
+            set(val) {
+                this.$store.commit("requester/updateLoadingItemSubGroup", val);
+            }
+        },
+        loadingItemGroup: {
+            get() {
+                return this.$store.state.requester.loadingItemGroup;
+            },
+            set(val) {
+                this.$store.commit("requester/updateLoadingItemGroup", val);
+            }
+        },
+        divisionOptions: {
+            get() {
+                return this.$store.state.requester.divisionOptions;
+            },
+            set(val) {
+                this.$store.commit("requester/updateDivisionOptions", val);
+            }
+        },
+        selectedDivision: {
+            get() {
+                return this.$store.state.requester.selectedDivision;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedDivision", val);
+                this.$store.dispatch("requester/getItemGroupSubGroup");
+            }
+        },
+        loadingSave: {
+            get() {
+                return this.$store.state.requester.loadingSave;
+            },
+            set(val) {
+                this.$store.commit("requester/updateLoadingSave", val);
+            }
+        },
+        selectedItem: {
+            get() {
+                return this.$store.state.requester.selectedItem;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedItem", val);
+            }
+        },
+        selectedItems: {
+            get() {
+                return this.$store.state.requester.selectedItems;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedItems", val);
+            }
+        },
+        dialog_riwayat: {
+            get() {
+                return this.$store.state.requester.dialog_riwayat
+            },
+            set(val) {
+                this.$store.commit("requester/update_dialog_riwayat", val)
+            }
+        },
+        user: {
+            get() {
+                return this.$store.state.requester.user
+            },
+            set(val) {
+                this.$store.commit("requester/updateUser", val)
+            }
+        }
+    },
+    methods: {
+        changePrice(item) {
+            let items = this.selectedItems;
+            let index = items.findIndex(itemloop => itemloop.itemId == item.itemId);
+            items[index].isEditingPrice = 'Y';
+            this.$store.commit("requester/updateSelectedItems", items);
+        },
+        updatePrice(item) {
+            let items = this.selectedItems;
+            let index = items.findIndex(itemloop => itemloop.itemId == item.itemId);
+            items[index].price = item.price;
+            items[index].total = item.price * item.qty;
+            items[index].isEditingPrice = 'N';
+            this.$store.commit("requester/updateSelectedItems", items);
+        },
+        roundToThreeSignificantDigits(num) {
+            if (num === 0) return 0;
+
+            // Hitung jumlah digit
+            const absNum = Math.abs(num);
+            const magnitude = Math.floor(Math.log10(absNum)) + 1;
+
+            // Jika kurang dari 3 digit, tidak perlu dibulatkan
+            if (magnitude <= 3) return num;
+
+            // Hitung faktor pembulatan
+            const factor = Math.pow(10, magnitude - 3);
+
+            // Bulatkan
+            return Math.round(num / factor) * factor;
+        },
+        oneMoney(value) {
+            //return one_money(value);
+            let splitValue = value.toString().split(".");
+            if (splitValue.length > 1) {
+                let val = splitValue[0]
+                return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundToThreeSignificantDigits(splitValue[1]);
+            } else {
+                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+            }
+        },
+
+        requestPending() {
+            console.log("Selected Item Category", this.selectedItemCategory);
+            if (this.validateForm()) {
+                this.$store.commit("requester/updateLoadingSave", true);
+                this.$store.dispatch("requester/updatePurchaseRequest", {
+                    act: "pending",
+                    PRID: this.$store.state.requester.selectedMainTable.prId,
+                    PRNumber: this.$store.state.requester.selectedMainTable.prNumber,
+                    PRDateUse: this.xDateUse,
+                    PRRegional: this.xRegional.S_RegionalID,
+                    PRItemCategory: this.selectedItemCategory.itemCategoryID,
+                    PRBranch: typeof this.xBranch === "object" && this.xBranch !== null && "M_BranchCode" in this.xBranch ? this.xBranch.M_BranchCode : "",
+                    PRDescription: this.xDescription,
+                    items: this.selectedItems
+                });
+            }
+        },
+        updatePurchaseRequest() {
+            if (this.validateForm()) {
+                this.$store.commit("requester/updateLoadingSave", true);
+                this.$store.dispatch("requester/updatePurchaseRequest", {
+                    act: "edit",
+                    PRID: this.$store.state.requester.selectedMainTable.prId,
+                    PRNumber: this.$store.state.requester.selectedMainTable.prNumber,
+                    PRDateUse: this.xDateUse,
+                    PRRegional: this.xRegional.S_RegionalID,
+                    PRBranch: typeof this.xBranch === "object" && this.xBranch !== null && "M_BranchCode" in this.xBranch ? this.xBranch.M_BranchCode : "",
+                    PRItemCategory: this.selectedItemCategory.itemCategoryID,
+                    PRDescription: this.xDescription,
+                    items: this.selectedItems
+                });
+                this.dialogItem = false;
+                this.dialogItem = false;
+                this.$store.commit("requester/updateSelectedItemCategory", {});
+                this.$store.commit("requester/updateSelectedItems", []);
+            }
+        },
+        checkSelected(item) {
+            let selectedItems = this.selectedItems;
+            let rtn = false
+            if (selectedItems.length == 0) {
+                rtn = false;
+            }
+            selectedItems.forEach(itemloop => {
+                if (itemloop.itemId == item.itemId) {
+                    console.log(item.itemId, "itemloop.itemId == item.itemId");
+                    rtn = true;
+                }
+            });
+            return rtn;
+        },
+        savePurchaseRequest() {
+            if (this.validateForm()) {
+                this.$store.commit("requester/updateLoadingSave", true);
+                this.$store.dispatch("requester/savePurchaseRequest", {
+                    PRDateUse: this.xDateUse,
+                    PRRegional: this.xRegional.S_RegionalID,
+                    PRBranch: typeof this.xBranch === "object" && this.xBranch !== null && "M_BranchCode" in this.xBranch ? this.xBranch.M_BranchCode : "",
+                    PRItemCategory: this.selectedItemCategory.itemCategoryID,
+                    PRDescription: this.xDescription,
+                    items: this.selectedItems
+                });
+                this.dialogItem = false;
+                this.$store.commit("requester/updateSelectedItemCategory", {});
+                this.$store.commit("requester/updateSelectedItems", []);
+            }
+        },
+        saveAndRequestPurchase() {
+            if (this.validateForm()) {
+                // Show confirmation dialog instead of proceeding directly
+                this.dialogConfirmRequest = true;
+            } else {
+                this.errors.details = true;
+                this.msgErrDetails = this.selectedItems.length == 0 ?
+                    "<p>Data item belum ada. Silahkan masukkan data item terlebih dahulu.</p>" :
+                    this.msgErrDetails;
+            }
+        },
+        confirmAndRequestPurchase() {
+            // Close the dialog
+            this.dialogConfirmRequest = false;
+
+            // Now proceed with the actual save and request
+            this.$store.commit("requester/updateLoadingSave", true);
+            this.$store.dispatch("requester/saveAndDoPurchaseRequest", {
+                PRDateUse: this.xDateUse,
+                PRRegional: this.xRegional.S_RegionalID,
+                PRBranch: typeof this.xBranch === "object" && this.xBranch !== null && "M_BranchCode" in this.xBranch ? this.xBranch.M_BranchCode : "",
+                PRItemCategory: this.selectedItemCategory.itemCategoryID,
+                PRDescription: this.xDescription,
+                items: this.selectedItems
+            });
+        },
+
+        validateAndOpenItemDialog() {
+            if (!this.selectedItemCategory || !this.selectedItemCategory.itemCategoryID) {
+                this.$store.commit("requester/updateSnackbar", {
+                    state: true,
+                    type: "error",
+                    message: "Pilih 'Kategori Item' terlebih dahulu"
+                });
+            } else {
+                this.dialogItem = true;
+                this.$store.dispatch("requester/getItems", {
+                    search: "",
+                    division: "",
+                    itemCategory: this.selectedItemCategory.itemCategoryID ? this.selectedItemCategory.itemCategoryID : "",
+                    itemGroup: "",
+                    itemSubGroup: ""
+                });
+            }
+        },
+
+        itemSearch() {
+            this.$store.dispatch("requester/getItems", {
+                search: this.searchItem,
+                division: this.selectedDivision.DivisionID ? this.selectedDivision.DivisionID : "",
+                itemGroup: this.selectedItemGroup.Nat_GroupID ? this.selectedItemGroup.Nat_GroupID : "",
+                itemSubGroup: this.selectedItemSubGroup.Nat_SubGroupID ? this.selectedItemSubGroup.Nat_SubGroupID : "",
+                itemCategory: this.selectedItemCategory.itemCategoryID ? this.selectedItemCategory.itemCategoryID : ""
+            });
+        },
+        addItem(item) {
+            let selectedItems = this.selectedItems;
+            let index = selectedItems.findIndex(itemloop => itemloop.itemId == item.itemId);
+            if (index == -1) {
+                selectedItems.push(item);
+            }
+
+            this.$store.commit("requester/updateSelectedItems", selectedItems);
+        },
+        deleteItem(item) {
+            let selectedItems = this.selectedItems;
+            let index = selectedItems.findIndex(itemloop => itemloop.itemId == item.itemId);
+            if (index != -1) {
+                selectedItems.splice(index, 1);
+            }
+            this.$store.commit("requester/updateSelectedItems", selectedItems);
+        },
+
+        updateQuantity(item) {
+            let items = this.selectedItems;
+            let index = items.findIndex(itemloop => itemloop.itemId == item.itemId);
+            items[index].qty = item.qty;
+            this.$store.commit("requester/updateSelectedItems", items);
+        },
+        saveUnit() {
+            let items = this.selectedItems;
+            let index = items.findIndex(itemloop => itemloop.itemId == this.itemUnitChange.itemId);
+            let selectedUnit = this.selectedUnit;
+            items[index].unitCode = selectedUnit.unitCode;
+            items[index].unitId = selectedUnit.unitId;
+            items[index].unitName = selectedUnit.unitName;
+            this.$store.commit("requester/updateSelectedItems", items);
+            this.$store.commit("requester/updateDialogUnit", false);
+        },
+        openDialogUnit(item) {
+            this.itemUnitChange = item
+            this.$store.dispatch("requester/getUnitByItemId", {
+                itemId: item.itemId,
+                selectedUnit: { unitId: item.unitId, unitCode: item.unitCode, unitName: item.unitName }
+            });
+        },
+        isSelected(p) {
+            return (
+                p.itemId ==
+                this.$store.state.requester.selectedItem
+                    .itemId
+            );
+        },
+        selectMe(spr) {
+            this.$store.commit("requester/updateSelectedItem", spr);
+        },
+        formatDate(date) {
+            if (!date) return null;
+
+            const [year, month, day] = date.split("-");
+            return `${day}-${month}-${year}`;
+        },
+        deFormatedDate(date) {
+            if (!date) return null;
+
+            const [day, month, year] = date.split("-");
+            return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+        },
+        closeDialogRequest() {
+            this.$store.commit(
+                "requester/updateXDateUse",
+                moment(new Date()).format("YYYY-MM-DD")
+            );
+            this.$store.commit("requester/updateXBranch", "");
+            this.$store.commit("requester/updateXRegional", "");
+            this.$store.commit("requester/updateXDescription", "");
+            this.$store.commit("requester/updateDialogRequest", false);
+            this.$store.commit("requester/updateSelectedItems", []);
+            this.$store.commit("requester/updateSelectedItemCategory", {});
+            this.$store.commit("requester/updateSnackbar", {
+                state: false,
+                type: "",
+                message: ""
+            });
+            this.dialogItem = false;
+            this.$store.commit("requester/updateItems", []);
+        },
+        validateForm() {
+            this.errors.regional = _.isEmpty(this.xRegional) ? true : false;
+            if (this.user.M_BranchID == '0') {
+                this.errors.branch = false
+            } else if (this.user.M_BranchID != '0') {
+                this.errors.branch = _.isEmpty(this.xBranch) ? true : false;
+            }
+            this.errors.description = this.xDescription == "" ? true : false;
+            this.errors.details = this.selectedItems.length == 0 ? true : false;
+            this.errors.itemCategory = this.selectedItemCategory == "" ? true : false;
+            this.msgErrDetails = this.selectedItems.length == 0 ? "<p>Data item belum ada. Silahkan masukkan data item terlebih dahulu.</p>" : "";
+
+            let details = this.selectedItems
+            details.forEach(item => {
+                if (parseInt(item.qty) == 0 || item.qty == "") {
+                    this.errors.details = true;
+                    if (this.msgErrDetails == "") {
+                        this.msgErrDetails = "<p>Qty " + item.itemDesc + " tidak boleh 0</p>";
+                    } else {
+                        this.msgErrDetails += "<p>Qty " + item.itemDesc + " tidak boleh 0</p>";
+                    }
+                }
+            });
+            if (this.errors.regional == false && this.errors.branch == false && this.errors.description == false && this.errors.details == false && this.errors.itemCategory == false) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+
+        get_riwayat(id) {
+            this.$store.dispatch("requester/getRiwayatItem", { itemid: id })
+            this.dialog_riwayat = true
+        }
+    },
+    watch: {
+        selectedItemCategory: {
+            handler(newVal) {
+                if (newVal && newVal.itemCategoryID) {
+                    if (this.dialogItem) {
+                        this.$store.dispatch("requester/getItems", {
+                            search: "",
+                            division: "",
+                            itemCategory: newVal.itemCategoryID,
+                            itemGroup: "",
+                            itemSubGroup: ""
+                        });
+                    }
+                }
+            },
+            deep: true
+        }
+    },
+};
+</script>

test/vuex/acc-one-purchase-request-nonpersediaan/components/addRequestDetailDialog.vue

@@ -0,0 +1,262 @@
+<template>
+  <v-layout row justify-center>
+    <v-dialog v-model="dialogDetail" persistent max-width="500px">
+      <v-card>
+        <v-card-title class="headline grey lighten-2" primary-title>
+          FORM REQUEST DETAIL <span class="text-h6 font-weight-bold" v-if="act === 'edit'"> {{selectedMainTable.prNumber}}</span>
+        </v-card-title>
+        <v-card-text class="pt-0 pb-0">
+          <v-form ref="formDetail" v-model="validationDetail" lazy-validtion>
+            <v-layout wrap>
+              <v-flex xs12>
+                <v-text-field
+                  v-model="xDescriptionDetail"
+                  label="Deskripsi"
+                  :rules="descriptionRules"
+                  required
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12>
+                <v-text-field
+                  v-model="xAmountRequest"
+                  type="number"
+                  label="Jumlah"
+                  :min="1"
+                  :rules="amountRules"
+                  required
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12>
+                <v-autocomplete label="Item Unit" v-model="selected_item_unit"
+                    :items="item_units" :search-input.sync="search_item_unit"
+                    auto-select-first no-filter item-text="ItemUnitName"
+                    return-object
+                    no-data-text="Pilih Item Unit"
+                    >
+                    <template slot="item" slot-scope="{ item }">
+                        <v-list-tile-content>
+                            <v-list-tile-title v-text="item.ItemUnitName"></v-list-tile-title>
+                        </v-list-tile-content>
+                    </template>
+                </v-autocomplete> 
+              </v-flex>
+              <v-flex xs12>
+                <v-text-field 
+                  v-model="xEstimationPrice" 
+                  label="Harga"><template v-slot:append-outer>
+                    <span class="text-h4 font-weight-bold">{{formatAngka(xEstimationPrice)}}</span>
+                  </template>
+                </v-text-field>
+              </v-flex>
+              <v-flex xs12>
+                <v-text-field 
+                  v-model="total_price" 
+                  label="Total Harga"><template v-slot:append-outer>
+                    <span class="text-h4 font-weight-bold">{{formatAngka(total_price)}}</span>
+                  </template>
+                </v-text-field>
+              </v-flex>
+            </v-layout>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="error" flat @click="closeDialogDetail()"> Tutup </v-btn>
+          <v-btn v-if="act === 'new'" color="primary" dark @click="saveDetail()"
+            >Simpan</v-btn
+          >
+          <v-btn
+            v-if="act === 'edit'"
+            color="primary"
+            dark
+            @click="updateDetail()"
+            >Simpan Perubahan</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+
+<script>
+module.exports = {
+  name: "AddRequestDetailDialog",
+  data() {
+    return {
+      descriptionRules: [(v) => !!v || "Deskripsi harus diisi"],
+      amountRules: [(v) => (!!v && v > 0) || "Jumlah harus diisi"],
+      priceRules: [(v) => (!!v && v > 0) || "Harga harus diisi"],
+      validationDetail: false,
+    };
+  },
+  mounted() {
+    this.$store.dispatch("requester/getUnit", this.search_item_unit)
+  },
+  computed: {
+    selectedMainTable() {
+      return this.$store.state.requester.selectedMainTable;
+    },
+    selectedDetailTable() {
+      return this.$store.state.requester.selectedDetailTable;
+    },
+    xDescriptionDetail: {
+      get() {
+        return this.$store.state.requester.xDescriptionDetail;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXDescriptionDetail", val);
+      },
+    },
+    xAmountRequest: {
+      get() {
+        return this.$store.state.requester.xAmountRequest;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXAmountRequest", val);
+      },
+    },
+    xEstimationPrice: {
+      get() {
+        return this.$store.state.requester.xEstimationPrice;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXEstimationPrice", val);
+      },
+    },
+    dialogDetail: {
+      get() {
+        return this.$store.state.requester.dialogDetail;
+      },
+      set(val) {
+        this.$store.commit("requester/updateDialogDetail", val);
+      },
+    },
+    act() {
+      return this.$store.state.requester.act;
+    },
+    total_price() {
+      return this.$store.state.requester.total_price;
+    },
+    item_units() {
+      return this.$store.state.requester.item_units;
+    },
+    selected_item_unit: {
+      get() {
+        return this.$store.state.requester.selected_item_unit;
+      },
+      set(val) {
+        this.$store.commit("requester/updateSelectedItemUnit", val);
+      },
+    },
+    search_item_unit: {
+      get() {
+        return this.$store.state.requester.search_item_unit;
+      },
+      set(val) {
+        this.$store.commit("requester/updateSearchItemUnit", val);
+      },
+    },
+    act() {
+      return this.$store.state.requester.act;
+    },
+  },
+  methods: {
+    convertMoney(money){
+        return one_money(money)
+    },
+    formatAngka(nilai) {
+      // Jika tidak ada nilai
+      if (!nilai) return '';
+      
+      try {
+          // Ubah ke string
+          let strNilai = String(nilai);
+          
+          // Jika berisi titik desimal
+          if (strNilai.includes('.')) {
+              // Split bagian utama dan desimal
+              let bagian = strNilai.split('.');
+              let utama = bagian[0];
+              let desimal = bagian[1];
+              
+              // Format bagian utama
+              utama = utama.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+              
+              // Kembalikan gabungan
+              return utama + ',' + desimal;
+          } else {
+              // Tidak ada desimal, hanya format bagian utama
+              return strNilai.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+          }
+      } catch (error) {
+          console.error("Error formatting:", error);
+          return nilai;
+      }
+    },
+    closeDialogDetail() {
+      this.$store.commit("requester/updateXDescriptionDetail", "");
+      this.$store.commit("requester/updateXAmountRequest", 0);
+      this.$store.commit("requester/updateXEstimationPrice", 0);
+      this.$refs.formDetail.resetValidation();
+      this.$store.commit("requester/updateDialogDetail", false);
+    },
+    saveDetail() {
+      if (this.$refs.formDetail.validate()) {
+        this.$store.dispatch("requester/saveDetail", {
+          PRID: this.selectedMainTable.PurchaseRequestDirectID,
+          PRDDescriptionDetail: this.xDescriptionDetail,
+          PRDAmountRequest: this.xAmountRequest,
+          PRDEstimationPrice: this.xEstimationPrice,
+          PRDItemUnitID: this.selected_item_unit.ItemUnitID,
+        });
+      }
+    },
+    updateDetail() {
+      if (this.$refs.formDetail.validate()) {
+        this.$store.dispatch("requester/updateDetail", {
+          PRID: this.selectedMainTable.PurchaseRequestDirectID,
+          PRDID: this.selectedDetailTable.PurchaseRequestDirectDetailID,
+          PRDDescriptionDetail: this.xDescriptionDetail,
+          PRDAmountRequest: this.xAmountRequest,
+          PRDEstimationPrice: this.xEstimationPrice,
+          PRDItemUnitID: this.selected_item_unit.ItemUnitID,
+        });
+      }
+    },
+    calculateTotalPrice() {
+      let total_price = this.xAmountRequest * this.xEstimationPrice;
+      this.$store.commit("requester/updateTotalPrice", total_price);
+    },
+    thr_search_item_unit: _.debounce(function () {
+        this.$store.dispatch("requester/getUnit", this.search_item_unit)
+    }, 1000),
+  },
+  watch: {
+    dialogDetail(val, old) {
+      if (val) {
+       // this.$refs.formDetail.reset();
+       // this.$refs.formDetail.resetValidation();
+      }
+    },
+    xAmountRequest(val, old) {
+      if (val <= 0) {
+        this.$store.commit("requester/updateXAmountRequest", 0);
+      }
+      this.calculateTotalPrice();
+    },
+    xEstimationPrice(val, old) {
+      if (val < 0) {
+        this.$store.commit("requester/updateXEstimationPrice", 0);
+      }
+      this.calculateTotalPrice();
+    },
+    search_item_unit(val, old) {
+        if (val == old) return;
+        if (!val) return;
+        if (val.length < 1) return;
+        if (this.$store.state.requester.loadingAutocomplete == 1) return;
+        this.thr_search_item_unit();
+    },
+  },
+};
+</script>

test/vuex/acc-one-purchase-request-nonpersediaan/components/dialogConfirmHandover.vue

@@ -0,0 +1,57 @@
+<template>
+    <v-dialog v-model="dialogConfirmHandover" persistent width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                KONFIRMASI TERIMA BARANG INVENTARIS
+            </v-card-title>
+
+            <v-card-text>
+                <p>Apakah Anda yakin ingin melakukan konfirmasi terima barang inventaris ?</p>
+            </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="saveConfirmHandOver()">Ya, Konfirmasi Terima</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+        }
+    },
+    computed: {
+        dialogConfirmHandover: {
+            get() {
+                return this.$store.state.requester.dialogConfirmHandover
+            },
+            set(val) {
+                this.$store.commit("requester/updateDialogConfirmHandover", val)
+            }
+        },
+        selected_main: {
+            get() {
+                return this.$store.state.requester.selectedMainTable
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedMainTable", val)
+            }
+        },
+    },
+    methods: {
+        closeHandOver() {
+            this.dialogConfirmHandover = false
+        },
+        async saveConfirmHandOver() {
+            let prm = {
+                purchaseRequestID: this.selected_main.prId,
+            }
+            await this.$store.dispatch("requester/confirmHandOver", prm);
+        },
+    },
+}
+</script>

test/vuex/acc-one-purchase-request-nonpersediaan/components/dialogRiwayat.vue

@@ -0,0 +1,87 @@
+<template>
+    <v-dialog v-model="dialog_riwayat" persistent max-width="40%">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                Riwayat Stock Request Item
+            </v-card-title>
+
+            <v-card-text>
+                <v-data-table
+                    :headers="headers" :items="riwayat_item.records" 
+                    class="elevation-1" hide-actions
+                >
+                    <template slot="items" slot-scope="props">
+                        <tr>
+                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDetailCreated }}</td>
+                            <td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td>
+                            <td class="text-xs-center pa-2">{{ props.item.ItemUnitName }}</td>
+                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDetailQty }}</td>
+                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestStatus }}</td>
+                        </tr>
+                    </template>
+                </v-data-table>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" flat @click="closeDialog()"> Tutup </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    mounted() {},
+    data() {
+        return {
+            headers: [
+                {
+                    text: "TANGGAL", align: "center", sortable: false,
+                    value: "no", width: "20%", class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false,
+                    value: "item", width: "30%", class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "UNIT", align: "center", sortable: false,
+                    value: "unit", width: "20%", class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY", align: "center", sortable: false,
+                    value: "qty", width: "15%", class: "blue lighten-3 white--text",
+                },
+                {
+                    text: "STATUS", align: "center", sortable: false,
+                    value: "status", width: "15%", class: "blue lighten-3 white--text",
+                }
+            ]
+        }
+    },
+    computed: {
+        dialog_riwayat: {
+            get() {
+                return this.$store.state.requester.dialog_riwayat
+            },
+            set(val) {
+                this.$store.commit("requester/update_dialog_riwayat", val)
+            }
+        },
+        riwayat_item: {
+            get() {
+                return this.$store.state.requester.riwayat_item
+            },
+            set(val) {
+                this.$store.commit("requester/update_riwayat_item", val)
+            }
+        }
+    },
+    methods: {
+        closeDialog() {
+            this.riwayat_item = {}
+            this.dialog_riwayat = false
+        }
+    },
+}
+</script>

test/vuex/acc-one-purchase-request-nonpersediaan/components/requestListing.vue

@@ -0,0 +1,826 @@
+<template>
+  <div style="width: 100%">
+    <v-snackbar
+      v-model="snackbar.state"
+      :color="snackbar.type"
+      :timeout="3000"
+      multi-line
+      top
+    >
+      {{ snackbar.message }}
+      <v-btn flat @click="snackbar.state = false">
+        Close
+      </v-btn>
+    </v-snackbar>
+    <v-layout row wrap>
+      <v-flex xs12 class="left" fill-height pa-1>
+        <v-toolbar color="primary" dark>
+          <v-toolbar-title class="white--text"
+            >STOCK REQUEST NON PERSEDIAAN</v-toolbar-title
+          >
+          <v-spacer></v-spacer>
+          <v-btn icon @click="openDialogRequest()">
+            <v-icon>add_box</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-card class="pa-2">
+          <v-layout row>
+            <v-flex pa-1 xs2>
+              <v-menu
+                v-model="menuStartDate"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                :nudge-right="40"
+                lazy
+                offset-y
+                max-width="290px"
+                min-width="290px"
+                hide-details
+              >
+                <template v-slot:activator="{ on }">
+                  <v-text-field
+                    :value="startDateFormatted"
+                    label="Tanggal Awal"
+                    readonly
+                    style="max-width: 250px"
+                    outline
+                    hide-details
+                    v-on="on"
+                    @blur="dStartDate = deFormatedDate(startDateFormatted)"
+                  ></v-text-field>
+                </template>
+                <v-date-picker
+                  no-title
+                  v-model="fStartDate"
+                  @input="menuStartDate = false"
+                ></v-date-picker>
+              </v-menu>
+            </v-flex>
+            <v-flex pa-1 xs2>
+              <v-menu
+              v-model="menuEndDate"
+              hide-details
+              :close-on-content-click="false"
+              transition="scale-transition"
+              :nudge-right="40"
+              lazy
+              offset-y
+              max-width="290px"
+              min-width="290px"
+            >
+              <template v-slot:activator="{ on }">
+                <v-text-field
+                  :value="endDateFormatted"
+                  label="Tanggal Akhir"
+                  readonly
+                  style="max-width: 250px"
+                  outline
+                  hide-details
+                  v-on="on"
+                  @blur="dEndDate = deFormatedDate(endDateFormatted)"
+                ></v-text-field>
+              </template>
+              <v-date-picker
+                no-title
+                v-model="fEndDate"
+                @input="menuEndDate = false"
+              ></v-date-picker>
+            </v-menu>
+            </v-flex>
+            <v-flex pa-1 xs2>
+              <v-autocomplete
+              v-model="fStatus"
+              menu-icon="mdi-chevron-down"
+              :items="statusOptions"
+              item-text="title"
+              item-value="value"
+              label="Status"
+              style="max-width: 250px"
+              outline
+              hide-details
+            ></v-autocomplete>
+            </v-flex>
+            <v-flex pa-1 xs2>
+              <v-text-field
+              v-model="fSearch"
+              label="Cari..."
+              placeholder="NO. PR"
+              style="max-width: 250px"
+              outline
+              hide-details
+            ></v-text-field>
+            </v-flex>
+            <v-flex pa-1 xs2>
+              <v-btn
+              dark
+              color="primary"
+              style="min-width: 50px; height: 50px; margin: 0"
+              @click="mainTableSearch()"
+            >
+              <v-icon>search</v-icon>
+            </v-btn>
+            </v-flex>
+          </v-layout>
+         
+        </v-card>
+        <v-card class="pa-2 mt-2">
+          <v-layout row style="max-height: 600px; overflow: auto">
+            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+              <v-data-table
+                :headers="headers"
+                :items="mainTable"
+                :loading="mainTableLoading"
+                hide-actions
+                class="elevation-1"
+              >
+                <template slot="items" slot-scope="props">
+                  <td
+                    class="text-xs-center pa-2"
+                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                    @click="selectMe(props.item)"
+                  >
+                    <div
+                      style="
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                      "
+                    >
+                      {{ props.item.prNumber }}
+                      <v-chip small style="border-radius: 5px; flex-grow: 0">
+                        {{ props.item.prRequestedBy }}
+                      </v-chip>
+                    </div>
+                  </td>
+                  <td
+                    class="text-xs-left pa-2"
+                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                    @click="selectMe(props.item)"
+                  >
+                    <div class="date-type-table">
+                      <span>
+
+                        {{
+                          deFormatedDate(props.item.prDate)
+                        }}
+                      </span>
+                      
+                    </div>
+                  </td>
+                  <td
+                    class="text-xs-left pa-2"
+                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                    @click="selectMe(props.item)"
+                  >
+                  <div>
+                      {{ props.item.prNote }}
+                  </div>
+                  </td>
+                  <td
+                    class="text-xs-left pa-2"
+                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                    @click="selectMe(props.item)"
+                  >
+                    <v-chip
+                      small
+                      :text-color="
+                        props.item.prStatus === 'Draft'
+                          ? 'black'
+                          : 'white'
+                      "
+                      :color="
+                        getChipStatusColor(
+                          props.item.prStatus
+                        )
+                      "
+                    >
+                      {{ props.item.prStatus }}
+                    </v-chip>
+                  </td>
+                  
+                  <template
+                    v-if="props.item.prStatus == 'Draft'"
+                  >
+                    <td
+                      class="text-xs-center pa-2 pr-5"
+                      v-bind:class="{
+                        'amber lighten-4': isSelected(props.item),
+                      }"
+                    >
+                      <v-icon small @click="editRequest(props.item)"
+                        >edit</v-icon
+                      >
+                      <v-icon small @click="deleteRequest(props.item)"
+                        >delete</v-icon
+                      >
+                    </td>
+                  </template>
+                  <template v-else-if="props.item.prStatus == 'Pending'">
+                    <td
+                      class="text-xs-center pa-2 pr-5"
+                      v-bind:class="{
+                        'amber lighten-4': isSelected(props.item),
+                      }"
+                    >
+                      <v-icon small @click="previewRequest(props.item)"
+                        >receipt</v-icon
+                      >
+                    </td>
+                  </template>
+                  <template v-else-if="props.item.hasHandover === '1' && props.item.handoverConfirmedBy == '0' && props.item.handoverToUserID === user.M_UserID">
+                    <td
+                      class="text-xs-center pa-2 pr-5"
+                      v-bind:class="{
+                        'amber lighten-4': isSelected(props.item),
+                      }"
+                    >
+                      <v-btn
+                        color="success"
+                        prepend-icon="mdi-check-circle"
+                        @click="confirmHandover(props.item)"
+                      >
+                        Konfirmasi Terima
+                      </v-btn>
+                    </td>
+                  </template>
+                  <template v-else>
+                    <td
+                      class="text-xs-center pa-2 pr-5"
+                      v-bind:class="{
+                        'amber lighten-4': isSelected(props.item),
+                      }"
+                    ></td>
+                  </template>
+                </template>
+              </v-data-table>
+            </v-flex>
+          </v-layout>
+          <v-divider></v-divider>
+          <v-pagination
+            style="margin-top: 10px; margin-bottom: 10px"
+            v-model="mainTableCurrentPage"
+            :length="mainTableTotalPage"
+          ></v-pagination>
+        </v-card>
+      </v-flex>
+      
+    </v-layout>
+
+    <add-purchase-request-dialog></add-purchase-request-dialog>
+    <add-request-detail-dialog></add-request-detail-dialog>
+    <riwayat-dialog></riwayat-dialog>
+    <dialog-confirm-handover></dialog-confirm-handover>
+
+    <one-dialog-alert
+      :status="dialogAlertDeleteRequest"
+      :msg="msgAlertDeleteRequest"
+      @forget-dialog-alert="dialogAlertDeleteRequest = false"
+      @close-dialog-alert="closeAndDeleteRequest()"
+    ></one-dialog-alert>
+
+    <one-dialog-alert
+      :status="dialogAlertDeleteDetail"
+      :msg="msgAlertDeleteRequest"
+      @forget-dialog-alert="dialogAlertDeleteDetail = false"
+      @close-dialog-alert="closeAndDeleteDetail()"
+    ></one-dialog-alert>
+  </div>
+</template>
+
+<style scoped>
+.date-type-table {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.table.v-table tbody td,
+table.v-table tbody th {
+  height: 40px;
+}
+
+.table.v-table thead tr {
+  height: 40px;
+}
+
+.scroll-container {
+  scroll-padding: 50px 0 0 50px;
+}
+</style>
+
+<script>
+module.exports = {
+  components: {
+    "add-purchase-request-dialog": httpVueLoader("./addPurchaseRequestDialog.vue"),
+    "add-request-detail-dialog": httpVueLoader("./addRequestDetailDialog.vue"),
+    "riwayat-dialog": httpVueLoader("./dialogRiwayat.vue"),
+    "dialog-confirm-handover": httpVueLoader("./dialogConfirmHandover.vue"),
+    "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
+    "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
+  },
+  data() {
+    return {
+      msgAlertDeleteRequest: "",
+      dialogAlertDeleteRequest: false,
+      dialogAlertDeleteDetail: false,
+      headers: [
+        {
+          text: "NO PR",
+          align: "center",
+          sortable: false,
+          value: "no",
+          width: "15%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "TANGGAL",
+          align: "left",
+          sortable: false,
+          value: "requestDate",
+          width: "15%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "KETERANGAN",
+          align: "left",
+          sortable: false,
+          value: "keterangan",
+          width: "20%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "STATUS",
+          align: "left",
+          sortable: false,
+          value: "status",
+          width: "15%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "AKSI",
+          align: "left",
+          sortable: false,
+          value: "action",
+          width: "5%",
+          class: "blue lighten-3 white--text",
+        },
+      ],
+      detailHeaders: [
+        {
+          text: "NO",
+          align: "center",
+          sortable: false,
+          value: "no",
+          width: "5%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "KETERANGAN",
+          align: "left",
+          sortable: false,
+          value: "requestDate",
+          width: "25%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "JUMLAH",
+          align: "left",
+          sortable: false,
+          value: "requestDate",
+          width: "5%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "HARGA",
+          align: "left",
+          sortable: false,
+          value: "requestDate",
+          width: "15%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "SATUAN",
+          align: "left",
+          sortable: false,
+          value: "requestDate",
+          width: "20%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "TOTAL HARGA",
+          align: "left",
+          sortable: false,
+          value: "useDate",
+          width: "15%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "STATUS",
+          align: "left",
+          sortable: false,
+          value: "status",
+          width: "10%",
+          class: "blue lighten-3 white--text",
+        },
+        {
+          text: "AKSI",
+          align: "left",
+          sortable: false,
+          value: "action",
+          width: "5%",
+          class: "blue lighten-3 white--text",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.$store.dispatch("requester/getRegionalBranchByUser");
+    this.$store.dispatch("requester/getItemCategory");
+    this.$store.dispatch("requester/search");
+  },
+  computed: {
+    act() {
+      return this.$store.state.requester.act;
+    },
+    mainTable() {
+      return this.$store.state.requester.mainTable;
+    },
+    detailTable() {
+      return this.$store.state.requester.detailTable;
+    },
+    mainTableLoading() {
+      return this.$store.state.requester.mainTableLoadingStatus === 1;
+    },
+    detailTableLoading() {
+      return this.$store.state.requester.detailTableLoadingStatus === 1;
+    },
+    mainTableTotalPage: {
+      get() {
+        return this.$store.state.requester.countMainTable;
+      },
+      set(val) {
+        this.$store.commit("requester/updateCountMainTable", val);
+      },
+    },
+    mainTableCurrentPage: {
+      get() {
+        return this.$store.state.requester.mainTableCurrentPage;
+      },
+      set(val) {
+        this.$store.commit("requester/updateMainTableCurrentPage", val);
+        this.$store.commit("requester/updateMainTableLastId", -1);
+        this.$store.dispatch("requester/search");
+      },
+    },
+    selectedMainTable: {
+      get() {
+        return this.$store.state.requester.selectedMainTable;
+      },
+      set(val) {
+        this.$store.commit("updateSelectedMainTable", val);
+      },
+    },
+    menuStartDate: {
+      get() {
+        return this.$store.state.requester.menuStartDate;
+      },
+      set(val) {
+        this.$store.commit("requester/updateMenuStartDate", val);
+      },
+    },
+    menuEndDate: {
+      get() {
+        return this.$store.state.requester.menuEndDate;
+      },
+      set(val) {
+        this.$store.commit("requester/updateMenuEndDate", val);
+      },
+    },
+    startDateFormatted() {
+      return this.formatDate(this.fStartDate);
+    },
+    endDateFormatted() {
+      return this.formatDate(this.fEndDate);
+    },
+    dStartDate: {
+      get() {
+        return this.$store.state.requester.dStartDate;
+      },
+      set(val) {
+        this.$store.commit("requester/updateDStartDate", val);
+      },
+    },
+    dEndDate: {
+      get() {
+        return this.$store.state.requester.dEndDate;
+      },
+      set(val) {
+        this.$store.commit("requester/updateDEndDate", val);
+      },
+    },
+    fStartDate: {
+      get() {
+        return this.$store.state.requester.fStartDate;
+      },
+      set(val) {
+        this.$store.commit("requester/updateFStartDate", val);
+      },
+    },
+    fEndDate: {
+      get() {
+        return this.$store.state.requester.fEndDate;
+      },
+      set(val) {
+        this.$store.commit("requester/updateFEndDate", val);
+      },
+    },
+    fStatus: {
+      get() {
+        return this.$store.state.requester.fStatus;
+      },
+      set(val) {
+        this.$store.commit("requester/updateFStatus", val);
+      },
+    },
+    statusOptions() {
+      return this.$store.state.requester.statusOptions;
+    },
+    fSearch: {
+      get() {
+        return this.$store.state.requester.fSearch;
+      },
+      set(val) {
+        this.$store.commit("requester/updateFSearch", val);
+      },
+    },
+    xNumber: {
+      get() {
+        return this.$store.state.requester.xNumber;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXNumber", val);
+      },
+    },
+    xPRID: {
+      get() {
+        return this.$store.state.requester.xPRID;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXPRID", val);
+      },
+    },
+    xPRDID: {
+      get() {
+        return this.$store.state.requester.xPRDID;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXPRDID", val);
+      },
+    },
+    snackbar: {
+        get() {
+        return this.$store.state.requester.snackbar;
+        },
+        set(val) {
+        this.$store.commit("requester/updateSnackbar", val);
+        },
+    },
+    user: {
+      get() {
+        return this.$store.state.requester.user
+      },
+      set(val) {
+        this.$store.commit("requester/updateUser", val)
+      }
+    }
+  },
+  methods: {
+    previewRequest(val){
+      this.$store.commit("requester/updateSelectedMainTable", val);
+      let selectedPr = val
+      this.$store.commit("requester/updateRegionalOptions", [{S_RegionalID : selectedPr.S_RegionalID, S_RegionalName : selectedPr.S_RegionalName}]);
+      this.$store.commit("requester/updateXRegional", {S_RegionalID : selectedPr.S_RegionalID, S_RegionalName : selectedPr.S_RegionalName});
+      //this.$store.commit("requester/updateBranchOptions", [{M_BranchCode : selectedPr.M_BranchCode, M_BranchName : selectedPr.M_BranchName}]);
+      this.$store.commit("requester/updateXBranch", {M_BranchCode : selectedPr.M_BranchCode, M_BranchName : selectedPr.M_BranchName});
+      this.$store.commit(
+        "requester/updateXDateUse",
+        selectedPr.prDate
+      );
+      this.$store.commit("requester/updateSelectedItemCategory", {itemCategoryID : selectedPr.itemCategoryID, itemCategoryName : selectedPr.itemCategoryName});
+      this.$store.commit("requester/updateXDescription", selectedPr.prNote);
+      this.$store.dispatch("requester/getDivisionByUser");
+      this.$store.commit("requester/updateDialogRequest", true);
+      this.$store.dispatch("requester/getDetailRequest", {
+        requestId: selectedPr.prId
+      });
+      this.$store.commit("requester/updateAct", "preview");
+    },
+    convertMoney(money){
+        return one_money(money)
+    },
+    isSelected(p) {
+      return (
+        p.prId ==
+        this.$store.state.requester.selectedMainTable
+          .prId
+      );
+    },
+    selectMe(spr) {
+      this.$store.commit("requester/updateSelectedMainTable", spr);
+      this.$store.dispatch("requester/searchDetail");
+    },
+    formatDate(date) {
+      if (!date) return null;
+
+      const [year, month, day] = date.split("-");
+      return `${day}-${month}-${year}`;
+    },
+    deFormatedDate(date) {
+      if (!date) return null;
+
+      const [day, month, year] = date.split("-");
+      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+    },
+    getChipStatusColor(status) {
+      switch (status) {
+        case "Pending":
+          return "warning";
+        case "Approved":
+          return "success";
+        case "Rejected":
+          return "error";
+        case "Completed":
+          return "info";
+        case "Paid":
+          return "success";
+        default:
+          return "";
+      }
+    },
+    getChipStatusDetailColor(status) {
+      switch (status) {
+        case "Pending":
+          return "warning";
+        case "Ordered":
+          return "success";
+        case "Received":
+          return "info";
+        case "Cancelled":
+          return "error";
+        default:
+          return "warning";
+      }
+    },
+    mainTableSearch() {
+      this.$store.dispatch("requester/search");
+      this.$store.commit("requester/updateSelectedMainTable", {});
+      this.$store.commit("requester/updateDetailTable", []);
+    },
+    resetItemTable() {
+      this.$store.commit("requester/updateItems", []);
+      this.$store.commit("requester/updateSelectedItem", {});
+      this.$store.commit("requester/updateSearchItem", "");
+      this.$store.commit("requester/updateLoadingItem", false);
+      this.$store.commit("requester/updateItemGroupOptions", []);
+      this.$store.commit("requester/updateSelectedItemGroup", {});
+      this.$store.commit("requester/updateItemSubGroupOptions", []);
+      this.$store.commit("requester/updateSelectedItemSubGroup", {});
+    },
+    openDialogRequest() {
+      let user = one_user()
+      this.$store.commit("requester/updateAct", "new");
+      this.$store.commit("requester/updateRegionalOptions", [{S_RegionalID : user.S_RegionalID, S_RegionalName : user.S_RegionalName}]);
+      this.$store.commit("requester/updateXRegional", {S_RegionalID : user.S_RegionalID, S_RegionalName : user.S_RegionalName});
+      this.$store.commit("requester/updateXBranch", {});
+      if(user.M_BranchName != ""){
+        this.$store.commit("requester/updateXBranch", {M_BranchCode : user.M_BranchCode, M_BranchName : user.M_BranchName});
+      }
+      this.$store.commit(
+        "requester/updateXDateUse",
+        moment(new Date()).format("YYYY-MM-DD")
+      );
+      this.$store.commit("requester/updateXDescription", "");
+      this.$store.commit("requester/updateDialogRequest", true);
+      this.$store.commit("requester/updateSelectedMainTable", {});
+      this.resetItemTable();
+      this.$store.dispatch("requester/getDivisionByUser");
+      // this.$store.dispatch("requester/getItems", {
+      //   search: "",
+      //   division: "",
+      //   itemGroup: "",
+      //   itemSubGroup: ""
+      // });
+      this.$store.commit("requester/updateAct", "new");
+      this.$store.commit("requester/updateSelectedItems", []);
+    },
+    editRequest(val) {
+      this.$store.commit("requester/updateSelectedMainTable", val);
+      this.$store.commit("requester/updateAct", "edit");
+      let selectedPr = val
+      this.$store.commit("requester/updateRegionalOptions", [{S_RegionalID : selectedPr.S_RegionalID, S_RegionalName : selectedPr.S_RegionalName}]);
+      this.$store.commit("requester/updateXRegional", {S_RegionalID : selectedPr.S_RegionalID, S_RegionalName : selectedPr.S_RegionalName});
+      this.$store.commit("requester/updateBranchOptions", [{M_BranchCode : selectedPr.M_BranchCode, M_BranchName : selectedPr.M_BranchName}]);
+      this.$store.commit("requester/updateXBranch", {M_BranchCode : selectedPr.M_BranchCode, M_BranchName : selectedPr.M_BranchName});
+      this.$store.commit(
+        "requester/updateXDateUse",
+        selectedPr.prDate
+      );
+      this.$store.commit("requester/updateXDescription", selectedPr.prNote);
+      this.$store.commit("requester/updateSelectedItemCategory", {itemCategoryID : selectedPr.itemCategoryID, itemCategoryName : selectedPr.itemCategoryName});
+      //console.log(this.$store.state.requester.itemCategory);
+      this.$store.dispatch("requester/getDivisionByUser");
+      this.$store.commit("requester/updateDialogRequest", true);
+      this.$store.dispatch("requester/getDetailRequest", {
+        requestId: selectedPr.prId
+      });
+    },
+    updateRequest(val) {
+      //this.$store.dispatch("requester/branch");
+      this.$store.commit(
+        "requester/updateXDateUse",
+        val.prDate
+      );
+      this.$store.commit("requester/updateBranchOptions", [{M_BranchCode : val.M_BranchCode, M_BranchName : val.M_BranchName}]);
+      this.$store.commit("requester/updateXBranch",{M_BranchCode : val.M_BranchCode, M_BranchName : val.M_BranchName});
+      this.$store.commit("requester/updateRegionalOptions", [{S_RegionalID : val.S_RegionalID, S_RegionalName : val.S_RegionalName}]);
+      this.$store.commit("requester/updateXRegional",{S_RegionalID : val.S_RegionalID, S_RegionalName : val.S_RegionalName});
+      this.$store.commit(
+        "requester/updateXDescription",
+        val.PurchaseRequestDirectDescription
+      );
+      this.$store.commit("requester/updateXPRID", val.PurchaseRequestDirectID);
+      this.$store.commit("requester/updateAct", "edit");
+      this.$store.commit("requester/updateDialogRequest", true);
+    },
+    deleteRequest(data) {
+      this.xPRID = data.prId;
+      this.xNumber = data.prNumber;
+
+      this.msgAlertDeleteRequest = `Yakin, mau hapus Purchase Request [${data.prNumber}] ?`;
+      this.dialogAlertDeleteRequest = true;
+    },
+    closeAndDeleteRequest() {
+      this.$store.dispatch("requester/deleteRequest", {
+        PRID: this.xPRID,
+        PRNumber: this.xNumber,
+      });
+      this.dialogAlertDeleteRequest = false;
+    },
+    openDialogDetail() {
+      this.$store.commit("requester/updateXDescriptionDetail", "");
+      this.$store.commit("requester/updateXAmountRequest", 0);
+      this.$store.commit("requester/updateXEstimationPrice",0);
+      this.$store.commit("requester/updateAct", "new");
+      this.$store.commit("requester/updateDialogDetail", true);
+      this.$store.commit("requester/updateSelectedItemUnit", {});
+    },
+    updateDetail(val) {
+      this.$store.commit("requester/updateXDescriptionDetail", val.PurchaseRequestDirectDescription);
+      this.$store.commit(
+        "requester/updateXAmountRequest",
+        val.PurchaseRequestDirectDetailAmountRequest
+      );
+      this.$store.commit(
+        "requester/updateXEstimationPrice",
+        val.PurchaseRequestDirectDetailEstimationPrice
+      );
+      this.$store.commit("requester/updateItemUnits", [{
+        ItemUnitID: val.PurchaseRequestDirectDetailItemUnitID,
+        ItemUnitName: val.ItemUnitName
+      }]);
+      this.$store.commit("requester/updateSelectedItemUnit", {
+        ItemUnitID: val.PurchaseRequestDirectDetailItemUnitID,
+        ItemUnitName: val.ItemUnitName
+      });
+      this.$store.commit("requester/updateSelectedDetailTable", val);
+      this.$store.commit("requester/updateAct", "edit");
+      this.$store.commit("requester/updateDialogDetail", true);
+    },
+    deleteDetail(data) {
+      this.xPRDID = data.PurchaseRequestDirectDetailID;
+
+      this.msgAlertDeleteRequest = `Yakin, mau hapus Request [${data.PurchaseRequestDirectDescription}] ?`;
+      this.dialogAlertDeleteDetail = true;
+    },
+    closeAndDeleteDetail() {
+      this.$store.dispatch("requester/deleteDetail", {
+        PRDID: this.xPRDID,
+        PRDDescriptionDetail: this.xDescriptionDetail,
+        PRID: this.selectedMainTable.PurchaseRequestDirectID,
+      });
+      this.dialogAlertDeleteDetail = false;
+    },
+    orderRequest(id, status) {
+      if (status === "Draft") {
+        this.$store.dispatch("requester/orderRequest", {
+          PRID: id,
+        });
+      }
+    },
+    confirmHandover(item) {
+      this.$store.commit("requester/updateSelectedMainTable", item);
+      this.$store.commit("requester/updateDialogConfirmHandover", true);
+    },
+  },
+};
+</script>

test/vuex/acc-one-purchase-request-nonpersediaan/index.php

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <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>
+
+<v-dialog
+      v-model="alertError"
+      width="350"
+    >
+
+      <v-card>
+        <v-card-title
+          class="headline error lighten-2"
+          primary-title
+        >
+            Error
+        </v-card-title>
+
+        <v-card-text>
+          {{errMessage}}
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            flat
+            @click="alertError = false"
+          >
+            Tutup
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <div v-cloak id="app">
+        <v-app id="smartApp">
+            <one-navbar></one-navbar>
+          
+                <v-container style="background: #F5E8DF!important" fluid fill-height class="pl-1 pr-1 pt-2 pb-2 mt-4">
+                    <v-layout row wrap>
+                        <v-flex xs12 class="left" fill-height pa-1>
+                            <request-listing></request-listing>
+                        </v-flex>
+                    </v-layout>
+                </v-container>
+           
+            <one-footer></one-footer>
+        </v-app>
+    </div>
+
+    <!-- Vendor -->
+    <script src="../../../libs/vendor/moment.min.js"></script>
+    <script src="../../../libs/vendor/numeral.min.js"></script>
+    <script src="../../../libs/vendor/moment-locale-id.js"></script>
+    <script src="../../../libs/vendor/lodash.js"></script>
+    <script src="../../../libs/vendor/axios.min.js"></script>
+    <script src="../../../libs/vendor/vue.js"></script>
+    <script src="../../../libs/vendor/vuex.js"></script>
+    <script src="../../../libs/vendor/vuetify.js"></script>
+    <script src="../../../libs/vendor/httpVueLoader.js"></script>
+    <script src="../../../libs/one_global.js"></script>
+
+    <!-- App Script -->
+    <script type="module">
+        import {
+            store
+        } from './store.js';
+        window.store = store;
+        
+        
+        
+        new Vue({
+            store,
+            el: "#app",
+            methods: {},
+            components: {
+                'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+                'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                'request-listing': httpVueLoader('./components/requestListing.vue')
+            },
+            computed: {
+                
+                alertError: {
+                    get() {
+                        return this.$store.state.requester.alertError;
+                    },
+                    set(val) {
+                        this.$store.commit("requester/updateAlertError", val);
+                    }   
+                },
+                errMessage: {
+                    get() {
+                        return this.$store.state.requester.errMessage;
+                    },
+                    set(val) {
+                        this.$store.commit("requester/updateErrMessage", val);
+                    }
+                }
+            }
+        })
+
+       
+    </script>
+    <style>
+        [v-cloak] {
+            display: none
+        }
+    </style>
+</body>
+
+</html>

test/vuex/acc-one-purchase-request-nonpersediaan/store.js

@@ -0,0 +1,11 @@
+import requester from "./modules/requester.js";
+import system from "../../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+  modules: {
+    requester: requester,
+    system: system,
+  },
+  state: {},
+  mutations: {},
+  actions: {},
+});

test/vuex/acc-one-receive-item-po-inventaris/api/api.js

@@ -0,0 +1,343 @@
+const URL = "/one-api/mockup/receive-item-po/ReceiveItemPoInventaris";
+
+export async function search(params) {
+    try {
+        var resp = await axios.post(URL + '/searchRO', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getSupplier(params) {
+    try {
+        var resp = await axios.post(URL + '/getSupplier', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getRuangan(params) {
+    try {
+        var resp = await axios.post(URL + '/getRuangan', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getPurchaseOrder(params) {
+    try {
+        var resp = await axios.post(URL + '/getPurchaseOrder', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getWarehouse(params) {
+    try {
+        var resp = await axios.post(URL + '/getWarehouse', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getItem(params) {
+    try {
+        var resp = await axios.post(URL + '/getItem', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getItemUpdate(params) {
+    try {
+        var resp = await axios.post(URL + '/getItemUpdate', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function saveRO(params) {
+    try {
+        var resp = await axios.post(URL + '/saveRO', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function confirmRO(params) {
+    try {
+        var resp = await axios.post(URL + '/confirmRO', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function deleteRO(params) {
+    try {
+        var resp = await axios.post(URL + '/deleteRO', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function saveInspeksi(params) {
+    try {
+        var resp = await axios.post(URL + '/saveInspeksi', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getItemDataInspeksi(params) {
+    try {
+        var resp = await axios.post(URL + '/getItemDataInspeksi', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getListStaff(params) {
+    try {
+        var resp = await axios.post(URL + "/getListStaff", params)
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            }
+        }
+        let data = resp.data
+        return data
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function saveEditRO(params) {
+    try {
+        var resp = await axios.post(URL + '/saveEditRO', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function saveHandover(params) {
+    try {
+        var resp = await axios.post(URL + '/saveHandover', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function saveFiles(params) {
+    try {
+        var resp = await axios.post(URL + '/saveFiles', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function getBarcodes(params) {
+    try {
+        var resp = await axios.post(URL + '/getBarcodes', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function template(params) {
+    try {
+        var resp = await axios.post(URL + '/', params);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}

test/vuex/acc-one-receive-item-po-inventaris/components/dialogBatchItem.vue

@@ -0,0 +1,162 @@
+<template>
+    <v-dialog v-model="dialog_batch_item" persistent width="30vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                EDIT QTY {{ selected_item_forbatch.M_ItemCode }}
+                {{ selected_item_forbatch.M_ItemDesc }}
+            </v-card-title>
+
+            <v-card-text>
+                <p class="font-weight-bold">
+                    Jumlah item yang dapat diterima : {{ selected_item_forbatch.qty }}
+                    {{ selected_item_forbatch.ItemUnitName }}
+                </p>
+                <div v-for="(item, index) in item_batch_temp" class="mt-2" :key="index">
+                    <v-layout row wrap>
+                        <v-flex xs2 class="pr-1">
+                            <v-text-field v-model.number="item.qty" type="number" min="0" hide-details label="qty"
+                                outline step="1"></v-text-field>
+                        </v-flex>
+                    </v-layout>
+                </div>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red" flat @click="tutupDialog()">Tutup</v-btn>
+                <v-btn color="green" flat @click="simpanBatch()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        dialog_batch_item: {
+            get() {
+                return this.$store.state.form.dialog_batch_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_dialog_batch_item", val);
+            }
+        },
+        selected_item_forbatch: {
+            get() {
+                return this.$store.state.form.selected_item_forbatch;
+            },
+            set(val) {
+                this.$store.commit("form/update_selected_item_forbatch", val);
+            }
+        },
+        item_batch_temp: {
+            get() {
+                return this.$store.state.form.item_batch_temp;
+            },
+            set(val) {
+                this.$store.commit("form/update_item_batch_temp", val);
+            }
+        },
+        form_receive_item: {
+            get() {
+                return this.$store.state.form.form_receive_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive_item", val);
+            }
+        }
+    },
+    methods: {
+        tutupDialog() {
+            this.selected_item_forbatch = {};
+            this.item_batch_temp = [];
+            this.dialog_batch_item = false;
+        },
+        simpanBatch() {
+            const temp = this.item_batch_temp;
+            let curr_item = JSON.parse(JSON.stringify(this.selected_item_forbatch));
+            let final_arr = [];
+
+            const maxQty = Number(curr_item.qty);
+            let total = 0;
+            let isError = false;
+
+            temp.forEach(item => {
+                if (curr_item.M_ItemItem_CategoryID == '1') {
+                    if (item.batchno != '' && item.qty > 0) {
+                        total = Number(item.qty) + total;
+                        final_arr.push(item);
+                    } else {
+                        isError = true;
+                    }
+                } else {
+                    if (Number(item.qty) > 0) {
+                        total = Number(item.qty) + total;
+                        final_arr.push(item);
+                    }
+                }
+            });
+
+            if (total > maxQty || total <= 0 || isError) {
+                this.$store.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: 'Jumlah total melebihi jumlah yang dapat diterima',
+                    isOpen: true
+                });
+                return;
+            }
+
+            let item_received = JSON.parse(JSON.stringify(this.form_receive_item));
+            item_received.forEach(obj => {
+                if (obj.keyID === curr_item.keyID) {
+                    obj.batchlist = final_arr;
+                    obj.receivedQty = total;
+                }
+            });
+            this.form_receive_item = item_received;
+
+            this.selected_item_forbatch = {};
+            this.item_batch_temp = [];
+            this.dialog_batch_item = false;
+        },
+        addInputRow() {
+            const input = {
+                qty: 0,
+                batchno: '',
+                item_category: 0,
+                menuDate: false
+            };
+            this.item_batch_temp.push(input);
+        },
+        reAddInputRow(data) {
+            if (!data.batchlist) {
+                return;
+            }
+
+            data.batchlist.forEach(element => {
+                let inputrow = {
+                    qty: element.qty,
+                    batchno: element.batchno,
+                    menuDate: false
+                };
+                this.item_batch_temp.push(inputrow);
+            });
+        },
+        removeInputRow(index) {
+            this.item_batch_temp.splice(index, 1)
+        }
+    },
+    watch: {
+        selected_item_forbatch(val, old) {
+            if (val == old) return;
+            if (!val) return;
+            this.reAddInputRow(val)
+        }
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/dialogHandOver.vue

@@ -0,0 +1,98 @@
+<template>
+    <v-dialog v-model="dialog_handover" persistent width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                SERAH TERIMA BARANG INVENTARIS
+            </v-card-title>
+
+            <v-card-text>
+                <p>Apakah Anda yakin ingin melakukan serah terima barang inventaris kepada user pemohon di ruangan <b>{{ selected_ro.M_RuanganName }}</b>?</p>
+
+                <v-form ref="formhandover" lazy-validation v-model="valid_formhandover">
+                    <v-layout row mt-2>
+                        <v-flex xs6 pr-1>
+                            <v-autocomplete
+                                label="Staff Penerima*" outline
+                                :rules="rules_staff" return-object
+                                v-model="selected_staff" :items="list_staff"
+                                item-text="M_UserUsername" item-value="M_UserID"
+                            ></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 {
+            valid_formhandover: true,
+            rules_staff: [v => (v && Object.keys(v).length > 0) || 'Staff harus diisi'], 
+        }
+    },
+    computed: {
+        dialog_handover: {
+            get() {
+                return this.$store.state.ro.dialog_handover
+            },
+            set(val) {
+                this.$store.commit("ro/update_dialog_handover", val)
+            }
+        },
+        selected_staff: {
+            get() {
+                return this.$store.state.ro.selected_staff
+            },
+            set(val) {
+                this.$store.commit("ro/update_selected_staff", val)
+            }
+        },
+        selected_item_received: {
+            get() {
+                return this.$store.state.form.selected_item_received
+            },
+            set(val) {
+                this.$store.commit("form/update_selected_item_received", val)
+            }
+        },
+        selected_ro: {
+            get() {
+                return this.$store.state.ro.selected_ro
+            },
+            set(val) {
+                this.$store.commit("ro/update_selected_ro", val);
+            }
+        },
+        list_staff() {
+            return this.$store.state.ro.list_staff
+        }
+    },
+    methods: {
+        closeHandOver() {
+            this.$store.commit("ro/update_selected_staff", {});
+            this.dialog_handover = false
+            this.$refs.formhandover.resetValidation();
+        },
+        async simpanHandOver() {
+            if (this.$refs.formhandover.validate()) {
+                let prm = {
+                    staffID: this.selected_staff.M_UserID,
+                    receiveOrderPoID: this.selected_ro.ReceiveOrderPoID,
+                    ruanganID: this.selected_ro.M_RuanganID
+                }
+                await this.$store.dispatch("ro/saveHandover", prm);
+                this.$refs.formhandover.resetValidation();
+            }
+        },
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/dialogPrintBarcode.vue

@@ -0,0 +1,177 @@
+<template>
+    <v-dialog v-model="dialog_barcode" persistent max-width="600">
+      <v-card>
+        <v-card-title style="color: #fff" class="headline grey darken-1">Cetak Barcode</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"
+                :indeterminate="indeterminatex"  @change="changeCbxAll(bar_chx_all)" v-model="bar_chx_all">
+              </v-checkbox>
+            </v-flex>
+            <v-flex xs5> ITEM </v-flex>
+            <v-flex xs5> NUMBER BARCODE </v-flex>
+            <v-flex xs1> CETAK </v-flex>
+          </v-layout>
+          <v-layout align-center pa-2 v-for="(vs, idx) in barcodes" :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 xs5>
+              {{ vs.M_ItemDesc }}
+            </v-flex>
+            <v-flex xs5>
+              {{ 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="grey darken-1" flat @click="dialog_barcode = false">Tutup</v-btn>
+          <!-- <v-btn dark color="grey darken-3" @click="printRobo"
+            >Cetak Robo
+          </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 {
+            valid_formhandover: true
+        }
+    },
+    computed: {
+        dialog_barcode: {
+            get() {
+                return this.$store.state.ro.dialog_barcode
+            },
+            set(val) {
+                this.$store.commit("ro/update_dialog_barcode", val)
+            }
+        },
+        barcodes: {
+            get() {
+                return this.$store.state.ro.barcodes
+            },
+            set(val) {
+                this.$store.commit("ro/update_barcodes", val)
+            }
+        },
+        selected_item_received: {
+            get() {
+                return this.$store.state.form.selected_item_received
+            },
+            set(val) {
+                this.$store.commit("form/update_selected_item_received", val)
+            }
+        },
+        selected_ro: {
+            get() {
+                return this.$store.state.ro.selected_ro
+            },
+            set(val) {
+                this.$store.commit("ro/update_selected_ro", val);
+            }
+        },
+        list_staff() {
+            return this.$store.state.ro.list_staff
+        },
+        urlQrCode: {
+            get() {
+                return this.$store.state.ro.urlQrCode;
+            },
+            set(val) {
+                this.$store.commit("ro/update_urlQrCode", val);
+            },
+        },
+        indeterminatex: {
+            get() {
+                return this.$store.state.ro.indeterminatex;
+            },
+            set(val) {
+                this.$store.commit("ro/update_indeterminatex", val);
+            },
+        },
+        bar_chx_all: {
+            get() {
+                return this.$store.state.ro.bar_chx_all;
+            },
+            set(val) {
+                this.$store.commit("ro/update_bar_chx_all", val);
+            },
+        },
+        selected_barcode: {
+            get() {
+                return this.$store.state.ro.selected_barcode;
+            },
+            set(val) {
+                this.$store.commit("ro/update_selected_barcode", val);
+            },
+        },
+    },
+    methods: {
+        changeCbxAll(value) {
+            var arr = this.barcodes;
+            this.indeterminatex = false;
+            arr.forEach((el) => {
+                el.chex = value;
+            });
+            var selected = _.filter(arr, function (o) {
+                return o.chex;
+            });
+            this.selected_barcode = selected;
+        },
+        checkTop() {
+            var barcodes = this.barcodes;
+            var 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;
+            console.log(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);
+            });
+        },
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/dialogRoLayout.vue

@@ -0,0 +1,96 @@
+<template>
+<div>
+    <!-- dialog konfirmasi -->
+    <v-dialog v-model="dialog_confirmation" persistent width="500">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                KONFIRMASI 
+                <p class="mb-0 p-0">{{ selected_ro.ReceiveOrderPoNumber }}</p>
+            </v-card-title>
+            <v-card-text>
+                <p>
+                Setelah dikonfirmasi RO
+                <span class="font-weight-bold">{{ selected_ro.ReceiveOrderPoNumber }}</span>
+                tidak bisa di edit dan auto buat jurnal, apakah anda yakin ?
+                </p>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red" flat  @click="dialog_confirmation = false">
+                    TIDAK
+                </v-btn>
+                <v-btn color="green" flat  @click="konfirmRO()">
+                    YA
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+    <!-- dialog delete -->
+    <v-dialog v-model="dialog_delete" persistent width="500">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                KONFIRMASI HAPUS 
+                <p class="mb-0 p-0">{{ selected_ro.ReceiveOrderPoNumber }}</p>
+            </v-card-title>
+            <v-card-text>
+                <p>
+                  Apakah anda yakin menghapus data berikut
+                  <span class="font-weight-bold">{{ selected_ro.ReceiveOrderPoNumber }}</span>
+                  ?
+                </p>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red" flat outline @click="dialog_delete = false">
+                    TIDAK
+                </v-btn>
+                <v-btn color="green" flat outline @click="deleteRO()">
+                    YA
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</div>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            
+        }
+    },
+    computed: {
+        dialog_confirmation: {
+            get() {
+                return this.$store.state.ro.dialog_confirmation;
+            },
+            set(val) {
+                this.$store.commit("ro/update_dialog_confirmation", val);
+            }
+        },
+        dialog_delete: {
+            get() {
+                return this.$store.state.ro.dialog_delete;
+            },
+            set(val) {
+                this.$store.commit("ro/update_dialog_delete", val);
+            }
+        },
+        selected_ro() {
+            return this.$store.state.ro.selected_ro;
+        }
+    },
+    methods: {
+        konfirmRO() {
+            this.$store.dispatch("form/confirmRO");
+        },
+        deleteRO() {
+            this.$store.dispatch("ro/deleteRO");
+        }
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/dialogSelectItem.vue

@@ -0,0 +1,309 @@
+<template>
+    <v-dialog v-model="dialog_select_item" persistent width="60vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                TAMBAH ITEM
+            </v-card-title>
+
+            <v-card-text>
+                <v-autocomplete v-model="selected_po" :items="list_po" hide-details return-object flat label="Cari PO"
+                    outline class="mb-3" item-text="PurchaseOrderNumber" @input="searchItem()"></v-autocomplete>
+
+                <!-- list item per po -->
+                <v-data-table v-model="select_item_temp" :headers="headers" :items="display_list_itempo" hide-actions
+                    select-all item-key="PoItemReceiveID" class="elevation-1">
+                    <template v-slot:headers="props">
+                        <tr>
+                            <th width="10%" class="blue lighten-3 white--text">
+                                <v-checkbox :input-value="props.all" :indeterminate="props.indeterminate" primary
+                                    hide-details @click.stop="toggleAll(props)"></v-checkbox>
+                            </th>
+                            <th v-for="header in props.headers" :key="header.text" :width="header.width"
+                                :class="header.class">
+                                {{ header.text }}
+                            </th>
+                        </tr>
+                    </template>
+                    <template v-slot:items="props">
+                        <tr :active="props.selected" @click="selectItemRow(props)">
+                            <td>
+                                <v-checkbox v-if="hideCheckbox(props)" :input-value="props.selected" primary
+                                    hide-details></v-checkbox>
+                            </td>
+                            <td class="text-xs-center">{{ props.item.M_ItemCode }}</td>
+                            <td class="text-xs-center">
+                                <p class="p-0 mb-0">{{ props.item.M_ItemDesc }}</p>
+                                <p class="p-0 m-0">{{ props.item.WarehouseName }}</p>
+                            </td>
+                            <td class="text-xs-center">
+                                {{ props.item.originalQty }} / {{ props.item.qtyRest }}
+                                {{ props.item.ItemUnitName }}
+                            </td>
+                            <td class="text-xs-center">{{ props.item.qty }}</td>
+                        </tr>
+                    </template>
+                </v-data-table>
+                <div class="text-xs-center mt-2">
+                    <v-pagination v-model="itempo_page" :length="total_selected_page" :total-visible="5"></v-pagination>
+                </div>
+
+                <!-- list item selected -->
+                <v-divider class="my-3"></v-divider>
+                <h3>ITEM DIPILIH</h3>
+                <v-data-table :headers="headers_selected" :items="display_selected_item" hide-actions
+                    item-key="PoItemReceiveID" class="elevation-1 mt-3">
+                    <template v-slot:items="props">
+                        <tr>
+                            <td class="text-xs-center">{{ (props.index + 1) }}</td>
+                            <td class="text-xs-left">{{ props.item.PurchaseOrderNumber }}</td>
+                            <td class="text-xs-left">
+                                <p class="p-0 mb-0">{{ props.item.M_ItemCode }}</p>
+                                <p class="p-0 mb-0">{{ props.item.M_ItemDesc }}</p>
+                                <p class="p-0 mb-0">{{ props.item.WarehouseName }}</p>
+                            </td>
+                            <td class="text-xs-center">
+                                {{ props.item.originalQty }} / {{ props.item.qtyRest }}
+                                {{ props.item.ItemUnitName }}
+                            </td>
+                            <td class="text-xs-center">
+                                <v-text-field v-model="props.item.qty" class="my-2" hide-details outline type="number"
+                                    min="0" :max="parseInt(props.item.qtyRest)" step="1"></v-text-field>
+                            </td>
+                            <td class="text-xs-center">
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn style="min-width: 30px; height: 30px; margin: 0;" outline small
+                                            @click="removeItem(props)" color="red lighten-2">
+                                            <v-icon small color="red" v-on="on">delete</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Hapus</span>
+                                </v-tooltip>
+                            </td>
+                        </tr>
+                    </template>
+                </v-data-table>
+                <div class="text-xs-center mt-2">
+                    <v-pagination v-model="curr_sel_page" :length="total_selected_page"
+                        :total-visible="5"></v-pagination>
+                </div>
+            </v-card-text>
+
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red" flat @click="tutupDialog()">Tutup</v-btn>
+                <v-btn color="green" flat @click="simpanItem()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            headers: [
+                {
+                    text: "ITEM CODE ", align: "left", sortable: false, value: "M_ItemCode",
+                    width: "20%", class: "pa-2 pl-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "NAME", align: "left", sortable: false, value: "M_ItemDesc",
+                    width: "30%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY", align: "left", sortable: false, value: "ItemUnitName",
+                    width: "25%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY RECEIVED", align: "left", sortable: false, value: "qty",
+                    width: "25%", class: "pa-2  blue lighten-3 white--text",
+                },
+            ],
+            itempo_page: 1,
+            itempo_perpage: 5,
+            headers_selected: [
+                {
+                    text: "NO", align: "center", sortable: false, value: "no",
+                    width: "5%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "No. PO", align: "center", sortable: false, value: "po",
+                    width: "25%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false, value: "ITEM",
+                    width: "25%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY PO", align: "center", sortable: false, value: "qty",
+                    width: "10%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY RECEIVED", align: "center", sortable: false, value: "qty_ro",
+                    width: "10%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "", align: "center", sortable: false, value: "qty_ro",
+                    width: "5%", class: "pa-2 blue lighten-3 white--text",
+                },
+            ],
+            curr_sel_page: 1,
+            sel_perpage: 5
+        }
+    },
+    computed: {
+        dialog_select_item: {
+            get() {
+                return this.$store.state.form.dialog_select_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_dialog_select_item", val);
+            }
+        },
+        selected_po: {
+            get() {
+                return this.$store.state.form.selected_po;
+            },
+            set(val) {
+                this.$store.commit("form/update_selected_po", val)
+            }
+        },
+        select_item_temp: {
+            get() {
+                return this.$store.state.form.select_item_temp;
+            },
+            set(val) {
+                this.$store.commit("form/update_select_item_temp", val)
+            }
+        },
+        list_po: {
+            get() {
+                return this.$store.state.form.list_po;
+            },
+            set(val) {
+                this.$store.commit("form/update_list_po", val)
+            }
+        },
+        list_item_po: {
+            get() {
+                return this.$store.state.form.list_item_po;
+            },
+            set(val) {
+                this.$store.commit("form/update_list_item_po", val)
+            }
+        },
+        shipping_info: {
+            get() {
+                return this.$store.state.form.shipping_info;
+            },
+            set(val) {
+                this.$store.commit("form/update_shipping_info", val)
+            }
+        },
+        total_itempo_page() {
+            if (this.list_item_po.length <= 0) {
+                return 1;
+            }
+            return Math.ceil(this.list_item_po.length / this.itempo_perpage);
+        },
+        display_list_itempo() {
+            const start = (this.itempo_page - 1) * this.itempo_perpage;
+            const end = start + this.itempo_perpage;
+            return this.list_item_po.slice(start, end);
+        },
+        total_selected_page() {
+            if (this.select_item_temp.length <= 0) {
+                return 1;
+            }
+            return Math.ceil(this.select_item_temp.length / this.sel_perpage);
+        },
+        display_selected_item() {
+            const start = (this.curr_sel_page - 1) * this.sel_perpage;
+            const end = start + this.sel_perpage;
+            return this.select_item_temp.slice(start, end);
+        }
+    },
+    methods: {
+        tutupDialog() {
+            this.list_po = [];
+            this.selected_po = {};
+            this.list_item_po = [];
+            this.select_item_temp = [];
+            this.dialog_select_item = false;
+        },
+        toggleAll(data) {
+            if (data.all) {
+                // this.select_item_temp = []
+                return
+            } else {
+                this.select_item_temp = this.list_item_po.slice()
+            }
+        },
+        selectItemRow(data) {
+            if (!data.selected) {
+                data.selected = !data.selected;
+            };
+        },
+        hideCheckbox(data) {
+            return !data.selected;
+        },
+        searchItem() {
+            this.$store.dispatch("form/getItem");
+        },
+        removeItem(props) {
+            let temp = JSON.parse(JSON.stringify(this.select_item_temp));
+            this.select_item_temp = temp.filter(ele => ele.PoItemReceiveID !== props.item.PoItemReceiveID);
+        },
+        simpanItem() {
+            let temp = JSON.parse(JSON.stringify(this.select_item_temp));
+            let shippinginfo = [];
+            let isError = false
+            temp.forEach(element => {
+                if (Number(element.qty) > Number(element.qtyRest)) {
+                    isError = true;
+                    return;
+                }
+
+                let ship = {
+                    num_po: element.PurchaseOrderNumber,
+                    cost: element.PurchaseOrderShippingCost,
+                    isUpfront: element.PurchaseOrderShippingCostStatus
+                };
+
+                const isExist = shippinginfo.some(item => item.num_po == element.PurchaseOrderNumber)
+                if (!isExist) {
+                    shippinginfo.push(ship);
+                }
+
+                // only for type inventory
+                let withoutbatch = {
+                    "qty": Number(element.qty),
+                    "batchno": "",
+                    "item_category": "2",
+                    "menuDate": false
+                }
+                element.batchlist.push(withoutbatch)
+            });
+            if (isError) {
+                this.$store.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: 'qty melebihi item yang dikirim',
+                    isOpen: true
+                });
+                return;
+            }
+
+            this.$store.commit("form/update_form_receive_item", temp);
+            this.shipping_info = shippinginfo;
+
+            this.list_po = [];
+            this.selected_po = {};
+            this.list_item_po = [];
+            this.select_item_temp = [];
+            this.dialog_select_item = false;
+        }
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/dialogViewRO.vue

@@ -0,0 +1,232 @@
+<template>
+    <v-dialog v-model="dialog_detail_view" width="80vw" persistent>
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                RECEIVE ITEM INVENTORY
+                <v-spacer></v-spacer>
+            </v-card-title>
+
+            <v-card-text>
+                <v-layout row wrap>
+                    <!-- first row -->
+                    <v-flex xs6>
+                        <v-menu v-model="menuReceiveDateForm" lazy offset-y transition="scale-transition"
+                            max-width="290px" min-width="290px" :nudge-right="40" :close-on-content-click="false">
+                            <template v-slot:activator="{ on }">
+                                <v-text-field :Value="receiveDateForm" label="Tanggal" class="mr-2" hide-details outline
+                                    readonly></v-text-field>
+                            </template>
+                            <v-date-picker no-title hide-details v-model="selected_ro.ReceiveOrderPoIDate"
+                                @input="menuReceiveDateForm = false" readonly></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex xs6>
+                        <v-autocomplete :items="list_supplier" :value="selected_ro.SupplierID" item-text="SupplierName"
+                            item-value="SupplierID" class="mr-2" label="Supplier" outline hide-details
+                            readonly></v-autocomplete>
+                    </v-flex>
+                    <!-- <v-flex xs4>
+                        <v-text-field label="Nomor Delivery Order (DO)" class="" readonly outline
+                            v-model="selected_ro.ReceiveOrderPoDONumber" hide-details></v-text-field>
+                    </v-flex> -->
+
+                    <!-- second row -->
+                    <v-flex xs6>
+                        <v-text-field label="Referensi" class="mr-2" outline readonly hide-details
+                            v-model="selected_ro.ReceiveOrderPoRefNumber" hide-details></v-text-field>
+                    </v-flex>
+                    <v-flex xs6>
+                        <v-autocomplete :items="list_warehouse" :value="selected_ro.WarehouseID"
+                            item-text="WarehouseName" item-value="WarehouseID" label="Gudang" outline hide-details
+                            readonly></v-autocomplete>
+                    </v-flex>
+
+                    <!-- third row -->
+                    <v-flex xs6>
+                        <v-autocomplete :value="selected_ro.M_RuanganID" class="mr-2 mt-3" :items="list_lokasi" outline
+                            item-value="M_RuanganID" item-text="M_RuanganName" label="Lokasi*" hide-details
+                            readonly></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs6>
+                        <v-text-field label="Biaya Ekspedisi" class="mt-3" outline readonly
+                            v-model="selected_ro.ReceiveOrderShippingCostAmount" hide-details></v-text-field>
+                    </v-flex>
+
+                    <!-- four row -->
+                    <v-flex xs12>
+                        <v-textarea v-model="selected_ro.ReceiveOrderPoNote" hide-details outline auto-grow rows="1"
+                            label="Catatan" class="mt-3" readonly></v-textarea>
+                    </v-flex>
+
+                    <!-- shipping info -->
+                    <v-flex xs12 class="mt-3" v-if="shipping_info.length > 0">
+                        <v-layout row wrap>
+                            <v-flex v-for="shp in shipping_info" :key="shp.num_po" xs3>
+                                <v-card class="pa-2 ma-2">
+                                    <div>
+                                        <span class="font-weight-bold">{{ shp.num_po }}</span><br />
+                                        <span>Rp. {{ oneMoney(shp.cost) }}</span><br />
+                                        <span v-if="shp.isUpfront === 'Y'" class="green--text">
+                                            Biaya Ekspedisi sudah di bayar
+                                        </span>
+                                        <span v-else class="red--text">
+                                            Biaya Ekspedisi belum di bayar
+                                        </span>
+                                    </div>
+                                </v-card>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+
+                    <!-- list item received -->
+                    <v-flex xs12 class="my-3">
+                        <v-data-table v-if="form_receive_item.length > 0" :headers="headers" :items="form_receive_item"
+                            hide-actions item-key="keyID" class="elevation-1">
+                            <template v-slot:items="props">
+                                <tr>
+                                    <td class="text-xs-left">{{ props.item.PurchaseOrderNumber }}</td>
+                                    <td class="text-xs-left">
+                                        <p class="p-0 mb-0">{{ props.item.M_ItemCode }}</p>
+                                        <p class="p-0 mb-0">{{ props.item.M_ItemDesc }}</p>
+                                        <p class="p-0 mb-0">{{ props.item.WarehouseName }}</p>
+                                    </td>
+                                    <td class="text-xs-center">{{ props.item.qty }} {{ props.item.ItemUnitName }}</td>
+                                    <td class="text-xs-center">
+                                        <div v-if="props.item.M_ItemItem_CategoryID == 2">
+                                            <p class="mb-0 pb-0" v-for="batch in props.item.batchlist">
+                                                Qty: {{ batch.qty || '' }}
+                                            </p>
+                                        </div>
+                                    </td>
+                                    <td class="text-xs-center"></td>
+                                </tr>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="info" flat outline @click="closeRO()">Tutup</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            menuReceiveDateForm: false,
+            headers: [
+                {
+                    text: "PO NUMBER", align: "center", sortable: false, value: "ItemUnitName",
+                    width: "20%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false, value: "M_ItemDesc",
+                    width: "30%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY", align: "center", sortable: false, value: "qty",
+                    width: "10%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "No. Batch & Exp.Date", align: "center", sortable: false, value: "qty",
+                    width: "25%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false, value: "qty",
+                    width: "15%", class: "pa-2  blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        dialog_detail_view: {
+            get() {
+                return this.$store.state.ro.dialog_detail_view;
+            },
+            set(val) {
+                this.$store.commit("ro/update_dialog_detail_view", val);
+            }
+        },
+        receiveDateForm() {
+            return this.formatDate(this.selected_ro.ReceiveOrderPoIDate)
+        },
+        form_receive: {
+            get() {
+                return this.$store.state.form.form_receive;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive", val)
+            }
+        },
+        form_receive_item: {
+            get() {
+                return this.$store.state.form.form_receive_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive_item", val)
+            }
+        },
+        selected_ro() {
+            return this.$store.state.ro.selected_ro
+        },
+        list_supplier() {
+            return this.$store.state.ro.list_supplier
+        },
+        list_warehouse() {
+            return this.$store.state.ro.list_warehouse
+        },
+        shipping_info() {
+            return this.$store.state.form.shipping_info
+        },
+        list_lokasi() {
+            return this.$store.state.ro.list_lokasi
+        },
+    },
+    methods: {
+        checkObjectEmpty(obj) {
+            if (obj === null || obj === undefined || typeof obj !== "object") {
+                return true;
+            }
+            return Object.keys(obj).length === 0 && obj.constructor === Object;
+        },
+        formatDate(date) {
+            if (!date) return null;
+            const [year, month, day] = date.split("-");
+            return `${day}-${month}-${year}`;
+        },
+        oneMoney(value) {
+            let cleanValue = String(value).replace(/\D/g, '');
+            const num = parseInt(cleanValue, 10);
+            if (isNaN(num)) {
+                return '';
+            }
+            return num.toLocaleString('id-ID');
+        },
+        pilihItemRO() {
+            let temp = this.form_receive_item
+            if (temp.length > 0) {
+                this.$store.commit("form/update_select_item_temp", temp);
+            }
+
+            this.$store.dispatch("form/getPurchaseOrder");
+            this.$store.commit("form/update_dialog_select_item", true);
+        },
+        removeItem(props) {
+            let temp = JSON.parse(JSON.stringify(this.form_receive_item));
+            let newt = temp.filter((item) => item.PoItemReceiveID !== props.item.PoItemReceiveID);
+
+            this.form_receive_item = newt;
+        },
+        closeRO() {
+            this.$store.dispatch("form/resetForm");
+            this.$store.commit("ro/update_selected_ro", {});
+            this.dialog_detail_view = false;
+        },
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/formDialogDocument.vue

@@ -0,0 +1,146 @@
+<template>
+    <v-layout row justify-center>
+        <v-dialog v-model="dialog_document" persistent max-width="60vw">
+            <v-card>
+                <v-card-title class="headline grey lighten-2" primary-title>
+                    FORM SURAT JALAN / DOKUMEN DARI SUPPLIER
+                </v-card-title>
+                <v-card-text class="pt-2 pb-0">
+                    <v-layout v-if="act_dialog_doc == 'upload'" mr-2 ml-2 style="border:1px solid black" align-center row pa-2 mb-2>
+                        <v-flex xs9>
+                            <input type="file" id="files" ref="files" accept="image/*" multiple v-on:change="handleFileUploads()"/>
+                        </v-flex>
+                    </v-layout>
+                    <p v-show="cekFile" class="error pl-2 pr-2" style="color:#fff">Belum diisi</p>
+                    <v-layout v-if="show_progrees_upload" row align-center mr-2 ml-2>
+                        <v-flex xs12>
+
+                        <v-progress-linear :indeterminate="true"></v-progress-linear>
+
+                        </v-flex>
+                    </v-layout>
+                    <v-layout v-if="imagePreviews.length > 0 && !show_progrees_upload" align-center row wrap>
+                        <v-flex
+                            v-for="(img, index) in imagePreviews"
+                            :key="index"
+                            xs6
+                            class="pa-2"
+                        >
+                            <v-img :src="img">
+                            <div class="fill-height bottom-gradient"></div>
+                            </v-img>
+                        </v-flex>
+                    </v-layout>
+                </v-card-text>
+                <v-divider></v-divider>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="error" flat @click="closeDiallog()"> Tutup </v-btn>
+                    <v-btn color="primary" v-if="act_dialog_doc == 'upload'" dark @click="saveForm()">Simpan</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </v-layout>
+</template>
+
+<script>
+module.exports = {
+    name: "formDialogDocument",
+    data() {
+        return {
+
+        };
+    },
+    mounted() {
+
+    },
+    computed: {
+        dialog_document: {
+            get() {
+                return this.$store.state.ro.dialog_document;
+            },
+            set(val) {
+                this.$store.commit("ro/update_dialog_document", val);
+            },
+        },
+        show_progrees_upload: {
+            get() {
+                return this.$store.state.ro.show_progrees_upload
+            },
+            set(val) {
+                this.$store.commit("ro/update_show_progrees_upload", val)
+            }
+        },
+        imageFiles: {
+            get() {
+                return this.$store.state.ro.imageFiles
+            },
+            set(val) {
+                this.$store.commit("ro/update_imageFiles", val)
+            }
+        },
+        imagePreviews: {
+            get() {
+                return this.$store.state.ro.imagePreviews
+            },
+            set(val) {
+                this.$store.commit("ro/update_imagePreviews", val)
+            }
+        },
+        cekFile: {
+            get() {
+                return this.$store.state.ro.cekFile;
+            },
+            set(val) {
+                this.$store.commit("ro/update_cekFile", val);
+            },
+        },
+        act_dialog_doc: {
+            get() {
+                return this.$store.state.ro.act_dialog_doc;
+            },
+            set(val) {
+                this.$store.commit("ro/update_act_dialog_doc", val);
+            },
+        },
+    },
+    methods: {
+        closeDiallog() {
+            this.$store.commit("ro/update_dialog_document", false);
+        },
+        handleFileUploads(){
+            // this.files = this.$refs.files.files
+
+            const files = this.$refs.files.files;
+            this.imagePreviews = [];
+            this.imageFiles = [];
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const url = URL.createObjectURL(file);
+                this.imagePreviews.push(url);
+                this.imageFiles.push(file);
+            }
+        },
+        saveForm() {
+            var formData = new FormData()
+            // console.log("formData",this.imageFiles.length)
+
+            for( var i = 0; i < this.imageFiles.length; i++ ){
+                let file = this.imageFiles[i]
+
+                formData.append('files[' + i + ']', file)
+            }
+
+            var user = one_user()
+            formData.append('receiveOrderPoID',  this.$store.state.ro.selected_ro.ReceiveOrderPoID)
+            formData.append('receiveOrderPoNumber',  this.$store.state.ro.selected_ro.ReceiveOrderPoNumber)
+            formData.append('userId', user.M_UserID)
+
+            this.$store.dispatch('ro/saveFiles', formData)
+        }
+    },
+    watch: {
+
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/formInspection.vue

@@ -0,0 +1,250 @@
+<template>
+    <v-dialog v-model="dialog_form_inspeksi" persistent width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                FORM INSPEKSI ITEM {{ selected_item_received.M_ItemDesc }}
+            </v-card-title>
+
+            <v-card-text>
+                <v-layout row>
+                    <v-flex xs6 pr-1>
+                        <v-text-field label="Jumlah Pesan" type="number" min="0" hide-details
+                            v-model="form_inspeksi.qty_po" outline step="1"></v-text-field>
+                    </v-flex>
+                    <v-flex xs6 pl-1>
+                        <v-text-field label="Jumlah Actual" type="number" min="0" hide-details
+                            v-model="form_inspeksi.qty_ro" outline step="1"></v-text-field>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row mt-2>
+                    <v-flex xs6 pr-1>
+                        <v-text-field label="Harga Pesan" hide-details outline prefix="Rp."
+                            v-model="form_inspeksi.price_po" @focus="handleFocus(form_inspeksi, 'order')"
+                            @blur="handleBlur(form_inspeksi, 'order')"></v-text-field>
+                    </v-flex>
+                    <v-flex xs6 pl-1>
+                        <v-text-field label="Harga Actual" hide-details outline prefix="Rp."
+                            v-model="form_inspeksi.price_ro" @focus="handleFocus(form_inspeksi, 'arrive')"
+                            @blur="handleBlur(form_inspeksi, 'arrive')"></v-text-field>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row mt-2>
+                    <v-flex xs6 pr-1>
+                        <v-menu v-model="menuDatePo" lazy offset-y max-width="290px" full-width
+                            transition="scale-transition" min-width="290px" :nudge-right="40"
+                            :close-on-content-click="false">
+                            <template v-slot:activator="{ on }">
+                                <v-text-field :value="form_inspeksi.date_po" v-on="on" readonly
+                                    label="Tanggal Terima Pesan" outline hide-details></v-text-field>
+                            </template>
+                            <v-date-picker v-model="form_inspeksi.date_po" no-title
+                                @input="menuDatePo = false"></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex xs6 pl-1>
+                        <v-menu v-model="menuDateRo" lazy offset-y max-width="290px" full-width
+                            transition="scale-transition" min-width="290px" :nudge-right="40"
+                            :close-on-content-click="false">
+                            <template v-slot:activator="{ on }">
+                                <v-text-field :value="form_inspeksi.date_ro" v-on="on" readonly
+                                    label="Tanggal Terima Actual" outline hide-details></v-text-field>
+                            </template>
+                            <v-date-picker v-model="form_inspeksi.date_ro" no-title
+                                @input="menuDateRo = false"></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row mt-2 wrap>
+                    <v-flex xs12>
+                        <v-radio-group v-model="form_inspeksi.condt_kemasan" label="Kondisi Kemasan" row hide-details>
+                            <v-radio label="Baik" value="1"></v-radio>
+                            <v-radio label="Tidak Baik" value="2"></v-radio>
+                        </v-radio-group>
+                        <v-text-field v-if="form_inspeksi.condt_kemasan == '2'" class="mt-2" label="Catatan Kemasan"
+                            outline hide-details v-model="form_inspeksi.catatan_kemasan"></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 mt-2>
+                        <v-radio-group v-model="form_inspeksi.condt_pengiriman" label="Kondisi Pengiriman" row
+                            hide-details>
+                            <v-radio label="Sesuai" value="1"></v-radio>
+                            <v-radio label="Tidak Sesuai" value="2"></v-radio>
+                        </v-radio-group>
+                        <v-text-field v-if="form_inspeksi.condt_pengiriman == '2'" class="mt-2" outline
+                            label="Catatan Pengiriman" hide-details
+                            v-model="form_inspeksi.catatan_kirim"></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 mt-2>
+                        <v-radio-group v-model="form_inspeksi.summary" row label="Kesimpulan" hide-details>
+                            <v-radio label="Diterima" value="accept"></v-radio>
+                            <v-radio label="Ditolak" value="reject"></v-radio>
+                            <v-radio label="Diterima dengan Catatan" value="acceptnote"></v-radio>
+                        </v-radio-group>
+                    </v-flex>
+                    <v-flex xs12 mt-2>
+                        <v-textarea v-if="
+                            form_inspeksi.summary == 'reject' ||
+                            form_inspeksi.summary == 'acceptnote'
+                        " v-model="form_inspeksi.catatan" outline auto-grow rows="1" label="Catatan"
+                            hide-details></v-textarea>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row mt-2>
+                    <v-flex xs6 pr-1>
+                        <v-autocomplete label="Staff Penerima" outline hide-details v-model="form_inspeksi.pemeriksa"
+                            :items="list_staff" item-text="M_UserUsername" item-value="M_UserID"></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs6 pl-1>
+                        <v-text-field label="Petugas Pengirim" outline hide-details
+                            v-model="form_inspeksi.pengirim"></v-text-field>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red" flat outline @click="closeInspeksi()">Tutup</v-btn>
+                <v-btn color="green" flat outline @click="simpanInspeksi()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            menuDatePo: false,
+            menuDateRo: false,
+            menuExpired: false
+        };
+    },
+    computed: {
+        dialog_form_inspeksi: {
+            get() {
+                return this.$store.state.form.dialog_form_inspeksi;
+            },
+            set(val) {
+                this.$store.commit("form/update_dialog_form_inspeksi", val);
+            }
+        },
+        form_inspeksi: {
+            get() {
+                return this.$store.state.form.form_inspeksi;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_inspeksi", val);
+            }
+        },
+        selected_item_received: {
+            get() {
+                return this.$store.state.form.selected_item_received;
+            },
+            set(val) {
+                this.$store.commit("form/update_selected_item_received", val);
+            }
+        },
+        form_receive_item: {
+            get() {
+                return this.$store.state.form.form_receive_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive_item", val);
+            }
+        },
+        list_staff() {
+            return this.$store.state.ro.list_staff;
+        }
+    },
+    methods: {
+        formatCurrency(value) {
+            const num = parseFloat(value);
+            if (isNaN(num)) return 0;
+            return num
+                .toFixed(2)
+                .replace(".", ",")
+                .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        },
+        parseCurrency(value) {
+            let cleanValue = 0;
+            if (!isNaN(value)) {
+                cleanValue = value
+            } else {
+                cleanValue = String(value).replace(/\./g, '');
+                cleanValue = cleanValue.replace(',', '.');
+            }
+            return parseFloat(cleanValue) || 0;
+        },
+        handleFocus(item, name) {
+            if (name == 'order') {
+                const current = item.price_po;
+                const parsed = this.parseCurrency(current);
+                item.price_po = parsed
+            }
+
+            if (name == 'arrive') {
+                const current = item.price_ro;
+                const parsed = this.parseCurrency(current);
+                item.price_ro = parsed;
+            }
+        },
+        handleBlur(item, name) {
+            if (name == 'order') {
+                const current = item.price_po;
+                const parsed = this.parseCurrency(current);
+                item.price_po = this.formatCurrency(parsed);
+            }
+
+            if (name == 'arrive') {
+                const current = item.price_ro;
+                const parsed = this.parseCurrency(current);
+                item.price_ro = this.formatCurrency(parsed);
+            }
+        },
+        async closeInspeksi() {
+            let a = {
+                qty_po: 0,
+                qty_ro: 0,
+                price_po: 0.0,
+                price_ro: 0.0,
+                date_po: moment(new Date()).format("YYYY-MM-DD"),
+                date_ro: moment(new Date()).format("YYYY-MM-DD"),
+                condt_kemasan: "",
+                catatan_kemasan: "",
+                condt_pengiriman: "",
+                catatan_kirim: "",
+                summary: "",
+                catatan: "",
+                pemeriksa: "",
+                pengirim: ""
+            };
+
+            this.form_inspeksi = a;
+            this.selected_item_received = {};
+            this.dialog_form_inspeksi = false;
+        },
+        async simpanInspeksi() {
+            let data_inspeksi = JSON.parse(JSON.stringify(this.form_inspeksi));
+            let data_received = JSON.parse(JSON.stringify(this.selected_item_received));
+            let list_item_received = JSON.parse(JSON.stringify(this.form_receive_item));
+
+            data_inspeksi.price_po = this.parseCurrency(data_inspeksi.price_po);
+            data_inspeksi.price_ro = this.parseCurrency(data_inspeksi.price_ro);
+
+            data_received.inspeksi_item = data_inspeksi;
+            const idxToUpdate = list_item_received.findIndex(
+                (obj) => obj.keyID == data_received.keyID
+            );
+            if (idxToUpdate != -1) {
+                list_item_received[idxToUpdate].inspeksi_item = data_inspeksi;
+            }
+
+            this.form_receive_item = list_item_received;
+            this.closeInspeksi();
+        }
+    }
+};
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/formReceiveItem.vue

@@ -0,0 +1,417 @@
+<template>
+    <v-dialog v-model="dialog_form_receive_item" width="80vw" persistent>
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                RECEIVE ITEM INVENTARIS
+                <v-spacer></v-spacer>
+            </v-card-title>
+
+            <v-card-text>
+                <v-form ref="formro" lazy-validation v-model="valid_formro">
+                    <v-layout row>
+                        <v-flex xs6 pr-1>
+                            <v-menu v-model="menuReceiveDateForm" lazy offset-y max-width="290px" full-width
+                                transition="scale-transition" min-width="290px" :nudge-right="40"
+                                :close-on-content-click="false">
+                                <template v-slot:activator="{ on }">
+                                    <v-text-field :value="receiveDateForm" label="Tanggal" outline hide-details
+                                        v-on="on" readonly></v-text-field>
+                                </template>
+                                <v-date-picker v-model="form_receive.receive_date" no-title
+                                    @input="menuReceiveDateForm = false"></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                        <v-flex xs6 pl-1>
+                            <v-autocomplete v-model="form_receive.supplier" :rules="rules_supplier"
+                                :items="list_supplier" return-object outline item-value="SupplierID"
+                                item-text="SupplierName" label="Supplier*" required></v-autocomplete>
+                        </v-flex>
+                        <!-- <v-flex xs4 pl-1>
+                            <v-text-field label="Nomor Delivery Order (DO)*" outline required
+                                v-model="form_receive.number_do" :rules="rules_do"></v-text-field>
+                        </v-flex> -->
+                    </v-layout>
+
+                    <v-layout row>
+                        <v-flex xs6 pr-1>
+                            <v-text-field label="Referensi (No Pengiriman/No Supplier)*" :rules="rules_ref"
+                                v-model="form_receive.referensi" outline required
+                                placeholder="salah satu nomor pengiriman / supplier"></v-text-field>
+                        </v-flex>
+                        <v-flex xs6 pl-1>
+                            <v-autocomplete v-model="form_receive.warehouse" :rules="rules_warehouse"
+                                :items="list_warehouse" outline required item-text="WarehouseName" label="Gudang*"
+                                return-object></v-autocomplete>
+                        </v-flex>
+                    </v-layout>
+
+                    <v-layout>
+                        <v-flex xs6 pr-1>
+                            <v-autocomplete v-model="form_receive.lokasi" :rules="rules_lokasi" :items="list_lokasi"
+                                return-object outline item-value="M_RuanganID" item-text="M_RuanganName"
+                                label="Lokasi/Ruangan*" required></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs6 pl-1>
+                            <v-text-field label="Biaya Ekspedisi" outline prefix="Rp. "
+                                v-model="form_receive.shipping_cost" hide-details></v-text-field>
+                        </v-flex>
+                    </v-layout>
+
+                    <v-layout row wrap>
+                        <v-flex xs12>
+                            <v-textarea v-model="form_receive.note" hide-details auto-grow rows="1" label="Catatan"
+                                outline></v-textarea>
+                        </v-flex>
+                        <v-flex xs3 pt-2>
+                            <v-btn block color="info" class="mt-2" @click="pilihItemRO()"
+                                :disabled="checkObjectEmpty(form_receive.supplier) || checkObjectEmpty(form_receive.warehouse)">
+                                TAMBAH ITEM
+                            </v-btn>
+                        </v-flex>
+                    </v-layout>
+
+                    <v-layout row mt-2 wrap>
+                        <v-flex v-for="shp in shipping_info" :key="shp.num_po" xs3>
+                            <v-card class="pa-2">
+                                <div>
+                                    <span class="font-weight-bold">{{ shp.num_po }}</span><br />
+                                    <span>Rp. {{ oneMoney(shp.cost) }}</span><br />
+                                    <span v-if="shp.isUpfront === 'Y'" class="green--text">
+                                        Biaya Ekspedisi sudah dibayar
+                                    </span>
+                                    <span v-else class="red--text">
+                                        Biaya Ekspedisi belum dibayar
+                                    </span>
+                                </div>
+                            </v-card>
+                        </v-flex>
+                    </v-layout>
+
+                    <v-layout row mt-4 wrap>
+                        <v-flex xs12>
+                            <v-data-table v-if="form_receive_item.length > 0" :headers="headers"
+                                :items="form_receive_item" hide-actions item-key="keyID" class="elevation-1">
+                                <template v-slot:items="props">
+                                    <tr>
+                                        <td class="text-xs-left">{{ props.item.PurchaseOrderNumber }}</td>
+                                        <td class="text-xs-left">
+                                            <p class="p-0 mb-0">{{ props.item.M_ItemCode }}</p>
+                                            <p class="p-0 mb-0">{{ props.item.M_ItemDesc }}</p>
+                                            <!-- <p class="p-0 mb-0">{{ props.item.WarehouseName }}</p> -->
+                                        </td>
+                                        <td class="text-xs-center">{{ props.item.qty }} {{ props.item.ItemUnitName }}
+                                        </td>
+                                        <td class="text-xs-center">
+                                            <div v-if="props.item.M_ItemItem_CategoryID == 2">
+                                                <p class="mb-0 pb-0" v-for="batch in props.item.batchlist">
+                                                    Qty: {{ batch.qty || '' }}
+                                                </p>
+                                            </div>
+                                        </td>
+                                        <td class="text-xs-center">
+                                            <div v-if="props.item.inspeksi_item">
+                                                <p v-if="props.item.inspeksi_item.summary == 'accept'">
+                                                    Diterima
+                                                </p>
+                                                <p v-else-if="props.item.inspeksi_item.summary == 'reject'"
+                                                    class="mb-0 pb-0">
+                                                    Ditolak <br>
+                                                    {{ props.item.inspeksi_item.catatan }}
+                                                </p>
+                                                <p v-else class="mb-0 pb-0">
+                                                    Diterima dengan Catatan <br>
+                                                    {{ props.item.inspeksi_item.catatan }}
+                                                </p>
+                                            </div>
+                                        </td>
+                                        <td class="text-xs-center">
+                                            <v-tooltip bottom>
+                                                <template v-slot:activator="{ on }">
+                                                    <v-btn style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                        small @click="inspekItem(props)" color="green lighten-2">
+                                                        <v-icon small color="green" v-on="on">note_add</v-icon>
+                                                    </v-btn>
+                                                </template>
+                                                <span>Inspek Item</span>
+                                            </v-tooltip>
+                                            <!-- <v-tooltip bottom>
+                                                <template v-slot:activator="{ on }">
+                                                    <v-btn style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                        small @click="editBatch(props)" color="blue lighten-2">
+                                                        <v-icon small color="blue" v-on="on">edit</v-icon>
+                                                    </v-btn>
+                                                </template>
+                                                <span>Edit</span>
+                                            </v-tooltip> -->
+                                            <v-tooltip bottom>
+                                                <template v-slot:activator="{ on }">
+                                                    <v-btn style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                        small @click="removeItem(props)" color="red lighten-2">
+                                                        <v-icon small color="red" v-on="on">delete</v-icon>
+                                                    </v-btn>
+                                                </template>
+                                                <span>Hapus</span>
+                                            </v-tooltip>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </v-data-table>
+                        </v-flex>
+                    </v-layout>
+                </v-form>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red" flat outline @click="batalRO()">Batal</v-btn>
+                <v-btn color="green" flat outline @click="simpanRO()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    components: {},
+    data() {
+        return {
+            menuReceiveDateForm: false,
+            valid_formro: true,
+            rules_ref: [v => !!v || 'Tidak boleh kosong / harus diisi'],
+            rules_supplier: [v => (v && Object.keys(v).length > 0) || 'Supplier harus diisi'],
+            rules_lokasi: [v => (v && Object.keys(v).length > 0) || 'Lokasi harus diisi'],
+            rules_warehouse: [v => (v && Object.keys(v).length > 0) || 'Gudang harus diisi'],
+            headers: [
+                {
+                    text: "PO NUMBER", align: "center", sortable: false, value: "ItemUnitName",
+                    width: "18%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false, value: "M_ItemDesc",
+                    width: "25%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY", align: "center", sortable: false, value: "qty",
+                    width: "10%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY TO STOCK", align: "center", sortable: false, value: "qty",
+                    width: "22%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "INSPEKSI", align: "center", sortable: false, value: "inspeksi",
+                    width: "10%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false, value: "qty",
+                    width: "15%", class: "pa-2  blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        dialog_form_receive_item: {
+            get() {
+                return this.$store.state.form.dialog_form_receive_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_dialog_form_receive_item", val);
+            }
+        },
+        receiveDateForm() {
+            return this.formatDate(this.form_receive.receive_date)
+        },
+        form_receive: {
+            get() {
+                return this.$store.state.form.form_receive;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive", val)
+            }
+        },
+        form_receive_item: {
+            get() {
+                return this.$store.state.form.form_receive_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive_item", val)
+            }
+        },
+        list_supplier() {
+            return this.$store.state.ro.list_supplier
+        },
+        list_warehouse() {
+            return this.$store.state.ro.list_warehouse
+        },
+        shipping_info() {
+            return this.$store.state.form.shipping_info
+        },
+        list_lokasi() {
+            return this.$store.state.ro.list_lokasi
+        },
+    },
+    methods: {
+        checkObjectEmpty(obj) {
+            if (obj === null || obj === undefined || typeof obj !== "object") {
+                return true;
+            }
+            return Object.keys(obj).length === 0 && obj.constructor === Object;
+        },
+        formatDate(date) {
+            if (!date) return null;
+            const [year, month, day] = date.split("-");
+            return `${day}-${month}-${year}`;
+        },
+        oneMoney(value) {
+            if (typeof value !== 'number') {
+                value = parseFloat(value);
+            }
+
+            if (isNaN(value)) return '0,00';
+
+            // Bulatkan dulu ke 2 desimal
+            const fixed = value.toFixed(2); // hasil string, misal "16200000.00" atau "123456.70"
+            const splitValue = fixed.split(".");
+
+            const val = splitValue[0];       // bagian ribuan
+            const decimal = splitValue[1];   // bagian desimal
+
+            const formatted = val.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+
+            return `${formatted},${decimal}`;
+        },
+        pilihItemRO() {
+            let temp = this.form_receive_item
+            if (temp.length > 0) {
+                this.$store.commit("form/update_select_item_temp", temp);
+            }
+
+            this.$store.dispatch("form/getPurchaseOrder");
+            this.$store.commit("form/update_dialog_select_item", true);
+        },
+        editBatch(props) {
+            const curr_item = JSON.parse(JSON.stringify(props.item));
+            if (!curr_item.batchlist || curr_item.batchlist.length <= 0) {
+                let val = [
+                    {
+                        qty: 0,
+                        batchno: '',
+                        item_category: curr_item.M_ItemItem_CategoryID,
+                        menuDate: false
+                    }
+                ];
+                this.$store.commit("form/update_item_batch_temp", val)
+            }
+
+            this.$store.commit("form/update_selected_item_forbatch", curr_item);
+            this.$store.commit("form/update_dialog_batch_item", true);
+        },
+        removeItem(props) {
+            let temp = JSON.parse(JSON.stringify(this.form_receive_item));
+            let newt = temp.filter((item) => item.PoItemReceiveID !== props.item.PoItemReceiveID);
+
+            let shipInfo = [];
+            newt.forEach(element => {
+                let ship = {
+                    num_po: element.PurchaseOrderNumber,
+                    cost: element.PurchaseOrderShippingCost,
+                    isUpfront: element.PurchaseOrderShippingCostStatus
+                }
+
+                const isExist = this.shipping_info.some(
+                    item => item.num_po == element.PurchaseOrderNumber
+                );
+                if (!isExist) {
+                    shipInfo.push(ship);
+                }
+            });
+
+            this.form_receive_item = newt;
+            this.$store.commit("form/update_shipping_info", shipInfo);
+        },
+        inspekItem(props) {
+            const curr_item = JSON.parse(JSON.stringify(props.item));
+            this.$store.commit("form/update_selected_item_received", curr_item);
+
+            let inspeksi = this.$store.state.form.form_inspeksi
+
+            if (curr_item.inspeksi_item) {
+                inspeksi = curr_item.inspeksi_item
+            } else {
+                inspeksi.qty_po = curr_item.originalQty
+                inspeksi.qty_ro = curr_item.qty
+                inspeksi.price_po = curr_item.PoItemReceivePrice
+                inspeksi.price_ro = curr_item.PoItemReceivePrice
+            }
+
+            this.$store.dispatch("ro/getListStaff");
+            this.$store.commit("form/update_form_inspeksi", inspeksi);
+            this.$store.commit("form/update_dialog_form_inspeksi", true);
+        },
+        batalRO() {
+            this.$store.dispatch("form/resetForm");
+            this.$refs.formro.resetValidation()
+            this.error_num_do = false
+            this.error_supplier = false
+            this.error_warehouse = false
+            this.dialog_form_receive_item = false;
+        },
+        simpanRO() {
+            if (this.$refs.formro.validate()) {
+                const form_detail = JSON.parse(JSON.stringify(this.form_receive_item));
+
+                let empty = this.checkRODetail(form_detail);
+                if (empty.length == 0) {
+                    for (const element of form_detail) {
+                        let total = element.batchlist.reduce((sum, item) => sum + Number(item.qty), 0);
+                        if (total != Number(element.qty)) {
+                            this.$store.commit("ro/update_snackbar", {
+                                color: 'warning',
+                                msg: `Jumlah item ${element.M_ItemDesc} tidak sama dengan pengaturan batch`,
+                                isOpen: true
+                            }, { root: true });
+                            return;
+                        }
+
+                        if (!element.inspeksi_item) {
+                            this.$store.commit("ro/update_snackbar", {
+                                color: 'warning',
+                                msg: `Form inspeksi item ${element.M_ItemDesc} belum di-isi`,
+                                isOpen: true
+                            }, { root: true });
+                            return;
+                        }
+                    }
+
+                    this.$store.dispatch("form/saveRO");
+                    this.$refs.formro.resetValidation();
+                } else {
+                    const message = empty.map(item => item.M_ItemDesc).join(', ')
+                    this.$store.commit("ro/update_snackbar", {
+                        color: 'warning',
+                        msg: 'QTY to Stock berikut masih belum terisi ' + message,
+                        isOpen: true
+                    }, { root: true });
+                    return;
+                }
+            }
+        },
+        checkRODetail(data) {
+            const emptyBatch = data.filter(element => {
+                return Array.isArray(element.batchlist) && element.batchlist.length === 0;
+            })
+
+            return emptyBatch
+        }
+    },
+    watch: {
+        dialog_form_receive_item(val) {
+            if (val) {
+                this.$nextTick(() => {
+                    this.$refs.formro?.resetValidation();
+                });
+            }
+        }
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/formReceiveItemEdit.vue

@@ -0,0 +1,400 @@
+<template>
+    <v-dialog v-model="dialog_form_receive_item_edit" width="80vw" persistent>
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                EDIT RECEIVE ITEM INVENTARIS
+            </v-card-title>
+
+            <v-card-text>
+                <v-layout row>
+                    <v-flex xs6 pr-1>
+                        <v-menu v-model="menuReceiveDateForm" lazy offset-y max-width="290px" full-width
+                            transition="scale-transition" min-width="290px" :nudge-right="40"
+                            :close-on-content-click="false">
+                            <template v-slot:activator="{ on }">
+                                <v-text-field :value="receiveDateForm" label="Tanggal" outline hide-details v-on="on"
+                                    readonly></v-text-field>
+                            </template>
+                            <v-date-picker v-model="form_receive.receive_date" no-title
+                                @input="menuReceiveDateForm = false"></v-date-picker>
+                        </v-menu>
+                    </v-flex>
+                    <v-flex xs6 pl-1>
+                        <v-autocomplete v-model="form_receive.supplier" hide-details :items="list_supplier"
+                            return-object outline item-text="SupplierName" label="Supplier"></v-autocomplete>
+                    </v-flex>
+                    <!-- <v-flex xs4 pl-1>
+                    <v-text-field
+                        label="Nomor Delivery Order (DO)" outline
+                        v-model="form_receive.number_do" hide-details
+                    ></v-text-field>
+                </v-flex> -->
+                </v-layout>
+
+                <v-layout row mt-2>
+                    <v-flex xs6 pr-1>
+                        <v-text-field label="Referensi (No Pengiriman/No Supplier)*" v-model="form_receive.referensi"
+                            outline hide-details placeholder="salah satu nomor pengiriman / supplier"></v-text-field>
+                    </v-flex>
+                    <v-flex xs6 pl-1>
+                        <v-autocomplete v-model="form_receive.warehouse" hide-details :items="list_warehouse" outline
+                            return-object item-text="WarehouseName" label="Gudang"></v-autocomplete>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row mt-2>
+                    <v-flex xs6 pr-1>
+                        <v-autocomplete v-model="form_receive.lokasi" :items="list_lokasi" return-object outline
+                            item-value="M_RuanganID" item-text="M_RuanganName" label="Lokasi*" hide-details
+                            required></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs6 pl-1>
+                        <v-text-field label="Biaya Ekspedisi" outline prefix="Rp. " v-model="form_receive.shipping_cost"
+                            hide-details></v-text-field>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row mt-2 wrap>
+                    <v-flex xs12>
+                        <v-textarea v-model="form_receive.note" hide-details auto-grow rows="1" label="Catatan"
+                            outline></v-textarea>
+                    </v-flex>
+                    <v-flex xs3 pt-2>
+                        <v-btn block color="info" class="mt-2" @click="pilihItemRO()"
+                            :disabled="checkObjectEmpty(form_receive.supplier) || checkObjectEmpty(form_receive.warehouse)">TAMBAH
+                            ITEM</v-btn>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row mt-2 wrap>
+                    <v-flex v-for="shp in shipping_info" :key="shp.num_po" xs3>
+                        <v-card class="pa-2">
+                            <div>
+                                <span class="font-weight-bold">{{ shp.num_po }}</span><br />
+                                <span>Rp. {{ oneMoney(shp.cost) }}</span><br />
+                                <span v-if="shp.isUpfront === 'Y'" class="green--text">
+                                    Biaya Ekspedisi sudah dibayar
+                                </span>
+                                <span v-else class="red--text">
+                                    Biaya Ekspedisi belum dibayar
+                                </span>
+                            </div>
+                        </v-card>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row mt-4 wrap>
+                    <v-flex xs12>
+                        <v-data-table v-if="form_receive_item.length > 0" :headers="headers" :items="form_receive_item"
+                            hide-actions item-key="keyID" class="elevation-1">
+                            <template v-slot:items="props">
+                                <tr>
+                                    <td class="text-xs-left">{{ props.item.PurchaseOrderNumber }}</td>
+                                    <td class="text-xs-left">
+                                        <p class="p-0 mb-0">{{ props.item.M_ItemCode }}</p>
+                                        <p class="p-0 mb-0">{{ props.item.M_ItemDesc }}</p>
+                                        <!-- <p class="p-0 mb-0">{{ props.item.WarehouseName }}</p> -->
+                                    </td>
+                                    <td class="text-xs-center">{{ props.item.qty }} {{ props.item.ItemUnitName }}</td>
+                                    <td class="text-xs-center">
+                                        <div v-if="props.item.M_ItemItem_CategoryID == 2">
+                                            <p class="mb-0 pb-0" v-for="batch in props.item.batchlist">
+                                                Qty: {{ batch.qty || '' }}
+                                            </p>
+                                        </div>
+                                    </td>
+                                    <td class="text-xs-center">
+                                        <div v-if="props.item.inspeksi_item">
+                                            <p v-if="props.item.inspeksi_item.summary == 'accept'">
+                                                Diterima
+                                            </p>
+                                            <p v-else-if="props.item.inspeksi_item.summary == 'reject'"
+                                                class="mb-0 pb-0">
+                                                Ditolak <br>
+                                                {{ props.item.inspeksi_item.catatan }}
+                                            </p>
+                                            <p v-else class="mb-0 pb-0">
+                                                Diterima dengan Catatan <br>
+                                                {{ props.item.inspeksi_item.catatan }}
+                                            </p>
+                                        </div>
+                                    </td>
+                                    <td class="text-xs-center">
+                                        <v-tooltip bottom>
+                                            <template v-slot:activator="{ on }">
+                                                <v-btn style="min-width: 30px; height: 30px; margin: 0;" outline small
+                                                    @click="inspekItem(props)" color="green lighten-2">
+                                                    <v-icon small color="green" v-on="on">note_add</v-icon>
+                                                </v-btn>
+                                            </template>
+                                            <span>Inspek Item</span>
+                                        </v-tooltip>
+                                        <!-- <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn
+                                                style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                small @click="editBatch(props)" color="blue lighten-2"
+                                            >
+                                                <v-icon small color="blue" v-on="on">edit</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Edit</span>
+                                    </v-tooltip> -->
+                                        <v-tooltip bottom>
+                                            <template v-slot:activator="{ on }">
+                                                <v-btn style="min-width: 30px; height: 30px; margin: 0;" outline small
+                                                    @click="removeItem(props)" color="red lighten-2">
+                                                    <v-icon small color="red" v-on="on">delete</v-icon>
+                                                </v-btn>
+                                            </template>
+                                            <span>Hapus</span>
+                                        </v-tooltip>
+                                    </td>
+                                </tr>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red" outline flat @click="batalRO()">Batal</v-btn>
+                <v-btn color="green" outline flat @click="simpanEditRO()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    components: {},
+    data() {
+        return {
+            menuReceiveDateForm: false,
+            headers: [
+                {
+                    text: "PO NUMBER", align: "center", sortable: false, value: "ItemUnitName",
+                    width: "18%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false, value: "M_ItemDesc",
+                    width: "25%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY", align: "center", sortable: false, value: "qty",
+                    width: "10%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY TO STOCK", align: "center", sortable: false, value: "qty",
+                    width: "22%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "INSPEKSI", align: "center", sortable: false, value: "inspeksi",
+                    width: "10%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false, value: "qty",
+                    width: "15%", class: "pa-2  blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        dialog_form_receive_item_edit: {
+            get() {
+                return this.$store.state.form.dialog_form_receive_item_edit
+            },
+            set(val) {
+                this.$store.commit("form/update_dialog_form_receive_item_edit", val);
+            }
+        },
+        form_receive: {
+            get() {
+                return this.$store.state.form.form_receive;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive", val)
+            }
+        },
+        form_receive_item: {
+            get() {
+                return this.$store.state.form.form_receive_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive_item", val)
+            }
+        },
+        form_receive_item_del: {
+            get() {
+                return this.$store.state.form.form_receive_item_del
+            },
+            set(val) {
+                this.$store.commit("form/update_form_receive_item_del", val)
+            }
+        },
+        receiveDateForm() {
+            return this.formatDate(this.form_receive.receive_date)
+        },
+        list_supplier() {
+            return this.$store.state.ro.list_supplier
+        },
+        list_warehouse() {
+            return this.$store.state.ro.list_warehouse
+        },
+        shipping_info() {
+            return this.$store.state.form.shipping_info
+        },
+        list_lokasi() {
+            return this.$store.state.ro.list_lokasi
+        },
+    },
+    methods: {
+        checkObjectEmpty(obj) {
+            if (obj === null || obj === undefined || typeof obj !== "object") {
+                return true;
+            }
+            return Object.keys(obj).length === 0 && obj.constructor === Object;
+        },
+        formatDate(date) {
+            if (!date) return null;
+            const [year, month, day] = date.split("-");
+            return `${day}-${month}-${year}`;
+        },
+        oneMoney(value) {
+            if (typeof value !== 'number') {
+                value = parseFloat(value);
+            }
+            if (isNaN(value)) return '0,00';
+
+            const fixed = value.toFixed(2);
+            const splitValue = fixed.split(".");
+
+            const val = splitValue[0];
+            const decimal = splitValue[1];
+
+            const formatted = val.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+            return `${formatted},${decimal}`
+        },
+        batalRO() {
+            this.$store.dispatch("form/resetForm");
+            this.form_receive_item_del = [];
+            this.dialog_form_receive_item_edit = false
+        },
+        simpanEditRO() {
+            const form_detail = JSON.parse(JSON.stringify(this.form_receive_item));
+
+            let empty = this.checkRODetail(form_detail);
+            if (empty.length == 0) {
+                for (const element of form_detail) {
+                    let total = element.batchlist.reduce((sum, item) => sum + Number(item.qty), 0);
+                    if (total != Number(element.qty)) {
+                        this.$store.commit("ro/update_snackbar", {
+                            color: 'warning',
+                            msg: `Jumlah item ${element.M_ItemDesc} tidak sama dengan pengaturan batch`,
+                            isOpen: true
+                        }, { root: true });
+                        return;
+                    }
+
+                    if (!element.inspeksi_item) {
+                        this.$store.commit("ro/update_snackbar", {
+                            color: 'warning',
+                            msg: `Form inspeksi item ${element.M_ItemDesc} belum di-isi`,
+                            isOpen: true
+                        }, { root: true });
+                        return;
+                    }
+                }
+
+                this.$store.dispatch("form/saveEditRO");
+            } else {
+                const message = empty.map(item => item.M_ItemDesc).join(', ')
+                this.$store.commit("ro/update_snackbar", {
+                    color: 'warning',
+                    msg: 'Qty to Stock berikut masih belum terisi ' + message,
+                    isOpen: true
+                }, { root: true });
+                return;
+            }
+            // this.$store.dispatch("form/saveEditRO")
+        },
+        checkRODetail(data) {
+            const emptyBatch = data.filter(element => {
+                return Array.isArray(element.batchlist) && element.batchlist.length === 0;
+            })
+
+            return emptyBatch
+        },
+        pilihItemRO() {
+            let temp = JSON.parse(JSON.stringify(this.form_receive_item));
+            if (temp.length > 0) {
+                this.$store.commit("form/update_select_item_temp", temp);
+            }
+
+            this.$store.dispatch("form/getPurchaseOrder");
+            this.$store.commit("form/update_dialog_select_item", true);
+        },
+        inspekItem(props) {
+            const curr_item = JSON.parse(JSON.stringify(props.item));
+            this.$store.commit("form/update_selected_item_received", curr_item);
+
+            let inspeksi = this.$store.state.form.form_inspeksi
+            if (curr_item.inspeksi_item) {
+                inspeksi = curr_item.inspeksi_item
+            } else {
+                inspeksi.qty_po = curr_item.originalQty
+                inspeksi.qty_ro = curr_item.qty
+                inspeksi.price_po = curr_item.PoItemReceivePrice
+                inspeksi.price_ro = curr_item.PoItemReceivePrice
+            }
+
+            this.$store.dispatch("ro/getListStaff");
+            this.$store.commit("form/update_form_inspeksi", inspeksi);
+            this.$store.commit("form/update_dialog_form_inspeksi", true);
+        },
+        removeItem(props) {
+            let temp = JSON.parse(JSON.stringify(this.form_receive_item));
+            let newt = temp.filter((item) => item.PoItemReceiveID !== props.item.PoItemReceiveID);
+            let del = temp.find((item) => item.PoItemReceiveID === props.item.PoItemReceiveID);
+
+            let shipInfo = [];
+            newt.forEach(element => {
+                let ship = {
+                    num_po: element.PurchaseOrderNumber,
+                    cost: element.PurchaseOrderShippingCost,
+                    isUpfront: element.PurchaseOrderShippingCostStatus
+                };
+
+                const isExist = this.shipping_info.some(
+                    item => item.num_po == element.PurchaseOrderNumber
+                );
+                if (!isExist) {
+                    shipInfo.push(ship)
+                }
+            });
+
+            this.form_receive_item_del.push(del);
+            this.form_receive_item = newt;
+            this.$store.commit("form/update_shipping_info", shipInfo);
+        },
+        editBatch(props) {
+            const curr_item = JSON.parse(JSON.stringify(props.item));
+            if (!curr_item.batchlist || curr_item.batchlist.length <= 0) {
+                let val = [
+                    {
+                        qty: 0,
+                        batchno: '',
+                        expiredate: moment(new Date()).format('YYYY-MM-DD'),
+                        menuDate: false
+                    }
+                ];
+                this.$store.commit("form/update_item_batch_temp", val)
+            }
+
+            this.$store.commit("form/update_selected_item_forbatch", curr_item);
+            this.$store.commit("form/update_dialog_batch_item", true);
+        }
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/components/oneRoLayout.vue

@@ -0,0 +1,423 @@
+<template>
+    <div style="width: 100%;">
+        <v-toolbar dark color="primary">
+            <v-toolbar-title class="white--text">RECEIVE ITEM INVENTARIS</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn flat icon color="white" @click="openDialogReceiveItem()">
+                <v-icon>add_box</v-icon>
+            </v-btn>
+        </v-toolbar>
+
+        <!-- Filter Listing -->
+        <v-card class="pa-2">
+            <v-layout row wrap>
+                <v-flex xs4>
+                    <v-menu
+                        v-model="menuStartDateFilter" lazy offset-y
+                        transition="scale-transition" max-width="290px"
+                        min-width="290px" :nudge-right="40"
+                        :close-on-content-click="false"
+                    >
+                        <template v-slot:activator="{ on }">
+                            <v-text-field
+                                :value="startDateFilter" label="Tanggal Mulai"
+                                hide-details readonly outline v-on="on" class="mr-2"
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker
+                            no-title hide-details v-model="filter.startdate"
+                            @input="menuStartDateFilter = false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs4>
+                    <v-menu
+                        v-model="menuEndDateFilter" lazy offset-y
+                        transition="scale-transition" max-width="290px"
+                        min-width="290px" :nudge-right="40"
+                        :close-on-content-click="false"
+                    >
+                        <template v-slot:activator="{ on }">
+                            <v-text-field
+                                :value="endDateFilter" label="Tanggal Akhir"
+                                hide-details readonly outline v-on="on" class="mr-2"
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker
+                            no-title hide-details v-model="filter.enddate"
+                            @input="menuEndDateFilter = false"
+                        ></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs4>
+                    <v-text-field
+                        label="Cari nomor GR, nomor DO" v-model="filter.search" hide-details outline
+                    ></v-text-field>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+        <!-- Table Listing -->
+        <v-card class="pa-2 mt-2">
+            <div style="overflow-y: scroll;">
+                <v-data-table
+                    :items="list_data_ro.records" :headers="headers" :loading="false"
+                    hide-actions class="elevation-1"
+                >
+                    <template v-slot:items="props">
+                        <tr>
+                            <td class="text-xs-center">{{ props.item.ReceiveOrderPoNumber }}</td>
+                            <td class="text-xs-center"> {{ props.item.ReceiveOrderPoIDate }} </td>
+                            <td class="text-xs-center">{{ props.item.ReceiveOrderPoDONumber }}</td>
+                            <td class="text-xs-center">{{ props.item.SupplierName }}</td>
+                            <td class="text-xs-center">{{ props.item.WarehouseName }}</td>
+                            <td class="text-xs-center">{{ props.item.ReceiveOrderPoNote }}</td>
+                            <td class="text-xs-center">
+                                <div v-if="props.item.ReceiveOrderPoConfirmed === 'Y'">
+                                    <v-chip color="green" text-color="white">
+                                        KONFIRMASI
+                                    </v-chip>
+                                    <kbd>{{ props.item.ReceiveOrderPoConfirmedDate }}</kbd>
+                                </div>
+                                <v-chip v-else color="red" text-color="white">
+                                    BELUM KONFIRMASI
+                                </v-chip>
+                            </td>
+                            <td class="text-xs-center">
+                                <div v-show="props.item.ReceiveOrderPoConfirmed === 'N'">
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn
+                                                style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                small @click="konfirmRO(props.item)" color="green lighten-2"
+                                                class="mt-1"
+                                            >
+                                                <v-icon small color="green" v-on="on">done_all</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>konfirmasi</span>
+                                    </v-tooltip>
+                                    <span v-if="props.item.hasDocuments == true">
+                                        <v-tooltip bottom>
+                                            <template v-slot:activator="{ on }">
+                                                <v-btn
+                                                    style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                    small @click="openViewDoc(props.item)" color="grey lighten-2"
+                                                    class="mt-1"
+                                                >
+                                                    <v-icon small color="grey" v-on="on">description</v-icon>
+                                                </v-btn>
+                                            </template>
+                                            <span>Lihat surat jalan supplier</span>
+                                        </v-tooltip>
+                                    </span>
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn
+                                                style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                small @click="uploadDoct(props.item)" color="orange lighten-2"
+                                                class="mt-1"
+                                            >
+                                                <v-icon small color="orange" v-on="on">attachment</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Upload surat jalan supplier</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn
+                                                style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                small @click="openBarcode(props.item)" color="black lighten-2"
+                                                class="mt-1 mb-1"
+                                            >
+                                                <v-icon small color="black" v-on="on">print</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Barcode</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn
+                                                style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                small @click="editRO(props.item)" color="blue lighten-2"
+                                                class="mt-1 mb-1"
+                                            >
+                                                <v-icon small color="blue" v-on="on">edit</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Edit</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn
+                                                style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                small @click="deleteRO(props.item)" color="red lighten-2"
+                                                class="mt-1 mb-1"
+                                            >
+                                                <v-icon small color="red" v-on="on">delete</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Hapus</span>
+                                    </v-tooltip>
+                                </div>
+                                <div v-show="props.item.ReceiveOrderPoConfirmed === 'Y'">
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn
+                                                style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                small @click="openBarcode(props.item)" color="black lighten-2"
+                                            >
+                                                <v-icon small color="black" v-on="on">print</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Barcode</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on }">
+                                            <v-btn
+                                                style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                small @click="detailView(props.item)" color="blue lighten-2"
+                                            >
+                                                <v-icon small color="blue" v-on="on">visibility</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Lihat detail</span>
+                                    </v-tooltip>
+                                    <span v-show="props.item.ReceiveOrderPoIsHandover === 'N'">
+                                        <v-tooltip bottom>
+                                            <template v-slot:activator="{ on }">
+                                                <v-btn
+                                                    style="min-width: 30px; height: 30px; margin: 0;" outline
+                                                    small @click="handOverRO(props.item)" color="green lighten-2"
+                                                >
+                                                    <v-icon small color="green" v-on="on">send</v-icon>
+                                                </v-btn>
+                                            </template>
+                                            <span>Serah Terima</span>
+                                        </v-tooltip>
+                                    </span>
+                                </div>
+                            </td>
+                        </tr>
+                    </template>
+                </v-data-table>
+            </div>
+            <v-divider></v-divider>
+            <div class="text-xs-center mt-2">
+                <v-pagination v-model="curr_page" :length="list_data_ro.total"></v-pagination>
+            </div>
+        </v-card>
+
+        <!-- dialog -->
+        <one-dialog-form-inspeksi></one-dialog-form-inspeksi>
+        <one-dialog-form-receive></one-dialog-form-receive>
+        <one-dialog-form-receive-edit></one-dialog-form-receive-edit>
+        <one-dialog-item-receive></one-dialog-item-receive>
+        <one-dialog-item-batch></one-dialog-item-batch>
+        <one-dialog-ro-layout></one-dialog-ro-layout>
+        <one-dialog-ro-view></one-dialog-ro-view>
+        <one-dialog-ro-handover></one-dialog-ro-handover>
+        <one-dialog-form-document></one-dialog-form-document>
+        <one-dialog-print-barcode></one-dialog-print-barcode>
+
+        <!-- snackbar -->
+        <v-snackbar
+            :color="snackbar.color" v-model="snackbar.isOpen"
+            :timeout="3000" multi-line top
+        >
+            {{ snackbar.msg }}
+            <v-btn class="ml-2" flat @click="snackbar.isOpen = false">Tutup</v-btn>
+        </v-snackbar>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    components: {
+        'one-dialog-item-receive': httpVueLoader('./dialogSelectItem.vue'),
+        'one-dialog-form-receive': httpVueLoader('./formReceiveItem.vue'),
+        'one-dialog-form-receive-edit': httpVueLoader('./formReceiveItemEdit.vue'),
+        'one-dialog-form-inspeksi': httpVueLoader('./formInspection.vue'),
+        'one-dialog-item-batch': httpVueLoader('./dialogBatchItem.vue'),
+        'one-dialog-ro-layout': httpVueLoader('./dialogRoLayout.vue'),
+        'one-dialog-ro-view': httpVueLoader('./dialogViewRO.vue'),
+        'one-dialog-ro-handover': httpVueLoader('./dialogHandOver.vue'),
+        'one-dialog-form-document': httpVueLoader('./formDialogDocument.vue'),
+        'one-dialog-print-barcode': httpVueLoader('./dialogPrintBarcode.vue'),
+    },
+    mounted() {
+        this.$store.dispatch("ro/search")
+    },
+    data() {
+        return {
+            menuStartDateFilter: false,
+            menuEndDateFilter: false,
+            headers: [
+                {
+                    text: "GR NUMBER", align: "center", sortable: false, value: "grnumber",
+                    width: "10%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "DATE", align: "center", sortable: false, value: "date",
+                    width: "10%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "DO NUMBER", align: "center", sortable: false, value: "do",
+                    width: "10%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "SUPPLIER", align: "center", sortable: false, value: "supplier",
+                    width: "20%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "WAREHOUSE", align: "center", sortable: false, value: "wh",
+                    width: "15%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "CATATAN", align: "center", sortable: false, value: "note",
+                    width: "15%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "STATUS", align: "center", sortable: false, value: "status",
+                    width: "10%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false, value: "act",
+                    width: "10%", class: "pa-2 text-center  blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        filter: {
+            get() {
+                return this.$store.state.ro.filter;
+            },
+            set(val) {
+                this.$store.commit("ro/update_filter", val);
+            }
+        },
+        snackbar: {
+            get() {
+                return this.$store.state.ro.snackbar;
+            },
+            set(val) {
+                this.$store.commit("ro/update_snackbar", val);
+            }
+        },
+        startDateFilter() {
+            return this.formatDate(this.filter.startdate);
+        },
+        endDateFilter() {
+            return this.formatDate(this.filter.enddate);
+        },
+        curr_page: {
+            get() {
+                return this.$store.state.ro.curr_page;
+            },
+            set(val) {
+                this.$store.commit("ro/update_curr_page", val);
+                this.$store.dispatch("ro/search");
+            }
+        },
+        list_data_ro() {
+            return this.$store.state.ro.list_data_ro;
+        },
+        dialog_form_receive_item: {
+            get() {
+                return this.$store.state.form.dialog_form_receive_item;
+            },
+            set(val) {
+                this.$store.commit("form/update_dialog_form_receive_item", val);
+            }
+        }
+    },
+    methods: {
+        formatDate(date) {
+            if (!date) return null;
+            const [year, month, day] = date.split("-");
+            return `${day}-${month}-${year}`;
+        },
+        openDialogReceiveItem() {
+            this.$store.dispatch("ro/getSupplier");
+            this.$store.dispatch("ro/getWarehouse");
+            this.$store.dispatch("ro/getRuangan");
+            this.dialog_form_receive_item = true;
+        },
+        konfirmRO(data) {
+            if (data.hasDocuments) {
+                this.$store.commit("ro/update_selected_ro", data);
+                this.$store.commit("ro/update_dialog_confirmation", true);
+                return;
+            }
+            const message = "Belum upload bukti penerimaan";
+            this.snackbar = { color: 'warning', msg: message, isOpen: true }
+        },
+        deleteRO(data) {
+            this.$store.commit("ro/update_selected_ro", data);
+            this.$store.commit("ro/update_dialog_delete", true);
+        },
+        detailView(data) {
+            this.$store.commit("ro/update_selected_ro", data);
+            this.$store.dispatch("ro/getSupplier");
+            this.$store.dispatch("ro/getWarehouse");
+            this.$store.dispatch("ro/getItemUpdate");
+            this.$store.dispatch("ro/getRuangan");
+            this.$store.commit("ro/update_dialog_detail_view", true);
+        },
+        editRO(data) {
+            this.$store.commit("ro/update_selected_ro", data);
+            this.$store.dispatch("ro/getSupplier");
+            this.$store.dispatch("ro/getWarehouse");
+            this.$store.dispatch("ro/getItemUpdate");
+            this.$store.dispatch("ro/getRuangan");
+            this.$store.commit("form/update_dialog_form_receive_item_edit", true);
+        },
+        handOverRO(data) {
+            this.$store.commit("ro/update_selected_ro", data);
+            this.$store.commit("ro/update_dialog_handover", true);
+            this.$store.dispatch("ro/getListStaff", 'Y');
+        },
+        uploadDoct(data) {
+            this.$store.commit("ro/update_selected_ro", data);
+            this.$store.commit("ro/update_dialog_document", true);
+            this.$store.commit("ro/update_imageFiles", []);
+            this.$store.commit("ro/update_imagePreviews", []);
+            this.$store.commit("ro/update_cekFile", false);
+            this.$store.commit("ro/update_act_dialog_doc", 'upload');
+        },
+        openViewDoc(data) {
+            let curryear = data.documents[0].ReceiveOrderPoDocumentDate
+            let year = new Date(curryear).getFullYear();
+            let fileBaseUrl = BASE_URL + `/one-media/order-inventaris/${year}/`;
+            let allImgUrls = [];
+
+            for (let i = 0; i < data.documents.length; i++) {
+                allImgUrls.push(fileBaseUrl + data.documents[i].ReceiveOrderPoDocumentFile);
+            }
+
+            this.$store.commit("ro/update_selected_ro", data);
+            this.$store.commit("ro/update_imagePreviews", allImgUrls);
+            this.$store.commit("ro/update_dialog_document", true);
+            this.$store.commit("ro/update_cekFile", false);
+            this.$store.commit("ro/update_act_dialog_doc", 'preview');
+        },
+        openBarcode(data) {
+            this.$store.commit("ro/update_selected_ro", data);
+            this.$store.commit("ro/update_dialog_barcode", true);
+            this.$store.commit("ro/update_bar_chx_all", false);
+            this.$store.commit("ro/update_indeterminatex", false);
+            this.$store.commit("ro/update_selected_barcode", []);
+            this.$store.dispatch("ro/getBarcodes");
+        }
+    },
+    watch: {
+        filter: {
+            handler(newVal, oldVal) {
+                this.$store.dispatch("ro/search")
+            },
+            deep: true
+        }
+    },
+}
+</script>

test/vuex/acc-one-receive-item-po-inventaris/index.php

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <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 Item PO</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">
+</head>
+
+<body>
+    <div v-cloak id="app">
+        <v-app id="smartApp">
+            <one-navbar></one-navbar>
+            <v-content style="background: #F5E8DF!important;">
+                <v-container fluid fill-height class="px-1 py-2">
+                    <v-layout row wrap>
+                        <one-ro-layout></one-ro-layout>
+                    </v-layout>
+                </v-container>
+            </v-content>
+        </v-app>
+    </div>
+
+    <!-- Vendor -->
+    <script src="../../../libs/vendor/moment.min.js"></script>
+    <script src="../../../libs/vendor/numeral.min.js"></script>
+    <script src="../../../libs/vendor/moment-locale-id.js"></script>
+    <script src="../../../libs/vendor/lodash.js"></script>
+    <script src="../../../libs/vendor/axios.min.js"></script>
+    <script src="../../../libs/vendor/vue.js"></script>
+    <script src="../../../libs/vendor/vuex.js"></script>
+    <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 -->
+    <?php $ts = "?ts=" . Date("ymdhis"); ?>
+    <script type="module">
+        window.calculate_age = function(inp_dob) {
+            var now = moment(new Date())
+            var dob = moment(new Date(inp_dob))
+            var year = now.diff(dob, 'years')
+            dob.add(year, 'years')
+            var month = now.diff(dob, 'months')
+            dob.add(month, 'months')
+            var day = now.diff(dob, 'days')
+            if (isNaN(year)) return ''
+            return `${year} tahun ${month} bulan ${day} hari`
+        }
+
+        import {
+            store
+        } from './store.js<?php echo $ts ?>';
+
+        //for testing
+        window.store = store;
+        var ts = "?ts=" + Date.now();
+
+        new Vue({
+            store,
+            el: "#app",
+            methods: {
+                tab_selected: function(tab) {
+                    return this.$store.state.tab_selected == tab
+                }
+            },
+            mounted: function() {
+                var url_string = window.location.href
+                var url = new URL(url_string);
+                var code = url.searchParams.get("code");
+
+                if (code != null) {
+                    this.$store.commit('order/update_setupcode', code)
+                    this.$store.commit("patient/update_patients", [])
+                    this.$store.commit("patient/update_total_patients", 0)
+                    this.$store.commit("patient/update_current_page", 1)
+                    this.$store.dispatch("patient/generatesetup", {
+                        setupcode: code
+                    })
+                }
+                if (!one_token())
+                    location.replace('/one-ui/test/vuex/one-login')
+            },
+            components: {
+                'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+                'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                'one-ro-layout': httpVueLoader('./components/oneRoLayout.vue')
+            }
+        })
+    </script>
+    <style>
+        [v-cloak] {
+            display: none
+        }
+
+        .left {}
+
+        .right {}
+    </style>
+</body>
+
+</html>

test/vuex/acc-one-receive-item-po-inventaris/modules/form.js

@@ -0,0 +1,355 @@
+import * as api from "../api/api.js"
+
+export default {
+    namespaced: true,
+    state: {
+        dialog_form_receive_item: false,
+        dialog_form_receive_item_edit: false,
+        dialog_select_item: false,
+        dialog_batch_item: false,
+        form_receive: {
+            receive_date: moment(new Date()).format('YYYY-MM-DD'),
+            number_do: '',
+            referensi: '',
+            supplier: {},
+            warehouse: {},
+            lokasi: {},
+            shipping_cost: 0,
+            note: ''
+        },
+        form_receive_item: [],
+        select_item_temp: [],
+        form_receive_item_del: [],
+        selected_po: {},
+        list_po: [],
+        list_item_po: [],
+        shipping_info: [],
+        selected_item_forbatch: {},
+        item_batch_temp: [],
+
+        dialog_form_inspeksi: false,
+        selected_item_received: {},
+        form_inspeksi: {
+            qty_po: 0,
+            qty_ro: 0,
+            price_po: 0.00,
+            price_ro: 0.00,
+            date_po: moment(new Date()).format('YYYY-MM-DD'),
+            date_ro: moment(new Date()).format('YYYY-MM-DD'),
+            condt_kemasan: '',
+            catatan_kemasan: '',
+            condt_pengiriman: '',
+            catatan_kirim: '',
+            summary: '',
+            catatan: '',
+            pemeriksa: '',
+            pengirim: ''
+        }
+    },
+    mutations: {
+        update_dialog_form_receive_item(state, data) {
+            state.dialog_form_receive_item = data
+        },
+        update_dialog_form_receive_item_edit(state, data) {
+            state.dialog_form_receive_item_edit = data
+        },
+        update_dialog_select_item(state, data) {
+            state.dialog_select_item = data
+        },
+        update_dialog_batch_item(state, data) {
+            state.dialog_batch_item = data
+        },
+        update_form_receive(state, val) {
+            state.form_receive = val
+        },
+        update_form_receive_item(state, val) {
+            state.form_receive_item = val
+        },
+        update_form_receive_item_del(state, val) {
+            state.form_receive_item_del = val
+        },
+        update_select_item_temp(state, val) {
+            state.select_item_temp = val
+        },
+        update_selected_po(state, val) {
+            state.selected_po = val
+        },
+        update_list_po(state, val) {
+            state.list_po = val
+        },
+        update_list_item_po(state, val) {
+            state.list_item_po = val
+        },
+        update_shipping_info(state, val) {
+            state.shipping_info = val
+        },
+        update_selected_item_forbatch(state, val) {
+            state.selected_item_forbatch = val
+        },
+        update_item_batch_temp(state, val) {
+            state.item_batch_temp = val
+        },
+        update_dialog_form_inspeksi(state, val) {
+            state.dialog_form_inspeksi = val
+        },
+        update_form_inspeksi(state, val) {
+            state.form_inspeksi = val
+        },
+        update_selected_item_received(state, val) {
+            state.selected_item_received = val
+        }
+    },
+    actions: {
+        resetForm(context) {
+            const form_receive = {
+                receive_date: moment(new Date()).format('YYYY-MM-DD'),
+                number_do: '',
+                referensi: '',
+                supplier: {},
+                warehouse: {},
+                lokasi: {},
+                shipping_cost: 0,
+                note: ''
+            }
+
+            context.state.form_receive = form_receive
+            context.state.form_receive_item = []
+            context.state.shipping_info = []
+        },
+
+        async getPurchaseOrder(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    SupplierID: context.state.form_receive.supplier.SupplierID,
+                    search: '',
+                    localPO_deleted: context.state.form_receive_item_del.map(item => item.PoItemReceiveID)
+                }
+                const resp = await api.getPurchaseOrder(param);
+                if (resp.status != 'OK') {
+                    context.commit("ro/update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    }, {root: true});
+                } else {
+                    context.commit("update_list_po", resp.data);
+                }
+            } catch (error) {
+                context.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                }, {root: true});
+            }
+        },
+
+        async getItem(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    POID: context.state.selected_po.PurchaseOrderID,
+                    WarehouseID: context.state.form_receive.warehouse.WarehouseID 
+                }
+                const resp = await api.getItem(param);
+                if (resp.status != 'OK') {
+                    context.commit("ro/update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    }, {root: true});
+                } else {
+                    context.commit("update_list_item_po", resp.data);
+                }
+            } catch (error) {
+                context.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                }, {root: true});
+            }
+        },
+
+        async saveRO(context) {
+            try {
+                const cekShipping = context.state.shipping_info.some(item => item.isUpfront === 'N');
+                let param = {
+                    token: one_token(),
+                    date: context.state.form_receive.receive_date,
+                    supplierID: context.state.form_receive.supplier.SupplierID,
+                    warehouseID: context.state.form_receive.warehouse.WarehouseID,
+                    lokasiID: context.state.form_receive.lokasi.M_RuanganID,
+                    shippingCost: context.state.form_receive.shipping_cost,
+                    shippingIsPaid: cekShipping ? 'N' : 'Y',
+                    note: context.state.form_receive.note,
+                    refNumber: context.state.form_receive.referensi,
+                    DONumber: context.state.form_receive.number_do,
+                    detail: context.state.form_receive_item
+                }
+                
+                const resp = await api.saveRO(param);
+                if (resp.status != 'OK') {
+                    context.commit("ro/update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    }, {root: true});
+                } else {
+                    context.dispatch("ro/search", {}, {root: true});
+                    context.dispatch("resetForm");
+ 
+                    context.commit("ro/update_snackbar", {
+                        color: 'success',
+                        msg: resp.data,
+                        isOpen: true
+                    }, {root: true});
+                    context.commit("update_dialog_form_receive_item", false);
+                }
+            } catch (error) {
+                context.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                }, {root: true});
+            }
+        },
+
+        async saveDataInspeksi(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    ROdetailID: 0,
+                    form_inspeksi: context.state.form_inspeksi
+                }
+
+                const resp = await api.saveInspeksi(param)
+                if (resp.status != 'OK') {
+                    context.commit("ro/update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    }, {root: true});
+                } else {
+                    context.commit("ro/update_snackbar", {
+                        color: 'success',
+                        msg: resp.data,
+                        isOpen: true
+                    }, {root: true});
+                    context.commit("update_dialog_form_receive_item", false);
+                }
+            } catch (error) {
+                context.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                }, {root: true});
+            }
+        },
+
+        async getDataItemInspeksi(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    ROdetailID: 0,
+                }
+
+                const resp = await api.getItemDataInspeksi(param)
+                if (resp.status != 'OK') {
+                    context.commit("ro/update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    }, {root: true});
+                } else {
+                    
+                }
+            } catch (error) {
+                context.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                }, {root: true});
+            }
+        },
+
+        async confirmRO(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    ROID: context.rootState.ro.selected_ro.ReceiveOrderPoID
+                }
+                
+                const resp = await api.confirmRO(param)
+                if (resp.status != 'OK') {
+                    context.commit("ro/update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    }, {root: true});
+                } else {
+                    context.dispatch("ro/search", {}, {root: true});
+                    context.dispatch("resetForm");
+
+                    context.commit("ro/update_snackbar", {
+                        color: 'success',
+                        msg: resp.data,
+                        isOpen: true
+                    }, {root: true});
+                    context.commit("ro/update_dialog_confirmation", false, {root: true});
+                }
+            } catch (error) {
+                context.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                }, {root: true});
+            }
+        },
+
+        async saveEditRO(context) {
+            try {
+                const cekShipping = context.state.shipping_info.some(item => item.isUpfront === 'N');
+                let param = {
+                    token: one_token(),
+                    ReceiveOrderID: context.rootState.ro.selected_ro.ReceiveOrderPoID,
+                    numGR: context.rootState.ro.selected_ro.ReceiveOrderPoNumber,
+                    date: context.state.form_receive.receive_date,
+                    supplierID: context.state.form_receive.supplier.SupplierID,
+                    warehouseID: context.state.form_receive.warehouse.WarehouseID,
+                    lokasiID: context.state.form_receive.lokasi.M_RuanganID,
+                    shippingCost: context.state.form_receive.shipping_cost,
+                    shippingIsPaid: cekShipping ? 'N' : 'Y',
+                    note: context.state.form_receive.note,
+                    refNumber: context.state.form_receive.referensi,
+                    DONumber: context.state.form_receive.number_do,
+                    detail: context.state.form_receive_item
+                }
+
+                const resp = await api.saveEditRO(param)
+                if (resp.status != 'OK') {
+                    context.commit("ro/update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    }, {root: true});
+                } else {
+                    context.dispatch("ro/search", {}, {root: true});
+                    context.dispatch("resetForm");
+ 
+                    context.commit("ro/update_snackbar", {
+                        color: 'success',
+                        msg: resp.data,
+                        isOpen: true
+                    }, {root: true});
+                    context.commit("update_dialog_form_receive_item_edit", false);
+                }
+            } catch (error) {
+                context.commit("ro/update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                }, {root: true});
+            }
+        }
+    }
+}

test/vuex/acc-one-receive-item-po-inventaris/modules/ro.js

@@ -0,0 +1,431 @@
+import * as api from "../api/api.js"
+
+export default {
+    namespaced: true,
+    state: {
+        dialog_confirmation: false,
+        dialog_delete: false,
+        dialog_detail_view: false,
+        snackbar: {
+            color: 'success',
+            msg: '',
+            isOpen: false
+        },
+        filter: {
+            startdate: moment(new Date()).format('YYYY-MM-DD'),
+            enddate: moment(new Date()).format('YYYY-MM-DD'),
+            search: ''
+        },
+        curr_page: 1,
+        list_data_ro: {
+            records: [],
+            total: 1
+        },
+        list_supplier: [],
+        list_warehouse: [],
+        selected_ro: {},
+        list_staff: [],
+        list_lokasi: [],
+        dialog_handover: false,
+        selected_staff: {},
+        dialog_document: false,
+        show_progrees_upload: false,
+        imageFiles: [],
+        imagePreviews: [],
+        cekFile: false,
+        act_dialog_doc: "",
+        dialog_barcode: false,
+        barcodes: [],
+        urlQrCode: '',
+        indeterminatex: false,
+        bar_chx_all: false,
+        selected_barcode: [],
+    },
+    mutations: {
+        update_dialog_confirmation(state, data) {
+            state.dialog_confirmation = data
+        },
+        update_dialog_delete(state, data) {
+            state.dialog_delete = data
+        },
+        update_dialog_detail_view(state, data) {
+            state.dialog_detail_view = data
+        },
+        update_snackbar(state, data) {
+            state.snackbar = data
+        },
+        update_filter(state, data) {
+            state.filter = data
+        },
+        update_curr_page(state, data) {
+            state.curr_page = data
+        },
+        update_list_data_ro(state, data) {
+            state.list_data_ro = data
+        },
+        update_list_supplier(state, val) {
+            state.list_supplier = val
+        },
+        update_list_warehouse(state, val) {
+            state.list_warehouse = val
+        },
+        update_selected_ro(state, val) {
+            state.selected_ro = val
+        },
+        update_list_staff(state, val) {
+            state.list_staff = val
+        },
+        update_list_lokasi(state, val) {
+            state.list_lokasi = val
+        },
+        update_dialog_handover(state, val) {
+            state.dialog_handover = val
+        },
+        update_selected_staff(state, val) {
+            state.selected_staff = val
+        },
+        update_dialog_document(state, val) {
+            state.dialog_document = val
+        },
+        update_show_progrees_upload(state, val) {
+            state.show_progrees_upload = val
+        },
+        update_imageFiles(state, val) {
+            state.imageFiles = val
+        },
+        update_imagePreviews(state, val) {
+            state.imagePreviews = val
+        },
+        update_cekFile(state, val) {
+            state.cekFile = val
+        },
+        update_act_dialog_doc(state, val) {
+            state.act_dialog_doc = val
+        },
+        update_dialog_barcode(state, val) {
+            state.dialog_barcode = val
+        },
+        update_barcodes(state, val) {
+            state.barcodes = val
+        },
+        update_urlQrCode(state, val) {
+            state.urlQrCode = val
+        },
+        update_indeterminatex(state, val) {
+            state.indeterminatex = val
+        },
+        update_bar_chx_all(state, val) {
+            state.bar_chx_all = val
+        },
+        update_selected_barcode(state, val) {
+            state.selected_barcode = val
+        }
+    },
+    actions: {
+        async search(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    page: context.state.curr_page,
+                    ...context.state.filter
+                }
+
+                console.log("search OR");
+                let resp = await api.search(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_list_data_ro", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async getSupplier(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    search: ''
+                }
+                const resp = await api.getSupplier(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_list_supplier", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async getWarehouse(context) {
+            try {
+                let param = {
+                    token: one_token()
+                }
+                const resp = await api.getWarehouse(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_list_warehouse", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async getRuangan(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    search: ''
+                }
+                const resp = await api.getRuangan(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_list_lokasi", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async getItemUpdate(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    ROID: context.state.selected_ro.ReceiveOrderPoID
+                }
+
+                const resp = await api.getItemUpdate(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    let temp_ship = []
+                    resp.data.forEach(element => {
+                        let ship = {
+                            num_po: element.PurchaseOrderNumber,
+                            cost: element.PurchaseOrderShippingCost,
+                            isUpfront: element.PurchaseOrderShippingCostStatus
+                        }
+
+                        const isExist = context.rootState.form.shipping_info.some(
+                            item => item.num_po == element.PurchaseOrderNumber
+                        );
+                        if (!isExist) {
+                            temp_ship.push(ship);
+                        }
+                    });
+
+                    let form = {
+                        receive_date: context.state.selected_ro.ReceiveOrderPoIDate,
+                        number_do: context.state.selected_ro.ReceiveOrderPoDONumber,
+                        referensi: context.state.selected_ro.ReceiveOrderPoRefNumber,
+                        supplier: {
+                            SupplierID: context.state.selected_ro.SupplierID,
+                            SupplierName: context.state.selected_ro.SupplierName
+                        },
+                        warehouse: {
+                            WarehouseID: context.state.selected_ro.WarehouseID,
+                            WarehouseName: context.state.selected_ro.WarehouseName,
+                            WarehouseCode: context.state.selected_ro.WarehouseCode
+                        },
+                        lokasi: {
+                            M_RuanganID: context.state.selected_ro.M_RuanganID,
+                            M_RuanganName: context.state.selected_ro.M_RuanganName,
+                            M_RuanganCode: context.state.selected_ro.M_RuanganCode
+                        },
+                        shipping_cost: context.state.selected_ro.ReceiveOrderShippingCostAmount,
+                        note: context.state.selected_ro.ReceiveOrderPoNote
+                    }
+
+                    context.commit("form/update_form_receive", form, {root: true});
+                    context.commit("form/update_shipping_info", temp_ship, {root: true});
+                    context.commit("form/update_form_receive_item", resp.data, {root: true});
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async deleteRO(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    ROID: context.state.selected_ro.ReceiveOrderPoID
+                }
+                const resp = await api.deleteRO(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_selected_ro", {});
+                    context.dispatch("search", {});
+
+                    context.commit("update_snackbar", {
+                        color: 'success',
+                        msg: resp.data,
+                        isOpen: true
+                    });
+                    context.commit("update_dialog_delete", false);
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async getListStaff(context, isHandover) {
+            try {
+                let param = {
+                    token: one_token(),
+                    ROID: context.state.selected_ro.ReceiveOrderPoID,
+                    isSerahTerima: isHandover ?? "N"
+                }
+                let resp = await api.getListStaff(param)
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_list_staff", resp.data)
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async saveHandover(context, param) {
+            try {
+                param.token = one_token()
+                const resp = await api.saveHandover(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_selected_ro", {});
+                    context.commit("update_selected_staff", {});
+                    context.dispatch("search", {});
+
+                    context.commit("update_snackbar", {
+                        color: 'success',
+                        msg: resp.data,
+                        isOpen: true
+                    });
+                    context.commit("update_dialog_handover", false);
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async saveFiles(context, param) {
+            try {
+                const resp = await api.saveFiles(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_selected_ro", {});
+                    context.commit("update_imageFiles", []);
+                    context.commit("update_imagePreviews", []);
+                    context.commit("update_cekFile", false);
+                    context.dispatch("search", {});
+
+                    context.commit("update_snackbar", {
+                        color: 'success',
+                        msg: resp.data,
+                        isOpen: true
+                    });
+                    context.commit("update_dialog_document", false);
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+        async getBarcodes(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    ROID: context.state.selected_ro.ReceiveOrderPoID
+                }
+                const resp = await api.getBarcodes(param);
+                if (resp.status != 'OK') {
+                    context.commit("update_snackbar", {
+                        color: 'error',
+                        msg: resp.message,
+                        isOpen: true
+                    });
+                } else {
+                    context.commit("update_barcodes", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_snackbar", {
+                    color: 'error',
+                    msg: error.message,
+                    isOpen: true
+                });
+            }
+        },
+    }
+}

test/vuex/acc-one-receive-item-po-inventaris/store.js

@@ -0,0 +1,23 @@
+import system from "../../../apps/modules/system/system.js";
+import form from "./modules/form.js";
+import ro from "./modules/ro.js";
+export const store = new Vuex.Store({
+    modules: {
+        system: system,
+        ro: ro,
+        form: form
+    },
+    state: {
+        tab_selected: 'pasien-dokter'
+    },
+    mutations: {
+        change_tab(state, ntab) {
+            state.tab_selected = ntab
+        }
+    },
+    actions: {
+        change_tab(context, ntab) {
+            context.commit('change_tab', ntab)
+        }
+    },
+});