# Dashboard Dummy Data Documentation Dokumentasi lengkap data dummy yang digunakan di `pages/Dashboard.vue` ## 📊 Statistics Cards (Header Mini Stats) Data statistik mini yang ditampilkan di header: ```javascript { pasienHariIni: 324, antreanAktif: 47 } ``` ## 📈 Main Statistics Cards Data untuk 4 kartu statistik utama: ### 1. Pasien Hari Ini ```javascript { label: 'Pasien Hari Ini', value: '324', icon: 'mdi-account-heart', iconColor: 'white', color: 'primary', change: '+18.2%', changeType: 'positive', changeIcon: 'mdi-trending-up' } ``` ### 2. Antrean Aktif ```javascript { label: 'Antrean Aktif', value: '47', icon: 'mdi-clock-fast', iconColor: 'white', color: 'secondary', change: '+5', changeType: 'positive', changeIcon: 'mdi-arrow-up' } ``` ### 3. Rata-rata Tunggu ```javascript { label: 'Rata-rata Tunggu', value: '12 min', icon: 'mdi-timer-outline', iconColor: 'white', color: 'success', change: '-3 min', changeType: 'positive', changeIcon: 'mdi-trending-down' } ``` ### 4. Tingkat Kehadiran ```javascript { label: 'Tingkat Kehadiran', value: '89.5%', icon: 'mdi-check-circle', iconColor: 'white', color: 'primary', change: '+2.3%', changeType: 'positive', changeIcon: 'mdi-trending-up' } ``` --- ## 📊 Chart 1: Tren Kunjungan Pasien (Line/Area Chart) Chart yang menampilkan tren kunjungan pasien bulanan untuk tahun 2025. ### Labels (Bulan) ```javascript [ "Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Ags", "Sep", "Okt", "Nov", "Des", ]; ``` ### Dataset 1: Pasien Umum ```javascript { label: 'Pasien Umum', data: [850, 920, 880, 1050, 1120, 1080, 1200, 1150, 1080, 1190, 1250, 1300], backgroundColor: 'rgba(86, 126, 231, 0.2)', borderColor: '#567EE7' // primary-500 } ``` **Total Pasien Umum 2025**: 13,070 pasien ### Dataset 2: Pasien BPJS ```javascript { label: 'Pasien BPJS', data: [1200, 1350, 1280, 1480, 1550, 1620, 1700, 1650, 1590, 1720, 1800, 1850], backgroundColor: 'rgba(255, 132, 65, 0.2)', borderColor: '#FF8441' // secondary-500 } ``` **Total Pasien BPJS 2025**: 18,790 pasien **Grand Total**: 31,860 pasien sepanjang tahun 2025 --- ## 💰 Chart 2: Status Pembayaran (Doughnut Chart) Distribusi metode pembayaran pasien. ### Data ```javascript { labels: ['BPJS Kesehatan', 'Umum/Tunai', 'Asuransi Swasta', 'Corporate'], datasets: [{ data: [1850, 680, 320, 280] }] } ``` ### Breakdown Persentase | Metode Pembayaran | Jumlah | Persentase | | ----------------- | --------- | ---------- | | BPJS Kesehatan | 1,850 | 58.6% | | Umum/Tunai | 680 | 21.5% | | Asuransi Swasta | 320 | 10.1% | | Corporate | 280 | 8.9% | | **Total** | **3,130** | **100%** | --- ## ⏱️ Chart 3: Waktu Tunggu per Poli (Horizontal Bar Chart) Rata-rata waktu tunggu untuk setiap poliklinik (dalam menit). ### Data ```javascript { labels: ['Poli Umum', 'Poli Anak', 'Poli Gigi', 'Poli Mata', 'Poli THT', 'Poli Jantung'], datasets: [{ label: 'Waktu Tunggu (menit)', data: [15, 12, 8, 18, 10, 22] }] } ``` ### Ranking Waktu Tunggu | Rank | Poliklinik | Waktu Tunggu | | ---- | ------------ | ------------ | | 1 | Poli Gigi | 8 menit ⚡ | | 2 | Poli THT | 10 menit | | 3 | Poli Anak | 12 menit | | 4 | Poli Umum | 15 menit | | 5 | Poli Mata | 18 menit | | 6 | Poli Jantung | 22 menit 🐌 | **Rata-rata Total**: 14.17 menit --- ## ✅ Chart 4: Tingkat Kehadiran (Polar Area Chart) Status kehadiran pasien dalam seminggu. ### Data ```javascript { labels: ['Hadir Tepat Waktu', 'Hadir Terlambat', 'Tidak Hadir', 'Batal', 'Reschedule'], datasets: [{ data: [1850, 420, 280, 150, 230] }] } ``` ### Breakdown Persentase | Status | Jumlah | Persentase | | -------------------- | --------- | ---------- | | Hadir Tepat Waktu ✅ | 1,850 | 62.6% | | Hadir Terlambat ⏰ | 420 | 14.2% | | Tidak Hadir ❌ | 280 | 9.5% | | Batal 🚫 | 150 | 5.1% | | Reschedule 📅 | 230 | 7.8% | | **Total** | **2,960** | **100%** | **Tingkat Kehadiran Total** (Hadir Tepat Waktu + Hadir Terlambat): 76.8% --- ## 🎨 Color Palette Palet warna yang digunakan dalam dashboard: ### Primary Colors ```javascript { 700: '#3556AE', 600: '#3A61C9', 500: '#567EE7', 400: '#7898EC', 300: '#9AB2F1', 200: '#BBCBF5' } ``` ### Secondary Colors ```javascript { 700: '#E65A0D', 600: '#F16F29', 500: '#FF8441', 400: '#FF9D67', 300: '#FFB58D' } ``` ### Success Colors ```javascript { 700: '#008D65', 600: '#33A484', 500: '#59B59B', 400: '#80C6B2' } ``` ### Neutral Colors ```javascript { 100: '#FFFFFF', 300: '#F5F7FA', 500: '#CDD4DC', 700: '#717171', 900: '#212121' } ``` --- ## 📤 Export Options Menu export data yang tersedia: ```javascript [ { title: "JSON (.json)", type: "json", icon: "mdi-code-json" }, { title: "CSV (.csv)", type: "csv", icon: "mdi-file-delimited" }, { title: "Excel (.xlsx) - Server Only", type: "excel", icon: "mdi-file-excel", }, { title: "PDF (.pdf) - Placeholder", type: "pdf", icon: "mdi-file-pdf" }, ]; ``` --- ## 📝 Summary Insights ### Total Visitors - **Hari Ini**: 324 pasien (+18.2%) - **Bulan Ini** (estimasi): ~2,617 pasien - **Tahun 2025** (dari chart): 31,860 pasien ### Performance Metrics - **Antrean Aktif**: 47 (+5) - **Rata-rata Waktu Tunggu**: 12 menit (-3 min improvement) - **Tingkat Kehadiran**: 89.5% (+2.3%) - **Kehadiran Tepat Waktu**: 62.6% ### Top Performing Clinic - **Tercepat**: Poli Gigi (8 menit) - **Terlambat**: Poli Jantung (22 menit) ### Payment Distribution - **BPJS dominan**: 58.6% dari total transaksi - **Non-BPJS**: 41.4% (Umum + Asuransi + Corporate) --- ## 🔧 Usage Notes File ini mendokumentasikan semua data dummy yang digunakan dalam komponen Dashboard.vue. Data ini dapat digunakan sebagai: 1. **Reference** untuk struktur data API 2. **Testing data** untuk pengembangan 3. **Template** untuk implementasi data real dari backend 4. **Documentation** untuk tim pengembang Semua data bersifat **dummy/sample** dan harus diganti dengan data real dari API/backend saat production.