Retribusi/DASHBOARD_DEBUG.md

# 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:**
```json
{
  "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:
```javascript
// 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
```javascript
// 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
```javascript
console.log('State date:', state.date);
// Harus: '2025-12-16' atau tanggal yang ada data
```

## 🚀 Quick Test

Jalankan di browser console setelah halaman load:
```javascript
// 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)