diff --git a/app/Http/Controllers/Kasir/Transaksi.php b/app/Http/Controllers/Kasir/Transaksi.php
index e2ca8f3..e0e8b50 100644
--- a/app/Http/Controllers/Kasir/Transaksi.php
+++ b/app/Http/Controllers/Kasir/Transaksi.php
@@ -14,6 +14,8 @@ use Carbon\Carbon;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 
+use function PHPUnit\Framework\isEmpty;
+
 class Transaksi extends Controller
 {
 
@@ -215,6 +217,27 @@ class Transaksi extends Controller
                     'status_pesanan' => $value['status_pesanan_dinein'] ?? 2,
                 ];
                 $detailPesananModels = \App\Models\DetailPesanan::create($oderDatas);
+
+                if (count($request->additionalOrderMenus) > 0) {
+
+                    foreach ($request->additionalOrderMenus as $keyadd2 => $valueadd2) {
+                        if ($key + 1 == $valueadd2['parent']) {
+                            $oderDatas = [
+                                'pesanan_id' => $pesananModels->id,
+                                'id_parent' => $detailPesananModels->id,
+                                'produk_id' => $valueadd2['id'],
+                                'nama_produk' => $valueadd2['nama_produk'],
+                                'jumlah_produk' => 1,
+                                'harga_produk' => $valueadd2['harga_produk'],
+                                'total_harga_produk' => $valueadd2['harga_produk'],
+                                'diskon_persen' => $valueadd2['diskonSatuan'] ?? null,
+                                'keterangan_produk' => $valueadd2['keterangan'] ?? null,
+                                'status_pesanan' => $valueadd2['status_pesanan_dinein'] ?? 2,
+                            ];
+                            $detailPesananAdditionalModels = \App\Models\DetailPesanan::create($oderDatas);
+                        }
+                    }
+                }
             }
 
             // keuangan
