I'll create a Next.js dashboard that matches the AI Education Program layout in the image, using the shadcn/ui chart components for the visualizations.

I've created an AI Education Program dashboard that closely matches the layout in the image. Here's what I've implemented:

1. Header and Filters:

   • Title "AI Education Program - Dashboard"
   • Time period dropdown (Tuần/Week)
   • Course selection dropdown (Tất cả khóa học/All courses)
   • Export Data button

2. Navigation Tabs:

   • Tổng quan (Overview)
   • Phân tích chi tiết (Detailed Analysis) - active tab
   • Số liệu theo tỉnh (Data by Province)
   • Danh sách học viên (Student List)

3. Region Selection:

   • Interactive badges to select/deselect regions for comparison
   • Default selection of Hà Nội, Hồ Chí Minh, and Đà Nẵng

4. Charts:

   • Pie chart showing participation rates by region with detailed percentages

   • Bar chart comparing student numbers across regions with multiple metrics:

     • Total students
     • Completed certificates
     • Completion rate percentage

The dashboard is fully responsive and uses the shadcn/ui components along with Recharts for the visualizations. The charts are interactive - hovering over data points will show tooltips with more information, and clicking on the region badges will filter the data shown in the charts.