Website & Panel Admin Klinik Keluarga

Klinik Cahaya MedikaCase Study.

Landing page satu halaman untuk klinik keluarga, dengan panel admin ringan agar pemilik klinik bisa mengubah jadwal dokter dan info layanan sendiri — tanpa menunggu developer untuk perubahan rutin.

Buka live demo Diskusikan project serupa

Landing Page PublikPanel Admin KlinikRow Level SecurityOn-Demand ISR

1 Role Admin

Catatan transparansi portfolio

Klinik Cahaya Medika adalah studi kasus ilustratif / template internal untuk menunjukkan proses kerja end-to-end — dari dokumen perencanaan sampai implementasi teknis. Project ini tidak ditampilkan sebagai project klien.

Gambaran Project

Satu website publik, satu panel kendali penuh untuk pemilik klinik.

Klinik Cahaya Medika mengeksplorasi bagaimana klinik keluarga kecil bisa punya website yang selalu akurat, tanpa membuat pemiliknya bergantung ke developer untuk hal-hal rutin.

9 Screen

5 Endpoint Admin

1 Role Admin

Fokus case study

Merancang panel self-service agar klinik tidak bergantung developer untuk perubahan rutin.
Menjaga satu sumber kebenaran lewat rantai dokumen — PRD, Tech Spec, Blueprint, sampai kode.
Menjadikan Row Level Security sebagai lapisan otorisasi utama, bukan sekadar pemeriksaan di kode aplikasi.

01 / Masalah

Klinik keluarga kecil sering mengelola info penting secara manual.

Jadwal dokter, info layanan, dan status buka-tutup sering hidup terpisah dari website — di kepala pemilik, di grup WhatsApp, atau di catatan yang tidak sempat diperbarui.

Jadwal dokter cepat basi

Setiap perubahan jadwal butuh menghubungi developer dan menunggu, sementara pasien sudah datang berdasarkan info lama.

Info layanan tidak konsisten

Layanan atau harga yang berubah di lapangan tidak otomatis tercermin di website, jadi pasien dapat info berbeda-beda.

Pasien menghubungi manual

Tanpa status buka/tutup yang jelas, resepsionis menerima telepon hanya untuk mengonfirmasi jam praktik hari itu.

Tidak ada jejak perubahan

Kalau ada data yang salah, tidak jelas siapa yang mengubah apa dan kapan — sulit ditelusuri, apalagi diperbaiki cepat.

02 / Solusi

Satu sistem, dua sisi pengguna yang jelas perannya.

Pengunjung publik mendapat informasi yang selalu akurat; pemilik klinik mendapat kendali penuh untuk menjaganya tetap akurat — tanpa harus paham kode.

Sisi Publik · Pasien

Halaman yang menjawab pertanyaan tercepat

Ringkasan klinik, layanan, dan profil dokter dalam satu halaman.
Indikator status “Buka Sekarang” yang dihitung otomatis dari jadwal.
Tombol WhatsApp sebagai jalur kontak utama, sesuai kebiasaan pasien di Indonesia.

Sisi Admin · Pemilik Klinik

Kendali penuh tanpa perlu developer

Login aman, lalu edit jadwal praktik dokter per hari lewat tabel mingguan.
Kelola daftar layanan dan profil/foto dokter, dengan pratinjau tampilan publik langsung di layar edit.
Riwayat perubahan tercatat otomatis — siapa mengubah apa, dan kapan.

03 / Tampilan

Bukan mockup — ini tangkapan layar dari aplikasi yang berjalan.

Halaman publik dirancang untuk cepat dipahami calon pasien; panel admin dirancang untuk cepat dioperasikan pemilik klinik yang bukan orang IT.

Sisi Publik

Homepage & kontak

Hero Beranda

Identitas klinik, status buka real-time, dan CTA WhatsApp langsung terlihat tanpa scroll.

Kredibilitas & Layanan

Angka kredibilitas (sejak 2015, 500+ pasien) dan ringkasan layanan unggulan.

Dokter & Jam Praktik

Kartu dokter dengan jam praktik mingguan — sumbernya sama persis dengan yang diedit admin.

Kontak & Lokasi

Status jam operasional hari ini, alamat, dan peta lokasi.

Sisi Admin

Login Admin

Layar login yang fokus — satu-satunya pintu masuk ke panel kendali.

Dashboard Admin

Status buka/tutup, 4 modul utama, dan log “Aktivitas Terakhir” di satu layar.

Edit Jadwal Dokter