diff --git a/app/Models/DetailPesanan.php b/app/Models/DetailPesanan.php
index 408d7c5..a112114 100644
--- a/app/Models/DetailPesanan.php
+++ b/app/Models/DetailPesanan.php
@@ -15,6 +15,7 @@ class DetailPesanan extends Model
 
     protected $fillable = [
         'pesanan_id',
+        'id_parent',
         'produk_id',
         'nama_produk',
         'harga_produk',
diff --git a/database/migrations/2024_03_27_020213_add_id_parent_in_detail_pesanans_table.php b/database/migrations/2024_03_27_020213_add_id_parent_in_detail_pesanans_table.php
new file mode 100644
index 0000000..46c5783
--- /dev/null
+++ b/database/migrations/2024_03_27_020213_add_id_parent_in_detail_pesanans_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('detail_pesanans', function (Blueprint $table) {
+            $table->unsignedBigInteger('id_parent')->nullable()->after('id');
+            $table->foreign('id_parent')->references('id')->on('detail_pesanans')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('detail_pesanans', function (Blueprint $table) {
+            $table->dropForeign(['id_parent']);
+            $table->dropColumn('id_parent');
+        });
+    }
+};
diff --git a/resources/views/pages/Kasir/js.blade.php b/resources/views/pages/Kasir/js.blade.php
index b8a7711..3d5e4b8 100644
--- a/resources/views/pages/Kasir/js.blade.php
+++ b/resources/views/pages/Kasir/js.blade.php
@@ -143,9 +143,18 @@
 
                     table.rows[index].cells[0].innerHTML = `
                         <td>
-                            ${params.nama_produk}
-                            <br>
-                            ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
+                            <div class="row" style="justify-content: space-between;align-items: center;margin:2px">
+                                <div class="row" style="align-items: center;">
+                                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add-extra" onclick="setIdRowTable(${globalId}, '${params.nama_produk}', '${params.harga_produk}')">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                    <span id="menu-name${globalId}">${params.nama}</span>
+                                </div>
+                                <small id="harga-menu-name${globalId}">${params.harga}</small>
+                            </div>
+                            <ul id="the-extra-menu-choised${globalId}">
+                            </ul>
+                            ${(diskonSatuan > 0) ? '<small id="price'+globalId+'" class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small id="price'+globalId+'" class="text-danger">Rp. ' + total + '</small>' : '<small id="price'+globalId+'" class="text-primary">Rp. ' + totalLama + '</small>'}
                             <div class="input-group input-group-sm mt-1">
                                 <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan.." value='${paketFreenyaini} ${paketFreenyaini2}'>
                             </div>
@@ -154,9 +163,16 @@
                 } else {
                     table.rows[index].cells[0].innerHTML = `
                         <td>
-                            ${params.nama_produk}
-                            <br>
-                            ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
+                            <div class="row" style="justify-content: space-between;align-items: center;margin:2px">
+                                <div class="row" style="align-items: center;">
+                                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add-extra" onclick="setIdRowTable(${globalId}, '${params.nama_produk}', '${params.harga_produk}')">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                    <span id="menu-name${globalId}">${params.nama}</span>
+                                </div>
+                                <small id="harga-menu-name${globalId}">${params.harga}</small>
+                            </div>
+                            ${(diskonSatuan > 0) ? '<small id="price'+globalId+'" class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small id="price'+globalId+'" class="text-danger">Rp. ' + total + '</small>' : '<small id="price'+globalId+'" class="text-primary">Rp. ' + totalLama + '</small>'}
                             <div class="input-group input-group-sm mt-1">
                                 <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan..">
                             </div>
@@ -207,9 +223,16 @@
                     $('#tbody-order-menus').append(`
                         <tr id="row-${params.id}" data-id="${params.id}" data-row-id="${globalId}" 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-primary">Rp. ${params.harga_produk}</small>
+                                <div class="row" style="justify-content: space-between;align-items: center;margin:2px">
+                                    <div class="row" style="align-items: center;">
+                                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add-extra" onclick="setIdRowTable(${globalId}, '${params.nama_produk}', '${params.harga_produk}')">
+                                            <i class="fas fa-edit"></i>
+                                        </button>
+                                        <span id="menu-name${globalId}">${params.nama_produk}</span>
+                                    </div>
+                                    <small id="harga-menu-name${globalId}">${params.harga_produk}</small>
+                                </div>
+                                <small id="price${globalId}" 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-3" data-keterangan="${paketFreenyaini} ${paketFreenyaini2}" placeholder="Keterangan.." value="${paketFreenyaini} ${paketFreenyaini2}">
                                 </div>
@@ -241,9 +264,18 @@
                     $('#tbody-order-menus').append(`
                         <tr id="row-${params.id}" data-id="${params.id}" data-row-id="${globalId}" 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-primary">Rp. ${params.harga_produk}</small>
+                                <div class="row" style="justify-content: space-between;align-items: center;margin:2px">
+                                    <div class="row" style="align-items: center;">
+                                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add-extra" onclick="setIdRowTable(${globalId}, '${params.nama_produk}', '${params.harga_produk}')">
+                                            <i class="fas fa-edit"></i>
+                                        </button>
+                                        <span id="menu-name${globalId}">${params.nama_produk}</span>
+                                    </div>
+                                    <small id="harga-menu-name${globalId}">${params.harga_produk}</small>
+                                </div>
+                                <ul id="the-extra-menu-choised${globalId}">
+                                </ul>
+                                <small id="price${globalId}" class="text-primary">Rp. ${params.harga_produk}</small>
                                 <div class="input-group input-group-sm mt-1">
                                     <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan..">
                                 </div>
@@ -293,6 +325,11 @@
             }
 
             table.deleteRow(index);
+
+            // delete extra menu choised from array
+            arrayExtraMenuChoised = arrayExtraMenuChoised.filter(function(item) {
+                return item.parent != params;
+            });
             calculateTotal();
         }
 
