function dashboardComponent(DashboardId, item) {
    $.ajax({
        url: '/PRMgmt/GetDashBoardById',
        type: 'GET',
        data: { DashboardId },
        success: function (response) {
            $('#DashboardContainer').html(response);
            /*
          WOSupResponseCount
          PRNoCount
          ForApprover1
          ForApprover2
          
          ForPO
          ForPayment
          ForDelivery*/
            const forPOApproval = document.getElementById('for-po-approval');
            if (forPOApproval) {
                forPOApproval.innerHTML = item.forPOApproval;
            }
            const canvassCountElement = document.getElementById('for-canvass-count');
            if (canvassCountElement) {
                canvassCountElement.innerHTML = item.forCanvassItem;
            }

            const suppBidElement = document.getElementById('supp-bid-count');
            if (suppBidElement) {
                suppBidElement.innerHTML = item.supplierBid;
            }
            const deniedItem = document.getElementById('denied-item');
            if (deniedItem) {
                deniedItem.innerHTML = item.deniedItem;
            }
            const suppBidApproval = document.getElementById('bid-approval-count');
            if (suppBidApproval) {
                suppBidApproval.innerHTML = item.suppBidApproval;
            }

            const woSupResponseElement = document.getElementById('supp-no-response-count');
            if (woSupResponseElement) {
                woSupResponseElement.innerHTML = item.woSupResponseCount;
            }

            const approvedPOElement = document.getElementById('approved-po-count');
            if (approvedPOElement) {
                approvedPOElement.innerHTML = item.approvedPO;
            }
            const prCountElement = document.getElementById('pr-count');
            if (prCountElement) {
                prCountElement.innerHTML = item.prNoCount;
            }

            const readyForPoElement = document.getElementById('ready-for-po-count');
            if (readyForPoElement) {
                readyForPoElement.innerHTML = item.forPO;
            }

            const notYetDeliveredElement = document.getElementById('item-not-yet-delivered');
            if (notYetDeliveredElement) {
                notYetDeliveredElement.innerHTML = item.forDelivery;
            }

            const partialReceivedElement = document.getElementById('partial-received-count');
            if (partialReceivedElement) {
                partialReceivedElement.innerHTML = item.partialReceived;
            }

        },
        error: function (xhr, status, error) {
            console.error("Error loading component:", error);
        }
    });
}

$(document).ready(function () {
    loader = $('#overlay, #loader');

    $.ajax($.extend({
        url: '/PRMgmt/GetDashboard',
        type: 'GET',
        success: function (data) {
            if (data && data.data && data.data.length > 0) {
                var item = data.data[0];
                //updateURL('/');
                dashboardComponent(item.dashboardId, item);
            } else {
                console.log('Data is null or undefined');
            }
        },
        error: errorHandler
    }, beforeComplete(loader)));
});