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
index 868cf3a..9ac0c60 100644
--- a/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillList.vue
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillList.vue
@@ -457,7 +457,13 @@
                 return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
             },
             isSelected(p) {
-                return p.SupplierInvoiceID == this.$store.state.bill.selected_bill.SupplierInvoiceID
+                const sel = this.$store.state.bill.selected_bill;
+                if (!sel || !sel.type) return false;
+                return p.type === sel.type && (
+                    (sel.type === 'INVOICE' && p.SupplierInvoiceID == sel.SupplierInvoiceID) ||
+                    (sel.type === 'DP' && p.DownpaymentID == sel.DownpaymentID) ||
+                    (sel.type === 'INSTALLMENT' && p.InstallmentID == sel.InstallmentID)
+                );
             },
             closeDialogPaySuccess() {
                 this.$store.commit("bill/update_dialog_pay_success", false)
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
index c1f150e..f79d587 100644
--- a/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentManual.vue
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentManual.vue
@@ -1202,7 +1202,18 @@
                     tanggalbayar: this.xtanggalbayar,
                     type: this.$store.state.bill.selected_bill.type,
                 }
-                //console.log(prm.amount)
+
+                if (this.$store.state.bill.selected_bill.type == 'DP') {
+                    prm.DownpaymentID = this.$store.state.bill.selected_bill.DownpaymentID
+                    prm.dpkode = this.$store.state.bill.selected_bill.SupplierInvoiceNumber
+                } else if (this.$store.state.bill.selected_bill.type == "INSTALLMENT") {
+                    prm.InstallmentID = this.$store.state.bill.selected_bill.InstallmentID
+                    prm.installmentkode = this.$store.state.bill.selected_bill.SupplierInvoiceNumber
+                } else {
+                    prm.SupplierInvoiceID = this.$store.state.bill.selected_bill.SupplierInvoiceID
+                    prm.invoicekode = this.$store.state.bill.selected_bill.SupplierInvoiceNumber
+                }
+
                 this.$store.dispatch("paymentmanual/pay", prm)
             },
             deleteNote(note, idx) {
@@ -1249,8 +1260,14 @@
             },
             closeDialogDelete() {
                 let arrbill = this.$store.state.bill.bills
-                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
-                    .SupplierInvoiceID)
+                const sel = this.$store.state.bill.selected_bill;
+                var idx = _.findIndex(arrbill, item =>
+                    item.type === sel.type && (
+                        (sel.type === 'INVOICE' && item.SupplierInvoiceID == sel.SupplierInvoiceID) ||
+                        (sel.type === 'DP' && item.DownpaymentID == sel.DownpaymentID) ||
+                        (sel.type === 'INSTALLMENT' && item.InstallmentID == sel.InstallmentID)
+                    )
+                );
                 this.$store.commit("paymentmanual/update_dialog_delete", false)
                 this.$store.commit("bill/update_selected_bill", {})
                 this.$store.dispatch("bill/search", {
@@ -1264,8 +1281,14 @@
             },
             closeDialogEdit() {
                 let arrbill = this.$store.state.bill.bills
-                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
-                    .SupplierInvoiceID)
+                const sel = this.$store.state.bill.selected_bill;
+                var idx = _.findIndex(arrbill, item =>
+                    item.type === sel.type && (
+                        (sel.type === 'INVOICE' && item.SupplierInvoiceID == sel.SupplierInvoiceID) ||
+                        (sel.type === 'DP' && item.DownpaymentID == sel.DownpaymentID) ||
+                        (sel.type === 'INSTALLMENT' && item.InstallmentID == sel.InstallmentID)
+                    )
+                );
                 this.$store.commit("paymentmanual/update_dialog_edit", false)
                 this.$store.commit("bill/update_selected_bill", {})
                 this.$store.dispatch("bill/search", {
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
index 9922677..ade59b7 100644
--- a/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentMulti.vue
+++ b/test/vuex/acc-one-supplier-payment-cashier-v5/components/oneBillPaymentMulti.vue
@@ -1231,8 +1231,14 @@
             },
             closeDialogDelete() {
                 let arrbill = this.$store.state.bill.bills
-                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
-                    .SupplierInvoiceID)
+                const sel = this.$store.state.bill.selected_bill;
+                var idx = _.findIndex(arrbill, item =>
+                    item.type === sel.type && (
+                        (sel.type === 'INVOICE' && item.SupplierInvoiceID == sel.SupplierInvoiceID) ||
+                        (sel.type === 'DP' && item.DownpaymentID == sel.DownpaymentID) ||
+                        (sel.type === 'INSTALLMENT' && item.InstallmentID == sel.InstallmentID)
+                    )
+                );
                 this.$store.commit("paymentmanual/update_dialog_delete", false)
                 this.$store.commit("bill/update_selected_bill", {})
                 this.$store.dispatch("bill/search", {
@@ -1246,8 +1252,14 @@
             },
             closeDialogEdit() {
                 let arrbill = this.$store.state.bill.bills
-                var idx = _.findIndex(arrbill, item => item.SupplierInvoiceID === this.$store.state.bill.selected_bill
-                    .SupplierInvoiceID)
+                const sel = this.$store.state.bill.selected_bill;
+                var idx = _.findIndex(arrbill, item =>
+                    item.type === sel.type && (
+                        (sel.type === 'INVOICE' && item.SupplierInvoiceID == sel.SupplierInvoiceID) ||
+                        (sel.type === 'DP' && item.DownpaymentID == sel.DownpaymentID) ||
+                        (sel.type === 'INSTALLMENT' && item.InstallmentID == sel.InstallmentID)
+                    )
+                );
                 this.$store.commit("paymentmanual/update_dialog_edit", false)
                 this.$store.commit("bill/update_selected_bill", {})
                 this.$store.dispatch("bill/search", {
diff --git a/test/vuex/acc-one-supplier-payment-v4/api/paymentmanual.js b/test/vuex/acc-one-supplier-payment-v4/api/paymentmanual.js
index 16c502c..0072329 100644
--- a/test/vuex/acc-one-supplier-payment-v4/api/paymentmanual.js
+++ b/test/vuex/acc-one-supplier-payment-v4/api/paymentmanual.js
@@ -19,7 +19,6 @@ export async function lookup_type(token) {
     }
 }
 
-
 export async function lookup_banks(token) {
     try {
         var resp = await axios.post(URL + 'payment/lookup_banks',{token:token});
@@ -39,7 +38,6 @@ export async function lookup_banks(token) {
     }
 }
 
-
 export async function lookup_accounts(token) {
     try {
         var resp = await axios.post(URL + 'payment/lookup_accounts',{token:token});
@@ -59,7 +57,6 @@ export async function lookup_accounts(token) {
     }
 }
 
-
 export async function searchcard(token,prm) {
     try {
        var resp = await axios.post(URL + 'payment/searchcard',{token:token,search:prm});
@@ -117,6 +114,25 @@ export async function payDownpayment(prm) {
     }
 }
 
+export async function payInstallment(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/payInstallment',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 editpay(prm) {
     try {
         var resp = await axios.post(URL + 'payment/editpaymanual',prm);
diff --git a/test/vuex/acc-one-supplier-payment-v4/components/oneBillList.vue b/test/vuex/acc-one-supplier-payment-v4/components/oneBillList.vue
index 49719d0..f0241d7 100644
--- a/test/vuex/acc-one-supplier-payment-v4/components/oneBillList.vue
+++ b/test/vuex/acc-one-supplier-payment-v4/components/oneBillList.vue
@@ -5,14 +5,14 @@
                         <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" label="Tgl. Awal" outline readonly v-on="on" @blur="date = deFormatedDate(startDateFormatted)"></v-text-field>
+                        <v-text-field class="mt-1" v-model="startDateFormatted" label="Tgl. Awal" outline readonly v-on="on"></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" label="Tgl. Akhir" outline readonly v-on="on" @blur="date = deFormatedDate(endDateFormatted)"></v-text-field>
+                        <v-text-field class="mt-1" v-model="endDateFormatted" label="Tgl. Akhir" outline readonly v-on="on"></v-text-field>
                     </template>
                     <v-date-picker v-model="init_edate" no-title @input="menuenddate = false"></v-date-picker>
                 </v-menu>
@@ -110,7 +110,13 @@
                         return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
                   },
                   isSelected(p) {
-                        return p.SupplierInvoiceID == this.$store.state.bill.selected_bill.SupplierInvoiceID
+                        const sel = this.$store.state.bill.selected_bill;
+                        if (!sel || !sel.type) return false;
+                        return p.type === sel.type && (
+                            (sel.type === 'INVOICE' && p.SupplierInvoiceID == sel.SupplierInvoiceID) ||
+                            (sel.type === 'DP' && p.DownpaymentID == sel.DownpaymentID) ||
+                            (sel.type === 'INSTALLMENT' && p.InstallmentID == sel.InstallmentID)
+                        );
                   },
                   convertMoney(money) {
                         return one_money(money)
diff --git a/test/vuex/acc-one-supplier-payment-v4/components/oneBillPaymentManual.vue b/test/vuex/acc-one-supplier-payment-v4/components/oneBillPaymentManual.vue
index 9a011a6..f285ab4 100644
--- a/test/vuex/acc-one-supplier-payment-v4/components/oneBillPaymentManual.vue
+++ b/test/vuex/acc-one-supplier-payment-v4/components/oneBillPaymentManual.vue
@@ -1167,11 +1167,15 @@
                     tanggalbayar: this.xtanggalbayar,
                     type: this.$store.state.bill.selected_bill.type
                 }
-                // console.log(prm)
 
                 if (this.$store.state.bill.selected_bill.type == 'DP') {
+                    prm.orderid = this.$store.state.bill.selected_bill.DownpaymentID
                     this.$store.dispatch("paymentmanual/payDownpayment", prm)
+                } else if (this.$store.state.bill.selected_bill.type == 'INSTALLMENT') {
+                    prm.orderid = this.$store.state.bill.selected_bill.InstallmentID
+                    this.$store.dispatch("paymentmanual/payInstallment", prm)
                 } else {
+                    prm.orderid = this.$store.state.bill.selected_bill.SupplierInvoiceID
                     this.$store.dispatch("paymentmanual/pay", prm)
                 }
             },
@@ -1185,10 +1189,21 @@
                     orderid: this.$store.state.bill.selected_bill.SupplierInvoiceID,
                     headerid: this.$store.state.bill.selected_bill.SupplierPaymentID,
                     xnumber: this.$store.state.bill.selected_bill.SupplierPaymentNumber,
-                    tanggalbayar : this.xtanggalbayar
+                    tanggalbayar : this.xtanggalbayar,
+                    type: this.$store.state.bill.selected_bill.type
                 }
                 //console.log(prm.amount)
-                this.$store.dispatch("paymentmanual/editpay", prm)
+                if (this.$store.state.bill.selected_bill.type == 'DP') {
+                    prm.orderid = this.$store.state.bill.selected_bill.DownpaymentID
+                    this.$store.dispatch("paymentmanual/editpay", prm)
+                } else if (this.$store.state.bill.selected_bill.type == 'INSTALLMENT') {
+                    prm.orderid = this.$store.state.bill.selected_bill.InstallmentID
+                    this.$store.dispatch("paymentmanual/editpay", prm)
+                } else {
+                    prm.orderid = this.$store.state.bill.selected_bill.SupplierInvoiceID
+                    this.$store.dispatch("paymentmanual/editpay", prm)
+                }
+
             },
             deleteNote(note, idx) {
                 this.$store.commit("paymentmanual/update_note_delete", "")
diff --git a/test/vuex/acc-one-supplier-payment-v4/modules/paymentmanual.js b/test/vuex/acc-one-supplier-payment-v4/modules/paymentmanual.js
index 59b4434..8a62799 100644
--- a/test/vuex/acc-one-supplier-payment-v4/modules/paymentmanual.js
+++ b/test/vuex/acc-one-supplier-payment-v4/modules/paymentmanual.js
@@ -348,6 +348,37 @@ export default {
             }
         },
 
+        async payInstallment(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.payInstallment(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
+                    context.commit("update_disable_btn_pay", 'Y')
+                    context.commit("update_idx", id)
+                    context.commit("update_total_payment", 0)
+                    context.commit("update_paynumber", "Payment Instruction nomor <span style='color:red'>" + xnumber + "</span> telah berhasil")
+                    context.commit("update_dialog_pay_success", true)
+                    context.commit("update_in_saving", false)
+                    context.commit("update_xbayar", 0)
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+
         async editpay(context, prm) {
             context.commit("update_lookup_status", 1)
             try {