Dự án Dashboard theo dõi và phân tích hiệu suất tìm kiếm tự nhiên (SEO) và lưu lượng truy cập trực quan dành riêng cho Green Leaf Vietnam (GLV). Xây dựng trên nền tảng Astro kết hợp các Component thuần để tối ưu hiệu suất tải trang.
Mã nguồn được tổ chức theo cấu trúc module rõ ràng để đảm bảo tính bảo trì (maintainability) và dễ dàng scale up:
src/layouts/Layout.astro: Bộ khung HTML5 tiêu chuẩn và toàn bộ định dạng CSS dùng chung (Global Styles).src/components/: Thư mục chứa các thành phần giao diện độc lập:Header.astro: Thanh tiêu đề chính, thông tin domain và bộ chọn thời gian GA4.Alert.astro: Thẻ thông báo tự động (AI Narrative Insights) phân tích dữ liệu so với kỳ trước.Section01.astro: 6 Thẻ KPI tổng quan (Sessions, Clicks, conversions...).Section02.astro: Đồ thị dạng Area Chart và Line Chart mô tả xu hướng nguồn truy cập và traffic tự nhiên.Section03.astro: Bảng hiệu suất Landing Pages tích hợp mã màu tỷ lệ tương tác (Engagement Rate).Section04.astro: Bảng Quick Wins (Striking Distance và Page 2 Opportunity).Section05.astro: Các trang/từ khóa cần cải thiện (Things to work on).Section06.astro: Top từ khóa và trang đích mang lại traffic hàng đầu.Footer.astro: Chân trang.src/scripts/main.js: Mã nguồn logic xử lý nạp dữ liệu JSON, tính toán tỷ lệ % thay đổi (Delta), vẽ đồ thị SVG và tạo hiệu ứng Hover Tooltip bám chuột.src/dp.js: Logic tương tác cho bộ chọn ngày (Date Range Picker) chuẩn GA4.output: 'server').src/pages/api/fetch-seo-data.js.