Dokumentasi Laporan Bulanan

Komponen	Ukuran	Keterangan
Halaman	297mm x 210mm	A4 Landscape
Header	55px	Logo + Judul + Periode
Footer	55px	Branding + Page Number + Tagline
Konten	210mm - 110px	Area konten utama
Margin	30px horizontal	Padding kiri-kanan

Elemen Branding

Warna Utama: Navy (#1e3a5f) dan Gold (#d4a84b)
Font: Plus Jakarta Sans (Google Fonts)
Logo: Kemenpar RI + Wonderful Indonesia
Tagline: "Pesona Indonesia"
Footer: Garis emas 3px + Logo + Website

📑 Struktur Halaman (10 Halaman)

1 Cover Page - Logo, Judul, Periode, Background Borobudur
2 Daftar Isi - Navigasi halaman + Tentang Laporan
3 Ringkasan Eksekutif - 8 KPI Cards + Summary Text
4 Statistik Konten - Tabel Performa + Bar Chart Kategori
5 Distribusi Provinsi - Top 10 Bar Chart + Tabel + Insight
6 Distribusi Kategori - Pie Chart + Tabel Detail
7 Top 10 Artikel - Tabel Populer + Insight + Rekomendasi
8 Analisis Pengunjung - Data Google Analytics 4
9 Insight & Rekomendasi - Temuan + Strategi + Target
10 Penutup - Closing Statement + Logo + Copyright

🗄️ Sumber Data

Laporan ini menggunakan data dari dua sumber utama yang di-query secara real-time:

1. Database Internal (PostgreSQL)

Data	Tabel	Query
Total Artikel	`Article`	COUNT WHERE is_active = true
Total Gambar	`ArticleContentImage`	COUNT all
Total Views	`Article`	SUM(total_view)
Total Downloads	`ArticleContentImage`	SUM(total_download)
By Provinsi	`Article + Province`	GROUP BY province, ORDER BY views
By Kategori	`Article + Category`	GROUP BY category
Top 10 Artikel	`Article`	ORDER BY total_view DESC LIMIT 10
Artikel Baru	`Article`	WHERE created_at BETWEEN month_start AND month_end

2. Google Analytics 4

Metrik	GA4 Metric	Keterangan
Total Users	`totalUsers`	Pengunjung unik
New Users	`newUsers`	Pengunjung baru
Sessions	`sessions`	Jumlah sesi
Pageviews	`screenPageViews`	Halaman dilihat
Bounce Rate	`bounceRate`	Rasio bounce
Engagement Rate	`engagementRate`	Rasio interaksi
Traffic Source	`sessionDefaultChannelGroup`	Sumber traffic
Device	`deviceCategory`	Jenis perangkat
Country	`country`	Negara pengunjung
City	`city`	Kota pengunjung

GA4 Property ID: 518151714

Credentials: /var/www/galeriwonesia/backend/ga_credentials.json

📊 Komponen Visual

Charts (Chart.js)

Chart	Type	Halaman	Data
Distribusi Kategori	Bar Chart	4	Jumlah artikel per kategori
Komposisi Kategori	Doughnut	6	Persentase per kategori
Device Distribution	Doughnut	8	Desktop vs Mobile vs Tablet

KPI Cards

Halaman 3: Total Artikel, Total Gambar, Total Views, Total Download, Pengunjung Unik, Pageviews, Provinsi, Kategori
Halaman 8: Total Pengunjung, Total Sesi, Halaman Dilihat, Engagement Rate (dengan warna berbeda)

Province Bars

Horizontal bar chart kustom untuk Top 10 Provinsi dengan gradient navy-blue.

Info Boxes

Insight Box: Background kuning, border gold - untuk temuan/analisis
Reco Box: Background hijau, border green - untuk rekomendasi
GA Box: Background biru, border blue - untuk info Google Analytics
Purple Box: Background ungu - untuk metrik performa
Pink Box: Background pink - untuk target

⚙️ Cara Generate Laporan Baru

Langkah-langkah:

Copy template: Salin file januari.html menjadi [bulan].html
Update periode: Ganti semua "Januari 2026" menjadi bulan yang sesuai
Query data baru: Jalankan query database untuk periode bulan tersebut
Fetch GA data: Panggil get_monthly_ga_stats(year, month)
Update nilai: Ganti semua angka dengan data terbaru
Review & test: Buka halaman dan test download PDF

File Lokasi:

Template HTML: /var/www/lap-sklmb/frontend/build/
Assets (logo): /var/www/lap-sklmb/frontend/build/assets/
Backend Query: /var/www/galeriwonesia/backend/report_generator.py
GA Helper: /var/www/galeriwonesia/backend/ga_helper.py

Catatan Print PDF:

Klik tombol "Download PDF" atau tekan Ctrl+P
Pilih Destination: Save as PDF
Layout otomatis Landscape, Paper size A4
Centang "Background graphics" untuk warna tetap tampil
Set Margins: None untuk hasil optimal

🖼️ Assets yang Digunakan

File	Lokasi	Penggunaan
logo_kemenpar.png	`assets/`	Logo bulat Kemenpar RI
logo_wonderful.png	`assets/`	Logo Wonderful Indonesia
borobudur.jpg	`assets/`	Background cover page

CDN External:

Chart.js: https://cdn.jsdelivr.net/npm/chart.js
Google Fonts: Plus Jakarta Sans

📞 Kontak

Untuk pertanyaan atau bantuan terkait laporan:

Website: woni.sklmb.co
Laporan Portal: lap.sklmb.co

Generate Laporan PDF

📊 Laporan Tersedia

📐 Spesifikasi Laporan

Dimensi & Layout