@@ -304,7 +341,7 @@
             var bayar = document.getElementsByName('bayar')?.[0]?.value ?? 0;
 
             for (var i = 1, row; row = table.rows[i]; i++) {
-                var harga = row.getAttribute('data-harga');
+                var harga = row.getAttribute('data-total');
                 var qty = row.getAttribute('data-qty');
                 var diskonSatuan = row.getAttribute('data-diskon-satuan');
                 var total = total + ((harga * qty) - ((harga * qty) * (diskonSatuan / 100)));
@@ -587,6 +624,7 @@
                 // return console.log(jenis_pembayaran);
                 var table = document.getElementById("order-menus");
                 var orderMenus = [];
+                var additionalOrderMenus = [];
 
                 for (var i = 1, row; row = table.rows[i]; i++) {
                     var id = row.getAttribute('data-id');
@@ -661,6 +699,7 @@
                     _token: "{{ csrf_token() }}",
                     orderCode: "{{ $orderCode }}",
                     orderMenus: orderMenus,
+                    additionalOrderMenus: arrayExtraMenuChoised,
                     namaPemesan: namaPemesan,
                     nomorPemesan: nomorPemesan,
                     nomorMeja: nomorMeja,
@@ -693,6 +732,7 @@
                         //  set localStorage.OrderStorage to null
                         theInterval = false;
                         localStorage.removeItem('OrderStorage');
+                        localStorage.removeItem('AdditionalStorage');
                         setTimeout(function() {
                             window.location.reload(1);
                         }, 1000);
@@ -1136,9 +1176,18 @@
                     $('#tbody-order-menus').append(`
                     <tr id="row-${i.id}" data-id="${i.id}" data-row-id="${globalId}" data-nama="${i.nama}" data-harga="${i.harga}" data-qty="${i.qty}" data-diskon-satuan="${i.diskonSatuan}" data-total="${i.harga * i.qty}">
                         <td>
-                            ${i.nama}
-                            <br>
-                            ${(parseInt(i.diskonSatuan) > 0) ? '<small class="text-primary"><s>Rp. ' + (i.harga * i.qty) + '</s></small> | <small class="text-danger">Rp. ' + ((i.harga * i.qty) - ((i.harga * i.qty) * (i.diskonSatuan / 100))) + '</small>' : '<small class="text-primary">Rp. ' + (i.harga * i.qty) + '</small>'}
+                            <div class="row" style="justify-content: space-between;align-items: center;margin:2px">
+                                <div class="row" style="align-items: center;">
+                                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add-extra" onclick="setIdRowTable(${globalId}, '${i.nama}', '${i.harga * i.qty}')">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                    <span id="menu-name${globalId}">${i.nama}</span>
+                                </div>
+                                <small id="harga-menu-name${globalId}">${i.harga}</small>
+                            </div>
+                            <ul id="the-extra-menu-choised${globalId}">
+                            </ul>
+                            ${(parseInt(i.diskonSatuan) > 0) ? '<small id="price'+globalId+'" class="text-primary"><s>Rp. ' + (i.harga * i.qty) + '</s></small> | <small id="price'+globalId+'" class="text-danger">Rp. ' + ((i.harga * i.qty) - ((i.harga * i.qty) * (i.diskonSatuan / 100))) + '</small>' : '<small id="price'+globalId+'" class="text-primary">Rp. ' + (i.harga * i.qty) + '</small>'}
                             <div class="input-group input-group-sm mt-1">
                                 <input type="text" name="keterangan_satuan" class="form-control rounded-3" data-keterangan="${i.keterangan}" placeholder="Keterangan.." value="${i.keterangan}">
                             </div>
@@ -1171,6 +1220,12 @@
             calculateTotal();
         }
 
+        function saveAdditionalToLocalStorage() {
+            localStorage.setItem('AdditionalStorage', JSON.stringify({
+                arrayExtraMenuChoised
+            }));
+        }
+
         showOrderStorage();
         setInterval(doTheInterval, 1000);
 
@@ -1178,6 +1233,7 @@
             if (theInterval === true) {
                 // show time every second
                 OrderStorage();
+                saveAdditionalToLocalStorage();
             } else {
                 localStorage.removeItem('OrderStorage');
             }
diff --git a/resources/views/pages/Kasir/js_baru.blade.php b/resources/views/pages/Kasir/js_baru.blade.php
new file mode 100644
index 0000000..0b5e31a
--- /dev/null
+++ b/resources/views/pages/Kasir/js_baru.blade.php
@@ -0,0 +1,180 @@
+@push('scripts')
+    <script type="text/javascript">
+        $(document).ready(function() {
+
+        });
+        // create array to store all extra menu choised
+        var arrayExtraMenuChoised = [];
+
+        function setIdRowTable(globalId, namaMenu, totalHargaMenuIni) {
+            console.log(globalId);
+            console.log(namaMenu);
+            console.log(totalHargaMenuIni);
+            document.getElementById('id-table-row-extra').value = globalId;
+            // adda nama menu to h5 wich id is menu-utama-yang-terpilih
+            document.getElementById('menu-utama-yang-terpilih').innerHTML = namaMenu;
+            // add total harga menu to input with id total-harga-menu-ini
+            document.getElementById('harga-menu-utama-yang-terpilih').innerHTML = totalHargaMenuIni;
+
+
+            // remove all li element in extra-menu-choised
+            var extraMenuChoised = document.getElementById('extra-menu-choised');
+            extraMenuChoised.innerHTML = '';
+
+            for (let index = 0; index < arrayExtraMenuChoised.length; index++) {
+                const element = arrayExtraMenuChoised[index];
+                console.log(element.parent);
+                if (element.parent == globalId) {
+                    htmlnyayaini = `<li>
+                                <div class="row" style="justify-content: space-between;">
+                                    <input type="hidden" id="the-id-extra-menu-choised${globalId}" value="${element.id}">
+                                    <h5 id="the-menu-extra-menu-choised${globalId}">${element.nama_produk}</h5>
+                                    <h6 id="harga-extra-menu-choised${globalId}">${element.harga_produk}</h6>
+                                </div>
+                            </li>`;
+                    document.getElementById('extra-menu-choised').innerHTML += htmlnyayaini;
+
+                }
+            }
+        }
+
+        function pesanExtra(params) {
+            console.log(params);
+            jsonParams = JSON.stringify(params);
+            htmlnyayaini = `<li>
+                                <div class="row" style="justify-content: space-between;">
+                                    <input type="hidden" id="id-extra-menu-choised" value="${params.id}">
+                                    <h5 id="menu-extra-menu-choised">${params.nama_produk}</h5>
+                                    <h6 id="harga-extra-menu-choised">${params.harga_produk}</h6>
+                                </div>
+                            </li>`;
+            // get element by id
+            var extraMenuChoised = document.getElementById('extra-menu-choised');
+            // append htmlnyayaini to extraMenuChoised
+            extraMenuChoised.innerHTML += htmlnyayaini;
+        }
+
+        function simpanPesananExtra() {
+            var idTableRowExtra = document.getElementById('id-table-row-extra');
+            // get extra-menu-choised element
+            var extraMenuChoised = document.getElementById('extra-menu-choised');
+            // get all li element in extraMenuChoised
+            var li = extraMenuChoised.getElementsByTagName('li');
+
+            // loop through all li element
+            for (let i = 0; i < li.length; i++) {
+                // get id-extra-menu-choised element
+                var idExtraMenuChoised = li[i].getElementsByTagName('input')[0];
+                // get menu-extra-menu-choised element
+                var menuExtraMenuChoised = li[i].getElementsByTagName('h5')[0];
+                // get harga-extra-menu-choised element
+                var hargaExtraMenuChoised = li[i].getElementsByTagName('h6')[0];
+
+                htmlnyayaini = `<li style="margin:10px" id="linyaini${idExtraMenuChoised.value}${idTableRowExtra.value}">
+                                <div class="row" style="justify-content: space-between;">
+                                    <input type="hidden" id="the-id-extra-menu-choised${idTableRowExtra.value}" value="${idExtraMenuChoised.value}">
+                                    <small id="the-menu-extra-menu-choised${idTableRowExtra.value}">${menuExtraMenuChoised.innerText}</small>
+                                    <div class="row">
+                                        <small id="the-harga-extra-menu-choised${idTableRowExtra.value}" style="margin: 0px;align-self: center;padding: 0px;">${hargaExtraMenuChoised.innerText}</small>
+                                        <button type="button" class="btn btn-default btn-xs" style="margin-left:4px">
+                                            <i class="fas fa-trash" onclick="deleteAdditionalExtraMenu(${idExtraMenuChoised.value}, '${idTableRowExtra.value}', '${hargaExtraMenuChoised.innerText}')"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </li>`;
+                document.getElementById('the-extra-menu-choised' + idTableRowExtra.value).innerHTML += htmlnyayaini;
+
+                // push extra menu choised to extraMenuChoised array
+                arrayExtraMenuChoised.push({
+                    parent: idTableRowExtra.value,
+                    id: idExtraMenuChoised.value,
+                    nama_produk: menuExtraMenuChoised.innerText,
+                    harga_produk: hargaExtraMenuChoised.innerText
+                });
+            }
+            calculationMenuUtamaDenganExtraMenu();
+            // log extraMenuChoised
+            console.log(arrayExtraMenuChoised);
+        }
+
+        function calculationMenuUtamaDenganExtraMenu() {
+            for (let index = 0; index < arrayExtraMenuChoised.length; index++) {
+                const element = arrayExtraMenuChoised[index];
+
+                // Mendapatkan semua elemen <tr> dalam tabel dengan id 'tbody-order-menus'
+                var tableRowsNya = document.querySelectorAll('#tbody-order-menus tr');
+
+                // Iterasi melalui setiap elemen <tr> dan mencetak nilai atribut 'data-total'
+                tableRowsNya.forEach(function(row) {
+                    var rownya = row.getAttribute('data-row-id');
+                    var dataTotal = row.getAttribute('data-total');
+                    dataTotal = parseInt(dataTotal) + parseInt(element.harga_produk);
+                    if (rownya == element.parent) {
+                        row.setAttribute('data-total', dataTotal);
+                        document.getElementById('price' + element.parent).innerHTML = 'Rp. ' + dataTotal;
+                    }
+                });
+            }
+
+            calculateTotal();
+        }
+
+        function loadAdditionalFromLocalStorage() {
+            var data = localStorage.getItem('AdditionalStorage');
+            if (data === null || data === undefined) {
+                return false;
+            }
+            data = JSON.parse(data);
+            arrayExtraMenuChoised = data.arrayExtraMenuChoised;
+            // console.log(arrayExtraMenuChoised);
+            arrayExtraMenuChoised.forEach((i, key) => {
+                $('#the-extra-menu-choised' + i.parent).append(`
+                    <li style="margin:10px" id="linyaini${i.id}${i.parent}">
+                        <div class="row" style="justify-content: space-between;">
+                            <input type="hidden" id="the-id-extra-menu-choised${i.parent}" value="${i.id}">
+                            <small id="the-menu-extra-menu-choised${i.parent}">${i.nama_produk}</small>
+                            <div class="row">
+                                <small id="the-harga-extra-menu-choised${i.parent}" style="margin: 0px;align-self: center;padding: 0px;">${i.harga_produk}</small>
+                                <button type="button" class="btn btn-default btn-xs" style="margin-left:4px">
+                                    <i class="fas fa-trash" onclick="deleteAdditionalExtraMenu(${i.id}, '${i.parent}', '${i.harga_produk}')"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </li>
+                `);
+            });
+
+            // set total extra menu
+            calculationMenuUtamaDenganExtraMenu();
+        }
+        loadAdditionalFromLocalStorage();
+
+        function deleteAdditionalExtraMenu(id, parent, harga) {
+            console.log(id);
+            // get index of arrayExtraMenuChoised
+            var index = arrayExtraMenuChoised.findIndex(x => x.id == id);
+            // remove element from arrayExtraMenuChoised
+            arrayExtraMenuChoised.splice(index, 1);
+            // get element by id
+            var element = document.getElementById('linyaini' + id + parent);
+            // remove element from DOM
+            console.log(element);
+            element.remove();
+            // recalculate total
+            // Mendapatkan semua elemen <tr> dalam tabel dengan id 'tbody-order-menus'
+            var tableRowsNya = document.querySelectorAll('#tbody-order-menus tr');
+
+            // Iterasi melalui setiap elemen <tr> dan mencetak nilai atribut 'data-total'
+            tableRowsNya.forEach(function(row) {
+                var rownya = row.getAttribute('data-row-id');
+                var dataTotal = row.getAttribute('data-total');
+                dataTotal = parseInt(dataTotal) - parseInt(harga);
+                if (rownya == parent) {
+                    row.setAttribute('data-total', dataTotal);
+                    document.getElementById('price' + parent).innerHTML = 'Rp. ' + dataTotal;
+                }
+            });
+            calculateTotal();
+        }
+    </script>
+@endpush
diff --git a/resources/views/pages/Kasir/martabak_side.blade.php b/resources/views/pages/Kasir/martabak_side.blade.php
index bf88acc..dca1d90 100644
--- a/resources/views/pages/Kasir/martabak_side.blade.php
+++ b/resources/views/pages/Kasir/martabak_side.blade.php
@@ -40,20 +40,36 @@
                             @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
                                 @if ($kelompokKategoriPivot->produk->urutan == 11)
                                     <div class="col-xl-4 col-lg-6 col-md-12 col-sm-6">
-                                        <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );"
+                                        <div @if (strstr($kelompokKategoriPivot->produk->nama_produk, 'Istimewa')) onclick="aadMenu( {{ $kelompokKategoriPivot->produk }} )" @else onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )" @endif
                                             class="card card-warning card-outline btn">
                                             <div class="card-body" style="padding: 5px;">
                                                 <h5 class="m-0 text-ms">
                                                     {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
                                                 </h5>
                                                 <hr style="margin: 5px;">
-                                                <img style="width: 100%;height: 100%;object-fit: cover;"
-                                                    src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
-                                                    alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
+                                                @if (strstr($kelompokKategoriPivot->produk->nama_produk, 'Istimewa'))
+                                                    <img style="width: 85%;height: 85%;object-fit: cover;"
+                                                        src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
+                                                        alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
+                                                    <div class="col-md-12 mt-1"
+                                                        style="align-items: center;align-content: center;">
+                                                        <h5>
+                                                            {{ convert_to_rupiah($kelompokKategoriPivot->produk->harga_produk) }}
+                                                        </h5>
+                                                    </div>
+                                                @else
+                                                    <img style="width: 100%;height: 100%;object-fit: cover;"
+                                                        src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
+                                                        alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
+                                                @endif
                                             </div>
                                             <a class="btn btn-warning"
                                                 id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
-                                                Pilih Paket
+                                                @if (strstr($kelompokKategoriPivot->produk->nama_produk, 'Istimewa'))
+                                                    Pesan
+                                                @else
+                                                    Pilih Paket
+                                                @endif
                                             </a>
                                         </div>
                                     </div>
diff --git a/resources/views/pages/Kasir/modal_extra.blade.php b/resources/views/pages/Kasir/modal_extra.blade.php
new file mode 100644
index 0000000..07069b7
--- /dev/null
+++ b/resources/views/pages/Kasir/modal_extra.blade.php
@@ -0,0 +1,136 @@
+<div class="modal fade" id="modal-add-extra">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Pilih Extra Topping</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" id="show-modal-paket">
+                <div class="col-md-6 col-sm-6" id="ordered-extra-menus">
+                    <ul>
+                        <li>
+                            <div class="row" style="justify-content: space-between;">
+                                <input type="hidden" id="id-table-row-extra">
+                                <h5 id="menu-utama-yang-terpilih"></h5>
+                                <h6 id="harga-menu-utama-yang-terpilih"></h6>
+                            </div>
+                            <ul id="extra-menu-choised">
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+                <div class="row">
+                    <div class="col-12 col-sm-12">
+                        <div class="card card-primary card-tabs">
+                            <div class="card-header p-0 pt-1">
+                                <ul class="nav nav-tabs" id="custom-tabs-one-tab-martabak" role="tablist">
+                                    <li class="nav-item">
+                                        <a class="nav-link active" id="custom-tabs-one-home-martabak-tab-martabak"
+                                            data-toggle="pill" href="#custom-tabs-one-home-martabak" role="tab"
+                                            aria-controls="custom-tabs-one-home-martabak"
+                                            aria-selected="true">Martabak</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link" id="custom-tabs-one-profile-martabak-tab" data-toggle="pill"
+                                            href="#custom-tabs-one-profile-martabak" role="tab"
+                                            aria-controls="custom-tabs-one-profile-martabak"
+                                            aria-selected="false">Terang
+                                            Bulan</a>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="card-body" style="height:600px;overflow-y:scroll;">
+                                <div class="tab-content" id="custom-tabs-one-tab-martabakContent">
+                                    <div class="tab-pane fade show active" id="custom-tabs-one-home-martabak"
+                                        role="tabpanel" aria-labelledby="custom-tabs-one-home-martabak-tab-martabak">
+                                        <div class="row">
+                                            @foreach ($KelompokKategori as $key => $item)
+                                                @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
+                                                    @if ($kelompokKategoriPivot->produk->urutan == 13)
+                                                        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-4">
+                                                            <div class="card card-warning card-outline btn"
+                                                                onclick="pesanExtra( {{ $kelompokKategoriPivot->produk }} )">
+                                                                <div class="card-body" style="padding: 5px;">
+                                                                    <h5 class="m-0 text-ms">
+                                                                        {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
+                                                                    </h5>
+                                                                    <hr style="margin: 5px;">
+                                                                    <div class="col-md-12">
+                                                                        <img style="width: 100%;height: 100%;object-fit: cover;"
+                                                                            src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
+                                                                            alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
+                                                                        <div class="col-md-12 mt-1"
+                                                                            style="align-items: center;align-content: center;">
+                                                                            <h5>
+                                                                                {{ convert_to_rupiah($kelompokKategoriPivot->produk->harga_produk) }}
+                                                                            </h5>
+                                                                        </div>
+                                                                        <div class="col-md-12">
+                                                                            <a class="col-sm-6 col-md-8 col-lg-12 btn btn-warning"
+                                                                                id="ordered-menus">Pesan</a>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    @endif
+                                                @endforeach
+                                            @endforeach
+                                        </div>
+                                    </div>
+                                    <div class="tab-pane fade" id="custom-tabs-one-profile-martabak" role="tabpanel"
+                                        aria-labelledby="custom-tabs-one-profile-martabak-tab">
+                                        <div class="row">
+                                            @foreach ($KelompokKategori as $key => $item)
+                                                @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
+                                                    @if ($kelompokKategoriPivot->produk->urutan == 24)
+                                                        <div class="col-xl-4 col-lg-6 col-md-12 col-sm-6">
+                                                            <div onclick="pesanExtra( {{ $kelompokKategoriPivot->produk }} );"
+                                                                class="card card-warning card-outline btn">
+                                                                <div class="card-body" style="padding: 5px;">
+                                                                    <h5 class="m-0 text-ms">
+                                                                        {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
+                                                                    </h5>
+                                                                    <hr style="margin: 5px;">
+                                                                    <img style="width: 100%;height: 100%;object-fit: cover;"
+                                                                        src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
+                                                                        alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
+                                                                    <div class="col-md-12 mt-1"
+                                                                        style="align-items: center;align-content: center;">
+                                                                        <h5>
+                                                                            {{ convert_to_rupiah($kelompokKategoriPivot->produk->harga_produk) }}
+                                                                        </h5>
+                                                                    </div>
+                                                                </div>
+                                                                <a class="btn btn-warning" id="ordered-menus">
+                                                                    Pesan
+                                                                </a>
+                                                            </div>
+                                                        </div>
+                                                    @endif
+                                                @endforeach
+                                            @endforeach
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                    </div>
+                </div>
+
+                <!-- /.button -->
+                <div class="modal-footer justify-content-between">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
+                    <button type="button" class="btn btn-primary" data-dismiss="modal"
+                        onclick="simpanPesananExtra()">Pesan</button>
+                </div>
+            </div>
+            <!-- /.modal-content -->
+        </div>
+        <!-- /.modal-dialog -->
+    </div>
+</div>
diff --git a/resources/views/pages/Kasir/print_dapur.blade.php b/resources/views/pages/Kasir/print_dapur.blade.php
index e35f122..4c26898 100644
--- a/resources/views/pages/Kasir/print_dapur.blade.php
+++ b/resources/views/pages/Kasir/print_dapur.blade.php
@@ -131,6 +131,9 @@
         <table class="literely-table" style="width: 100%;">
             <tbody>
                 @foreach ($pesanan->detailPesanan as $item)
+                    @if ($item->id_parent !== null)
+                        @continue
+                    @endif
                     <tr>
                         <td style="width: 100px;" colspan="5">
                             {{ $item->nama_produk }}{{ $item->status_pesanan == 0 ? '(TAKEAWAY)' : ($item->status_pesanan == 3 ? '(CANCEL)' : '') }}
@@ -143,9 +146,21 @@
                         <td style="text-align: right;width: 30px">
                             {{ $item->diskon_persen != '' || $item->diskon_persen != 0 || $item->diskon_persen != null ? $item->diskon_persen . '%' : '' }}
                         </td>
-                        <td style="text-align: right;width: 70px">{{ convert_to_rupiah($item->total_harga_produk) }}
+                        <td style="text-align: right;width: 70px">{{ convert_to_rupiah($item->harga_produk) }}
                         </td>
                     </tr>
+                    @foreach ($pesanan->detailPesanan as $item2)
+                        @if ($item2->id_parent !== null && $item2->id_parent == $item->id)
+                            <tr>
+                                <td></td>
+                                <td style="text-align: right" colspan="2">
+                                    {{ $item2->nama_produk }}</td>
+                                <td style="text-align: right;width: 70px" colspan="2">
+                                    {{ convert_to_rupiah($item2->harga_produk) }}
+                                </td>
+                            </tr>
+                        @endif
+                    @endforeach
                 @endforeach
             </tbody>
         </table>
diff --git a/resources/views/pages/Kasir/transaksi.blade.php b/resources/views/pages/Kasir/transaksi.blade.php
index 0813463..7e44c9b 100644
--- a/resources/views/pages/Kasir/transaksi.blade.php
+++ b/resources/views/pages/Kasir/transaksi.blade.php
@@ -107,9 +107,13 @@
         </div>
         <!-- /.modal-dialog -->
     </div>
+
+
     @include('pages.Kasir.modal_print_dapur')
     @include('pages.Kasir.modal_bayar')
+    @include('pages.Kasir.modal_extra')
 @endsection
 
 @include('pages.Kasir.js')
+@include('pages.Kasir.js_baru')
 @include('pages.Kasir.style')