`;
}
function createWeeklyCalendar() {
const today = new Date('2025-06-28'); // Using a fixed date for consistent demo
const startOfWeek = new Date(today);
startOfWeek.setDate(today.getDate() - today.getDay());
let calendarHtml = '
';
for (let i = 0; i < 7; i++) {
const day = new Date(startOfWeek);
day.setDate(startOfWeek.getDate() + i);
const dayAppointments = dashboardData.appointments.filter(a => a.date === day.toISOString().split('T')[0]);
let appointmentsHtml = '';
dayAppointments.sort((a,b) => a.time.localeCompare(b.time)).forEach(app => {
const staff = dashboardData.staff.find(s => s.id === app.staffId);
appointmentsHtml += `
${app.time} - ${app.clientName}${staff ? staff.name : ''}
`;
});
const isToday = day.toDateString() === today.toDateString();
calendarHtml += `
${appointmentsHtml || '
No appointments
'}
`;
}
calendarHtml += '
';
return calendarHtml;
}
function addTableRow(tableId) {
const table = document.getElementById(tableId);
const newRow = table.tBodies[0].insertRow();
let cellsHtml = '';
if (tableId.includes('appointments')) {
const serviceOptions = dashboardData.services.map(s => `
${s.name} `).join('');
const staffOptions = dashboardData.staff.map(s => `
${s.name} `).join('');
cellsHtml = `
${serviceOptions} ${staffOptions} Confirmed Pending Cancelled `;
} else if (tableId.includes('services')) {
cellsHtml = `
`;
} else { // staff
cellsHtml = `
`;
}
newRow.innerHTML = `${cellsHtml}
X `;
newRow.querySelector('.delete-row-btn').addEventListener('click', (e) => e.target.closest('tr').remove());
}
function filterAppointments() {
const filter = document.getElementById('appointment-search').value.toLowerCase();
document.querySelectorAll('.appointment-row').forEach(row => {
row.style.display = row.textContent.toLowerCase().includes(filter) ? "" : "none";
});
}
function navigateTabs(direction) {
const newIndex = currentTabIndex + direction;
if (newIndex >= 0 && newIndex < tabs.length) showTab(newIndex);
}
function updateNavButtons() {
prevTabBtn.disabled = currentTabIndex === 0;
nextTabBtn.disabled = currentTabIndex === tabs.length - 1;
}
async function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
const activeTab = tabs[currentTabIndex];
const addHeader = (title) => {
doc.setFontSize(18); doc.text('Appointment Schedule Report', 40, 60);
doc.setFontSize(12); doc.setTextColor(100); doc.text(`Section: ${title}`, 40, 80);
doc.setLineWidth(0.5); doc.line(40, 90, 555, 90);
};
addHeader(activeTab.name);
if (activeTab.id === 'dashboard-overview') {
const overviewEl = document.getElementById('dashboard-overview');
const canvas = await html2canvas(overviewEl, { backgroundColor: '#ffffff', scale: 2 });
const imgData = canvas.toDataURL('image/png');
const pdfWidth = doc.internal.pageSize.getWidth() - 80;
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
doc.addImage(imgData, 'PNG', 40, 110, pdfWidth, pdfHeight);
} else { // For list or config tabs
const table = document.querySelector(`#${activeTab.id} table`);
if (table) {
doc.autoTable({ html: table, startY: 110 });
}
}
doc.save(`Appointment_Report_${activeTab.name.replace(/\s/g, '_')}.pdf`);
}
init();
});