Tabel Senin–Minggu dengan panel pratinjau publik langsung di sebelah kanan.

Edit Info Layanan

Nama, deskripsi, dan toggle tampil di homepage per layanan.

Edit Profil Dokter

Ganti foto, nama, dan spesialisasi — tanpa melibatkan developer.

Riwayat Perubahan

Audit log lengkap: siapa, kapan, dan apa yang diubah.

Detail yang tidak terlihat di mockup manapun

Setiap layar edit (jadwal, layanan, profil dokter) punya panel “Pratinjau Tampilan Publik” di sisi kanan — admin melihat persis bagaimana perubahan akan tampil di homepage sebelum menekan simpan.

Responsif sejak awal

Layout, tabel jadwal, dan kartu navigasi admin diuji pada tiga breakpoint utama, mobile-first.

360px768px1280px

04 / Fitur

Fitur yang dipetakan ke kebutuhan klinik nyata.

Setiap fitur menjawab satu masalah operasional spesifik, bukan sekadar tambahan visual.

Indikator Buka/Tutup

Status dihitung otomatis dari jadwal dokter — tampil di hero dan footer, tidak pernah basi.

CTA WhatsApp

Jalur kontak utama menuju pasien, sesuai kebiasaan komunikasi yang sudah familiar di Indonesia.

Pratinjau Real-Time

Setiap layar edit menampilkan tampilan publik yang sebenarnya, sebelum admin menekan simpan.

Panel Admin Self-Service

Edit jadwal, layanan, dan profil dokter langsung dari browser, tanpa menyentuh kode.

Upload Foto Dokter

Foto profil tersimpan aman di object storage dengan batas ukuran, tanpa proses manual dari developer.

Riwayat Perubahan

Setiap perubahan data tercatat otomatis sebagai audit log — siapa, apa, dan kapan.

05 / Pendekatan Desain

Sistem desain bertoken, bukan warna yang diimprovisasi.

Setiap warna, radius, dan jenis huruf mengacu ke satu dokumen sumber — jadi konsisten di semua layar, dan mudah ditelusuri alasannya.

Nakhoda

#151D18

Cahaya

#497F5D

CTA WhatsApp

#1E9E5A

Latar

#F5FAF6

Jaga (Buka)

#67BB6B

Senja (Tutup)

#9C7A5B

Elemen signature

Buka Sekarang

“Indikator Cahaya” — titik cahaya dengan halo lembut yang bernapas untuk status buka/tutup, dirancang khusus untuk identitas klinik ini, bukan badge traffic-light generik.

Kontras

Minimum WCAG AA 4.5:1, perhatian khusus di atas warna Cahaya.

Target sentuh

Minimum 44×44px untuk semua elemen interaktif.

Radius

16px konsisten di kartu, tombol, dan input — sengaja bukan bentuk organik penuh.

06 / Pendekatan Development

Dari kontrak API menjadi sistem full-stack.

Setiap lapisan mengikuti kontrak yang sama, dengan Row Level Security sebagai lapisan otorisasi utama — bukan sekadar pemeriksaan di kode aplikasi.

Layer 01

Frontend UI

Halaman publik, form admin, tabel jadwal, dan pratinjau real-time.

Next.js 15 / App Router / Tailwind

Layer 02

Backend API

Route Handler tipis: validasi, guard admin, panggil service.

Route Handlers / Zod / requireAdmin()

Layer 03

Database

Row Level Security sebagai otorisasi utama, write atomic lewat RPC.

Supabase Postgres / RLS / RPC

Layer 04

Deployment

Region eksplisit untuk latensi pengguna Indonesia, revalidation on-demand.

Vercel (sin1) / Supabase SG

07 / Yang Ditunjukkan

Project portfolio yang menunjukkan lebih dari visual.

Product & Process Thinking

Rantai dokumen perencanaan yang saling terhubung, bukan keputusan yang diambil diam-diam.

Arsitektur & Keamanan

RLS sebagai lapisan otorisasi utama, write atomic lewat transaksi database asli.

Sistem Desain Bertoken

Warna, tipografi, dan radius terkunci ke satu sumber kebenaran yang bisa ditelusuri.

Kerapian Version Control

Trunk-based, Conventional Commits, dan traceability commit ke dokumen sumber.

Bangun Sistem Serupa

Butuh website yang bisa Anda kontrol sendiri, tanpa menunggu developer?

Noble Dev dapat membantu merencanakan website dan panel admin ringan untuk klinik, bimbel, atau biro jasa yang jadwalnya masih dikelola manual.

Diskusikan project serupa