Building Interactive
Systems That Scale

const dashboardState = {
    mode: "monthly",
    data: {
        monthly: { reports: 2847, timeSaved: 1240 },
        quarterly: { reports: 8310, timeSaved: 3720 }
    }
};

function setDashboardMode(mode) {
    if (!dashboardState.data[mode]) return;
    dashboardState.mode = mode;
    renderDashboard();
}

function createModalController(root) {
    const dialog = root.querySelector("[role='dialog']");

    function openModal() {
        root.hidden = false;
        dialog.focus();
        document.body.style.overflow = "hidden";
    }

    // Escape key closes modal
    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape") closeModal();
    });
}

function debounce(fn, delay = 250) {
    let handle;
    return function (...args) {
        clearTimeout(handle);
        handle = setTimeout(() => 
            fn.apply(this, args), delay);
    };
}

searchInput.addEventListener("input",
    debounce(e => {
        fetch(`/api/accounts?q=${e.target.value}`);
    }, 300)
);

const flags = new Map([
    ["newCollectionsView", true],
    ["agentAssistPanel", false]
]);

export function isFeatureEnabled(name) {
    return flags.get(name) === true;
}

// Usage in component
if (isFeatureEnabled("newCollectionsView")) {
    renderNewView();
}

form.addEventListener("submit", event => {
    const score = Number(form.elements["score"].value);
    
    if (Number.isNaN(score) || score < 0 || score > 100) {
        event.preventDefault();
        showError("Score must be 0-100");
        return;
    }
    
    submitQAScore(score);
});

// One handler for unlimited rows
table.addEventListener("click", (e) => {
    const row = e.target.closest("tr");
    if (!row) return;
    
    const id = row.dataset.accountId;
    if (e.target.matches(".edit-btn")) {
        openEditor(id);
    }
});