[Task]: Improvement UI/UX Desktop & Mobile Menu Pengguna & Koin Admin Portal (apps/web) #34

Goal & Scope

• Problem:
  • Menu "Pengguna & Koin Suara" di portal Admin saat ini menggunakan tabel data 7 kolom lebar yang hanya dibungkus overflow-x-auto. Pada tampilan mobile (layar ponsel), tabel ini memaksa scroll horizontal yang sulit dinavigasi dan rentan salah sentuh pada aksi moderasi/transaksi.
  • Pada desktop, UX masih memerlukan peningkatan: belum ada filter status akun (Aktif, Flagged Krisis, Ditangguhkan), belum ada pagination untuk data pengguna dalam jumlah besar, kartu ringkasan KPI transaksi koin di bagian atas dapat ditata lebih adaptif, serta aksi verifikasi/refund transaksi koin memerlukan dialog konfirmasi agar terhindar dari ketidaksengajaan klik.
• Scope:
  • Tampilan Mobile:
    • Mengimplementasikan Mobile Card View alternatif untuk daftar Pengguna dan daftar Transaksi Koin saat viewport berada di bawah breakpoint desktop (< 768px). Setiap kartu menampilkan identitas user/invoice, saldo/nominal koin, badge status, dan tombol aksi yang touch-friendly (min. 44px).
    • Menyesuaikan tombol toggle sub-tab (Pengguna Aplikasi vs Riwayat Transaksi Koin) agar responsif/full-width di mobile.
  • Tampilan Desktop:
    • Menambahkan filter cepat (filter status akun: Semua / Aktif / Krisis / Ditangguhkan) dan pagination pada tabel direktori pengguna.
    • Menambahkan modal/dialog konfirmasi sebelum admin melakukan verifikasi pembayaran atau refund koin di tab transaksi koin.
    • Merapikan grid kartu KPI metrik koin agar proporsional di berbagai resolusi layar.
• Out of Scope:
  • Perubahan skema basis data PostgreSQL backend atau logic payment gateway riil.

Acceptance Criteria

• Pengguna mobile dapat melihat direktori user dan riwayat transaksi dalam bentuk kartu yang rapi tanpa horizontal scrollbar yang mengganggu kontainer utama.
• Tersedia filter status akun (Aktif / Pantauan Krisis / Ditangguhkan) pada tab pengguna di desktop & mobile.
• Setiap tindakan moderasi akun atau konfirmasi/refund transaksi koin memiliki konfirmasi visual yang aman dari salah klik (accidental action).
• Kartu KPI pendapatan koin dan koin beredar tertata responsif (grid 2 kolom di tablet/mobile dan 4–5 kolom di desktop).
• Sub-tab navigasi dapat dialihkan secara mulus di seluruh ukuran layar.
• Lulus pengujian build (pnpm build atau npm run build di apps/web) tanpa error TypeScript dan linter.

Technical Notes & Architecture

• Komponen target: apps/web/src/components/portal/admin/AdminUsersCoinsModule.tsx dan AdminCoinsTransactionsTab.tsx.
• Styling: Tailwind CSS responsif breakpoints (sm:, md:, lg:).
• Desain mengikuti token warna Eva UI (koin: aksen primary & #EEF0FF, status krisis: amber/red, border #E2E8F0).

Definition of Done

• UI terverifikasi pada viewport desktop (1280px+), tablet (768px), dan mobile (360px–412px).
• Branch mematuhi konvensi {type}/{issue}-{slug} (contoh: feat/{issue}-users-coins-uiux-improvement).
• Pull request menyertakan bukti tangkapan layar tampilan desktop dan mobile.