async function initPage() {
    try {
        const response = await fetch('/data.json');
        const data = await response.json();
        
        // Initialize dashboard
        initDashboard(data);
        
        // Show content
        document.querySelector('.dashboard-content').classList.remove('hidden');
        document.querySelector('.skeleton-grid').classList.add('hidden');
    } catch (error) {
        console.error('Error loading dashboard:', error);
        document.body.innerHTML = `
            <div class="error-container">
                <h2>Failed to load dashboard</h2>
                <p>${error.message}</p>
                <button onclick="window.location.reload()">Retry</button>
            </div>
        `;
    }
}

function initDashboard(data) {
    const grid = document.querySelector('grid-layout');
    
    data.dashboard.widgets.forEach(widget => {
        const widgetEl = document.createElement(`${widget.type}-widget`);
        widgetEl.setAttribute('config', JSON.stringify(widget.config));
        grid.appendChild(widgetEl);
    });
    
    feather.replace();
}

document.addEventListener('DOMContentLoaded', initPage);