Implement Phase 8: Dashboard & Reports (v0.8.0)

- Add comprehensive admin dashboard with stat cards and widgets
- Add Chart.js for occupancy/revenue trend charts
- Add Reports page with Occupancy, Revenue, Guest tabs
- Add CSV and PDF export functionality (using mPDF)
- Add date range filters for reports

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/js/admin.js

@@ -1024,6 +1024,181 @@
 		updateServicesTotal();
 	}
 
+	/**
+	 * Initialize dashboard charts.
+	 */
+	function initDashboardCharts() {
+		// Only run on dashboard page.
+		if (!wpBnbAdmin.isDashboard || typeof Chart === 'undefined') {
+			return;
+		}
+
+		var chartData = wpBnbAdmin.chartData;
+		if (!chartData) {
+			return;
+		}
+
+		// Chart.js default configuration.
+		Chart.defaults.font.family = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
+		Chart.defaults.font.size = 12;
+		Chart.defaults.color = '#50575e';
+
+		// Initialize Occupancy Chart.
+		var occupancyCtx = document.getElementById('wp-bnb-occupancy-chart');
+		if (occupancyCtx && chartData.occupancy) {
+			new Chart(occupancyCtx, {
+				type: 'line',
+				data: {
+					labels: chartData.occupancy.labels,
+					datasets: [{
+						label: wpBnbAdmin.i18n.occupancy,
+						data: chartData.occupancy.data,
+						borderColor: '#2271b1',
+						backgroundColor: 'rgba(34, 113, 177, 0.1)',
+						fill: true,
+						tension: 0.3,
+						pointRadius: 3,
+						pointHoverRadius: 5,
+						pointBackgroundColor: '#2271b1',
+						pointBorderColor: '#fff',
+						pointBorderWidth: 2
+					}]
+				},
+				options: {
+					responsive: true,
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							display: false
+						},
+						tooltip: {
+							backgroundColor: '#1d2327',
+							titleColor: '#fff',
+							bodyColor: '#fff',
+							padding: 12,
+							displayColors: false,
+							callbacks: {
+								label: function(context) {
+									return context.parsed.y.toFixed(1) + '%';
+								}
+							}
+						}
+					},
+					scales: {
+						y: {
+							beginAtZero: true,
+							max: 100,
+							ticks: {
+								callback: function(value) {
+									return value + '%';
+								}
+							},
+							grid: {
+								color: 'rgba(0, 0, 0, 0.05)'
+							}
+						},
+						x: {
+							grid: {
+								display: false
+							}
+						}
+					},
+					interaction: {
+						intersect: false,
+						mode: 'index'
+					}
+				}
+			});
+		}
+
+		// Initialize Revenue Chart.
+		var revenueCtx = document.getElementById('wp-bnb-revenue-chart');
+		if (revenueCtx && chartData.revenue) {
+			new Chart(revenueCtx, {
+				type: 'bar',
+				data: {
+					labels: chartData.revenue.labels,
+					datasets: [{
+						label: wpBnbAdmin.i18n.revenue,
+						data: chartData.revenue.data,
+						backgroundColor: 'rgba(0, 163, 42, 0.8)',
+						borderColor: '#00a32a',
+						borderWidth: 1,
+						borderRadius: 4,
+						barPercentage: 0.6
+					}]
+				},
+				options: {
+					responsive: true,
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							display: false
+						},
+						tooltip: {
+							backgroundColor: '#1d2327',
+							titleColor: '#fff',
+							bodyColor: '#fff',
+							padding: 12,
+							displayColors: false,
+							callbacks: {
+								label: function(context) {
+									return new Intl.NumberFormat('de-CH', {
+										style: 'currency',
+										currency: 'CHF'
+									}).format(context.parsed.y);
+								}
+							}
+						}
+					},
+					scales: {
+						y: {
+							beginAtZero: true,
+							ticks: {
+								callback: function(value) {
+									return new Intl.NumberFormat('de-CH', {
+										style: 'currency',
+										currency: 'CHF',
+										maximumFractionDigits: 0
+									}).format(value);
+								}
+							},
+							grid: {
+								color: 'rgba(0, 0, 0, 0.05)'
+							}
+						},
+						x: {
+							grid: {
+								display: false
+							}
+						}
+					}
+				}
+			});
+		}
+	}
+
+	/**
+	 * Initialize reports page functionality.
+	 */
+	function initReportsPage() {
+		var $periodSelect = $('.wp-bnb-period-select');
+		var $customDates = $('.wp-bnb-custom-dates');
+
+		if (!$periodSelect.length) {
+			return;
+		}
+
+		// Toggle custom date fields based on period selection.
+		$periodSelect.on('change', function() {
+			if ($(this).val() === 'custom') {
+				$customDates.show();
+			} else {
+				$customDates.hide();
+			}
+		});
+	}
+
 	// Initialize on document ready.
 	$(document).ready(function() {
 		initLicenseManagement();
@@ -1037,6 +1212,8 @@
 		initGuestSearch();
 		initServicePricing();
 		initBookingServices();
+		initDashboardCharts();
+		initReportsPage();
 	});
 
 })(jQuery);