function renderItems() {
    if (!items.length) return `<div class="error">No items found</div>`;

    // Apply Icode filter
    const filteredItems = filterIcode ? items.filter(item => {
        const board = item.boardObj || {};
        return board.Icode && parseInt(board.Icode) > 99;
    }) : items;

    // Calculate summary
    const totalItems = filteredItems.length;
    const totalProgress = filteredItems.reduce((sum, item) => {
        const board = item.boardObj || {};
        const cupPercent = board.cup_totalRequired && board.cup_answeredRequired ? 
            (board.cup_answeredRequired / board.cup_totalRequired * 100) : 0;
        const bucketPercent = board.bucket_totalRequired && board.bucket_answeredRequired ? 
            (board.bucket_answeredRequired / board.bucket_totalRequired * 100) : 0;
        return sum + ((cupPercent + bucketPercent) / 2);
    }, 0) / (totalItems || 1);
    const totalDone = filteredItems.filter(item => {
        const board = item.boardObj || {};
        const cupPercent = board.cup_totalRequired && board.cup_answeredRequired ? 
            (board.cup_answeredRequired / board.cup_totalRequired * 100) : 0;
        const bucketPercent = board.bucket_totalRequired && board.bucket_answeredRequired ? 
            (board.bucket_answeredRequired / board.bucket_totalRequired * 100) : 0;
        return ((cupPercent + bucketPercent) / 2) >= 100;
    }).length;
    const inProgress = filteredItems.filter(item => {
        const board = item.boardObj || {};
        const cupPercent = board.cup_totalRequired && board.cup_answeredRequired ? 
            (board.cup_answeredRequired / board.cup_totalRequired * 100) : 0;
        const bucketPercent = board.bucket_totalRequired && board.bucket_answeredRequired ? 
            (board.bucket_answeredRequired / board.bucket_totalRequired * 100) : 0;
        const total = (cupPercent + bucketPercent) / 2;
        return total > 0 && total < 100;
    }).length;
    const notStarted = totalItems - totalDone - inProgress;

    // Sort filtered items
    const sortedItems = [...filteredItems].sort((a, b) => {
        const boardA = a.boardObj || {};
        const boardB = b.boardObj || {};
        let valueA, valueB;

        switch (sortField) {
            case 'id':
                valueA = a.id || '';
                valueB = b.id || '';
                break;
            case 'name':
                valueA = a.name || '';
                valueB = b.name || '';
                break;
            case 'boardUser':
                valueA = a.boardUser || '';
                valueB = b.boardUser || '';
                break;
            case 'username':
                valueA = boardA.user_name || '';
                valueB = boardB.user_name || '';
                break;
            case 'progress':
                const cupPercentA = boardA.cup_totalRequired && boardA.cup_answeredRequired ? 
                    (boardA.cup_answeredRequired / boardA.cup_totalRequired * 100) : 0;
                const bucketPercentA = boardA.bucket_totalRequired && boardA.bucket_answeredRequired ? 
                    (boardA.bucket_answeredRequired / boardA.bucket_totalRequired * 100) : 0;
                const cupPercentB = boardB.cup_totalRequired && boardB.cup_answeredRequired ? 
                    (boardB.cup_answeredRequired / boardB.cup_totalRequired * 100) : 0;
                const bucketPercentB = boardB.bucket_totalRequired && boardB.bucket_answeredRequired ? 
                    (boardB.bucket_answeredRequired / boardB.bucket_totalRequired * 100) : 0;
                valueA = (cupPercentA + bucketPercentA) / 2;
                valueB = (cupPercentB + bucketPercentB) / 2;
                break;
        }

        if (sortField !== 'progress') {
            valueA = valueA.toString().toLowerCase();
            valueB = valueB.toString().toLowerCase();
            return sortOrder === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
        } else {
            return sortOrder === 'asc' ? valueA - valueB : valueB - valueA;
        }
    });

    return `
    <style>
        .item-entry {
            background: rgba(220,220,220,.5);
            backdrop-filter: blur(20px);
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
            border: 1px solid #ccc;
            outline: 1px solid rgba(255, 255, 255, 0.5);
        }
        .item-entry:hover {
            border: 1px solid #ef7;
            outline: 2px solid rgba(255, 255, 255, 0.9);
        }
        .error {
            color: red;
            text-align: center;
            margin: 20px;
        }
        .progress-bar {
            background: #f0f0f0;
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 4px;
        }
        .progress-fill {
            height: 100%;
            transition: width 0.3s;
        }
        .sort-controls {
            display: flex;
            gap: 10px;
            font-size: 14px;
            align-items: center;
            flex-wrap: wrap;
            margin-left:10px;
        }
        .sort-controls select, .sort-controls input {
            padding: 0px 16px;
            font-size: 14px;
        }
        .progress-row {
            display: flex;
            gap: 20px;
            margin-top: 8px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            border-radius: 6px;  
            padding: 4px 13px;
            margin-bottom:10px;
        }
        .progress-row > div {
            flex: 1;
        }
        .name-row {
            margin-top: 8px;
        }
        .summary {
            font-size: 14px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.5);
            color:black;         
            margin-bottom: 10px;
        }
        .sticky-bar {
            position: sticky;
            top: 0;
            z-index: 10;
            background: rgba(215, 215, 215, 0.9);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            border-radius: 6px;  
            margin-bottom: 10px;
            border: 1px solid #ef7;
            outline: 2px solid rgba(33, 155, 255, 0.9);
        }
        #itemsList {
            margin-top: 0 !important;
            padding-top: 0 !important;
            position: relative;
            top: -1px;
        }
        #sortField, #sortOrder, #searchBox {
            border: 0px solid #ccc;
            border-radius: 4px;
            padding: 2px 6px;
            max-width: 100%;
        }
        #searchBox {
            flex: 1;
            max-width: 54%;
            padding: 2px 6px;
            border: 0;
            border-radius: 4px;
        }
    </style>
    <div id="itemsList">
        <div class="sticky-bar">
            <div class="summary">
                <strong>Summary:</strong>
                Total Items (filtered): <span id="summaryTotal">${totalItems}</span> |
                Total Progress: <span id="summaryProgress">${totalProgress.toFixed(1)}%</span> |
                Done: <span id="summaryDone">${totalDone}</span> |
                In-Progress: <span id="summaryWorking">${inProgress}</span>
            </div>
            <div class="sort-controls">
                <label for="sortField"></label>
                <select id="sortField">
                    <option value="id" ${sortField === 'id' ? 'selected' : ''}>ID</option>
                    <option value="name" ${sortField === 'name' ? 'selected' : ''}>UserName</option>
                    <option value="boardUser" ${sortField === 'boardUser' ? 'selected' : ''}>Board User</option>
                    <option value="username" ${sortField === 'username' ? 'selected' : ''}>Name</option>
                    <option value="progress" ${sortField === 'progress' ? 'selected' : ''}>Progress</option>
                </select>
                <label for="sortOrder"></label>
                <select id="sortOrder">
                    <option value="asc" ${sortOrder === 'asc' ? 'selected' : ''}>Ascending</option>
                    <option value="desc" ${sortOrder === 'desc' ? 'selected' : ''}>Descending</option>
                </select>
                <label for="searchBox"></label>
                <input type="text" id="searchBox" placeholder="ID / name ...">
            </div>
        </div>
        ${sortedItems.map(item => {
            const board = item.boardObj || {};
            const cupPercent = board.cup_totalRequired && board.cup_answeredRequired
                ? (board.cup_answeredRequired / board.cup_totalRequired * 100).toFixed(1)
                : '0';
            const bucketPercent = board.bucket_totalRequired && board.bucket_answeredRequired
                ? (board.bucket_answeredRequired / board.bucket_totalRequired * 100).toFixed(1)
                : '0';
            const totalPercent = ((parseFloat(cupPercent) + parseFloat(bucketPercent)) / 2).toFixed(1);

            return `
                <div class="item-entry" data-item-id="${item.id}">
                    <div><strong>ID:</strong><small> ${item.id}</small></div>
                    <div class="name-row">
                        <div><strong></strong> ${item.name || 'N/A'} | <strong>${board.user_name || 'N/A'}</strong></div>
                    </div>
                    <div class="progress-row">
                        <div>
                            <div><small>Progress:</small> ${totalPercent}%</div>
                            <div class="progress-bar"><div class="progress-fill" style="width: ${totalPercent}%; background: ${getProgressColor(totalPercent)}"></div></div>
                        </div>
                        <div>
                            <div><small>Profile:</small> ${cupPercent}%</div>
                            <div class="progress-bar"><div class="progress-fill" style="width: ${cupPercent}%; background: ${getProgressColor(cupPercent)}"></div></div>
                        </div>
                        <div>
                            <div><small>Assessment:</small> ${bucketPercent}%</div>
                            <div class="progress-bar"><div class="progress-fill" style="width: ${bucketPercent}%; background: ${getProgressColor(bucketPercent)}"></div></div>
                        </div>
                    </div>
                    <div><small>First Time:</small> <strong>${board.firstTime || 'N/A'}</strong></div>
                </div>
            `;
        }).join('')}
    </div>
    `;
}