diff --git a/app/Http/Controllers/Admins/Penjualan/PenjualanController.php b/app/Http/Controllers/Admins/Penjualan/PenjualanController.php
index c4710ce..d74efe6 100644
--- a/app/Http/Controllers/Admins/Penjualan/PenjualanController.php
+++ b/app/Http/Controllers/Admins/Penjualan/PenjualanController.php
@@ -57,9 +57,9 @@ class PenjualanController extends Controller
             })
             ->addColumn('ubah', function ($data) {
                 return '<div class="btn-group">
-                <a href="javascript:void(0)" onclick="cancelOrder(\'' . $data->id . '\')"><span class="btn btn-xs btn-danger mr-1">cancel</span></a>
-                    <a href="javascript:void(0)" onclick="detail(\'' . $data->id . '\')"><span class="btn btn-xs btn-warning mr-1"><i class="fas fa-eye"></i></span></a>
-                    <a href="javascript:void(0)" onclick="print(\'' . $data->id . '\')"><span class="btn btn-xs btn-success"><i class="fas fa-print"></i></span></a></div>';
+                    <button href="javascript:void(0)" class="btn btn-xs btn-danger mr-1 cancelOrderBtn" data-id="' . $data->id . '" data-kode_pesanan="' . $data->kode_pesanan . '" data-nama_pemesan="' . $data->nama_pemesan . '">cancel</button>
+                    <a class="btn btn-xs btn-warning mr-1" href="javascript:void(0)" onclick="detail(\'' . $data->id . '\')"><i class="fas fa-eye"></i></a>
+                    <a class="btn btn-xs btn-success" href="javascript:void(0)" onclick="print(\'' . $data->id . '\')"><i class="fas fa-print"></i></a></div>';
             })
             ->rawColumns(['nomor', 'nama_user', 'created_at', 'grand_total', 'ubah'])
             ->make(true);
@@ -75,8 +75,8 @@ class PenjualanController extends Controller
     public function getDataDetailPenjualan(Request $request)
     {
         $data = DetailPesanan::with('pesanan')->where('pesanan_id', $request->id_pesanan)->get();
-
-        return response()->json(['status' => true, 'data' => $data]);
+        $pesanan = Pesanan::find($request->id_pesanan);
+        return response()->json(['status' => true, 'data' => $data, 'pesanan' => $pesanan]);
     }
 
     public function laporan(Request $request)
