diff --git a/resources/views/pages/Kasir/transaksi.blade.php b/resources/views/pages/Kasir/transaksi.blade.php
index 2b2f186..0f6ef68 100644
--- a/resources/views/pages/Kasir/transaksi.blade.php
+++ b/resources/views/pages/Kasir/transaksi.blade.php
@@ -22,7 +22,7 @@
 @section('content')
     <div class="container" style="display: contents;">
         <div class="row" style="padding: 5px">
-            <div class="col-lg-8">
+            <div class="col-xl-8 col-lg-6 col-md-6 col-sm-12">
                 <div class="card card-warning card-outline card-outline-tabs">
                     <div class="card-header p-0 border-bottom-0">
                         <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
@@ -514,6 +514,7 @@
 
         //  make function add menu to table and calculate qty and total price menu ordered and check menu ordered is exist or not in tbody table order-menus insert this in
         function aadMenu(params) {
+            console.log(params);
             var table = document.getElementById("order-menus");
             var menu = params;
             var menuId = menu.id;
@@ -536,28 +537,49 @@
 
             if (isExist) {
                 var qty = table.rows[index].getAttribute('data-qty');
+                var diskonSatuan = table.rows[index].getAttribute('data-diskon-satuan');
                 var total = table.rows[index].getAttribute('data-total');
 
                 qty = parseInt(qty) + 1;
-                total = parseInt(total) + parseInt(menuPrice);
+                diskonSatuan = parseInt(diskonSatuan);
+                total = (parseInt(total) + parseInt(menuPrice)) - ((parseInt(total) + parseInt(menuPrice)) * (diskonSatuan /
+                    100));
 
                 table.rows[index].setAttribute('data-qty', qty);
+                table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
                 table.rows[index].setAttribute('data-total', total);
 
+                table.rows[index].cells[0].innerHTML = `
+                <td>
+                    ${params.nama_produk}
+                    <br>
+                    ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + harga + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + total + '</small>'}
+                    <div class="input-group input-group-sm mt-1">
+                        <input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
+                    </div>
+                </td>
+            `;
                 table.rows[index].cells[1].innerHTML = `
                 <td class="text-center">
                     <div class="input-group input-group-sm">
                         <span class="input-group-append">
-                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params.id})"><b>-</b></button>
+                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params.id}, '${params.nama_produk}')"><b>-</b></button>
                         </span>
-                        <input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
+                        <input type="text" name="bayar" class="form-control rounded-0" readonly value="${qty}">
                         <span class="input-group-append">
-                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params.id})">+</button>
+                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params.id}, '${params.nama_produk}')">+</button>
                         </span>
                     </div>
                 </td>
             `;
                 table.rows[index].cells[2].innerHTML = `
+                <td class="text-center">
+                    <div class="input-group input-group-sm">
+                        <input type="number" name="diskon_satuan" class="form-control rounded-0" value="0">
+                    </div>
+                </td>
+            `;
+                table.rows[index].cells[3].innerHTML = `
                 <td class="text-center">
                     <button class="btn btn-danger btn-sm" onclick="deleteMenu(${params.id})">
                         <i class="fas fa-trash"></i>
@@ -568,23 +590,31 @@
                 $('#modal-default').modal('hide');
             } else {
                 $('#tbody-order-menus').append(`
-                <tr id="row-${params.id}" data-id="${params.id}" data-nama="${params.nama_produk}" data-harga="${params.harga_produk}" data-qty="1" data-total="${params.harga_produk}">
+                <tr id="row-${params.id}" data-id="${params.id}" data-nama="${params.nama_produk}" data-harga="${params.harga_produk}" data-qty="1" data-diskon-satuan="0" data-total="${params.harga_produk}">
                     <td>
                         ${params.nama_produk}
                         <br>
-                        <small class="text-danger">Rp. ${params.harga_produk}</small>
+                        <small class="text-primary">Rp. ${params.harga_produk}</small>
+                        <div class="input-group input-group-sm mt-1">
+                            <input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
+                        </div>
                     </td>
                     <td class="text-center">
                         <div class="input-group input-group-sm">
                             <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params.id})"><b>-</b></button>
+                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params.id}, '${params.nama_produk}')"><b>-</b></button>
                             </span>
-                            <input type="number" name="bayar" class="form-control rounded-0" value="${menuQty}">
+                            <input type="text" name="bayar" class="form-control rounded-0" readonly value="${menuQty}">
                             <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params.id})">+</button>
+                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params.id}, '${params.nama_produk}')">+</button>
                             </span>
                         </div>
                     </td>
+                    <td class="text-center">
+                        <div class="input-group input-group-sm">
+                            <input type="number" name="diskon_satuan" class="form-control rounded-0" value="0">
+                        </div>
+                    </td>
                     <td class="text-center">
                         <button class="btn btn-danger btn-sm" onclick="deleteMenu(${params.id})">
                             <i class="fas fa-trash"></i>
