From d018e85927b31761a10eac43441322d99dba539e Mon Sep 17 00:00:00 2001
From: sasadib <adib@sismedika.com>
Date: Wed, 13 May 2026 16:52:20 +0700
Subject: [PATCH] update proses add akun pusat media jurnal & move barcode to
 serah terima

---
 .../api/journal.js                            |  282 ++++
 .../components/dialogCloseJurnal.vue          |   77 +
 .../components/dialogEditJurnal.vue           |  223 +++
 .../components/dialogPostingJurnal.vue        |   68 +
 .../components/dialogRequestEditJurnal.vue    |   58 +
 .../components/oneMediaJournalList.vue        | 1075 +++++++++++++
 .../index.php                                 |   73 +
 .../modules/journal.js                        |  581 +++++++
 .../acc-one-jurnal-penerimaan-barang/store.js |   23 +
 .../acc-one-pendapatan-cash-v2/api/journal.js |  276 ++++
 .../components/dialogCloseJurnal.vue          |   76 +
 .../components/dialogEditJurnal.vue           |  223 +++
 .../components/dialogPostingJurnal.vue        |   68 +
 .../components/dialogRequestEditJurnal.vue    |   58 +
 .../components/oneMediaJournalList.vue        | 1099 +++++++++++++
 .../vuex/acc-one-pendapatan-cash-v2/index.php |   73 +
 .../modules/journal.js                        |  584 +++++++
 test/vuex/acc-one-pendapatan-cash-v2/store.js |   23 +
 .../components/dialogHandOver.vue             |   50 +-
 .../components/oneRoLayout.vue                |    5 +-
 .../api/bill.js                               |   59 +
 .../api/payment.js                            |  118 ++
 .../api/paymentmanual.js                      |  231 +++
 .../components/oneBillList.vue                |  978 ++++++++++++
 .../components/oneBillPaymentAuto.vue         |  855 ++++++++++
 .../components/oneBillPaymentManual.vue       | 1401 +++++++++++++++++
 .../components/oneBillPaymentMulti.vue        | 1372 ++++++++++++++++
 .../components/oneBillPaymentNew.vue          |  815 ++++++++++
 .../index.php                                 |   96 ++
 .../modules/bill.js                           |  364 +++++
 .../modules/paymentmanual.js                  |  604 +++++++
 .../modules/paymentnew.js                     |  255 +++
 .../store.js                                  |   31 +
 test/vuex/one-md-usergroup-user-v6/action.js  |    0
 test/vuex/one-md-usergroup-user-v6/api.js     |   31 +
 .../vuex/one-md-usergroup-user-v6/api/user.js |   98 ++
 .../one-md-usergroup-user-v6/api/usergroup.js |  192 +++
 .../components/oneMdUserGroupList.vue         |  458 ++++++
 .../components/oneMdUserList.vue              |  872 ++++++++++
 test/vuex/one-md-usergroup-user-v6/index.php  |   76 +
 .../one-md-usergroup-user-v6/modules/user.js  |  295 ++++
 .../modules/usergroup.js                      |  437 +++++
 .../vuex/one-md-usergroup-user-v6/mutation.js |    0
 test/vuex/one-md-usergroup-user-v6/store.js   |   25 +
 44 files changed, 14646 insertions(+), 12 deletions(-)
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/api/journal.js
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogCloseJurnal.vue
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogEditJurnal.vue
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogPostingJurnal.vue
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogRequestEditJurnal.vue
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/components/oneMediaJournalList.vue
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/index.php
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/modules/journal.js
 create mode 100644 test/vuex/acc-one-jurnal-penerimaan-barang/store.js
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/api/journal.js
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/components/dialogCloseJurnal.vue
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/components/dialogEditJurnal.vue
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/components/dialogPostingJurnal.vue
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/components/dialogRequestEditJurnal.vue
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/components/oneMediaJournalList.vue
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/index.php
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/modules/journal.js
 create mode 100644 test/vuex/acc-one-pendapatan-cash-v2/store.js
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/api/bill.js
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/api/payment.js
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/api/paymentmanual.js
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillList.vue
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentAuto.vue
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentManual.vue
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentMulti.vue
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentNew.vue
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/index.php
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/modules/bill.js
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/modules/paymentmanual.js
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/modules/paymentnew.js
 create mode 100644 test/vuex/acc-one-supplier-payment-cashier-v5/store.js
 create mode 100644 test/vuex/one-md-usergroup-user-v6/action.js
 create mode 100644 test/vuex/one-md-usergroup-user-v6/api.js
 create mode 100644 test/vuex/one-md-usergroup-user-v6/api/user.js
 create mode 100644 test/vuex/one-md-usergroup-user-v6/api/usergroup.js
 create mode 100644 test/vuex/one-md-usergroup-user-v6/components/oneMdUserGroupList.vue
 create mode 100644 test/vuex/one-md-usergroup-user-v6/components/oneMdUserList.vue
 create mode 100644 test/vuex/one-md-usergroup-user-v6/index.php
 create mode 100644 test/vuex/one-md-usergroup-user-v6/modules/user.js
 create mode 100644 test/vuex/one-md-usergroup-user-v6/modules/usergroup.js
 create mode 100644 test/vuex/one-md-usergroup-user-v6/mutation.js
 create mode 100644 test/vuex/one-md-usergroup-user-v6/store.js

diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/api/journal.js b/test/vuex/acc-one-jurnal-penerimaan-barang/api/journal.js
new file mode 100644
index 0000000..05ecfc2
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/api/journal.js
@@ -0,0 +1,282 @@
+const URL = "/one-api/mockup/masterdata/accounting/";
+
+export async function getPeriode(prm) {
+    try {
+        var resp = await axios.post(URL + "Journalgoodreceive/getPeriode", 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(
+    token,
+    xdate,
+    periodeid,
+    current_page,
+    search,
+    branchCode,
+    regionalId
+) {
+    try {
+        var resp = await axios.post(URL + "Journalgoodreceive/search", {
+            token: token,
+            xdate: xdate,
+            periodeid: periodeid,
+            current_page: current_page,
+            search: search,
+            branchCode: branchCode,
+            regionalId: regionalId
+        });
+        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 insertSales(branchCode, date, jurnalno) {
+    try {
+        var resp = await axios.get(
+            URL + `mediajurnalauto/insertSales/${branchCode}/${date}?isregen=1&jurnalno=${jurnalno}`
+        );
+        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 getRegional(prm) {
+    try {
+        var resp = await axios.post(URL + "Journalgoodreceive/getRegional", 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 getBranch(prm) {
+    try {
+        var resp = await axios.post(URL + "Journalgoodreceive/getBranch", 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 getUserApproveLevel(params) {
+    try {
+        var resp = await axios.post(URL + "Journalgoodreceive/getUserApproveLevel", 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 getListingCOA(params) {
+    try {
+        var resp = await axios.post(URL + "Journalgoodreceive/getListingCOA", 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 requestEditJurnal(params) {
+    try {
+        const resp = await axios.post(URL + "JournalVerifEdit/requestEditJurnal", params);
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+
+        const data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function saveEditJurnal(params) {
+    try {
+        var resp = await axios.post(URL + "JournalVerifEdit/saveEditJurnal", 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 changeJurnalToPosted(params) {
+    try {
+        var resp = await axios.post(URL + "Journalgoodreceive/changeJurnalToPosted", 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 getTotalJurnalNotPostedPerPeriod(params) {
+    try {
+        var resp = await axios.post(
+            URL + "Journalgoodreceive/getTotalJurnalNotPostedPerPeriod",
+            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 closeJurnalPerPeriode(params) {
+    try {
+        var resp = await axios.post(URL + "Journalgoodreceive/closeJurnalPerPeriode", 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 getDataJurnalNotClosedPerPeriod(params) {
+    try {
+        var resp = await axios.post(
+            URL + "Journalgoodreceive/getDataJurnalNotClosedPerPeriod",
+            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
+        };
+    }
+}
diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogCloseJurnal.vue b/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogCloseJurnal.vue
new file mode 100644
index 0000000..f8028dc
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogCloseJurnal.vue
@@ -0,0 +1,77 @@
+<template>
+    <v-dialog v-model="dialog_close_jurnal" persistent width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                TUTUP SEMUA JURNAL PADA PERIODE {{ selected_periode.periodeName }}
+            </v-card-title>
+            <v-card-text>
+                <div v-for="item in jurnal_to_close" :key="item.jurnalIsPosted">
+                    <p v-if="item.jurnalIsPosted == 'N'">
+                        Jumlah jurnal yang tidak dapat ditutup:
+                        <strong>{{ item.total_jurnal }}</strong>
+                    </p>
+                    <p v-else>
+                        Jumlah jurnal yang dapat ditutup: <strong>{{ item.total_jurnal }}</strong>
+                    </p>
+                </div>
+                <p>
+                    Apakah anda yakin akan menutup semua jurnal yang dibuat di
+                    <strong> {{ area_jurnal }} </strong> dalam rentang waktu <br />
+                    <strong>{{ selected_periode.periode }}</strong> <br />
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" outline flat @click="dialog_close_jurnal = false">Batal</v-btn>
+                <v-btn color="primary" dark @click="closeJurnal()">Ya</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        selected_periode() {
+            return this.$store.state.journal.selected_periode
+        },
+        area_jurnal() {
+            const user = this.$store.state.journal.user
+            if (user.M_BranchID == '0') {
+                return `Regional ${user.S_RegionalName}`
+            } else {
+                return `Cabang ${user.M_BranchName}, Regional ${user.S_RegionalName}`
+            }
+        },
+        jurnal_to_close() {
+            return this.$store.state.journal.jurnal_to_close
+        },
+        dialog_close_jurnal: {
+            get() {
+                return this.$store.state.journal.dialog_close_jurnal
+            },
+            set(val) {
+                this.$store.commit("journal/update_dialog_close_jurnal", val)
+            }
+        }
+    },
+    methods: {
+        closeJurnal() {
+            var jurnal = this.jurnal_to_close.find(item => item.jurnalIsPosted === 'Y')
+            if (jurnal && Number(jurnal.total_jurnal) > 0) {
+                this.$store.dispatch("journal/closeJurnalPerPeriode", { typeid: jurnal.JurnalTypeID })
+                return;
+            }
+            this.$store.commit("journal/update_open_dialog_info", true);
+            this.$store.commit("journal/update_msg_info",
+                "Tidak ada jurnal yang dapat ditutup"
+            );
+        }
+    },
+}
+</script>
diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogEditJurnal.vue b/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogEditJurnal.vue
new file mode 100644
index 0000000..fa4fcb8
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogEditJurnal.vue
@@ -0,0 +1,223 @@
+<template>
+    <v-dialog v-model="dialog_edit_jurnal" persistetnt width="70vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                EDIT JOURNAL PENERIMAAN BARANG
+            </v-card-title>
+            <v-card-text>
+                <v-layout row wrap>
+                    <v-flex xs6 pa-1 pr-3>
+                        <div class="font-weight-bold">Company Name</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.M_BranchCompanyName  }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pl-3>
+                        <div class="font-weight-bold">Journal</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.jurnalTitle  }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pr-3>
+                        <div class="font-weight-bold">Regional</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.S_RegionalName  }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pl-3>
+                        <div class="font-weight-bold">Journal Date</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.jurnalDate  }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pr-3>
+                        <div class="font-weight-bold">Branch</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.M_BranchName }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pl-3>
+                        <div class="font-weight-bold">Journal Type</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.JurnalTypeName }}
+                        </div>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row wrap mt-3>
+                    <v-flex xs12>
+                        <v-data-table
+                            :headers="headerdetails" :items="journal_edit"
+                            hide-actions class="elevation-1"
+                        >
+                            <template slot="items" slot-scope="props">
+                                <tr>
+                                    <td class="text-xs-center pa-2">{{ props.item.coaAccountNo }}</td>
+                                    <td class="text-xs-left pa-2">
+                                        <v-autocomplete
+                                            label="Account" hide-details outline
+                                            v-model="props.item.coaAccountNo"
+                                            :items="list_coa" item-text="coaDescription"
+                                            item-value="coaAccountNo"
+                                        ></v-autocomplete>
+                                    </td>
+                                    <td class="text-xs-left pa-2">{{ props.item.jurnalAddOnValue }}</td>
+                                    <td class="text-xs-center pa-2">{{ props.item.coaCurrencyCode }}</td>
+                                    <td class="text-xs-right pa-2">{{ formatCurrency(props.item.jurnalTxDebit) }}</td>
+                                    <td class="text-xs-right pa-2">{{ formatCurrency(props.item.jurnalTxCredit) }}</td>
+                                </tr>
+                            </template>
+                            <template v-slot:footer>
+                                <tr>
+                                    <td colspan="4" class="font-weight-bold pa-2">TOTAL</td>
+                                    <td class="text-xs-right pa-2 font-weight-bold">
+                                        {{ formatCurrency(xsummary.debit) }}
+                                    </td>
+                                    <td class="text-xs-right pa-2 font-weight-bold">
+                                        {{ formatCurrency(xsummary.credit) }}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td colspan="5" class="font-weight-bold pa-2">BALANCE</td>
+                                    <td width="10%" class="text-xs-right pa-2 font-weight-bold">
+                                        {{ formatCurrency(xsummary.balance) }}
+                                    </td>
+                                </tr>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" outline flat @click="closeEditDialog()">Batal</v-btn>
+                <v-btn color="primary" dark @click="simpanEditDialog()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            headerdetails: [
+                {
+                    text: "AKUN", align: "center", sortable: false,
+                    value: "action", width: "20%", class: "pa-2 pl-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "DESKRIPSI", align: "center", sortable: false,
+                    value: "mr", width: "25%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "INFO", align: "center", sortable: false,
+                    value: "lab", width: "15%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "CURRENCY", align: "center", sortable: false,
+                    value: "lab", width: "10%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "DEBIT", align: "center", sortable: false,
+                    value: "lab", width: "15%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "CREDIT", align: "center", sortable: false,
+                    value: "lab", width: "15%", class: "pa-2 blue lighten-3 white--text",
+                }
+            ]
+        }
+    },
+    computed: {
+        dialog_edit_jurnal: {
+            get() {
+                return this.$store.state.journal.dialog_edit_journal;
+            },
+            set(val) {1
+                this.$store.commit("journal/update_dialog_edit_journal", val);
+            }
+        },
+        selected_journal: {
+            get() {
+                return this.$store.state.journal.selected_journal;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_journal", val);
+            },
+        },
+        journal_edit: {
+            get() {
+                return this.$store.state.journal.journal_edit
+            },
+            set(val) {
+                this.$store.commit("journal/update_journal_edit", val);
+            }
+        },
+        selected_periode() {
+            return this.$store.state.journal.selected_periode
+        },
+        xsummary() {
+          return this.$store.state.journal.summary
+        },
+        list_coa() {
+            return this.$store.state.journal.list_coa
+        }
+    },
+    methods: {
+        formatCurrency(val) {
+            const price = parseFloat(val);
+            const IDR = new Intl.NumberFormat("id-ID", {
+                style: "currency",
+                currency: "IDR"
+            });
+            return `${IDR.format(price)}`;
+        },
+        simpanEditDialog() {
+            const originaldetail = this.selected_journal.detailtx;
+            const editnewdetails = this.journal_edit;
+            const listcoa = this.list_coa;
+
+            const originalMap = new Map();
+            for (const item of originaldetail) {
+                originalMap.set(item.jurnalTxID, item.coaAccountNo);
+            }
+
+            const coaMap = new Map();
+            for (const coaItem of listcoa) {
+                coaMap.set(coaItem.coaAccountNo, coaItem);
+            }
+
+            const editeddetail = editnewdetails.flatMap(detail => {
+                const originalAcc = originalMap.get(detail.jurnalTxID);
+                if (originalAcc !== detail.coaAccountNo) {
+                    const accMatch = coaMap.get(detail.coaAccountNo);
+                    if (accMatch) {
+                        return [{
+                            jurnalID: detail.jurnalTxJurnalID,
+                            jurnalTxID: detail.jurnalTxID,
+                            coaID: accMatch.coaID,
+                            coaDescription: accMatch.coaDescription,
+                            coaAccountNo: accMatch.coaAccountNo
+                        }]
+                    } else {
+                        return [];
+                    }
+                } else {
+                    return [];
+                }
+            })
+
+            this.$store.dispatch("journal/saveEditJurnal", editeddetail);
+        },
+        closeEditDialog() {
+            this.selected_journal = {};
+            this.journal_edit = [];
+            this.dialog_edit_jurnal = false;
+        }
+    },
+    watch: {
+
+    },
+}
+</script>
\ No newline at end of file
diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogPostingJurnal.vue b/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogPostingJurnal.vue
new file mode 100644
index 0000000..0ae425c
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogPostingJurnal.vue
@@ -0,0 +1,68 @@
+<template>
+    <v-dialog v-model="dialog_confirm_posting" persistetnt width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                POSTING SEMUA JURNAL PADA PERIODE {{ selected_periode.periodeName }}
+            </v-card-title>
+            <v-card-text>
+                <div v-for="item in total_jurnal_not_posted" :key="item.jurnalEditStatus">
+                    <p v-if="item.jurnalEditStatus == 'N'">
+                        Jumlah jurnal yang dapat diposting: <strong>{{ item.total_jurnal }}</strong>
+                    </p>
+                    <p v-if="item.jurnalEditStatus == 'Y'">
+                        Jumlah jurnal yang tidak dapat diposting: <strong>{{ item.total_jurnal }}</strong>
+                        (belum diverifikasi setelah edit)
+                    </p>
+                </div>
+                <p>
+                    Apakah anda yakin akan melakukan posting semua jurnal yang dibuat dalam rentang waktu
+                    <strong>{{ selected_periode.periode }}</strong> ?
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" outline flat @click="dialog_confirm_posting = false">Batal</v-btn>
+                <v-btn color="primary" dark @click="postingJurnal()">Ya</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            
+        }
+    },
+    computed: {
+        selected_periode() {
+            return this.$store.state.journal.selected_periode
+        },
+        total_jurnal_not_posted() {
+            return this.$store.state.journal.total_jurnal_not_posted
+        },
+        dialog_confirm_posting: {
+            get() {
+                return this.$store.state.journal.dialog_confirm_posting;
+            },
+            set(val) {1
+                this.$store.commit("journal/update_dialog_confirm_posting", val);
+            }
+        },
+    },
+    methods: {
+        postingJurnal() {
+            var jurnal = this.total_jurnal_not_posted.find(jrnl => jrnl.jurnalEditStatus === 'N')
+            if (jurnal && Number(jurnal.total_jurnal) > 0) {
+                this.$store.dispatch("journal/postingJurnal", { typeid: jurnal.JurnalTypeID });
+                return;
+            }
+            this.$store.commit("journal/update_open_dialog_info", true);
+            this.$store.commit("journal/update_msg_info",
+                "semua jurnal para periode ini sudah terposting"
+            );
+        }
+    },
+}
+</script>
\ No newline at end of file
diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogRequestEditJurnal.vue b/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogRequestEditJurnal.vue
new file mode 100644
index 0000000..92715a8
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/components/dialogRequestEditJurnal.vue
@@ -0,0 +1,58 @@
+<template>
+    <v-dialog v-model="dialog_request_edit" persistent width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                REQUEST EDIT JURNAL {{ selected_journal.jurnalNo }}
+            </v-card-title>
+            <v-card-text>
+                <p v-if="selected_journal.JurnalRequestEditStatusEdit == 'approved'">
+                    Jurnal ini sudah pernah diedit sebelumnya oleh:
+                    {{ selected_journal.JurnalRequestEditStaffName }} <br>
+                    Apakah anda yakin akan mengajukan permintaan untuk melakukan perubahan lagi? <br>
+                    Nomor: <strong>{{ selected_journal.jurnalNo }}</strong> <br>
+                    Judul: <strong>{{ selected_journal.jurnalTitle }}</strong> <br>
+                    Deskripsi: {{ selected_journal.jurnalDescription }} <br>
+                </p>
+                <p v-else>
+                    Apakah anda yakin akan mengajukan permintaan untuk melakukan perubahan jurnal: <br>
+                    Nomor: <strong>{{ selected_journal.jurnalNo }}</strong> <br>
+                    Judul: <strong>{{ selected_journal.jurnalTitle }}</strong> <br>
+                    Deskripsi: {{ selected_journal.jurnalDescription }} <br>
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" outline @click="dialog_request_edit = false">Batal</v-btn>
+                <v-btn color="primary" dark @click="requestEdit()">Ya</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        dialog_request_edit: {
+            get() {
+                return this.$store.state.journal.dialog_request_edit
+            },
+            set(val) {
+                this.$store.commit("journal/update_dialog_request_edit", val)
+            }
+        },
+        selected_journal() {
+            return this.$store.state.journal.selected_journal
+        }
+    },
+    methods: {
+        requestEdit() {
+            this.$store.dispatch("journal/requestEditJurnal");
+        }
+    },
+}
+</script>
diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/components/oneMediaJournalList.vue b/test/vuex/acc-one-jurnal-penerimaan-barang/components/oneMediaJournalList.vue
new file mode 100644
index 0000000..3bc9489
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/components/oneMediaJournalList.vue
@@ -0,0 +1,1075 @@
+<template>
+    <div style="width: 100%" class="">
+        <!-- SNACKBAR -->
+        <v-snackbar v-model="snackbar" color="success" :timeout="5000" :multi-line="false" :vertical="false"
+            :top="true">
+            {{ msgSnackbar }}
+            <v-btn flat @click="updateAlertSuccess(false)"> Tutup </v-btn>
+        </v-snackbar>
+
+        <!-- ERROR DIALOG -->
+        <v-dialog v-model="dialog_error" max-width="500px">
+            <v-card>
+                <v-card-title>
+                    <span>ERROR !</span>
+                    <v-spacer></v-spacer>
+                </v-card-title>
+                <v-divider></v-divider>
+                <div class="ma-3 red--text">{{ msgError }}</div>
+                <v-divider></v-divider>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="primary" flat @click="dialog_error = false">Tutup</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+        <!-- END ERROR DIALOG -->
+
+        <v-toolbar dark class="blue lighten-3 white--text">
+            <v-toolbar-title class="white--text">JOURNAL PENERIMAAN BARANG</v-toolbar-title>
+            <v-spacer></v-spacer>
+        </v-toolbar>
+
+        <!-- filter -->
+        <v-card class="pa-2">
+            <v-layout row align-center>
+                <v-flex grow>
+                    <span>
+                        <v-chip outline color="red">
+                            {{ this.$store.state.journal.selected_periode.periode }}
+                        </v-chip>
+                    </span>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-menu v-model="menufilterdate" :close-on-content-click="false" :nudge-right="40" lazy
+                        transition="scale-transition" offset-y full-width max-width="290px" min-width="290px">
+                        <template v-slot:activator="{ on }">
+                            <v-text-field v-model="filterComputedDateFormatted" label="Tanggal" outline hide-details
+                                readonly v-on="on"
+                                @blur="date = deFormatedDate(filterComputedDateFormatted)"></v-text-field>
+                        </template>
+                        <v-date-picker no-title v-model="xdate" @input="menufilterdate = false"
+                            :min="selectedPeriode.periode_start" :max="selectedPeriode.periode_end"></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-autocomplete :items="regionals" v-model="selected_regional" return-object clearable
+                        item-text="S_RegionalName" label="Regional" outline hide-details></v-autocomplete>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-autocomplete :disabled="_.isEmpty(this.selected_regional) ||
+                        this.selected_regional === undefined
+                        " :items="branchs" v-model="selected_branch" return-object item-text="M_BranchName"
+                        label="Cabang" outline hide-details clearable></v-autocomplete>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-text-field v-model="xsearch" label="Cari No." outline hide-details></v-text-field>
+                </v-flex>
+                <v-flex shrink pl-2>
+                    <v-btn dark color="primary" style="min-width: 50px; height: 50px; margin: 0"
+                        @click="searchJurnal()">
+                        <v-icon>search</v-icon>
+                    </v-btn>
+                </v-flex>
+                <v-flex shrink pl-2>
+                    <v-tooltip bottom>
+                        <template v-slot:activator="{ on }">
+                            <v-btn dark v-on="on" color="info" @click="postingJurnal()"
+                                style="min-width: 50px; height: 50px; margin: 0">
+                                <v-icon>book</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>Posting Jurnal</span>
+                    </v-tooltip>
+                </v-flex>
+                <v-flex shrink pl-2>
+                    <v-tooltip bottom>
+                        <template v-slot:activator="{ on }">
+                            <v-btn dark v-on="on" color="warning" @click="closeJurnal()"
+                                style="min-width: 50px; height: 50px; margin: 0">
+                                <v-icon>collections_bookmark</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>Tutup Jurnal</span>
+                    </v-tooltip>
+                </v-flex>
+                <v-flex text-xs-right>
+                    <v-btn color="orange" class="white--text" @click="openDialogPeriode()">
+                        Accounting Period
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+        <!-- listing table -->
+        <v-card class="pa-2 mt-2">
+            <v-layout row wrap class="scroll-container" style="max-height: 600px; overflow: auto">
+                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                    <v-data-table :headers="headers" :items="xjournals" :loading="isLoading" hide-actions
+                        class="elevation-1">
+                        <template v-slot:items="props">
+                            <tr>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.jurnalNo }}
+                                    <span v-if="props.item.ErrStatus === 'Y'">
+                                        <v-tooltip bottom>
+                                            <template v-slot:activator="{ on, attrs }">
+                                                <v-icon v-bind="attrs" v-on="on" class="ml-1" color="red" small
+                                                    @click="viewError(props.item)">error</v-icon>
+                                            </template>
+                                            <span>error information</span>
+                                        </v-tooltip>
+                                    </span>
+                                    <!-- <span v-if="props.item.ErrStatus === 'Y'"><v-icon small color="red" @click="viewError(props.item)">error</v-icon></span> -->
+                                </td>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.jurnalDate }}
+                                </td>
+                                <td class="text-xs-left pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.jurnalTitle }}
+                                </td>
+                                <td class="text-xs-left pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.jurnalDescription }}
+                                </td>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.JurnalTypeName }}
+                                </td>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    <span v-if="props.item.jurnalIsPosted == 'Y'">
+                                        <v-chip color="indigo" class="ml-0" outline small>
+                                            posted
+                                        </v-chip>
+                                    </span>
+                                    <span v-else="props.item.jurnalIsPosted == 'N'">
+                                        <v-chip color="red" class="ml-0" outline small>
+                                            not posted
+                                        </v-chip>
+                                    </span>
+                                    <span v-if="props.item.jurnalIsClosed == 'Y'">
+                                        <v-chip color="warning" class="ml-1" outline small>
+                                            closed
+                                        </v-chip>
+                                    </span>
+                                </td>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    <v-tooltip v-if="
+                                        (user_level.DivisionID == '6' ||
+                                            user_level.DivisionKodeSurat == 'KEU') &&
+                                        props.item.jurnalIsPosted == 'N'
+                                    " bottom class="pr-1">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn dark small v-on="on" color="warning" @click="editJurnal(props.item)"
+                                                style="min-width: 30px; margin: 0">
+                                                <v-icon v-bind="attrs" small>edit</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Edit</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom class="pr-1">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn dark small v-on="on" color="info" @click="vieDetail(props.item)"
+                                                style="min-width: 30px; margin: 0">
+                                                <v-icon v-bind="attrs" small>visibility</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Detail</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom class="pr-1">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn dark small v-on="on" color="red" @click="doPrint(props.item)"
+                                                style="min-width: 30px; margin: 0">
+                                                <v-icon v-bind="attrs" small>picture_as_pdf</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>RPT PDF</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn dark small v-on="on" color="green" @click="doPrintXlsx(props.item)"
+                                                style="min-width: 30px; margin: 0">
+                                                <v-icon v-bind="attrs" small>receipt</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>RPT Excel</span>
+                                    </v-tooltip>
+                                </td>
+                            </tr>
+                        </template>
+                    </v-data-table>
+                </v-flex>
+            </v-layout>
+            <v-divider></v-divider>
+            <v-pagination style="margin-top: 10px; margin-bottom: 10px" v-model="curr_page"
+                :length="xtotal_page"></v-pagination>
+        </v-card>
+
+        <!-- dialog detail jurnal -->
+        <template>
+            <v-dialog v-model="dialogformdetail" persistent width="70vw">
+                <v-card>
+                    <v-card-title class="headline grey lighten-2" primary-title>
+                        DETAIL JOURNAL PENERIMAAN BARANG
+                    </v-card-title>
+
+                    <v-card-text>
+                        <v-layout wrap>
+                            <v-flex xs12>
+                                <v-layout>
+                                    <v-flex xs6 pa-1 pr-3>
+                                        <div class="font-weight-bold">
+                                            <div>Company Name</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.M_BranchCompanyName }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xcompanyname" label="Company Name"></v-text-field> -->
+                                    </v-flex>
+                                    <v-flex xs6 pa-1 pl-3>
+                                        <div class="font-weight-bold">
+                                            <div>Journal</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.jurnalTitle }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xrefno" label="Ref No"></v-text-field> -->
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                            <v-flex xs12>
+                                <v-layout>
+                                    <v-flex xs6 pa-1 pr-3>
+                                        <div class="font-weight-bold">
+                                            <div>Regional</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.S_RegionalName }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xjournalno" label="Journal No"></v-text-field> -->
+                                    </v-flex>
+                                    <v-flex xs6 pa-1 pl-3>
+                                        <div class="font-weight-bold">
+                                            <div>Journal Date</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.jurnalDate }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xjournaldate" label="Journal Date"></v-text-field> -->
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                            <v-flex xs12>
+                                <v-layout>
+                                    <v-flex xs6 pa-1 pr-3>
+                                        <div class="font-weight-bold">
+                                            <div>Branch</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.M_BranchName }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xaccount" label="Account"></v-text-field> -->
+                                    </v-flex>
+                                    <v-flex xs6 pa-1 pl-3>
+                                        <div class="font-weight-bold">
+                                            <div>Journal Type</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.JurnalTypeName }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xjournaltype" label="Journal Type"></v-text-field> -->
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+
+                        <v-layout row wrap pt-3>
+                            <v-flex>
+                                <v-data-table :headers="headerdetails" :items="xjurnaldetails" hide-actions
+                                    class="elevation-1">
+                                    <template slot="items" slot-scope="props">
+                                        <td class="text-xs-center pa-2">
+                                            {{ props.item.coaAccountNo }}
+                                        </td>
+                                        <td class="text-xs-left pa-2">
+                                            {{ props.item.jurnalTxDescription }}
+                                        </td>
+                                        <td class="text-xs-left pa-2">
+                                            {{ props.item.jurnalAddOnValue }} <br />
+                                            {{ props.item.jurnalAddOnItem ?? "-" }}
+                                        </td>
+                                        <td class="text-xs-center pa-2">
+                                            {{ props.item.coaCurrencyCode }}
+                                        </td>
+                                        <td class="text-xs-right pa-2">
+                                            {{ formatCurrency(props.item.jurnalTxDebit) }}
+                                        </td>
+                                        <td class="text-xs-right pa-2">
+                                            {{ formatCurrency(props.item.jurnalTxCredit) }}
+                                        </td>
+                                    </template>
+
+                                    <template v-slot:footer>
+                                        <tr>
+                                            <td colspan="4" class="font-weight-bold pa-2">TOTAL</td>
+
+                                            <td class="text-xs-right pa-2 font-weight-bold">
+                                                {{ formatCurrency(xsummary.debit) }}
+                                            </td>
+                                            <td class="text-xs-right pa-2 font-weight-bold">
+                                                {{ formatCurrency(xsummary.credit) }}
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td colspan="5" class="font-weight-bold pa-2">
+                                                BALANCE
+                                            </td>
+                                            <td width="10%" class="text-xs-right pa-2 font-weight-bold">
+                                                {{ formatCurrency(xsummary.balance) }}
+                                            </td>
+                                        </tr>
+                                    </template>
+                                </v-data-table>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" flat @click="closeDialogFormDetail()">Tutup</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+            <v-layout row justify-center>
+                <v-dialog v-model="dialogperiode" persistent max-width="550px">
+                    <v-toolbar dark class="blue lighten-3 white--text">
+                        <v-toolbar-title class="white--text">PILIH PERIODE</v-toolbar-title>
+                        <v-spacer></v-spacer>
+                    </v-toolbar>
+                    <v-card>
+                        <v-card-text class="pt-4 pb-2">
+                            <v-layout wrap>
+                                <v-flex xs12>
+                                    <v-autocomplete v-model="selectedPeriode" :items="periodeList" outline hide-details
+                                        color="blue" label="Periode" item-text="periodeName" return-object>
+                                        <template slot="item" slot-scope="{ item }">
+                                            <template>
+                                                <v-list-tile-content>
+                                                    <v-list-tile-title v-text="item.periodeName"></v-list-tile-title>
+                                                    <v-list-tile-sub-title
+                                                        v-text="item.periode"></v-list-tile-sub-title>
+                                                </v-list-tile-content>
+                                            </template>
+                                        </template>
+                                    </v-autocomplete>
+                                </v-flex>
+                            </v-layout>
+                        </v-card-text>
+                        <v-card-actions class="pr-3">
+                            <v-spacer></v-spacer>
+                            <v-btn color="error" flat @click="closeDialogPeriode()">TUTUP</v-btn>
+                            <v-btn color="primary" @click="choosePeriode()">PILIH</v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+            </v-layout>
+        </template>
+
+        <template>
+            <v-layout row justify-center>
+                <v-dialog v-model="dialogerror" persistent max-width="650px">
+                    <v-toolbar dark class="red lighten-1 white--text">
+                        <v-toolbar-title class="white--text">ERROR INFORMATION</v-toolbar-title>
+                        <v-spacer></v-spacer>
+                    </v-toolbar>
+                    <v-card>
+                        <v-card-text class="pt-4 pb-2">
+                            <v-layout wrap>
+                                <v-flex xs12>
+                                    <div v-for="(error, index) in msgerrjurnallist" :key="index">
+                                        <p>
+                                            <strong>Error Type:</strong>
+                                            {{ error.JurnalErr_Msg.err_type }}
+                                        </p>
+                                        <p>
+                                            <strong>Message:</strong>
+                                            {{ error.JurnalErr_Msg.err_msg }}
+                                        </p>
+                                        <v-divider></v-divider>
+                                    </div>
+                                </v-flex>
+                            </v-layout>
+                        </v-card-text>
+                        <v-card-actions class="pr-3">
+                            <v-spacer></v-spacer>
+                            <v-btn color="error" flat @click="closeDialogError()">TUTUP</v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+            </v-layout>
+        </template>
+
+        <template>
+            <v-dialog v-model="dialogregenerate" max-width="30%">
+                <v-card>
+                    <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
+                        Peringatan !
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 xs12>
+                                                Yakin, mau konfirmasi regenerate jurnal
+                                                <span class="font-weight-bold">{{
+                                                    msgalertgenerate
+                                                    }}</span>
+                                                ?
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" flat @click="dialogregenerate = false"> Tutup </v-btn>
+                        <v-btn color="primary" @click="doRegenerateJurnal()"> Ya </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="700" :status="openprint" :urlprint="urlprint"
+            @close-dialog-print="openprint = false"></one-dialog-print>
+
+        <template>
+            <one-dialog-info :status="opendialoginfo" :msg="msginfo"
+                @close-dialog-info="opendialoginfo = false"></one-dialog-info>
+        </template>
+
+        <one-dialog-edit></one-dialog-edit>
+        <one-dialog-posting></one-dialog-posting>
+        <one-dialog-closing></one-dialog-closing>
+        <one-dialog-request></one-dialog-request>
+    </div>
+</template>
+
+<style scoped></style>
+
+<script>
+module.exports = {
+    components: {
+        "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
+        "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
+        "one-dialog-edit": httpVueLoader("./dialogEditJurnal.vue"),
+        "one-dialog-posting": httpVueLoader("./dialogPostingJurnal.vue"),
+        "one-dialog-closing": httpVueLoader("./dialogCloseJurnal.vue"),
+        "one-dialog-request": httpVueLoader("./dialogRequestEditJurnal.vue")
+    },
+    mounted() {
+        this.$store.dispatch("journal/getListingCOA");
+        this.$store.dispatch("journal/getUserApprovalLevel");
+        this.$store.dispatch("journal/getRegional");
+        this.$store
+            .dispatch("journal/getPeriode")
+            .then(() => {
+                // Jika login sebagai branch, set selected_branch langsung
+                if (this.$store.state.journal.user.loginLevel === "branch") {
+                    const userBranchCode = this.$store.state.journal.user.M_BranchCode;
+                    const branches = this.$store.state.journal.branchs || [];
+
+                    // Cari branch yang sesuai dan set ke selected_branch
+                    const selected = branches.find((b) => b.M_BranchCode === userBranchCode);
+                    if (selected) {
+                        this.selected_branch = selected;
+                    }
+                }
+
+                this.searchJurnal();
+            })
+            .catch((error) => {
+                console.error("Error fetching periode:", error);
+            });
+    },
+    data: () => ({
+        menufilterdate: false,
+        menufilterdateend: false,
+        date: new Date().toISOString().substr(0, 10),
+        search_city: "",
+        oldlabel: "",
+        selectedData: {},
+        debit: 0,
+        credit: 0,
+        btnUpload: false,
+        xperiodeid: "",
+        search_item_periode: "",
+        xyearandmonth: "",
+        xperiode: "",
+        formatreport: "pdf",
+        urlprint: "",
+        printtitle: "",
+        printwidth: "100%",
+        dialogregenerate: false,
+        msgalertgenerate: "",
+        xbranchCode: "",
+        xsearchDate: "",
+        xjurnalID: "",
+        xname: "",
+        headers: [
+            {
+                text: "JOURNAL NO",
+                align: "center",
+                sortable: false,
+                value: "action",
+                width: "15%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "DATE",
+                align: "center",
+                sortable: false,
+                value: "mr",
+                width: "10%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "JOURNAL",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "20%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "JOURNAL DESCRIPTION",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "25%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "JOURNAL TYPE",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "10%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "STATUS",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "10%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "ACTION",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "10%",
+                class: "pa-1 blue lighten-3 white--text"
+            }
+        ],
+        headerdetails: [
+            {
+                text: "AKUN",
+                align: "center",
+                sortable: false,
+                value: "action",
+                width: "20%",
+                class: "pa-2 pl-2 blue lighten-3 white--text"
+            },
+            {
+                text: "DESKRIPSI",
+                align: "center",
+                sortable: false,
+                value: "mr",
+                width: "20%",
+                class: "pa-2 blue lighten-3 white--text"
+            },
+            {
+                text: "INFO",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "20%",
+                class: "pa-2  blue lighten-3 white--text"
+            },
+            {
+                text: "CURRENCY",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "10%",
+                class: "pa-2  blue lighten-3 white--text"
+            },
+            {
+                text: "DEBIT",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "15%",
+                class: "pa-2 blue lighten-3 white--text"
+            },
+            {
+                text: "CREDIT",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "15%",
+                class: "pa-2 blue lighten-3 white--text"
+            }
+        ]
+    }),
+    computed: {
+        isLoading() {
+            return this.$store.state.journal.search_status === 1;
+        },
+        periodeList() {
+            return this.$store.state.journal.periodeList;
+        },
+        dialogperiode() {
+            return this.$store.state.journal.dialog_form_periode;
+        },
+        selectedPeriode: {
+            get() {
+                return this.$store.state.journal.selected_periode;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_periode", val);
+            }
+        },
+        dialogformdetail() {
+            return this.$store.state.journal.dialog_form_detail;
+        },
+        xjournals() {
+            return this.$store.state.journal.journals;
+        },
+        xsummary() {
+            return this.$store.state.journal.summary;
+        },
+        xdate: {
+            get() {
+                return this.$store.state.journal.xdate;
+            },
+            set(val) {
+                this.$store.commit("journal/update_xdate", val);
+            }
+        },
+        xdateend: {
+            get() {
+                return this.$store.state.journal.end_date;
+            },
+            set(val) {
+                this.$store.commit("journal/update_end_date", val);
+            }
+        },
+        filterComputedDateFormatted() {
+            return this.formatDate(this.xdate);
+        },
+        filterComputedDateFormattedEnd() {
+            return this.formatDate(this.xdateend);
+        },
+        curr_page: {
+            get() {
+                return this.$store.state.journal.current_page;
+            },
+            set(val) {
+                this.$store.commit("journal/update_current_page", val);
+                this.searchJurnal();
+            }
+        },
+        xtotal_page: {
+            get() {
+                return this.$store.state.journal.total_journal;
+            },
+            set(val) {
+                this.$store.commit("journal/update_total_journal", val);
+            }
+        },
+        selected_journal: {
+            get() {
+                return this.$store.state.journal.selected_journal;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_journal", val);
+            }
+        },
+        user() {
+            return this.$store.state.journal.user;
+        },
+        xjurnaldetails() {
+            return this.$store.state.journal.jurnaldetails;
+        },
+        openprint: {
+            get() {
+                return this.$store.state.journal.open_print;
+            },
+            set(val) {
+                this.$store.commit("journal/update_open_print", val);
+            }
+        },
+        dialogerror: {
+            get() {
+                return this.$store.state.journal.dialog_error_jurnal;
+            },
+            set(val) {
+                this.$store.commit("journal/update_dialog_error_jurnal", val);
+            }
+        },
+        msgerrjurnallist() {
+            return this.$store.state.journal.msgerrjurnallist;
+        },
+        snackbar: {
+            get() {
+                return this.$store.state.journal.alert_success;
+            },
+            set(val) {
+                this.$store.commit("journal/update_alert_success", val);
+            }
+        },
+        msgSnackbar() {
+            return this.$store.state.journal.msg_success;
+        },
+        dialog_error: {
+            get() {
+                return this.$store.state.journal.alert_error;
+            },
+            set(val) {
+                this.$store.commit("journal/update_alert_error", val);
+            }
+        },
+        msgError() {
+            return this.$store.state.journal.save_error_message;
+        },
+        regionals() {
+            return this.$store.state.journal.regionals;
+        },
+        selected_regional: {
+            get() {
+                return this.$store.state.journal.selected_regional;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_regional", val);
+            }
+        },
+        branchs() {
+            return this.$store.state.journal.branchs;
+        },
+        selected_branch: {
+            get() {
+                return this.$store.state.journal.selected_branch;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_branch", val);
+            }
+        },
+        xsearch: {
+            get() {
+                return this.$store.state.journal.xsearch;
+            },
+            set(val) {
+                this.$store.commit("journal/update_xsearch", val);
+            }
+        },
+        opendialoginfo: {
+            get() {
+                return this.$store.state.journal.open_dialog_info;
+            },
+            set(val) {
+                this.$store.commit("journal/update_open_dialog_info", val);
+            }
+        },
+        msginfo: {
+            get() {
+                return this.$store.state.journal.msg_info;
+            },
+            set(val) {
+                this.$store.commit("journal/update_msg_info", val);
+            }
+        },
+        user_level() {
+            return this.$store.state.journal.user_level;
+        }
+    },
+    methods: {
+        convertMoney(money) {
+            return one_money(money);
+        },
+        doPrint(val) {
+            // console.log(val)
+            this.printwidth = 1028;
+            this.printtitle = "";
+            let user = one_user();
+            tm = Date.now();
+            var rptname = "rpt_jurnal_pendapatan_001";
+            var formatrpt = this.formatreport;
+
+            this.urlprint =
+                "/birt/run?__report=report/one/accounting/" +
+                rptname +
+                ".rptdesign&__format=" +
+                formatrpt +
+                "&PID=" +
+                val.jurnalID +
+                "&username=" +
+                user.M_StaffName +
+                "&tm=" +
+                tm;
+            // console.log(this.urlprint)
+
+            this.$store.commit("journal/update_open_print", true);
+        },
+        doPrintXlsx(val) {
+            // console.log(val)
+            this.printwidth = 1028;
+            this.printtitle = "";
+            let user = one_user();
+            tm = Date.now();
+            var rptname = "rpt_jurnal_pendapatan_001";
+
+            this.urlprint =
+                "/birt/run?__report=report/one/accounting/" +
+                rptname +
+                ".rptdesign&__format=xlsx&PID=" +
+                val.jurnalID +
+                "&username=" +
+                user.M_StaffName +
+                "&tm=" +
+                tm;
+            // console.log(this.urlprint)
+
+            this.$store.commit("journal/update_open_print", true);
+        },
+        isSelected(p) {
+            return p.jurnalID == this.$store.state.journal.selected_journal.jurnalID;
+        },
+        selectMe(sc) {
+            this.$store.commit("journal/update_selected_journal", sc);
+        },
+        // thr_search: _.debounce(function () {
+        //   this.$store.dispatch("journal/search", {
+        //       current_page: this.$store.state.journal.current_page,
+        //       xdate: this.xdate,
+        //       periodeid: this.selectedPeriode.id,
+        //       branchid: this.$store.state.journal.user.M_BranchID,
+        //       regionalid: this.$store.state.journal.user.S_RegionalID,
+        //   })
+        // }, 1000),
+        thr_get_branch: _.debounce(function () {
+            this.$store
+                .dispatch("journal/getBranch")
+                .then(() => {
+                    this.searchJurnal();
+                })
+                .catch((error) => {
+                    console.error("Error fetching branch:", error);
+                });
+        }, 1000),
+        closeDialogPeriode() {
+            this.$store.commit("journal/update_dialog_form_periode", false);
+        },
+        openDialogPeriode() {
+            this.$store.commit("journal/update_dialog_form_periode", true);
+        },
+        choosePeriode() {
+            this.xperiodeid = this.$store.state.journal.selected_periode.id;
+            this.xyearandmonth = this.$store.state.journal.selected_periode.yearandmonth;
+            this.xperiode = this.$store.state.journal.selected_periode.periode;
+            this.xdate = this.selectedPeriode.periode_start
+
+            this.$store.commit("journal/update_dialog_form_periode", false);
+            this.searchJurnal();
+        },
+        closeDialogFormDetail() {
+            this.$store.commit("journal/update_dialog_form_detail", false);
+        },
+        vieDetail(val) {
+            this.$store.commit("journal/update_dialog_form_detail", true);
+            this.$store.commit("journal/update_jurnaldetails", val.detailtx);
+
+            let totalDebit = 0;
+            let totalKredit = 0;
+            for (let item = 0; item < val.detailtx.length; item++) {
+                const element = val.detailtx[item];
+                totalDebit += parseFloat(element.jurnalTxDebit || "0");
+                totalKredit += parseFloat(element.jurnalTxCredit || "0");
+            }
+
+            let totalBalance = totalDebit - totalKredit;
+            let summary = {
+                debit: totalDebit,
+                credit: totalKredit,
+                balance: totalBalance
+            };
+            this.$store.commit("journal/update_summary", summary);
+        },
+        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")}`;
+        },
+        isObjectEmpty(val) {
+            let obj = val;
+            return Object.keys(obj).length === 0 && obj.constructor === Object;
+        },
+        isPeriodeEmpty() {
+            return Object.keys(this.selectedPeriode).length === 0;
+        },
+        openDialogEdit(val) {
+            this.selectedData = val;
+            if (val.type == "DB") {
+                this.debit = val.value;
+                this.credit = 0;
+            }
+            if (val.type == "CR") {
+                this.credit = val.value;
+                this.debit = 0;
+            }
+            this.dialogEdit = true;
+        },
+        formatCurrency(val) {
+            // Format the price above to USD using the locale, style, and currency.
+            let price = parseFloat(val);
+            let USDollar = new Intl.NumberFormat("id-ID", {
+                style: "currency",
+                currency: "IDR"
+            });
+
+            // console.log(
+            //   `The formated version of ${price} is ${USDollar.format(price)}`
+            // );
+            return `${USDollar.format(price)}`;
+        },
+        resetInputFile() {
+            document.getElementById("csv_file").value = null;
+            this.dialogImport = false;
+        },
+        viewError(val) {
+            this.$store.commit("journal/update_dialog_error_jurnal", true);
+            this.$store.commit("journal/update_msgerrjurnallist", val.ErrMsg);
+        },
+        closeDialogError() {
+            this.$store.commit("journal/update_dialog_error_jurnal", false);
+        },
+        openGenerate(val) {
+            // console.log(val)
+            this.xbranchCode = val.jurnalM_BranchCode;
+            this.xsearchDate = this.deFormatedDate(val.jurnalDate);
+            this.xjurnalID = val.jurnalID;
+            this.xname = val.jurnalTitle;
+            this.msgalertgenerate = val.jurnalTitle;
+            this.dialogregenerate = true;
+        },
+        doRegenerateJurnal() {
+            this.dialogregenerate = false;
+
+            // console.log(prm)
+            let user = one_user();
+            console.log(user.M_BranchID);
+            if (user.M_BranchID === 0 || user.M_BranchID === "0") {
+                // generate regional
+                this.$store.dispatch("journal/insertSales", {
+                    branchCode: "ZZ",
+                    date: this.xsearchDate,
+                    jurnalno: this.selected_journal.jurnalNo
+                });
+            } else {
+                // generate cabang
+                this.$store.dispatch("journal/insertSales", {
+                    branchCode: this.xbranchCode,
+                    date: this.xsearchDate,
+                    jurnalno: this.selected_journal.jurnalNo
+                });
+            }
+        },
+        updateAlertSuccess(val) {
+            this.$store.commit("journal/update_alert_success", val);
+        },
+        searchJurnal() {
+            if (this.selected_regional === undefined && this.loginLevel != 'pusat') {
+                this.opendialoginfo = true;
+                this.msginfo = "Anda belum memilih regional";
+            } else {
+                this.$store.dispatch("journal/search", {
+                    current_page: this.$store.state.journal.current_page,
+                    xdate: this.xdate,
+                    periodeid: this.selectedPeriode?.id || "",
+                    search: this.xsearch || "",
+                    branchCode: this.selected_branch?.M_BranchCode || "",
+                    regionalId: this.selected_regional?.S_RegionalID || 0
+                });
+            }
+        },
+        editJurnal(val) {
+            if (val.jurnalEditStatus == "Y") {
+                let detail = JSON.parse(JSON.stringify(val.detailtx));
+                this.$store.commit("journal/update_journal_edit", detail);
+
+                let totalDebit = 0;
+                let totalKredit = 0;
+                for (let item = 0; item < val.detailtx.length; item++) {
+                    const element = val.detailtx[item];
+                    totalDebit += parseFloat(element.jurnalTxDebit || "0");
+                    totalKredit += parseFloat(element.jurnalTxCredit || "0");
+                }
+
+                let totalBalance = totalDebit - totalKredit;
+                let summary = {
+                    debit: totalDebit,
+                    credit: totalKredit,
+                    balance: totalBalance
+                };
+                this.$store.commit("journal/update_summary", summary);
+                this.$store.commit("journal/update_dialog_edit_journal", true);
+            } else {
+                this.$store.commit("journal/update_dialog_request_edit", true);
+            }
+        },
+        postingJurnal() {
+            this.$store.dispatch("journal/totalJurnalNotPostedPerPeriod");
+            this.$store.commit("journal/update_dialog_confirm_posting", true);
+        },
+        closeJurnal() {
+            this.$store.dispatch("journal/getDataJurnalNotClosedPerPeriod");
+            this.$store.commit("journal/update_dialog_close_jurnal", true);
+        }
+    },
+    watch: {
+        selected_regional(val, old) {
+            this.selected_regional = val;
+            this.thr_get_branch();
+        }
+    }
+};
+</script>
diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/index.php b/test/vuex/acc-one-jurnal-penerimaan-barang/index.php
new file mode 100644
index 0000000..a736dd6
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/index.php
@@ -0,0 +1,73 @@
+<!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>One</title>
+    <link rel="stylesheet" href="../../../libs/vendor/css/google-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 class="blue lighten-5">
+                <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+                    <v-layout row wrap>
+                        <v-flex xs12 class="center" fill-height pa-1>
+                            <!-- komponen -->
+                            <one-media-journal></one-media-journal>
+                        </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 -->
+    <?php
+    $ts = "?ts=" . Date("ymdhis");
+    ?>
+    <script type="module">
+        import {
+            store
+        } from './store.js<?php echo $ts ?>';
+        //for testing
+        // window.store = store;
+        new Vue({
+            store,
+            el: '#app',
+            components: {
+                'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+                'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                'one-media-journal': httpVueLoader('./components/oneMediaJournalList.vue')
+            }
+        })
+    </script>
+    <style>
+        [v-cloak] {
+            display: none
+        }
+
+        .left {}
+
+        .right {}
+    </style>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/modules/journal.js b/test/vuex/acc-one-jurnal-penerimaan-barang/modules/journal.js
new file mode 100644
index 0000000..394dbf1
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/modules/journal.js
@@ -0,0 +1,581 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/journal.js";
+
+export default {
+    namespaced: true,
+    state: {
+        search_status: 0,
+        current_page: 1,
+        x_search: "",
+        search_error_message: "",
+        last_id: -1,
+        coas: [],
+        total_coas: 0,
+        selected_coa: {},
+        dialog_form_coa: false,
+        act: "new",
+        save_status: 0,
+        save_error_message: "",
+        errors: [],
+        alert_success: false,
+        msg_success: "",
+        alert_error: false,
+        dialog_error: false,
+        open_print: false,
+
+        // ----
+        xdate: moment(new Date()).format("YYYY-MM-DD"),
+        end_date: moment(new Date()).format("YYYY-MM-DD"),
+        journals: [],
+        selected_journal: {},
+        summary: { debit: 0, credit: 0, balance: 0 },
+        dialog_form_detail: false,
+        periodeList: [],
+        selected_periode: {},
+        loading: false,
+        dialog_form_periode: false,
+        autocomplete_status: 0,
+        search_status: 0,
+        total_journal: 0,
+        user: one_user(),
+        jurnaldetails: [],
+        dialog_error_jurnal: false,
+        msgerrjurnallist: [],
+        regionals: [],
+        selected_regional: {},
+        branchs: [],
+        selected_branch: {},
+        xsearch: "",
+        open_dialog_info: false,
+        msg_info: "",
+
+        // --
+        dialog_edit_journal: false,
+        user_level: {},
+        list_coa: [],
+        journal_edit: [],
+        dialog_confirm_posting: false,
+        total_jurnal_not_posted: [],
+        dialog_request_edit: false,
+
+        // ---
+        dialog_close_jurnal: false,
+        jurnal_to_close: []
+    },
+    mutations: {
+        update_search_status(state, val) {
+            state.search_status = val;
+        },
+        update_current_page(state, val) {
+            state.current_page = val;
+        },
+        update_x_search(state, val) {
+            state.x_search = val;
+            state.current_page = 1;
+        },
+        update_search_error_message(state, val) {
+            state.search_error_message = val;
+        },
+        update_last_id(state, val) {
+            state.last_id = val;
+        },
+        update_coas(state, val) {
+            state.coas = val;
+        },
+        update_total_coas(state, val) {
+            state.total_coas = val;
+        },
+        update_selected_coa(state, val) {
+            state.selected_coa = val;
+        },
+        update_dialog_form_coa(state, val) {
+            state.dialog_form_coa = val;
+        },
+        update_act(state, val) {
+            state.act = val;
+        },
+        update_save_status(state, val) {
+            state.save_status = val;
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val;
+        },
+        update_errors(state, val) {
+            state.errors = val;
+        },
+        update_alert_success(state, val) {
+            state.alert_success = val;
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val;
+        },
+        update_alert_error(state, val) {
+            state.alert_error = val;
+        },
+        update_dialog_error(state, val) {
+            state.dialog_error = val;
+        },
+        update_open_print(state, value) {
+            state.open_print = value;
+        },
+
+        // ---
+        update_xdate(state, val) {
+            state.xdate = val;
+        },
+        update_end_date(state, val) {
+            state.end_date = val;
+        },
+        update_journals(state, val) {
+            state.journals = val;
+        },
+        update_selected_journal(state, val) {
+            state.selected_journal = val;
+        },
+        update_summary(state, val) {
+            state.summary = val;
+        },
+        update_dialog_form_detail(state, val) {
+            state.dialog_form_detail = val;
+        },
+        update_periodeList(state, val) {
+            state.periodeList = val;
+        },
+        update_selected_periode(state, val) {
+            state.selected_periode = val;
+        },
+        update_loading(state, val) {
+            state.loading = val;
+        },
+        update_dialog_form_periode(state, val) {
+            state.dialog_form_periode = val;
+        },
+        update_autocomplete_status(state, val) {
+            state.autocomplete_status = val;
+        },
+        update_search_status(state, val) {
+            state.search_status = val;
+        },
+        update_total_journal(state, val) {
+            state.total_journal = val;
+        },
+        update_user(state, val) {
+            state.user = val;
+        },
+        update_jurnaldetails(state, val) {
+            state.jurnaldetails = val;
+        },
+        update_dialog_error_jurnal(state, val) {
+            state.dialog_error_jurnal = val;
+        },
+        update_msgerrjurnallist(state, val) {
+            state.msgerrjurnallist = val;
+        },
+        update_regionals(state, val) {
+            state.regionals = val;
+        },
+        update_selected_regional(state, val) {
+            state.selected_regional = val;
+        },
+        update_branchs(state, val) {
+            state.branchs = val;
+        },
+        update_selected_branch(state, val) {
+            state.selected_branch = val;
+        },
+        update_xsearch(state, val) {
+            state.xsearch = val;
+            state.current_page = 1;
+        },
+        update_open_dialog_info(state, val) {
+            state.open_dialog_info = val;
+        },
+        update_msg_info(state, val) {
+            state.msg_info = val;
+        },
+
+        update_dialog_edit_journal(state, val) {
+            state.dialog_edit_journal = val;
+        },
+        update_user_level(state, val) {
+            state.user_level = val;
+        },
+        update_list_coa(state, val) {
+            state.list_coa = val;
+        },
+        update_journal_edit(state, val) {
+            state.journal_edit = val;
+        },
+        update_dialog_confirm_posting(state, val) {
+            state.dialog_confirm_posting = val;
+        },
+        update_total_jurnal_not_posted(state, val) {
+            state.total_jurnal_not_posted = val;
+        },
+        update_dialog_request_edit(state, val) {
+            state.dialog_request_edit = val;
+        },
+
+        update_dialog_close_jurnal(state, val) {
+            state.dialog_close_jurnal = val;
+        },
+        update_jurnal_to_close(state, val) {
+            state.jurnal_to_close = val;
+        }
+    },
+    actions: {
+        async getPeriode(context) {
+            context.commit("update_autocomplete_status", 1);
+            try {
+                let prm = {};
+                prm.token = one_token();
+                let resp = await api.getPeriode(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_autocomplete_status", 3);
+                } else {
+                    context.commit("update_autocomplete_status", 2);
+                    let data = resp.data;
+                    context.commit("update_periodeList", resp.data);
+
+                    // Ambil bulan dan tahun sekarang
+                    let now = new Date();
+                    let currentMonth = now.getMonth() + 1; // getMonth() dimulai dari 0 (Jan = 0)
+                    let currentYear = now.getFullYear().toString(); // Ambil tahun dalam bentuk string
+
+                    // Cari data dengan periodeMonth dan periodeYear yang cocok
+                    let selectedPeriode = data.find(
+                        (p) =>
+                            p.periodeMonth == currentMonth.toString() &&
+                            p.periodeYear == currentYear
+                    );
+
+                    // Jika tidak ditemukan, gunakan data pertama sebagai default
+                    if (!selectedPeriode) {
+                        selectedPeriode = data[0];
+                    }
+
+                    context.commit("update_selected_periode", selectedPeriode);
+                }
+            } catch (e) {
+                context.commit("update_autocomplete_status", 3);
+            }
+        },
+        async search(context, prm) {
+            context.commit("update_search_status", 1);
+            try {
+                let resp = await api.search(
+                    one_token(),
+                    prm.xdate,
+                    prm.periodeid,
+                    prm.current_page,
+                    prm.search,
+                    prm.branchCode,
+                    prm.regionalId
+                );
+                if (resp.status != "OK") {
+                    context.commit("update_search_status", 3);
+                    context.commit("update_search_error_message", resp.message);
+                } else {
+                    context.commit("update_search_status", 2);
+                    context.commit("update_search_error_message", "");
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    };
+
+                    context.commit("update_journals", data.records);
+                    context.commit("update_total_journal", data.total);
+                }
+            } catch (e) {
+                context.commit("update_search_status", 3);
+                context.commit("update_search_error_message", e.message);
+            }
+        },
+
+        async insertSales(context, prm) {
+            context.commit("update_save_status", 1);
+            try {
+                let branchCode = prm.branchCode;
+                let date = prm.date;
+                let jurnalno = prm.jurnalno;
+                let resp = await api.insertSales(branchCode, date, jurnalno);
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3);
+                    context.commit("update_save_error_message", resp.message);
+                    context.commit("update_alert_error", true);
+                } else {
+                    context.commit("update_save_status", 2);
+                    context.commit("update_save_error_message", resp.message);
+                    let data = {
+                        total: resp.data.total
+                    };
+
+                    context.commit("update_alert_success", true);
+                    var msg = resp.data.msg;
+                    context.commit("update_msg_success", msg);
+                    context.dispatch("search", {
+                        current_page: context.state.current_page,
+                        xdate: context.state.xdate,
+                        periodeid: context.state.selected_periode.id
+                    });
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3);
+                context.commit("update_save_error_message", e.message);
+                context.commit("update_alert_error", true);
+            }
+        },
+
+        async getRegional(context) {
+            context.commit("update_autocomplete_status", 1);
+            try {
+                let resp = await api.getRegional({
+                    token: one_token(),
+                    regionalId: context.state.user.S_RegionalID
+                });
+                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,
+                        selected: resp.data.selected
+                    };
+
+                    context.commit("update_regionals", data.records);
+                    context.commit("update_selected_regional", data.selected);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message);
+                context.commit("update_autocomplete_status", 3);
+            }
+        },
+
+        async getBranch(context) {
+            context.commit("update_autocomplete_status", 1);
+            try {
+                let resp = await api.getBranch({
+                    token: one_token(),
+                    regionalId: context.state.selected_regional.S_RegionalID,
+                    branchCode: context.state.user.M_BranchCode
+                });
+                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,
+                        selected: resp.data.selected
+                    };
+
+                    context.commit("update_branchs", data.records);
+                    context.commit("update_selected_branch", data.selected);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message);
+                context.commit("update_autocomplete_status", 3);
+            }
+        },
+
+        async postingJurnal(context, typeid) {
+            try {
+                let param = {
+                    token: one_token(),
+                    jurnalTypeID: typeid,
+                    periodeID: context.state.selected_periode.id
+                };
+                const resp = await api.changeJurnalToPosted(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_msg_success", resp.data);
+                    context.commit("update_alert_success", true);
+
+                    context.dispatch("search", {
+                        branchCode: context.state.selected_branch.M_BranchCode ?? "",
+                        regionalId: context.state.selected_regional.S_RegionalID,
+                        search: context.state.x_search,
+                        current_page: context.state.current_page,
+                        xdate: context.state.xdate,
+                        periodeid: context.state.selected_periode.id
+                    });
+
+                    context.commit("update_total_jurnal_not_posted", 0);
+                    context.commit("update_dialog_confirm_posting", false);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async getUserApprovalLevel(context) {
+            try {
+                let param = { token: one_token() };
+                const resp = await api.getUserApproveLevel(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_user_level", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async getListingCOA(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    keyword: ""
+                };
+                const resp = await api.getListingCOA(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_list_coa", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async requestEditJurnal(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    jurnalID: context.state.selected_journal.jurnalID,
+                    staffID: context.state.user.M_UserID,
+                    staffName: context.state.user.M_UserUsername
+                };
+                const resp = await api.requestEditJurnal(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_msg_success", resp.data);
+                    context.commit("update_alert_success", true);
+                    context.commit("update_dialog_request_edit", false);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async saveEditJurnal(context, newdetail) {
+            try {
+                let param = {
+                    token: one_token(),
+                    jurnalID: context.state.selected_journal.jurnalID,
+                    jurnalRequestEditID: context.state.selected_journal.JurnalRequestEditID,
+                    oldjurnaltx: context.state.selected_journal.detailtx,
+                    newjurnaltx: newdetail
+                };
+                const resp = await api.saveEditJurnal(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.dispatch("search", {
+                        branchCode: context.state.selected_branch.M_BranchCode ?? "",
+                        regionalId: context.state.selected_regional.S_RegionalID,
+                        search: context.state.x_search,
+                        current_page: context.state.current_page,
+                        xdate: context.state.xdate,
+                        periodeid: context.state.selected_periode.id
+                    });
+
+                    context.commit("update_dialog_edit_journal", false);
+                    context.commit("update_msg_success", resp.data);
+                    context.commit("update_alert_success", true);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async totalJurnalNotPostedPerPeriod(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    periodeID: context.state.selected_periode.id
+                };
+                const resp = await api.getTotalJurnalNotPostedPerPeriod(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_total_jurnal_not_posted", resp.data ?? []);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async getDataJurnalNotClosedPerPeriod(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    periodeID: context.state.selected_periode.id
+                };
+                const resp = await api.getDataJurnalNotClosedPerPeriod(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_jurnal_to_close", resp.data ?? []);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async closeJurnalPerPeriode(context, typeid) {
+            try {
+                let param = {
+                    token: one_token(),
+                    jurnalTypeID: typeid,
+                    periodeID: context.state.selected_periode.id
+                };
+                const resp = await api.closeJurnalPerPeriode(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_msg_success", resp.data);
+                    context.commit("update_alert_success", true);
+
+                    context.dispatch("search", {
+                        branchCode: context.state.selected_branch.M_BranchCode ?? "",
+                        regionalId: context.state.selected_regional.S_RegionalID,
+                        search: context.state.x_search,
+                        current_page: context.state.current_page,
+                        xdate: context.state.xdate,
+                        periodeid: context.state.selected_periode.id
+                    });
+
+                    context.commit("update_jurnal_to_close", []);
+                    context.commit("update_dialog_close_jurnal", false);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        }
+    }
+};
diff --git a/test/vuex/acc-one-jurnal-penerimaan-barang/store.js b/test/vuex/acc-one-jurnal-penerimaan-barang/store.js
new file mode 100644
index 0000000..292d3b1
--- /dev/null
+++ b/test/vuex/acc-one-jurnal-penerimaan-barang/store.js
@@ -0,0 +1,23 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import journal from "./modules/journal.js";
+import system from "../../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        journal: journal,
+        system:system
+    },
+    state: {
+
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    }
+});
\ No newline at end of file
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/api/journal.js b/test/vuex/acc-one-pendapatan-cash-v2/api/journal.js
new file mode 100644
index 0000000..b488809
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/api/journal.js
@@ -0,0 +1,276 @@
+const URL = "/one-api/mockup/masterdata/accounting/";
+
+export async function getPeriode(prm) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/getPeriode", 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(
+    token,
+    xdate,
+    periodeid,
+    current_page,
+    search,
+    branchCode,
+    regionalId
+) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/search", {
+            token: token,
+            xdate: xdate,
+            periodeid: periodeid,
+            current_page: current_page,
+            search: search,
+            branchCode: branchCode,
+            regionalId: regionalId
+        });
+        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 insertSales(branchCode, date, jurnalno) {
+    try {
+        var resp = await axios.get(
+            URL + `mediajurnalauto/insertSales/${branchCode}/${date}?isregen=1&jurnalno=${jurnalno}`
+        );
+        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 getRegional(prm) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/getRegional", 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 getBranch(prm) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/getBranch", 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 getUserApproveLevel(params) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/getUserApproveLevel", 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 getListingCOA(params) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/getListingCOA", 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 requestEditJurnal(params) {
+    try {
+        const resp = await axios.post(URL + "JournalVerifEdit/requestEditJurnal", params);
+        if (resp.status !== 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+
+        const data = resp.data;
+        return data;
+    } catch (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        };
+    }
+}
+
+export async function saveEditJurnal(params) {
+    try {
+        var resp = await axios.post(URL + "JournalVerifEdit/saveEditJurnal", 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 changeJurnalToPosted(params) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/changeJurnalToPosted", 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 getTotalJurnalNotPostedPerPeriod(params) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/getTotalJurnalNotPostedPerPeriod", 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 closeJurnalPerPeriode(params) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/closeJurnalPerPeriode", 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 getDataJurnalNotClosedPerPeriod(params) {
+    try {
+        var resp = await axios.post(URL + "journalcashv2/getDataJurnalNotClosedPerPeriod", 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
+        };
+    }
+}
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/components/dialogCloseJurnal.vue b/test/vuex/acc-one-pendapatan-cash-v2/components/dialogCloseJurnal.vue
new file mode 100644
index 0000000..417ffbb
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/components/dialogCloseJurnal.vue
@@ -0,0 +1,76 @@
+<template>
+    <v-dialog v-model="dialog_close_jurnal" persistent width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                TUTUP SEMUA JURNAL PADA PERIODE {{ selected_periode.periodeName }}
+            </v-card-title>
+            <v-card-text>
+                <div v-for="item in jurnal_to_close" :key="item.jurnalIsPosted">
+                    <p v-if="item.jurnalIsPosted == 'N'">
+                        Jumlah jurnal yang tidak dapat ditutup: <strong>{{ item.total_jurnal }}</strong>
+                    </p>
+                    <p v-else>
+                        Jumlah jurnal yang dapat ditutup: <strong>{{ item.total_jurnal }}</strong>
+                    </p>
+                </div>
+                <p>
+                    Apakah anda yakin akan menutup semua jurnal yang dibuat di
+                    <strong> {{ area_jurnal }} </strong> dalam rentang waktu <br>
+                    <strong>{{ selected_periode.periode }}</strong> <br>
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" outline flat @click="dialog_close_jurnal = false">Batal</v-btn>
+                <v-btn color="primary" dark @click="closeJurnal()">Ya</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        selected_periode() {
+            return this.$store.state.journal.selected_periode
+        },
+        area_jurnal() {
+            const user = this.$store.state.journal.user
+            if (user.M_BranchID == '0') {
+                return `Regional ${user.S_RegionalName}`
+            } else {
+                return `Cabang ${user.M_BranchName}, Regional ${user.S_RegionalName}`
+            }
+        },
+        jurnal_to_close() {
+            return this.$store.state.journal.jurnal_to_close
+        },
+        dialog_close_jurnal: {
+            get() {
+                return this.$store.state.journal.dialog_close_jurnal
+            },
+            set(val) {
+                this.$store.commit("journal/update_dialog_close_jurnal", val)
+            }
+        }
+    },
+    methods: {
+        closeJurnal() {
+            var jurnal = this.jurnal_to_close.find(item => item.jurnalIsPosted === 'Y')
+            if (jurnal && Number(jurnal.total_jurnal) > 0) {
+                this.$store.dispatch("journal/closeJurnalPerPeriode", { typeid: jurnal.JurnalTypeID })
+                return;
+            }
+            this.$store.commit("journal/update_open_dialog_info", true);
+            this.$store.commit("journal/update_msg_info",
+                "Tidak ada jurnal yang dapat ditutup"
+            );
+        }
+    },
+}
+</script>
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/components/dialogEditJurnal.vue b/test/vuex/acc-one-pendapatan-cash-v2/components/dialogEditJurnal.vue
new file mode 100644
index 0000000..328bc8d
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/components/dialogEditJurnal.vue
@@ -0,0 +1,223 @@
+<template>
+    <v-dialog v-model="dialog_edit_jurnal" persistetnt width="70vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                EDIT JOURNAL PENDAPATAN CASH
+            </v-card-title>
+            <v-card-text>
+                <v-layout row wrap>
+                    <v-flex xs6 pa-1 pr-3>
+                        <div class="font-weight-bold">Company Name</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.M_BranchCompanyName  }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pl-3>
+                        <div class="font-weight-bold">Journal</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.jurnalTitle  }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pr-3>
+                        <div class="font-weight-bold">Regional</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.S_RegionalName  }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pl-3>
+                        <div class="font-weight-bold">Journal Date</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.jurnalDate  }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pr-3>
+                        <div class="font-weight-bold">Branch</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.M_BranchName }}
+                        </div>
+                    </v-flex>
+                    <v-flex xs6 pa-1 pl-3>
+                        <div class="font-weight-bold">Journal Type</div>
+                        <div class="pa-2 grey lighten-2">
+                            {{ selected_journal.JurnalTypeName }}
+                        </div>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row wrap mt-3>
+                    <v-flex xs12>
+                        <v-data-table
+                            :headers="headerdetails" :items="journal_edit"
+                            hide-actions class="elevation-1"
+                        >
+                            <template slot="items" slot-scope="props">
+                                <tr>
+                                    <td class="text-xs-center pa-2">{{ props.item.coaAccountNo }}</td>
+                                    <td class="text-xs-left pa-2">
+                                        <v-autocomplete
+                                            label="Account" hide-details outline
+                                            v-model="props.item.coaAccountNo"
+                                            :items="list_coa" item-text="coaDescription"
+                                            item-value="coaAccountNo"
+                                        ></v-autocomplete>
+                                    </td>
+                                    <td class="text-xs-left pa-2">{{ props.item.jurnalAddOnValue }}</td>
+                                    <td class="text-xs-center pa-2">{{ props.item.coaCurrencyCode }}</td>
+                                    <td class="text-xs-right pa-2">{{ formatCurrency(props.item.jurnalTxDebit) }}</td>
+                                    <td class="text-xs-right pa-2">{{ formatCurrency(props.item.jurnalTxCredit) }}</td>
+                                </tr>
+                            </template>
+                            <template v-slot:footer>
+                                <tr>
+                                    <td colspan="4" class="font-weight-bold pa-2">TOTAL</td>
+                                    <td class="text-xs-right pa-2 font-weight-bold">
+                                        {{ formatCurrency(xsummary.debit) }}
+                                    </td>
+                                    <td class="text-xs-right pa-2 font-weight-bold">
+                                        {{ formatCurrency(xsummary.credit) }}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td colspan="5" class="font-weight-bold pa-2">BALANCE</td>
+                                    <td width="10%" class="text-xs-right pa-2 font-weight-bold">
+                                        {{ formatCurrency(xsummary.balance) }}
+                                    </td>
+                                </tr>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" outline flat @click="closeEditDialog()">Batal</v-btn>
+                <v-btn color="primary" dark @click="simpanEditDialog()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            headerdetails: [
+                {
+                    text: "AKUN", align: "center", sortable: false,
+                    value: "action", width: "20%", class: "pa-2 pl-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "DESKRIPSI", align: "center", sortable: false,
+                    value: "mr", width: "25%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "INFO", align: "center", sortable: false,
+                    value: "lab", width: "15%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "CURRENCY", align: "center", sortable: false,
+                    value: "lab", width: "10%", class: "pa-2  blue lighten-3 white--text",
+                },
+                {
+                    text: "DEBIT", align: "center", sortable: false,
+                    value: "lab", width: "15%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "CREDIT", align: "center", sortable: false,
+                    value: "lab", width: "15%", class: "pa-2 blue lighten-3 white--text",
+                }
+            ]
+        }
+    },
+    computed: {
+        dialog_edit_jurnal: {
+            get() {
+                return this.$store.state.journal.dialog_edit_journal;
+            },
+            set(val) {1
+                this.$store.commit("journal/update_dialog_edit_journal", val);
+            }
+        },
+        selected_journal: {
+            get() {
+                return this.$store.state.journal.selected_journal;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_journal", val);
+            },
+        },
+        journal_edit: {
+            get() {
+                return this.$store.state.journal.journal_edit
+            },
+            set(val) {
+                this.$store.commit("journal/update_journal_edit", val);
+            }
+        },
+        selected_periode() {
+            return this.$store.state.journal.selected_periode
+        },
+        xsummary() {
+          return this.$store.state.journal.summary
+        },
+        list_coa() {
+            return this.$store.state.journal.list_coa
+        }
+    },
+    methods: {
+        formatCurrency(val) {
+            const price = parseFloat(val);
+            const IDR = new Intl.NumberFormat("id-ID", {
+                style: "currency",
+                currency: "IDR"
+            });
+            return `${IDR.format(price)}`;
+        },
+        simpanEditDialog() {
+            const originaldetail = this.selected_journal.detailtx;
+            const editnewdetails = this.journal_edit;
+            const listcoa = this.list_coa;
+
+            const originalMap = new Map();
+            for (const item of originaldetail) {
+                originalMap.set(item.jurnalTxID, item.coaAccountNo);
+            }
+
+            const coaMap = new Map();
+            for (const coaItem of listcoa) {
+                coaMap.set(coaItem.coaAccountNo, coaItem);
+            }
+
+            const editeddetail = editnewdetails.flatMap(detail => {
+                const originalAcc = originalMap.get(detail.jurnalTxID);
+                if (originalAcc !== detail.coaAccountNo) {
+                    const accMatch = coaMap.get(detail.coaAccountNo);
+                    if (accMatch) {
+                        return [{
+                            jurnalID: detail.jurnalTxJurnalID,
+                            jurnalTxID: detail.jurnalTxID,
+                            coaID: accMatch.coaID,
+                            coaDescription: accMatch.coaDescription,
+                            coaAccountNo: accMatch.coaAccountNo
+                        }]
+                    } else {
+                        return [];
+                    }
+                } else {
+                    return [];
+                }
+            })
+
+            this.$store.dispatch("journal/saveEditJurnal", editeddetail);
+        },
+        closeEditDialog() {
+            this.selected_journal = {};
+            this.journal_edit = [];
+            this.dialog_edit_jurnal = false;
+        }
+    },
+    watch: {
+
+    },
+}
+</script>
\ No newline at end of file
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/components/dialogPostingJurnal.vue b/test/vuex/acc-one-pendapatan-cash-v2/components/dialogPostingJurnal.vue
new file mode 100644
index 0000000..0ae425c
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/components/dialogPostingJurnal.vue
@@ -0,0 +1,68 @@
+<template>
+    <v-dialog v-model="dialog_confirm_posting" persistetnt width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                POSTING SEMUA JURNAL PADA PERIODE {{ selected_periode.periodeName }}
+            </v-card-title>
+            <v-card-text>
+                <div v-for="item in total_jurnal_not_posted" :key="item.jurnalEditStatus">
+                    <p v-if="item.jurnalEditStatus == 'N'">
+                        Jumlah jurnal yang dapat diposting: <strong>{{ item.total_jurnal }}</strong>
+                    </p>
+                    <p v-if="item.jurnalEditStatus == 'Y'">
+                        Jumlah jurnal yang tidak dapat diposting: <strong>{{ item.total_jurnal }}</strong>
+                        (belum diverifikasi setelah edit)
+                    </p>
+                </div>
+                <p>
+                    Apakah anda yakin akan melakukan posting semua jurnal yang dibuat dalam rentang waktu
+                    <strong>{{ selected_periode.periode }}</strong> ?
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" outline flat @click="dialog_confirm_posting = false">Batal</v-btn>
+                <v-btn color="primary" dark @click="postingJurnal()">Ya</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            
+        }
+    },
+    computed: {
+        selected_periode() {
+            return this.$store.state.journal.selected_periode
+        },
+        total_jurnal_not_posted() {
+            return this.$store.state.journal.total_jurnal_not_posted
+        },
+        dialog_confirm_posting: {
+            get() {
+                return this.$store.state.journal.dialog_confirm_posting;
+            },
+            set(val) {1
+                this.$store.commit("journal/update_dialog_confirm_posting", val);
+            }
+        },
+    },
+    methods: {
+        postingJurnal() {
+            var jurnal = this.total_jurnal_not_posted.find(jrnl => jrnl.jurnalEditStatus === 'N')
+            if (jurnal && Number(jurnal.total_jurnal) > 0) {
+                this.$store.dispatch("journal/postingJurnal", { typeid: jurnal.JurnalTypeID });
+                return;
+            }
+            this.$store.commit("journal/update_open_dialog_info", true);
+            this.$store.commit("journal/update_msg_info",
+                "semua jurnal para periode ini sudah terposting"
+            );
+        }
+    },
+}
+</script>
\ No newline at end of file
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/components/dialogRequestEditJurnal.vue b/test/vuex/acc-one-pendapatan-cash-v2/components/dialogRequestEditJurnal.vue
new file mode 100644
index 0000000..92715a8
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/components/dialogRequestEditJurnal.vue
@@ -0,0 +1,58 @@
+<template>
+    <v-dialog v-model="dialog_request_edit" persistent width="40vw">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                REQUEST EDIT JURNAL {{ selected_journal.jurnalNo }}
+            </v-card-title>
+            <v-card-text>
+                <p v-if="selected_journal.JurnalRequestEditStatusEdit == 'approved'">
+                    Jurnal ini sudah pernah diedit sebelumnya oleh:
+                    {{ selected_journal.JurnalRequestEditStaffName }} <br>
+                    Apakah anda yakin akan mengajukan permintaan untuk melakukan perubahan lagi? <br>
+                    Nomor: <strong>{{ selected_journal.jurnalNo }}</strong> <br>
+                    Judul: <strong>{{ selected_journal.jurnalTitle }}</strong> <br>
+                    Deskripsi: {{ selected_journal.jurnalDescription }} <br>
+                </p>
+                <p v-else>
+                    Apakah anda yakin akan mengajukan permintaan untuk melakukan perubahan jurnal: <br>
+                    Nomor: <strong>{{ selected_journal.jurnalNo }}</strong> <br>
+                    Judul: <strong>{{ selected_journal.jurnalTitle }}</strong> <br>
+                    Deskripsi: {{ selected_journal.jurnalDescription }} <br>
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" outline @click="dialog_request_edit = false">Batal</v-btn>
+                <v-btn color="primary" dark @click="requestEdit()">Ya</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        dialog_request_edit: {
+            get() {
+                return this.$store.state.journal.dialog_request_edit
+            },
+            set(val) {
+                this.$store.commit("journal/update_dialog_request_edit", val)
+            }
+        },
+        selected_journal() {
+            return this.$store.state.journal.selected_journal
+        }
+    },
+    methods: {
+        requestEdit() {
+            this.$store.dispatch("journal/requestEditJurnal");
+        }
+    },
+}
+</script>
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/components/oneMediaJournalList.vue b/test/vuex/acc-one-pendapatan-cash-v2/components/oneMediaJournalList.vue
new file mode 100644
index 0000000..e8509f1
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/components/oneMediaJournalList.vue
@@ -0,0 +1,1099 @@
+<template>
+    <div style="width: 100%" class="">
+        <!-- SNACKBAR -->
+        <v-snackbar v-model="snackbar" color="success" :timeout="5000" :multi-line="false" :vertical="false"
+            :top="true">
+            {{ msgSnackbar }}
+            <v-btn flat @click="updateAlertSuccess(false)"> Tutup </v-btn>
+        </v-snackbar>
+
+        <!-- ERROR DIALOG -->
+        <v-dialog v-model="dialog_error" max-width="500px">
+            <v-card>
+                <v-card-title>
+                    <span>ERROR !</span>
+                    <v-spacer></v-spacer>
+                </v-card-title>
+                <v-divider></v-divider>
+                <div class="ma-3 red--text">{{ msgError }}</div>
+                <v-divider></v-divider>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="primary" flat @click="dialog_error = false">Tutup</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+        <!-- END ERROR DIALOG -->
+
+        <v-toolbar dark class="blue lighten-3 white--text">
+            <v-toolbar-title class="white--text">JOURNAL PENDAPATAN CASH</v-toolbar-title>
+            <v-spacer></v-spacer>
+        </v-toolbar>
+
+        <!-- filter -->
+        <v-card class="pa-2">
+            <v-layout row align-center>
+                <v-flex grow>
+                    <span>
+                        <v-chip outline color="red">
+                            {{ this.$store.state.journal.selected_periode.periode }}
+                        </v-chip>
+                    </span>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-menu v-model="menufilterdate" :close-on-content-click="false" :nudge-right="40" lazy
+                        transition="scale-transition" offset-y full-width max-width="290px" min-width="290px">
+                        <template v-slot:activator="{ on }">
+                            <v-text-field v-model="filterComputedDateFormatted" label="Tanggal" outline hide-details
+                                readonly v-on="on"
+                                @blur="date = deFormatedDate(filterComputedDateFormatted)"></v-text-field>
+                        </template>
+                        <v-date-picker no-title v-model="xdate" @input="menufilterdate = false"></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-autocomplete :items="regionals" v-model="selected_regional" return-object
+                        item-text="S_RegionalName" label="Regional" outline hide-details></v-autocomplete>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-autocomplete :disabled="_.isEmpty(this.selected_regional) ||
+                        this.selected_regional === undefined
+                        " :items="branchs" v-model="selected_branch" return-object item-text="M_BranchName"
+                        label="Cabang" outline hide-details></v-autocomplete>
+                </v-flex>
+                <v-flex xs2 pl-2>
+                    <v-text-field v-model="xsearch" label="Cari No." outline hide-details></v-text-field>
+                </v-flex>
+                <v-flex shrink pl-2>
+                    <v-btn dark color="primary" style="min-width: 50px; height: 50px; margin: 0"
+                        @click="searchJurnal()">
+                        <v-icon>search</v-icon>
+                    </v-btn>
+                </v-flex>
+                <v-flex shrink pl-2>
+                    <v-tooltip bottom>
+                        <template v-slot:activator="{ on }">
+                            <v-btn dark v-on="on" color="info" @click="postingJurnal()"
+                                style="min-width: 50px; height: 50px; margin: 0">
+                                <v-icon>book</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>Posting Jurnal</span>
+                    </v-tooltip>
+                </v-flex>
+                <v-flex shrink pl-2>
+                    <v-tooltip bottom>
+                        <template v-slot:activator="{ on }">
+                            <v-btn dark v-on="on" color="warning" @click="closeJurnal()"
+                                style="min-width: 50px; height: 50px; margin: 0">
+                                <v-icon>collections_bookmark</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>Tutup Jurnal</span>
+                    </v-tooltip>
+                </v-flex>
+                <v-flex text-xs-right>
+                    <v-btn color="orange" class="white--text" @click="openDialogPeriode()">
+                        Accounting Period
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+        <!-- listing table -->
+        <v-card class="pa-2 mt-2">
+            <v-layout row wrap class="scroll-container" style="max-height: 600px; overflow: auto">
+                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                    <v-data-table :headers="headers" :items="xjournals" :loading="isLoading" hide-actions
+                        class="elevation-1">
+                        <template v-slot:items="props">
+                            <tr>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.jurnalNo }}
+                                    <span v-if="props.item.ErrStatus === 'Y'">
+                                        <v-tooltip bottom>
+                                            <template v-slot:activator="{ on, attrs }">
+                                                <v-icon v-bind="attrs" v-on="on" class="ml-1" color="red" small
+                                                    @click="viewError(props.item)">error</v-icon>
+                                            </template>
+                                            <span>error information</span>
+                                        </v-tooltip>
+                                    </span>
+                                    <!-- <span v-if="props.item.ErrStatus === 'Y'"><v-icon small color="red" @click="viewError(props.item)">error</v-icon></span> -->
+                                </td>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.jurnalDate }}
+                                </td>
+                                <td class="text-xs-left pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.jurnalTitle }}
+                                </td>
+                                <td class="text-xs-left pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.jurnalDescription }}
+                                </td>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    {{ props.item.JurnalTypeName }}
+                                </td>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    <span v-if="props.item.jurnalIsPosted == 'Y'">
+                                        <v-chip color="indigo" class="ml-0" outline small>
+                                            posted
+                                        </v-chip>
+                                    </span>
+                                    <span v-else="props.item.jurnalIsPosted == 'N'">
+                                        <v-chip color="red" class="ml-0" outline small>
+                                            not posted
+                                        </v-chip>
+                                    </span>
+                                    <span v-if="props.item.jurnalIsClosed == 'Y'">
+                                        <v-chip color="warning" class="ml-1" outline small>
+                                            closed
+                                        </v-chip>
+                                    </span>
+                                </td>
+                                <td class="text-xs-center pa-2"
+                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
+                                    @click="selectMe(props.item)">
+                                    <v-tooltip v-if="
+                                        (user_level.DivisionID == '6' ||
+                                            user_level.DivisionKodeSurat == 'KEU') &&
+                                        props.item.jurnalIsPosted == 'N'
+                                    " bottom class="pr-1">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn dark small v-on="on" color="warning" @click="editJurnal(props.item)"
+                                                style="min-width: 30px; margin: 0">
+                                                <v-icon v-bind="attrs" small>edit</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Edit</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom class="pr-1">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn dark small v-on="on" color="info" @click="vieDetail(props.item)"
+                                                style="min-width: 30px; margin: 0">
+                                                <v-icon v-bind="attrs" small>visibility</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>Detail</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom class="pr-1">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn small dark v-on="on" color="red" @click="doPrint(props.item)"
+                                                style="min-width: 30px; margin: 0">
+                                                <v-icon v-bind="attrs" small>picture_as_pdf</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>RPT PDF</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom class="pr-1">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn dark small v-on="on" color="green" @click="doPrintXlsx(props.item)"
+                                                style="min-width: 30px; margin: 0">
+                                                <v-icon v-bind="attrs" small>receipt</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>RPT Excel</span>
+                                    </v-tooltip>
+                                    <span v-if="props.item.jurnalIsPosted == 'N'">
+                                        <v-tooltip bottom>
+                                            <template v-slot:activator="{ on, attrs }">
+                                                <v-btn dark small v-on="on" color="black"
+                                                    @click="openGenerate(props.item)"
+                                                    style="min-width: 30px; margin: 0">
+                                                    <v-icon v-bind="attrs" small>replay</v-icon>
+                                                </v-btn>
+                                            </template>
+                                            <span>Regenerate</span>
+                                        </v-tooltip>
+                                    </span>
+                                </td>
+                            </tr>
+                        </template>
+                    </v-data-table>
+                </v-flex>
+            </v-layout>
+            <v-divider></v-divider>
+            <v-pagination style="margin-top: 10px; margin-bottom: 10px" v-model="curr_page"
+                :length="xtotal_page"></v-pagination>
+        </v-card>
+
+        <!-- dialog detail jurnal -->
+        <template>
+            <v-dialog v-model="dialogformdetail" persistent width="80vw">
+                <v-card>
+                    <v-card-title class="headline grey lighten-2" primary-title>
+                        DETAIL JOURNAL PENDAPATAN CASH
+                    </v-card-title>
+                    <v-card-text>
+                        <v-layout wrap>
+                            <v-flex xs12>
+                                <v-layout>
+                                    <v-flex xs6 pa-1 pr-3>
+                                        <div class="font-weight-bold">
+                                            <div>Company Name</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.M_BranchCompanyName }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xcompanyname" label="Company Name"></v-text-field> -->
+                                    </v-flex>
+                                    <v-flex xs6 pa-1 pl-3>
+                                        <div class="font-weight-bold">
+                                            <div>Journal</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.jurnalTitle }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xrefno" label="Ref No"></v-text-field> -->
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                            <v-flex xs12>
+                                <v-layout>
+                                    <v-flex xs6 pa-1 pr-3>
+                                        <div class="font-weight-bold">
+                                            <div>Regional</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.S_RegionalName }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xjournalno" label="Journal No"></v-text-field> -->
+                                    </v-flex>
+                                    <v-flex xs6 pa-1 pl-3>
+                                        <div class="font-weight-bold">
+                                            <div>Journal Date</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.jurnalDate }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xjournaldate" label="Journal Date"></v-text-field> -->
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                            <v-flex xs12>
+                                <v-layout>
+                                    <v-flex xs6 pa-1 pr-3>
+                                        <div class="font-weight-bold">
+                                            <div>Branch</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.M_BranchName }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xaccount" label="Account"></v-text-field> -->
+                                    </v-flex>
+                                    <v-flex xs6 pa-1 pl-3>
+                                        <div class="font-weight-bold">
+                                            <div>Journal Type</div>
+                                        </div>
+                                        <div class="pa-2 grey lighten-2">
+                                            <div>{{ selected_journal.JurnalTypeName }}</div>
+                                        </div>
+                                        <!-- <v-text-field :value="xjournaltype" label="Journal Type"></v-text-field> -->
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+
+                        <v-layout row wrap pt-3>
+                            <v-flex>
+                                <v-data-table :headers="headerdetails" :items="xjurnaldetails" hide-actions
+                                    class="elevation-1">
+                                    <template slot="items" slot-scope="props">
+                                        <td class="text-xs-center pa-2">
+                                            {{ props.item.coaAccountNo }}
+                                        </td>
+                                        <td class="text-xs-left pa-2">
+                                            {{ props.item.jurnalTxDescription }}
+                                        </td>
+                                        <td class="text-xs-left pa-2">
+                                            {{ props.item.jurnalAddOnValue }} <br />
+                                            {{ props.item.jurnalAddOnItem ?? "-" }}
+                                        </td>
+                                        <td class="text-xs-center pa-2">
+                                            {{ props.item.coaCurrencyCode }}
+                                        </td>
+                                        <td class="text-xs-right pa-2">
+                                            {{ formatCurrency(props.item.jurnalTxDebit) }}
+                                        </td>
+                                        <td class="text-xs-right pa-2">
+                                            {{ formatCurrency(props.item.jurnalTxCredit) }}
+                                        </td>
+                                    </template>
+
+                                    <template v-slot:footer>
+                                        <tr>
+                                            <td colspan="4" class="font-weight-bold pa-2">TOTAL</td>
+
+                                            <td class="text-xs-right pa-2 font-weight-bold">
+                                                {{ formatCurrency(xsummary.debit) }}
+                                            </td>
+                                            <td class="text-xs-right pa-2 font-weight-bold">
+                                                {{ formatCurrency(xsummary.credit) }}
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td colspan="5" class="font-weight-bold pa-2">
+                                                BALANCE
+                                            </td>
+                                            <td width="10%" class="text-xs-right pa-2 font-weight-bold">
+                                                {{ formatCurrency(xsummary.balance) }}
+                                            </td>
+                                        </tr>
+                                    </template>
+                                </v-data-table>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" flat @click="closeDialogFormDetail()">Tutup</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+            <v-layout row justify-center>
+                <v-dialog v-model="dialogperiode" persistent max-width="550px">
+                    <v-toolbar dark class="blue lighten-3 white--text">
+                        <v-toolbar-title class="white--text">PILIH PERIODE</v-toolbar-title>
+                        <v-spacer></v-spacer>
+                    </v-toolbar>
+                    <v-card>
+                        <v-card-text class="pt-4 pb-2">
+                            <v-layout wrap>
+                                <v-flex xs12>
+                                    <v-autocomplete v-model="selectedPeriode" :items="periodeList" outline hide-details
+                                        color="blue" label="Periode" item-text="periodeName" return-object>
+                                        <template slot="item" slot-scope="{ item }">
+                                            <template>
+                                                <v-list-tile-content>
+                                                    <v-list-tile-title v-text="item.periodeName"></v-list-tile-title>
+                                                    <v-list-tile-sub-title
+                                                        v-text="item.periode"></v-list-tile-sub-title>
+                                                </v-list-tile-content>
+                                            </template>
+                                        </template>
+                                    </v-autocomplete>
+                                </v-flex>
+                            </v-layout>
+                        </v-card-text>
+                        <v-card-actions class="pr-3">
+                            <v-spacer></v-spacer>
+                            <v-btn color="error" flat @click="closeDialogPeriode()">TUTUP</v-btn>
+                            <v-btn color="primary" @click="choosePeriode()">PILIH</v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+            </v-layout>
+        </template>
+
+        <template>
+            <v-layout row justify-center>
+                <v-dialog v-model="dialogerror" persistent max-width="650px">
+                    <v-toolbar dark class="red lighten-1 white--text">
+                        <v-toolbar-title class="white--text">ERROR INFORMATION</v-toolbar-title>
+                        <v-spacer></v-spacer>
+                    </v-toolbar>
+                    <v-card>
+                        <v-card-text class="pt-4 pb-2">
+                            <v-layout wrap>
+                                <v-flex xs12>
+                                    <div v-for="(error, index) in msgerrjurnallist" :key="index">
+                                        <p>
+                                            <strong>Error Type:</strong>
+                                            {{ error.JurnalErr_Msg.err_type }}
+                                        </p>
+                                        <p>
+                                            <strong>Message:</strong>
+                                            {{ error.JurnalErr_Msg.err_msg }}
+                                        </p>
+                                        <v-divider></v-divider>
+                                    </div>
+                                </v-flex>
+                            </v-layout>
+                        </v-card-text>
+                        <v-card-actions class="pr-3">
+                            <v-spacer></v-spacer>
+                            <v-btn color="error" flat @click="closeDialogError()">TUTUP</v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+            </v-layout>
+        </template>
+
+        <template>
+            <v-dialog v-model="dialogregenerate" max-width="30%">
+                <v-card>
+                    <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
+                        Peringatan !
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 xs12>
+                                                Yakin, mau konfirmasi regenerate jurnal
+                                                <span class="font-weight-bold">{{
+                                                    msgalertgenerate
+                                                    }}</span>
+                                                ?
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" flat @click="dialogregenerate = false"> Tutup </v-btn>
+                        <v-btn color="primary" @click="doRegenerateJurnal()"> Ya </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="700" :status="openprint" :urlprint="urlprint"
+            @close-dialog-print="openprint = false"></one-dialog-print>
+
+        <template>
+            <one-dialog-info :status="opendialoginfo" :msg="msginfo"
+                @close-dialog-info="opendialoginfo = false"></one-dialog-info>
+        </template>
+
+        <one-dialog-edit></one-dialog-edit>
+        <one-dialog-posting></one-dialog-posting>
+        <one-dialog-closing></one-dialog-closing>
+        <one-dialog-request></one-dialog-request>
+    </div>
+</template>
+
+<style scoped></style>
+
+<script>
+module.exports = {
+    components: {
+        "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
+        "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
+        "one-dialog-edit": httpVueLoader("./dialogEditJurnal.vue"),
+        "one-dialog-posting": httpVueLoader("./dialogPostingJurnal.vue"),
+        "one-dialog-closing": httpVueLoader("./dialogCloseJurnal.vue"),
+        "one-dialog-request": httpVueLoader("./dialogRequestEditJurnal.vue")
+    },
+    mounted() {
+        this.$store.dispatch("journal/getListingCOA");
+        this.$store.dispatch("journal/getUserApprovalLevel");
+        this.$store.dispatch("journal/getRegional");
+        this.$store
+            .dispatch("journal/getPeriode")
+            .then(() => {
+                // Setelah `selected_periode` diupdate dengan data pertama
+                // this.$store.dispatch("journal/search", {
+                //   current_page: this.$store.state.journal.current_page,
+                //   xdate: this.$store.state.journal.xdate,
+                //   periodeid: this.$store.state.journal.selected_periode.id
+                // });
+
+                if (this.$store.state.journal.user.loginlevel === 'branch') {
+                    const userBranchCode = this.$store.state.journal.user.M_BranchCode;
+                    const branches = this.$store.state.journal.branchs || [];
+
+                    // Cari branch yang sesuai dan set ke selected_branch
+                    const selected = branches.find((b) => b.M_BranchCode === userBranchCode);
+                    if (selected) {
+                        this.selected_branch = selected;
+                    }
+                }
+
+                this.searchJurnal();
+            })
+            .catch((error) => {
+                console.error("Error fetching periode:", error);
+            });
+    },
+    data: () => ({
+        menufilterdate: false,
+        menufilterdateend: false,
+        date: new Date().toISOString().substr(0, 10),
+        search_city: "",
+        oldlabel: "",
+        selectedData: {},
+        debit: 0,
+        credit: 0,
+        btnUpload: false,
+        xperiodeid: "",
+        search_item_periode: "",
+        xyearandmonth: "",
+        xperiode: "",
+        formatreport: "pdf",
+        urlprint: "",
+        printtitle: "",
+        printwidth: "100%",
+        dialogregenerate: false,
+        msgalertgenerate: "",
+        xbranchCode: "",
+        xsearchDate: "",
+        xjurnalID: "",
+        xname: "",
+        headers: [
+            {
+                text: "JOURNAL NO",
+                align: "center",
+                sortable: false,
+                value: "action",
+                width: "15%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "DATE",
+                align: "center",
+                sortable: false,
+                value: "mr",
+                width: "10%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "JOURNAL",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "20%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "JOURNAL DESCRIPTION",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "25%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "JOURNAL TYPE",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "10%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "STATUS",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "10%",
+                class: "pa-1 blue lighten-3 white--text"
+            },
+            {
+                text: "ACTION",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "10%",
+                class: "pa-1 blue lighten-3 white--text"
+            }
+        ],
+        headerdetails: [
+            {
+                text: "AKUN",
+                align: "center",
+                sortable: false,
+                value: "action",
+                width: "20%",
+                class: "pa-2 pl-2 blue lighten-3 white--text"
+            },
+            {
+                text: "DESKRIPSI",
+                align: "center",
+                sortable: false,
+                value: "mr",
+                width: "20%",
+                class: "pa-2 blue lighten-3 white--text"
+            },
+            {
+                text: "INFO",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "20%",
+                class: "pa-2  blue lighten-3 white--text"
+            },
+            {
+                text: "CURRENCY",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "10%",
+                class: "pa-2  blue lighten-3 white--text"
+            },
+            {
+                text: "DEBIT",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "15%",
+                class: "pa-2 blue lighten-3 white--text"
+            },
+            {
+                text: "CREDIT",
+                align: "center",
+                sortable: false,
+                value: "lab",
+                width: "15%",
+                class: "pa-2 blue lighten-3 white--text"
+            }
+        ]
+    }),
+    computed: {
+        isLoading() {
+            return this.$store.state.journal.search_status === 1;
+        },
+        periodeList() {
+            return this.$store.state.journal.periodeList;
+        },
+        dialogperiode() {
+            return this.$store.state.journal.dialog_form_periode;
+        },
+        selectedPeriode: {
+            get() {
+                return this.$store.state.journal.selected_periode;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_periode", val);
+            }
+        },
+        dialogformdetail() {
+            return this.$store.state.journal.dialog_form_detail;
+        },
+        xjournals() {
+            return this.$store.state.journal.journals;
+        },
+        xsummary() {
+            return this.$store.state.journal.summary;
+        },
+        xdate: {
+            get() {
+                return this.$store.state.journal.xdate;
+            },
+            set(val) {
+                this.$store.commit("journal/update_xdate", val);
+            }
+        },
+        xdateend: {
+            get() {
+                return this.$store.state.journal.end_date;
+            },
+            set(val) {
+                this.$store.commit("journal/update_end_date", val);
+            }
+        },
+        filterComputedDateFormatted() {
+            return this.formatDate(this.xdate);
+        },
+        filterComputedDateFormattedEnd() {
+            return this.formatDate(this.xdateend);
+        },
+        curr_page: {
+            get() {
+                return this.$store.state.journal.current_page;
+            },
+            set(val) {
+                this.$store.commit("journal/update_current_page", val);
+                // this.$store.dispatch("journal/search", {
+                //   current_page: this.$store.state.journal.current_page,
+                //   xdate: this.$store.state.journal.xdate,
+                //   periodeid: this.$store.state.journal.selected_periode.id
+                // });
+                this.searchJurnal();
+            }
+        },
+        xtotal_page: {
+            get() {
+                return this.$store.state.journal.total_journal;
+            },
+            set(val) {
+                this.$store.commit("journal/update_total_journal", val);
+            }
+        },
+        selected_journal: {
+            get() {
+                return this.$store.state.journal.selected_journal;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_journal", val);
+            }
+        },
+        user() {
+            return this.$store.state.journal.user;
+        },
+        xjurnaldetails() {
+            return this.$store.state.journal.jurnaldetails;
+        },
+        openprint: {
+            get() {
+                return this.$store.state.journal.open_print;
+            },
+            set(val) {
+                this.$store.commit("journal/update_open_print", val);
+            }
+        },
+        dialogerror: {
+            get() {
+                return this.$store.state.journal.dialog_error_jurnal;
+            },
+            set(val) {
+                this.$store.commit("journal/update_dialog_error_jurnal", val);
+            }
+        },
+        msgerrjurnallist() {
+            return this.$store.state.journal.msgerrjurnallist;
+        },
+        snackbar: {
+            get() {
+                return this.$store.state.journal.alert_success;
+            },
+            set(val) {
+                this.$store.commit("journal/update_alert_success", val);
+            }
+        },
+        msgSnackbar() {
+            return this.$store.state.journal.msg_success;
+        },
+        dialog_error: {
+            get() {
+                return this.$store.state.journal.alert_error;
+            },
+            set(val) {
+                this.$store.commit("journal/update_alert_error", val);
+            }
+        },
+        msgError() {
+            return this.$store.state.journal.save_error_message;
+        },
+        regionals() {
+            return this.$store.state.journal.regionals;
+        },
+        selected_regional: {
+            get() {
+                return this.$store.state.journal.selected_regional;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_regional", val);
+            }
+        },
+        branchs() {
+            return this.$store.state.journal.branchs;
+        },
+        selected_branch: {
+            get() {
+                return this.$store.state.journal.selected_branch;
+            },
+            set(val) {
+                this.$store.commit("journal/update_selected_branch", val);
+            }
+        },
+        opendialoginfo: {
+            get() {
+                return this.$store.state.journal.open_dialog_info;
+            },
+            set(val) {
+                this.$store.commit("journal/update_open_dialog_info", val);
+            }
+        },
+        msginfo: {
+            get() {
+                return this.$store.state.journal.msg_info;
+            },
+            set(val) {
+                this.$store.commit("journal/update_msg_info", val);
+            }
+        },
+        xsearch: {
+            get() {
+                return this.$store.state.journal.xsearch;
+            },
+            set(val) {
+                this.$store.commit("journal/update_xsearch", val);
+            }
+        },
+        user_level() {
+            return this.$store.state.journal.user_level;
+        }
+    },
+    methods: {
+        convertMoney(money) {
+            return one_money(money);
+        },
+        doPrint(val) {
+            // console.log(val)
+            this.printwidth = 1028;
+            this.printtitle = "";
+            let user = one_user();
+            tm = Date.now();
+            var rptname = "rpt_jurnal_pendapatan_001";
+            var formatrpt = this.formatreport;
+
+            this.urlprint =
+                "/birt/run?__report=report/one/accounting/" +
+                rptname +
+                ".rptdesign&__format=" +
+                formatrpt +
+                "&PID=" +
+                val.jurnalID +
+                "&username=" +
+                user.M_StaffName +
+                "&tm=" +
+                tm;
+            // console.log(this.urlprint)
+
+            this.$store.commit("journal/update_open_print", true);
+        },
+        doPrintXlsx(val) {
+            // console.log(val)
+            this.printwidth = 1028;
+            this.printtitle = "";
+            let user = one_user();
+            tm = Date.now();
+            var rptname = "rpt_jurnal_pendapatan_001";
+
+            this.urlprint =
+                "/birt/run?__report=report/one/accounting/" +
+                rptname +
+                ".rptdesign&__format=xlsx&PID=" +
+                val.jurnalID +
+                "&username=" +
+                user.M_StaffName +
+                "&tm=" +
+                tm;
+            // console.log(this.urlprint)
+
+            this.$store.commit("journal/update_open_print", true);
+        },
+        isSelected(p) {
+            return p.jurnalID == this.$store.state.journal.selected_journal.jurnalID;
+        },
+        selectMe(sc) {
+            this.$store.commit("journal/update_selected_journal", sc);
+        },
+        // thr_search: _.debounce(function () {
+        //   this.$store.dispatch("journal/search", {
+        //       current_page: this.$store.state.journal.current_page,
+        //       xdate: this.xdate,
+        //       periodeid: this.selectedPeriode.id
+        //   })
+        // }, 1000),
+        thr_get_branch: _.debounce(function () {
+            this.$store.dispatch("journal/getBranch");
+        }, 1000),
+        closeDialogPeriode() {
+            this.$store.commit("journal/update_dialog_form_periode", false);
+        },
+        openDialogPeriode() {
+            this.$store.commit("journal/update_dialog_form_periode", true);
+        },
+        choosePeriode() {
+            this.xperiodeid = this.$store.state.journal.selected_periode.id;
+            this.xyearandmonth = this.$store.state.journal.selected_periode.yearandmonth;
+            this.xperiode = this.$store.state.journal.selected_periode.periode;
+            // console.log(this.xperiodeid)
+            this.$store.commit("journal/update_dialog_form_periode", false);
+            // this.$store.dispatch("journal/search", {
+            //     current_page: this.$store.state.journal.current_page,
+            //     xdate: this.xdate,
+            //     periodeid: this.selectedPeriode.id
+            // })
+            this.searchJurnal();
+        },
+        closeDialogFormDetail() {
+            this.$store.commit("journal/update_dialog_form_detail", false);
+        },
+        vieDetail(val) {
+            this.$store.commit("journal/update_dialog_form_detail", true);
+            this.$store.commit("journal/update_jurnaldetails", val.detailtx);
+
+            let totalDebit = 0;
+            let totalKredit = 0;
+            for (let item = 0; item < val.detailtx.length; item++) {
+                const element = val.detailtx[item];
+                totalDebit += parseFloat(element.jurnalTxDebit || "0");
+                totalKredit += parseFloat(element.jurnalTxCredit || "0");
+            }
+
+            let totalBalance = totalDebit - totalKredit;
+            let summary = {
+                debit: totalDebit,
+                credit: totalKredit,
+                balance: totalBalance
+            };
+            this.$store.commit("journal/update_summary", summary);
+        },
+        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")}`;
+        },
+        isObjectEmpty(val) {
+            let obj = val;
+            return Object.keys(obj).length === 0 && obj.constructor === Object;
+        },
+        isPeriodeEmpty() {
+            return Object.keys(this.selectedPeriode).length === 0;
+        },
+        openDialogEdit(val) {
+            this.selectedData = val;
+            if (val.type == "DB") {
+                this.debit = val.value;
+                this.credit = 0;
+            }
+            if (val.type == "CR") {
+                this.credit = val.value;
+                this.debit = 0;
+            }
+            this.dialogEdit = true;
+        },
+        formatCurrency(val) {
+            // Format the price above to USD using the locale, style, and currency.
+            let price = parseFloat(val);
+            let USDollar = new Intl.NumberFormat("id-ID", {
+                style: "currency",
+                currency: "IDR"
+            });
+
+            // console.log(
+            //   `The formated version of ${price} is ${USDollar.format(price)}`
+            // );
+            return `${USDollar.format(price)}`;
+        },
+        resetInputFile() {
+            document.getElementById("csv_file").value = null;
+            this.dialogImport = false;
+        },
+        viewError(val) {
+            this.$store.commit("journal/update_dialog_error_jurnal", true);
+            this.$store.commit("journal/update_msgerrjurnallist", val.ErrMsg);
+        },
+        closeDialogError() {
+            this.$store.commit("journal/update_dialog_error_jurnal", false);
+        },
+        openGenerate(val) {
+            // console.log(val)
+            this.xbranchCode = val.jurnalM_BranchCode;
+            this.xsearchDate = this.deFormatedDate(val.jurnalDate);
+            this.xjurnalID = val.jurnalID;
+            this.xname = val.jurnalTitle;
+            this.msgalertgenerate = val.jurnalTitle;
+            this.dialogregenerate = true;
+        },
+        doRegenerateJurnal() {
+            this.dialogregenerate = false;
+
+            // console.log(prm)
+            let user = one_user();
+            console.log(user.M_BranchID);
+            if (user.M_BranchID === 0 || user.M_BranchID === "0") {
+                // generate regional
+                this.$store.dispatch("journal/insertSales", {
+                    branchCode: "ZZ",
+                    date: this.xsearchDate,
+                    jurnalno: this.selected_journal.jurnalNo
+                });
+            } else {
+                // generate cabang
+                this.$store.dispatch("journal/insertSales", {
+                    branchCode: this.xbranchCode,
+                    date: this.xsearchDate,
+                    jurnalno: this.selected_journal.jurnalNo
+                });
+            }
+        },
+        updateAlertSuccess(val) {
+            this.$store.commit("journal/update_alert_success", val);
+        },
+        searchJurnal() {
+            if (this.selected_regional === undefined) {
+                this.opendialoginfo = true;
+                this.msginfo = "Anda belum memilih regional";
+            } else {
+                this.$store.dispatch("journal/search", {
+                    current_page: this.$store.state.journal.current_page,
+                    xdate: this.xdate,
+                    periodeid: this.selectedPeriode.id,
+                    search: this.xsearch,
+                    branchCode:
+                        this.selected_branch === undefined ? "" : this.selected_branch.M_BranchCode,
+                    regionalId: this.selected_regional.S_RegionalID
+                });
+            }
+        },
+        editJurnal(val) {
+            if (val.jurnalEditStatus == "Y") {
+                let detail = JSON.parse(JSON.stringify(val.detailtx));
+                this.$store.commit("journal/update_journal_edit", detail);
+
+                let totalDebit = 0;
+                let totalKredit = 0;
+                for (let item = 0; item < val.detailtx.length; item++) {
+                    const element = val.detailtx[item];
+                    totalDebit += parseFloat(element.jurnalTxDebit || "0");
+                    totalKredit += parseFloat(element.jurnalTxCredit || "0");
+                }
+
+                let totalBalance = totalDebit - totalKredit;
+                let summary = {
+                    debit: totalDebit,
+                    credit: totalKredit,
+                    balance: totalBalance
+                };
+                this.$store.commit("journal/update_summary", summary);
+                this.$store.commit("journal/update_dialog_edit_journal", true);
+            } else {
+                this.$store.commit("journal/update_dialog_request_edit", true);
+            }
+        },
+        postingJurnal() {
+            this.$store.dispatch("journal/totalJurnalNotPostedPerPeriod");
+            this.$store.commit("journal/update_dialog_confirm_posting", true);
+        },
+        closeJurnal() {
+            this.$store.dispatch("journal/getDataJurnalNotClosedPerPeriod");
+            this.$store.commit("journal/update_dialog_close_jurnal", true);
+        }
+    },
+    watch: {
+        // xdate(val, old) {
+        //     this.xdate = val
+        //     this.thr_search()
+        // },
+        // xdateend(val, old) {
+        //     this.xdateend = val
+        //     this.thr_search()
+        // },
+        selected_regional(val, old) {
+            this.selected_regional = val;
+            this.thr_get_branch();
+        }
+    }
+};
+</script>
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/index.php b/test/vuex/acc-one-pendapatan-cash-v2/index.php
new file mode 100644
index 0000000..a736dd6
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/index.php
@@ -0,0 +1,73 @@
+<!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>One</title>
+    <link rel="stylesheet" href="../../../libs/vendor/css/google-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 class="blue lighten-5">
+                <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+                    <v-layout row wrap>
+                        <v-flex xs12 class="center" fill-height pa-1>
+                            <!-- komponen -->
+                            <one-media-journal></one-media-journal>
+                        </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 -->
+    <?php
+    $ts = "?ts=" . Date("ymdhis");
+    ?>
+    <script type="module">
+        import {
+            store
+        } from './store.js<?php echo $ts ?>';
+        //for testing
+        // window.store = store;
+        new Vue({
+            store,
+            el: '#app',
+            components: {
+                'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+                'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                'one-media-journal': httpVueLoader('./components/oneMediaJournalList.vue')
+            }
+        })
+    </script>
+    <style>
+        [v-cloak] {
+            display: none
+        }
+
+        .left {}
+
+        .right {}
+    </style>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/modules/journal.js b/test/vuex/acc-one-pendapatan-cash-v2/modules/journal.js
new file mode 100644
index 0000000..0ff2734
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/modules/journal.js
@@ -0,0 +1,584 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/journal.js";
+
+export default {
+    namespaced: true,
+    state: {
+        search_status: 0,
+        current_page: 1,
+        x_search: "",
+        search_error_message: "",
+        last_id: -1,
+        coas: [],
+        total_coas: 0,
+        selected_coa: {},
+        dialog_form_coa: false,
+        act: "new",
+        save_status: 0,
+        save_error_message: "",
+        errors: [],
+        alert_success: false,
+        msg_success: "",
+        alert_error: false,
+        dialog_error: false,
+        open_print: false,
+
+        // ----
+        xdate: moment(new Date()).format("YYYY-MM-DD"),
+        end_date: moment(new Date()).format("YYYY-MM-DD"),
+        journals: [],
+        selected_journal: {},
+        summary: { debit: 0, credit: 0, balance: 0 },
+        dialog_form_detail: false,
+        periodeList: [],
+        selected_periode: {},
+        loading: false,
+        dialog_form_periode: false,
+        autocomplete_status: 0,
+        search_status: 0,
+        total_journal: 0,
+        user: one_user(),
+        jurnaldetails: [],
+        dialog_error_jurnal: false,
+        msgerrjurnallist: [],
+        regionals: [],
+        selected_regional: {},
+        branchs: [],
+        selected_branch: {},
+        open_dialog_info: false,
+        msg_info: "",
+        xsearch: "",
+
+        // --
+        dialog_edit_journal: false,
+        user_level: {},
+        list_coa: [],
+        journal_edit: [],
+        dialog_confirm_posting: false,
+        total_jurnal_not_posted: [],
+        dialog_request_edit: false,
+
+        // ---
+        dialog_close_jurnal: false,
+        jurnal_to_close: []
+    },
+    mutations: {
+        update_search_status(state, val) {
+            state.search_status = val;
+        },
+        update_current_page(state, val) {
+            state.current_page = val;
+        },
+        update_x_search(state, val) {
+            state.x_search = val;
+            state.current_page = 1;
+        },
+        update_search_error_message(state, val) {
+            state.search_error_message = val;
+        },
+        update_last_id(state, val) {
+            state.last_id = val;
+        },
+        update_coas(state, val) {
+            state.coas = val;
+        },
+        update_total_coas(state, val) {
+            state.total_coas = val;
+        },
+        update_selected_coa(state, val) {
+            state.selected_coa = val;
+        },
+        update_dialog_form_coa(state, val) {
+            state.dialog_form_coa = val;
+        },
+        update_act(state, val) {
+            state.act = val;
+        },
+        update_save_status(state, val) {
+            state.save_status = val;
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val;
+        },
+        update_errors(state, val) {
+            state.errors = val;
+        },
+        update_alert_success(state, val) {
+            state.alert_success = val;
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val;
+        },
+        update_alert_error(state, val) {
+            state.alert_error = val;
+        },
+        update_dialog_error(state, val) {
+            state.dialog_error = val;
+        },
+        update_open_print(state, value) {
+            state.open_print = value;
+        },
+
+        // ---
+        update_xdate(state, val) {
+            state.xdate = val;
+        },
+        update_end_date(state, val) {
+            state.end_date = val;
+        },
+        update_journals(state, val) {
+            state.journals = val;
+        },
+        update_selected_journal(state, val) {
+            state.selected_journal = val;
+        },
+        update_summary(state, val) {
+            state.summary = val;
+        },
+        update_dialog_form_detail(state, val) {
+            state.dialog_form_detail = val;
+        },
+        update_periodeList(state, val) {
+            state.periodeList = val;
+        },
+        update_selected_periode(state, val) {
+            state.selected_periode = val;
+        },
+        update_loading(state, val) {
+            state.loading = val;
+        },
+        update_dialog_form_periode(state, val) {
+            state.dialog_form_periode = val;
+        },
+        update_autocomplete_status(state, val) {
+            state.autocomplete_status = val;
+        },
+        update_search_status(state, val) {
+            state.search_status = val;
+        },
+        update_total_journal(state, val) {
+            state.total_journal = val;
+        },
+        update_user(state, val) {
+            state.user = val;
+        },
+        update_jurnaldetails(state, val) {
+            state.jurnaldetails = val;
+        },
+        update_dialog_error_jurnal(state, val) {
+            state.dialog_error_jurnal = val;
+        },
+        update_msgerrjurnallist(state, val) {
+            state.msgerrjurnallist = val;
+        },
+        update_regionals(state, val) {
+            state.regionals = val;
+        },
+        update_selected_regional(state, val) {
+            state.selected_regional = val;
+        },
+        update_branchs(state, val) {
+            state.branchs = val;
+        },
+        update_selected_branch(state, val) {
+            state.selected_branch = val;
+        },
+        update_open_dialog_info(state, val) {
+            state.open_dialog_info = val;
+        },
+        update_msg_info(state, val) {
+            state.msg_info = val;
+        },
+        update_xsearch(state, val) {
+            state.xsearch = val;
+            state.current_page = 1;
+        },
+
+        update_dialog_edit_journal(state, val) {
+            state.dialog_edit_journal = val;
+        },
+        update_user_level(state, val) {
+            state.user_level = val;
+        },
+        update_list_coa(state, val) {
+            state.list_coa = val;
+        },
+        update_journal_edit(state, val) {
+            state.journal_edit = val;
+        },
+        update_dialog_confirm_posting(state, val) {
+            state.dialog_confirm_posting = val;
+        },
+        update_total_jurnal_not_posted(state, val) {
+            state.total_jurnal_not_posted = val;
+        },
+        update_dialog_request_edit(state, val) {
+            state.dialog_request_edit = val;
+        },
+
+        update_dialog_close_jurnal(state, val) {
+            state.dialog_close_jurnal = val;
+        },
+        update_jurnal_to_close(state, val) {
+            state.jurnal_to_close = val;
+        }
+    },
+    actions: {
+        async getPeriode(context) {
+            context.commit("update_autocomplete_status", 1);
+            try {
+                let prm = {};
+                prm.token = one_token();
+                let resp = await api.getPeriode(prm);
+                if (resp.status != "OK") {
+                    context.commit("update_autocomplete_status", 3);
+                } else {
+                    context.commit("update_autocomplete_status", 2);
+                    let data = resp.data;
+                    context.commit("update_periodeList", resp.data);
+
+                    // Ambil bulan dan tahun sekarang
+                    let now = new Date();
+                    let currentMonth = now.getMonth() + 1; // getMonth() dimulai dari 0 (Jan = 0)
+                    let currentYear = now.getFullYear().toString(); // Ambil tahun dalam bentuk string
+
+                    // Cari data dengan periodeMonth dan periodeYear yang cocok
+                    let selectedPeriode = data.find(
+                        (p) =>
+                            p.periodeMonth == currentMonth.toString() &&
+                            p.periodeYear == currentYear
+                    );
+
+                    // Jika tidak ditemukan, gunakan data pertama sebagai default
+                    if (!selectedPeriode) {
+                        selectedPeriode = data[0];
+                    }
+
+                    context.commit("update_selected_periode", selectedPeriode);
+                }
+            } catch (e) {
+                context.commit("update_autocomplete_status", 3);
+            }
+        },
+        async search(context, prm) {
+            context.commit("update_search_status", 1);
+            try {
+                let resp = await api.search(
+                    one_token(),
+                    prm.xdate,
+                    prm.periodeid,
+                    prm.current_page,
+                    prm.search,
+                    prm.branchCode,
+                    prm.regionalId
+                );
+                if (resp.status != "OK") {
+                    context.commit("update_search_status", 3);
+                    context.commit("update_search_error_message", resp.message);
+                } else {
+                    context.commit("update_search_status", 2);
+                    context.commit("update_search_error_message", "");
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    };
+
+                    context.commit("update_journals", data.records);
+                    context.commit("update_total_journal", data.total);
+                }
+            } catch (e) {
+                context.commit("update_search_status", 3);
+                context.commit("update_search_error_message", e.message);
+            }
+        },
+
+        async insertSales(context, prm) {
+            context.commit("update_save_status", 1);
+            try {
+                let branchCode = prm.branchCode;
+                let date = prm.date;
+                let jurnalno = prm.jurnalno;
+                let resp = await api.insertSales(branchCode, date, jurnalno);
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3);
+                    context.commit("update_save_error_message", resp.message);
+                    context.commit("update_alert_error", true);
+                } else {
+                    context.commit("update_save_status", 2);
+                    context.commit("update_save_error_message", resp.message);
+                    let data = {
+                        total: resp.data.total
+                    };
+
+                    context.commit("update_alert_success", true);
+                    var msg = resp.data.msg;
+                    context.commit("update_msg_success", msg);
+                    context.dispatch("search", {
+                        branchCode: prm.branchCode,
+                        regionalId: context.state.selected_regional.S_RegionalID,
+                        search: context.state.x_search,
+                        current_page: context.state.current_page,
+                        xdate: context.state.xdate,
+                        periodeid: context.state.selected_periode.id
+                    });
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3);
+                context.commit("update_save_error_message", e.message);
+                context.commit("update_alert_error", true);
+            }
+        },
+
+        async getRegional(context) {
+            context.commit("update_autocomplete_status", 1);
+            try {
+                let resp = await api.getRegional({
+                    token: one_token(),
+                    regionalId: context.state.user.S_RegionalID
+                });
+                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,
+                        selected: resp.data.selected
+                    };
+
+                    context.commit("update_regionals", data.records);
+                    context.commit("update_selected_regional", data.selected);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message);
+                context.commit("update_autocomplete_status", 3);
+            }
+        },
+
+        async getBranch(context) {
+            context.commit("update_autocomplete_status", 1);
+            try {
+                let resp = await api.getBranch({
+                    token: one_token(),
+                    regionalId: context.state.selected_regional.S_RegionalID,
+                    branchCode: context.state.user.M_BranchCode
+                });
+                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,
+                        selected: resp.data.selected
+                    };
+
+                    context.commit("update_branchs", data.records);
+                    context.commit("update_selected_branch", data.selected);
+                }
+            } catch (e) {
+                context.commit("update_search_error_message", e.message);
+                context.commit("update_autocomplete_status", 3);
+            }
+        },
+
+        async postingJurnal(context, typeid) {
+            try {
+                let param = {
+                    token: one_token(),
+                    jurnalTypeID: typeid,
+                    periodeID: context.state.selected_periode.id
+                };
+                const resp = await api.changeJurnalToPosted(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_msg_success", resp.data);
+                    context.commit("update_alert_success", true);
+
+                    context.dispatch("search", {
+                        branchCode: context.state.selected_branch.M_BranchCode ?? "",
+                        regionalId: context.state.selected_regional.S_RegionalID,
+                        search: context.state.x_search,
+                        current_page: context.state.current_page,
+                        xdate: context.state.xdate,
+                        periodeid: context.state.selected_periode.id
+                    });
+
+                    context.commit("update_total_jurnal_not_posted", []);
+                    context.commit("update_dialog_confirm_posting", false);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async getUserApprovalLevel(context) {
+            try {
+                let param = { token: one_token() };
+                const resp = await api.getUserApproveLevel(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_user_level", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async getListingCOA(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    keyword: ""
+                };
+                const resp = await api.getListingCOA(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_list_coa", resp.data);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async requestEditJurnal(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    jurnalID: context.state.selected_journal.jurnalID,
+                    staffID: context.state.user.M_UserID,
+                    staffName: context.state.user.M_UserUsername
+                };
+                const resp = await api.requestEditJurnal(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_msg_success", resp.data);
+                    context.commit("update_alert_success", true);
+                    context.commit("update_dialog_request_edit", false);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async saveEditJurnal(context, newdetail) {
+            try {
+                let param = {
+                    token: one_token(),
+                    jurnalID: context.state.selected_journal.jurnalID,
+                    jurnalRequestEditID: context.state.selected_journal.JurnalRequestEditID,
+                    oldjurnaltx: context.state.selected_journal.detailtx,
+                    newjurnaltx: newdetail
+                };
+                const resp = await api.saveEditJurnal(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.dispatch("search", {
+                        branchCode: context.state.selected_branch.M_BranchCode ?? "",
+                        regionalId: context.state.selected_regional.S_RegionalID,
+                        search: context.state.x_search,
+                        current_page: context.state.current_page,
+                        xdate: context.state.xdate,
+                        periodeid: context.state.selected_periode.id
+                    });
+
+                    context.commit("update_dialog_edit_journal", false);
+                    context.commit("update_msg_success", resp.data);
+                    context.commit("update_alert_success", true);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async totalJurnalNotPostedPerPeriod(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    periodeID: context.state.selected_periode.id
+                };
+                const resp = await api.getTotalJurnalNotPostedPerPeriod(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_total_jurnal_not_posted", resp.data.total_jurnal ?? []);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async getDataJurnalNotClosedPerPeriod(context) {
+            try {
+                let param = {
+                    token: one_token(),
+                    periodeID: context.state.selected_periode.id
+                };
+                const resp = await api.getDataJurnalNotClosedPerPeriod(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_jurnal_to_close", resp.data ?? []);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        },
+
+        async closeJurnalPerPeriode(context, typeid) {
+            try {
+                let param = {
+                    token: one_token(),
+                    jurnalTypeID: typeid,
+                    periodeID: context.state.selected_periode.id
+                };
+                const resp = await api.closeJurnalPerPeriode(param);
+                if (resp.status != "OK") {
+                    context.commit("update_alert_error", true);
+                    context.commit("update_save_error_message", resp.message);
+                } else {
+                    context.commit("update_msg_success", resp.data);
+                    context.commit("update_alert_success", true);
+
+                    context.dispatch("search", {
+                        branchCode: context.state.selected_branch.M_BranchCode ?? "",
+                        regionalId: context.state.selected_regional.S_RegionalID,
+                        search: context.state.x_search,
+                        current_page: context.state.current_page,
+                        xdate: context.state.xdate,
+                        periodeid: context.state.selected_periode.id
+                    });
+
+                    context.commit("update_jurnal_to_close", []);
+                    context.commit("update_dialog_close_jurnal", false);
+                }
+            } catch (error) {
+                context.commit("update_alert_error", true);
+                context.commit("update_save_error_message", error.message);
+            }
+        }
+    }
+};
diff --git a/test/vuex/acc-one-pendapatan-cash-v2/store.js b/test/vuex/acc-one-pendapatan-cash-v2/store.js
new file mode 100644
index 0000000..292d3b1
--- /dev/null
+++ b/test/vuex/acc-one-pendapatan-cash-v2/store.js
@@ -0,0 +1,23 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import journal from "./modules/journal.js";
+import system from "../../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        journal: journal,
+        system:system
+    },
+    state: {
+
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    }
+});
\ No newline at end of file
diff --git a/test/vuex/acc-one-receive-item-po-inventaris/components/dialogHandOver.vue b/test/vuex/acc-one-receive-item-po-inventaris/components/dialogHandOver.vue
index a3957fa..1f752e9 100644
--- a/test/vuex/acc-one-receive-item-po-inventaris/components/dialogHandOver.vue
+++ b/test/vuex/acc-one-receive-item-po-inventaris/components/dialogHandOver.vue
@@ -6,17 +6,25 @@
             </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>
+                <p>Apakah Anda yakin ingin melakukan serah terima barang inventaris kepada user pemohon</p>
 
+                <v-data-table :headers="headers" :items="items" hide-actions class="elevation-1">
+                    <template v-slot:items="props">
+                        <tr>
+
+                        </tr>
+                    </template>
+                </v-data-table>
                 <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-autocomplete v-model="selected_ruangan" :items="list_lokasi" label="Lokasi Penerima*"
+                                outline item-value="M_RuanganID" item-text="M_RuanganName"></v-autocomplete>
+                        </v-flex>
+                        <v-flex xs6 pl-1>
+                            <v-autocomplete label="Staff Penerima*" outline :rules="rules_staff" 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>
@@ -35,8 +43,27 @@
 module.exports = {
     data() {
         return {
+            selected_ruangan: 0,
+            temp_list: [
+                { M_RuanganID: 1, M_RuanganName: "bonde" }
+            ],
             valid_formhandover: true,
-            rules_staff: [v => (v && Object.keys(v).length > 0) || 'Staff harus diisi'], 
+            rules_staff: [v => (v && Object.keys(v).length > 0) || 'Staff harus diisi'],
+            headers: [
+                {
+                    text: "ITEM", align: "center", sortable: false, value: "itemname",
+                    width: "60%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "QTY", align: "center", sortable: false, value: "qtyitem",
+                    width: "20%", class: "pa-2 blue lighten-3 white--text",
+                },
+                {
+                    text: "HANDOVER", align: "center", sortable: false, value: "qtysend",
+                    width: "20%", class: "pa-2 blue lighten-3 white--text",
+                },
+            ],
+            items: []
         }
     },
     computed: {
@@ -74,7 +101,10 @@ module.exports = {
         },
         list_staff() {
             return this.$store.state.ro.list_staff
-        }
+        },
+        list_lokasi() {
+            return this.$store.state.ro.list_lokasi
+        },
     },
     methods: {
         closeHandOver() {
@@ -95,4 +125,4 @@ module.exports = {
         },
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/test/vuex/acc-one-receive-item-po-inventaris/components/oneRoLayout.vue b/test/vuex/acc-one-receive-item-po-inventaris/components/oneRoLayout.vue
index 1ed6b55..156ae0f 100644
--- a/test/vuex/acc-one-receive-item-po-inventaris/components/oneRoLayout.vue
+++ b/test/vuex/acc-one-receive-item-po-inventaris/components/oneRoLayout.vue
@@ -190,7 +190,7 @@
                                                     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-icon small color="green" v-on="on">move_to_inbox</v-icon>
                                                 </v-btn>
                                             </template>
                                             <span>Serah Terima</span>
@@ -375,8 +375,9 @@ module.exports = {
         },
         handOverRO(data) {
             this.$store.commit("ro/update_selected_ro", data);
-            this.$store.commit("ro/update_dialog_handover", true);
+            this.$store.dispatch("ro/getRuangan");
             this.$store.dispatch("ro/getListStaff", 'Y');
+            this.$store.commit("ro/update_dialog_handover", true);
         },
         uploadDoct(data) {
             this.$store.commit("ro/update_selected_ro", data);
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/api/bill.js b/test/vuex/acc-one-supplier-payment-cashier-v5/api/bill.js
new file mode 100644
index 0000000..78af996
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/api/bill.js
@@ -0,0 +1,59 @@
+const URL = "/one-api/mockup/supplierpaymentcashierv5/";
+
+export async function search(prm) {
+    try {
+        var resp = await axios.post(URL + 'bill/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 selectpaymenttype(prm) {
+    try {
+       var resp = await axios.post(URL + 'payment/selectpaymenttype',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 pay(prm) {
+    try {
+      //  var resp = await axios.post(URL + 'payment/paymulti',prm);
+       var resp = await axios.post(URL + 'PaymentV2/payinvoicemulti',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
+       };
+    }
+ }
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/api/payment.js b/test/vuex/acc-one-supplier-payment-cashier-v5/api/payment.js
new file mode 100644
index 0000000..8454bf0
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/api/payment.js
@@ -0,0 +1,118 @@
+const URL = "/one-api/mockup/supplierpaymentcashierv5/";
+
+export async function lookup_type(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_type',{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 lookup_banks(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_banks',{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 lookup_accounts(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_accounts',{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 searchcard(token,prm) {
+    try {
+       var resp = await axios.post(URL + 'payment/searchcard',{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 pay(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/pay',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_note(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/delete_note',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
+        };
+    }
+}
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/api/paymentmanual.js b/test/vuex/acc-one-supplier-payment-cashier-v5/api/paymentmanual.js
new file mode 100644
index 0000000..2254cde
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/api/paymentmanual.js
@@ -0,0 +1,231 @@
+const URL = "/one-api/mockup/supplierpaymentcashierv5/";
+
+export async function lookup_type(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_type',{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 lookup_banks(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_banks',{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 lookup_accounts(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_accounts',{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 searchcard(token,prm) {
+    try {
+       var resp = await axios.post(URL + 'payment/searchcard',{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 pay(prm) {
+    try {
+        // var resp = await axios.post(URL + 'payment/paymanual',prm);
+        var resp = await axios.post(URL + 'PaymentV2/paymanual',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_note(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/delete_note',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 edit_note(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/edit_note',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 selecttagihan(prm) {
+    try {
+       var resp = await axios.post(URL + 'payment/selecttagihan',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 selectpaymenttype(prm) {
+    try {
+       var resp = await axios.post(URL + 'payment/selectpaymenttype',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 selectsupplier(prm) {
+    try {
+       var resp = await axios.post(URL + 'payment/selectsupplier',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 selectcard(token) {
+    try {
+       var resp = await axios.post(URL + 'payment/selectbank',{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 selectedc(token) {
+    try {
+       var resp = await axios.post(URL + 'payment/selectaccount',{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
+       };
+    }
+ }
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillList.vue b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillList.vue
new file mode 100644
index 0000000..a0dacbd
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillList.vue
@@ -0,0 +1,978 @@
+<template>
+      <v-layout class="fill-height" column>
+            <v-card class="mb-2 pa-2 searchbox">
+                <v-layout>
+                    <v-menu
+                        class="xs3 pr-2" v-model="menustartdate"
+                        :close-on-content-click="false" :nudge-right="40"
+                        lazy transition="scale-transition" offset-y
+                        full-width max-width="290px" min-width="290px"
+                    >
+                        <template v-slot:activator="{ on }">
+                            <v-text-field
+                                class="mt-1" v-model="startDateFormatted"
+                                readonly v-on="on" label="Tgl. Awal" outline
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker v-model="init_sdate" no-title @input="menustartdate = false"></v-date-picker>
+                    </v-menu>
+                    <v-menu
+                        class="xs3 pl-2" v-model="menuenddate"
+                        :close-on-content-click="false" :nudge-right="40"
+                        lazy transition="scale-transition" offset-y
+                        full-width max-width="290px" min-width="290px"
+                    >
+                        <template v-slot:activator="{ on }">
+                            <v-text-field
+                                class="mt-1" v-model="endDateFormatted"
+                                readonly v-on="on" label="Tgl. Akhir" outline
+                            ></v-text-field>
+                        </template>
+                        <v-date-picker v-model="init_edate" no-title @input="menuenddate = false"></v-date-picker>
+                    </v-menu>
+                    <v-text-field
+                        class="xs3 ma-1" label="Supplier" placeholder="Cari..."
+                        outline v-model="searchsupplier" hide-details
+                    ></v-text-field>
+                    <v-text-field
+                        class="xs3 ma-1" label="No. Bayar / No. Tagihan" placeholder="Cari..."
+                        outline v-model="searchnamelab" hide-details
+                    ></v-text-field>
+                    <v-select
+                        class="xs3 mini-select ma-1" :items="statuses" item-text="name"
+                        return-object v-model="status" label="Status" outline hide-details
+                    ></v-select>
+                    <span @click="searchPatient()" class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>
+                    <v-btn @click="paymulti()" v-if="total_payment != 0" small color="green" dark>Bayar (Multi)</v-btn>
+                    <!-- <v-btn @click="changeBtnFlagCourier(xisauto)" v-if="xisauto === 'N'" small color="error">
+                            Single</v-btn>
+                    <v-btn @click="changeBtnFlagCourier(xisauto)" v-if="xisauto === 'Y'" small color="success">
+                            Multiple</v-btn> -->
+                </v-layout>
+            </v-card>
+
+            <v-card>
+                <v-layout row>
+                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                        <v-data-table :headers="headers" :items="bills" :loading="isLoading" hide-actions class="elevation-1">
+                            <template v-slot:headers="props">
+                                <tr>
+                                    <th style="width:5px" class="text-xs-left blue lighten-3 white--text">
+                                        <v-checkbox
+                                            v-if="status.value === 'N'" v-model="bar_chx_all"
+                                            @change="changeCbxAll(bar_chx_all)" hide-details
+                                            style="padding-top:0;margin-top:0" color="blue"
+                                        ></v-checkbox>
+                                    </th>
+                                    <th
+                                        v-for="header in props.headers" :key="header.text"
+                                        :class="header.class" :width="header.width"
+                                    >
+                                        {{ header.text }}
+                                    </th>
+                                </tr>
+                            </template>
+                                <template slot="items" slot-scope="props">
+                                    <td
+                                        class="text-xs-left" @click="selectMe(props.item)"
+                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                    >
+                                        <v-checkbox
+                                            v-if="status.value === 'N'" style="padding-top:0;margin-top:0" color="blue"
+                                            hide-details v-model="props.item.chex" @change="checkTop(props.item)"
+                                        ></v-checkbox>
+                                    </td>
+                                    <td
+                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                    >
+                                        {{ props.item.tanggalbayar}}
+                                    </td>
+                                    <td
+                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                    >
+                                        {{ props.item.SupplierInvoiceNumber}}
+                                        <p><v-btn v-if="props.item.SupplierInvoiceIsLunas === 'Y'" small color="success">Lunas</v-btn></p>
+                                    </td>
+                                    <td
+                                        class="pa-2" @click="selectMe(props.item)"
+                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                    >
+                                        {{ props.item.SupplierPaymentNumber}}
+                                        <p style="color:#800000" class="mb-0 font-weight-bold caption">{{props.item.SupplierPaymentCashierNumber}}</p>
+                                    </td>
+                                    <td
+                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                    >
+                                        {{ props.item.SupplierName}}
+                                    </td>
+                                    <td
+                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                    >
+                                        {{ props.item.SupplierInvoiceSupplierInvoiceNumber}}
+                                        <p>{{ props.item.tanggalinvoice}}</p>
+                                    </td>
+                                    <td
+                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                    >
+                                        {{ convertMoney(props.item.totalbill)}}
+                                    </td>
+                                    <td
+                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                    >
+                                        {{ convertMoney(props.item.paid)}}
+                                    </td>
+                                </template>
+                        </v-data-table>
+                        <v-divider></v-divider>
+                        <v-pagination style="margin-top:10px;margin-bottom:10px" v-model="curr_page" :length="xtotal_page"></v-pagination>
+                    </v-flex>
+                </v-layout>
+            </v-card>
+
+            <v-dialog v-model="xdialogmulti" max-width="65%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran (Multi)</h4>
+                    </v-card-title>
+
+                    <v-card-text class="pt-2 pb-2">
+                        <!-- <v-layout row pa-2 align-center wrap> -->
+                        <!-- <v-flex xs6>
+                            <v-layout row>
+                                <v-flex xs12>
+                                    <div>Total : <kbd>Rp. {{convertMoney(this.$store.state.bill.total_payment)}}</kbd></div>
+                                </v-flex>
+                            </v-layout>
+                        </v-flex> -->
+
+                        <!-- </v-layout> -->
+                        <v-layout row mt-3>
+                            <v-flex xs6 pr-1>
+                                <v-autocomplete
+                                    label="Account" :items="xpaymenttypes" v-model="xpaymenttype"
+                                    :search-input.sync="a_coa_search" hide-details auto-select-first no-filter
+                                    item-text="coaDescription" outline return-object no-data-text="Cari Account">
+                                        <template slot="item" slot-scope="{ item }">
+                                            <v-list-tile-content>
+                                                <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
+                                                <v-list-tile-sub-title v-text="item.coaAccountNo"></v-list-tile-sub-title>
+                                            </v-list-tile-content>
+                                        </template>
+                                </v-autocomplete>
+                            </v-flex>
+                            <v-flex xs6 pl-1>
+                                <v-text-field placeholder="Keterangan" v-model="xketerangan" outline></v-text-field>
+                            </v-flex>
+                        </v-layout>
+
+                        <v-layout>
+                            <v-flex xs12>
+                                <v-data-table
+                                    :headers="headersmulti" :items="selected_multibill"
+                                    :loading="isLoading" class="elevation-1"
+                                >
+                                    <template slot="items" slot-scope="props">
+                                        <td
+                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                        >
+                                            {{ props.item.tanggalbayar}}
+                                        </td>
+                                        <td
+                                            class="text-xs-left pa-2"  @click="selectMe(props.item)"
+                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                        >
+                                            {{ props.item.SupplierInvoiceNumber}}
+                                            <p><v-btn v-if="props.item.SupplierInvoiceIsLunas === 'Y'" small color="success">Lunas</v-btn></p>
+                                        </td>
+                                        <td
+                                            class="pa-2" @click="selectMe(props.item)"
+                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                        >
+                                            {{ props.item.SupplierPaymentNumber}}
+                                        </td>
+                                        <td
+                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                        >
+                                            {{ props.item.SupplierName}}
+                                        </td>
+                                        <td
+                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                        >
+                                            {{ props.item.SupplierInvoiceSupplierInvoiceNumber ?? "-"}}
+                                            <p>{{ props.item.tanggalinvoice}}</p>
+                                        </td>
+                                        <td
+                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                        >
+                                            Rp. {{ convertMoney(props.item.totalbill)}}
+                                        </td>
+                                        <!-- <td
+                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
+                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
+                                        >
+                                            <v-text-field
+                                                style="margin-center:0;padding-center:0" v-model="props.item.xrounding"
+                                                @change="updateRounding(props.item)" hide-details
+                                            ></v-text-field>
+                                        </td> -->
+                                    </template>
+                                    <template v-slot:footer>
+                                        <tr>
+                                            <td colspan="5" class="text-xs-left pa-2">
+                                                <strong>TOTAL</strong>
+                                            </td>
+                                            <td colspan="1" class="text-xs-left pa-2">
+                                                <strong>
+                                                     Rp. {{ convertMoney(total_payment) }}
+                                                </strong>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td colspan="5" class="text-xs-left pa-2">
+                                                <strong>TOTAL DENGAN PEMBULATAN</strong>
+                                            </td>
+                                            <td colspan="1" class="text-xs-left pa-2">
+                                                <v-text-field
+                                                    v-model="displayTotalRounding" outline prefix="Rp."
+                                                    hide-details label="Total (setelah pembulatan)"
+                                                    @blur="onBlurRounding" @focus="onFocusRounding"
+                                                ></v-text-field>
+                                            </td>
+                                        </tr>
+                                    </template>
+                                </v-data-table>
+                                <v-divider></v-divider>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="blue" dark v-if="this.xpaymenttype.coaID" @click="addpaymulti()">
+                            Bayar
+                        </v-btn>
+                        <v-btn color="error" dark  @click="closepaymulti()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
+            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+            <one-dialog-alert :status="openalertnopay" :msg="msgalertnopay" @forget-dialog-alert="forgetAlertNoPay()" @close-dialog-alert="closeAlertNoPay()"></one-dialog-alert>
+      </v-layout>
+</template>
+
+
+<style scoped>
+      .searchbox .v-input.v-text-field .v-input__slot {
+            min-height: 40px;
+      }
+      .searchbox .v-btn {
+            min-height: 40px;
+      }
+      table.v-table tbody td,
+      table.v-table tbody th {
+            height: 40px;
+      }
+      table.v-table thead tr {
+            height: 40px;
+      }
+      .v-messages {
+            min-height: 0px !important;
+      }
+</style>
+
+<script>
+    module.exports = {
+        components: {
+            'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue'),
+            'one-dialog-alert': httpVueLoader('../../common/oneDialogAlert.vue')
+        },
+        mounted() {
+            this.$store.dispatch("bill/search", {
+              supplier: this.searchsupplier,
+              search: this.searchnamelab,
+              status: this.status.value,
+              current_page: 1,
+              startdate: this.init_sdate,
+              enddate: this.init_edate,
+              lastidx: 0
+            })
+        },
+        methods: {
+            async aSearchAcCoa(query) {
+              if (!query) return;
+              this.a_loading_coa = true;
+              await this.$store.dispatch("bill/selectpaymenttype", { search: query });
+              this.a_loading_coa = false;
+            },
+            checkTop(pat) {
+                // Pastikan selected_multibill selalu berupa array
+                let selected = this.$store.state.bill.selected_multibill;
+                if (!Array.isArray(selected)) {
+                    selected = [];
+                }
+
+                // Cek apakah item sudah ada di daftar
+                const exists = selected.find(x => x.SupplierPaymentID === pat.SupplierPaymentID);
+                if (exists) {
+                    // Jika sudah ada → hapus (toggle off)
+                    selected = selected.filter(x => x.SupplierPaymentID !== pat.SupplierPaymentID);
+                } else {
+                    // Jika belum ada → tambahkan (toggle on)
+                    selected.push(pat);
+                }
+
+                // Update ke store
+                this.$store.commit("bill/update_selected_multibill", selected);
+
+                console.log("Selected list:", selected);
+                // Hitung ulang total pembayaran
+                const totalPayment = selected.reduce((sum, obj) => {
+                    return sum + parseFloat(obj.totalbill || 0);
+                }, 0);
+                // alert(totalPayment);
+                this.$store.commit("bill/update_total_payment", totalPayment);
+            },
+            updateRounding(pat) {
+                // Pastikan selected_multibill selalu berupa array
+                let selected = this.$store.state.bill.selected_multibill;
+                if (!Array.isArray(selected)) {
+                    selected = [];
+                }
+
+                // Cari item yang sesuai dan update nilai xrounding-nya
+                const updated = selected.map(item => {
+                    if (item.SupplierPaymentID === pat.SupplierPaymentID) {
+                        return {
+                          ...item,
+                          xrounding: pat.xrounding || 0
+                        };
+                    }
+                    return item;
+                });
+
+                // Update ke store
+                this.$store.commit("bill/update_selected_multibill", updated);
+
+                // Hitung ulang total pembayaran
+                const totalPayment = updated.reduce((sum, obj) => {
+                    return sum + parseInt(obj.totalbill || 0) + parseInt(obj.xrounding || 0);
+                }, 0);
+
+                // Simpan total pembayaran ke store
+                this.$store.commit("bill/update_total_payment", totalPayment);
+
+                console.log("Updated rounding:", updated);
+            },
+            onBlurRounding() {
+                let rounding = this.xrounding
+                if (rounding % 1 === 0 ) {
+                    this.total_multi_after_rounding = this.convertMoney(rounding) + ",00"
+                } else {
+                    this.total_multi_after_rounding = this.convertMoney(rounding)
+                }
+            },
+            onFocusRounding() {
+                let rounding = this.xrounding
+                this.total_multi_after_rounding = rounding.toString().replace('.', ',')
+            },
+            changeCbxAll(val) {
+                const bills = this.$store.state.bill.bills || [];
+                let selected = [];
+
+                // Jika "Select All" dicentang
+                if (val) {
+                    selected = bills.map(b => {
+                        b.chex = true; // centang semua item
+                        return b;
+                    });
+                } else {
+                    // Jika dilepas
+                    bills.forEach(b => (b.chex = false));
+                    selected = [];
+                }
+
+                // Update ke store
+                this.$store.commit("bill/update_selected_multibill", selected);
+
+                // Hitung total pembayaran
+                const totalPayment = selected.reduce((sum, obj) => {
+                    return sum + parseInt(obj.totalbill || 0) + parseInt(obj.xrounding || 0);
+                }, 0);
+                this.$store.commit("bill/update_total_payment", totalPayment);
+
+                console.log("Select All:", val);
+                console.log("Selected list:", selected);
+            },
+            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')}`
+            },
+            isSelected(p) {
+                return p.SupplierInvoiceID == this.$store.state.bill.selected_bill.SupplierInvoiceID
+            },
+            closeDialogPaySuccess() {
+                this.$store.commit("bill/update_dialog_pay_success", false)
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.init_sdate,
+                    enddate: this.$store.state.bill.init_edate,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    current_page: this.$store.state.bill.current_page,
+                    lastidx: 1
+                })
+            },
+            convertMoney(money) {
+                return one_money(money)
+            },
+            async addpaymulti() {
+                if (this.in_saving) return;
+                this.in_saving = true;
+                var go_pay = true
+                var xmsginfo = ''
+                let prm = {
+                    xrounding: this.xrounding,
+                    total: this.total_payment,
+                    paymenttype: this.xpaymenttype.coaID,
+                    keterangan: this.xketerangan,
+                    details: this.$store.state.bill.selected_multibill
+                }
+                //console.log(prm.amount)
+                // console.log(prm);
+                this.$store.dispatch("bill/pay", prm)
+            },
+            searchPatient() {
+                this.$store.dispatch("bill/search", {
+                    supplier: this.searchsupplier,
+                    search: this.searchnamelab,
+                    status: this.status.value,
+                    current_page: 1,
+                    startdate: this.init_sdate,
+                    enddate: this.init_edate,
+                    lastidx: 0
+                })
+            },
+            selectMe(pat) {
+                this.$store.commit("paymentmanual/update_paymenttype", '')
+                if (this.xtotal_page > 0) {
+                    // alert(pat.tanggalbayar)
+                    this.$store.commit("paymentmanual/update_xbayar", pat.totalbill)
+                    this.$store.commit("paymentmanual/update_xtanggalbayar", pat.SupplierInvoiceDraftPaymentDate)
+                    let totpay = this.$store.state.paymentnew.total_payment
+                    if (totpay === 0) {
+                        let xobj = this.$store.state.paymentnew.types
+                        console.log(xobj)
+                        xobj.forEach(function (obj) {
+                            obj.chex = false
+                            obj.leftvalue = 0
+                            obj.rightvalue = 0
+                            obj.selected_card = {
+                                id: 0,
+                                name: ''
+                            }
+                            obj.selected_edc = {
+                                id: 0,
+                                name: ''
+                            }
+                        })
+                        this.$store.commit("paymentnew/update_types", {
+                            records: xobj,
+                            total: xobj.length
+                        })
+                        this.$store.commit("bill/update_selected_bill", pat)
+                        this.$store.commit("paymentnew/update_total_payment", 0)
+                        this.$store.commit("paymentnew/update_notes", pat.notes)
+                        this.$store.commit("paymentmanual/update_notes", pat.notes)
+                        if (pat.flaglunas === 'N') {
+                            this.$store.commit("paymentmanual/update_tagihans", pat.tagihans)
+                        } else {
+                            this.$store.commit("paymentmanual/update_tagihans", '')
+                        }
+                    } else {
+                        this.$store.commit("bill/update_open_alert_no_pay", true)
+                    }
+
+                    var arr = this.$store.state.paymentmanual.tagihans
+                    var value = true
+                    this.$store.commit("paymentmanual/update_indeterminatex", false)
+                    this.$store.commit("paymentmanual/update_bar_chx_all", value)
+
+                    arr.forEach((el) => {
+                        el.chex = value
+                        el.tagihan_bayar = value == true ? el.tagihan_tagihan : 0
+                    })
+
+                    var selected = _.filter(arr, function (o) {
+                        return o.chex;
+                    })
+                    this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+
+                    var xval = this.$store.state.paymentmanual.selected_tagihan
+                    var valx = 0
+                    xval.forEach(function (obj) {
+                        valx += parseInt(obj.tagihan_bayar)
+                    })
+                    let totpaid = valx
+                    this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                } else {
+                    // alert(pat.tanggalbayar)
+                    console.log("no invoice to pay again");
+                    this.$store.commit("paymentmanual/update_xbayar", pat.totalbill)
+                    this.$store.commit("paymentmanual/update_xtanggalbayar", pat.tanggalbayar)
+                    let totpay = 0
+                    if (totpay === 0) {
+                        let xobj = this.$store.state.paymentnew.types
+                        console.log(xobj)
+                        xobj.forEach(function (obj) {
+                              obj.chex = false
+                              obj.leftvalue = 0
+                              obj.rightvalue = 0
+                              obj.selected_card = {
+                                    id: 0,
+                                    name: ''
+                              }
+                              obj.selected_edc = {
+                                    id: 0,
+                                    name: ''
+                              }
+                        })
+                        this.$store.commit("paymentnew/update_types", {
+                              records: '',
+                              total: 0
+                        })
+                        this.$store.commit("bill/update_selected_bill", '')
+                        this.$store.commit("paymentnew/update_total_payment", 0)
+                        this.$store.commit("paymentmanual/update_notes", '')
+                        this.$store.commit("paymentnew/update_notes", '')
+                        if (pat.flaglunas === 'N') {
+                              this.$store.commit("paymentmanual/update_tagihans", pat.tagihans)
+                        } else {
+                              this.$store.commit("paymentmanual/update_tagihans", '')
+                        }
+                    } else {
+                        this.$store.commit("bill/update_open_alert_no_pay", true)
+                    }
+                }
+            },
+            closeAlertNoPay() {
+                this.$store.commit("bill/update_open_alert_no_pay", false)
+            },
+            forgetAlertNoPay() {
+                var xval = this.$store.state.paymentnew.types
+                var valpay = 0
+                xval.forEach(function (obj) {
+                    obj.chex = false
+                    obj.leftvalue = 0
+                    obj.rightvalue = 0
+                    obj.selected_card = {
+                        id: 0,
+                        name: ''
+                    }
+                    obj.selected_edc = {
+                        id: 0,
+                        name: ''
+                    }
+                })
+                this.$store.commit("paymentnew/update_total_payment", 0)
+                this.$store.commit("bill/update_open_alert_no_pay", false)
+            },
+            changeBtnFlagCourier(value) {
+                var newval = (value === 'Y') ? 'N' : 'Y'
+                this.xisauto = newval
+            },
+            changeBtnFlagDefaultCourier(value) {
+                var newval = (value === 'Y') ? 'N' : 'Y'
+                this.xdisauto = newval
+            },
+            paymulti() {
+                this.$store.commit("bill/update_xdialogmulti", true)
+            },
+            closepaymulti() {
+                this.$store.commit("bill/update_xdialogmulti", false)
+            }
+        },
+        computed: {
+            isIndeterminate() {
+                const bills = this.$store.state.bill.bills || [];
+                const selected = this.$store.state.bill.selected_multibill || [];
+                return selected.length > 0 && selected.length < bills.length;
+            },
+            xpaymenttypes() {
+                return this.$store.state.bill.paymenttypes
+            },
+            a_loading_coa: {
+                get() {
+                    return this.$store.state.bill.a_loading_coa;
+                },
+                set(val) {
+                    this.$store.commit("bill/update_a_loading_coa", val);
+                },
+            },
+            in_saving: {
+                get() {
+                    return this.$store.state.bill.in_saving
+                },
+                set(val) {
+                    this.$store.commit("bill/update_in_saving", val)
+                }
+            },
+            xpaymenttype: {
+                get() {
+                    return this.$store.state.bill.paymenttype
+                },
+                set(val) {
+                    this.$store.commit("bill/update_paymenttype", val)
+                }
+            },
+            xmsgpaysuccess() {
+                return this.$store.state.bill.paynumber
+            },
+            a_coa_search: {
+                get() {
+                    return this.$store.state.bill.a_coa_search
+                },
+                set(val) {
+                    this.$store.commit("bill/update_a_coa_search", val);
+                    //this.aSearchAcCoa(val)
+                }
+            },
+            xrounding: {
+                get() {
+                    return this.$store.state.bill.xrounding
+                },
+                set(val) {
+                    this.$store.commit("bill/update_xrounding", val)
+                }
+            },
+            displayTotalRounding: {
+              get() {
+                  return this.total_multi_after_rounding
+              },
+              set(val) {
+                  let raw = val.replace(/\./g, '').replace(',', '.');
+                  this.xrounding = parseFloat(raw) || 0;
+              }
+            },
+            xdialogmulti: {
+                get() {
+                    return this.$store.state.bill.xdialogmulti
+                },
+                set(val) {
+                    this.$store.commit("bill/update_xdialogmulti", val)
+                }
+            },
+            selected_multibill: {
+                get() {
+                    return this.$store.state.bill.selected_multibill
+                },
+                set(val) {
+                    this.$store.commit("bill/update_selected_multibill", val)
+                }
+            },
+            total_payment: {
+                get() {
+                    return this.$store.state.bill.total_payment
+                },
+                set(val) {
+                    this.$store.commit("bill/update_total_payment", val)
+                }
+            },
+            xdialogpaysuccess() {
+                return this.$store.state.bill.dialog_pay_success
+            },
+            xstartdate: {
+                get() {
+                    return this.$store.state.bill.start_date
+                },
+                set(val) {
+                    this.$store.commit("bill/update_start_date", val)
+                }
+            },
+            xenddate: {
+                get() {
+                    return this.$store.state.bill.end_date
+                },
+                set(val) {
+                    this.$store.commit("bill/update_end_date", val)
+                }
+            },
+            init_sdate: {
+                get() {
+                    return this.$store.state.bill.init_sdate
+                },
+                set(val) {
+                    this.$store.commit("bill/update_init_sdate", val)
+                }
+            },
+            init_edate: {
+                get() {
+                    return this.$store.state.bill.init_edate
+                },
+                set(val) {
+                    this.$store.commit("bill/update_init_edate", val)
+                }
+            },
+            xisauto: {
+                get() {
+                    return this.$store.state.bill.isauto
+                },
+                set(val) {
+                    this.$store.commit("bill/update_isauto", val)
+                    this.$store.commit("paymentmanual/update_isauto", val)
+                    this.$store.commit("paymentnew/update_isauto", val)
+                }
+            },
+            searchsupplier: {
+                get() {
+                    return this.$store.state.bill.ssupplier
+                },
+                set(val) {
+                    this.$store.commit("bill/update_ssupplier", val)
+                }
+            },
+            searchnamelab: {
+                get() {
+                    return this.$store.state.bill.search
+                },
+                set(val) {
+                    this.$store.commit("bill/update_search", val)
+                }
+            },
+            statuses() {
+                return this.$store.state.bill.statuses
+            },
+            status: {
+                get() {
+                    return this.$store.state.bill.selected_status
+                },
+                set(val) {
+                    this.$store.commit("bill/update_selected_status", val)
+                }
+            },
+            indeterminatex: {
+                get() {
+                    return this.$store.state.bill.indeterminatex
+                },
+                set(val) {
+                    this.$store.commit("bill/update_indeterminatex", val)
+                }
+            },
+            startDateFormatted() {
+                return this.formatDate(this.init_sdate)
+            },
+            bayarDateFormatted() {
+                return this.formatDate(this.xtanggalbayar)
+            },
+            xtanggalbayar: {
+                get() {
+                    return this.$store.state.bill.xtanggalbayar
+                },
+                set(val) {
+                    this.$store.commit("bill/update_xtanggalbayar",val)
+                }
+            },
+            endDateFormatted() {
+                return this.formatDate(this.init_edate)
+            },
+            isLoading() {
+                return this.$store.state.bill.search_status == 1
+            },
+            bills() {
+                return this.$store.state.bill.bills
+            },
+            openalertnopay: {
+                get() {
+                    return this.$store.state.bill.open_alert_no_pay
+                },
+                set(val) {
+                    this.$store.commit("bill/update_open_alert_no_pay", false)
+                }
+            },
+            msgalertnopay() {
+                return this.$store.state.bill.msg_alert_no_pay
+            },
+            curr_page: {
+                get() {
+                    return this.$store.state.bill.current_page
+                },
+                set(val) {
+                    this.$store.commit("bill/update_current_page", val)
+                    this.$store.dispatch("bill/search", {
+                        supplier: this.searchsupplier,
+                        search: this.searchnamelab,
+                        status: this.status.value,
+                        current_page: val,
+                        startdate: this.init_sdate,
+                        enddate: this.init_edate,
+                        lastidx: 0
+                    })
+                }
+            },
+            xtotal_page: {
+                get() {
+                    return this.$store.state.bill.total_page
+                },
+                set(val) {
+                    this.$store.commit("bill/update_total_page", val)
+                }
+            },
+        },
+        data() {
+            return {
+                total_multi_after_rounding: 0,
+                items: [],
+                menustartdate: false,
+                menuenddate: false,
+                xketerangan: '',
+                bar_chx_all: false,
+                    headers: [
+                        {
+                            text: "TGL. BAYAR", align: "left", sortable: false,
+                            value: "mr", width: "10%", class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "NO. TAGIHAN", align: "left", sortable: false,
+                            value: "lab", width: "15%", class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "NO. INSTRUKSI", align: "left", sortable: false,
+                            value: "name", width: "10%", class: "pa-2 blue lighten-3 white--text"
+                        },
+
+                        {
+                            text: "SUPPLIER", align: "left", sortable: false,
+                            value: "status", width: "20%", class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "NO. INVOICE (SUPPLIER)", align: "left", sortable: false,
+                            value: "status", width: "15%", class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "TOTAL TAGIHAN", align: "left", sortable: false,
+                            value: "status", width: "10%", class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "TOTAL BAYAR", align: "left", sortable: false,
+                            value: "status", width: "10%", class: "pa-2 blue lighten-3 white--text"
+                        }
+                    ],
+                    headersmulti: [
+                        {
+                            text: "TGL. BAYAR",
+                            align: "left",
+                            sortable: false,
+                            value: "mr",
+                            width: "10%",
+                            class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "NO. TAGIHAN",
+                            align: "left",
+                            sortable: false,
+                            value: "lab",
+                            width: "17%",
+                            class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "NO. PEMBAYARAN",
+                            align: "left",
+                            sortable: false,
+                            value: "name",
+                            width: "13%",
+                            class: "pa-2 blue lighten-3 white--text"
+                        },
+
+                        {
+                            text: "SUPPLIER",
+                            align: "left",
+                            sortable: false,
+                            value: "status",
+                            width: "20%",
+                            class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "NO. INVOICE (SUPPLIER)",
+                            align: "left",
+                            sortable: false,
+                            value: "status",
+                            width: "15%",
+                            class: "pa-2 blue lighten-3 white--text"
+                        },
+                        {
+                            text: "TOTAL TAGIHAN",
+                            align: "left",
+                            sortable: false,
+                            value: "status",
+                            width: "15%",
+                            class: "pa-2 blue lighten-3 white--text"
+                        },
+                        // {
+                        //     text: "PEMBULATAN",
+                        //     align: "left",
+                        //     sortable: false,
+                        //     value: "status",
+                        //     width: "10%",
+                        //     class: "pa-2 blue lighten-3 white--text"
+                        // }
+                    ],
+                  }
+            },
+        watch: {
+            a_coa_search(val) {
+                this.aSearchAcCoa(val)
+            },
+            xdialogmulti(val) {
+                this.xrounding = 0
+                this.total_multi_after_rounding = 0
+            }
+        }
+    }
+</script>
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentAuto.vue b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentAuto.vue
new file mode 100644
index 0000000..e327e13
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentAuto.vue
@@ -0,0 +1,855 @@
+<template>
+    <v-layout column pb-2 v-if="this.xisauto === 'Y'">
+        <v-card class="mb-2" color="white">
+            <v-layout row wrap>
+                <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+                    <table>
+                        <tr>
+                            <th class="text-md-center pt-2 pb-2">NO. PEMBAYARAN</th>
+                            <th class="text-md-center pt-2 pb-2"> TIPE PEMBAYARAN </th>
+                            <th class="text-md-center pt-2 pb-2">JUMLAH</th>
+                            <th class="text-md-center pt-2 pb-2">USER</th>
+                            <th class="text-md-center pt-2 pb-2">AKSI</th>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length > 0" v-for="(note,index) in notes">
+                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" style="text-align:center;vertical-align:center;"
+                                align="center">{{note.note_number}}</td>
+                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pl-3 pr-3">{{note.paymenttypes_name}}</td>
+                            <td width="15%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(note.note_amount)}}</td>
+                            <td width="20%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pr-2">{{note.note_user}}</td>
+                            <td class="text-md-center">
+                                <span @click="printNote(note,index)" class="icon-medium-fill-base xs1 white--text grey darken-1 icon-print"></span>
+                                <!--<v-btn small  @click="printNote(note,index)" color="primary" dark>
+                                    Print
+                                </v-btn>
+
+                                <v-btn small  @click="deleteNote(note,index)" v-if="note.note_active === 'Y'" color="error" dark>
+                                    Hapus
+                                </v-btn>-->
+
+                            </td>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length ===  0">
+                            <td colspan="5" class="text-md-center pr-2">
+                                Tidak ada data
+                            </td>
+                        </tr>
+                    </table>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <v-layout row mt-1 mb-1 pl-2 pr-2>
+            </v-layout>
+            </v-flex>
+        </v-card>
+        <v-card>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">Total Tagihan</div>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout pt-1 row>
+                        <v-flex xs9>
+                            <!--<div class="text-xs-left warning--text">Minimun DP ({{xmindp_percent}}%)</div>-->
+                        </v-flex>
+                        <v-flex xs3>
+                            <!--<div class="text-xs-right warning--text">{{convertMoney(xmindp_amount)}}</div>-->
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(restbill)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <div v-for="(type, index) in types">
+                <v-layout row pt-2 pb-1 pl-2 align-center wrap>
+                    <v-flex xs12>
+                        <v-switch v-model="type.chex" @change="updateChx(type,index)" :label="type.chexlabel"></v-switch>
+                    </v-flex>
+                </v-layout>
+                <v-layout pl-2 row align-center wrap>
+                    <v-flex xs4 class="pa-1">
+                        <!--<input type="text" @change="updateTotal()" :class="{ 'disabled-background':type.chex === false }" :disabled="!type.chex"  v-model="type.leftvalue" class="input-plain text-xs-right font-weight-bold"/>-->
+                        <v-text-field label="Jumlah" :disabled="!type.chex" v-model="type.leftvalue" @change="updateTotal()" class="amount-right"
+                            reverse outline></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'CASH' || type.code === 'VOUCHER'" class="pa-1">
+                        <v-text-field v-if="type.code === 'CASH'" label="Kembali" :disabled="!type.chex" v-model="type.rightvalue" class="amount-right"
+                            reverse @change="updateTotal()" outline></v-text-field>
+                        <v-text-field v-if="type.code === 'VOUCHER'" label="Kode Voucher" :disabled="!type.chex" v-model="type.rightvalue" class="amount-right"
+                            outline></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'DEBIT' || type.code === 'CREDIT' || type.code === 'TRANSFER'" class="pa-1">
+                        <v-autocomplete v-if="type.code !== 'TRANSFER'" label="Kartu" v-model="type.selected_card" @change="changeCard('card',type.selected_card,index)"
+                            :disabled="!type.chex" :items="banks" auto-select-first no-filter outline item-text="name" item-value="id"
+                            return-object no-data-text="">
+                        </v-autocomplete>
+                        <v-autocomplete v-if="type.code === 'TRANSFER'" label="Nomor Rekening" v-model="type.selected_account" @change="changeCard('account',type.selected_account,index)"
+                            :disabled="!type.chex" :items="accounts" auto-select-first outline no-filter item-text="name" item-value="id"
+                            return-object no-data-text="">
+                        </v-autocomplete>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'DEBIT' || type.code === 'CREDIT'" class="pa-1">
+                        <v-autocomplete label="EDC" v-model="type.selected_edc" @change="changeCard('edc',type.selected_card,index)" :disabled="!type.chex"
+                            :items="accounts" auto-select-first outline no-filter item-text="name" item-value="id" return-object
+                            no-data-text="">
+                        </v-autocomplete>
+                    </v-flex>
+                </v-layout>
+                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            </div>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <div class="label-tagihan text-xs-left">
+                        <v-btn v-if="xdisable_btn_pay === 'N'" :disabled="in_saving" @click="pay()" color="warning" dark>
+                            Bayar
+                        </v-btn>
+                    </div>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(totpay)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+
+
+        <template>
+            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn flat @click="doPrint()">
+                            Print
+                        </v-btn>
+                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+
+            <v-dialog v-model="xdialogdelete" persistent max-width="30%">
+                <v-card>
+                    <v-card-title :class="{ 'red':!_.isEmpty(xnotadelete), 'success':_.isEmpty(xnotadelete) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotadelete)">Peringatan !</span>
+                            <span v-if="_.isEmpty(xnotadelete)">Berhasil !</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgdelete" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotadelete)" row>
+                                            <v-flex pt-2 pr-2 xs12>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" placeholder="Catatan (*Wajib diisi)" v-model="xnotedelete"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" v-if="!_.isEmpty(xnotadelete) && xnotedelete " flat @click="doDeleteNote()">
+                            Yakin dong !
+                        </v-btn>
+
+                        <v-btn v-if="!_.isEmpty(xnotadelete)" color="primary" flat @click="xdialogdelete = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotadelete)" color="primary" flat @click="closeDialogDelete()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
+        </template>
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote"
+            @close-dialog-print="openprintnote = false"></one-dialog-print>
+            <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="opendialoginfo = false"></one-dialog-info>
+    </v-layout>
+</template>
+<style scoped>
+    .rTable {
+        display: table;
+        width: 100%;
+        border-spacing: 0 .2em;
+    }
+
+    .rTableGroup {
+        display: table-row-group;
+    }
+
+    .rTableRow {
+        display: table-row;
+        font-size: 14px;
+        -webkit-flex-wrap: wrap;
+        /* Safari 6.1+ */
+        flex-wrap: wrap;
+
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        background-color: #fffff;
+    }
+
+    .rTableCell {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        line-height: 2;
+        border: 1px solid #2196f3;
+        background-color: #fffff;
+        border-spacing: 5px;
+    }
+
+    .rTableHead {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        padding-bottom: 0px;
+        background-color: #fffff;
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    .rTableFoot {
+        display: table-footer-group;
+        font-weight: bold;
+        background-color: #ddd;
+    }
+
+    .rTableBody {
+        display: table-row-group;
+    }
+
+    .rfirstCell {
+        border-left: 10px solid #2196f3;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+
+    .caption {
+        border: 1px solid grey;
+        caption-side: bottom;
+        display: table-caption;
+        text-align: center;
+        padding: 5px
+    }
+
+    .label-tagihan {
+        text-align: left;
+        font-size: 25px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-header {
+        text-align: left;
+        font-size: 18px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        text-align: left;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .amount-right {
+        text-align: right !important;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .text-tagihan {
+        text-align: left;
+        font-size: 42px;
+        font-family: open sans, tahoma, sans-serif;
+    }
+
+    .disabled-background {
+        background: #b7b7b7;
+    }
+
+    .input-cash {
+        width: 100%;
+        padding: 8px 14px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 22px;
+        font-weight: 700;
+        text-align: right;
+    }
+
+    .input-plain {
+        width: 100%;
+        padding: 4px 8px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 14px;
+    }
+
+    .v-input,
+    .v-input__slot,
+    .v-messages {
+        margin: 0px;
+        padding: 0px;
+        min-height: 0px;
+    }
+
+    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
+        margin-bottom: 0px;
+    }
+
+    table {
+        font-family: arial, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+        background: white;
+        border: 0px;
+    }
+
+    th,
+    td {
+        border: 1px solid black;
+        border-collapse: collapse;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+
+    table>tr>td {
+        padding: 8px;
+    }
+
+    table>tr>td:first {
+        padding-left: 15px !important;
+    }
+
+    .mini-input .v-input {
+        margin-top: 0px;
+    }
+
+    .mini-input .v-input,
+    .mini-input .v-input--selection-controls,
+    .mini-input .v-input__slot {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: 3px;
+    }
+
+    .mini-input .v-messages {
+        min-height: 0px;
+    }
+
+    .border-bottom-dashed {
+        border-bottom: 1px dashed rgba(0, 0, 0, .12);
+    }
+</style>
+<script>
+    module.exports = {
+        components: {
+            'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue'),
+            'one-field-verification': httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
+            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
+        },
+        data() {
+            return {
+                checkbox: true,
+                radioGroup: 1,
+                switchCash: true,
+                switchDebit: false,
+                switchKredit: false,
+                dialog: false,
+                urlprintnote: '',
+                printtitle: '',
+                printwidth: '60%',
+                search_card: '',
+                search_edc: '',
+                isLoading: false,
+                fajrihidebtnpay: 'Y'
+            }
+        },
+        mounted() {
+            this.$store.dispatch("paymentnew/lookup_type")
+            this.$store.dispatch("paymentnew/lookup_banks")
+            this.$store.dispatch("paymentnew/lookup_accounts")
+        },
+        computed: {
+            opendialoginfo: {
+            get() {
+                return this.$store.state.paymentnew.open_dialog_info
+            },
+            set(val) {
+                this.$store.commit("paymentnew/update_open_dialog_info",false)
+            }
+        },
+        msginfo: {
+            get() {
+                return this.$store.state.paymentnew.msg_info
+            },
+            set(val) {
+                this.$store.commit("paymentnew/update_msg_info",false)
+            }
+        },
+            cards() {
+                return this.$store.state.paymentnew.cards
+            },
+            banks() {
+                return this.$store.state.paymentnew.banks
+            },
+            accounts() {
+                return this.$store.state.paymentnew.accounts
+            },
+            xmindp_percent() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_percent
+                } else {
+                    return 0
+                }
+            },
+            xmindp_amount() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_amount
+                } else {
+                    return 0
+                }
+            },
+            notes() {
+                return this.$store.state.paymentnew.notes
+
+            },
+            xordertests() {
+                return this.$store.state.paymentnew.ordertests
+            },
+            xdialogpaysuccess() {
+                return this.$store.state.paymentnew.dialog_pay_success
+            },
+            xmsgpaysuccess() {
+                return this.$store.state.paymentnew.paynumber
+            },
+            types() {
+                return this.$store.state.paymentnew.types
+            },
+            totpay() {
+                return this.$store.state.paymentnew.total_payment
+            },
+            restbill() {
+                if (this.$store.state.bill.bills) {
+                    return this.$store.state.bill.selected_bill.unpaid
+                } else {
+                    return 0
+                }
+
+            },
+            xdialogdelete: {
+                get() {
+                    return this.$store.state.paymentnew.dialog_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_dialog_delete", val)
+                }
+            },
+            xmsgdelete() {
+                return this.$store.state.paymentnew.msg_delete
+            },
+            xnotadelete() {
+                return this.$store.state.paymentnew.nota_delete
+            },
+            xnotedelete: {
+                get() {
+                    return this.$store.state.paymentnew.note_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_note_delete", val)
+                }
+            },
+            openprintnote: {
+                get() {
+                    return this.$store.state.paymentnew.open_print_note
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_open_print_note", false)
+                }
+            },
+            selectedbill() {
+                return this.$store.state.bill.selected_bill
+            },
+            xdisable_btn_pay: {
+                get() {
+                    return this.$store.state.paymentnew.disable_btn_pay
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_disable_btn_pay", val)
+                }
+            },
+            xisauto: {
+                get() {
+                    return this.$store.state.paymentnew.isauto
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_isauto", val)
+                }
+            },
+            in_saving: {
+                get() {
+                    return this.$store.state.paymentnew.in_saving
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_in_saving", val)
+                }
+            }
+        },
+        methods: {
+            changeCard(type, value, idx) {
+                var types = this.$store.state.paymentnew.types
+                if (type === 'card')
+                    types[idx].selected_card = value
+
+                if (type === 'edc')
+                    types[idx].selected_edc = value
+
+                if (type === 'account')
+                    types[idx].selected_account = value
+
+                this.updateTotal()
+            },
+            colorbginp(value) {
+                if (value.chex === false) {
+                    return 'grey'
+                } else {
+                    return 'white'
+                }
+            },
+            showDetail(idx) {
+                var arrOrders = this.$store.state.paymentnew.notes
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentnew/update_ordertests", arrOrders)
+            },
+            hideDetail(idx) {
+                var arrOrders = this.$store.state.paymentnew.notes
+
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentnew/update_ordertests", arrOrders)
+            },
+            convertMoney(money) {
+                return one_money(money)
+            },
+            closeDialogPaySuccess() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentnew/update_dialog_pay_success", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                console.log(this.$store.state.paymentnew.types)
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    current_page: this.$store.state.bill.current_page,
+                    lastidx: idx
+                })
+            },
+            updateTotal() {
+                var xval = this.$store.state.paymentnew.types
+                let xcash = _.filter(xval, {
+                    code: 'CASH'
+                })
+                let xother = _.filter(xval, type => type.code !== 'CASH')
+                var valother = 0
+                xother.forEach(function (obj) {
+                    valother += parseInt(obj.leftvalue)
+                })
+                //console.log('val other '+valother)
+                let restother = this.restbill - valother
+
+                let xchange = parseInt(xcash[0].leftvalue) - restother
+                xcash[0].rightvalue = Math.max(0, xchange)
+                let idxcash = _.findIndex(xval, item => item.code === 'CASH')
+                xval[idxcash] = xcash[0]
+                this.$store.commit("paymentnew/update_types", {
+                    records: xval,
+                    total: xval.length
+                })
+                let totpaid = valother + (parseInt(xcash[0].leftvalue) - Math.max(0, xchange))
+                this.$store.commit("paymentnew/update_total_payment", totpaid)
+
+                this.xdisable_btn_pay = 'Y'
+                var payments = this.$store.state.paymentnew.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                //console.log(this.xdisable_btn_pay)
+                var xxx = 'Y'
+                selected_payments.forEach(function (obj) {
+                    if (parseInt(obj.leftvalue) !== 0)
+                        xxx = 'N'
+
+                    if ((obj.code === 'DEBIT' && parseInt(obj.selected_card.id) !== 0) || (obj.code ===
+                            'DEBIT' && parseInt(obj.selected_edc.id) !== 0))
+                        xxx = 'N'
+
+                    if ((obj.code === 'CREDIT' && parseInt(obj.selected_card.id) !== 0) || (obj.code ===
+                            'CREDIT' && parseInt(obj.selected_edc.id) !== 0))
+                        xxx = 'N'
+
+                })
+                this.xdisable_btn_pay = xxx
+                //console.log('after '+this.xdisable_btn_pay)
+            },
+            async pay() {
+                if (this.in_saving) return;
+                this.in_saving = true;
+            var go_pay = true
+            let xval = this.$store.state.paymentnew.types
+            var valpay = 0
+            var xmsginfo = ''
+            let xcash = _.filter(xval, {code: 'CASH'})
+            xval.forEach(function(obj){
+                valpay += parseInt(obj.leftvalue)
+            })
+            let selected_payments = _.filter(this.$store.state.paymentnew.types, {chex: true})
+            //console.log(selected_payments)
+            selected_payments.forEach(function(xobj){
+                var obj = JSON.parse(JSON.stringify(xobj))
+                console.log(obj)
+                console.log(parseInt(obj.selected_account.id))
+                    if(obj.code === 'CASH' && parseInt(obj.leftvalue) === 0){
+                        go_pay = false
+                        xmsginfo += "<p>Mau bayar pake daun ?</p>"
+                        this.xdisable_btn_pay = 'N'
+                        this.in_saving = false
+                    }   
+                    else if(obj.code === 'DEBIT' && ( parseInt(obj.leftvalue) === 0 || parseInt(obj.selected_card.id) === 0 ||  parseInt(obj.selected_edc.id) === 0 )){
+                        console.log(obj.code)
+                        go_pay = false
+                        xmsginfo += "<p>Bawain pacar bibit buah kedongdong, Kalo bayar pake debit diisi yang lengkap dong</p>"
+                        this.xdisable_btn_pay = 'N'
+                        this.in_saving = false
+                    }   
+                    else if(obj.code === 'CREDIT' && ( parseInt(obj.leftvalue) === 0 || parseInt(obj.selected_card.id) === 0 ||  parseInt(obj.selected_edc.id) === 0 )){
+                        go_pay = false
+                        xmsginfo += "<p>Pergi berlayar pake odong-odong, Kalo bayar pake kredit diisi yang lengkap dong</p>"
+                        this.xdisable_btn_pay = 'N'
+                        this.in_saving = false
+                    }
+                    else if(obj.code === 'TRANSFER' && ( parseInt(obj.leftvalue) === 0 || parseInt(obj.selected_account.id) === 0  || obj.selected_account === '')){
+                        go_pay = false
+                        xmsginfo += "<p>Salah bermanuver kecebur selokan dong, Kalo mau transfer diisi yang lengkap dong</p>"
+                        this.xdisable_btn_pay = 'N'
+                        this.in_saving = false
+                    }
+
+                    
+
+            })
+            if(selected_payments.length > 0 && go_pay){
+                 let prm = {
+                    orderid: this.$store.state.bill.selected_bill.F_BillID,
+                    payments: this.$store.state.paymentnew.types
+                }
+                this.$store.dispatch("paymentnew/pay", prm)
+            }
+            else{
+                if(selected_payments.length == 0)
+                    xmsginfo += "<p>Mau bayar pake daun ?</p>"
+
+                this.$store.commit("paymentnew/update_msg_info",xmsginfo)
+                this.$store.commit("paymentnew/update_open_dialog_info",true)
+                this.xdisable_btn_pay = 'N'
+                        this.in_saving = false
+               // console.log(this.opendialoginfo)
+            }
+            },
+            deleteNote(note, idx) {
+                this.$store.commit("paymentnew/update_note_delete", "")
+                this.$store.commit("paymentnew/update_nota_delete", note)
+                let xmsg = "Yakin , mau hapus nota nomor <span style='color:red'>" + note.note_number + "</span> ?"
+                this.$store.commit("paymentnew/update_msg_delete", xmsg)
+                this.$store.commit("paymentnew/update_dialog_delete", true)
+            },
+            doDeleteNote() {
+                let prm = {
+                    catatan: this.$store.state.paymentnew.note_delete,
+                    nota: this.$store.state.paymentnew.nota_delete
+                }
+                this.$store.dispatch("paymentnew/delete_note", prm)
+            },
+            closeDialogDelete() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentnew/update_dialog_delete", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx
+                })
+            },
+            updateChx(val, idx) {
+                var selpat = this.$store.state.bill.selected_bill
+                var firstamount = 0
+                if (selpat.unpaid)
+                    firstamount = selpat.unpaid
+                let xobj = this.$store.state.paymentnew.types
+
+                if ((xobj[idx].code === 'DEBIT' || xobj[idx].code === 'CREDIT' || xobj[idx].code === 'TRANSFER') &&
+                    val.chex === false) {
+                    xobj[idx].selected_card = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_edc = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_account = {
+                        id: 0,
+                        name: ''
+                    }
+                }
+
+                var valother = 0
+                xobj.forEach(function (obj) {
+                    if (obj.chex && (obj.code != val.code))
+                        valother += parseInt(obj.leftvalue)
+                })
+
+                if (!val.chex) {
+                    xobj[idx].leftvalue = 0
+                    var x = "Y"
+                    this.xdisable_btn_pay = x
+                    console.log('disable ' + this.xdisable_btn_pay)
+                } else
+                    xobj[idx].leftvalue = firstamount - valother
+
+                this.$store.commit("paymentnew/update_types", {
+                    records: xobj,
+                    total: xobj.length
+                })
+                this.updateTotal()
+            },
+            check_disable_btn_status() {
+                this.xdisable_btn_pay = 'N'
+                var payments = this.$store.state.paymentnew.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                console.log(this.xdisable_btn_pay)
+                selected_payments.forEach(function (obj) {
+                    if (obj.leftvalue === 0) {
+                        this.xdisable_btn_pay = 'Y'
+                    }
+                    if (obj.code === 'DEBIT' || obj.code === 'CREDIT' || obj.code === 'TRANSFER') {
+                        console.log(obj)
+                        if (obj.selected_card.id === '0' || obj.selected_card.id === 0 || obj.selected_edc.id ===
+                            '0' || obj.selected_edc.id === 0 || obj.selected_account.id === '0' || obj.selected_account
+                            .id === 0) {
+                            this.xdisable_btn_pay = 'Y'
+                            console.log('oye')
+                            console.log(this.xdisable_btn_pay)
+                        }
+                    }
+                })
+            },
+            printNote(val, idx) {
+                this.printwidth = 600
+                this.printtitle = ""
+                let user = one_user()
+                var rpt = 'rpt_t_010'
+                if (val.note_amount < 0)
+                    rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + val.note_id
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            doPrint() {
+                this.printtitle = ""
+                this.closeDialogPaySuccess()
+                let user = one_user()
+                let payments = this.$store.state.paymentnew.last_payments
+                let xcash = _.filter(payments, {
+                    code: 'CASH'
+                })
+                var rpt = 'rpt_t_010'
+                if (xcash[0].leftvalue < 0)
+                    rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + this.$store.state.paymentnew.idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            printKw() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_002.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            printInvoice() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_001.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentManual.vue b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentManual.vue
new file mode 100644
index 0000000..f52a7e1
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentManual.vue
@@ -0,0 +1,1401 @@
+<template>
+    <v-layout column pb-2 v-if="this.xisauto === 'N'">
+        <v-card class="mb-2" color="white">
+            <v-layout row wrap>
+                <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th class="text-md-center pt-2 pb-2">NO. PEMBAYARAN</th>
+                                <th class="text-md-center pt-2 pb-2"> TIPE PEMBAYARAN </th>
+                                <th class="text-md-center pt-2 pb-2">JUMLAH</th>
+                                <th class="text-md-center pt-2 pb-2">USER</th>
+                                <th class="text-md-center pt-2 pb-2">AKSI</th>
+                            </tr>
+                        </thead>
+                        <tr class="mini-input" v-if="notes.length > 0" v-for="(note,index) in notes">
+                            <td
+                                v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}"
+                                style="text-align:center;vertical-align:center;" align="center" width="30%"
+                            >
+                                {{note.note_number}}<p style="color:blue"> {{ note.d_verif}}</p>
+                                <p style="color:green"> {{ note.d_approved}}</p>
+                                <p style="color:blue"> {{ note.d_confirm}}</p></td>
+                            <td
+                                v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}"
+                                class="text-md-center pl-3 pr-3" width="30%"
+                            >
+                                {{note.paymenttypes_name}}
+                            </td>
+                            <td width="15%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(note.note_amount)}}</td>
+                            <td width="20%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pr-2">{{note.note_user}}</td>
+                            <td class="text-md-center">
+                                <span @click="printNote(note,index)" class="icon-medium-fill-base xs1 white--text grey darken-1 icon-print"></span>
+                                <span v-if="note.SupplierPaymentIsApproved == 'N'" @click="deleteNote(note,index)" class="icon-medium-fill-base xs1 white--text red darken-1 icon-delete"></span>
+                                <span v-if="note.SupplierPaymentIsApproved == 'N'" @click="editNote(note,index)" class="icon-medium-fill-base xs1 white--text green darken-1"><v-icon dark>edit</v-icon></span>
+
+                                <!--<v-btn small  @click="printNote(note,index)" color="primary" dark>
+                                    Print
+                                </v-btn>
+
+                                <v-btn small  @click="editNote(note,index)" v-if="note.note_active === 'Y'" color="error" dark>
+                                    Hapus
+                                </v-btn>-->
+
+                            </td>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length ===  0">
+                            <td colspan="5" class="text-md-center pr-2">
+                                Tidak ada data
+                            </td>
+                        </tr>
+                    </table>
+                </v-flex>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <v-layout row mt-1 mb-1 pl-2 pr-2>
+            </v-layout>
+        </v-card>
+
+        <v-card>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">Total Tagihan</div>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{toRupiah(restbill)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">{{ selectedbill.SupplierInvoiceNumber }}</div>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+            </v-layout>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6 text-md-right>
+                    <v-btn
+                        color="warning" v-if="this.xpaymenttype.coaID && this.$store.state.bill.selected_bill.SupplierPaymentIsConfirm == 'N'"
+                        :disabled="in_saving" dark class="white--text ma-1" @click="pay()"
+                    >
+                        Simpan
+                        <v-icon right dark></v-icon>
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+            <v-layout row pa-2 align-left wrap>
+                <v-flex xs12>
+                    <v-layout row>
+                        <v-flex xs4 pr-1>
+                            <v-text-field
+                                readonly class="amount-right" label="Jumlah Bayar"
+                                v-model="displayBayar" outline prefix="Rp"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex xs4 px-1>
+                            <v-text-field
+                                class="amount-right" label="Total dengan Pembulatan"
+                                v-model="displayTotalDgnPembulatan" outline prefix="Rp"
+                                @blur="onBlurTotalPembulatan" @focus="onFocusTotalPembulatan"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex xs4 pl-1>
+                            <v-menu
+                                readonly class="xs3 pr-2" v-model="menustartdate"
+                                :close-on-content-click="false" :nudge-right="40"
+                                lazy transition="scale-transition" offset-y
+                                full-width max-width="290px" min-width="290px"
+                            >
+                                <template v-slot:activator="{ on }">
+                                    <v-text-field
+                                        readonly v-model="startDateFormatted" label="Tgl. Rencana Bayar"
+                                        outline v-on="on" @blur="date = deFormatedDate(startDateFormatted)"
+                                    ></v-text-field>
+                                </template>
+                                <v-date-picker readonly v-model="xtanggalbayar" no-title @input="menustartdate = false"></v-date-picker>
+                            </v-menu>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs12 mt-2>
+                    <v-layout row>
+                        <v-flex xs6 pr-1>
+                            <v-autocomplete
+                                label="Account" :items="xpaymenttypes" v-model="xpaymenttype"
+                                :search-input.sync="a_coa_search" hide-details auto-select-first no-filter
+                                item-text="coaDescription" outline return-object no-data-text="Cari Account"
+                            >
+                                <template slot="item" slot-scope="{ item }">
+                                    <v-list-tile-content>
+                                        <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
+                                        <v-list-tile-sub-title
+                                            v-text="item.coaAccountNo"></v-list-tile-sub-title>
+                                    </v-list-tile-content>
+                                </template>
+                            </v-autocomplete>
+                        </v-flex>
+                        <v-flex xs6 pl-1>
+                            <v-text-field placeholder="Keterangan" v-model="xketerangan" outline></v-text-field>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+            </v-layout>
+              <!--  <v-layout row>
+                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                        <table>
+                            <tr class="mini-input">
+                                <th class="text-md-center pt-2 pb-2"><v-checkbox style="padding-top:0;margin-top:0" color="blue lighten-3" hide-details @change="changeCbxAll(bar_chx_all)" v-model="bar_chx_all"></v-checkbox></th>
+                                <th class="text-md-center pt-2 pb-2">NO. PO</th>
+                                <th class="text-md-center pt-2 pb-2">JATUH TEMPO</th>
+                                <th class="text-md-center pt-2 pb-2">JUMLAH TAGIHAN</th>
+                                <th class="text-md-center pt-2 pb-2">SISA TAGIHAN</th>
+                                <th class="text-md-center pt-2 pb-2">BAYAR</th>
+                            </tr>
+                            <tr class="mini-input" v-if="tagihans.length > 0" v-for="(tagihan,index) in tagihans">
+                               <td style="width:3%" class="text-xs-center">
+                                    <v-checkbox style="padding-top:0;margin-top:0" color="blue lighten-3" hide-details v-model="tagihan.chex" @change="checkTop(tagihan)"></v-checkbox>
+                                </td>
+                                <td width="20%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" style="text-align:center;vertical-align:center;"
+                                    align="center">{{tagihan.tagihan_number}}
+                                    <p style="color:#800000">{{ tagihan.pasien}}</p></td>
+                                <td width="20%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pl-3 pr-3">{{tagihan.tagihan_duedate}}</td>
+                                <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(tagihan.tagihan_total)}}</td>
+                                <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pr-2">{{convertMoney(tagihan.tagihan_tagihan)}}</td>
+                                <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pr-2">
+                                    <v-text-field style="margin-center:0;padidng-center:0" v-model="tagihan.tagihan_bayar" hide-details></v-text-field>
+                                </td>
+                            </tr>
+                            <tr class="mini-input" v-if="tagihans.length ===  0">
+                                <td colspan="6" class="text-md-center pr-2">
+                                    Tidak ada data
+                                </td>
+                            </tr>
+                        </table>
+                    </v-flex>
+                </v-layout>
+                <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left"></div>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{toRupiah(totpay)}}</kbd></div>
+                </v-flex>
+                    </v-layout> -->
+
+                <!-- <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+                <div>
+                    <v-layout pl-2 row align-center wrap>
+                        <v-flex xs4 class="pa-1">
+                        </v-flex>
+                        <v-flex xs4 class="pa-1">
+                        </v-flex>
+                    </v-layout>
+                    <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+                </div> -->
+        </v-card>
+
+         <template>
+            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn flat @click="doPrint()">
+                            Print
+                        </v-btn>
+                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+            <v-dialog v-model="xdialogdelete" persistent max-width="30%">
+                <v-card>
+                    <v-card-title :class="{ 'red':!_.isEmpty(xnotadelete), 'success':_.isEmpty(xnotadelete) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotadelete)">Peringatan !</span>
+                            <span v-if="_.isEmpty(xnotadelete)">Berhasil !</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgdelete" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" v-if="!_.isEmpty(xnotadelete)" flat @click="doDeleteNote()">
+                            Yakin dong !
+                        </v-btn>
+
+                        <v-btn v-if="!_.isEmpty(xnotadelete)" color="primary" flat @click="xdialogdelete = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotadelete)" color="primary" flat @click="closeDialogDelete()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+            <v-dialog v-model="xdialogedit" persistent max-width="50%">
+                <v-card>
+                    <v-card-title :class="{ 'blue':!_.isEmpty(xnotaedit), 'success':_.isEmpty(xnotaedit) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotaedit)">Form Ubah Data</span>
+                            <span v-if="_.isEmpty(xnotaedit)">Berhasil</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgedit" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
+                                            <v-flex pt-2 pr-2 xs4>
+                                                Tipe Pembayaran :
+                                            </v-flex>
+                                            <v-flex pt-2 pr-2 xs8>
+                                                <v-autocomplete label="Account" :items="xpaymenttypes_edit" v-model="xpaymenttype_edit"
+                                        :search-input.sync="a_coa_search" hide-details auto-select-first no-filter
+                                        item-text="coaDescription" outline return-object no-data-text="Cari Account">
+                                        <template slot="item" slot-scope="{ item }">
+                                            <v-list-tile-content>
+                                                <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
+                                                <v-list-tile-sub-title
+                                                    v-text="item.coaAccountNo"></v-list-tile-sub-title>
+                                            </v-list-tile-content>
+                                        </template>
+                                    </v-autocomplete>
+
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
+                                        <v-flex pt-2 pr-2 xs4>
+                                                Total Bayar (Lama) :
+                                            </v-flex>
+                                            <v-flex pt-2 pr-2 xs8>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" readonly  v-model="xbayar_old"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
+                                        <v-flex pt-2 pr-2 xs4>
+                                                Total Bayar (Baru) :
+                                            </v-flex>
+                                            <v-flex pt-2 pr-2 xs8>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" v-model="xbayar_edit"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
+                                        <v-flex pt-2 pr-2 xs4>
+                                                Keterangan :
+                                            </v-flex>
+                                            <v-flex pt-2 pr-2 xs8>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" v-model="xketerangan_edit"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn  v-if="!_.isEmpty(xnotaedit)" color="info" flat @click="doEditNote()">
+                            Simpan Perubahan
+                        </v-btn>
+                        <v-btn v-if="!_.isEmpty(xnotaedit)" color="primary" flat @click="xdialogedit = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotaedit)" color="primary" flat @click="closeDialogEdit()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote"
+            @close-dialog-print="openprintnote = false"></one-dialog-print>
+            <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="opendialoginfo = false"></one-dialog-info>
+        </v-layout>
+</template>
+<style scoped>
+    .rTable {
+        display: table;
+        width: 100%;
+        border-spacing: 0 .2em;
+    }
+
+    .rTableGroup {
+        display: table-row-group;
+    }
+
+    .rTableRow {
+        display: table-row;
+        font-size: 14px;
+        -webkit-flex-wrap: wrap;
+        /* Safari 6.1+ */
+        flex-wrap: wrap;
+
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        background-color: #ffffff;
+    }
+
+    .rTableCell {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        line-height: 2;
+        border: 1px solid #2196f3;
+        background-color: #ffffff;
+        border-spacing: 5px;
+    }
+
+    .rTableHead {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        padding-bottom: 0px;
+        background-color: #ffffff;
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    .rTableFoot {
+        display: table-footer-group;
+        font-weight: bold;
+        background-color: #ddd;
+    }
+
+    .rTableBody {
+        display: table-row-group;
+    }
+
+    .rfirstCell {
+        border-left: 10px solid #2196f3;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+
+    .caption {
+        border: 1px solid grey;
+        caption-side: bottom;
+        display: table-caption;
+        text-align: center;
+        padding: 5px
+    }
+
+    .label-tagihan {
+        text-align: left;
+        font-size: 25px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-header {
+        text-align: left;
+        font-size: 18px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        text-align: left;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .amount-right {
+        text-align: right !important;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .text-tagihan {
+        text-align: left;
+        font-size: 42px;
+        font-family: open sans, tahoma, sans-serif;
+    }
+
+    .disabled-background {
+        background: #b7b7b7;
+    }
+
+    .input-cash {
+        width: 100%;
+        padding: 8px 14px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 22px;
+        font-weight: 700;
+        text-align: right;
+    }
+
+    .input-plain {
+        width: 100%;
+        padding: 4px 8px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 14px;
+    }
+
+    .v-input,
+    .v-input__slot,
+    .v-messages {
+        margin: 0px;
+        padding: 0px;
+        min-height: 0px;
+    }
+
+    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
+        margin-bottom: 0px;
+    }
+
+    table {
+        font-family: arial, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+        background: white;
+        border: 0px;
+    }
+
+    th,
+    td {
+        border: 1px solid black;
+        border-collapse: collapse;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+
+    table>tr>td {
+        padding: 8px;
+    }
+
+    table>tr>td:first {
+        padding-left: 15px !important;
+    }
+
+    .mini-input .v-input {
+        margin-top: 0px;
+    }
+
+    .mini-input .v-input,
+    .mini-input .v-input--selection-controls,
+    .mini-input .v-input__slot {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: 3px;
+    }
+
+    .mini-input .v-messages {
+        min-height: 0px;
+    }
+
+    .border-bottom-dashed {
+        border-bottom: 1px dashed rgba(0, 0, 0, .12);
+    }
+</style>
+<script>
+    module.exports = {
+        components: {
+            'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue'),
+            'one-field-verification': httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
+            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
+        },
+        data() {
+            return {
+                menustartdate: false,
+                checkbox: true,
+                radioGroup: 1,
+                switchCash: true,
+                switchDebit: false,
+                switchKredit: false,
+                dialog: false,
+                urlprintnote: '',
+                printtitle: '',
+                printwidth: '60%',
+                search_card: '',
+                search_edc: '',
+                isLoading: false,
+                fajrihidebtnpay: 'Y',
+                page: 1,
+                xid: 0,
+                xinv_id: 0,
+                xdetail_id: 0,
+                xnumber: '',
+                xketerangan: '',
+                xketerangan_edit: '',
+                headers: [{
+                        text: "NO.BILL",
+                        align: "Center",
+                        sortable: false,
+                        value: "lab",
+                        width: "5%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "JATUH TEMPO",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "8%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "TOTAL TAGIHAN",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "SISA TAGIHAN",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "BAYAR",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    }
+                ],
+                pagination: {
+                    descending: false,
+                    page: 1,
+                    rowsPerPage: 5,
+                    sortBy: 'trx_id ASC',
+                    totalItems: this.$store.state.paymentmanual.total_transactions
+                },
+                total_with_rounding: 0
+            }
+        },
+        mounted() {
+            this.$store.dispatch("paymentmanual/selectpaymenttype", { search: '' })
+            // this.$store.dispatch("paymentmanual/selectpaymenttype")
+            this.$store.dispatch("paymentmanual/selectcard")
+            this.$store.dispatch("paymentmanual/selectedc")
+        },
+        computed: {
+            opendialoginfo: {
+                get() {
+                    return this.$store.state.paymentmanual.open_dialog_info
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_open_dialog_info",false)
+                }
+            },
+            msginfo: {
+                get() {
+                    return this.$store.state.paymentmanual.msg_info
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_msg_info",false)
+                }
+            },
+            startDateFormatted() {
+                return this.formatDate(this.xtanggalbayar)
+            },
+            xtanggalbayar: {
+                get() {
+                    return this.$store.state.paymentmanual.xtanggalbayar
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_xtanggalbayar",val)
+                }
+            },
+            a_coa_search: {
+                get() {
+                    return this.$store.state.paymentmanual.a_coa_search
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_a_coa_search", val);
+                    //this.aSearchAcCoa(val)
+                }
+            },
+            bar_chx_all: {
+                get() {
+                    return this.$store.state.paymentmanual.bar_chx_all
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_bar_chx_all", val)
+                }
+            },
+            indeterminatex: {
+                get() {
+                    return this.$store.state.paymentmanual.indeterminatex
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_indeterminatex", val)
+                }
+            },
+            cards() {
+                return this.$store.state.paymentmanual.cards
+            },
+            banks() {
+                return this.$store.state.paymentmanual.banks
+            },
+            accounts() {
+                return this.$store.state.paymentmanual.accounts
+            },
+            xmindp_percent() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_percent
+                } else {
+                    return 0
+                }
+            },
+            xmindp_amount() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_amount
+                } else {
+                    return 0
+                }
+            },
+            notes() {
+                return this.$store.state.paymentmanual.notes
+            },
+            tagihans() {
+                return this.$store.state.paymentmanual.tagihans
+            },
+            xordertests() {
+                return this.$store.state.paymentmanual.ordertests
+            },
+            xdialogpaysuccess() {
+                return this.$store.state.paymentmanual.dialog_pay_success
+            },
+            xmsgpaysuccess() {
+                return this.$store.state.paymentmanual.paynumber
+            },
+            types() {
+                return this.$store.state.paymentmanual.types
+            },
+            totpay() {
+                return this.$store.state.paymentmanual.total_payment
+            },
+            xdialogdelete: {
+                get() {
+                    return this.$store.state.paymentmanual.dialog_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_dialog_delete", val)
+                }
+            },
+            xmsgdelete() {
+                return this.$store.state.paymentmanual.msg_delete
+            },
+            xnotadelete() {
+                return this.$store.state.paymentmanual.nota_delete
+            },
+            xnotedelete: {
+                get() {
+                    return this.$store.state.paymentmanual.note_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_note_delete", val)
+                }
+            },
+            xdialogedit: {
+                get() {
+                    return this.$store.state.paymentmanual.dialog_edit
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_dialog_edit", val)
+                }
+            },
+            xmsgedit() {
+                return this.$store.state.paymentmanual.msg_edit
+            },
+            xnotaedit() {
+                return this.$store.state.paymentmanual.nota_edit
+            },
+            xnoteedit: {
+                get() {
+                    return this.$store.state.paymentmanual.note_edit
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_note_edit", val)
+                }
+            },
+            a_loading_coa: {
+              get() {
+                  return this.$store.state.paymentmanual.a_loading_coa;
+              },
+              set(val) {
+                  this.$store.commit("paymentmanual/update_a_loading_coa", val);
+              },
+            },
+            openprintnote: {
+                get() {
+                    return this.$store.state.paymentmanual.open_print_note
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_open_print_note", false)
+                }
+            },
+            selectedbill() {
+                return this.$store.state.bill.selected_bill
+            },
+            xdisable_btn_pay: {
+                get() {
+                    return this.$store.state.paymentmanual.disable_btn_pay
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_disable_btn_pay", val)
+                }
+            },
+            xisauto: {
+                get() {
+                    return this.$store.state.paymentmanual.isauto
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_isauto", val)
+                }
+            },
+            xpaymenttypes() {
+                return this.$store.state.paymentmanual.paymenttypes
+            },
+            xpaymenttype: {
+                get() {
+                    return this.$store.state.paymentmanual.paymenttype
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_paymenttype", val)
+                }
+
+            },
+            xpaymenttypes_edit() {
+                return this.$store.state.paymentmanual.paymenttypes_edit
+            },
+            xpaymenttype_edit: {
+                get() {
+                    return this.$store.state.paymentmanual.paymenttype_edit
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_paymenttype_edit", val)
+                }
+
+            },
+            xcards() {
+                return this.$store.state.paymentmanual.cards
+            },
+            xcard: {
+                get() {
+                    return this.$store.state.paymentmanual.card
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_card", val)
+                }
+
+            },
+            xedcs() {
+                return this.$store.state.paymentmanual.edcs
+            },
+            xedc: {
+                get() {
+                    return this.$store.state.paymentmanual.edc
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_edc", val)
+                }
+
+            },
+            xaccounts() {
+                return this.$store.state.paymentmanual.accounts
+            },
+            xaccount: {
+                get() {
+                    return this.$store.state.paymentmanual.account
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_account", val)
+                }
+
+            },
+            in_saving: {
+                get() {
+                    return this.$store.state.paymentmanual.in_saving
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_in_saving", val)
+                }
+            },
+            xbayar: {
+                get() {
+                    return this.$store.state.paymentmanual.xbayar
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_xbayar", val)
+                }
+            },
+            xrounding: {
+                get() {
+                    return this.$store.state.paymentmanual.xrounding
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_xrounding", val)
+                }
+            },
+            displayTotalDgnPembulatan: {
+                get() {
+                  return this.total_with_rounding
+                },
+                set(val) {
+                  let raw = val.replace(/\./g, '').replace(',', '.');
+                  this.xrounding = parseFloat(raw) || 0;
+                }
+            },
+            restbill() {
+                if (this.$store.state.bill.bills) {
+                    let a_total = this.$store.state.bill.selected_bill.totalbill
+                    let b_total = this.$store.state.paymentmanual.xrounding
+                    // let all_total = parseInt(a_total) + parseInt(b_total)
+
+                    let rbill = b_total == 0 ? a_total : b_total
+                    return rbill
+                } else {
+                    return 0
+                }
+            },
+            displayBayar() {
+                return this.toRupiah(this.xbayar)
+            }
+        },
+        methods: {
+            changeCard(type, value, idx) {
+                var types = this.$store.state.paymentmanual.types
+                if (type === 'card')
+                    types[idx].selected_card = value
+
+                if (type === 'edc')
+                    types[idx].selected_edc = value
+
+                if (type === 'account')
+                    types[idx].selected_account = value
+
+                this.updateTotal()
+            },
+            async aSearchAcCoa(query) {
+                if (!query) return;
+                this.a_loading_coa = true;
+                await this.$store.dispatch("paymentmanual/selectpaymenttype", { search: query });
+                this.a_loading_coa = false;
+            },
+            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')}`
+            },
+            changeBayar() {
+                var bayar = this.xbayar
+                let str = this.restbill
+                var tagihan = parseInt(Number(str.replace(/,/g, '')))
+
+                if (bayar > tagihan){
+                    alert('Jumlah bayar melebihi tagihan , bayar : ' + bayar + ' tagihan: ' + tagihan )
+                    this.xbayar = 0
+                }else{
+                    this.xdisable_btn_pay = 'Y'
+                }
+                console.log(this.xdisable_btn_pay)
+            },
+            colorbginp(value) {
+                if (value.chex === false) {
+                    return 'grey'
+                } else {
+                    return 'white'
+                }
+            },
+            showDetail(idx) {
+                var arrOrders = this.$store.state.paymentmanual.notes
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentmanual/update_ordertests", arrOrders)
+            },
+            hideDetail(idx) {
+                var arrOrders = this.$store.state.paymentmanual.notes
+
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentmanual/update_ordertests", arrOrders)
+            },
+            changeRound(value){
+                this.restbill = 1000000 + value
+            },
+            changeCbxAll(value) {
+                var arr = this.tagihans
+                this.indeterminatex = false
+
+                arr.forEach((el) => {
+                    el.chex = value
+                    el.tagihan_bayar = value == true ? el.tagihan_tagihan : 0
+                })
+
+                var selected = _.filter(arr, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+
+                if (this.totpay > this.xbayar){
+                    alert('Jumlah bayar tagihan yang dipilih melebihi input Jumlah Bayar')
+                var arr = this.tagihans
+                this.indeterminatex = false
+
+                arr.forEach((el) => {
+                    el.chex = false
+                    el.tagihan_bayar = 0
+                })
+
+                var selected = _.filter(arr, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                }
+            },
+            checkTop(pat) {
+                let tagihans = this.$store.state.paymentmanual.tagihans
+                let idx = _.findIndex(tagihans, function (p) {
+                    return p.SupplierInvoiceDetailID == pat.SupplierInvoiceDetailID
+                });
+                tagihans[idx].checx = !tagihans[idx].chex
+                tagihans[idx].tagihan_bayar = tagihans[idx].checx == false ? tagihans[idx].tagihan_tagihan : 0
+                var selected = _.filter(tagihans, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+                console.log('selected ' + selected)
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                console.log('totpaid ' + totpaid)
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+
+                if (this.totpay > this.xbayar) {
+                    let xchange = valx - this.xbayar
+                    tagihans[idx].tagihan_bayar = tagihans[idx].tagihan_bayar - xchange
+                    var selectedx = _.filter(tagihans, function (o) {
+                        return o.chex;
+                    })
+                    this.$store.commit("paymentmanual/update_selected_tagihan", selectedx)
+
+                    var xval = this.$store.state.paymentmanual.selected_tagihan
+                    var valx = 0
+                    xval.forEach(function (obj) {
+                        valx += parseInt(obj.tagihan_bayar)
+                    })
+                    let totpaid = valx
+                    this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                }
+            },
+            convertMoney(money) {
+                return one_money(money)
+            },
+            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}`
+            },
+            closeDialogPaySuccess() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.SupplierPaymentID === this.$store.state.bill.selected_bill
+                    .SupplierPaymentID)
+                this.$store.commit("paymentmanual/update_dialog_pay_success", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                console.log(this.$store.state.paymentmanual.types)
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.init_sdate,
+                    enddate: this.$store.state.bill.init_edate,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    current_page: this.$store.state.bill.current_page,
+                    lastidx: idx
+                })
+            },
+            updateTotal() {
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                // let xchange = this.restbill - valx
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                this.xdisable_btn_pay = 'Y'
+            },
+            async payold() {
+                if (this.in_saving) return;
+                this.in_saving = true;
+                let prm = {
+                    orderid: this.$store.state.bill.selected_bill.SupplierPaymentID,
+                    amount: this.xbayar > this.totpay ? this.totpay: this.xbayar,
+                    paymenttype: this.xpaymenttype.coaID,
+                    card: this.xcard.Nat_BankID,
+                    edc: this.xedc.M_BankAccountID,
+                    account: this.xaccount.M_BankAccountID,
+                    keterangan: this.xketerangan,
+                    bills: this.$store.state.paymentmanual.selected_tagihan
+                }
+                //console.log(prm.amount)
+                this.$store.dispatch("paymentmanual/pay", prm)
+            },
+            async pay() {
+                if (this.in_saving) return;
+                this.in_saving = true;
+                var go_pay = true
+                var xmsginfo = ''
+                let prm = {
+                    orderid: this.$store.state.bill.selected_bill.SupplierPaymentID,
+                    xnumber: this.$store.state.bill.selected_bill.SupplierPaymentNumber,
+                    SupplierInvoiceID : this.$store.state.bill.selected_bill.SupplierInvoiceID,
+                    amount: this.xbayar,
+                    xrounding: this.xrounding,
+                    paymenttype: this.xpaymenttype.coaID,
+                    keterangan: this.xketerangan,
+                    bills: this.$store.state.paymentmanual.selected_tagihan,
+                    notes: this.$store.state.paymentmanual.notes,
+                    totalbill : this.$store.state.bill.selected_bill.totalbill,
+                    paid : this.$store.state.bill.selected_bill.paid,
+                    tanggalbayar : this.xtanggalbayar
+                }
+                //console.log(prm.amount)
+                this.$store.dispatch("paymentmanual/pay", prm)
+            },
+            deleteNote(note, idx) {
+                this.$store.commit("paymentmanual/update_note_delete", "")
+                this.$store.commit("paymentmanual/update_nota_delete", note)
+                let xmsg = "Yakin , mau hapus nota nomor <span style='color:red'>" + note.note_number + "</span> ?"
+                this.$store.commit("paymentmanual/update_msg_delete", xmsg)
+                this.$store.commit("paymentmanual/update_dialog_delete", true)
+            },
+            doDeleteNote() {
+                let prm = {
+                    nota: this.$store.state.paymentmanual.nota_delete
+                }
+                this.$store.dispatch("paymentmanual/delete_note", prm)
+            },
+            editNote(note, idx) {
+                this.xid = note.note_id
+                this.xinv_id = note.note_order_id
+                this.xdetail_id = note.detail_id
+                this.xnumber = note.note_number
+                this.xketerangan_edit = note.keterangan
+                this.xbayar_edit = parseInt(note.note_amount)
+                this.xbayar_old = parseInt(note.note_amount)
+                //this.$store.commit("paymentmanual/update_paymenttypes_edit", [{coaID : note.coaID,coaDescription : note.coaDescription}]);
+                this.$store.dispatch("paymentmanual/selectpaymenttype", { search: note.coaDescription })
+                this.$store.commit("paymentmanual/update_paymenttype_edit", {coaID : note.coaID,coaDescription : note.coaDescription});
+                this.$store.commit("paymentmanual/update_nota_edit", note)
+                let xmsg = "Nomor <span style='color:red'>" + note.note_number + "</span> "
+                this.$store.commit("paymentmanual/update_msg_edit", xmsg)
+                this.$store.commit("paymentmanual/update_dialog_edit", true)
+            },
+            doEditNote() {
+                let prm = {
+                    id: this.xid,
+                    inv_id: this.xinv_id,
+                    detail_id : this.xdetail_id,
+                    note_number: this.xnumber,
+                    keterangan: this.xketerangan_edit,
+                    amount_old: this.xbayar_old,
+                    amount_new: this.xbayar_edit,
+                    paymenttype: this.xpaymenttype_edit.coaID,
+                }
+                this.$store.dispatch("paymentmanual/edit_note", prm)
+            },
+            closeDialogDelete() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
+                    .SupplierInvoiceID)
+                this.$store.commit("paymentmanual/update_dialog_delete", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.init_sdate,
+                    enddate: this.$store.state.bill.init_edate,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx,
+                    current_page: this.$store.state.bill.current_page
+                })
+            },
+            closeDialogEdit() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
+                    .SupplierInvoiceID)
+                this.$store.commit("paymentmanual/update_dialog_edit", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.init_sdate,
+                    enddate: this.$store.state.bill.init_edate,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx,
+                    current_page: this.$store.state.bill.current_page
+                })
+            },
+            updateChx(val, idx) {
+                this.check_disable_btn_status()
+                var selpat = this.$store.state.bill.selected_bill
+                var firstamount = selpat.unpaid
+                //console.log(selpat)
+                let xobj = this.$store.state.paymentmanual.types
+                xobj[idx].leftvalue = 0
+                xobj[idx].rightvalue = 0
+                if ((xobj[idx].code === 'DEBIT' || xobj[idx].code === 'CREDIT' || xobj[idx].code === 'TRANSFER') &&
+                    val.chex === false) {
+                    xobj[idx].selected_card = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_edc = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_account = {
+                        id: 0,
+                        name: ''
+                    }
+                }
+                var selected_payments = _.filter(xobj, function (o) {
+                    return o.chex
+                })
+                if (selected_payments.length === 1) {
+                    xobj.forEach(function (obj, index) {
+                        if (obj.code === selected_payments[0].code) {
+                            xobj[index].leftvalue = firstamount
+                        }
+                    })
+                }
+                this.$store.commit("paymentmanual/update_types", {
+                    records: xobj,
+                    total: xobj.length
+                })
+
+                this.updateTotal()
+            },
+            check_disable_btn_status() {
+                this.xdisable_btn_pay = 'N'
+                var payments = this.$store.state.paymentmanual.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                console.log(this.xdisable_btn_pay)
+                selected_payments.forEach(function (obj) {
+                    if (obj.leftvalue === 0) {
+                        this.xdisable_btn_pay = 'Y'
+                    }
+                    if (obj.code === 'DEBIT' || obj.code === 'CREDIT' || obj.code === 'TRANSFER') {
+                        console.log(obj)
+                        if (obj.selected_card.id === '0' || obj.selected_card.id === 0 || obj.selected_edc.id ===
+                            '0' || obj.selected_edc.id === 0 || obj.selected_account.id === '0' || obj.selected_account
+                            .id === 0) {
+                            this.xdisable_btn_pay = 'Y'
+                            console.log('oye')
+                            console.log(this.xdisable_btn_pay)
+                        }
+                    }
+                })
+            },
+            printNote(val, idx) {
+                this.printwidth = 600
+                this.printtitle = ""
+                let user = one_user()
+                var rpt = 'rpt_payment_faktur'
+                this.urlprintnote = "/birt/run?__report=report/one/accounting/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + val.note_id
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            doPrint() {
+                this.printtitle = ""
+                this.closeDialogPaySuccess()
+                let user = one_user()
+                var rpt = 'rpt_payment_faktur'
+                this.urlprintnote = "/birt/run?__report=report/one/accounting/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + this.$store.state.paymentmanual.idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            printKw() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.SupplierPaymentID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/accounting/rpt_payment_faktur.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            printInvoice() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.SupplierPaymentID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/accounting/rpt_payment_faktur.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            onBlurTotalPembulatan() {
+                let totalRound = this.xrounding;
+                if (totalRound % 1 === 0) {
+                    this.total_with_rounding = this.convertMoney(totalRound) + ",00"
+                } else {
+                    this.total_with_rounding = this.convertMoney(totalRound)
+                }
+            },
+            onFocusTotalPembulatan() {
+                let totalRound = this.xrounding
+                this.total_with_rounding = totalRound.toString().replace('.', ',')
+            }
+        },
+        watch: {
+            a_coa_search(val) {
+                this.aSearchAcCoa(val)
+            },
+            selectedbill(val) {
+                this.xrounding = 0
+                this.total_with_rounding = 0
+            }
+        }
+    }
+</script>
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentMulti.vue b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentMulti.vue
new file mode 100644
index 0000000..9922677
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentMulti.vue
@@ -0,0 +1,1372 @@
+<template>
+    <v-layout column pb-2 v-if="this.xisauto === 'Y'">
+        <!--
+        <v-card class="mb-2" color="white">
+            <v-layout row wrap>
+                <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+                    <table>
+                        <tr>
+                            <th class="text-md-center pt-2 pb-2">NO. PEMBAYARAN</th>
+                            <th class="text-md-center pt-2 pb-2"> TIPE PEMBAYARAN </th>
+                            <th class="text-md-center pt-2 pb-2">JUMLAH</th>
+                            <th class="text-md-center pt-2 pb-2">USER</th>
+                            <th class="text-md-center pt-2 pb-2">AKSI</th>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length > 0" v-for="(note,index) in notes">
+                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" style="text-align:center;vertical-align:center;"
+                                align="center">{{note.note_number}}<p style="color:green"> {{ note.d_approved}}</p>
+                                <p style="color:blue"> {{ note.d_confirm}}</p></td>
+                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pl-3 pr-3">{{note.paymenttypes_name}}</td>
+                            <td width="15%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(note.note_amount)}}</td>
+                            <td width="20%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pr-2">{{note.note_user}}</td>
+                            <td class="text-md-center">
+                                <span @click="printNote(note,index)" class="icon-medium-fill-base xs1 white--text grey darken-1 icon-print"></span>
+                                <span v-if="note.SupplierPaymentIsApproved == 'N'" @click="deleteNote(note,index)" class="icon-medium-fill-base xs1 white--text red darken-1 icon-delete"></span>
+                                <span v-if="note.SupplierPaymentIsApproved == 'N'" @click="editNote(note,index)" class="icon-medium-fill-base xs1 white--text green darken-1"><v-icon dark>edit</v-icon></span>
+
+
+                            </td>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length ===  0">
+                            <td colspan="5" class="text-md-center pr-2">
+                                Tidak ada data
+                            </td>
+                        </tr>
+                    </table>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <v-layout row mt-1 mb-1 pl-2 pr-2>
+            </v-layout>
+            </v-flex>
+        </v-card>
+        -->
+
+        <v-card>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">Total Tagihan</div>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{toRupiah(restbill)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">
+                                {{this.$store.state.bill.selected_bill.SupplierInvoiceNumber}}
+                            </div>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+            </v-layout>
+
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6 text-md-right>
+                    <v-btn
+                        color="warning" v-if="this.totpay > 0 && this.xpaymenttype.coaID"
+                        :disabled="in_saving" dark class="white--text ma-1" @click="pay()"
+                    >
+                        Simpan
+                        <v-icon right dark></v-icon>
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+
+            <v-layout row pa-2 align-left wrap>
+                <v-flex xs12>
+                    <v-layout row>
+                        <v-flex xs6 pa-1>
+                            <v-autocomplete
+                                label="Supplier" :items="xsuppliers" v-model="xsupplier"
+                                :search-input.sync="a_supplier_search" hide-details auto-select-first no-filter
+                                item-text="SupplierName" outline return-object no-data-text="Cari Supplier"
+                            >
+                                <template slot="item" slot-scope="{ item }">
+                                    <v-list-tile-content>
+                                        <v-list-tile-title v-text="item.SupplierName"></v-list-tile-title>
+                                        <v-list-tile-sub-title
+                                            v-text="item.SupplierCode"></v-list-tile-sub-title>
+                                    </v-list-tile-content>
+                                </template>
+                            </v-autocomplete>
+                        </v-flex>
+                        <v-flex xs6 pa-1>
+                            <v-autocomplete
+                                label="Account" :items="xpaymenttypes" v-model="xpaymenttype"
+                                :search-input.sync="a_coa_search" hide-details auto-select-first no-filter
+                                item-text="coaDescription" outline return-object no-data-text="Cari Account">
+                                <template slot="item" slot-scope="{ item }">
+                                    <v-list-tile-content>
+                                        <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
+                                        <v-list-tile-sub-title
+                                            v-text="item.coaAccountNo"></v-list-tile-sub-title>
+                                    </v-list-tile-content>
+                                </template>
+                            </v-autocomplete>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs12>
+                    <v-layout row>
+                           <v-text-field placeholder="Keterangan" v-model="xketerangan" outline></v-text-field>
+                    </v-layout>
+                </v-flex>
+                <v-layout row>
+                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                        <table>
+                            <thead>
+                                <tr class="mini-input">
+                                    <th class="text-md-center pt-2 pb-2">
+                                        <v-checkbox
+                                            style="padding-top:0;margin-top:0"
+                                            color="blue lighten-3" hide-details
+                                            @change="changeCbxAll(bar_chx_all)"
+                                            v-model="bar_chx_all"
+                                        ></v-checkbox>
+                                    </th>
+                                    <th class="text-md-center pt-2 pb-2">NO. INSTRUKSI / NO. TAGIHAN</th>
+                                    <th class="text-md-center pt-2 pb-2">TGL RENCANA BAYAR</th>
+                                    <th class="text-md-center pt-2 pb-2">JUMLAH TAGIHAN</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="mini-input" v-if="tagihans.length > 0" v-for="(tagihan,index) in tagihans">
+                                    <td style="width:3%" class="text-xs-center">
+                                        <v-checkbox style="padding-top:0;margin-top:0" color="blue lighten-3" hide-details v-model="tagihan.chex" @change="checkTop(tagihan)"></v-checkbox>
+                                    </td>
+                                    <td width="20%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" style="text-align:center;vertical-align:center;"
+                                        align="center">{{tagihan.tagihan_number}}
+                                        <p style="color:#800000">{{ tagihan.pasien}}</p>
+                                    </td>
+                                    <td width="20%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pl-3 pr-3">{{tagihan.tagihan_duedate}}</td>
+                                    <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(tagihan.tagihan_total)}}</td>
+                                </tr>
+                                <tr class="mini-input" v-if="tagihans.length ===  0">
+                                    <td colspan="6" class="text-md-center pr-2">
+                                        Tidak ada data
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </v-flex>
+                </v-layout>
+                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+                <div>
+                    <v-layout pl-2 row align-center wrap>
+                        <v-flex xs4 class="pa-1">
+                        </v-flex>
+                        <v-flex xs4 class="pa-1">
+                        </v-flex>
+                    </v-layout>
+                    <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+                </div>
+                <v-layout row pa-2 align-center wrap>
+                    <v-flex xs6>
+                        <div class="label-tagihan text-xs-left">
+                        </div>
+                    </v-flex>
+                    <v-flex xs6>
+                        <div class="text-tagihan text-xs-right"><kbd>{{toRupiah(totpay)}}</kbd></div>
+                    </v-flex>
+                </v-layout>
+            </v-layout>
+        </v-card>
+
+        <template>
+            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn flat @click="doPrint()">
+                            Print
+                        </v-btn>
+                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+            <v-dialog v-model="xdialogdelete" persistent max-width="30%">
+                <v-card>
+                    <v-card-title :class="{ 'red':!_.isEmpty(xnotadelete), 'success':_.isEmpty(xnotadelete) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotadelete)">Peringatan !</span>
+                            <span v-if="_.isEmpty(xnotadelete)">Berhasil !</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgdelete" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" v-if="!_.isEmpty(xnotadelete)" flat @click="doDeleteNote()">
+                            Yakin dong !
+                        </v-btn>
+
+                        <v-btn v-if="!_.isEmpty(xnotadelete)" color="primary" flat @click="xdialogdelete = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotadelete)" color="primary" flat @click="closeDialogDelete()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+            <v-dialog v-model="xdialogedit" persistent max-width="50%">
+                <v-card>
+                    <v-card-title :class="{ 'blue':!_.isEmpty(xnotaedit), 'success':_.isEmpty(xnotaedit) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotaedit)">Form Ubah Data</span>
+                            <span v-if="_.isEmpty(xnotaedit)">Berhasil</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgedit" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
+                                            <v-flex pt-2 pr-2 xs4>
+                                                Tipe Pembayaran :
+                                            </v-flex>
+                                            <v-flex pt-2 pr-2 xs8>
+                                                <v-autocomplete label="Account" :items="xpaymenttypes_edit" v-model="xpaymenttype_edit"
+                                        :search-input.sync="a_coa_search" hide-details auto-select-first no-filter
+                                        item-text="coaDescription" outline return-object no-data-text="Cari Account">
+                                        <template slot="item" slot-scope="{ item }">
+                                            <v-list-tile-content>
+                                                <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
+                                                <v-list-tile-sub-title
+                                                    v-text="item.coaAccountNo"></v-list-tile-sub-title>
+                                            </v-list-tile-content>
+                                        </template>
+                                    </v-autocomplete>
+
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
+                                        <v-flex pt-2 pr-2 xs4>
+                                                Total Bayar (Lama) :
+                                            </v-flex>
+                                            <v-flex pt-2 pr-2 xs8>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" readonly  v-model="xbayar_old"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
+                                        <v-flex pt-2 pr-2 xs4>
+                                                Total Bayar (Baru) :
+                                            </v-flex>
+                                            <v-flex pt-2 pr-2 xs8>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" v-model="xbayar_edit"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotaedit)" row>
+                                        <v-flex pt-2 pr-2 xs4>
+                                                Keterangan :
+                                            </v-flex>
+                                            <v-flex pt-2 pr-2 xs8>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" v-model="xketerangan_edit"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+
+
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn  v-if="!_.isEmpty(xnotaedit)" color="info" flat @click="doEditNote()">
+                            Simpan Perubahan
+                        </v-btn>
+                        <v-btn v-if="!_.isEmpty(xnotaedit)" color="primary" flat @click="xdialogedit = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotaedit)" color="primary" flat @click="closeDialogEdit()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <one-dialog-print
+            :title="printtitle" :width="printwidth" :height="550"
+            :status="openprintnote" :urlprint="urlprintnote"
+            @close-dialog-print="openprintnote = false"
+        ></one-dialog-print>
+        <one-dialog-info
+            :status="opendialoginfo" :msg="msginfo"
+            @close-dialog-info="opendialoginfo = false"
+        ></one-dialog-info>
+    </v-layout>
+</template>
+
+<style scoped>
+    .rTable {
+        display: table;
+        width: 100%;
+        border-spacing: 0 .2em;
+    }
+
+    .rTableGroup {
+        display: table-row-group;
+    }
+
+    .rTableRow {
+        display: table-row;
+        font-size: 14px;
+        -webkit-flex-wrap: wrap;
+        /* Safari 6.1+ */
+        flex-wrap: wrap;
+
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        background-color: #ffffff;
+    }
+
+    .rTableCell {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        line-height: 2;
+        border: 1px solid #2196f3;
+        background-color: #ffffff;
+        border-spacing: 5px;
+    }
+
+    .rTableHead {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        padding-bottom: 0px;
+        background-color: #ffffff;
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    .rTableFoot {
+        display: table-footer-group;
+        font-weight: bold;
+        background-color: #ddd;
+    }
+
+    .rTableBody {
+        display: table-row-group;
+    }
+
+    .rfirstCell {
+        border-left: 10px solid #2196f3;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+
+    .caption {
+        border: 1px solid grey;
+        caption-side: bottom;
+        display: table-caption;
+        text-align: center;
+        padding: 5px
+    }
+
+    .label-tagihan {
+        text-align: left;
+        font-size: 25px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-header {
+        text-align: left;
+        font-size: 18px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        text-align: left;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .amount-right {
+        text-align: right !important;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .text-tagihan {
+        text-align: left;
+        font-size: 42px;
+        font-family: open sans, tahoma, sans-serif;
+    }
+
+    .disabled-background {
+        background: #b7b7b7;
+    }
+
+    .input-cash {
+        width: 100%;
+        padding: 8px 14px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 22px;
+        font-weight: 700;
+        text-align: right;
+    }
+
+    .input-plain {
+        width: 100%;
+        padding: 4px 8px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 14px;
+    }
+
+    .v-input,
+    .v-input__slot,
+    .v-messages {
+        margin: 0px;
+        padding: 0px;
+        min-height: 0px;
+    }
+
+    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
+        margin-bottom: 0px;
+    }
+
+    table {
+        font-family: arial, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+        background: white;
+        border: 0px;
+    }
+
+    th,
+    td {
+        border: 1px solid black;
+        border-collapse: collapse;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+
+    table>tr>td {
+        padding: 8px;
+    }
+
+    table>tr>td:first {
+        padding-left: 15px !important;
+    }
+
+    .mini-input .v-input {
+        margin-top: 0px;
+    }
+
+    .mini-input .v-input,
+    .mini-input .v-input--selection-controls,
+    .mini-input .v-input__slot {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: 3px;
+    }
+
+    .mini-input .v-messages {
+        min-height: 0px;
+    }
+
+    .border-bottom-dashed {
+        border-bottom: 1px dashed rgba(0, 0, 0, .12);
+    }
+</style>
+
+<script>
+    module.exports = {
+        components: {
+            'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue'),
+            'one-field-verification': httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
+            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
+        },
+        data() {
+            return {
+                checkbox: true,
+                radioGroup: 1,
+                switchCash: true,
+                switchDebit: false,
+                switchKredit: false,
+                dialog: false,
+                urlprintnote: '',
+                printtitle: '',
+                printwidth: '60%',
+                search_card: '',
+                search_edc: '',
+                isLoading: false,
+                fajrihidebtnpay: 'Y',
+                page: 1,
+                xid: 0,
+                xinv_id: 0,
+                xdetail_id: 0,
+                xnumber: '',
+                xketerangan: '',
+                xketerangan_edit: '',
+                headers: [{
+                        text: "NO.BILL",
+                        align: "Center",
+                        sortable: false,
+                        value: "lab",
+                        width: "5%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "JATUH TEMPO",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "8%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "TOTAL TAGIHAN",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "SISA TAGIHAN",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "BAYAR",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    }
+                ],
+                pagination: {
+                    descending: false,
+                    page: 1,
+                    rowsPerPage: 5,
+                    sortBy: 'trx_id ASC',
+                    totalItems: this.$store.state.paymentmanual.total_transactions
+                }
+            }
+        },
+        mounted() {
+            this.$store.dispatch("paymentmanual/selectpaymenttype", { search: '' })
+            // this.$store.dispatch("paymentmanual/selectpaymenttype")
+            this.$store.dispatch("paymentmanual/selectcard")
+            this.$store.dispatch("paymentmanual/selectedc")
+        },
+        computed: {
+            opendialoginfo: {
+            get() {
+                return this.$store.state.paymentmanual.open_dialog_info
+            },
+            set(val) {
+                this.$store.commit("paymentmanual/update_open_dialog_info",false)
+            }
+        },
+        msginfo: {
+            get() {
+                return this.$store.state.paymentmanual.msg_info
+            },
+            set(val) {
+                this.$store.commit("paymentmanual/update_msg_info",false)
+            }
+        },
+        xtanggalbayar: {
+            get() {
+                return this.$store.state.paymentmanual.xtanggalbayar
+            },
+            set(val) {
+                this.$store.commit("paymentmanual/update_xtanggalbayar",val)
+            }
+        },
+        a_coa_search: {
+            get() {
+                return this.$store.state.paymentmanual.a_coa_search
+            },
+
+            set(val) {
+                this.$store.commit("paymentmanual/update_a_coa_search", val);
+                //this.aSearchAcCoa(val)
+            }
+        },
+        a_supplier_search: {
+            get() {
+                return this.$store.state.paymentmanual.a_supplier_search
+            },
+
+            set(val) {
+                this.$store.commit("paymentmanual/update_a_supplier_search", val);
+                //this.aSearchAcSupplier(val)
+            }
+        },
+            bar_chx_all: {
+                get() {
+                    return this.$store.state.paymentmanual.bar_chx_all
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_bar_chx_all", val)
+                }
+            },
+            indeterminatex: {
+                get() {
+                    return this.$store.state.paymentmanual.indeterminatex
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_indeterminatex", val)
+                }
+            },
+            cards() {
+                return this.$store.state.paymentmanual.cards
+            },
+            banks() {
+                return this.$store.state.paymentmanual.banks
+            },
+            accounts() {
+                return this.$store.state.paymentmanual.accounts
+            },
+            xmindp_percent() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_percent
+                } else {
+                    return 0
+                }
+            },
+            xmindp_amount() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_amount
+                } else {
+                    return 0
+                }
+            },
+            notes() {
+                return this.$store.state.paymentmanual.notes
+
+            },
+            tagihans() {
+                return this.$store.state.paymentmanual.tagihans
+
+            },
+            xordertests() {
+                return this.$store.state.paymentmanual.ordertests
+            },
+            xdialogpaysuccess() {
+                return this.$store.state.paymentmanual.dialog_pay_success
+            },
+            xmsgpaysuccess() {
+                return this.$store.state.paymentmanual.paynumber
+            },
+            types() {
+                return this.$store.state.paymentmanual.types
+            },
+            totpay() {
+                return this.$store.state.paymentmanual.total_payment
+            },
+            restbill() {
+                if (this.$store.state.bill.bills) {
+                    return this.$store.state.bill.selected_bill.unpaid
+                } else {
+                    return 0
+                }
+
+            },
+            xdialogdelete: {
+                get() {
+                    return this.$store.state.paymentmanual.dialog_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_dialog_delete", val)
+                }
+            },
+            xmsgdelete() {
+                return this.$store.state.paymentmanual.msg_delete
+            },
+            xnotadelete() {
+                return this.$store.state.paymentmanual.nota_delete
+            },
+            xnotedelete: {
+                get() {
+                    return this.$store.state.paymentmanual.note_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_note_delete", val)
+                }
+            },
+            xdialogedit: {
+                get() {
+                    return this.$store.state.paymentmanual.dialog_edit
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_dialog_edit", val)
+                }
+            },
+            xmsgedit() {
+                return this.$store.state.paymentmanual.msg_edit
+            },
+            xnotaedit() {
+                return this.$store.state.paymentmanual.nota_edit
+            },
+            xnoteedit: {
+                get() {
+                    return this.$store.state.paymentmanual.note_edit
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_note_edit", val)
+                }
+            },
+            a_loading_coa: {
+            get() {
+                return this.$store.state.paymentmanual.a_loading_coa;
+            },
+            set(val) {
+                this.$store.commit("paymentmanual/update_a_loading_coa", val);
+            }
+            },
+            a_loading_supplier: {
+            get() {
+                return this.$store.state.paymentmanual.a_loading_supplier;
+            },
+            set(val) {
+                this.$store.commit("paymentmanual/update_a_loading_supplier", val);
+            },
+        },
+            openprintnote: {
+                get() {
+                    return this.$store.state.paymentmanual.open_print_note
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_open_print_note", false)
+                }
+            },
+            selectedbill() {
+                return this.$store.state.bill.selected_bill
+            },
+            xdisable_btn_pay: {
+                get() {
+                    return this.$store.state.paymentmanual.disable_btn_pay
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_disable_btn_pay", val)
+                }
+            },
+            xisauto: {
+                get() {
+                    return this.$store.state.paymentmanual.isauto
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_isauto", val)
+                }
+            },
+            xpaymenttypes() {
+                return this.$store.state.paymentmanual.paymenttypes
+            },
+            xpaymenttype: {
+                get() {
+                    return this.$store.state.paymentmanual.paymenttype
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_paymenttype", val)
+                }
+
+            },
+            xsuppliers() {
+                return this.$store.state.paymentmanual.suppliers
+            },
+            xsupplier: {
+                get() {
+                    return this.$store.state.paymentmanual.supplier
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_supplier", val)
+                    this.$store.dispatch("paymentmanual/selecttagihan", { id: val.SupplierID });
+                }
+
+            },
+            xpaymenttypes_edit() {
+                return this.$store.state.paymentmanual.paymenttypes_edit
+            },
+            xpaymenttype_edit: {
+                get() {
+                    return this.$store.state.paymentmanual.paymenttype_edit
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_paymenttype_edit", val)
+                }
+
+            },
+            xcards() {
+                return this.$store.state.paymentmanual.cards
+            },
+            xcard: {
+                get() {
+                    return this.$store.state.paymentmanual.card
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_card", val)
+                }
+
+            },
+            xedcs() {
+                return this.$store.state.paymentmanual.edcs
+            },
+            xedc: {
+                get() {
+                    return this.$store.state.paymentmanual.edc
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_edc", val)
+                }
+
+            },
+            xaccounts() {
+                return this.$store.state.paymentmanual.accounts
+            },
+            xaccount: {
+                get() {
+                    return this.$store.state.paymentmanual.account
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_account", val)
+                }
+
+            },
+            in_saving: {
+                get() {
+                    return this.$store.state.paymentmanual.in_saving
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_in_saving", val)
+                }
+            },
+            xbayar: {
+                get() {
+                    return this.$store.state.paymentmanual.xbayar
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_xbayar", val)
+                }
+            }
+        },
+        methods: {
+            changeCard(type, value, idx) {
+                var types = this.$store.state.paymentmanual.types
+                if (type === 'card')
+                    types[idx].selected_card = value
+
+                if (type === 'edc')
+                    types[idx].selected_edc = value
+
+                if (type === 'account')
+                    types[idx].selected_account = value
+
+                this.updateTotal()
+            },
+            async aSearchAcCoa(query) {
+            if (!query) return;
+            this.a_loading_coa = true;
+            await this.$store.dispatch("paymentmanual/selectpaymenttype", { search: query });
+            this.a_loading_coa = false;
+        },
+        async aSearchAcSupplier(query) {
+            if (!query) return;
+            this.a_loading_supplier = true;
+            await this.$store.dispatch("paymentmanual/selectsupplier", { search: query });
+            this.a_loading_supplier = false;
+        },
+            changeBayar() {
+                var bayar = this.xbayar
+                let str = this.restbill
+                var tagihan = parseInt(Number(str.replace(/,/g, '')))
+
+                if (bayar > tagihan){
+                    alert('Jumlah bayar melebihi tagihan , bayar : ' + bayar + ' tagihan: ' + tagihan )
+                    this.xbayar = 0
+                }else{
+                    this.xdisable_btn_pay = 'Y'
+                }
+                    console.log(this.xdisable_btn_pay)
+            },
+            colorbginp(value) {
+                if (value.chex === false) {
+                    return 'grey'
+                } else {
+                    return 'white'
+                }
+            },
+            showDetail(idx) {
+                var arrOrders = this.$store.state.paymentmanual.notes
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentmanual/update_ordertests", arrOrders)
+            },
+            hideDetail(idx) {
+                var arrOrders = this.$store.state.paymentmanual.notes
+
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentmanual/update_ordertests", arrOrders)
+            },
+            changeCbxAll(value) {
+                var arr = this.tagihans
+                this.indeterminatex = false
+
+                arr.forEach((el) => {
+                    el.chex = value
+                    el.tagihan_bayar = value == true ? el.tagihan_tagihan : 0
+                })
+
+                var selected = _.filter(arr, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+
+                if (this.totpay > this.xbayar){
+                    alert('Jumlah bayar tagihan yang dipilih melebihi input Jumlah Bayar')
+                var arr = this.tagihans
+                this.indeterminatex = false
+
+                arr.forEach((el) => {
+                    el.chex = false
+                    el.tagihan_bayar = 0
+                })
+
+                var selected = _.filter(arr, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+
+                }
+            },
+            checkTop(pat) {
+                let tagihans = this.$store.state.paymentmanual.tagihans
+                let idx = _.findIndex(tagihans, function (p) {
+                    return p.SupplierInvoiceDetailID == pat.SupplierInvoiceDetailID
+                });
+                tagihans[idx].checx = !tagihans[idx].chex
+                tagihans[idx].tagihan_bayar = tagihans[idx].checx == false ? tagihans[idx].tagihan_tagihan : 0
+                var selected = _.filter(tagihans, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+                console.log('selected ' + selected)
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                console.log('totpaid ' + totpaid)
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+
+                if (this.totpay > this.xbayar) {
+                    let xchange = valx - this.xbayar
+                    tagihans[idx].tagihan_bayar = tagihans[idx].tagihan_bayar - xchange
+                    var selectedx = _.filter(tagihans, function (o) {
+                        return o.chex;
+                    })
+                    this.$store.commit("paymentmanual/update_selected_tagihan", selectedx)
+
+                    var xval = this.$store.state.paymentmanual.selected_tagihan
+                    var valx = 0
+                    xval.forEach(function (obj) {
+                        valx += parseInt(obj.tagihan_bayar)
+                    })
+                    let totpaid = valx
+                    this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                }
+
+            },
+            convertMoney(money) {
+                return one_money(money)
+            },
+            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}`
+            },
+            closeDialogPaySuccess() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.SupplierPaymentID === this.$store.state.bill.selected_bill
+                    .SupplierPaymentID)
+                this.$store.commit("paymentmanual/update_dialog_pay_success", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                console.log(this.$store.state.paymentmanual.types)
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.init_sdate,
+                    enddate: this.$store.state.bill.init_edate,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    current_page: this.$store.state.bill.current_page,
+                    lastidx: idx
+                })
+            },
+            updateTotal() {
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                // let xchange = this.restbill - valx
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                this.xdisable_btn_pay = 'Y'
+            },
+            async payold() {
+                if (this.in_saving) return;
+                this.in_saving = true;
+                let prm = {
+                    orderid: this.$store.state.bill.selected_bill.SupplierPaymentID,
+                    amount: this.xbayar > this.totpay ? this.totpay: this.xbayar,
+                    paymenttype: this.xpaymenttype.coaID,
+                    card: this.xcard.Nat_BankID,
+                    edc: this.xedc.M_BankAccountID,
+                    account: this.xaccount.M_BankAccountID,
+                    keterangan: this.xketerangan,
+                    bills: this.$store.state.paymentmanual.selected_tagihan
+                }
+                //console.log(prm.amount)
+                this.$store.dispatch("paymentmanual/pay", prm)
+            },
+            async pay() {
+                // alert(this.xbayar)
+
+               if (this.in_saving) return;
+                this.in_saving = true;
+            var go_pay = true
+            var xmsginfo = ''
+                        let prm = {
+                    orderid: this.$store.state.bill.selected_bill.SupplierInvoiceID,
+                    amount: this.xbayar,
+                    paymenttype: this.xpaymenttype.coaID,
+                    supplier: this.xsupplier.SupplierID,
+                    keterangan: this.xketerangan,
+                    bills: this.$store.state.paymentmanual.selected_tagihan,
+                    totalbill : this.$store.state.bill.selected_bill.totalbill,
+                    paid : this.$store.state.bill.selected_bill.paid,
+                    tanggalbayar : moment(this.xtanggalbayar, 'DDMMYYYY').format('DD-MM-YYYY')
+                }
+                //console.log(prm.amount)
+                this.$store.dispatch("paymentmanual/pay", prm)
+
+
+            },
+            deleteNote(note, idx) {
+                this.$store.commit("paymentmanual/update_note_delete", "")
+                this.$store.commit("paymentmanual/update_nota_delete", note)
+                let xmsg = "Yakin , mau hapus nota nomor <span style='color:red'>" + note.note_number + "</span> ?"
+                this.$store.commit("paymentmanual/update_msg_delete", xmsg)
+                this.$store.commit("paymentmanual/update_dialog_delete", true)
+            },
+            doDeleteNote() {
+                let prm = {
+                    nota: this.$store.state.paymentmanual.nota_delete
+                }
+                this.$store.dispatch("paymentmanual/delete_note", prm)
+            },
+            editNote(note, idx) {
+                this.xid = note.note_id
+                this.xinv_id = note.note_order_id
+                this.xdetail_id = note.detail_id
+                this.xnumber = note.note_number
+                this.xketerangan_edit = note.keterangan
+                this.xbayar_edit = parseInt(note.note_amount)
+                this.xbayar_old = parseInt(note.note_amount)
+                //this.$store.commit("paymentmanual/update_paymenttypes_edit", [{coaID : note.coaID,coaDescription : note.coaDescription}]);
+                this.$store.dispatch("paymentmanual/selectpaymenttype", { search: note.coaDescription })
+                this.$store.commit("paymentmanual/update_paymenttype_edit", {coaID : note.coaID,coaDescription : note.coaDescription});
+                this.$store.commit("paymentmanual/update_nota_edit", note)
+                let xmsg = "Nomor <span style='color:red'>" + note.note_number + "</span> "
+                this.$store.commit("paymentmanual/update_msg_edit", xmsg)
+                this.$store.commit("paymentmanual/update_dialog_edit", true)
+            },
+            doEditNote() {
+                let prm = {
+                    id: this.xid,
+                    inv_id: this.xinv_id,
+                    detail_id : this.xdetail_id,
+                    note_number: this.xnumber,
+                    keterangan: this.xketerangan_edit,
+                    amount_old: this.xbayar_old,
+                    amount_new: this.xbayar_edit,
+                    paymenttype: this.xpaymenttype_edit.coaID,
+                }
+                this.$store.dispatch("paymentmanual/edit_note", prm)
+            },
+            closeDialogDelete() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
+                    .SupplierInvoiceID)
+                this.$store.commit("paymentmanual/update_dialog_delete", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.init_sdate,
+                    enddate: this.$store.state.bill.init_edate,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx,
+                    current_page: this.$store.state.bill.current_page
+                })
+            },
+            closeDialogEdit() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
+                    .SupplierInvoiceID)
+                this.$store.commit("paymentmanual/update_dialog_edit", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.init_sdate,
+                    enddate: this.$store.state.bill.init_edate,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx,
+                    current_page: this.$store.state.bill.current_page
+                })
+            },
+            updateChx(val, idx) {
+                this.check_disable_btn_status()
+                var selpat = this.$store.state.bill.selected_bill
+                var firstamount = selpat.unpaid
+                //console.log(selpat)
+                let xobj = this.$store.state.paymentmanual.types
+                xobj[idx].leftvalue = 0
+                xobj[idx].rightvalue = 0
+                if ((xobj[idx].code === 'DEBIT' || xobj[idx].code === 'CREDIT' || xobj[idx].code === 'TRANSFER') &&
+                    val.chex === false) {
+                    xobj[idx].selected_card = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_edc = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_account = {
+                        id: 0,
+                        name: ''
+                    }
+                }
+                var selected_payments = _.filter(xobj, function (o) {
+                    return o.chex
+                })
+                if (selected_payments.length === 1) {
+                    xobj.forEach(function (obj, index) {
+                        if (obj.code === selected_payments[0].code) {
+                            xobj[index].leftvalue = firstamount
+                        }
+                    })
+                }
+                this.$store.commit("paymentmanual/update_types", {
+                    records: xobj,
+                    total: xobj.length
+                })
+
+
+                this.updateTotal()
+            },
+            check_disable_btn_status() {
+                this.xdisable_btn_pay = 'N'
+                var payments = this.$store.state.paymentmanual.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                console.log(this.xdisable_btn_pay)
+                selected_payments.forEach(function (obj) {
+                    if (obj.leftvalue === 0) {
+                        this.xdisable_btn_pay = 'Y'
+                    }
+                    if (obj.code === 'DEBIT' || obj.code === 'CREDIT' || obj.code === 'TRANSFER') {
+                        console.log(obj)
+                        if (obj.selected_card.id === '0' || obj.selected_card.id === 0 || obj.selected_edc.id ===
+                            '0' || obj.selected_edc.id === 0 || obj.selected_account.id === '0' || obj.selected_account
+                            .id === 0) {
+                            this.xdisable_btn_pay = 'Y'
+                            console.log('oye')
+                            console.log(this.xdisable_btn_pay)
+                        }
+                    }
+                })
+            },
+            printNote(val, idx) {
+                this.printwidth = 600
+                this.printtitle = ""
+                let user = one_user()
+                var rpt = 'rpt_payment_faktur'
+                this.urlprintnote = "/birt/run?__report=report/one/accounting/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + val.note_id
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            doPrint() {
+                this.printtitle = ""
+                this.closeDialogPaySuccess()
+                let user = one_user()
+                var rpt = 'rpt_payment_faktur'
+                this.urlprintnote = "/birt/run?__report=report/one/accounting/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + this.$store.state.paymentmanual.idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            printKw() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.SupplierPaymentID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/accounting/rpt_payment_faktur.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            printInvoice() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.SupplierPaymentID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/accounting/rpt_payment_faktur.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            }
+        },
+        watch: {
+        a_coa_search(val) {
+            this.aSearchAcCoa(val)
+        },
+        a_supplier_search(val) {
+            this.aSearchAcSupplier(val)
+        }
+    }
+    }
+</script>
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentNew.vue b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentNew.vue
new file mode 100644
index 0000000..d959543
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentNew.vue
@@ -0,0 +1,815 @@
+<template>
+    <v-layout column pb-2>
+        <v-card class="mb-2" color="white">
+            <v-layout row wrap>
+                <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+                    <div class="rTable">
+                        <div class="rTableHeading">
+                            <div style="width:30%" class="rTableHead">NO. PEMBAYARAN</div>
+                            <div style="width:30%" class="rTableHead">TIPE PEMBAYARAN</div>
+                            <div style="width:10%" class="rTableHead">JUMLAH</div>
+                            <div style="width:10%" class="rTableHead">USER</div>
+                            <div style="width:10%" class="rTableHead">AKSI</div>
+                        </div>
+                    </div>
+                    <div v-if="notes.length === 0" class="rTable pt-2">
+                        <div class="rTableRow">
+                            <div style="width:100%;text-align:center" class="rTableCell">Belum ada data</div>
+                        </div>
+                    </div>
+                    <div v-if="notes.length > 0" v-for="(vo,idx) in notes" :key="vo.F_BillPaymentID">
+                        <div class="rTable">
+                            <div class="rTableGroup">
+                                <div class="rTableRow">
+                                    <div style="width:25%" class="rTableCell rfirstCell">{{vo.note_number}}</div>
+                                    <div style="width:25%" class="rTableCell">{{vo.paymenttypes_name}}</div>
+                                    <div style="width:20%" class="rTableCell">{{convertMoney(vo.note_amount)}}</div>
+                                    <div style="width:10%" class="rTableCell">{{vo.note_user}}</div>
+                                    <div style="width:10%" class="rTableCell">
+                                        <v-icon style="color:#757575" class="text-sm-right" @click="printNote(vo,idx)">print</v-icon>
+                                        <!--<v-icon v-if="vo.show_detail === 'N'" style="color:#757575" class="text-sm-right" @click="showDetail(idx)">more_vert</v-icon>
+                                        <v-icon v-if="vo.show_detail === 'Y'" style="color:#757575" class="text-sm-right" @click="hideDetail(idx)">more_vert</v-icon>-->
+
+                                    </div>
+                                </div>
+                            </div>
+                            <transition name="fade">
+                                <div v-if="vo.show_detail === 'Y'" style="width:100%;border:1px solid black" class="caption">
+                                    <v-layout row>
+                                        <table>
+                                            <tr>
+                                                <th style="width:30%" class="text-md-center pt-2 pb-2">NO. REG</th>
+                                                <th style="width:30%" class="text-md-center pt-2 pb-2">TOTAL TAGIHAN</th>
+                                                <th style="width:30%" class="text-md-center pt-2 pb-2">TOTAL BAYAR</th>
+
+                                            </tr>
+                                            <tr v-for="(vt,tidx) in vo.tests" :key="vt.F_BillPaymentDetailID">
+                                                <td class="text-md-left pl-3">
+                                                   {{vt.T_OrderHeaderLabNumber}}
+                                                </td>
+                                                <td class="text-md-right pr-2">
+                                                    {{convertMoney(vt.F_BillDetailTotal)}}
+                                                </td>
+                                                <td class="text-md-right pr-2">
+                                                    {{convertMoney(vt.F_BillPaymentDetailAmount)}}
+                                                </td>
+                                            </tr>
+
+                                            <!--<tfoot>
+                            <tr>
+                                <th style="background:#03a9f43d" colspan="3" class="text-md-right pr-2 pt-1 pb-1">SUB TOTAL</th>
+                                <th style="background:#03a9f43d" class="text-md-right pr-2 pt-2 pb-2" colspan="2">300.000</th>
+
+                            </tr>
+                            <tr>
+                                <th colspan="3"  class="text-md-right pr-2 pt-1 pb-1">DISKON PEMBULATAN</th>
+                                <th class="text-md-right pr-2 pt-1 pb-1"  colspan="2">0</th>
+
+                            </tr>
+                            <tr>
+                                <th style="background:#03a9f43d" colspan="3"  class="text-md-right pr-2 pt-2 pb-2">TOTAL</th>
+                                <th style="background:#03a9f43d" class="text-md-right pr-2 pt-1 pb-1"  colspan="2">300.000</th>
+
+                            </tr>
+                            </tfoot>-->
+                                        </table>
+                                    </v-layout>
+                                </div>
+                            </transition>
+                        </div>
+                    </div>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <v-layout row mt-1 mb-1 pl-2 pr-2>
+            </v-layout>
+            </v-flex>
+        </v-card>
+        <v-card>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">Total Tagihan</div>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout pt-1 row>
+                        <v-flex xs9>
+                            <!--<div class="text-xs-left warning--text">Minimun DP ({{xmindp_percent}}%)</div>-->
+                        </v-flex>
+                        <v-flex xs3>
+                            <!--<div class="text-xs-right warning--text">{{convertMoney(xmindp_amount)}}</div>-->
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(restbill)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <div v-for="(type, index) in types">
+                <v-layout row pt-2 pb-1 pl-2 align-center wrap>
+                    <v-flex xs12>
+                        <v-switch v-model="type.chex" @change="updateChx(type,index)" :label="type.chexlabel"></v-switch>
+                    </v-flex>
+                </v-layout>
+                <v-layout pl-2 row align-center wrap>
+                    <v-flex xs4 class="pa-1">
+                        <!--<input type="text" @change="updateTotal()" :class="{ 'disabled-background':type.chex === false }" :disabled="!type.chex"  v-model="type.leftvalue" class="input-plain text-xs-right font-weight-bold"/>-->
+                        <v-text-field label="Jumlah" :disabled="!type.chex" v-model="type.leftvalue" @change="updateTotal()" class="amount-right"
+                            reverse outline></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'CASH' || type.code === 'VOUCHER'" class="pa-1">
+                        <v-text-field v-if="type.code === 'CASH'" label="Kembali" :disabled="!type.chex" v-model="type.rightvalue" class="amount-right"
+                            reverse @change="updateTotal()" outline></v-text-field>
+                        <v-text-field v-if="type.code === 'VOUCHER'" label="Kode Voucher" :disabled="!type.chex" v-model="type.rightvalue" class="amount-right"
+                            outline></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'DEBIT' || type.code === 'CREDIT' || type.code === 'TRANSFER'" class="pa-1">
+                        <v-autocomplete v-if="type.code !== 'TRANSFER'" label="Kartu" v-model="type.selected_card" @change="changeCard('card',type.selected_card,index)"
+                            :disabled="!type.chex" :items="banks" auto-select-first no-filter outline item-text="name" item-value="id"
+                            return-object no-data-text="">
+                        </v-autocomplete>
+                        <v-autocomplete v-if="type.code === 'TRANSFER'" label="Nomor Rekening" v-model="type.selected_account" @change="changeCard('account',type.selected_account,index)"
+                            :disabled="!type.chex" :items="accounts" auto-select-first outline no-filter item-text="name" item-value="id"
+                            return-object no-data-text="">
+                        </v-autocomplete>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'DEBIT' || type.code === 'CREDIT'" class="pa-1">
+                        <v-autocomplete label="EDC" v-model="type.selected_edc" @change="changeCard('edc',type.selected_card,index)" :disabled="!type.chex"
+                            :items="accounts" auto-select-first outline no-filter item-text="name" item-value="id" return-object
+                            no-data-text="">
+                        </v-autocomplete>
+                    </v-flex>
+                </v-layout>
+                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            </div>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <div class="label-tagihan text-xs-left">
+                        <v-btn v-if="xdisable_btn_pay === 'N'" @click="pay()" color="warning" dark>
+                            Bayar
+                        </v-btn>
+                    </div>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(totpay)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+
+
+        <template>
+            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn flat @click="doPrint()">
+                            Print
+                        </v-btn>
+                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+
+            <v-dialog v-model="xdialogdelete" persistent max-width="30%">
+                <v-card>
+                    <v-card-title :class="{ 'red':!_.isEmpty(xnotadelete), 'success':_.isEmpty(xnotadelete) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotadelete)">Peringatan !</span>
+                            <span v-if="_.isEmpty(xnotadelete)">Berhasil !</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgdelete" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotadelete)" row>
+                                            <v-flex pt-2 pr-2 xs12>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" placeholder="Catatan (*Wajib diisi)" v-model="xnotedelete"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" v-if="!_.isEmpty(xnotadelete) && xnotedelete " flat @click="doDeleteNote()">
+                            Yakin dong !
+                        </v-btn>
+
+                        <v-btn v-if="!_.isEmpty(xnotadelete)" color="primary" flat @click="xdialogdelete = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotadelete)" color="primary" flat @click="closeDialogDelete()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
+        </template>
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote"
+            @close-dialog-print="openprintnote = false"></one-dialog-print>
+    </v-layout>
+</template>
+<style scoped>
+    .rTable {
+        display: table;
+        width: 100%;
+        border-spacing: 0 .2em;
+    }
+
+    .rTableGroup {
+        display: table-row-group;
+    }
+
+    .rTableRow {
+        display: table-row;
+        font-size: 14px;
+        -webkit-flex-wrap: wrap;
+        /* Safari 6.1+ */
+        flex-wrap: wrap;
+
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        background-color: #fffff;
+    }
+
+    .rTableCell {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        line-height: 2;
+        border: 1px solid #2196f3;
+        background-color: #fffff;
+        border-spacing: 5px;
+    }
+
+    .rTableHead {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        padding-bottom: 0px;
+        background-color: #fffff;
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    .rTableFoot {
+        display: table-footer-group;
+        font-weight: bold;
+        background-color: #ddd;
+    }
+
+    .rTableBody {
+        display: table-row-group;
+    }
+
+    .rfirstCell {
+        border-left: 10px solid #2196f3;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+    .caption {
+        border: 1px solid grey;
+        caption-side: bottom;
+        display: table-caption;
+        text-align: center;
+        padding: 5px
+    }
+    .label-tagihan {
+        text-align: left;
+        font-size: 25px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-header {
+        text-align: left;
+        font-size: 18px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        text-align: left;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .amount-right {
+        text-align: right !important;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .text-tagihan {
+        text-align: left;
+        font-size: 42px;
+        font-family: open sans, tahoma, sans-serif;
+    }
+
+    .disabled-background {
+        background: #b7b7b7;
+    }
+
+    .input-cash {
+        width: 100%;
+        padding: 8px 14px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 22px;
+        font-weight: 700;
+        text-align: right;
+    }
+
+    .input-plain {
+        width: 100%;
+        padding: 4px 8px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 14px;
+    }
+
+    .v-input,
+    .v-input__slot,
+    .v-messages {
+        margin: 0px;
+        padding: 0px;
+        min-height: 0px;
+    }
+
+    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
+        margin-bottom: 0px;
+    }
+
+    table {
+        font-family: arial, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+        background: white;
+        border: 0px;
+    }
+
+    th,
+    td {
+        border: 1px solid black;
+        border-collapse: collapse;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+
+    table>tr>td {
+        padding: 8px;
+    }
+
+    table>tr>td:first {
+        padding-left: 15px !important;
+    }
+
+    .mini-input .v-input {
+        margin-top: 0px;
+    }
+
+    .mini-input .v-input,
+    .mini-input .v-input--selection-controls,
+    .mini-input .v-input__slot {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: 3px;
+    }
+
+    .mini-input .v-messages {
+        min-height: 0px;
+    }
+
+    .border-bottom-dashed {
+        border-bottom: 1px dashed rgba(0, 0, 0, .12);
+    }
+</style>
+<script>
+    module.exports = {
+        components: {
+            'one-field-verification': httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
+            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
+        },
+        data() {
+            return {
+                checkbox: true,
+                radioGroup: 1,
+                switchCash: true,
+                switchDebit: false,
+                switchKredit: false,
+                dialog: false,
+                urlprintnote: '',
+                printtitle: '',
+                printwidth: '60%',
+                search_card: '',
+                search_edc: '',
+                isLoading: false,
+                fajrihidebtnpay: 'Y'
+            }
+        },
+        mounted() {
+            this.$store.dispatch("paymentnew/lookup_type")
+            this.$store.dispatch("paymentnew/lookup_banks")
+            this.$store.dispatch("paymentnew/lookup_accounts")
+        },
+        computed: {
+            cards() {
+                return this.$store.state.paymentnew.cards
+            },
+            banks() {
+                return this.$store.state.paymentnew.banks
+            },
+            accounts() {
+                return this.$store.state.paymentnew.accounts
+            },
+            xmindp_percent() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_percent
+                } else {
+                    return 0
+                }
+            },
+            xmindp_amount() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_amount
+                } else {
+                    return 0
+                }
+            },
+            notes() {
+                return this.$store.state.paymentnew.notes
+
+            },
+            xordertests() {
+                return this.$store.state.paymentnew.ordertests
+            },
+            xdialogpaysuccess() {
+                return this.$store.state.paymentnew.dialog_pay_success
+            },
+            xmsgpaysuccess() {
+                return this.$store.state.paymentnew.paynumber
+            },
+            types() {
+                return this.$store.state.paymentnew.types
+            },
+            totpay() {
+                return this.$store.state.paymentnew.total_payment
+            },
+            restbill() {
+                if (this.$store.state.bill.bills) {
+                    return this.$store.state.bill.selected_bill.unpaid
+                } else {
+                    return 0
+                }
+
+            },
+            xdialogdelete: {
+                get() {
+                    return this.$store.state.paymentnew.dialog_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_dialog_delete", val)
+                }
+            },
+            xmsgdelete() {
+                return this.$store.state.paymentnew.msg_delete
+            },
+            xnotadelete() {
+                return this.$store.state.paymentnew.nota_delete
+            },
+            xnotedelete: {
+                get() {
+                    return this.$store.state.paymentnew.note_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_note_delete", val)
+                }
+            },
+            openprintnote: {
+                get() {
+                    return this.$store.state.paymentnew.open_print_note
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_open_print_note", false)
+                }
+            },
+            selectedbill() {
+                return this.$store.state.bill.selected_bill
+            },
+            xdisable_btn_pay: {
+                get() {
+                    return this.$store.state.paymentnew.disable_btn_pay
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_disable_btn_pay", val)
+                }
+            },
+
+        },
+        methods: {
+            changeCard(type, value, idx) {
+                var types = this.$store.state.paymentnew.types
+                if (type === 'card')
+                    types[idx].selected_card = value
+
+                if (type === 'edc')
+                    types[idx].selected_edc = value
+
+                if (type === 'account')
+                    types[idx].selected_account = value
+
+                this.updateTotal()
+            },
+            colorbginp(value) {
+                if (value.chex === false) {
+                    return 'grey'
+                } else {
+                    return 'white'
+                }
+            },
+            showDetail(idx) {
+                var arrOrders = this.$store.state.paymentnew.notes
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentnew/update_ordertests", arrOrders)
+            },
+            hideDetail(idx) {
+                var arrOrders = this.$store.state.paymentnew.notes
+
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentnew/update_ordertests", arrOrders)
+            },
+            convertMoney(money) {
+                return one_money(money)
+            },
+            closeDialogPaySuccess() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentnew/update_dialog_pay_success", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                console.log(this.$store.state.paymentnew.types)
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    current_page: this.$store.state.bill.current_page,
+                    lastidx: idx
+                })
+            },
+            updateTotal() {
+                /*var x = this.xdisable_btn_pay === 'N'?'Y':'N'
+                this.xdisable_btn_pay = x
+                console.log(this.xdisable_btn_pay)*/
+                var xval = this.$store.state.paymentnew.types
+                let xcash = _.filter(xval, {
+                    code: 'CASH'
+                })
+                let xother = _.filter(xval, type => type.code !== 'CASH')
+                var valother = 0
+                xother.forEach(function (obj) {
+                    valother += parseInt(obj.leftvalue)
+                })
+                //console.log('val other '+valother)
+                let restother = this.restbill - valother
+
+                let xchange = parseInt(xcash[0].leftvalue) - restother
+                xcash[0].rightvalue = Math.max(0, xchange)
+                let idxcash = _.findIndex(xval, item => item.code === 'CASH')
+                xval[idxcash] = xcash[0]
+                this.$store.commit("paymentnew/update_types", {
+                    records: xval,
+                    total: xval.length
+                })
+                let totpaid = valother + (parseInt(xcash[0].leftvalue) - Math.max(0, xchange))
+                this.$store.commit("paymentnew/update_total_payment", totpaid)
+
+                this.xdisable_btn_pay = 'Y'
+                var payments = this.$store.state.paymentnew.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                //console.log(this.xdisable_btn_pay)
+                var xxx = 'Y'
+                selected_payments.forEach(function (obj) {
+                    if (parseInt(obj.leftvalue) !== 0)
+                        xxx = 'N'
+
+                    if ((obj.code === 'DEBIT' && parseInt(obj.selected_card.id) !== 0) || (obj.code ===
+                            'DEBIT' && parseInt(obj.selected_edc.id) !== 0))
+                        xxx = 'N'
+
+                    if ((obj.code === 'CREDIT' && parseInt(obj.selected_card.id) !== 0) || (obj.code ===
+                            'CREDIT' && parseInt(obj.selected_edc.id) !== 0))
+                        xxx = 'N'
+
+                })
+                this.xdisable_btn_pay = xxx
+                //console.log('after '+this.xdisable_btn_pay)
+            },
+            pay() {
+                var xval = this.$store.state.paymentnew.types
+                var valpay = 0
+                let xcash = _.filter(xval, {
+                    code: 'CASH'
+                })
+                xval.forEach(function (obj) {
+                    valpay += parseInt(obj.leftvalue)
+                })
+                let prm = {
+                    orderid: this.$store.state.bill.selected_bill.F_BillID,
+                    payments: this.$store.state.paymentnew.types
+                }
+                this.$store.dispatch("paymentnew/pay", prm)
+            },
+            deleteNote(note, idx) {
+                this.$store.commit("paymentnew/update_note_delete", "")
+                this.$store.commit("paymentnew/update_nota_delete", note)
+                let xmsg = "Yakin , mau hapus nota nomor <span style='color:red'>" + note.note_number + "</span> ?"
+                this.$store.commit("paymentnew/update_msg_delete", xmsg)
+                this.$store.commit("paymentnew/update_dialog_delete", true)
+            },
+            doDeleteNote() {
+                let prm = {
+                    catatan: this.$store.state.paymentnew.note_delete,
+                    nota: this.$store.state.paymentnew.nota_delete
+                }
+                this.$store.dispatch("paymentnew/delete_note", prm)
+            },
+            closeDialogDelete() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentnew/update_dialog_delete", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx
+                })
+            },
+            updateChx(val, idx) {
+                //this.check_disable_btn_status()
+                var selpat = this.$store.state.bill.selected_bill
+                var firstamount = selpat.unpaid
+                //console.log(selpat)
+                let xobj = this.$store.state.paymentnew.types
+                xobj[idx].leftvalue = 0
+                xobj[idx].rightvalue = 0
+                if ((xobj[idx].code === 'DEBIT' || xobj[idx].code === 'CREDIT' || xobj[idx].code === 'TRANSFER') &&
+                    val.chex === false) {
+                    xobj[idx].selected_card = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_edc = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_account = {
+                        id: 0,
+                        name: ''
+                    }
+                }
+                var selected_payments = _.filter(xobj, function (o) {
+                    return o.chex
+                })
+                if (selected_payments.length === 1) {
+                    xobj.forEach(function (obj, index) {
+                        if (obj.code === selected_payments[0].code) {
+                            xobj[index].leftvalue = firstamount
+                        }
+                    })
+                }
+                this.$store.commit("paymentnew/update_types", {
+                    records: xobj,
+                    total: xobj.length
+                })
+
+
+                this.updateTotal()
+            },
+            check_disable_btn_status() {
+                this.xdisable_btn_pay = 'N'
+                var payments = this.$store.state.paymentnew.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                console.log(this.xdisable_btn_pay)
+                selected_payments.forEach(function (obj) {
+                    if (obj.leftvalue === 0) {
+                        this.xdisable_btn_pay = 'Y'
+                    }
+                    if (obj.code === 'DEBIT' || obj.code === 'CREDIT' || obj.code === 'TRANSFER') {
+                        console.log(obj)
+                        if (obj.selected_card.id === '0' || obj.selected_card.id === 0 || obj.selected_edc.id ===
+                            '0' || obj.selected_edc.id === 0 || obj.selected_account.id === '0' || obj.selected_account
+                            .id === 0) {
+                            this.xdisable_btn_pay = 'Y'
+                            console.log('oye')
+                            console.log(this.xdisable_btn_pay)
+                        }
+                    }
+                })
+            },
+            printNote(val, idx) {
+                this.printwidth = 600
+                this.printtitle = ""
+                let user = one_user()
+                var rpt = 'rpt_t_010'
+                if (val.note_amount < 0)
+                    rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + val.note_id
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            doPrint() {
+                this.printtitle = ""
+                this.closeDialogPaySuccess()
+                let user = one_user()
+                let payments = this.$store.state.paymentnew.last_payments
+                let xcash = _.filter(payments, {
+                    code: 'CASH'
+                })
+                var rpt = 'rpt_t_010'
+                if (xcash[0].leftvalue < 0)
+                    rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + this.$store.state.paymentnew.idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            printKw() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_002.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            printInvoice() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_001.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/index.php b/test/vuex/acc-one-supplier-payment-cashier-v5/index.php
new file mode 100644
index 0000000..c9d92eb
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/index.php
@@ -0,0 +1,96 @@
+<!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>One</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="pl-1 pr-1 pt-2 pb-2">
+                  <v-layout row wrap >
+                     <v-flex xs7 class="left" fill-height pa-1>
+                        <one-bill-list></one-bill-list>
+                     </v-flex>
+                     <v-flex xs5 class="right" fill-height pa-1>
+                        <!-- komponen kanan -->
+                        <one-bill-payment></one-bill-payment>
+                        <one-bill-payment-manual></one-bill-payment-manual>
+                     </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 -->
+<?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;
+new Vue({
+store,
+   el: '#app',
+   methods: {
+   tab_selected : function(tab) {
+      return this.$store.state.tab_selected == tab
+      }
+   },
+   components: {
+   'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+      'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+        'one-bill-list': httpVueLoader('./components/oneBillList.vue'),
+        'one-bill-payment-manual': httpVueLoader('./components/oneBillPaymentManual.vue'),
+        'one-bill-payment': httpVueLoader('./components/oneBillPaymentMulti.vue')
+      }
+    })
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+   .left {
+   }
+   .right {
+   }
+    </style>
+   </body>
+
+</html>
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/modules/bill.js b/test/vuex/acc-one-supplier-payment-cashier-v5/modules/bill.js
new file mode 100644
index 0000000..954c546
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/modules/bill.js
@@ -0,0 +1,364 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/bill.js"
+
+export default {
+    namespaced: true,
+    state: {
+        search_bill: 0,
+        search_error_message: '',
+        start_date: moment(new Date()).format('YYYY-MM-DD'),
+        end_date: moment(new Date()).format('YYYY-MM-DD'),
+        init_sdate: moment(new Date()).format('YYYY-MM-DD'),
+        init_edate: moment(new Date()).format('YYYY-MM-DD'),
+        search: '',
+        ssupplier: '',
+        isauto:'N',
+        bills: [],
+        total_bill: 0,
+        selected_bill: {
+            totalbill: 0,
+            mindp_percent: 0
+        },
+        save_error_message: '',
+        statuses: [{
+            name: 'Belum Lunas',
+            value: 'N'
+        }, {
+            name: 'Lunas',
+            value: 'Y'
+        }],
+        selected_status: {
+            name: 'Belum Lunas',
+            value: 'N'
+        },
+        selected_multibill: [],
+        open_alert_no_pay: false,
+        msg_alert_no_pay: "Loh ... Gak jadi bayar dong ?",
+        current_page: 1,
+        total_page: 0,
+        pay_disabled: 'Y',
+        get_data_status: 0,
+        get_data_error_message: '',
+        total_payment : 0,
+        xdialogmulti: false,
+        xrounding: 0,
+        paymenttypes: [],
+        paymenttype: {},
+        xtanggalbayar: '',
+        a_coa_search: '',
+        a_loading_coa: false,
+        in_saving: false,
+        dialog_pay_success: false,
+        paynumber: '',
+        bar_chx_all: false,
+        indeterminatex: false
+    },
+    mutations: {
+        update_bar_chx_all(state, val) {
+            state.bar_chx_all = val
+        },
+        update_indeterminatex(state, val) {
+            state.indeterminatex = val
+        },
+        update_paynumber(state, val) {
+            state.paynumber = val
+        },
+        update_dialog_pay_success(state, val) {
+            state.dialog_pay_success = val
+        },
+        update_in_saving(state, val) {
+            state.in_saving = val
+        },
+        update_a_loading_coa(state, val) {
+            state.a_loading_coa = val
+        },
+        update_a_coa_search(state, val) {
+            state.a_coa_search = val
+        },
+        update_xtanggalbayar(state, val) {
+            state.xtanggalbayar = val
+        },
+        update_paymenttypes(state, data) {
+            state.paymenttypes = data
+        },
+        update_paymenttype(state, val) {
+            state.paymenttype = val
+        },
+        update_xrounding(state, val) {
+            state.xrounding = val
+        },
+        update_xdialogmulti(state, val) {
+            state.xdialogmulti = val
+        },
+        update_total_payment(state, val) {
+            state.total_payment = val
+        },
+        update_selected_multibill(state, val) {
+            state.selected_multibill = val
+        },
+        update_init_sdate(state, val) {
+            state.init_sdate = val
+        },
+        update_init_edate(state, val) {
+            state.init_edate = val
+        },
+        update_pay_disabled(state, val) {
+            state.pay_disabled = val
+        },
+        update_total_page(state, val) {
+            state.total_page = val
+        },
+        update_current_page(state, val) {
+            state.current_page = val
+        },
+        update_search_error_message(state, bill) {
+            state.search_error_message = bill
+        },
+        update_search_bill(state, bill) {
+            state.search_bill = bill
+        },
+        update_bills(state, data) {
+            state.bills = data.records
+            state.total_bill = data.total
+            state.total_page = data.total
+        },
+        update_selected_bill(state, val) {
+            state.selected_bill = val
+        },
+        update_start_date(state, val) {
+            state.start_date = val
+        },
+        update_end_date(state, val) {
+            state.end_date = val
+        },
+        update_search(state, val) {
+            state.search = val
+        },
+        update_ssupplier(state, val) {
+            state.ssupplier = val
+        },
+        update_selected_status(state, val) {
+            state.selected_status = val
+        },
+        update_open_alert_no_pay(state, val) {
+            state.open_alert_no_pay = val
+        },
+        update_msg_alert_no_pay(state, val) {
+            state.msg_alert_no_pay = val
+        },
+        update_isauto(state, val) {
+            state.isauto = val
+        },
+        update_get_data_status(state, val) {
+            state.get_data_status = val
+        },
+        update_get_data_error_message(state, val) {
+            state.get_data_error_message = val
+        }
+    },
+    actions: {
+        async search(context, prm) {
+            context.commit("update_search_bill", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.search(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_search_bill", 3)
+                    context.commit("update_search_error_message", resp.message)
+                } else {
+                    context.commit("update_search_bill", 2)
+                    context.commit("update_search_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_bills", data)
+                    context.commit("update_total_page", data.total)
+                    if (prm.lastidx === 0 && data.total > 0) {
+                        context.commit("update_selected_bill", data.records[0])
+                        if (!_.isEmpty(data.records[0])) {
+                            context.commit("paymentmanual/update_xbayar", data.records[0].totalbill, {root: true})
+                            context.commit("paymentmanual/update_xtanggalbayar", data.records[0].SupplierInvoiceDraftPaymentDate, {root: true})
+                            context.commit("paymentnew/update_notes", data.records[0].notes, {root: true})
+                            context.commit("paymentmanual/update_notes", data.records[0].notes, {root: true})
+
+                            if (data.records[0].flaglunas === 'N') {
+                                context.commit("paymentmanual/update_tagihans", data.records[0].tagihans, {
+                                    root: true
+                                })
+                            } else {
+                                context.commit("paymentmanual/update_tagihans", [], {
+                                    root: true
+                                })
+                            }
+
+                            var arr = context.rootState.paymentmanual.tagihans
+                            var value = true
+                            context.commit("paymentmanual/update_indeterminatex", false, {root: true})
+                            context.commit("paymentmanual/update_bar_chx_all", value, {root: true})
+
+                            arr.forEach((el) => {
+                            el.chex = value
+                            el.tagihan_bayar = value == true ? el.tagihan_tagihan : 0
+                                })
+
+                            var selected = _.filter(arr, function (o) {
+                            return o.chex;
+                             })
+                            context.commit("paymentmanual/update_selected_tagihan", selected, {
+                            root: true
+                            })
+
+                            var xval = context.rootState.paymentmanual.selected_tagihan
+                            var valx = 0
+                            xval.forEach(function (obj) {
+                            valx += parseInt(obj.tagihan_bayar)
+                            })
+                            let totpaid = valx
+                            context.commit("paymentmanual/update_total_payment", totpaid, {root: true})
+                        } else {
+                            context.commit("paymentnew/update_notes", [], {
+                                root: true
+                            })
+                            context.commit("paymentmanual/update_notes", [], {
+                                root: true
+                            })
+                            context.commit("paymentmanual/update_tagihans", [], {
+                                root: true
+                            })
+
+                        }
+                    } else if (prm.lastidx > 0 && data.total > 0) {
+                        context.commit("update_selected_bill", data.records[0])
+                        context.commit("paymentmanual/update_xbayar", data.records[0].totalbill, {
+                            root: true
+                        })
+                        context.commit("paymentnew/update_notes", data.records[prm.lastidx].notes, {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_notes", data.records[prm.lastidx].notes, {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_xtanggalbayar", data.records[prm.lastidx].SupplierInvoiceDraftPaymentDate, {
+                            root: true
+                        })
+                        if (data.records[prm.lastidx].flaglunas === 'N') {
+                            context.commit("paymentmanual/update_tagihans", data.records[prm.lastidx].tagihans, {
+                                root: true
+                            })
+                        } else {
+                            context.commit("paymentmanual/update_tagihans", [], {
+                                root: true
+                            })
+                        }
+                        var arr = context.rootState.paymentmanual.tagihans
+                            var value = true
+                            context.commit("paymentmanual/update_indeterminatex", false, {root: true})
+                            context.commit("paymentmanual/update_bar_chx_all", value, {root: true})
+
+                            arr.forEach((el) => {
+                            el.chex = value
+                            el.tagihan_bayar = value == true ? el.tagihan_tagihan : 0
+                                })
+
+                            var selected = _.filter(arr, function (o) {
+                            return o.chex;
+                             })
+                            context.commit("paymentmanual/update_selected_tagihan", selected, {
+                            root: true
+                            })
+
+                            var xval = context.rootState.paymentmanual.selected_tagihan
+                            var valx = 0
+                            xval.forEach(function (obj) {
+                            valx += parseInt(obj.tagihan_bayar)
+                            })
+                            let totpaid = valx
+                            context.commit("paymentmanual/update_total_payment", totpaid, {root: true})
+
+                    } else {
+                        context.commit("update_selected_bill", '')
+                        context.commit("paymentnew/update_notes", [], {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_notes", [], {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_tagihans", [], {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_xtanggalbayar", '', {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_xbayar", 0, {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_total_payment", 0, {root: true})
+                        context.commit("paymentmanual/update_bar_chx_all", false, {root: true})
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_search_bill", 3)
+                context.commit("update_search_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async selectpaymenttype(context,payload) {
+            context.commit("update_get_data_status", 1)
+            try {
+                let prm = {};
+                prm.token = one_token()
+                prm.search = payload.search
+                let resp = await api.selectpaymenttype(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_get_data_status", 3)
+                    context.commit("update_get_data_error_message", resp.message)
+                } else {
+                    context.commit("update_get_data_status", 2)
+                    context.commit("update_get_data_error_message", "")
+                    context.commit("update_paymenttypes", resp.data.records.paymenttypes)
+                    context.commit("update_paymenttypes_edit", resp.data.records.paymenttypes)
+
+                }
+            } catch (e) {
+                context.commit("update_get_data_status", 3)
+                context.commit("update_get_data_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async pay(context, prm) {
+            context.commit("paymentmanual/update_lookup_status", 1, {root: true})
+            try {
+                prm.token = one_token()
+                let resp = await api.pay(prm)
+                if (resp.status != "OK") {
+                    context.commit("paymentmanual/update_lookup_status", 3, {root: true})
+                    context.commit("paymentmanual/update_lookup_error_message", resp.message, {root: true})
+                } else {
+                    context.commit("paymentmanual/update_lookup_status", 2, {root: true})
+                    context.commit("paymentmanual/update_lookup_error_message", "", {root: true})
+                    context.commit("update_paynumber", "Pembayaran multi telah berhasil")
+                    context.commit("update_dialog_pay_success", true)
+                    context.commit("update_in_saving", false)
+                    context.commit("update_xdialogmulti", false)
+                    console.log('berhasil bayar')
+                    context.dispatch("search", {
+                        supplier: context.state.ssupplier,
+                        search: context.state.search,
+                        status: context.state.selected_status.value,
+                        current_page: 1,
+                        startdate: context.state.init_sdate,
+                        enddate: context.state.init_edate,
+                        lastidx: 0
+                    })
+                }
+            } catch (e) {
+                context.commit("paymentmanual/update_lookup_status", 3, {root: true})
+                context.commit("paymentmanual/update_lookup_error_message", e.message, {root: true})
+            }
+        },
+    }
+}
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/modules/paymentmanual.js b/test/vuex/acc-one-supplier-payment-cashier-v5/modules/paymentmanual.js
new file mode 100644
index 0000000..818780e
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/modules/paymentmanual.js
@@ -0,0 +1,604 @@
+import * as api from "../api/paymentmanual.js"
+
+export default {
+    namespaced: true,
+    state: {
+        lookup_status: 0,
+        lookup_error_message: '',
+        types: [],
+        total_payment: 0,
+        reload_after_save: false,
+        dialog_pay_success: false,
+        paynumber: '',
+        notes: [],
+        tagihans: [],
+        dialog_delete: false,
+        msg_delete: '',
+        note_delete: '',
+        nota_delete: {},
+        dialog_edit: false,
+        msg_edit: '',
+        note_edit: '',
+        nota_edit: {},
+        open_print_note: false,
+        idx: 0,
+        last_payments: {},
+        payment_total: 0,
+        banks: [],
+        disable_btn_pay: 'Y',
+        ordertests: [],
+        isauto: 'N',
+        paymenttypes: [],
+        paymenttype: {},
+        paymenttypes_edit: [],
+        paymenttype_edit: {},
+        suppliers: [],
+        supplier: {},
+        cards: [],
+        card: {},
+        edcs: [],
+        edc: {},
+        accounts: [],
+        account: {},
+        bar_chx_all: false,
+        selected_tagihan: {},
+        indeterminatex: false,
+        in_saving: false,
+        xbayar: 0,
+        xrounding: 0,
+        open_dialog_info:false,
+        msg_info:'',
+        a_coa_search: '',
+        a_supplier_search: '',
+        a_loading_coa: false,
+        a_loading_supplier: false,
+        xtanggalbayar: ''
+    },
+    mutations: {
+        update_xtanggalbayar(state, val) {
+            state.xtanggalbayar = val
+        },
+        update_a_coa_search(state, val) {
+            state.a_coa_search = val
+        },
+        update_a_supplier_search(state, val) {
+            state.a_supplier_search = val
+        },
+        update_a_loading_coa(state, val) {
+            state.a_loading_coa = val
+        },
+        update_a_loading_supplier(state, val) {
+            state.a_loading_supplier = val
+        },
+        update_open_dialog_info(state,val){
+            state.open_dialog_info = val
+         },
+         update_msg_info(state,val){
+            state.msg_info = val
+         },
+        update_xbayar(state, val) {
+            state.xbayar = val
+        },
+        update_xrounding(state, val) {
+            state.xrounding = val
+        },
+        update_in_saving(state, val) {
+            state.in_saving = val
+        },
+        update_disable_btn_pay(state, val) {
+            state.disable_btn_pay = val
+        },
+        update_banks(state, val) {
+            state.banks = val
+        },
+        update_lookup_error_message(state, val) {
+            state.lookup_error_message = val
+        },
+        update_lookup_status(state, status) {
+            state.lookup_status = status
+        },
+        update_types(state, data) {
+            state.types = data.records
+            state.total_type = data.total
+        },
+        update_selected_status(state, val) {
+            state.selected_status = val
+        },
+        update_total_payment(state, val) {
+            state.total_payment = val
+        },
+        update_reload_after_save(state, val) {
+            state.reload_after_save = val
+        },
+        update_dialog_pay_success(state, val) {
+            state.dialog_pay_success = val
+        },
+        update_paynumber(state, val) {
+            state.paynumber = val
+        },
+        update_notes(state, val) {
+            state.notes = val
+        },
+        update_tagihans(state, val) {
+            state.tagihans = val
+        },
+        update_dialog_delete(state, val) {
+            state.dialog_delete = val
+        },
+        update_note_delete(state, val) {
+            state.note_delete = val
+        },
+        update_msg_delete(state, val) {
+            state.msg_delete = val
+        },
+        update_nota_delete(state, val) {
+            state.nota_delete = val
+        },
+        update_dialog_edit(state, val) {
+            state.dialog_edit = val
+        },
+        update_note_edit(state, val) {
+            state.note_edit = val
+        },
+        update_msg_edit(state, val) {
+            state.msg_edit = val
+        },
+        update_nota_edit(state, val) {
+            state.nota_edit = val
+        },
+        update_open_print_note(state, val) {
+            state.open_print_note = val
+        },
+        update_idx(state, val) {
+            state.idx = val
+        },
+        update_last_payments(state, val) {
+            state.last_payments = val
+        },
+        update_ordertests(state, data) {
+            state.ordertests = data
+        },
+        update_isauto(state, val) {
+            state.isauto = val
+        },
+        update_suppliers(state, data) {
+            state.suppliers = data
+        },
+        update_supplier(state, val) {
+            state.supplier = val
+        },
+        update_paymenttypes(state, data) {
+            state.paymenttypes = data
+        },
+        update_paymenttype(state, val) {
+            state.paymenttype = val
+        },
+        update_paymenttypes_edit(state, data) {
+            state.paymenttypes_edit = data
+        },
+        update_paymenttype_edit(state, val) {
+            state.paymenttype_edit = val
+        },
+        update_cards(state, data) {
+            state.cards = data
+        },
+        update_card(state, val) {
+            state.card = val
+        },
+        update_edcs(state, data) {
+            state.edcs = data
+        },
+        update_edc(state, val) {
+            state.edc = val
+        },
+        update_accounts(state, data) {
+            state.accounts = data
+        },
+        update_account(state, val) {
+            state.account = val
+        },
+        update_bar_chx_all(state, val) {
+            state.bar_chx_all = val
+        },
+        update_indeterminatex(state, val) {
+            state.indeterminatex = val
+        },
+        update_selected_tagihan(state, val) {
+            state.selected_tagihan = val
+        }
+    },
+    actions: {
+        async lookup_type(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                let resp = await api.lookup_type(one_token())
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_types", data)
+
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async lookup_banks(context) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let resp = await api.lookup_banks(one_token())
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_paymenttypes", resp.data.records.paymenttypes)
+                    context.commit("update_paymenttypes_edit", resp.data.records.paymenttypes_edit)
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async lookup_accounts(context) {
+            context.commit("update_lookup_status", 1)
+            try {
+                let resp = await api.lookup_accounts(one_token())
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_accounts", data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async searchcard(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                let resp = await api.searchcard(one_token(), prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_cards", resp.data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+            }
+        },
+        async pay(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.pay(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+
+                    // let data = {
+                    //     records: resp.data.records.types,
+                    //     total: resp.data.total
+                    // }
+
+                    let xnumber = prm.xnumber
+                    let id = prm.orderid
+
+                    context.commit("update_disable_btn_pay", 'Y')
+                    context.commit("update_idx", id)
+                    context.commit("update_total_payment", 0)
+                    context.commit("update_paynumber", "Pembayaran nomor <span style='color:red'>" + xnumber + "</span> telah berhasil")
+                    context.commit("update_dialog_pay_success", true)
+
+                    console.log("dialogtext", context.state.paynumber)
+                    console.log("dialogsuccesss", context.state.dialog_pay_success)
+
+                    context.commit("update_in_saving", false)
+                    context.commit("update_xbayar", 0)
+
+                    this.$store.dispatch("bill/search", {
+                        supplier: context.rootState.bill.searchsupplier,
+                        search: context.rootState.bill.searchnamelab,
+                        status: context.rootState.bill.status.value,
+                        current_page: context.rootState.bill.current_page,
+                        startdate: context.rootState.bill.init_sdate,
+                        enddate: context.rootState.bill.init_edate,
+                        lastidx: id
+                    }, { root: true })
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async edit_note(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.edit_note(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let xmsg = "Nota nomor <span style='color:green'>" + prm.note_number + "</span> telah diubah"
+                    context.commit("update_msg_edit", xmsg)
+                    //context.commit("update_dialog_edit", false)
+                    context.commit("update_nota_edit", {})
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async delete_note(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.delete_note(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let xmsg = "Nota nomor <span style='color:red'>" + prm.nota.note_number + "</span> telah dihapus"
+                    context.commit("update_msg_delete", xmsg)
+                    context.commit("update_note_delete", '')
+                    context.commit("update_nota_delete", {})
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async selecttagihan(context,payload) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let prm = {};
+                prm.token = one_token()
+                prm.id = payload.id
+                let resp = await api.selecttagihan(prm)
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_tagihans", resp.data.records.tagihans)
+
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async selectpaymenttype(context,payload) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let prm = {};
+                prm.token = one_token()
+                prm.search = payload.search
+                let resp = await api.selectpaymenttype(prm)
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_paymenttypes", resp.data.records.paymenttypes)
+                    context.commit("update_paymenttypes_edit", resp.data.records.paymenttypes)
+
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async selectsupplier(context,payload) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let prm = {};
+                prm.token = one_token()
+                prm.search = payload.search
+                let resp = await api.selectsupplier(prm)
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_suppliers", resp.data.records.suppliers)
+
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async selectpaymenttypeold(context) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let resp = await api.selectpaymenttype(one_token())
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_paymenttypes", resp.data.records.paymenttypes)
+                    context.commit("update_paymenttypes_edit", resp.data.records.paymenttypes)
+
+                    context.commit("update_paymenttype", resp.data.records.paymenttypes[0])
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async selectcard(context) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let resp = await api.selectcard(one_token())
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_cards", resp.data.records.banks)
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async selectedc(context) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let resp = await api.selectedc(one_token())
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_edcs", resp.data.records.accounts)
+                    context.commit("update_accounts", resp.data.records.accounts)
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        }
+    }
+}
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/modules/paymentnew.js b/test/vuex/acc-one-supplier-payment-cashier-v5/modules/paymentnew.js
new file mode 100644
index 0000000..983631b
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/modules/paymentnew.js
@@ -0,0 +1,255 @@
+import * as api from "../api/payment.js"
+
+export default  {
+   namespaced: true,
+   state: {
+      lookup_status:0,
+      lookup_error_message:'',
+      types: [],
+      total_payment:0,
+      reload_after_save: false,
+      dialog_pay_success:false,
+      paynumber :'',
+      notes :[],
+      dialog_delete:false,
+      msg_delete:'',
+      note_delete:'',
+      nota_delete:{},
+      open_print_note:false,
+      idx:0,
+      last_payments:{},
+      payment_total: 0,
+      banks:[],
+      disable_btn_pay:'Y',
+      accounts:[],
+      ordertests:[],
+      isauto: 'N',
+      in_saving: false,
+      open_dialog_info:false,
+      msg_info:''
+   },
+   mutations: {
+    update_open_dialog_info(state,val){
+        state.open_dialog_info = val
+     },
+     update_msg_info(state,val){
+        state.msg_info = val
+     },
+    update_in_saving(state, val) {
+        state.in_saving = val
+    },
+      update_accounts(state,val) {
+         state.accounts = val
+      },
+      update_disable_btn_pay(state,val) {
+         state.disable_btn_pay = val
+      },
+      update_banks(state,val) {
+         state.banks = val
+      },
+      update_lookup_error_message(state,val) {
+         state.lookup_error_message = val
+      },
+      update_lookup_status(state,status) {
+         state.lookup_status = status
+      },
+      update_types(state,data) {
+         state.types = data.records
+         state.total_type = data.total
+      },
+      update_selected_status(state,val) {
+         state.selected_status=val 
+      },
+      update_total_payment(state,val) {
+         state.total_payment=val 
+      },
+      update_reload_after_save(state,val) {
+         state.reload_after_save=val 
+      },
+      update_dialog_pay_success(state,val) {
+         state.dialog_pay_success=val 
+      },
+      update_paynumber(state,val) {
+         state.paynumber=val 
+      },
+      update_notes(state,val) {
+         state.notes=val 
+      },
+      update_dialog_delete(state,val) {
+         state.dialog_delete=val 
+      },
+      update_note_delete(state,val) {
+         state.note_delete=val 
+      },
+      update_msg_delete(state,val) {
+         state.msg_delete=val 
+      },
+      update_nota_delete(state,val) {
+         state.nota_delete=val 
+      },
+      update_open_print_note(state,val) {
+         state.open_print_note=val 
+      },
+      update_idx(state,val) {
+         state.idx=val 
+      },
+      update_last_payments(state,val) {
+         state.last_payments=val 
+      },
+      update_ordertests(state,data){
+        state.ordertests = data
+    },
+    update_isauto(state, val) {
+        state.isauto = val
+    }
+   },
+   actions: {
+      async lookup_type(context,prm) {
+         context.commit("update_lookup_status",1)
+         try {
+            let resp= await api.lookup_type(one_token())
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let data = {
+                  records : resp.data.records,
+                  total: resp.data.total
+               }
+               context.commit("update_types",data)
+
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      },
+      async lookup_banks(context) {
+         context.commit("update_lookup_status",1)
+         try {
+            let resp= await api.lookup_banks(one_token())
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let data = {
+                  records : resp.data.records,
+                  total: resp.data.total
+               }
+               context.commit("update_banks",data.records)
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      },
+      async lookup_accounts(context) {
+         context.commit("update_lookup_status",1)
+         try {
+            let resp= await api.lookup_accounts(one_token())
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let data = {
+                  records : resp.data.records,
+                  total: resp.data.total
+               }
+               context.commit("update_accounts",data.records)
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      },
+      async searchcard(context,prm) {
+         context.commit("update_lookup_status",1)
+         try {
+             let resp= await api.searchcard(one_token(),prm)
+             if (resp.status != "OK") {
+                 context.commit("update_lookup_status",3)
+             } else {
+                 context.commit("update_lookup_status",2)
+                 let data = {
+                     records : resp.data.records,
+                     total: resp.data.total
+                 }
+                 context.commit("update_cards",resp.data.records)
+             }
+         } catch(e) {
+         context.commit("update_lookup_status",3)
+         }
+     },
+      async pay(context,prm) {
+         context.commit("update_lookup_status",1)
+         try {
+            prm.token = one_token()
+            let resp= await api.pay(prm)
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let data = {
+                  records : resp.data.records.types,
+                  total: resp.data.total
+               }
+               let xnumber = resp.data.records.data.numberx
+               let id = resp.data.records.data.idx
+               var xobj = context.state.types
+               //console.log(xobj)
+               xobj.forEach(function(obj){
+                  obj.chex = false
+                  obj.leftvalue = 0
+                  obj.rightvalue = 0
+                  obj.selected_card = {id:0,name:''}
+                  obj.selected_edc = {id:0,name:''}
+                  obj.selected_account = {id:0,name:''}
+               })
+               var xray = {records:xobj,total:xobj.length}
+               context.commit("update_types",xray)
+               context.commit("update_disable_btn_pay",'Y')
+               console.log(context.state.types)
+               context.commit("update_last_payments",prm.payments)
+               context.commit("update_idx",id)
+               context.commit("update_total_payment",0)
+               context.commit("update_paynumber","Pembayaran nomor <span style='color:red'>"+xnumber+"</span> telah berhasil")
+               context.commit("update_dialog_pay_success",true)
+               context.commit("update_in_saving", false)
+               
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      },
+      async delete_note(context,prm) {
+         context.commit("update_lookup_status",1)
+         try {
+            prm.token = one_token()
+            let resp= await api.delete_note(prm)
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let xmsg = "Nota nomor <span style='color:red'>"+prm.nota.note_number+"</span> telah dihapus"
+               context.commit("update_msg_delete",xmsg)
+               context.commit("update_note_delete",'')
+               context.commit("update_nota_delete",{})
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      }
+   }
+}
\ No newline at end of file
diff --git a/test/vuex/acc-one-supplier-payment-cashier-v5/store.js b/test/vuex/acc-one-supplier-payment-cashier-v5/store.js
new file mode 100644
index 0000000..b24b8ff
--- /dev/null
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/store.js
@@ -0,0 +1,31 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import bill from "./modules/bill.js";
+import paymentnew from "./modules/paymentnew.js";
+import paymentmanual from "./modules/paymentmanual.js";
+import system from "../../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        bill: bill,
+        paymentnew:paymentnew,
+        paymentmanual: paymentmanual,
+        system:system
+    },
+    state: {
+        tab_selected: 'pasien-dokter'
+    },
+    mutations: {
+        change_tab(state, ntab) {
+            state.tab_selected = ntab
+        }
+    },
+    actions: {
+        change_tab(context, ntab) {
+            context.commit('change_tab', ntab)
+        }
+    }
+});
\ No newline at end of file
diff --git a/test/vuex/one-md-usergroup-user-v6/action.js b/test/vuex/one-md-usergroup-user-v6/action.js
new file mode 100644
index 0000000..e69de29
diff --git a/test/vuex/one-md-usergroup-user-v6/api.js b/test/vuex/one-md-usergroup-user-v6/api.js
new file mode 100644
index 0000000..47e14ba
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/api.js
@@ -0,0 +1,31 @@
+// API :
+// search bank
+// paramater : query , page , rowPerPage
+const URL =
+  "http://lebaran.aplikasi.web.id/smartlab_api/vuex/t02/search_bank";
+
+export async function searchBank(query, page, rowPerPage = 15) {
+  try {
+    var resp = await axios.post(URL, {
+      query: query,
+      page: page,
+      rowPerPage: rowPerPage
+    });
+    if (resp.status != 200) {
+      return {
+        status: "ERR",
+        query: query,
+        message: resp.statusText
+      };
+    }
+    let data = resp.data;
+    data.query = query;
+    return data;
+  } catch (e) {
+    return {
+      status: "ERR",
+      query: query,
+      message: e.message
+    };
+  }
+}
diff --git a/test/vuex/one-md-usergroup-user-v6/api/user.js b/test/vuex/one-md-usergroup-user-v6/api/user.js
new file mode 100644
index 0000000..de66293
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/api/user.js
@@ -0,0 +1,98 @@
+const URL = "/one-api/mockup/usergroup/";
+
+console.log("user new v5")
+export async function reset_password(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/reset_password', 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(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/addnewuser', 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_edit(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/edituser', 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 xdelete(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/deleteuser', { id: id ,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 lookup(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/lookupuser', { id: id, 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
+        };
+    }
+}
diff --git a/test/vuex/one-md-usergroup-user-v6/api/usergroup.js b/test/vuex/one-md-usergroup-user-v6/api/usergroup.js
new file mode 100644
index 0000000..e186962
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/api/usergroup.js
@@ -0,0 +1,192 @@
+const URL = "/one-api/mockup/usergroup/";
+
+export async function lookup(token, search,all ) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/lookup', { token: token, search: search, all:all });
+        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 getdashboards(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/getdashboards', 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 getreportsample(token) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/getreportsample',{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 save(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/addnewusergroup', 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(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/editusergroup', 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 xdelete(token,id) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/deleteusergroup', { id: id, 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 search_regional(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/search_regional', 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_branch(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/search_branch', 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 getapprovelevel(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/search_approvelevel', 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 getdivision(prm) {
+    try {
+        var resp = await axios.post(URL + 'usergroupv6/getdivision', 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
+        };
+    }
+}
diff --git a/test/vuex/one-md-usergroup-user-v6/components/oneMdUserGroupList.vue b/test/vuex/one-md-usergroup-user-v6/components/oneMdUserGroupList.vue
new file mode 100644
index 0000000..70b008a
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/components/oneMdUserGroupList.vue
@@ -0,0 +1,458 @@
+<template>
+  <v-layout>
+
+
+    <v-dialog v-model="dialogdeletealert" max-width="30%">
+      <v-card>
+        <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
+          Peringatan !
+        </v-card-title>
+        <v-card-text class="pt-2 pb-2">
+          <v-layout row>
+            <v-flex xs12 d-flex>
+              <v-layout row>
+                <v-flex pb-1 xs12>
+                  <v-layout row>
+                    <v-flex pt-2 pr-2 xs12>
+                      {{ msgalert }}
+                    </v-flex>
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+          </v-layout>
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" flat @click="dialogdeletealert = false">
+            Tutup
+          </v-btn>
+          <v-btn color="primary" flat @click="closeDeleteAlert()">
+            Yakin lah
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+
+
+    <v-flex xs12>
+      <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
+        <v-toolbar color="blue lighten-3" dark height="50px">
+          <v-toolbar-title>USER GROUP</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn @click="openFormUsergroup()" icon>
+            <v-icon>library_add</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
+          {{ msgsnackbar }}
+          <v-btn flat @click="updateAlert_success(false)">
+            Tutup
+          </v-btn>
+        </v-snackbar>
+        <v-layout row style="background:#bbdefb;padding-top:5px;" justify-left>
+          <v-list-tile>
+            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..." />
+          </v-list-tile>
+        </v-layout>
+        <v-divider></v-divider>
+        <div v-for="(vs, index) in vusergroups">
+
+          <v-layout pa-2 v-if="isSelected(vs)" row>
+            <v-flex xs12 @click="selectMe(vs)">
+              <v-layout row>
+                <v-flex class="boxsolid" xs10>
+                  <v-tooltip right>
+                    <template v-slot:activator="{ on }">
+                      <span v-html="subname(vs.description)" v-on="on"></span>
+                    </template>
+                    <span>{{ vs.name }}</span>
+                  </v-tooltip>
+                </v-flex>
+                <v-flex class="boxsolid text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
+                  <v-layout row align-center justify-space-between>
+                    <v-icon style="color:#ffffff" @click="editUsergroup(vs)">edit</v-icon>
+                    <v-icon style="color:#ffffff" @click="deleteUsergroup(vs)">clear</v-icon>
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+          </v-layout>
+
+
+
+          <v-layout pa-2 v-if="!isSelected(vs)" row>
+            <v-flex xs12 @click="selectMe(vs)">
+              <v-layout row>
+                <v-flex class="boxoutline" xs10>
+                  <v-tooltip right>
+                    <template v-slot:activator="{ on }">
+                      <span v-html="subname(vs.description)" v-on="on"></span>
+                    </template>
+                    <span>{{ vs.name }}</span>
+                  </v-tooltip>
+                </v-flex>
+                <v-flex class="boxoutline text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
+                  <v-layout row align-center justify-space-between>
+                    <v-icon style="color:red" @click="editUsergroup(vs)">edit</v-icon>
+                    <v-icon style="color:red" @click="deleteUsergroup(vs)">clear</v-icon>
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+          </v-layout>
+          <v-divider></v-divider>
+        </div>
+        <v-layout row>
+          <v-flex class="text-xs-center" pt-3 xs12>
+            <p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;">Menampilkan <span
+                class="red--text">{{ xtotalfilterusergroups }}</span> dari <span
+                class="red--text">{{ xtotalusergroups }}</span>
+              total data</p>
+            <v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan
+              Semua</v-btn>
+            <v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi
+              data</v-btn>
+          </v-flex>
+        </v-layout>
+
+
+        <template>
+          <v-layout row justify-center>
+            <v-dialog v-model="dialogusergroup" persistent max-width="600px">
+              <v-card>
+                <v-form ref="formusergroup" v-model="valid" lazy-validation>
+                <v-card-title>
+                  <span class="headline">Form User Group</span>
+                </v-card-title>
+                <v-card-text class="pt-0 pb-0">
+                    <v-layout wrap>
+                      <v-flex xs12>
+                        <v-text-field v-model="usergroupname" label="Nama User Group" :rules="nameRules"
+                          required></v-text-field>
+                      </v-flex>
+                      <!--<v-flex xs12>
+                          <v-text-field v-model="usergroupdashboard" label="Nama Dashboard" :rules="dashboardRules" required></v-text-field>
+                        </v-flex>-->
+                      <v-flex xs12>
+                        <v-select item-text="name" return-object :items="xdashboards" v-model="xselected_dashboard"
+                          label="Dashboard"></v-select>
+                      </v-flex>
+                      <!--<v-flex xs12>
+                         <v-checkbox  true-value="Y" false-value="N"  v-model="usergroupclinic"           label="Is Clinic"  :rules="clinicRules" required></v-checkbox>
+                         </v-flex>-->
+                      <v-flex>
+                        <p v-for="(xerror, idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{ xerror.msg }}</p>
+                      </v-flex>
+                    </v-layout>
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn color="blue darken-1" flat @click="updateDialogFormUsergroup()">Tutup</v-btn>
+                  <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormUsergroup()">Simpan</v-btn>
+                  <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormUsergroup()">Simpan
+                    Perubahan</v-btn>
+                </v-card-actions>
+                </v-form>
+              </v-card>
+            </v-dialog>
+          </v-layout>
+        </template>
+
+      </v-card>
+    </v-flex>
+  </v-layout>
+</template>
+
+<style scoped>
+.textinput {
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  background-color: white;
+  background-position: 10px 10px;
+  background-repeat: no-repeat;
+  padding-left: 40px;
+  width: 100%;
+  padding: 8px 10px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  border: 1px solid #607d8b;
+
+}
+
+.textinput:focus {
+  width: 100%;
+}
+
+.textinput:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.textinput:focus::-moz-placeholder {
+  color: transparent;
+}
+
+.textinput:-moz-placeholder {
+  color: transparent;
+}
+
+.boxoutline {
+  color: red;
+  border: 1px solid red;
+  justify-content: center;
+  height: 45px;
+  line-height: 45px;
+  padding-left: 10px;
+  background: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 1px
+}
+
+.boxoutline:hover {
+  background: rgba(0, 0, 0, 0.07) !important;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.boxsolid {
+  color: #ffffff;
+  border: 1px solid #ffffff;
+  justify-content: center;
+  height: 45px;
+  line-height: 45px;
+  padding-left: 10px;
+  background: #f44336;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 1px
+}
+
+.boxsolid:hover {
+  background: #f44336de;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.scroll-container {
+  scroll-padding: 50px 0 0 50px;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+}
+
+/* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar-track {
+  background-color: #73baf3;
+}
+
+/* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+  background-color: #2196f3;
+}
+
+/* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+  background-color: #0079da;
+}
+
+/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+  background-color: black;
+}
+
+/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
+</style>
+
+<script>
+module.exports = {
+  data: () => ({
+    color: "success",
+    valid: false,
+    usergroupname: '',
+    usergroupdashboard: '',
+    usergroupclinic: 'N',
+    nameRules: [
+      v => !!v || 'Nama User Group harus diisi'
+    ],
+    dashboardRules: [
+      v => !!v || 'Dashboard harus diisi'
+    ],
+    clinicRules: [
+      v => !!v || 'Clinic harus diPilih'
+    ],
+    dialogdeletealert: false,
+    msgalert: "",
+    xid: 0,
+    xsearch: ""
+  }),
+  mounted() {
+    this.$store.dispatch("usergroup/getreportsample")
+    this.$store.dispatch("usergroup/getapprovelevel")
+    this.$store.dispatch("usergroup/getdivision")
+
+    this.$store.dispatch("usergroup/lookup", { search: this.xsearch, all: this.xshowall })
+  },
+  computed: {
+    xact() {
+      return this.$store.state.usergroup.act
+    },
+    xerrors() {
+      return this.$store.state.usergroup.errors
+    },
+    xshowall() {
+      return this.$store.state.usergroup.show_all
+    },
+    vusergroups() {
+      return this.$store.state.usergroup.usergroups
+    },
+    xtotalusergroups() {
+      return this.$store.state.usergroup.total_usergroups
+    },
+    xtotalfilterusergroups() {
+      return this.$store.state.usergroup.total_filter_usergroups
+    },
+    dialogusergroup() {
+      return this.$store.state.usergroup.dialog_form_usergroup
+    },
+    xdashboards() {
+      return this.$store.state.usergroup.dashboards
+    },
+    xselected_dashboard: {
+      get() {
+        return this.$store.state.usergroup.selected_dashboard
+      },
+      set(val) {
+        this.$store.commit("usergroup/update_selected_dashboard", val)
+        if (val)
+          this.usergroupdashboard = val.url
+      }
+    },
+    snackbar: {
+      get() {
+        return this.$store.state.usergroup.alert_success
+      },
+      set(val) {
+        this.$store.commit("usergroup/update_alert_success", val)
+      }
+    },
+    msgsnackbar() {
+      return this.$store.state.usergroup.msg_success
+    },
+    lookupstatus() {
+      return this.$store.state.usergroup.lookup_usergroup
+    },
+    selected_group() {
+      return this.$store.state.usergroup.selected_usergroup
+    }
+
+  },
+  methods: {
+    updateShowAll(val) {
+      this.$store.commit("usergroup/update_show_all", val)
+      this.$store.dispatch("usergroup/lookup", { search: this.xsearch, all: this.xshowall })
+    },
+    isSelected(p) {
+      return p.id == this.$store.state.usergroup.selected_usergroup.id
+    },
+    subname(name) {
+      var xname = name
+      if (xname.length > 18) {
+        xname = xname.substring(0, 18) + '...'
+      }
+      return xname
+    },
+    selectMe(sc) {
+      this.$store.commit("usergroup/update_selected_usergroup", sc)
+      this.$store.dispatch("user/lookup", {
+        id: this.$store.state.usergroup.selected_usergroup.id
+      })
+    },
+    updateDialogFormUsergroup() {
+      this.$store.commit("usergroup/update_dialog_form_usergroup", false)
+    },
+    openFormUsergroup() {
+      console.log('hallo dashboard')
+      var data = { act: 'new' }
+      this.$store.dispatch("usergroup/getdashboards", data)
+      this.$refs.formusergroup.reset()
+      this.$refs.formusergroup.resetValidation()
+      this.$store.commit("usergroup/update_act", 'new')
+      this.$store.commit("usergroup/update_error_code", false)
+      this.$store.commit("usergroup/update_error_name", false)
+      this.$store.commit("usergroup/update_dialog_form_usergroup", true)
+    },
+    saveFormUsergroup() {
+      if (this.$refs.formusergroup.validate()) {
+        this.$store.dispatch("usergroup/save", {
+
+          name: this.usergroupname,
+          dashboard: this.usergroupdashboard,
+          clinic: this.usergroupclinic,
+
+        })
+      }
+    },
+    updateFormUsergroup() {
+      if (this.$refs.formusergroup.validate()) {
+        this.$store.dispatch("usergroup/update", {
+          id: this.xid,
+          name: this.usergroupname,
+          dashboard: this.usergroupdashboard,
+          clinic: this.usergroupclinic
+        })
+
+      }
+    },
+    updateAlert_success(val) {
+      this.$store.commit("usergroup/update_alert_success", val)
+    },
+    editUsergroup(data) {
+      var xdata = data
+      xdata.act = 'edit'
+      this.xid = data.id
+      this.$store.dispatch("usergroup/getdashboards", xdata)
+      this.usergroupname = data.name
+      this.usergroupdashboard = data.dashboard
+      this.usergroupclinic = data.clinic
+      this.$store.commit("usergroup/update_act", 'edit')
+      this.$store.commit("usergroup/update_error_name", false)
+      this.$store.commit("usergroup/update_error_dashboard", false)
+      this.$store.commit("usergroup/update_error_clinic", false)
+      this.$store.commit("usergroup/update_dialog_form_usergroup", true)
+    },
+    deleteUsergroup(data) {
+      this.xid = data.id
+      var xdata = { id: data.id, name: data.name, users: 'xxx' }
+      this.$store.commit("usergroup/update_selected_usergroup", xdata)
+      this.msgalert = "Yakin, mau hapus user group " + data.name + "  ?"
+      this.dialogdeletealert = true
+    },
+    closeDeleteAlert() {
+      this.$store.dispatch("usergroup/delete", {
+        usergroupid: this.$store.state.usergroup.selected_usergroup.id,
+        usergroupname: this.$store.state.usergroup.selected_usergroup.name
+      })
+      this.dialogdeletealert = false
+    },
+    thr_search: _.debounce(function () {
+      this.$store.dispatch("usergroup/lookup", { search: this.xsearch, all: this.xshowall })
+    }, 1000)
+  },
+  watch: {
+    xsearch(val, old) {
+      if (val !== old && this.lookupstatus !== 1) {
+        console.log(val)
+        this.xsearch = val
+        this.thr_search()
+      }
+    }
+  }
+}
+</script>
diff --git a/test/vuex/one-md-usergroup-user-v6/components/oneMdUserList.vue b/test/vuex/one-md-usergroup-user-v6/components/oneMdUserList.vue
new file mode 100644
index 0000000..acb1dba
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/components/oneMdUserList.vue
@@ -0,0 +1,872 @@
+<template>
+  <v-layout>
+    <v-flex xs12>
+      <v-card class="mb-2" color="white">
+        <v-toolbar color="blue lighten-3" dark height="50px">
+          <v-toolbar-title>User Group : {{ xusergroup.name }}</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn v-if="xusergroup.name !== '[ Belum memilih User Group ]'" @click="openFormUser(0)" icon>
+            <v-icon>library_add</v-icon>
+          </v-btn>
+        </v-toolbar>
+
+        <v-layout row wrap>
+          <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+            <table>
+              <tr>
+                <th width="25%" class="text-md-center pt-2 pb-2">USERNAME</th>
+                <th width="35%" class="text-md-center pt-2 pb-2">STAFF NAME</th>
+                <th class="text-md-center pt-2 pb-2">AKSI</th>
+              </tr>
+              <tr v-if="users.length > 0" v-for="(user, idx) in users">
+                <td class="text-md-left pl-3">{{ user.username }}</td>
+                <td class="text-md-center">{{ user.staffname }}</td>
+
+                <td align="center" class="text-md-center">
+                  <v-btn @click="resetPassword(user)" depressed small color="warning"><v-icon>security</v-icon></v-btn>
+                  <v-btn @click="editFormUser(user)" depressed small color="primary"><v-icon>edit</v-icon></v-btn>
+                  <v-btn @click="deleteUser(user)" depressed small color="error"><v-icon>delete</v-icon></v-btn>
+                </td>
+              </tr>
+              <tr v-if="users.length === 0">
+                <td align="center" style="height:50px;text-align:center" colspan="8">Belum ada data</td>
+              </tr>
+            </table>
+          </v-flex>
+        </v-layout>
+        <template>
+
+          <v-dialog v-model="dialogdeletealertuser" max-width="30%">
+            <v-card>
+              <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
+                Peringatan !
+              </v-card-title>
+              <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                  <v-flex xs12 d-flex>
+                    <v-layout row>
+                      <v-flex pb-1 xs12>
+                        <v-layout row>
+                          <v-flex pt-2 pr-2 xs12>
+                            {{ msgalertuser }}
+                          </v-flex>
+                        </v-layout>
+                      </v-flex>
+                    </v-layout>
+                  </v-flex>
+                </v-layout>
+              </v-card-text>
+              <v-divider></v-divider>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="primary" flat @click="dialogdeletealertuser = false">
+                  Tutup
+                </v-btn>
+                <v-btn color="primary" flat @click="closeDeleteAlertUser()">
+                  Yakin lah
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+
+        </template>
+        <template>
+          <v-dialog v-model="dialog_resetpassword" max-width="30%">
+            <v-card>
+              <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
+                Peringatan !
+              </v-card-title>
+              <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                  <v-flex xs12 d-flex>
+                    <v-layout v-if="show_reason" row>
+                      <v-flex pb-1 xs12>
+                        <v-layout row>
+                          <v-flex pt-2 pr-2 xs12>
+                            Yakin, mau reset password user {{ selected_user.username }} ?
+                          </v-flex>
+                        </v-layout>
+                        <v-layout row>
+                          <v-flex pt-2 pr-2 xs12>
+                            <v-textarea label="Tuliskan alasan di sini" v-model="reason"></v-textarea>
+                            <p v-if="reason == ''" class="text--error">alasan harus diisi</p>
+                          </v-flex>
+                        </v-layout>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout v-if="!show_reason" row>
+                      <v-flex pb-1 xs12>
+                        <p>Reset password berhasil !!! </p>
+                        <p>Password baru adalah <span class="mono" style="font-weight:bold;font-size:25px">{{ pass_reset
+                        }}</span></p>
+                      </v-flex>
+                    </v-layout>
+                  </v-flex>
+                </v-layout>
+              </v-card-text>
+              <v-divider></v-divider>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="primary" flat @click="dialog_resetpassword = false">
+                  Tutup
+                </v-btn>
+                <v-btn color="green" flat v-if="reason !== '' && show_reason" @click="resetPasswordNow()">
+                  Reset
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </template>
+        <template>
+          <v-layout row justify-center>
+            <v-dialog v-model="dialoguser" persistent max-width="600px">
+              <v-card>
+                <v-card-title>
+                  <span class="headline">Form User</span>
+                </v-card-title>
+                <v-form ref="formusergroupuser" v-model="validuser" lazy-validation>
+                  <v-card-text class="pt-0 pb-0">
+                    <v-layout wrap>
+                      <v-flex xs12>
+                        USER GROUP : {{ xusergroup.name }}
+                      </v-flex>
+                      <v-flex xs12>
+                        <v-text-field label="User Name" v-model="username"></v-text-field>
+                      </v-flex>
+
+
+
+                      <v-flex xs12>
+                        <v-text-field label="Password" v-model="password" type="password"></v-text-field>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-autocomplete :search-input.sync="searchStaff" item-text="M_StaffName" return-object
+                          :items="xstaffs" v-model="xstaff" label="Staff Name"></v-autocomplete>
+                      </v-flex>
+
+                      <!--<v-flex xs12>
+                 <v-select item-text="T_SampleStationName" return-object :items="xsamplestationes"  v-model="xsamplestation" label="Sample Station" ></v-select>
+                 </v-flex>-->
+
+                      <v-flex xs12>
+                        <v-select item-text="M_ApproveLevelName" return-object :items="xuserapprovelevels"
+                          v-model="xuserapprovelevel" label="User Approve Level" clearable
+                          @click:clear="xuserapprovelevel = {}"></v-select>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-select item-text="R_ReportGroupName" return-object :items="xreportes" v-model="xreport"
+                          label="Report Group"></v-select>
+                      </v-flex>
+
+                      <!-- <v-flex xs12>
+                        <v-switch v-model="xuserlocationflag" true-value="R" false-value="B" color="blue"
+                          :label="xuserlocationflag === 'R' ? 'REGIONAL' : 'CABANG'"></v-switch>
+                      </v-flex> -->
+                      <v-flex xs12>
+                        <v-select item-text="M_UserLocationFlagName" return-object :items="xuserlocationflags"
+                          v-model="xuserlocationflag" label="User Location"></v-select>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-autocomplete label="Choose Regional" v-model="xregional" underlined :items="xregionals"
+                          auto-select-first :disable="!xuserlocationflag" item-text="S_RegionalName"
+                          item-value="S_RegionalID" return-object :loading="isLoading" :rules="[rules.regional]"
+                          :error="errors.regional" no-data-text="Cari Regional ...">
+                        </v-autocomplete>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-select v-if="xuserlocationflag.M_UserLocationFlag == 'B'" item-text="M_BranchName"
+                          item-value="M_BranchID" return-object :items="xbranches" v-model="xbranch"
+                          label="Choose Branch" :disable="!xregional || xregional === null" no-filter
+                          no-data-text="Pilih regional Dulu / Data Cabang Tidak ditemukan..."></v-select>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-select :item-text="itemTextDivision" return-object :items="xuserdivisions" v-model="xuserdivision"
+                          label="User Division" clearable @click:clear="xuserdivision = {}" :rules="[rules.division]" :error="errors.division" 
+                          no-data-text="Pilih Divisi Dulu"></v-select>
+                      </v-flex>
+                      <!-- <v-flex xs12>
+                        <v-autocomplete v-if="xuserlocationflag.M_UserLocationFlag == 'B'" label="Cabang"
+                          v-model="xbranch" underlined :items="xbranches" :search-input.sync="search_branch"
+                          auto-select-first :disable="!xuserlocationflag || !this.$store.state.usergroup.selected_regional"
+                          item-text="M_BranchName" :rules="[rules.branch]" :error="errors.branch"
+                          item-value="M_BranchID" return-object :loading="isLoading" no-data-text="Cari Cabang ...">
+                        </v-autocomplete>
+                      </v-flex> -->
+                      <!--<v-flex xs12>
+                 <v-checkbox v-model="iscoordinator" label="Coordinator ?"></v-checkbox>
+                 </v-flex>-->
+
+                      <v-flex>
+                        <p v-for="(xerror, idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{ xerror.msg }}
+                        </p>
+                      </v-flex>
+                    </v-layout>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue darken-1" flat @click="updateDialogFormUser()">Tutup</v-btn>
+                    <v-btn color="blue darken-1" flat
+                      :disabled="validerror || this.errors.regional || this.errors.division || (xuserlocationflag.M_UserLocationFlag == 'B' && (_.isEmpty(xbranch)))"
+                      @click="saveFormUser()">Simpan</v-btn>
+                  </v-card-actions>
+                </v-form>
+              </v-card>
+            </v-dialog>
+          </v-layout>
+        </template>
+
+        <template>
+          <v-layout row justify-center>
+            <v-dialog v-model="dialoguseredit" persistent max-width="600px">
+              <v-card>
+                <v-card-title>
+                  <span class="headline">Form User</span>
+                </v-card-title>
+                <v-form ref="formusergroupuser" v-model="validuser" lazy-validation>
+                  <v-card-text class="pt-0 pb-0">
+                    <v-layout wrap>
+
+                      <v-flex xs12>
+                        <v-select item-text="M_UserGroupName" return-object :items="xusergroupnames"
+                          item-value="M_UserGroupID" v-model="xusergroupname" label="User Group"></v-select>
+                      </v-flex>
+                      <v-flex xs12>
+                        <v-text-field label="User Name" v-model="username"></v-text-field>
+                      </v-flex>
+
+
+
+                      <v-flex xs12>
+                        <v-autocomplete :search-input.sync="searchStaff" item-text="M_StaffName" return-object
+                          :items="xstaffs" v-model="xstaff" label="Staff Name"></v-autocomplete>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-select item-text="M_ApproveLevelName" return-object :items="xuserapprovelevels"
+                          v-model="xuserapprovelevel" label="User Approve Level" clearable
+                          @click:clear="xuserapprovelevel = {}"></v-select>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-select item-text="R_ReportGroupName" return-object :items="xreportes" v-model="xreport"
+                          label="Report Group"></v-select>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-select item-text="M_UserLocationFlagName" return-object :items="xuserlocationflags"
+                          v-model="xuserlocationflag" label="User Location"></v-select>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-autocomplete label="Choose Regional" v-model="xregional" underlined :items="xregionals"
+                          :search-input.sync="search_regional" auto-select-first :disable="!xuserlocationflag" no-filter
+                          item-text="S_RegionalName" item-value="S_RegionalID" return-object :loading="isLoading"
+                          :rules="[rules.regional]" :error="errors.regional" no-data-text="Cari Regional ...">
+                        </v-autocomplete>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-select v-if="xuserlocationflag.M_UserLocationFlag == 'B'" item-text="M_BranchName"
+                          item-value="M_BranchID" return-object :items="xbranches" v-model="xbranch"
+                          label="Choose Branch" :disable="!xregional || xregional === null"
+                          no-data-text="Pilih regional Dulu / Data Cabang Tidak ditemukan..."></v-select>
+                      </v-flex>
+
+                      <v-flex xs12>
+                        <v-select :item-text="itemTextDivision" return-object :items="xuserdivisions"
+                          v-model="xuserdivision" label="User Division" clearable :rules="[rules.division]" :error="errors.division" 
+                          @click:clear="xuserapprovelevel = {}"></v-select>
+                      </v-flex>
+
+                      <v-flex>
+                        <p v-for="(xerror, idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{ xerror.msg }}
+                        </p>
+                      </v-flex>
+                    </v-layout>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue darken-1" flat @click="closeDialogEditUser()">Tutup</v-btn>
+                    <v-btn color="blue darken-1" flat @click="saveEditUser()"
+                      :disabled="validerror || this.errors.regional || this.errors.division || (xuserlocationflag.M_UserLocationFlag == 'B' && (_.isEmpty(xbranch) || xbranch == '0'))">Simpan
+                      Perubahan</v-btn>
+                  </v-card-actions>
+                </v-form>
+              </v-card>
+            </v-dialog>
+          </v-layout>
+        </template>
+
+
+
+      </v-card>
+    </v-flex>
+
+
+
+  </v-layout>
+</template>
+
+<style scoped>
+.searchbox .v-input.v-text-field .v-input__slot {
+  min-height: 60px;
+}
+
+.searchbox .v-btn {
+  min-height: 60px;
+}
+
+
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+  background: white;
+  border: 0px;
+}
+
+th,
+td {
+  border: 1px solid black;
+  border-collapse: collapse;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+table>tr>td {
+  padding: 8px;
+}
+
+table>tr>td:first {
+  padding-left: 15px !important;
+}
+</style>
+
+<script>
+module.exports = {
+  data() {
+    return {
+      searchStaff: '',
+      query: "",
+      search_regional: '',
+      search_branch: '',
+      validerror: false,
+      items: [],
+      rules: {
+        regional: value => {
+          this.errors.regional = !value.S_RegionalID; // Simpan status error
+          return !!value.S_RegionalID || "Regional harus dipilih!";
+        },
+        division: value => {
+          this.errors.division = !value.DivisionID; // Simpan status error
+          return !!value.DivisionID || "Divisi harus dipilih!";
+        },
+        // branch: value => {
+        //   if (this.$store.state.usergroup.selected_userlocationflag.M_UserLocationFlag === 'B') {
+        //     if(value.M_BranchID == undefined){
+        //       this.errors.branch = true;
+        //       return "Regional harus dipilih!";
+        //     }
+        //     // Validasi branch
+        //     console.log(value)
+        //     this.errors.branch = !value.M_BranchID;
+        //     return !!value.M_BranchID || "Branch harus dipilih!";
+        //   }
+        //   return true; // Jika userlocationflag bukan 'B', tidak ada validasi
+        // }
+      },
+      headers: [
+        {
+          text: "USER NAME",
+          align: "Center",
+          sortable: false,
+          value: "username",
+          width: "30%",
+          class: " blue lighten-4"
+        },
+        {
+          text: "STAFF NAME",
+          align: "Center",
+          sortable: false,
+          value: "staffname",
+          width: "30%",
+          class: "blue lighten-4"
+        },
+        {
+          text: "PASSWORD",
+          align: "Center",
+          sortable: false,
+          value: "password",
+          width: "30%",
+          class: "blue lighten-4"
+        },
+
+        {
+          text: "Action",
+          align: "Center",
+          sortable: false,
+          value: "status",
+          width: "15%",
+          class: "blue lighten-4"
+        }
+      ],
+      isLoading: false,
+      color: "success",
+      validuser: false,
+      xid: 0,
+      username: "",
+      selected_user: {},
+      staffname: "",
+      password: "",
+      iscoordinator: "",
+      dialogdeletealertuser: false,
+      msgalertuser: ""
+    };
+  },
+  computed: {
+    errors: {
+      get() {
+        return this.$store.state.user.errors
+      },
+      set(val) {
+        this.$store.commit('user/update_errors', val)
+      }
+    },
+    xbranches() {
+      return this.$store.state.usergroup.branches
+    },
+    xbranch: {
+      get() {
+        return this.$store.state.user.selected_branch
+      },
+      set(val) {
+        // this.$store.commit("user/update_regional", val)
+        var xval = val
+        if (val.M_BranchID == undefined) {
+          for (var i = 0; i < this.xbranches.length; i++) {
+            var xs = this.xbranches[i]
+            if (xs.M_BranchID == val) {
+              xval = xs
+            }
+          }
+        }
+        this.$store.commit("user/update_selected_branch", xval)
+      }
+    },
+    xregionals() {
+      return this.$store.state.usergroup.regionals
+    },
+    xregional: {
+      get() {
+        return this.$store.state.user.selected_regional
+      },
+      set(val) {
+
+        var xval = val
+        if (val.S_RegionalID == undefined) {
+          for (var i = 0; i < this.xregionals.length; i++) {
+            var xs = this.xregionals[i]
+            if (xs.S_RegionalID == val) {
+              xval = xs
+              let x = this.$store.state.user.selected_regional
+              if (x) if (x.S_RegionalID) this.errors.regional = false
+            }
+          }
+        }
+        this.$store.commit("user/update_selected_regional", xval)
+      }
+    },
+    pass_reset() {
+      return this.$store.state.user.pass_reset
+    },
+    dialog_resetpassword: {
+      get() {
+        return this.$store.state.user.dialog_resetpassword
+      },
+      set(val) {
+        this.$store.commit("user/update_dialog_resetpassword", val)
+      }
+    },
+    reason: {
+      get() {
+        return this.$store.state.user.reason
+      },
+      set(val) {
+        this.$store.commit("user/update_reason", val)
+      }
+    },
+    show_reason: {
+      get() {
+        return this.$store.state.user.show_reason
+      },
+      set(val) {
+        this.$store.commit("user/update_show_reason", val)
+      }
+    },
+    dialoguseredit() {
+      return this.$store.state.user.dialog_form_user_edit
+    },
+    users() {
+      return this.$store.state.user.users
+    },
+    xusergroup() {
+      return this.$store.state.usergroup.selected_usergroup
+    },
+    dialoguser() {
+      return this.$store.state.user.dialog_form_user
+    },
+    xerrors() {
+      return this.$store.state.user.errors
+    },
+    xsamplestationes() {
+      return this.$store.state.usergroup.samplestations
+    },
+    xsamplestation: {
+      get() {
+        return this.$store.state.user.selected_samplestation
+      },
+      set(val) {
+        var xval = val
+        if (val.T_SampleStationID == undefined) {
+          for (var i = 0; i < this.xsamplestationes.length; i++) {
+            var xs = this.xsamplestationes[i]
+            if (xs.T_SampleStationID == val) {
+              xval = xs
+            }
+          }
+        }
+        this.$store.commit("user/update_selected_samplestation", xval)
+      }
+    },
+    xstaffs() {
+      return this.$store.state.usergroup.staffs
+    },
+    xstaff: {
+      get() {
+        return this.$store.state.user.selected_staff
+      },
+      set(val) {
+        var xval = val
+        if (val.M_StaffID == undefined) {
+          for (var i = 0; i < this.xstaffs.length; i++) {
+            var xs = this.xstaffs[i]
+            if (xs.M_StaffID == val) {
+              xval = xs
+            }
+          }
+        }
+        this.$store.commit("user/update_selected_staff", xval)
+      }
+    },
+    xusergroupnames() {
+      return this.$store.state.usergroup.usergroupnames
+    },
+    xusergroupname: {
+      get() {
+        return this.$store.state.user.selected_usergroupname
+      },
+      set(val) {
+        var xval = val
+        if (val.M_UserGroupID == undefined) {
+          for (var i = 0; i < this.xusergroupnames.length; i++) {
+            var xs = this.xusergroupnames[i]
+            if (xs.M_UserGroupID == val) {
+              xval = xs
+            }
+          }
+        }
+        this.$store.commit("user/update_selected_usergroupname", xval)
+      }
+    },
+    xuserlocationflags() {
+      return this.$store.state.usergroup.userlocationflags
+    },
+    xuserlocationflag: {
+      get() {
+        return this.$store.state.user.selected_userlocationflag
+      },
+      set(val) {
+        var xval = val
+        console.log("xval", val)
+        if (val.M_UserLocationFlag == undefined) {
+          console.log("xval2", val)
+          for (var i = 0; i < this.xuserlocationflags.length; i++) {
+            var xs = this.xuserlocationflags[i]
+            if (xs.M_UserLocationFlag == val) {
+              xval = xs
+              console.log("xva3", val)
+            }
+          }
+        }
+        this.$store.commit("user/update_selected_userlocationflag", xval)
+        if (val.M_UserLocationFlag == "R") {
+          this.$store.commit("user/update_selected_branch", {})
+        }
+      }
+    },
+    xuserapprovelevels() {
+      return this.$store.state.usergroup.approvelevels
+    },
+    xuserapprovelevel: {
+      get() {
+        return this.$store.state.user.selected_userapprovelevel
+      },
+      set(val) {
+        var xval = val
+        console.log("xapprovelevel1", val)
+        if (val.M_ApproveLevelID == undefined) {
+          console.log("xapprovelevel12", val)
+          for (var i = 0; i < this.xuserapprovelevels.length; i++) {
+            var xs = this.xuserapprovelevels[i]
+            if (xs.M_ApproveLevelID == val) {
+              xval = xs
+              console.log("xapprovelevel13", val)
+            }
+          }
+        }
+        this.$store.commit("user/update_selected_userapprovelevel", xval)
+        // if (val.M_UserLocationFlag == "R") {
+        //   this.$store.commit("user/update_selected_branch", {})
+        // }
+      }
+    },
+    xuserdivisions() {
+      return this.$store.state.usergroup.divisions
+    },
+    xuserdivision: {
+      get() {
+        return this.$store.state.user.selected_userdivision
+      },
+      set(val) {
+        var xval = val
+        console.log("division", val)
+        if (val.DivisionID == undefined) {
+          console.log("xdivision2", val)
+          for (var i = 0; i < this.xuserdivisions.length; i++) {
+            var xs = this.xuserdivisions[i]
+            if (xs.DivisionID == val) {
+              xval = xs
+              let x = this.$store.state.user.selected_userdivision
+              if (x) if (x.DivisionID) this.errors.division = false
+              console.log("xdivision3", val)
+            }
+          }
+        }
+        this.$store.commit("user/update_selected_userdivision", xval)
+        // if (val.M_UserLocationFlag == "R") {
+        //   this.$store.commit("user/update_selected_branch", {})
+        // }
+      }
+    },
+    xreportes() {
+      return this.$store.state.usergroup.reports
+    },
+    xreport: {
+      get() {
+        return this.$store.state.usergroup.selected_report
+      },
+      set(val) {
+        var xval = val
+        if (val.R_ReportGroupID == undefined) {
+          for (var i = 0; i < this.xreportes.length; i++) {
+            var xs = this.xreportes[i]
+            if (xs.R_ReportGroupID == val) {
+              xval = xs
+            }
+          }
+        }
+        this.$store.commit("usergroup/update_selected_report", xval)
+      }
+    }
+
+
+  },
+  methods: {
+    resetPasswordNow() {
+      var param = this.selected_user
+      param.reason = this.reason
+      this.$store.dispatch("user/resetPassword", param)
+    },
+    resetPassword(value) {
+      this.selected_user = value
+      this.reason = ''
+      this.show_reason = true
+      this.dialog_resetpassword = true
+    },
+    updateDialogFormUser() {
+      this.$store.commit("user/update_dialog_form_user", false)
+    },
+    itemTextDivision(item) {
+      return `${item.DivisionCode} - ${item.DivisionName}`;
+    },
+    openFormUser(val) {
+      this.xid = val
+      this.username = ''
+
+      this.xuserapprovelevel = {}
+      this.xuserdivision = {}
+      this.password = ''
+      this.xstaff = ''
+      this.xsamplestation = ''
+      this.xuserlocationflag = { M_UserLocationFlagName: 'REGIONAL', M_UserLocationFlag: 'R' }
+      this.xregional = {}
+      this.xbranch = {}
+      this.xapprovelevel = {}
+      this.xreport = ''
+      this.iscoordinator = ''
+      this.$store.commit("user/update_dialog_form_user", true)
+    },
+    editFormUser(val) {
+      this.$store.dispatch("usergroup/getreportsample")
+      this.$store.commit("user/update_error_username", false)
+      this.$store.commit("user/update_error_password", false)
+      this.$store.commit("user/update_error_xstaff", false)
+      this.$store.commit("user/update_error_xsamplestation", false)
+      this.$store.commit("user/update_error_xreport", false)
+      this.$store.commit("user/update_error_xusergroupname", false)
+      this.$store.commit("user/update_error_iscoordinator", false)
+      this.xid = val.id
+      this.username = val.username
+
+      this.password = val.password
+      // this.xbranch = val.xbranch
+      this.$store.commit("usergroup/update_branches", [{
+        M_BranchID: val.xbranch,
+        M_BranchName: val.M_BranchName
+      }])
+      this.$store.commit("user/update_selected_branch", {
+        M_BranchID: val.xbranch,
+        M_BranchName: val.M_BranchName
+      })
+      this.$store.commit("user/update_selected_userapprovelevel", {
+        M_ApproveLevelID: val.xapprovelevelid,
+        M_ApproveLevelName: val.xapprovelevelname,
+      })
+      this.$store.commit("user/update_selected_userdivision", {
+        DivisionID: val.xuserdivisonid,
+        DivisionCode: val.xuserdivisioncode,
+        DivisionName: val.xuserdivisionname,
+      })
+      // this.xregional = val.xregional
+      this.$store.commit("usergroup/update_regionals", [{
+        S_RegionalID: val.xregional,
+        S_RegionalName: val.S_RegionalName
+      }])
+      this.$store.commit("user/update_selected_regional", {
+        S_RegionalID: val.xregional,
+        S_RegionalName: val.S_RegionalName
+      })
+      // this.xstaff = val.xstaff
+      this.$store.commit("usergroup/update_staffs", [{
+        M_StaffID: val.xstaff,
+        M_StaffName: val.staffname
+      }])
+      this.$store.commit("user/update_selected_staff", {
+        M_StaffID: val.xstaff,
+        M_StaffName: val.staffname
+      })
+      if (val.M_UserLocationFlag == 'B') {
+        this.xuserlocationflag = { M_UserLocationFlag: val.M_UserLocationFlag, M_UserLocationFlagName: 'CABANG' }
+      } else if (val.M_UserLocationFlag == 'R') {
+        this.xuserlocationflag = { M_UserLocationFlag: val.M_UserLocationFlag, M_UserLocationFlagName: 'REGIONAL' }
+      }
+
+      this.xsamplestation = val.xsamplestation
+      // this.xreport = val.xreport
+      this.$store.commit("usergroup/update_reports", [{
+        R_ReportGroupID: val.xreport,
+        R_ReportGroupName: val.R_ReportGroupName
+      }])
+      this.$store.commit("usergroup/update_selected_report", {
+        R_ReportGroupID: val.xreport,
+        R_ReportGroupName: val.R_ReportGroupName
+      })
+      this.xusergroupname = val.usergroupid
+      this.iscoordinator = val.iscoordinator === 'N' ? false : true
+      this.$store.commit("user/update_dialog_form_user_edit", true)
+    },
+    closeDialogEditUser() {
+      this.$store.commit("user/update_dialog_form_user_edit", false)
+      this.$store.dispatch("usergroup/getreportsample")
+    },
+    saveEditUser() {
+      this.$store.dispatch("user/save_edit", {
+        xid: this.xid,
+        usergroupid: this.$store.state.usergroup.selected_usergroup.id,
+        usergroupname: this.$store.state.usergroup.selected_usergroup.name,
+        username: this.username,
+        xregional: this.$store.state.user.selected_regional.S_RegionalID,
+        userlocationflag: this.$store.state.user.selected_userlocationflag.M_UserLocationFlag,
+        xbranch: this.$store.state.user.selected_branch.M_BranchID,
+        xapprovelevel: this.$store.state.user.selected_userapprovelevel.M_ApproveLevelID,
+        xdivision: this.$store.state.user.selected_userdivision.DivisionID,
+
+        xstaff: this.xstaff,
+        xsamplestation: this.xsamplestation,
+        xreport: this.xreport,
+        xusergroupname: this.xusergroupname,
+        iscoordinator: this.iscoordinator === true ? "Y" : "N"
+      })
+    },
+    saveFormUser() {
+      this.$store.dispatch("user/save", {
+        xid: this.xid,
+        usergroupid: this.$store.state.usergroup.selected_usergroup.id,
+        usergroupname: this.$store.state.usergroup.selected_usergroup.name,
+        username: this.username,
+
+        xregional: this.$store.state.user.selected_regional.S_RegionalID,
+        userlocationflag: this.$store.state.user.selected_userlocationflag.M_UserLocationFlag,
+        xbranch: this.$store.state.user.selected_branch.M_BranchID,
+        xapprovelevel: this.$store.state.user.selected_userapprovelevel.M_ApproveLevelID,
+        xdivision: this.$store.state.user.selected_userdivision.DivisionID,
+
+        password: this.password,
+        xstaff: this.xstaff,
+        xsamplestation: this.xsamplestation,
+        xreport: this.xreport,
+        iscoordinator: this.iscoordinator === true ? "Y" : "N"
+      })
+    },
+    updateAlert_success(val) {
+      this.$store.commit("usergroup/update_alert_success", val)
+    },
+    deleteUser(data) {
+      this.xid = data.id
+      this.msgalertuser = "Yakin, mau hapus user ?"
+      this.dialogdeletealertuser = true
+    },
+    closeDeleteAlertUser() {
+      this.$store.dispatch("user/delete", {
+        xid: this.xid,
+        usergroupid: this.$store.state.usergroup.selected_usergroup.id,
+        usergroupname: this.$store.state.usergroup.selected_usergroup.name,
+        username: this.username
+      })
+      this.dialogdeletealertuser = false
+    },
+    thr_search_regional: _.debounce(function () {
+      this.$store.dispatch("usergroup/search_regional", { search: this.search_regional })
+    }, 2000),
+    thr_search_branch: _.debounce(function () {
+      this.$store.dispatch("usergroup/search_branch", { regionalid: this.$store.state.user.selected_regional.S_RegionalID })
+    }, 1000),
+  },
+  watch: {
+    xregional(val, old) {
+      if (val == old) return
+      if (!val) return
+      if (val.length < 1) return
+      if (this.$store.state.usergroup.update_autocomplete_status == 1) return
+      //this.selected_icd10 = {}
+      // this.$store.commit("user/update_selected_branch", {})
+      this.thr_search_branch()
+    },
+  }
+}
+</script>
diff --git a/test/vuex/one-md-usergroup-user-v6/index.php b/test/vuex/one-md-usergroup-user-v6/index.php
new file mode 100644
index 0000000..3c05e8c
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/index.php
@@ -0,0 +1,76 @@
+<!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>One</title>
+  <link rel="stylesheet" href="../../../libs/vendor/css/google-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 class="blue lighten-5" >
+         <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+            <v-layout row wrap >
+               <v-flex xs4 class="left" fill-height pa-1>
+                    <!-- komponen kiri -->
+                    <one-md-user-group-list></one-md-user-group-list>
+                </v-flex>
+                <v-flex xs8 class="right" fill-height pa-1>
+                     <!-- komponen kanan -->
+                    <one-md-user-list></one-md-user-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 -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   components: {
+   'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+        'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+        'one-md-user-group-list': httpVueLoader('./components/oneMdUserGroupList.vue'),
+        'one-md-user-list' : httpVueLoader('./components/oneMdUserList.vue')
+      }
+    })
+    </script>
+  <style>
+    [v-cloak] {
+      display: none
+    }
+   .left {
+   }
+   .right {
+   }
+  </style>
+</body>
+
+</html>
diff --git a/test/vuex/one-md-usergroup-user-v6/modules/user.js b/test/vuex/one-md-usergroup-user-v6/modules/user.js
new file mode 100644
index 0000000..b113ac9
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/modules/user.js
@@ -0,0 +1,295 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/user.js"
+
+export default {
+    namespaced: true,
+    state: {
+        users: [],
+        save_status: 0,
+        save_error_message: '',
+        dialog_form_user: false,
+        dialog_form_user_edit: false,
+        lookup_user: 0,
+        error_username: false,
+
+        error_password: false,
+        error_xreport: false,
+        error_xusergroupname: false,
+        error_xstaff: false,
+        error_xsamplestation: false,
+        error_iscoordinator: false,
+        update_error_xusergroup: false,
+        show_all: 'N',
+        reports: [],
+        selected_report: {},
+        staffs: [],
+        selected_staff: {},
+        samplestations: [],
+        selected_samplestation: {},
+        usergroupnames: [],
+        selected_usergroupname: {},
+
+        errors: [],
+        dialog_resetpassword: false,
+        reason: '',
+        show_reason: false,
+        pass_reset: '',
+
+        branches: [],
+        selected_branch: {},
+        regionals: [],
+        selected_regional: {},
+        selected_userlocationflag: { M_UserLocationFlagName: 'REGIONAL', M_UserLocationFlag: 'R' },
+        selected_userapprovelevel: {},
+        selected_userdivision: {},
+        errors: {
+            regional: false, branch: false, regbranch: false, division: false
+        }
+    },
+    mutations: {
+        update_branches(state, val) {
+            state.branches = val
+        },
+        update_selected_branch(state, val) {
+            state.selected_branch = val
+        },
+        update_selected_userapprovelevel(state, val){
+            state.selected_userapprovelevel = val
+        },
+        update_selected_userdivision(state, val){
+            state.selected_userdivision = val
+        },
+        update_regionals(state, val) {
+            state.regionals = val
+        },
+        update_selected_regional(state, val) {
+            state.selected_regional = val
+        },
+        update_selected_userlocationflag(state, val) {
+            state.selected_userlocationflag = val
+        },
+        update_errors(state, status) {
+            state.errors = status
+        },
+        update_pass_reset(state, val) {
+            state.pass_reset = val
+        },
+        update_show_reason(state, val) {
+            state.show_reason = val
+        },
+        update_reason(state, val) {
+            state.reason = val
+        },
+        update_dialog_resetpassword(state, val) {
+            state.dialog_resetpassword = val
+        },
+        update_errors(state, val) {
+            state.errors = val
+        },
+        update_error_username(state, val) {
+            state.error_username = val
+        },
+        update_error_password(state, val) {
+            state.error_password = val
+        },
+        update_error_xreport(state, val) {
+            state.error_xreport = val
+        },
+        update_error_xstaff(state, val) {
+            state.error_xstaff = val
+        },
+        update_error_xusergroupname(state, val) {
+            state.error_xusergroupname = val
+        },
+        update_error_xsamplestation(state, val) {
+            state.error_xsamplestation = val
+        },
+        update_error_iscoordinator(state, val) {
+            state.error_iscoordinator = val
+        },
+        update_error_xusergroup(state, val) {
+            state.error_xusergroup = val
+        },
+        update_users(state, data) {
+            state.users = data
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_form_user(state, val) {
+            state.dialog_form_user = val
+        },
+        update_dialog_form_user_edit(state, val) {
+            state.dialog_form_user_edit = val
+        },
+        update_reports(state, val) {
+            state.reports = val
+        },
+        update_selected_report(state, val) {
+            state.selected_report = val
+        },
+
+        update_staffs(state, val) {
+            state.staffs = val
+        },
+        update_selected_staff(state, val) {
+            state.selected_staff = val
+        },
+        update_usergroupnames(state, val) {
+            state.usergroupnames = val
+        },
+        update_selected_usergroupname(state, val) {
+            state.selected_usergroupname = val
+        },
+        update_samplestations(state, val) {
+            state.samplestations = val
+        },
+        update_selected_samplestation(state, val) {
+            state.selected_samplestation = val
+        },
+        update_lookup_user(state, val) {
+            state.lookup_user = val
+        }
+    },
+    actions: {
+        async resetPassword(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.reset_password(prm)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+
+                    context.commit("update_pass_reset", resp.data.password)
+                    context.commit("update_show_reason", false)
+
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async save_edit(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.save_edit(prm)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    if (data.total !== -1) {
+                        context.commit("usergroup/update_save_status", 2, { root: true })
+                        context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+
+                        context.commit("update_dialog_form_user_edit", false)
+                        var msg = "User " + prm.username + " sudah update dong"
+                        context.commit("usergroup/update_msg_success", msg, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+                        context.dispatch("lookup", {
+                            id: prm.usergroupid
+                        })
+                    } else {
+                        context.commit("update_errors", resp.data.errors)
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async save(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.save(prm)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    if (data.total !== -1) {
+                        context.commit("usergroup/update_save_status", 2, { root: true })
+                        context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+
+                        context.commit("update_dialog_form_user", false)
+                        var msg = "User " + prm.username + " sudah update dong"
+                        context.commit("usergroup/update_msg_success", msg, { root: true })
+                        context.commit("usergroup/update_alert_success", true, { root: true })
+                        context.dispatch("lookup", {
+                            id: prm.usergroupid
+                        })
+                    } else {
+                        context.commit("update_errors", resp.data.errors)
+                    }
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async lookup(context, prm) {
+            context.commit("update_lookup_user", 1)
+            try {
+                let resp = await api.lookup(one_token(), prm.id)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_user", 3)
+                } else {
+                    context.commit("update_lookup_user", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_users", data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_user", 3)
+            }
+        },
+        async delete(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                let resp = await api.xdelete(one_token(), prm.xid)
+                if (resp.status != "OK") {
+                    context.commit("usergroup/update_save_status", 3, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                } else {
+                    context.commit("usergroup/update_save_status", 2, { root: true })
+                    context.commit("usergroup/update_save_error_message", resp.message, { root: true })
+                    context.commit("usergroup/update_alert_success", true, { root: true })
+
+                    //context.commit("update_dialog_form_schedule_promise", false)
+                    var msg = "User " + prm.username + " dari usergroup " + prm.usergroupname + " sudah dihapus dong"
+                    context.commit("usergroup/update_msg_success", msg, { root: true })
+                    context.commit("usergroup/update_alert_success", true, { root: true })
+                    context.dispatch("lookup", {
+                        id: prm.usergroupid
+                    })
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        }
+    }
+}
diff --git a/test/vuex/one-md-usergroup-user-v6/modules/usergroup.js b/test/vuex/one-md-usergroup-user-v6/modules/usergroup.js
new file mode 100644
index 0000000..913d701
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/modules/usergroup.js
@@ -0,0 +1,437 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/usergroup.js"
+
+export default {
+    namespaced: true,
+    state: {
+        act: 'new',
+        lookup_usergroup: 0,
+        get_data_status: 0,
+        lookup_error_message: '',
+        usergroups: [],
+        total_usergroups: 0,
+        total_filter_usergroups: 0,
+        selected_usergroup: { name: "[ Belum memilih User Group ]" },
+        save_status: 0,
+        save_error_message: '',
+        dialog_form_usergroup: false,
+        dialog_edit_form_usergroup: false,
+        alert_success: false,
+        msg_success: "",
+        error_clinic: false,
+        error_name: false,
+        error_dashboard: false,
+        reports: [],
+        selected_report: {},
+        staffs: [],
+        selected_staff: {},
+        regionals: [],
+        selected_regional: {},
+        branches: [],
+        approvelevels: [],
+        divisions: [],
+        selected_branch: {},
+        usergroupnames: [],
+        selected_usergroupname: {},
+        samplestations: [],
+        selected_samplestation: {},
+        dashboards: [],
+        selected_dashboard: {},
+        show_all: 'N',
+        userlocationflags: [
+            { M_UserLocationFlagName: 'PUSAT', M_UserLocationFlag: 'P' },
+            { M_UserLocationFlagName: 'REGIONAL', M_UserLocationFlag: 'R' },
+            { M_UserLocationFlagName: 'CABANG', M_UserLocationFlag: 'B' }
+        ],
+        selected_userlocationflag: { M_UserLocationFlagName: 'REGIONAL', M_UserLocationFlag: 'R' },
+        autocomplete_status: 0,
+        errors: []
+    },
+    mutations: {
+        update_autocomplete_status(state, val) {
+            state.autocomplete_status = val
+        },
+        update_branches(state, val) {
+            state.branches = val
+        },
+        update_selected_branch(state, val) {
+            state.selected_branch = val
+        },
+        update_regionals(state, val) {
+            state.regionals = val
+        },
+        update_selected_regional(state, val) {
+            state.selected_regional = val
+        },
+        update_selected_userlocationflag(state, val) {
+            state.selected_userlocationflag = val
+        },
+        update_dashboards(state, val) {
+            state.dashboards = val
+        },
+        update_selected_dashboard(state, val) {
+            state.selected_dashboard = val
+        },
+        update_act(state, val) {
+            state.act = val
+        },
+        update_error_code(state, val) {
+            state.error_code = val
+        },
+        update_error_name(state, val) {
+            state.error_name = val
+        },
+        update_error_clinic(state, val) {
+            state.error_clinic = val
+        },
+        update_error_dashboard(state, val) {
+            state.error_dashboard = val
+        },
+        update_errors(state, val) {
+            state.errors = val
+        },
+        update_show_all(state, val) {
+            state.show_all = val
+        },
+        update_lookup_error_message(state, status) {
+            state.lookup_error_message = status
+        },
+        update_lookup_usergroup(state, status) {
+            state.lookup_usergroup = status
+        },
+        update_usergroups(state, data) {
+            state.usergroups = data.records
+            state.total_usergroups = data.total
+            state.total_filter_usergroups = data.total_filter
+        },
+        update_selected_usergroup(state, val) {
+            state.selected_usergroup = val
+        },
+        update_save_status(state, val) {
+            state.save_status = val
+        },
+        update_save_error_message(state, val) {
+            state.save_error_message = val
+        },
+        update_dialog_form_usergroup(state, val) {
+            state.dialog_form_usergroup = val
+        },
+        update_dialog_edit_form_usergroup(state, val) {
+            state.dialog_edit_form_usergroup = val
+        },
+        update_alert_success(state, val) {
+            state.alert_success = val
+        },
+        update_msg_success(state, val) {
+            state.msg_success = val
+        },
+        update_reports(state, val) {
+            state.reports = val
+        },
+        update_selected_report(state, val) {
+            state.selected_report = val
+        },
+        update_staffs(state, val) {
+            state.staffs = val
+        },
+        update_selected_staff(state, val) {
+            state.selected_staff = val
+        },
+        update_samplestations(state, val) {
+            state.samplestations = val
+        },
+        update_selected_samplestation(state, val) {
+            state.selected_samplestation = val
+        },
+        update_usergroupnames(state, val) {
+            state.usergroupnames = val
+        },
+        update_selected_usergroupname(state, val) {
+            state.selected_usergroupname = val
+        },
+        update_approvelevels(state, val) {
+            state.approvelevels = val
+        },
+        update_divisions(state, val) {
+            state.divisions = val
+        },
+
+        update_get_data_status(state, val) {
+            state.get_data_status = val
+        }
+
+    },
+    actions: {
+        async lookup(context, prm) {
+            context.commit("update_lookup_usergroup", 1)
+            try {
+                let resp = await api.lookup(one_token(), prm.search, prm.all)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_usergroup", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_usergroup", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total,
+                        total_filter: resp.data.total_filter
+                    }
+                    context.commit("update_usergroups", data)
+                }
+            } catch (e) {
+                context.commit("update_lookup_usergroup", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async getdashboards(context, prm) {
+            context.commit("update_lookup_usergroup", 1)
+            try {
+                console.log("dasdsa")
+                prm.token = one_token()
+                console.log(prm)
+                let resp = await api.getdashboards(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_usergroup", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_usergroup", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_dashboards", data.records)
+                    if (prm.cat === 'new') {
+                        if (data.records.length > 0)
+                            context.commit("update_selected_dashboard", data.records[0])
+                        else
+                            context.commit("update_selected_dashboard", {})
+                    }
+                    else {
+                        var xdata = data.records
+                        var idx = _.findIndex(xdata, function (o) { return o.url == prm.dashboard })
+                        context.commit("update_selected_dashboard", data.records[idx])
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_lookup_usergroup", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+
+        async save(context, prm) {
+            context.commit("update_save_status", 1)
+            context.commit("update_error_name", false)
+            context.commit("update_error_dashboard", false)
+            context.commit("update_error_clinic", false)
+            try {
+                prm.token = one_token()
+                let resp = await api.save(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_error_message", resp.message)
+                    var data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+
+                    if (data.total !== -1) {
+                        context.commit("update_errors", [])
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form_usergroup", false)
+                        var msg = "User Group " + prm.name + " sudah tersimpan dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("lookup", { search: "", all: context.show_all })
+                    } else {
+                        context.commit("update_errors", resp.data.errors)
+
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async update(context, prm) {
+            context.commit("update_save_status", 1)
+            context.commit("update_error_name", false)
+            context.commit("update_error_dashboard", false)
+            context.commit("update_error_clinic", false)
+            try {
+                prm.token = one_token()
+                let resp = await api.update(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_save_error_message", resp.message)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+
+                    if (data.total !== -1) {
+                        context.commit("update_error_name", false)
+                        context.commit("update_error_dashboard", false)
+                        context.commit("update_error_clinic", false)
+
+                        context.commit("update_alert_success", true)
+                        context.commit("update_dialog_form_usergroup", false)
+                        var msg = "User Group " + prm.name + " sudah terupdate dong ..."
+                        context.commit("update_msg_success", msg)
+                        context.dispatch("lookup", { search: "", all: context.show_all })
+                    } else {
+                        if (resp.data.errorcode === 'Y') {
+                            context.commit("update_error_code", true)
+                        }
+                        if (resp.data.errorname === 'Y') {
+                            context.commit("update_error_name", true)
+                        }
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                context.commit("update_save_error_message", e.message)
+                console.log(e)
+            }
+        },
+        async delete(context, prm) {
+            context.commit("update_save_status", 1)
+            try {
+                let resp = await api.xdelete(one_token(), prm.usergroupid)
+                if (resp.status != "OK") {
+                    context.commit("update_save_status", 3)
+                    context.commit("update_save_error_message", resp.message)
+                } else {
+                    context.commit("update_save_status", 2)
+                    context.commit("update_save_error_message", resp.message)
+                    context.commit("update_alert_success", true)
+
+                    var msg = "Schedule " + prm.usergroupname + " sudah dihapus dong"
+                    context.commit("update_msg_success", msg)
+                    context.commit("update_alert_success", true)
+                    context.commit("update_selected_usergroup", {})
+                    context.dispatch("lookup", { search: "" })
+                    context.commit("user/update_usergroup_user", [], { root: true })
+                }
+            } catch (e) {
+                context.commit("update_save_status", 3)
+                console.log(e)
+            }
+        },
+        async getreportsample(context) {
+            context.commit("update_get_data_status", 1)
+            try {
+                let resp = await api.getreportsample(one_token())
+                if (resp.status != "OK") {
+                    context.commit("update_get_data_status", 3)
+                } else {
+                    context.commit("update_get_data_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_staffs", data.records.staffs)
+                    context.commit("update_reports", data.records.reports)
+                    context.commit("update_regionals", data.records.regionals)
+                    // context.commit("update_samplestations",data.records.samplestations)
+                    context.commit("update_usergroupnames", data.records.usergroupnames)
+                }
+            } catch (e) {
+                context.commit("update_get_data_status", 3)
+            }
+        },
+        async search_regional(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.search_regional(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_regionals", resp.data.records)
+                }
+            } catch (e) {
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async search_branch(context, prm) {
+            context.commit("update_autocomplete_status", 1)
+            console.log(prm)
+            try {
+                prm.token = one_token()
+                let resp = await api.search_branch(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_autocomplete_status", 3)
+                } else {
+                    context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_branches", resp.data.records)
+                }
+            } catch (e) {
+                context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async getapprovelevel(context) {
+            // context.commit("update_autocomplete_status", 1)
+            try {
+                let prm = {}
+                prm.token = one_token()
+                let resp = await api.getapprovelevel(prm)
+                if (resp.status != "OK") {
+                    // context.commit("update_autocomplete_status", 3)
+                } else {
+                    // context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_approvelevels", data.records)
+                }
+            } catch (e) {
+                // context.commit("update_autocomplete_status", 3)
+            }
+        },
+        async getdivision(context) {
+            // context.commit("update_autocomplete_status", 1)
+            try {
+                let prm = {}
+                prm.token = one_token()
+                let resp = await api.getdivision(prm)
+                if (resp.status != "OK") {
+                    // context.commit("update_autocomplete_status", 3)
+                } else {
+                    // context.commit("update_autocomplete_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_divisions", data.records)
+                }
+            } catch (e) {
+                // context.commit("update_autocomplete_status", 3)
+            }
+        },
+    }
+}
diff --git a/test/vuex/one-md-usergroup-user-v6/mutation.js b/test/vuex/one-md-usergroup-user-v6/mutation.js
new file mode 100644
index 0000000..e69de29
diff --git a/test/vuex/one-md-usergroup-user-v6/store.js b/test/vuex/one-md-usergroup-user-v6/store.js
new file mode 100644
index 0000000..bf18e89
--- /dev/null
+++ b/test/vuex/one-md-usergroup-user-v6/store.js
@@ -0,0 +1,25 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import usergroup from "./modules/usergroup.js";
+import user from "./modules/user.js";
+import system from "../../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        usergroup: usergroup,
+        user: user,
+        system:system
+    },
+    state: {
+
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    }
+});