diff --git a/resources/views/pages/admin/dashboard/chartjs.blade.php b/resources/views/pages/admin/dashboard/chartjs.blade.php
index d283be4..66bd2bc 100644
--- a/resources/views/pages/admin/dashboard/chartjs.blade.php
+++ b/resources/views/pages/admin/dashboard/chartjs.blade.php
@@ -39,7 +39,7 @@
             var menuPaketLegend = $('#menuPaketLegend');
             $.each(data.labels, function(index, value) {
                 menuPaketLegend.append('<li><i class="far fa-circle" style="color:' +
-                    color[index] + '"></i>' + value + ' : ' + data.data[
+                    color[index] + '"></i> ' + value + ' : ' + data.data[
                         index] + '</li>');
             });
             var pieData = {
@@ -80,7 +80,7 @@
             var menuIritLegend = $('#menuIritLegend');
             $.each(data.labels, function(index, value) {
                 menuIritLegend.append('<li><i class="far fa-circle" style="color:' +
-                    color[index] + '"></i>' + value + ' : ' + data.data[
+                    color[index] + '"></i> ' + value + ' : ' + data.data[
                         index] + '</li>');
             });
             var pieData = {
@@ -148,7 +148,7 @@
             var menuNasiLegend = $('#menuNasiLegend');
             $.each(data.labels, function(index, value) {
                 menuNasiLegend.append('<li><i class="far fa-circle" style="color:' +
-                    color[index] + '"></i>' + value + ' : ' + data.data[
+                    color[index] + '"></i> ' + value + ' : ' + data.data[
                         index] + '</li>');
             });
             var pieData = {
@@ -189,7 +189,7 @@
             var menuSambalLegend = $('#menuSambalLegend');
             $.each(data.labels, function(index, value) {
                 menuSambalLegend.append('<li><i class="far fa-circle" style="color:' +
-                    color[index] + '"></i>' + value + ' : ' + data.data[
+                    color[index] + '"></i> ' + value + ' : ' + data.data[
                         index] + '</li>');
             });
             var pieData = {
@@ -232,7 +232,7 @@
             var menuLaukLegend = $('#menuLaukLegend');
             $.each(data.labels, function(index, value) {
                 menuLaukLegend.append('<li><i class="far fa-circle" style="color:' +
-                    color[index] + '"></i>' + value + ' : ' + data.data[
+                    color[index] + '"></i> ' + value + ' : ' + data.data[
                         index] + '</li>');
             });
             var pieData = {
diff --git a/resources/views/pages/admin/penjualan/js.blade.php b/resources/views/pages/admin/penjualan/js.blade.php
index cc427a5..4a0177b 100644
--- a/resources/views/pages/admin/penjualan/js.blade.php
+++ b/resources/views/pages/admin/penjualan/js.blade.php
@@ -155,15 +155,36 @@
                             let tr = $('<tr></tr>')
                             tr.append('<td class="text-center">' + nomor + '</td>')
                             tr.append('<td>' + x.nama_produk + '</td>')
-                            tr.append('<td>' + formatRupiah(x.harga_produk) + '</td>')
-                            tr.append('<td class="text-center">' + x.jumlah_produk + '</td>')
-                            tr.append('<td>' + formatRupiah(x.total_harga_produk) + '</td>')
-                            tr.append('<td class="text-center">' + x.diskon_persen + '%</td>')
                             tr.append('<td class="text-center">' + (x.keterangan_produk ?? '-') +
                                 '</td>')
+                            tr.append('<td>' + formatRupiah(x.harga_produk) + '</td>')
+                            tr.append('<td class="text-center">' + x.jumlah_produk + '</td>')
+                            tr.append('<td class="text-center">' + x.diskon_persen + '%</td>')
+                            tr.append('<td>' + formatRupiah(x.total_harga_produk) + '</td>')
                             $('#view_penjualan_detail').append(tr)
                             nomor++
                         })
+
+                        // add footer
+                        let tfoot = $('<tr></tr>')
+                        tfoot.append('<td colspan="6" class="text-right font-weight-bold">Total</td>')
+                        tfoot.append('<td>' + formatRupiah(result.pesanan.grand_total) + '</td>')
+                        tfoot.append('<td colspan="2"></td>')
+                        $('#view_penjualan_detail_tfoot').empty().append(tfoot)
+
+                        // set attribute to label
+                        $('#kode_pesanan').text('Kode Pesanan: ' + result.pesanan.kode_pesanan)
+                        $('#nama_pemesan').text('Nama Pemesan: ' + result.pesanan.nama_pemesan)
+                        $('#nomor_meja').text('Nomor Meja: ' + result.pesanan.nomor_meja)
+                        $('#tanggal_pesan').text('Tanggal Pesan: ' + result.pesanan.tanggal_pesanan)
+
+                        // attach attribute to button
+                        $('#cancelPesanan').attr('data-id', result.pesanan.id)
+                        $('#cancelPesanan').attr('data-kode', result.pesanan.kode_pesanan)
+                        $('#cancelPesanan').attr('data-nama', result.pesanan.nama_pemesan)
+                        // attach a function to button
+                        $('#cancelPesanan').attr('onclick', 'cancelPesanan(' + result.pesanan.id + ', "' +
+                            result.pesanan.kode_pesanan + '", "' + result.pesanan.nama_pemesan + '")')
                     }
                 }
             })
@@ -192,10 +213,19 @@
             return rupiah;
         }
 
-        cancelOrder = (id) => {
+        $(document).on('click', '.cancelOrderBtn', function() {
+            // get arttibute data-kode_pesanan from button
+            let id = $(this).attr('data-id');
+            let kode_pesanan = $(this).attr('data-kode_pesanan');
+            let nama_pemesanan = $(this).attr('data-nama_pemesan');
+
+            var text = "Membatalkan pesanan dengan data <br> Kode Pesanan: " + kode_pesanan +
+                " <br> Nama Pemesan: " +
+                nama_pemesanan +
+                " ?";
             Swal.fire({
                 title: 'Apakah anda yakin?',
-                text: "Data yang sudah dihapus tidak dapat dikembalikan!",
+                html: text,
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#3085d6',
@@ -231,6 +261,52 @@
                     })
                 }
             })
+        })
+
+        function cancelPesanan(id, kode, nama) {
+            var text = "Membatalkan pesanan dengan data Kode Pesanan: " + kode +
+                " Nama Pemesan: " +
+                nama +
+                " ?";
+            Swal.fire({
+                title: 'Apakah anda yakin?',
+                text: text,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Ya, Hapus!',
+                cancelButtonText: 'Batal'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.ajax({
+                        type: "DELETE",
+                        url: "{{ route('penjualan.cancel') }}",
+                        data: {
+                            _token: "{{ csrf_token() }}",
+                            id: id
+                        },
+                        success: function(result) {
+                            console.log(result);
+                            if (result.status) {
+                                Swal.fire(
+                                    'Berhasil!',
+                                    result.message,
+                                    'success'
+                                )
+                                $('#modal_detail_penjualan').modal('hide');
+                                $('#tabelku').DataTable().ajax.reload();
+                            } else {
+                                Swal.fire(
+                                    'Gagal!',
+                                    result.message,
+                                    'error'
+                                )
+                            }
+                        }
+                    })
+                }
+            })
         }
 
         // // cetak_laporan
diff --git a/resources/views/pages/admin/penjualan/modal.blade.php b/resources/views/pages/admin/penjualan/modal.blade.php
index 10aed85..c24f4eb 100644
--- a/resources/views/pages/admin/penjualan/modal.blade.php
+++ b/resources/views/pages/admin/penjualan/modal.blade.php
@@ -8,23 +8,35 @@
                 </button>
             </div>
             <div class="modal-body">
+                <div class="col-md-12">
+                    <label for="kode_pesanan" id="kode_pesanan"></label><br>
+                    <label for="nama_pemesan" id="nama_pemesan"></label><br>
+                    <label for="nomor_meja" id="nomor_meja"></label><br>
+                    <label for="tanggal_pesan" id="tanggal_pesan"></label>
+                </div>
                 <div class="table-responsive mt-3">
                     <table id="tabelku" class="table table-hover display" style="width: 100%; font-size: 14px;">
                         <thead>
                             <tr>
                                 <th class="text-center">No</th>
                                 <th>Nama Produk</th>
+                                <th>Keterangan</th>
                                 <th>Harga</th>
                                 <th class="text-center">Jumlah Terjual</th>
-                                <th>Total Harga</th>
                                 <th class="text-center">Diskon(%)</th>
-                                <th>Keterangan</th>
+                                <th>Total Harga</th>
                             </tr>
                         </thead>
                         <tbody id="view_penjualan_detail"></tbody>
+                        <tfoot id="view_penjualan_detail_tfoot"></tfoot>
                     </table>
                 </div>
             </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button href="javascript:void(0)" class="btn btn-danger mr-1" id="cancelPesanan">cancel
+                    pesanan</button>
+            </div>
         </div>
     </div>
 </div>