Fanrouver
333 lines
6.2 KiB
Markdown
333 lines
6.2 KiB
Markdown
# 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.
|