DOKOMENTASI - HOT POT - DASHBOARD#1

Card 1 pada Dashboard bertugas untuk menampilkan "Voucher Realtime". Berikut adalah penjelasan alur kodenya secara sistematis:

1. Struktur Visual (Baris 41-49)
Secara desain, Card ini adalah sebuah kotak (div) putih dengan bayangan halus yang berisi:

• Icon: Ikon tiket berwarna biru (fas fa-ticket-alt) untuk merepresentasikan voucher.
• Label: Teks kecil di atas bertuliskan "VOUCHER REALTIME".
• Nilai (Angka): Di bawahnya terdapat angka nominal uang yang ditampilkan dengan ukuran besar dan tebal (text-2xl font-black).

2. Sumber Data & Alpine.js (Baris 48)
Bagian yang paling penting adalah baris ini:

<p class="text-2xl font-black text-slate-800" x-text="formatRupiah(stats.voucherRealtime)"></p>

• x-text: Ini adalah direktif dari Alpine.js. Artinya, isi teks di dalam paragraf ini tidak diketik manual, melainkan mengambil nilai dari variabel JavaScript bernama stats.voucherRealtime.
• formatRupiah(): Angka mentah dari database (misal: 2000) akan diproses oleh fungsi ini agar tampil cantik dengan format mata uang (misal: Rp 2.000).
• stats.voucherRealtime: Data ini aslinya dikirim dari Controller melalui variabel $statsData (Baris 10), lalu "ditanam" ke dalam Alpine.js di baris 27.

3. Apa yang Dimaksud "Realtime"?
Nilai yang muncul di sini adalah Total Nominal Uang dari voucher yang sudah laku terjual.

• Data ini diambil dari tabel billing_history.
• Hanya menghitung voucher yang memiliki nilai pada kolom first_login_at.
• Disebut Realtime karena jika ada user yang baru saja login di MikroTik, angka di card ini akan otomatis terupdate tanpa Anda perlu merefresh halaman (berkat teknologi Websocket/Laravel Echo yang ada di baris 207-228).