Files
Retribusi/DASHBOARD_DEBUG.md

2.7 KiB

Debug Dashboard Data Kosong

Perbaikan yang Sudah Dilakukan

  1. Default Date: Diubah ke 2025-12-16 (tanggal yang ada data)
  2. Logging: Ditambahkan console.log di berbagai titik
  3. Response Handling: Handle wrapped response dengan benar
  4. Fallback Logic: Ditambahkan fallback di backend jika daily_summary kosong

🔍 Cara Debug

1. Buka Browser Console (F12)

Cek apakah ada log:

[Dashboard] Summary response raw: {...}
[Dashboard] By Category response raw: {...}
[Dashboard] Final counts: {...}

2. Cek Network Tab

  • Buka DevTools > Network
  • Filter: XHR atau Fetch
  • Cari request ke /retribusi/v1/dashboard/summary
  • Klik request > Response tab
  • Lihat apakah response berisi data

Expected Response:

{
  "success": true,
  "data": {
    "total_count": 47,
    "total_amount": 112000,
    "active_gates": 1,
    "active_locations": 1
  }
}

3. Test Manual di Console

Buka browser console dan jalankan:

// Test API call langsung
const response = await apiGetSummary({ date: '2025-12-16' });
console.log('Response:', response);

// Test render manual
renderSummary({
  totalAmount: 112000,
  personCount: 33,
  motorCount: 12,
  carCount: 2
});

4. Cek Element HTML

// Di browser console
const amountEl = document.getElementById('card-total-amount');
console.log('Amount element:', amountEl);
console.log('Current value:', amountEl?.textContent);

🐛 Jika Masih Kosong

Kemungkinan 1: API Error

Cek: Network tab > Status code

  • 401: Token expired, login ulang
  • 404: Route tidak ditemukan, cek base URL
  • 500: Server error, cek API logs

Kemungkinan 2: Response Format Salah

Cek: Response body di Network tab

  • Jika format {success: true, data: {...}}, sudah benar
  • Jika format berbeda, perlu fix di api.js

Kemungkinan 3: Element Tidak Ditemukan

Cek: Console untuk error "Cannot read property..."

  • Pastikan HTML element dengan ID yang benar ada
  • Cek apakah script di-load setelah DOM ready

Kemungkinan 4: Date Tidak Sesuai

Cek: State date di console

console.log('State date:', state.date);
// Harus: '2025-12-16' atau tanggal yang ada data

🚀 Quick Test

Jalankan di browser console setelah halaman load:

// Force load dengan date yang ada data
state.date = '2025-12-16';
const dateInput = document.getElementById('filter-date');
if (dateInput) dateInput.value = '2025-12-16';
loadSummaryAndCharts();

📝 Expected Values untuk 2025-12-16

  • Total Pendapatan: Rp 112,000
  • Jumlah Orang: 33
  • Jumlah Motor: 12
  • Jumlah Mobil: 2

Jika nilai ini tidak muncul, ada masalah dengan:

  1. API call (cek Network tab)
  2. Response parsing (cek console log)
  3. Data rendering (cek element HTML)