function viewIndexCard(data) {
    loader = $('#overlay, #loader');
    $('#overlay, #loader').css('z-index', 1070);
    const ItemNo = data.itemNo;

    poIndexComponent().done(function () {
        setTimeout(function () {
            const modalElement = $('#viewIndexCard');
            if (modalElement.length === 0) {
                console.error('Modal element #viewIndexCard not found in DOM');
                return;
            }
            document.getElementById('i-itemNo').innerHTML = data.itemNo;
            document.getElementById('i-itemName').innerHTML= data.itemName;

            tableElement = $('#IndexCardTable');
            modalElement.modal('show');
            modalElement.css('z-index', 1080);

            tableDestroy(tableElement);
            var indexCardTable = tableElement.DataTable({
                ajax: $.extend({
                    url: "/POMgmt/GetIndexCard",
                    type: 'POST',
                    data: { ItemNo },
                }, beforeComplete(loader)),
                language: {
                    emptyTable: "No record available"
                },
                initComplete: initCompleteCallback(),
                columns: colIndexCard,
                responsive: true,
                error: errorHandler
            });
        }, 100);
    });
}