accounting_dev/application/views/items/item_historys.php

<style>
body {
    background: #f5f7fb;
}

/* ===========================
   CARD
=========================== */
.main-card,
.scanner-card,
.table-card {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    /*box-shadow: 0 8px 25px rgba(0, 0, 0, .08);*/
}

/* ===========================
   HEADER
=========================== */
.header-gradient {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 22px 28px;
}

.info-box {
    background: rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 12px 16px;
}

.progress {
    height: 8px;
    border-radius: 20px;
}

/* ===========================
   SCANNER
=========================== */
.barcode-avatar {
    width: 110px;
    height: 110px;
    margin: auto;
    border-radius: 50%;
    background: #fff7e6;
    color: #f59e0b;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
}

.barcode-code {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
}

.form-control-lg {
    height: 60px;
    font-size: 22px;
    border-radius: 12px;
}

.form-control:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .2);
}

.scan-note {
    color: #6c757d;
    font-size: 13px;
}

.camera-btn {
    height: 55px;
    border-radius: 12px;
    font-size: 17px;
}

/* ===========================
   TABLE
=========================== */
.table thead th {
    background: #d97706;
    color: #fff;
    border: none;
    vertical-align: middle;
}

.table tbody td {
    vertical-align: middle;
}

.table tbody tr:hover {
    background: #fffaf0;
}

/* ===========================
   BADGE
=========================== */
.badge-success-soft {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: #d1fae5;
    color: #065f46;
    font-weight: 600;
}

.badge-danger-soft {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 600;
}

.badge-warning-soft {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}
#reader{
    width:100%;
    min-height:280px;
    border-radius:12px;
    overflow:hidden;
}
</style>

<div class="container mt-4">
    <div class="card main-card">
        <!-- HEADER -->
        <div class="header-gradient">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h3 class="mb-1">
                        <i class="fa fa-barcode"></i>
                        Riwayat Perpindahan Barang
                    </h3>
                    <div class="small">
                        Silahkan scan / input QR id Barang
                    </div>
                </div>
                <div class="col-md-4 text-right">
                </div>
            </div>
        </div>
        <!-- BODY -->
        <div class="card-body">
            <div class="row">
                <!-- LEFT -->
                <div class="col-lg-4 mb-4">
                    <div class="card scanner-card">
                        <div class="card-body">
                            <div class="barcode-avatar">
                                <i class="bi bi-qr-code-scan"></i>
                            </div>
                            <div class="text-center mt-3">
                                <div class="scan-note mt-2">
                                    Scan QR ID
                                </div>
                            </div>
                            <hr>

                            <center>
                                <div id="scannerArea">

                                    <input
                                        type="text"
                                        id="serial_number"
                                        class="form-control form-control-lg text-center"
                                        placeholder="Scan / Input QR ID"
                                        autocomplete="off"
                                        autofocus>

                                    <small class="scan-note">
                                        Scanner akan otomatis memanggil riwayat.
                                    </small>

                                    <button
                                        type="button"
                                        class="btn btn-warning btn-block camera-btn mt-4"
                                        id="btnCamera">

                                        <i class="fa fa-camera mr-2"></i>
                                        Scan dengan Kamera

                                    </button>

                                </div>

                                <div id="cameraArea" style="display:none;">

                                    <div id="reader"></div>

                                    <small class="scan-note d-block mt-2">
                                        Arahkan QR Code ke kamera.
                                    </small>

                                    <button
                                        type="button"
                                        class="btn btn-secondary btn-block mt-3"
                                        id="btnCloseCamera">

                                        Tutup Kamera

                                    </button>

                                </div>
                            </center>
                            <input type="hidden" id="barcode_id">
                        </div>
                    </div>
                </div>
                <!-- RIGHT -->
                <div class="col-lg-8">
                    <div class="card table-card">
                        <div class="card-header bg-white">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">
                                    Riwayat Perpindahan Barang
                                </h5>
                            </div>
                        </div>
                        <div class="card-body border-bottom" id="itemInfo">
                        Belum ada data
                        </div>
                        <div class="table-responsive">

                            <table class="table table-hover mb-0" id="tableBarcode">
                                <thead>
                                    <tr>
                                        <th width="60">No</th>
                                        <th>Date</th>
                                        <th>Type</th>
                                        <th>From</th>
                                        <th>To</th>
                                        <th>NOtes</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

