project_dashboard/project_dashboard version 2/app.js

const API_URL = "https://script.google.com/macros/s/AKfycbxg9k8zw-ES0m4CvEL2nNB3FAqWNbznxPBUoMAbZFnb2tdI2r0rRFAhwQ8bL4WH5Gcesw/exec";
const SLIDE_TIME = 12000; // 12 Seconds per slide
const DATA_REFRESH = 300000; // 5 Minutes

let slideIdx = 0;

/**
 * Primary Data Fetching
 */
async function updateDashboard() {
    try {
        const response = await fetch(API_URL);
        if (!response.ok) throw new Error("Connection Error");
        
        const data = await response.json();
        
        // Safety Check: If Google Script threw an error
        if (data.error) {
            showError("Google Script: " + data.error);
            return;
        }

        renderProjects(data.projects);
        renderStats(data.projects);
        renderAnnouncements(data.announcements);
        renderCalendar(data.calendar);
        
        hideError();
    } catch (err) {
        showError("Dashboard Error: " + err.message);
    }
}

/**
 * Renderers with Defensive Checks (The "Fix")
 */
function renderProjects(projectData) {
    const list = document.getElementById('p1-list');
    // FIX: Check if data.projects AND data.projects.active exist
    if (projectData && projectData.active) {
        list.innerHTML = projectData.active.slice(0, 6).map(p => `
            <div class="card ${p.isOverdue ? 'overdue' : ''}">
                <div>
                    <div style="font-size: 0.9rem; color: #94a3b8;">${p.type}</div>
                    <div style="font-size: 2.2rem; font-weight: bold; margin: 10px 0;">${p.name}</div>
                </div>
                <div class="progress-container">
                    <div class="progress-label"><span>Status</span><span>${p.progress}%</span></div>
                    <div class="bar-bg"><div class="bar-fill" style="width:${p.progress}%"></div></div>
                </div>
                <div style="display:flex; justify-content:space-between; font-size:1.3rem;">
                    <span>👤 ${p.owner}</span>
                    <span style="color:${p.isOverdue ? 'var(--danger)' : '#94a3b8'}">📅 Due: ${p.due}</span>
                </div>
            </div>
        `).join('');
    } else {
        list.innerHTML = "<div class='card'><h2>No Active Projects</h2></div>";
    }
}

function renderStats(projectData) {
    const list = document.getElementById('p2-list');
    if (projectData) {
        list.innerHTML = `
            <div class="card">
                <h2>Completed</h2>
                <div style="font-size: 6rem; color: var(--success); text-align:center;">${projectData.completedCount || 0}</div>
            </div>
            <div class="card">
                <h2>Still In Progress</h2>
                <div style="font-size: 6rem; color: var(--accent); text-align:center;">${projectData.active ? projectData.active.length : 0}</div>
            </div>
        `;
    }
}

function renderAnnouncements(ann) {
    const list = document.getElementById('p3-list');
    if (ann && ann.length > 0) {
        list.innerHTML = ann.map(a => `
            <div class="card ann-card">
                <div style="color: var(--accent); font-weight: bold;">${a.date}</div>
                <h2 style="margin: 15px 0;">${a.title}</h2>
                <p style="font-size: 1.5rem; color: #cbd5e1;">${a.content}</p>
            </div>
        `).join('');
    } else {
        list.innerHTML = "<div class='card'><h2>No Current Announcements</h2></div>";
    }
}

function renderCalendar(cal) {
    const list = document.getElementById('p4-list');
    if (cal && cal.length > 0) {
        list.innerHTML = cal.map(c => `
            <div class="card cal-card ${c.isBirthday ? 'bday' : ''}">
                <div style="font-weight: bold;">${c.isBirthday ? '🎂 BIRTHDAY' : '📅 EVENT'}</div>
                <h2 style="margin: 15px 0;">${c.title}</h2>
                <div style="font-size: 1.5rem;">${c.start}</div>
            </div>
        `).join('');
    } else {
        list.innerHTML = "<div class='card'><h2>No Events Scheduled</h2></div>";
    }
}

/**
 * Slide Rotation Logic
 */
function rotateSlides() {
    slideIdx = (slideIdx + 1) % 4;
    document.getElementById('slider').style.transform = `translateX(-${slideIdx * 100}vw)`;
}

/**
 * Error Handling UI
 */
function showError(msg) {
    const err = document.getElementById('error-display');
    err.innerText = msg;
    err.classList.remove('hidden');
}

function hideError() {
    document.getElementById('error-display').classList.add('hidden');
}

// Initialize
updateDashboard();
setInterval(updateDashboard, DATA_REFRESH);
setInterval(rotateSlides, SLIDE_TIME);