@@ -624,7 +654,8 @@
             for (var i = 1, row; row = table.rows[i]; i++) {
                 var harga = row.getAttribute('data-harga');
                 var qty = row.getAttribute('data-qty');
-                var total = total + (harga * qty);
+                var diskonSatuan = row.getAttribute('data-diskon-satuan');
+                var total = total + ((harga * qty) - ((harga * qty) * (diskonSatuan / 100)));
             }
 
             var ribuantotal = toRupiah(total);
@@ -641,7 +672,7 @@
         }
 
         //  increment qty menu ordered
-        function incrementMenu(params) {
+        function incrementMenu(params, nama_produk) {
             var table = document.getElementById("order-menus");
             var index = 0;
 
@@ -654,24 +685,38 @@
             }
 
             var qty = table.rows[index].getAttribute('data-qty');
+            var diskonSatuan = table.rows[index].getAttribute('data-diskon-satuan');
             var total = table.rows[index].getAttribute('data-total');
             var harga = table.rows[index].getAttribute('data-harga');
 
             qty = parseInt(qty) + 1;
-            total = parseInt(total) + parseInt(harga);
+            diskonSatuan = parseInt(diskonSatuan);
+            total = (parseInt(total) + parseInt(harga)) - ((parseInt(total) + parseInt(harga)) * (diskonSatuan / 100));
 
             table.rows[index].setAttribute('data-qty', qty);
+            table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
             table.rows[index].setAttribute('data-total', total);
 
+            table.rows[index].cells[0].innerHTML = `
+            <td>
+                ${nama_produk}
+                <br>
+                ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + harga + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + total + '</small>'}
+                <div class="input-group input-group-sm mt-1">
+                    <input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
+                </div>
+            </td>
+        `;
+
             table.rows[index].cells[1].innerHTML = `
                 <td class="text-center">
                     <div class="input-group input-group-sm">
                         <span class="input-group-append">
-                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params})"><b>-</b></button>
+                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params}, '${nama_produk}')"><b>-</b></button>
                         </span>
-                        <input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
+                        <input type="text" name="bayar" class="form-control rounded-0" readonly value="${qty}">
                         <span class="input-group-append">
-                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params})">+</button>
+                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params}, '${nama_produk}')">+</button>
                         </span>
                     </div>
                 </td>
@@ -681,7 +726,7 @@
         }
 
         //  decrement qty menu ordered
-        function decrementMenu(params) {
+        function decrementMenu(params, nama_produk) {
             var table = document.getElementById("order-menus");
             var index = 0;
 
@@ -694,25 +739,39 @@
             }
 
             var qty = table.rows[index].getAttribute('data-qty');
+            var diskonSatuan = table.rows[index].getAttribute('data-diskon-satuan');
             var total = table.rows[index].getAttribute('data-total');
             var harga = table.rows[index].getAttribute('data-harga');
 
             if (qty > 1) {
                 qty = parseInt(qty) - 1;
-                total = parseInt(total) - parseInt(harga);
+                diskonSatuan = parseInt(diskonSatuan);
+                total = (parseInt(total) - parseInt(harga)) - ((parseInt(total) - parseInt(harga)) * (diskonSatuan / 100));
 
                 table.rows[index].setAttribute('data-qty', qty);
+                table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
                 table.rows[index].setAttribute('data-total', total);
 
+                table.rows[index].cells[0].innerHTML = `
+                <td>
+                    ${nama_produk}
+                    <br>
+                    ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + harga + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + total + '</small>'}
+                    <div class="input-group input-group-sm mt-1">
+                        <input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
+                    </div>
+                </td>
+            `;
+
                 table.rows[index].cells[1].innerHTML = `
                     <td class="text-center">
                         <div class="input-group input-group-sm">
                             <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params})"><b>-</b></button>
+                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params}, '${nama_produk}')"><b>-</b></button>
                             </span>
-                            <input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
+                            <input type="text" name="bayar" class="form-control rounded-0" readonly value="${qty}">
                             <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params})">+</button>
+                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params}, '${nama_produk}')">+</button>
                             </span>
                         </div>
                     </td>
@@ -798,6 +857,7 @@
                 var id = row.getAttribute('data-id');
                 var nama = row.getAttribute('data-nama');
                 var qty = row.getAttribute('data-qty');
+                var diskonSatuan = row.getAttribute('data-diskon-satuan');
                 var harga = row.getAttribute('data-harga');
                 var total = row.getAttribute('data-total');
 
@@ -806,6 +866,7 @@
                         id: id,
                         nama: nama,
                         qty: qty,
+                        diskonSatuan: diskonSatuan,
                         harga: harga,
                         total: total
                     });