$("#serial_number").keypress(function(e){
    if(e.which==13){
        searchHistory();
    }
});
function searchHistory(){
    let barcode=$("#serial_number").val().trim();
    if(barcode=="") return;
    $.ajax({
        url: `<?= base_url("items/scan_history"); ?>`,
        type:"POST",
        dataType:"json",
        data:{
            barcode:barcode
        },
        beforeSend:function(){
            $("#serial_number").prop("disabled",true);
        },
        success:function(r){
            $("#serial_number")
                .prop("disabled",false)
                .val("")
                .focus();
            if(!r.status){
                Swal.fire({
                    icon:"error",
                    text:r.message
                });
                return;
            }
            renderItem(r.item);
            renderHistory(r.history);
        }
    });
}

function renderItem(item){
    let html='';

    html+='<div class="row">';

    html+='    <div class="col-md-6">';

    html+='        <h4 class="mb-3"><b>'+item.nama_barang+'</b></h4>';

    html+='        <div class="row mb-2">';
    html+='            <div class="col-4 font-weight-bold">Kode</div>';
    html+='            <div class="col-1">:</div>';
    html+='            <div class="col-7">'+item.kode_detail+'</div>';
    html+='        </div>';

    html+='        <div class="row mb-2">';
    html+='            <div class="col-4 font-weight-bold">Barcode</div>';
    html+='            <div class="col-1">:</div>';
    html+='            <div class="col-7">'+item.barcode+'</div>';
    html+='        </div>';

    html+='    </div>';

    html+='    <div class="col-md-6">';

    html+='        <div class="row mb-2">';
    html+='            <div class="col-4 font-weight-bold">Serial Number</div>';
    html+='            <div class="col-1">:</div>';
    html+='            <div class="col-7">'+(item.serial_number ? item.serial_number : '-')+'</div>';
    html+='        </div>';

    html+='        <div class="row mb-2">';
    html+='            <div class="col-4 font-weight-bold">Status</div>';
    html+='            <div class="col-1">:</div>';
    html+='            <div class="col-7">'+item.status+'</div>';
    html+='        </div>';

    html+='        <div class="row mb-2">';
    html+='            <div class="col-4 font-weight-bold">Qty</div>';
    html+='            <div class="col-1">:</div>';
    html+='            <div class="col-7">'+item.qty_sisa+' / '+item.qty_awal+'</div>';
    html+='        </div>';

    html+='    </div>';

    html+='</div>';

    $("#itemInfo").html(html);
}

function renderHistory(list){
    let html='';
    $.each(list,function(i,v){
        html+="<tr>";
        html+="<td>"+(i+1)+"</td>";
        html+="<td>"+v.created_at+"</td>";
        html+="<td>"+v.movement_type+"</td>";
        html+="<td>"+(v.from_warehouse??v.from_type)+"</td>";
        html+="<td>"+(v.to_warehouse??v.to_type)+"</td>";
        html+="<td>"+v.notes+"</td>";
        html+="</tr>";
    });
    $("#tableBarcode tbody").html(html);
}


let html5QrCode=null;
$("#btnCamera").click(function(){
    $("#scannerArea").hide();
    $("#cameraArea").show();
    html5QrCode=new Html5Qrcode("reader");
    html5QrCode.start(
        {
            facingMode:"environment"
        },
        {
            fps:10,
            qrbox:220
        },
        function(decodedText){
            html5QrCode.stop().then(function(){
                $("#cameraArea").hide();
                $("#scannerArea").show();
                $("#serial_number")
                    .val(decodedText);
                saveSerial();
            });
        }
    );
});
$("#btnCloseCamera").click(function(){
    if(html5QrCode){
        html5QrCode.stop().then(function(){
            $("#cameraArea").hide();
            $("#scannerArea").show();
            $("#serial_number").focus();
        });
    }
});


</script>