Di era digital 2026, membangun dashboard rumah sakit (SIMRS) yang kompleks tidak lagi butuh waktu berminggu-minggu. Dengan teknik Vibe Coding menggunakan Shaynaaa.com, kita bisa menyulap ide menjadi kode frontend siap pakai dalam hitungan menit.
Dalam tutorial ini, kita akan membuat 5 Halaman Dashboard Rumah Sakit yang bersih, modern, dan responsif menggunakan tema Jakarta Lite. Kerennya lagi, kita akan menggunakan strategi "Smart Refinement" agar desain antar halaman tetap konsisten dan hemat kredit.
Persiapan: Kenapa Tema Jakarta Lite?
Kita memilih tema Jakarta Lite karena nuansanya yang bersih (clean), ringan, dan profesional.
- Warna Dominan: Putih & Abu-abu muda (memberi kesan steril & higienis).
- Aksen: Biru Medis (memberi kesan terpercaya).
- Layout: Fokus pada keterbacaan data, sangat cocok untuk dokter/admin yang sibuk.
Langkah 1: Login ke Shaynaaa.com
Masuk ke website Shaynaaa.com, lalu melakukan login dengan klik tombol “Start Building”.
Langkah 2: Buat project baru
Buat project baru dengan klik tombol “New Project”
Isikan nama dan deskripsi, bebas kalian isi apa saja, jika sudah klik “Create Project”
Langkah 3: Membuat "Master Template" (Halaman 1: Dashboard Overview)
Halaman ini akan menjadi fondasi. Sidebar dan Header yang kita buat di sini akan dipakai terus di halaman lain.
- Pilih Tema: Jakarta Lite (1 Credit).
- Masukkan Master Prompt berikut di kolom chat:
Hospital Admin Dashboard. Sidebar: Dashboard, Patients, Doctors, Pharmacy, Settings. Header: Search, Profile. Main Content: 4 Stats Cards (Inpatients, Beds, Doctors, Emergency). Below: 'Weekly Patient Visits' line chart. Right side: 'Critical Low Stock Medicine' list. Vibe: Sterile, clean, medical blue accent, minimalist white bg
- Klik Generate.
Jika ada yang masih kurang bagi kalian seperti warna dan ukuran, bisa menggunakan fitur “Edit UI” dengan klik tombol “Edit UI” di sebelah preview, lalu arahkan cursor ke elemen yang mau diubah dan klik elemen tersebut
Jika sudah oke, copy code, pastekan dan simpan sebagai dashboard.html dengan klik tombol "code”, lalu klik “copy code”
Langkah 4: Strategi Refinement (Halaman 2-5)
Jangan buat proyek baru! Kita akan memodifikasi halaman yang sudah ada agar navigasinya konsisten. Gunakan fitur chat di sebelah kiri untuk mengubah Main Content Area saja.
Halaman 2: Manajemen Pasien
Kita ubah grafik dan kartu statistik menjadi tabel data pasien. Klik “Create New Page”
Replace main content with 'Patient Records' table. Columns: Name, Medical ID, DoB, Insurance, Status Badge (In-Patient/Out-Patient). Add 'Register Patient' button on top right. Set 'Patients' sidebar menu as active/selected.
Action: Klik Generate -> Copy-Paste Code (Simpan sebagai patients.html).
Halaman 3: Jadwal Dokter
Sekarang kita butuh tampilan kalender dan slot antrean.
Change main content to 'Doctor Schedules'. Use Grid layout of Doctor Profile Cards (Photo, Specialist, Slots Available). Add Polyclinic Filter dropdown on top (Surgery, Pediatrics, etc). Set 'Doctors' sidebar menu as active/selected.
Action: Klik Generate -> Copy-Paste Code (Simpan sebagai doctors.html).
Halaman 4: Farmasi & Inventori
Kita fokus ke visualisasi stok obat.
Change main content to 'Pharmacy Inventory' list. Columns: Medicine Name, Category, Expiry Date. Add visual 'Stock Level' progress bar(Red < 20%, Green if safe). Set 'Pharmacy' sidebar menu as active/selected.
Action: Klik Generate -> Copy-Paste Code (Simpan sebagai pharmacy.html).
Halaman 5: Detail Rekam Medis
Halaman terakhir untuk melihat detail satu pasien.
Change main content to 'Patient Detail View'. Split 2 columns. Left: Patient Profile Card (Photo, Blood Type, Allergies). Right: 'Medical History' timeline. Bottom: 'Prescription' list section. Keep 'Patients' sidebar menu as active/selected. Add a 'Back' button on top left.
Action: Klik Generate -> Copy-Paste Code (Simpan sebagai patient-detail.html).
Kesimpulan & Tips Integrasi
Dengan strategi ini, kamu mendapatkan 5 halaman yang Sidebar dan Header-nya 100% identik, sehingga saat user berpindah halaman, transisinya terasa mulus seperti aplikasi profesional.
Struktur 5 Halaman Dashboard Rumah Sakit, diantaranya:
- Halaman Dashboard
- Halaman Pasien
- Halaman Detail Pasien
- Halaman Dokter
- Halaman Obat
Langkah Selanjutnya (Untuk Developer):
- Buka VS Code.
- Gabungkan kode-kode yang sudah di-download tadi.
- Ekstrak bagian Sidebar dan Header menjadi komponen terpisah (misalnya
<Sidebar />di React atau@include('sidebar')di Laravel) agar kodinganmu lebih rapi (DRY - Don't Repeat Yourself).
Selamat! Kamu baru saja membangun frontend Sistem Informasi Rumah Sakit level enterprise dalam waktu kurang dari 30 menit berkat teknik Vibe Coding.
