document.addEventListener('DOMContentLoaded', function () {
    const customerButtons = document.querySelectorAll('.customerButton');
    const staffButtons = document.querySelectorAll('.staffButton');
    const customerContainers = document.querySelectorAll('.recentltLoggedCustomersContainer');
    const staffContainers = document.querySelectorAll('.recentltLoggedStaffsContainer');

    customerButtons.forEach(button => {
        button.addEventListener('click', function () {
            customerContainers.forEach(container => container.classList.remove('hidden'));
            staffContainers.forEach(container => container.classList.add('hidden'));
        });
    });

    staffButtons.forEach(button => {
        button.addEventListener('click', function () {
            staffContainers.forEach(container => container.classList.remove('hidden'));
            customerContainers.forEach(container => container.classList.add('hidden'));
        });
    });
});