Mengapa MediAgenda?
MediAgenda bukanlah kit UI dan bukan template: ini adalah perangkat lunak pemesanan medis yang berfungsi. Setiap layar di bawah ini didukung oleh skema PostgreSQL nyata (65+ model Prisma), Tindakan Server, otentikasi berbasis peran, dan data awal yang kaya, sehingga Anda dapat meluncurkan pasar pemesanan dokter, sistem klinik, atau produk telehealth khusus dalam hitungan hari, bukan bulan.
Ini mencakup seluruh siklus: pasien menemukan dokter, memesan, membayar, mendapatkan perawatan, dan meninggalkan ulasan, sementara administrator menjalankan semuanya dari panel label putih tanpa menyentuh kode. Animasi dan video menunjukkan aplikasi nyata yang berjalan dengan data demo: tidak ada mockup.
- 4 portal lengkap: Pasien, Dokter, Admin, dan Agen Dukungan
- Pasar publik dengan pencarian, profil kaya, dan pemesanan instan (tamu dapat memesan tanpa akun)
- Seluruh siklus janji temu: tertunda, dikonfirmasi, selesai, dibatalkan, tidak hadir
- Dua mesin pendapatan dengan Stripe: langganan dokter dan biaya per konsultasi (Stripe Connect)
- Pemberitahuan dokter-pasien waktu nyata dengan Pusher, dengan panel metrik di admin
- Rekam medis elektronik dengan wizard langkah demi langkah
- Ulasan dengan penilaian, tag, balasan dokter, dan moderasi
- Suite tiket dukungan bawaan dengan metrik SLA dan penjadwalan agen
- Pengalihan bahasa EN/ES waktu nyata: 11.000+ string yang diterjemahkan
- Google Maps untuk lokasi klinik, ekspor Excel dari katalog, pengguna, dan janji temu
- Data demo yang realistis: 26 dokter, 35 pasien, 750+ janji temu
01. Lihat cara kerjanya: seorang pasien memesan secara real-time
Widget pemesanan memandu pasien melalui jenis kunjungan, alamat kantor, layanan, penjamin, dan grid ketersediaan langsung yang dihitung dari jadwal mingguan dokter, istirahat, liburan, dan janji temu yang ada. Tamu dapat memesan hanya dengan nama dan email; reservasi slot mencegah pemesanan ganda, dan ketika Anda mengaktifkannya, pasien membayar konsultasi secara online saat waktu pemesanan.
Beberapa detik kemudian, janji temu menunggu di panel dokter, dengan detail kontak pasien, modalitas, status, dan tautan langsung ke rekam medis mereka.
02. Halaman arahan yang menjual untuk Anda
Situs pemasaran modern yang fokus pada konversi dengan metrik hero animasi, mock produk langsung, cerita tentang titik sakit, showcase fitur, perbandingan pesaing, testimoni, dan harga: semuanya yang dibutuhkan SaaS medis untuk mengubah dokter yang mengunjungi menjadi pelanggan. Logo, teks, warna, dan metadata SEO diedit dari panel admin.
03. Pasar dokter dengan pencarian cerdas
Pasien menemukan spesialis yang tepat dengan filter gabungan: pencarian teks bebas, 100+ spesialisasi medis, kota, dan modalitas konsultasi (tatap muka atau virtual). Setiap kartu hasil menunjukkan foto dokter, penilaian ulasan langsung, rumah sakit, chip modalitas, dan biaya konsultasi.
04. Profil dokter publik yang membangun kepercayaan
Setiap dokter mendapatkan halaman publik yang kaya dan ramah SEO: galeri foto dan video YouTube, lencana terverifikasi, penilaian bintang, biografi, pendidikan dan pengalaman, layanan dengan harga, beberapa lokasi kantor dengan peta Google yang disematkan, penjamin yang diterima, sertifikat PDF yang dapat diunduh, ulasan pasien dengan balasan dokter, dan widget pemesanan yang persisten. Peristiwa minat pasien (tampilan profil, pemesanan dimulai, klik kontak) memberi umpan balik analitik dokter.
05. Autentikasi dan onboarding untuk setiap peran
Otentikasi kredensial dengan NextAuth, pemulihan kata sandi, dan alur pendaftaran yang halus. Template ini dilengkapi dengan login demo satu klik untuk keempat peran sehingga pembeli dapat menjelajahi dengan segera. Pasien mendaftar melalui wizard 2 langkah; dokter melalui wizard 5 langkah dengan pratinjau profil langsung yang mengumpulkan profil, spesialisasi, alamat klinik (autocomplete Google Places), dan ketersediaan mingguan, kemudian, tergantung pada mode penagihan yang Anda konfigurasikan, mengenakan biaya satu kali atau memulai langganan Stripe sebelum mengaktifkan akun.
06. Portal dokter: kokpit praktik nyata
Dokter menjalankan seluruh praktik mereka dari satu panel: dasbor KPI dengan analitik keterlibatan pasien, kalender penuh dengan aturan ketersediaan mingguan per kantor, pemblokiran waktu dan liburan, manajemen janji temu, CRM pasien dengan akses instan ke riwayat medis setiap pasien, manajemen layanan dan harga per kantor, penjamin dan kondisi yang diobati, manajemen ulasan dengan balasan, pesan waktu nyata, onboarding pembayaran Stripe, dan pengeditan profil dengan galeri foto, video, dan sertifikat.
Ketersediaan dikonfigurasi per kantor: hari dan jam, layanan yang ditawarkan, jenis pasien, dan warna untuk kalender. Istirahat, blok jadwal, dan liburan dihormati oleh grid pemesanan publik secara otomatis.
Pemberitahuan instan berkat Pusher Channels: dokter melihat pesan pasien saat mereka tiba, dengan penghitung yang belum dibaca dan riwayat percakapan.
07. Portal pasien: semuanya dalam satu tempat
Pasien mengelola seluruh kehidupan kesehatan mereka: dasbor pribadi dengan statistik kesehatan, manajemen janji temu dengan alur penjadwalan ulang dan pembatalan serta ekspor kalender, dokter mereka, resep, riwayat pembayaran, obrolan waktu nyata dengan dokter, dan riwayat medis elektronik lengkap yang dibangun dengan wizard langkah-demi-langkah. Ulasan membawa lencana janji temu terverifikasi.
08. Panel admin: jalankan seluruh platform
Back office lengkap untuk mengoperasikan marketplace: dasbor global, manajemen pengguna dengan filter peran dan halaman detail, pengawasan janji temu, enam manajer katalog (spesialisasi, layanan, penyakit, asuransi, jenis pasien, awalan profesional) dengan ekspor Excel, moderasi ulasan dengan alur kerja ulasan yang dilaporkan, suite dukungan penuh, dan pengaturan monetisasi yang mendalam.
Pengaturan juga mencakup branding (logo, favicon, gambar OG, metadata SEO), Google Maps dan kredensial Pusher, kunci Stripe uji/hidup dengan pemeriksaan koneksi, biaya pembayaran pasien-ke-dokter melalui Stripe Connect dengan simulator biaya interaktif, metrik Pusher (latensi P95, tingkat keberhasilan pengiriman, otorisasi saluran, peristiwa per peran, dan log kesalahan) serta halaman pemeliharaan server dan cache dengan pemeriksaan kesehatan database. Tidak ada variabel lingkungan yang diperlukan untuk integrasi: kunci API hidup di database dan diaktifkan atau dinonaktifkan dari UI.
09. Portal agen dukungan: helpdesk bawaan
Portal khusus untuk staf dukungan Anda: kotak masuk tiket dengan antrean pribadi dan kolam yang tidak ditugaskan, "ambil tiket" satu klik, penugasan otomatis, prioritas, lampiran, balasan beruntun dengan catatan internal yang tidak terlihat oleh pengguna, alur kerja status (terbuka, dalam proses, menunggu pengguna, teratasi, ditutup), jadwal agen dan metrik SLA serta tingkat penutupan per agen, dengan pengawasan supervisor terhadap setiap tiket.
10. Dua mesin pendapatan, didukung oleh Stripe
MediAgenda dibangun untuk menghasilkan uang sejak hari pertama, dengan dua aliran pendapatan independen yang didukung oleh Stripe yang sepenuhnya Anda konfigurasi dari panel admin.
Mesin 1: Pendapatan SaaS, mengenakan biaya dokter untuk platform
Pilih bagaimana profesional membayar untuk bergabung: Gratis (kembangkan sisi pasokan terlebih dahulu), Pembayaran satu kali (akses seumur hidup yang dikumpulkan saat pendaftaran) atau Langganan berulang (mingguan, bulanan, atau tahunan melalui Stripe Billing). Atur harga reguler, jalankan harga promosi, tawarkan hari percobaan, pilih mata uang dan metode pembayaran, dan pilih antara checkout yang dihosting oleh Stripe atau formulir kartu yang disematkan di dalam wizard pendaftaran. Dokter tidak diaktifkan sampai Stripe mengonfirmasi pembayaran.
Mesin 2: Pendapatan transaksi, dapatkan dari setiap konsultasi berbayar
Aktifkan pembayaran pasien-ke-dokter melalui Stripe Connect dan pertahankan komisi platform yang dapat dikonfigurasi pada setiap konsultasi: persentase, biaya tetap tambahan, atau keduanya (atur 0% untuk meneruskan 100% kepada dokter). Tentukan siapa yang bertindak sebagai pedagang yang tercatat: platform menagih biaya dan mentransfer bersih kepada dokter (biaya tujuan), atau dokter menagih langsung dan Stripe secara otomatis mengarahkan biaya Anda (biaya langsung). Dokter menyelesaikan onboarding Stripe mereka sendiri (KYC) dari panel mereka, dan dasbor admin melacak akun yang terhubung, biaya, dan komisi yang terakumulasi.
- Pendaftaran gratis / satu kali / berlangganan untuk dokter
- Hari percobaan, harga promosi dan multi-mata uang
- Checkout Stripe yang dihosting atau disematkan dalam wizard pendaftaran
- Pembayaran Stripe Connect dengan biaya platform per konsultasi
- Pembayaran tujuan atau langsung (pilihan pedagang yang tercatat)
- Peralihan mode uji/hidup dengan pemeriksaan kesehatan koneksi
- Riwayat langganan dan pembayaran di panel admin
- Simulator biaya interaktif dengan biaya Stripe yang nyata
11. Bilingual secara desain: Inggris dan Spanyol
Sebuah tombol ganti bahasa EN/ES dengan satu klik ada di setiap header dan sidebar. Mesin terjemahan runtime dilengkapi dengan kamus lebih dari 11.000 entri yang mencakup seluruh produk, termasuk katalog medis (spesialisasi, penyakit, layanan), tanggal, penghitung dinamis, dan bahkan konten demo yang disediakan, dengan pencocokan pola cerdas untuk angka yang diinterpolasi dan frasa yang disusun. Google Maps juga dimuat dalam bahasa yang dipilih, dan kamus dapat diperluas untuk lebih banyak bahasa.
Rincian fitur berdasarkan peran
Dokter: profil publik dengan galeri, video, dan sertifikat · dasbor KPI dengan analitik keterlibatan · kalender, ketersediaan mingguan, istirahat dan liburan per kantor · manajemen siklus janji temu · CRM pasien dengan riwayat medis · layanan dengan harga tetap atau rentang per kantor · asuransi dan kondisi yang diobati · balasan ulasan · obrolan waktu nyata · pendaftaran pembayaran Stripe · tiket dukungan
Pasien: cari dan pesan dalam hitungan menit (bahkan sebagai tamu) · dasbor dengan ringkasan kesehatan · jadwal ulang dan batalkan dengan kebijakan · ekspor kalender · wizard riwayat medis elektronik · riwayat pembayaran · obrolan dengan dokter · ulasan dengan lencana janji temu terverifikasi · antarmuka pengguna bilingual
Admin: dasbor global · manajemen pengguna dan peran · pengawasan janji temu · 6 manajer katalog dengan ekspor Excel · moderasi ulasan · pengaturan merek dan SEO · pengujian/hidup Stripe, model penagihan dan simulator biaya · Google Maps dan Pusher dikonfigurasi dari UI · metrik Pusher · suite dukungan dengan SLA dan penjadwalan agen · alat server dan cache
Agen dukungan: kotak masuk pribadi dan antrean yang tidak ditugaskan · ambil dan balas tiket · catatan internal · alur kerja status · peran pengawas melihat segalanya · jadwal agen (shift, akhir pekan, malam) · tag pengalihan berbasis kategori · metrik SLA dan tingkat penutupan
Teknologi yang digunakan
- Next.js 14 (App Router, Komponen Server dan Aksi Server)
- TypeScript end to end (~500 file TypeScript/TSX)
- Prisma ORM · PostgreSQL (65+ model)
- Tailwind CSS dengan sistem desain kustom · animasi Framer Motion
- NextAuth (kredensial, sesi JWT, perlindungan rute berbasis peran)
- Stripe: Checkout, Langganan, Payment Intents dan Connect
- Kanal Pusher untuk pesan waktu nyata
- Google Maps dan Places (sematkan, geocoding, autocomplete) · peta kantor Leaflet
- date-fns, validasi Zod, ikon Lucide, ekspor xlsx
- Mesin i18n runtime kustom (EN/ES)
Apa yang Anda dapatkan
- Kode sumber Next.js 14 + TypeScript lengkap
- Skema Prisma + model siap migrasi
- Skrip benih dengan data demo yang kaya dan realistis serta login demo satu klik untuk semua 4 peran
- Mesin i18n runtime + kamus EN dengan 11.000 entri
- Basis kode dalam bahasa Inggris: komentar, folder, dan rute
- Sistem desain Tailwind dan komponen UI yang dapat digunakan kembali
.env.example dan panduan langkah demi langkah untuk pengaturan
Instal dalam 4 langkah
Diuji dari nol hingga aplikasi yang berjalan:
npm install- Salin
.env.example ke .env dan atur string koneksi PostgreSQL Anda
npx prisma db push && npx tsx prisma/seed.tsnpm run dev
Persyaratan
- Node.js 20+ dan PostgreSQL 14+ (bekerja dengan baik dengan Neon, Supabase, RDS atau Postgres lokal)
- Opsional, tergantung pada apa yang Anda aktifkan: akun Stripe (pembayaran), aplikasi Pusher (obrolan waktu nyata), kunci API Google Maps (peta dan autocomplete). Semua dikonfigurasi dari UI panel admin.
Kredensial demo (setelah penanaman)
PeranEmailKata Sandi
Adminadmin@mediagenda.demoAdmin123!
Dokterdoctor1@mediagenda.demoDoctor123!
Pasienpaciente1@mediagenda.demoPaciente123!
Baik untuk diketahui
- Antarmuka bilingual Inggris/Spanyol; basis kode, komentar, dan rute dalam bahasa Inggris.
- Tidak ada kunci atau kredensial yang disertakan: Stripe, Pusher, dan Google Maps diatur dari panel admin dengan akun Anda sendiri.
- Tangkapan layar, animasi, dan video dibuat dengan aplikasi nyata dan data demo yang dibuat-buat.
−19%
