detail mobile
This commit is contained in:
370
detail_mobile.md
Normal file
370
detail_mobile.md
Normal file
@@ -0,0 +1,370 @@
|
||||
Saya akan mendetailkan lebih lanjut desain UI dan fungsi aplikasi mobile untuk petugas sampling berdasarkan referensi PMK RI No.2 Tahun 2023 dan Permenaker No.5 Tahun 2018. Saya akan membuat rincian yang lebih spesifik untuk setiap layar dan komponen UI.
|
||||
|
||||
## Desain UI Detail Aplikasi Mobile Petugas Sampling Lingkungan RS
|
||||
|
||||
### 1. Halaman Login & Onboarding
|
||||
|
||||
**Login Screen:**
|
||||
- Logo aplikasi dan nama "SamplingPro" di bagian atas
|
||||
- Field input username/email
|
||||
- Field input password dengan toggle show/hide
|
||||
- Tombol "Masuk" dengan warna primer (misalnya biru #2196F3)
|
||||
- Opsi "Ingat Saya" dengan checkbox
|
||||
- Link "Lupa Password"
|
||||
- Informasi versi aplikasi di footer
|
||||
|
||||
**Onboarding (untuk pengguna baru):**
|
||||
- 3-4 slide carousel yang menjelaskan fitur utama:
|
||||
- Slide 1: "Manajemen Tugas Sampling yang Efisien"
|
||||
- Slide 2: "Pencatatan Parameter Lingkungan Sesuai Standar PMK RI No.2/2023"
|
||||
- Slide 3: "Dokumentasi Foto & GPS untuk Validasi Data"
|
||||
- Slide 4: "Analisis & Laporan Otomatis"
|
||||
- Tombol "Mulai" atau "Lewati" di setiap slide
|
||||
|
||||
### 2. Dashboard/Beranda
|
||||
|
||||
**Header:**
|
||||
- Nama pengguna dan foto profil di pojok kanan atas
|
||||
- Tanggal hari ini
|
||||
- Badge notifikasi
|
||||
|
||||
**Ringkasan Tugas:**
|
||||
- Card "Tugas Hari Ini" dengan angka dan indikator progres (3/10 selesai)
|
||||
- Visual timeline tugas dari pagi hingga sore
|
||||
- Widget cuaca untuk informasi lingkungan eksternal
|
||||
|
||||
**Quick Access:**
|
||||
- 4 tombol shortcut dengan ikon:
|
||||
- "Sampling Baru" (ikon +)
|
||||
- "Riwayat Sampling" (ikon jam/calendar)
|
||||
- "Laporan" (ikon dokumen)
|
||||
- "Peta Lokasi" (ikon pin lokasi)
|
||||
|
||||
**Feed Aktivitas Terbaru:**
|
||||
- List scrollable menunjukkan 5 aktivitas sampling terakhir
|
||||
- Setiap item menampilkan:
|
||||
- Nama ruangan
|
||||
- Timestamp
|
||||
- Status (sesuai/tidak sesuai standar)
|
||||
- Ikon parameter yang tidak sesuai (jika ada)
|
||||
|
||||
**Bottom Navigation:**
|
||||
- Beranda (aktif)
|
||||
- Tugas
|
||||
- Form Sampling
|
||||
- Laporan
|
||||
- Profil
|
||||
|
||||
### 3. Halaman Daftar Tugas Sampling (Detail)
|
||||
|
||||
**Filter & Sorting:**
|
||||
- Dropdown filter berdasarkan:
|
||||
- Tanggal (hari ini, besok, minggu ini)
|
||||
- Jenis fasilitas (RS, Puskesmas, Klinik)
|
||||
- Prioritas (mendesak, tinggi, normal)
|
||||
- Status (belum dikerjakan, sedang dikerjakan, selesai)
|
||||
- Toggle view (list/calendar)
|
||||
|
||||
**Calendar View:**
|
||||
- Tampilan kalender bulanan dengan indikator warna untuk hari dengan tugas
|
||||
- Dot indicators untuk jumlah tugas per hari
|
||||
- Ketika hari dipilih, menampilkan list tugas di bawah kalender
|
||||
|
||||
**List View (Default):**
|
||||
- Setiap card tugas menampilkan:
|
||||
- Nama fasilitas dan alamat
|
||||
- Daftar ruangan yang harus disampling (ex: "5 ruangan: Operasi, ICU, Bersalin, dll.")
|
||||
- Parameter yang harus diukur dengan ikon (pencahayaan, suhu, kelembaban, tekanan, kebisingan)
|
||||
- Jarak dari lokasi saat ini
|
||||
- Status tugas dengan warna berbeda
|
||||
- Prioritas dengan indikator visual (flag merah untuk urgent)
|
||||
- Waktu deadline
|
||||
|
||||
**Detail Tugas (ketika card ditekan):**
|
||||
- Header dengan nama fasilitas
|
||||
- Peta lokasi dengan pin
|
||||
- Kontak PIC fasilitas
|
||||
- Tab untuk ruangan-ruangan:
|
||||
- Setiap ruangan menampilkan parameter yang harus diukur beserta standar dari PMK RI No.2/2023
|
||||
- Checkbox untuk menandai parameter yang sudah diukur
|
||||
- Tombol "Mulai Sampling" di bagian bawah
|
||||
|
||||
### 4. Form Pencatatan Data Sampling (Detail)
|
||||
|
||||
**Header:**
|
||||
- Nama fasilitas dan ruangan
|
||||
- Indikator progres (Ruangan 2 dari 5)
|
||||
- Timestamp otomatis
|
||||
|
||||
**Wizard Interface (step by step):**
|
||||
1. **Langkah 1: Informasi Umum**
|
||||
- Field untuk informasi umum:
|
||||
- Nama petugas (auto-fill)
|
||||
- Tanggal & waktu (auto-fill, dapat diedit)
|
||||
- Nomor identifikasi sampling
|
||||
- Kondisi umum ruangan (dropdown & text area)
|
||||
|
||||
2. **Langkah 2: Pengukuran Parameter**
|
||||
- Semua parameter dengan UI yang intuitif:
|
||||
|
||||
- **Intensitas Cahaya (lux)**:
|
||||
- Slider dengan nilai 0-20,000 lux
|
||||
- Input numerik untuk nilai pasti
|
||||
- Indikator standar sesuai jenis ruangan (dari PMK RI No.2/2023)
|
||||
- Contoh: Ruang operasi (300-500 lux), Meja operasi (10,000-20,000 lux)
|
||||
- Status indikator (warna hijau jika sesuai standar, merah jika tidak)
|
||||
|
||||
- **Suhu (°C)**:
|
||||
- Tampilan termometer visual
|
||||
- Input nilai dengan stepper (+/-)
|
||||
- Range standar ditampilkan (misal: 22-27°C untuk ruang operasi)
|
||||
- Status indikator warna
|
||||
|
||||
- **Kelembaban (%)**:
|
||||
- Gauge meter visual 0-100%
|
||||
- Input nilai
|
||||
- Indikator standar 40-60% (sesuai PMK)
|
||||
- Status indikator warna
|
||||
|
||||
- **Tekanan Udara**:
|
||||
- Radio button untuk pilihan:
|
||||
- Positif
|
||||
- Negatif
|
||||
- Seimbang
|
||||
- Indikator standar sesuai jenis ruangan (ex: ICU harus positif)
|
||||
|
||||
- **Kebisingan (dBA)**:
|
||||
- Slider dengan range 0-130 dBA
|
||||
- Indikator standar (ex: maks 65 dBA untuk ruang operasi)
|
||||
- Visualisasi tingkat kebisingan dengan animasi gelombang suara
|
||||
- Status indikator warna
|
||||
|
||||
3. **Langkah 3: Dokumentasi Foto**
|
||||
- Interface kamera dalam aplikasi
|
||||
- Grid guide untuk komposisi foto
|
||||
- Opsi flash on/off
|
||||
- Setelah foto diambil:
|
||||
- Preview foto
|
||||
- Tools anotasi (tanda panah, lingkaran, teks)
|
||||
- Field caption foto
|
||||
- Opsi untuk mengambil ulang
|
||||
- Gallery thumbnail foto yang sudah diambil (maks 5 foto per sampling)
|
||||
|
||||
4. **Langkah 4: Lokasi GPS**
|
||||
- Peta lokasi dengan pin saat ini
|
||||
- Koordinat GPS (latitude/longitude)
|
||||
- Akurasi GPS dalam meter
|
||||
- Tombol "Verifikasi Lokasi"
|
||||
- Status verifikasi (terverifikasi/tidak)
|
||||
|
||||
5. **Langkah 5: Catatan & Rekomendasi**
|
||||
- Text area untuk catatan tambahan
|
||||
- Checklist temuan masalah:
|
||||
- Lampu rusak/mati
|
||||
- AC tidak berfungsi optimal
|
||||
- Kebocoran
|
||||
- Sumber kebisingan
|
||||
- Lainnya (dengan text field)
|
||||
- Dropdown rekomendasi tindakan:
|
||||
- Penggantian lampu
|
||||
- Perbaikan AC
|
||||
- Pemasangan peredam suara
|
||||
- Dll.
|
||||
- Field untuk deadline rekomendasi
|
||||
|
||||
**Navigation Bottom Bar:**
|
||||
- Tombol "Sebelumnya"
|
||||
- Indikator step (1/5, 2/5, dll.)
|
||||
- Tombol "Selanjutnya" atau "Selesai" (pada step terakhir)
|
||||
|
||||
**Konfirmasi Selesai:**
|
||||
- Modal dialog ringkasan sampling
|
||||
- Opsi untuk mengedit jika ada kesalahan
|
||||
- Tombol "Simpan & Lanjutkan ke Ruangan Berikutnya"
|
||||
- Tombol "Simpan & Kembali ke Daftar Tugas"
|
||||
|
||||
### 5. Halaman Dokumentasi Foto (Detail)
|
||||
|
||||
**Galeri Foto:**
|
||||
- Grid layout 2x2 atau 3x3
|
||||
- Filter berdasarkan:
|
||||
- Tanggal
|
||||
- Lokasi/fasilitas
|
||||
- Jenis ruangan
|
||||
- Parameter (foto terkait pencahayaan, suhu, dll.)
|
||||
|
||||
**Detail Foto (ketika thumbnail ditekan):**
|
||||
- Foto tampilan penuh
|
||||
- Metadata:
|
||||
- Nama ruangan & fasilitas
|
||||
- Tanggal & waktu pengambilan
|
||||
- Parameter terkait
|
||||
- Nilai parameter saat foto diambil
|
||||
- Koordinat GPS
|
||||
- Anotasi yang telah dibuat
|
||||
- Caption/catatan foto
|
||||
- Opsi untuk:
|
||||
- Edit anotasi
|
||||
- Ganti caption
|
||||
- Berbagi foto (via email, WhatsApp)
|
||||
- Download
|
||||
|
||||
**Perbandingan Foto Sebelum/Sesudah:**
|
||||
- Tampilan side-by-side
|
||||
- Slider untuk membandingkan foto sebelum & sesudah perbaikan
|
||||
- Metadata perubahan parameter
|
||||
|
||||
### 6. Peta & Pelacakan GPS (Detail)
|
||||
|
||||
**Peta Utama:**
|
||||
- Peta Google Maps/OpenStreetMap full screen
|
||||
- Pin lokasi saat ini (biru)
|
||||
- Pin lokasi tugas:
|
||||
- Warna hijau: sudah selesai
|
||||
- Warna kuning: sedang dikerjakan
|
||||
- Warna merah: belum dikerjakan
|
||||
- Heat map kepadatan sampling untuk analisis spatial
|
||||
- Layer toggle untuk tipe peta (satelit, normal)
|
||||
|
||||
**Informasi Lokasi:**
|
||||
- Card di bagian bawah dengan:
|
||||
- Nama fasilitas terdekat
|
||||
- Jarak dan estimasi waktu tempuh
|
||||
- List ruangan yang harus disampling
|
||||
- Status sampling ruangan
|
||||
|
||||
**Navigasi & Rute:**
|
||||
- Tombol "Navigasi" untuk membuka rute di Google Maps
|
||||
- Opsi rute optimal untuk mengunjungi semua lokasi
|
||||
- Estimasi waktu total untuk menyelesaikan semua sampling
|
||||
|
||||
**Riwayat Lokasi:**
|
||||
- Timeline pergerakan hari ini
|
||||
- Timestamp untuk setiap lokasi sampling
|
||||
- Durasi di setiap lokasi
|
||||
|
||||
### 7. Analisis & Laporan (Detail)
|
||||
|
||||
**Dashboard Analisis:**
|
||||
- Ringkasan kepatuhan parameter:
|
||||
- Donut chart untuk persentase parameter sesuai/tidak sesuai standar
|
||||
- Bar chart untuk perbandingan antar parameter
|
||||
- Line chart untuk tren parameter dari waktu ke waktu
|
||||
- Filter:
|
||||
- Rentang tanggal
|
||||
- Fasilitas
|
||||
- Jenis ruangan
|
||||
- Parameter spesifik
|
||||
|
||||
**Detail Analisis per Parameter:**
|
||||
- Tampilan untuk setiap parameter (pencahayaan, suhu, kelembaban, dll.):
|
||||
- Grafik distribusi nilai
|
||||
- Perbandingan dengan standar
|
||||
- Statistik (min, max, rata-rata, median)
|
||||
- Highlight nilai ekstrem
|
||||
- Ruangan dengan kepatuhan tertinggi/terendah
|
||||
|
||||
**Generator Laporan:**
|
||||
- Template laporan:
|
||||
- Laporan harian
|
||||
- Laporan per fasilitas
|
||||
- Laporan lengkap dengan foto
|
||||
- Laporan ringkas (executive summary)
|
||||
- Preview laporan
|
||||
- Opsi ekspor:
|
||||
- PDF
|
||||
- Excel
|
||||
- Word
|
||||
- CSV (data mentah)
|
||||
- Opsi berbagi:
|
||||
- Email
|
||||
- Cloud storage
|
||||
- Print
|
||||
|
||||
**Notifikasi & Tindak Lanjut:**
|
||||
- Alert untuk parameter yang tidak sesuai standar
|
||||
- Tracking status tindak lanjut:
|
||||
- Belum ditindaklanjuti
|
||||
- Dalam proses
|
||||
- Selesai
|
||||
- Reminder untuk verifikasi ulang setelah perbaikan
|
||||
|
||||
### 8. Contoh Kasus Detail: Sampling Ruang Operasi RS
|
||||
|
||||
**1. Persiapan:**
|
||||
- Petugas login ke aplikasi dan melihat tugas hari ini
|
||||
- Di dashboard terdapat tugas sampling RS XYZ dengan 5 ruangan
|
||||
- Petugas melihat detail tugas dan menemukan bahwa Ruang Operasi harus diukur dengan standar:
|
||||
- Intensitas cahaya: 300-500 lux (area umum) & 10,000-20,000 lux (meja operasi)
|
||||
- Suhu: 22-27°C
|
||||
- Kelembaban: 40-60%
|
||||
- Tekanan: positif
|
||||
- Kebisingan: maks 65 dBA
|
||||
- Aplikasi menampilkan peta navigasi ke RS XYZ
|
||||
|
||||
**2. Pencatatan di Lokasi:**
|
||||
- Petugas tiba di RS dan membuka form sampling
|
||||
- GPS otomatis memverifikasi lokasi petugas berada di RS XYZ
|
||||
- Petugas memilih "Ruang Operasi" dan mulai wizard sampling
|
||||
- Pengukuran intensitas cahaya menunjukkan:
|
||||
- Area umum: 320 lux (sesuai standar, indikator hijau)
|
||||
- Meja operasi: 8,500 lux (di bawah standar, indikator merah)
|
||||
- Petugas mengukur suhu: 24°C (sesuai standar)
|
||||
- Kelembaban: 52% (sesuai standar)
|
||||
- Tekanan udara: positif (sesuai standar)
|
||||
- Kebisingan: 68 dBA (di atas standar, indikator merah)
|
||||
|
||||
**3. Dokumentasi Masalah:**
|
||||
- Petugas mengambil foto lampu sorot di meja operasi yang intensitasnya kurang
|
||||
- Menambahkan anotasi panah menunjuk lampu dengan teks "Intensitas cahaya 8,500 lux, di bawah standar min 10,000 lux"
|
||||
- Petugas mengambil foto sumber kebisingan (sistem ventilasi) dan menambahkan anotasi
|
||||
- Aplikasi otomatis melabeli foto dengan metadata parameter yang diukur
|
||||
|
||||
**4. Rekomendasi & Tindak Lanjut:**
|
||||
- Aplikasi menghasilkan rekomendasi otomatis:
|
||||
- "Penggantian/perbaikan lampu sorot meja operasi untuk mencapai minimal 10,000 lux"
|
||||
- "Pemeriksaan dan perbaikan sistem ventilasi untuk mengurangi kebisingan di bawah 65 dBA"
|
||||
- Petugas menambahkan deadline rekomendasi: 7 hari kerja
|
||||
- Menambahkan catatan: "Koordinasi dengan bagian pemeliharaan gedung untuk penjadwalan perbaikan di luar jam operasi"
|
||||
- Aplikasi menjadwalkan sampling verifikasi setelah deadline tindak lanjut
|
||||
|
||||
**5. Laporan:**
|
||||
- Aplikasi menghasilkan laporan real-time dengan highlight 2 parameter yang tidak sesuai standar
|
||||
- Grafik perbandingan menunjukkan nilai aktual vs standar PMK RI
|
||||
- Fotografi dokumentasi diintegrasikan dalam laporan
|
||||
- Laporan dikirim otomatis ke email supervisor dan manajer fasilitas RS XYZ
|
||||
|
||||
### 9. Fitur Tambahan Detail:
|
||||
|
||||
**1. Sinkronisasi dengan Alat Ukur Digital:**
|
||||
- Koneksi Bluetooth dengan alat ukur digital untuk:
|
||||
- Lux meter
|
||||
- Termometer & hygrometer
|
||||
- Sound level meter
|
||||
- Pembacaan otomatis nilai ke form aplikasi
|
||||
- Kalibrasi digital dan verifikasi akurasi alat
|
||||
|
||||
**2. Mode Offline:**
|
||||
- Penyimpanan data sementara ketika tidak ada koneksi internet
|
||||
- Sinkronisasi otomatis ketika koneksi tersedia
|
||||
- Indikator status sinkronisasi
|
||||
|
||||
**3. Modul Audit & Penilaian:**
|
||||
- Checklist kepatuhan standar lingkungan lengkap
|
||||
- Scoring system untuk menilai kualitas lingkungan fasilitas
|
||||
- Pemeringkatan fasilitas berdasarkan kepatuhan
|
||||
|
||||
**4. Integrasi dengan Sistem Manajemen Fasilitas:**
|
||||
- API untuk mengirim hasil sampling ke sistem CMMS (Computerized Maintenance Management System)
|
||||
- Pembuatan work order otomatis untuk parameter yang tidak sesuai
|
||||
- Tracking perbaikan dari sistem eksternal
|
||||
|
||||
**5. Knowledge Base & Bantuan:**
|
||||
- Referensi lengkap PMK RI No.2/2023 dan Permenaker No.5/2018
|
||||
- Tutorial video penggunaan alat ukur
|
||||
- Troubleshooting umum
|
||||
- FAQ
|
||||
|
||||
Dengan detail UI dan fitur yang komprehensif ini, aplikasi mobile untuk petugas sampling akan sangat membantu dalam memastikan lingkungan fasilitas kesehatan memenuhi standar yang ditetapkan dalam regulasi. Aplikasi ini mengotomatisasi banyak proses manual, mengurangi kesalahan, meningkatkan akurasi data, dan memungkinkan tindak lanjut yang lebih cepat untuk kondisi yang tidak sesuai standar.
|
||||
|
||||
Apakah ada aspek khusus dari desain UI yang ingin Anda perjelas atau kembangkan lebih lanjut?
|
||||
Reference in New Issue
Block a user