Pernah antri di rumah sakit dari jam 7 pagi sampai jam 12 siang, cuma buat ketemu dokter 10 menit?
Gue yakin hampir semua orang Indonesia pernah ngalamin ini. Datang pagi-pagi, ambil nomor antrian, duduk di kursi tunggu yang penuh sesak, dengerin nomor dipanggil satu per satu, dan berharap nomor kita segera muncul.
Yang lebih frustrating? Kadang kita gak tau posisi antrian kita dimana. Kadang dokter datang telat. Kadang sistem registrasi masih pakai kertas dan pulpen.
Ini tahun 2025, dan mayoritas rumah sakit di Indonesia masih operate dengan cara yang sama seperti 20 tahun lalu.
Dan di sinilah opportunity untuk kita sebagai developer.
Market Opportunity Healthcare Indonesia
HEALTHCARE DIGITAL LANDSCAPE INDONESIA:
Jumlah Fasilitas Kesehatan:
├── 3,000+ Rumah Sakit
├── 10,000+ Klinik Pratama
├── 10,000+ Puskesmas
└── Puluhan ribu praktek dokter mandiri
Current State:
├── 70%+ masih pakai sistem manual atau legacy
├── Integrasi antar sistem sangat minim
├── Data pasien tersebar di berbagai tempat
└── Patient experience buruk
Post-COVID Acceleration:
├── Awareness digitalisasi meningkat drastis
├── Telemedicine jadi mainstream
├── Government push untuk integrasi data (SATUSEHAT)
└── Budget IT rumah sakit meningkat
Apa artinya untuk freelancer/developer?
PROJECT VALUE:
Hospital Management System (Full):
├── Small clinic: Rp 30-50 juta
├── Medium hospital: Rp 50-150 juta
└── Large hospital: Rp 150-500 juta
Maintenance Bulanan:
├── Basic support: Rp 3-5 juta/bulan
├── Full support + updates: Rp 10-20 juta/bulan
└── Dedicated team: Rp 30-50 juta/bulan
Recurring Revenue Potential:
└── 10 clients × Rp 5 juta = Rp 50 juta/bulan passive income
Ini bukan project kecil-kecilan. Ini enterprise-level project dengan value yang sesuai.
Apa yang Akan Kita Build
Di tutorial ini, kita akan build Hospital Management System MVP — sistem yang realistic dan bisa langsung dipresentasikan ke client rumah sakit atau klinik.
RUMAH SAKIT XYZ — MVP SCOPE:
┌─────────────────────────────────────────────────────────┐
│ PUBLIC WEBSITE │
├─────────────────────────────────────────────────────────┤
│ • Landing page (info RS, layanan, kontak) │
│ • Daftar dokter dengan jadwal praktek │
│ • Booking appointment online │
│ • Check status antrian (real-time) │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ PATIENT PORTAL │
├─────────────────────────────────────────────────────────┤
│ • Login / Register │
│ • Dashboard pasien │
│ • Riwayat kunjungan │
│ • Lihat hasil rekam medis │
│ • Kelola profil │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ ADMIN DASHBOARD │
├─────────────────────────────────────────────────────────┤
│ • Patient management (CRUD) │
│ • Appointment & queue management │
│ • Doctor & schedule management │
│ • Medical records (basic EMR) │
│ • Billing & payment │
│ • Reports & analytics │
└─────────────────────────────────────────────────────────┘
Tech Stack yang Kita Pakai
TECH STACK OVERVIEW:
┌─────────────────────────────────────────────────────────┐
│ FRONTEND │
├─────────────────────────────────────────────────────────┤
│ Next.js 15 → Modern React framework │
│ TypeScript → Type safety │
│ Tailwind CSS → Utility-first styling │
│ shadcn/ui → Beautiful components │
│ React Hook Form → Form handling │
│ Zod → Validation │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ BACKEND │
├─────────────────────────────────────────────────────────┤
│ Supabase → Backend-as-a-Service │
│ ├── PostgreSQL → Relational database │
│ ├── Auth → Authentication built-in │
│ ├── Realtime → Live updates (untuk antrian) │
│ ├── Storage → File uploads │
│ └── Edge Functions→ Serverless functions │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ DEVELOPMENT │
├─────────────────────────────────────────────────────────┤
│ Antigravity IDE → AI-assisted development │
│ Gemini 3 Pro → Code generation & debugging │
│ Git → Version control │
│ Vercel → Deployment │
└─────────────────────────────────────────────────────────┘
Kenapa Stack Ini?
WHY NEXT.JS 15:
✓ Server Components → Faster page loads
✓ App Router → Modern routing system
✓ Server Actions → Simplified data mutations
✓ API Routes → Backend dalam satu project
✓ SEO-friendly → Important untuk public pages
✓ Vercel deployment → One-click deploy
WHY SUPABASE:
✓ PostgreSQL → Relational database perfect untuk healthcare
(data pasien butuh relasi yang jelas dan ACID compliance)
✓ Row Level Security → Data protection at database level
(pasien hanya bisa lihat data sendiri)
✓ Built-in Auth → Email, OAuth, Magic Link ready
(gak perlu build auth dari nol)
✓ Realtime → Perfect untuk sistem antrian
(update otomatis tanpa refresh)
✓ Free Tier Generous → 500MB database, 1GB storage
(cukup untuk development dan small production)
✓ Dashboard Visual → Easy data management
(client bisa lihat data tanpa perlu custom admin)
WHY ANTIGRAVITY IDE:
✓ AI-assisted coding → Faster development
✓ Browser testing → Agent bisa test UI langsung
✓ Multi-surface → Editor + Terminal + Browser
✓ Free (preview) → No cost untuk development
✓ Gemini 3 Pro → Powerful untuk complex logic
Context untuk BuildWithAngga Students
Healthcare project adalah level-up dari typical portfolio projects. Kenapa?
- Domain Complexity — Healthcare punya business rules yang complex (antrian, jadwal, rekam medis, billing)
- Data Sensitivity — Belajar handle sensitive data dengan proper security
- Multi-Role System — Admin, dokter, perawat, pasien — masing-masing punya access berbeda
- Real-Time Requirements — Sistem antrian butuh live updates
- Enterprise Feel — Project yang bisa dipresentasikan ke client corporate
Skill Next.js + Supabase sangat marketable di 2025. Kombinasi ini increasingly popular untuk startup dan enterprise yang butuh rapid development tanpa sacrifice quality.
Estimasi Waktu Development
DENGAN ANTIGRAVITY (AI-Assisted):
─────────────────────────────────────
Setup & Configuration : 1-2 jam
Public Website : 2-3 jam
Auth & Patient Portal : 2-3 jam
Admin Dashboard : 4-6 jam
Medical Records & Billing : 2-3 jam
Polish & Deployment : 1-2 jam
─────────────────────────────────────
TOTAL: 12-18 jam (2-3 hari)
TANPA AI (Traditional):
─────────────────────────────────────
TOTAL: 60-100 jam (2-4 minggu)
─────────────────────────────────────
TIME SAVINGS: ~80%
Let's build this! 🏥
Bagian 2: Setup Project — Next.js + Supabase + Antigravity
Sebelum kita mulai coding, kita perlu setup foundation yang solid. Di bagian ini kita akan:
- Create Supabase project dan database
- Initialize Next.js dengan semua dependencies
- Configure Supabase client untuk Next.js
- Setup database schema
Prerequisites
PASTIKAN SUDAH PUNYA:
□ Google Antigravity installed
└── Download di antigravity.google
□ Node.js 18 atau lebih baru
└── Check: node --version
□ Supabase account (FREE)
└── Daftar di supabase.com
□ Git installed
└── Check: git --version
□ Basic knowledge:
├── React/Next.js basics
├── TypeScript basics
└── SQL basics
Step 1: Create Supabase Project
Buka browser, go to supabase.com, dan login atau create account.
SUPABASE PROJECT SETUP:
1. Click "New Project" di dashboard
2. Fill project details:
├── Organization: (pilih atau buat baru)
├── Name: rumahsakit-xyz
├── Database Password: [buat password strong]
├── Region: Southeast Asia (Singapore)
└── Pricing Plan: Free
3. Click "Create new project"
4. Wait 2-3 menit untuk provisioning
5. Setelah ready, SAVE credentials ini:
┌─────────────────────────────────────────────────┐
│ Project URL: │
│ <https://xxxxx.supabase.co> │
│ │
│ Anon/Public Key: │
│ eyJhbGciOiJIUzI1NiIsInR5cCI6... │
│ │
│ Service Role Key (JANGAN SHARE!): │
│ eyJhbGciOiJIUzI1NiIsInR5cCI6... │
└─────────────────────────────────────────────────┘
Location: Settings → API
Important: Service Role Key punya full access ke database. Jangan pernah expose di frontend atau commit ke Git!
Step 2: Initialize Next.js Project dengan Antigravity
Buka Google Antigravity, create new workspace, dan kita mulai dengan prompt pertama:
PROMPT 1 — PROJECT INITIALIZATION:
"Create a new Next.js 15 project for a Hospital Management
System called 'rumahsakit-xyz'.
Requirements:
1. Initialize with TypeScript and App Router:
npx create-next-app@latest rumahsakit-xyz --typescript --tailwind --eslint --app --src-dir
2. After project created, install these dependencies:
Core:
- @supabase/supabase-js
- @supabase/ssr
UI:
- Run: npx shadcn@latest init (accept defaults, use neutral color)
- After init, add components: npx shadcn@latest add button card input label textarea select dialog sheet table tabs badge avatar dropdown-menu toast sonner form
Forms & Validation:
- react-hook-form
- @hookform/resolvers
- zod
Utilities:
- date-fns
- lucide-react (should be added by shadcn)
3. Create this folder structure inside src/:
src/
├── app/
│ ├── (public)/ # Public pages (landing, doctors, booking)
│ │ ├── page.tsx # Landing page
│ │ ├── doctors/
│ │ ├── booking/
│ │ └── antrian/
│ ├── (auth)/ # Auth pages
│ │ ├── login/
│ │ ├── register/
│ │ └── layout.tsx
│ ├── (dashboard)/ # Admin dashboard
│ │ ├── dashboard/
│ │ └── layout.tsx
│ ├── (portal)/ # Patient portal
│ │ ├── portal/
│ │ └── layout.tsx
│ ├── api/ # API routes
│ ├── layout.tsx
│ └── globals.css
├── components/
│ ├── ui/ # shadcn components (auto-generated)
│ ├── forms/ # Form components
│ ├── shared/ # Shared components
│ └── layouts/ # Layout components
├── lib/
│ ├── supabase/ # Supabase client setup
│ └── utils.ts # Utility functions
├── types/ # TypeScript types
│ └── database.ts
└── hooks/ # Custom React hooks
4. Create .env.local with these placeholders:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
5. Update tailwind.config.ts to extend colors:
- primary: blue-600 (#2563eb)
- Add medical-themed colors if appropriate
After setup, start dev server (npm run dev) and show me
the project structure and that it runs without errors."
Agent akan:
- Create Next.js project
- Install semua dependencies
- Initialize shadcn/ui
- Create folder structure
- Setup environment file
- Start dev server
- Verify everything works
Step 3: Configure Supabase Client
Setelah project initialized, kita setup Supabase client:
PROMPT 2 — SUPABASE CLIENT SETUP:
"Setup Supabase client configuration for Next.js App Router.
Create these files:
1. src/lib/supabase/client.ts
- Browser client using createBrowserClient from @supabase/ssr
- Export function createClient()
2. src/lib/supabase/server.ts
- Server client using createServerClient from @supabase/ssr
- Handle cookies properly for App Router
- Export async function createClient()
3. src/lib/supabase/middleware.ts
- Middleware helper for auth refresh
- Export function updateSession(request)
4. src/middleware.ts (in root, not src)
- Protect routes:
• Public: /, /doctors, /booking, /antrian, /login, /register
• Protected: /dashboard/*, /portal/*
- Refresh session on each request
- Redirect unauthenticated users appropriately
5. src/types/database.ts
- Create placeholder types (we'll generate proper types later)
- Include basic types for: Profile, Patient, Doctor,
Appointment, MedicalRecord, Billing
Follow the official Supabase SSR documentation pattern.
Make sure to handle cookies correctly for server components.
Show me all the created files."
Expected files yang di-generate:
// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'
export function createClient() {
return createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
}
// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll() {
return cookieStore.getAll()
},
setAll(cookiesToSet) {
try {
cookiesToSet.forEach(({ name, value, options }) =>
cookieStore.set(name, value, options)
)
} catch {
// Handle server component context
}
},
},
}
)
}
Step 4: Setup Database Schema
Sekarang kita buat database schema. Ini bagian critical — healthcare data butuh struktur yang proper.
PROMPT 3 — DATABASE SCHEMA:
"Create complete SQL migration for Hospital Management System.
Generate SQL to run in Supabase SQL Editor that creates:
1. ENUM TYPES:
- user_role: 'admin', 'doctor', 'nurse', 'receptionist', 'patient'
- gender: 'male', 'female'
- insurance_type: 'umum', 'bpjs', 'asuransi_swasta'
- appointment_status: 'booked', 'waiting', 'in_progress', 'completed', 'cancelled'
- payment_status: 'pending', 'paid', 'cancelled', 'refunded'
2. TABLES:
profiles (extends auth.users):
- id (uuid, PK, references auth.users)
- role (user_role enum, default 'patient')
- full_name (text)
- phone (text)
- avatar_url (text)
- created_at, updated_at (timestamps)
patients:
- id (uuid, PK)
- user_id (uuid, references profiles, nullable for walk-in)
- medical_record_number (text, unique) -- Format: RM-YYYYMM-XXXXX
- full_name (text, not null)
- nik (text, 16 chars)
- birth_date (date)
- gender (gender enum)
- address (text)
- phone (text, not null)
- email (text)
- blood_type (text)
- allergies (text array)
- emergency_contact (jsonb) -- {name, phone, relationship}
- insurance_type (insurance_type enum, default 'umum')
- insurance_number (text)
- created_at, updated_at
doctors:
- id (uuid, PK)
- user_id (uuid, references profiles, not null)
- specialization (text, not null)
- license_number (text) -- Nomor STR
- consultation_fee (numeric, default 0)
- bio (text)
- photo_url (text)
- is_active (boolean, default true)
- created_at, updated_at
schedules:
- id (uuid, PK)
- doctor_id (uuid, references doctors, not null)
- day_of_week (int, 0-6, 0=Sunday)
- start_time (time)
- end_time (time)
- max_patients (int, default 20)
- room (text)
- is_active (boolean, default true)
- created_at
appointments:
- id (uuid, PK)
- patient_id (uuid, references patients, not null)
- doctor_id (uuid, references doctors, not null)
- schedule_id (uuid, references schedules)
- appointment_date (date, not null)
- appointment_time (time)
- queue_number (int)
- status (appointment_status, default 'booked')
- complaint (text)
- notes (text)
- created_at, updated_at
medical_records:
- id (uuid, PK)
- appointment_id (uuid, references appointments)
- patient_id (uuid, references patients, not null)
- doctor_id (uuid, references doctors, not null)
- diagnosis (text)
- treatment (text)
- prescription (jsonb) -- array of {medicine, dosage, frequency, duration, notes}
- vital_signs (jsonb) -- {blood_pressure, temperature, pulse, weight, height}
- attachments (text array) -- file URLs
- created_at
billings:
- id (uuid, PK)
- appointment_id (uuid, references appointments)
- patient_id (uuid, references patients, not null)
- items (jsonb) -- array of {name, quantity, unit_price, subtotal}
- subtotal (numeric)
- discount (numeric, default 0)
- tax (numeric, default 0)
- total (numeric)
- payment_status (payment_status, default 'pending')
- payment_method (text)
- paid_at (timestamp)
- receipt_number (text)
- notes (text)
- created_at, updated_at
3. FUNCTIONS:
generate_medical_record_number():
- Auto-generate format: RM-YYYYMM-XXXXX
- XXXXX is sequential per month
generate_queue_number(doctor_id, appointment_date):
- Auto-generate queue number per doctor per day
- Returns next available number
generate_receipt_number():
- Format: INV-YYYYMMDD-XXXXX
4. TRIGGERS:
- Auto-generate medical_record_number on patient insert
- Auto-set updated_at on update
- Auto-generate queue_number on appointment insert
5. ROW LEVEL SECURITY POLICIES:
For patients table:
- Patients can view/update own data (via user_id)
- Staff (admin, doctor, nurse, receptionist) can view all
- Only admin/receptionist can insert/delete
For appointments table:
- Patients can view own appointments
- Patients can insert (booking)
- Staff can view all
- Only staff can update status
For medical_records table:
- Patients can view own records
- Only doctors can insert/update
- Admin can view all
For billings table:
- Patients can view own billings
- Staff can view all
- Only admin/receptionist can insert/update
For doctors and schedules:
- Everyone can view (public info)
- Only admin can modify
6. INDEXES:
- patients: medical_record_number, nik, phone
- appointments: patient_id, doctor_id, appointment_date, status
- medical_records: patient_id, appointment_id
- billings: patient_id, appointment_id, payment_status
7. SAMPLE DATA:
- 3 sample doctors with different specializations
- Schedules for each doctor
- 5 sample patients
- A few sample appointments
Output as complete SQL that I can copy-paste into Supabase SQL Editor.
Include comments explaining each section."
Agent akan generate SQL yang comprehensive.
Setelah dapat SQL-nya:
- Buka Supabase Dashboard
- Go to SQL Editor
- Paste semua SQL
- Click "Run"
- Verify di Table Editor semua tables terbuat
Step 5: Update Environment Variables
UPDATE .env.local:
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
# App
NEXT_PUBLIC_APP_URL=http://localhost:3000
Step 6: Verify Setup
PROMPT 4 — VERIFY SETUP:
"Let's verify the setup is working correctly.
1. Create a simple test page at src/app/(public)/test/page.tsx that:
- Fetches doctors from Supabase
- Displays them in a list
- Shows loading state
- Handles errors
2. Use the server client to fetch data
3. Display: doctor name, specialization, consultation fee
After creating, open /test in browser and verify:
- Page loads without error
- Doctors data is fetched (should show sample data)
- Console has no errors
Show me screenshot of the working page."
Setup Checkpoint
SETUP COMPLETE CHECKLIST:
□ Supabase project created
□ Next.js project initialized
□ All dependencies installed
□ shadcn/ui components added
□ Folder structure created
□ Supabase clients configured
□ Middleware setup for protected routes
□ Database schema created
□ RLS policies active
□ Sample data inserted
□ Environment variables set
□ Test page works — can fetch data
If all checked, you're ready for the next phase! ✓
Bagian 3: Public Website — Landing, Doctors, Booking
Sekarang kita build bagian yang user-facing. Website publik ini yang akan dilihat calon pasien ketika mereka mau booking appointment.
Phase 3.1: Landing Page
Landing page adalah first impression. Harus professional dan informative.
PROMPT 5 — LANDING PAGE:
"Create a professional landing page for Rumah Sakit XYZ.
Location: src/app/(public)/page.tsx
Sections:
1. HERO SECTION:
- Full-width with gradient blue background
- Hospital name: 'Rumah Sakit XYZ'
- Tagline: 'Melayani dengan Sepenuh Hati'
- Sub-tagline: 'Fasilitas modern, dokter berpengalaman, pelayanan 24 jam'
- Two CTA buttons:
• 'Booking Online' (primary, link to /booking)
• 'Lihat Jadwal Dokter' (secondary/outline, link to /doctors)
- Optional: Background pattern or medical illustration
2. STATISTICS BAR:
- Row of 4 stats with icons:
• 50+ Dokter Spesialis
• 10,000+ Pasien Dilayani
• 24 Jam Layanan IGD
• 15 Tahun Pengalaman
3. LAYANAN SECTION:
- Title: 'Layanan Kami'
- Grid 6 cards (3x2 on desktop, 2x3 on tablet, 1x6 on mobile):
• Rawat Jalan - icon: Stethoscope
• Rawat Inap - icon: Bed
• IGD 24 Jam - icon: Ambulance
• Laboratorium - icon: FlaskConical
• Radiologi - icon: Scan
• Farmasi - icon: Pill
- Each card: icon, title, short description
4. WHY CHOOSE US SECTION:
- Title: 'Mengapa Memilih Kami?'
- 4 feature cards:
• Dokter Berpengalaman - 'Tim dokter spesialis tersertifikasi'
• Fasilitas Modern - 'Peralatan medis terkini dan terawat'
• Harga Transparan - 'Informasi biaya jelas tanpa biaya tersembunyi'
• Pelayanan Prima - 'Mengutamakan kenyamanan dan kepuasan pasien'
5. DOCTORS PREVIEW SECTION:
- Title: 'Dokter Kami'
- Subtitle: 'Ditangani oleh dokter spesialis berpengalaman'
- Grid showing 4 doctors (fetch from Supabase, limit 4, where is_active=true)
- Each card: photo (or avatar placeholder), name, specialization
- 'Lihat Semua Dokter' button linking to /doctors
6. CTA SECTION:
- Background: light blue
- Title: 'Butuh Konsultasi?'
- Subtitle: 'Booking jadwal dengan dokter kami sekarang'
- 'Booking Sekarang' button
7. FOOTER:
- 4 columns:
• Logo & short description
• Quick Links: Beranda, Dokter, Booking, Cek Antrian
• Layanan: Rawat Jalan, Rawat Inap, IGD, Lab
• Kontak: Address, Phone, Email, Jam operasional
- Bottom: Copyright 2025 Rumah Sakit XYZ
Create separate components where appropriate:
- components/shared/Header.tsx (navbar with logo and links)
- components/shared/Footer.tsx
Use Tailwind CSS with:
- Primary color: blue-600
- Rounded corners, subtle shadows
- Smooth hover transitions
- Fully responsive
Show me the complete landing page in browser."
Expected Result:
- Professional healthcare website appearance
- Clear navigation
- Mobile responsive
- Real doctors data dari Supabase
Phase 3.2: Doctors Page
PROMPT 6 — DOCTORS LIST PAGE:
"Create doctors listing page at src/app/(public)/doctors/page.tsx
Features:
1. PAGE HEADER:
- Title: 'Dokter Kami'
- Subtitle: 'Temukan dokter spesialis sesuai kebutuhan Anda'
2. FILTER SECTION:
- Search input: 'Cari nama dokter...'
- Specialization dropdown: 'Semua Spesialisasi' + list from data
- Availability toggle: 'Tersedia hari ini'
- Filters should work client-side with state
3. DOCTORS GRID:
- Responsive: 1 col mobile, 2 cols tablet, 3 cols desktop
- Each doctor card shows:
• Photo (200x200, rounded, placeholder if no photo)
• Name (bold, lg)
• Specialization (text-muted)
• Consultation fee: 'Rp XXX.XXX' (formatted)
• Rating: 5 stars placeholder
• 'Lihat Jadwal' button
4. DOCTOR DETAIL SHEET/MODAL:
- When 'Lihat Jadwal' clicked, open Sheet from right side
- Contains:
• Large photo
• Full name and specialization
• License number (STR)
• Bio paragraph
• Consultation fee
• Schedule table:
| Hari | Jam | Ruangan |
| Senin | 08:00-12:00 | Poli A |
| Rabu | 13:00-17:00 | Poli A |
• 'Booking Sekarang' button (links to /booking?doctor=id)
5. STATES:
- Loading: Skeleton cards (3-6 cards)
- Empty: 'Tidak ada dokter ditemukan' with illustration
- Error: Error message with retry button
6. DATA FETCHING:
- Fetch doctors with their schedules (join)
- Server component for initial load
- Client-side filtering
Create helper function to format currency: formatRupiah(number)
Create helper function to get day name: getDayName(dayNumber)
Test:
- All doctors display correctly
- Search filters by name
- Specialization filter works
- Schedule sheet opens with correct data
- Booking button has correct doctor ID in URL
Show me the page with filters working."
Helper Functions yang Agent Generate:
// src/lib/utils.ts
export function formatRupiah(amount: number): string {
return new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(amount)
}
export function getDayName(dayNumber: number): string {
const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
return days[dayNumber] || ''
}
export function formatTime(time: string): string {
return time.slice(0, 5) // "08:00:00" -> "08:00"
}
Phase 3.3: Booking Flow
Ini bagian paling complex di public website — multi-step booking form.
PROMPT 7 — BOOKING PAGE:
"Create multi-step booking flow at src/app/(public)/booking/page.tsx
Use URL search params for state: /booking?step=1&doctor=xxx
STEP 1: SELECT DOCTOR
─────────────────────
- If doctor ID in URL, pre-select and skip to step 2
- Otherwise show doctor selection grid (similar to doctors page)
- Simplified cards: photo, name, specialization, fee
- 'Pilih' button on each
- On select: update URL ?step=2&doctor=xxx
STEP 2: SELECT SCHEDULE
─────────────────────
- Show selected doctor info (small card)
- Date picker: Show next 7 days as selectable buttons
- When date selected, show available time slots:
• Fetch schedule for that day_of_week
• Calculate available slots based on existing appointments
• Each slot shows: time and remaining quota
• Disabled if quota full
• Format: '08:00 - 12:00 (Sisa: 5 slot)'
- On select: update URL ?step=3&doctor=xxx&date=YYYY-MM-DD&schedule=xxx
STEP 3: PATIENT INFORMATION
─────────────────────
- Check if user is logged in:
If logged in AND is patient:
- Fetch their patient data
- Show pre-filled form (editable)
- 'Lanjutkan' button
If logged in but no patient record:
- Show full registration form
If NOT logged in:
- Show two options:
• 'Login untuk booking lebih cepat' button
• 'Lanjutkan tanpa login' (shows full form)
- Patient form fields:
• Nama Lengkap* (text)
• NIK* (text, 16 digits, validate)
• Tanggal Lahir* (date picker)
• Jenis Kelamin* (radio: Laki-laki/Perempuan)
• No. Telepon/WhatsApp* (text, validate format 08xxx)
• Email (text, optional)
• Alamat* (textarea)
• Jenis Pembayaran* (select: Umum/BPJS/Asuransi Swasta)
• No. BPJS/Asuransi (text, required if not Umum)
- Use react-hook-form with zod validation
- Show validation errors inline
- On valid submit: ?step=4
STEP 4: KELUHAN
─────────────────────
- Textarea: 'Keluhan atau gejala yang dirasakan'
- Optional file upload: 'Surat rujukan (jika ada)'
- 'Lanjutkan' button
- On submit: ?step=5
STEP 5: KONFIRMASI
─────────────────────
- Summary card showing:
• Dokter: [name] - [specialization]
• Tanggal: [formatted date]
• Jam: [time slot]
• Biaya Konsultasi: Rp [amount]
• Data Pasien: [name, phone, insurance type]
• Keluhan: [complaint preview]
- Checkbox: 'Saya menyetujui syarat dan ketentuan yang berlaku'*
- 'Konfirmasi Booking' button (disabled until checkbox checked)
- On submit:
1. Create patient record (if new)
2. Create appointment with queue_number
3. Redirect to success page
SUCCESS PAGE (/booking/success?id=xxx):
─────────────────────
- Success icon (CheckCircle)
- 'Booking Berhasil!'
- Card showing:
• Nomor Antrian: A-015 (large, prominent)
• Kode Booking: [appointment_id short]
• Tanggal: [date]
• Dokter: [name]
• Jam: [time]
- Action buttons:
• 'Simpan ke Kalender' (generate .ics file)
• 'Bagikan via WhatsApp' (wa.me link with booking details)
• 'Cek Status Antrian' (link to /antrian?code=xxx)
• 'Kembali ke Beranda'
STEP INDICATOR:
- Show progress at top: 1-2-3-4-5
- Active step highlighted
- Completed steps with checkmark
- Can click completed steps to go back
Create reusable components:
- components/booking/StepIndicator.tsx
- components/booking/DoctorSelectStep.tsx
- components/booking/ScheduleSelectStep.tsx
- components/booking/PatientFormStep.tsx
- components/booking/ComplaintStep.tsx
- components/booking/ConfirmationStep.tsx
- components/booking/BookingSuccess.tsx
Handle loading states and errors at each step.
Test complete flow:
1. Select doctor
2. Select date and time
3. Fill patient info (as guest)
4. Add complaint
5. Confirm and submit
6. See success page with queue number
Show me screenshots of each step."
Phase 3.4: Queue Check Page
Real-time queue checking — ini yang bikin experience lebih baik dari sistem manual.
PROMPT 8 — QUEUE STATUS PAGE:
"Create queue status page at src/app/(public)/antrian/page.tsx
Features:
1. SEARCH SECTION:
- Title: 'Cek Status Antrian'
- Subtitle: 'Masukkan kode booking atau nomor telepon'
- Input field with search button
- Can search by:
• Appointment ID (partial match)
• Patient phone number
2. RESULT DISPLAY (when found):
- Patient name (masked for privacy): 'J***n D**e'
- Doctor name and specialization
- Date and scheduled time
- Queue number: LARGE display 'A-015'
- Current status badge:
• 'Menunggu' (yellow)
• 'Segera Dipanggil' (orange) - if within 3 of current
• 'Sedang Dilayani' (green)
• 'Selesai' (gray)
• 'Dibatalkan' (red)
- Live info card:
• Antrian saat ini: A-012
• Posisi Anda: 3 antrian lagi
• Estimasi waktu: ~15 menit
- Auto-refresh indicator: 'Update otomatis setiap 10 detik'
3. NOT FOUND STATE:
- 'Booking tidak ditemukan'
- 'Pastikan kode booking atau nomor telepon benar'
- Try again button
4. REALTIME UPDATES:
- Subscribe to Supabase Realtime
- Listen for changes on appointments table
- Filter by: doctor_id on same date
- When queue updates, recalculate position
- Show toast notification when status changes
5. NOTIFICATION:
- When position <= 3, show alert:
'Perhatian: Antrian Anda hampir tiba!'
- Optional: Request browser notification permission
Implementation:
- Use Supabase Realtime subscription
- Client component for live updates
- Calculate queue position based on:
• Count appointments with same doctor, same date
• Status = 'waiting' or 'in_progress'
• Queue number < patient's queue number
Create helper:
maskName(fullName: string): string
// 'John Doe' -> 'J***n D**e'
Test:
1. Search with valid phone number
2. Verify correct appointment shows
3. Update appointment status in Supabase dashboard
4. Verify page auto-updates without refresh
5. Test not found state
Show me the working realtime updates."
Realtime Subscription Code yang Agent Generate:
// Example realtime subscription
useEffect(() => {
if (!appointment) return
const channel = supabase
.channel('queue-updates')
.on(
'postgres_changes',
{
event: 'UPDATE',
schema: 'public',
table: 'appointments',
filter: `doctor_id=eq.${appointment.doctor_id}`,
},
(payload) => {
// Refetch queue position
fetchQueuePosition()
}
)
.subscribe()
return () => {
supabase.removeChannel(channel)
}
}, [appointment])
Public Website Checkpoint
PUBLIC WEBSITE COMPLETE:
Pages:
├── / (Landing page)
├── /doctors (Doctors list with filter)
├── /booking (Multi-step booking flow)
│ └── /booking/success (Booking confirmation)
└── /antrian (Real-time queue check)
Components Created:
├── Header (navigation)
├── Footer
├── DoctorCard
├── DoctorDetailSheet
├── StepIndicator
├── Booking step components
└── QueueStatus
Features Working:
□ Landing page displays correctly
□ Doctors load from database
□ Search and filter doctors work
□ Doctor schedule modal works
□ Booking flow all 5 steps work
□ Patient can submit booking
□ Queue number generated
□ Success page shows details
□ Queue check with realtime updates
Test Scenarios:
□ Complete booking as guest
□ Search queue by phone
□ Verify realtime queue updates
Mini Tips
"Public website adalah 'storefront' rumah sakit di dunia digital. First impression matters. Pastikan loading cepat, responsive di mobile (banyak orang buka dari HP), dan informasi yang dibutuhkan mudah ditemukan. Kalau calon pasien struggle di website, mereka akan telepon atau datang langsung — yang artinya digitalisasi gak efektif."
Di bagian selanjutnya, kita akan build Authentication system dan Patient Portal — area dimana pasien bisa login dan manage booking mereka sendiri. 🏥
Bagian 4: Authentication & Patient Portal
Sekarang kita build sistem authentication dan area khusus pasien. Pasien yang sudah register bisa login, lihat riwayat kunjungan, dan manage booking mereka.
Phase 4.1: Authentication System
Supabase Auth makes authentication relatively straightforward, tapi kita perlu setup dengan benar untuk Next.js App Router.
PROMPT 9 — AUTHENTICATION PAGES:
"Create authentication system with Supabase Auth.
FILES TO CREATE:
1. src/app/(auth)/layout.tsx
- Centered layout for auth pages
- Logo at top
- Card container for form
- Footer link back to home
2. src/app/(auth)/login/page.tsx
LOGIN PAGE:
- Title: 'Masuk ke Akun'
- Form fields:
• Email* (input type email)
• Password* (input type password, with show/hide toggle)
- 'Masuk' button (full width)
- 'Lupa Password?' link (to /forgot-password)
- Divider: 'atau'
- 'Login dengan Google' button (optional, if configured)
- Bottom text: 'Belum punya akun? Daftar' (link to /register)
On submit:
- Call supabase.auth.signInWithPassword()
- If success, redirect based on role:
• admin/doctor/nurse/receptionist → /dashboard
• patient → /portal
- If error, show toast message
3. src/app/(auth)/register/page.tsx
REGISTER PAGE:
- Title: 'Buat Akun Baru'
- Form fields:
• Nama Lengkap*
• Email*
• No. Telepon*
• Password* (min 8 chars, show requirements)
• Konfirmasi Password*
- Checkbox: 'Saya menyetujui Syarat dan Ketentuan'
- 'Daftar' button
- Bottom: 'Sudah punya akun? Masuk'
On submit:
- Call supabase.auth.signUp() with email/password
- Create profile record with role='patient'
- Show success message: 'Akun berhasil dibuat! Silakan cek email untuk verifikasi.'
- Redirect to /login
4. src/app/(auth)/forgot-password/page.tsx
FORGOT PASSWORD PAGE:
- Title: 'Lupa Password'
- Description: 'Masukkan email Anda untuk reset password'
- Email input
- 'Kirim Link Reset' button
- Back to login link
On submit:
- Call supabase.auth.resetPasswordForEmail()
- Show success: 'Link reset password telah dikirim ke email Anda'
5. src/app/(auth)/reset-password/page.tsx
RESET PASSWORD PAGE:
- Title: 'Reset Password'
- New password input
- Confirm password input
- 'Update Password' button
On submit:
- Call supabase.auth.updateUser({ password })
- Redirect to /login with success message
6. src/app/auth/callback/route.ts
AUTH CALLBACK ROUTE:
- Handle OAuth callbacks
- Handle email verification
- Exchange code for session
- Redirect appropriately
7. src/app/auth/confirm/route.ts
EMAIL CONFIRMATION ROUTE:
- Handle email confirmation tokens
- Verify and redirect
8. Update src/middleware.ts:
- Check auth for protected routes
- Redirect logic:
• Unauthenticated + protected route → /login
• Authenticated + auth pages → appropriate dashboard
- Role-based redirects
9. Create src/hooks/useAuth.ts:
- Custom hook for auth state
- Get current user
- Get user profile with role
- Loading state
- Sign out function
10. Create src/components/shared/UserNav.tsx:
- User avatar dropdown for header
- Show user name and email
- Links: Profile, Settings
- Sign out button
Use react-hook-form with zod validation.
Show loading states on buttons.
Handle all error cases with toast notifications.
Test:
1. Register new account
2. Check email verification (check Supabase dashboard if email not configured)
3. Login with new account
4. Verify redirect to /portal
5. Test forgot password flow
6. Test logout
Show me login and register pages working."
Auth Hook yang Agent Generate:
// src/hooks/useAuth.ts
'use client'
import { useEffect, useState } from 'react'
import { User } from '@supabase/supabase-js'
import { createClient } from '@/lib/supabase/client'
type Profile = {
id: string
role: 'admin' | 'doctor' | 'nurse' | 'receptionist' | 'patient'
full_name: string
phone: string
avatar_url: string | null
}
export function useAuth() {
const [user, setUser] = useState<User | null>(null)
const [profile, setProfile] = useState<Profile | null>(null)
const [loading, setLoading] = useState(true)
const supabase = createClient()
useEffect(() => {
// Get initial session
supabase.auth.getSession().then(({ data: { session } }) => {
setUser(session?.user ?? null)
if (session?.user) {
fetchProfile(session.user.id)
} else {
setLoading(false)
}
})
// Listen for auth changes
const { data: { subscription } } = supabase.auth.onAuthStateChange(
async (event, session) => {
setUser(session?.user ?? null)
if (session?.user) {
await fetchProfile(session.user.id)
} else {
setProfile(null)
setLoading(false)
}
}
)
return () => subscription.unsubscribe()
}, [])
async function fetchProfile(userId: string) {
const { data } = await supabase
.from('profiles')
.select('*')
.eq('id', userId)
.single()
setProfile(data)
setLoading(false)
}
async function signOut() {
await supabase.auth.signOut()
window.location.href = '/'
}
return {
user,
profile,
loading,
signOut,
isAdmin: profile?.role === 'admin',
isDoctor: profile?.role === 'doctor',
isStaff: ['admin', 'doctor', 'nurse', 'receptionist'].includes(profile?.role || ''),
isPatient: profile?.role === 'patient',
}
}
Phase 4.2: Patient Portal
Portal khusus untuk pasien yang sudah login.
PROMPT 10 — PATIENT PORTAL LAYOUT:
"Create patient portal layout and pages.
1. src/app/(portal)/layout.tsx
PORTAL LAYOUT:
- Header:
• Logo (link to /)
• Nav links: Dashboard, Appointments, Rekam Medis, Profil
• User dropdown (avatar, name, logout)
- Sidebar (desktop):
• Navigation menu with icons
• Active state styling
- Mobile: Bottom navigation or hamburger menu
- Main content area with padding
- Footer minimal
2. src/app/(portal)/portal/page.tsx
PATIENT DASHBOARD:
- Welcome message: 'Selamat datang, [name]!'
- Quick Stats Cards (row):
• Total Kunjungan: [count]
• Appointment Mendatang: [count]
• Tagihan Pending: [count]
- Upcoming Appointments Section:
• Title: 'Jadwal Mendatang'
• List next 3 appointments
• Each shows: date, time, doctor, status
• 'Lihat Semua' link
• Empty state if none
- Quick Actions:
• 'Booking Baru' button → /booking
• 'Cek Antrian' button → /antrian
- Recent Medical Records:
• Last 3 records
• Date, doctor, diagnosis preview
• 'Lihat Semua' link
3. src/app/(portal)/portal/appointments/page.tsx
APPOINTMENTS LIST:
- Title: 'Riwayat Kunjungan'
- Tabs:
• Mendatang (upcoming, status: booked/waiting)
• Selesai (completed)
• Dibatalkan (cancelled)
- Each appointment card:
• Date and time
• Doctor name + specialization
• Queue number
• Status badge
• Complaint preview
• Actions:
- 'Lihat Detail' → opens detail modal
- 'Batalkan' (only for booked, with confirmation)
- Appointment Detail Modal:
• Full appointment info
• If completed: link to medical record
• If has billing: link to billing
- Empty state per tab
- Loading skeletons
4. src/app/(portal)/portal/records/page.tsx
MEDICAL RECORDS:
- Title: 'Rekam Medis'
- Filter:
• Date range picker
• Doctor filter (dropdown)
- Records list:
• Date
• Doctor name
• Diagnosis (truncated)
• 'Lihat Detail' button
- Record Detail Modal/Page:
• Visit date and doctor
• Vital signs (if recorded)
• Diagnosis
• Treatment
• Prescription list:
| Obat | Dosis | Frekuensi | Durasi |
• Attachments (downloadable)
• 'Download PDF' button
- Empty state if no records
5. src/app/(portal)/portal/profile/page.tsx
PROFILE PAGE:
- Profile card:
• Avatar (with upload option)
• Name, email, phone
• Medical record number (read-only)
- Edit Profile Form:
• Full name
• Phone
• Email (read-only or with verification)
• Address
• Emergency contact
- Change Password Section:
• Current password
• New password
• Confirm new password
• 'Update Password' button
- Notification Preferences:
• Email notifications toggle
• WhatsApp notifications toggle (future)
- Danger Zone:
• 'Hapus Akun' button (with confirmation)
IMPORTANT:
- All data fetched must be filtered by current user's patient_id
- Use RLS policies for security (already set up)
- Handle case where user has no patient record yet
Create components:
- components/portal/AppointmentCard.tsx
- components/portal/RecordCard.tsx
- components/portal/ProfileForm.tsx
Test:
1. Login as patient
2. View dashboard with real data
3. Navigate to appointments
4. View appointment detail
5. Navigate to medical records
6. Update profile
Show me the patient dashboard with real data."
Phase 4.3: Link Patient Account
Ketika user register, mereka belum punya patient record. Kita perlu handle ini.
PROMPT 11 — LINK PATIENT ACCOUNT:
"Handle scenario where logged-in user doesn't have a patient record yet.
1. Create src/app/(portal)/portal/setup/page.tsx
PATIENT SETUP PAGE:
- Show when user has no linked patient record
- Title: 'Lengkapi Data Anda'
- Description: 'Untuk melanjutkan, lengkapi data pasien Anda'
- Two options:
Option A - 'Saya Pasien Baru':
- Full patient registration form
- On submit: create new patient with user_id linked
Option B - 'Saya Sudah Pernah Berobat':
- Search existing patient by:
• No. Rekam Medis
• NIK
• No. Telepon + Tanggal Lahir
- If found and not linked to any user:
• Show patient preview (name, RM number)
• 'Hubungkan Akun' button
• Link patient record to current user
- If already linked: show error message
- If not found: suggest create new
2. Update portal layout:
- Check if user has patient record
- If not, redirect to /portal/setup
- Store patient_id in context for easy access
3. Create PatientContext:
- Provide current patient data throughout portal
- Include patient_id, medical_record_number, etc.
- Refresh on updates
Test:
1. Register new user
2. Login → redirected to /portal/setup
3. Complete patient form
4. Redirected to /portal dashboard
5. All data now shows correctly
Show me the setup flow working."
Portal Checkpoint
AUTHENTICATION & PORTAL COMPLETE:
Auth Pages:
├── /login
├── /register
├── /forgot-password
├── /reset-password
└── /auth/callback
Portal Pages:
├── /portal (dashboard)
├── /portal/appointments
├── /portal/records
├── /portal/profile
└── /portal/setup (for new users)
Features Working:
□ User can register
□ Email verification (if configured)
□ User can login
□ Role-based redirect works
□ User can logout
□ Password reset works
□ Portal dashboard shows user data
□ Appointments list with tabs
□ Appointment detail modal
□ Cancel appointment works
□ Medical records list
□ Record detail view
□ Profile edit works
□ Password change works
□ New user setup flow works
□ Link existing patient works
Bagian 5: Admin Dashboard — Part 1
Sekarang kita masuk ke area yang digunakan staff rumah sakit. Dashboard admin ini yang akan jadi "cockpit" operasional sehari-hari.
Phase 5.1: Dashboard Layout
PROMPT 12 — ADMIN DASHBOARD LAYOUT:
"Create admin dashboard layout with sidebar navigation.
1. src/app/(dashboard)/layout.tsx
DASHBOARD LAYOUT:
Structure:
┌────────────────────────────────────────────────────────┐
│ HEADER │
│ [≡] Logo Search... 🔔 👤 Admin │
├──────────┬─────────────────────────────────────────────┤
│ │ │
│ SIDEBAR │ MAIN CONTENT │
│ │ │
│ Dashboard│ │
│ Pasien │ │
│ Jadwal │ │
│ Dokter │ │
│ Billing │ │
│ Laporan │ │
│ │ │
│ │ │
│ ──────── │ │
│ Settings │ │
│ │ │
└──────────┴─────────────────────────────────────────────┘
SIDEBAR NAVIGATION:
- Dashboard (LayoutDashboard icon) → /dashboard
- Pasien (Users icon) → /dashboard/patients
- Appointments (Calendar icon) → /dashboard/appointments
- Dokter (Stethoscope icon) → /dashboard/doctors
- Jadwal (Clock icon) → /dashboard/schedules
- Billing (Receipt icon) → /dashboard/billing
- Laporan (BarChart3 icon) → /dashboard/reports
- Separator
- Pengaturan (Settings icon) → /dashboard/settings
SIDEBAR FEATURES:
- Collapsible (toggle with button)
- Remember collapsed state in localStorage
- Active item highlighted
- Icons always visible, text hidden when collapsed
- Mobile: overlay sidebar with backdrop
HEADER:
- Hamburger menu (mobile)
- Logo/brand
- Global search input
- Notification bell with badge
- User dropdown:
• Avatar + name
• Role badge
• Profile link
• Settings link
• Logout
2. Create components:
- components/dashboard/Sidebar.tsx
- components/dashboard/Header.tsx
- components/dashboard/NavItem.tsx
- components/dashboard/UserDropdown.tsx
- components/dashboard/SearchCommand.tsx (command palette style)
3. Role-based navigation:
- Admin: sees all menu items
- Doctor: Dashboard, Appointments (own), Patients (limited)
- Nurse: Dashboard, Appointments, Patients
- Receptionist: Dashboard, Patients, Appointments, Billing
4. Breadcrumb component:
- Shows current location
- Clickable path segments
5. Page header component:
- Title
- Description (optional)
- Actions slot (for buttons)
Use shadcn components:
- Sheet for mobile sidebar
- DropdownMenu for user menu
- Command for search
- Tooltip for collapsed sidebar icons
Test:
- Sidebar expands/collapses
- Navigation works
- Active state shows correctly
- Mobile sidebar works
- User dropdown works
- Breadcrumb shows correct path
Show me the responsive dashboard layout."
Phase 5.2: Dashboard Home
PROMPT 13 — DASHBOARD HOME PAGE:
"Create admin dashboard home page at src/app/(dashboard)/dashboard/page.tsx
LAYOUT:
1. PAGE HEADER:
- Title: 'Dashboard'
- Subtitle: 'Selamat datang kembali, [name]'
- Today's date
2. STATS CARDS ROW (4 cards):
Card 1 - Pasien Hari Ini:
- Icon: Users (blue)
- Count: [number]
- Subtext: '+[n] dari kemarin' (green if positive, red if negative)
Card 2 - Appointment Hari Ini:
- Icon: Calendar (green)
- Count: [number]
- Subtext: '[n] menunggu, [n] selesai'
Card 3 - Sedang Menunggu:
- Icon: Clock (yellow)
- Count: [number]
- Subtext: 'Rata-rata tunggu: [n] menit'
Card 4 - Pendapatan Hari Ini:
- Icon: Wallet (purple)
- Amount: Rp [formatted]
- Subtext: '[n] transaksi'
3. MAIN CONTENT (2 columns on desktop):
LEFT COLUMN (wider):
Today's Queue Section:
- Title: 'Antrian Hari Ini'
- Filter dropdown: by doctor
- Real-time table:
| No | Pasien | Dokter | Jam | Status | Aksi |
| A-001 | John D. | Dr. Sari | 08:00 | Menunggu | [Panggil] |
| A-002 | Jane D. | Dr. Sari | 08:15 | Dilayani | [Selesai] |
- Status badges with colors
- Action buttons:
• 'Panggil' → changes to 'waiting'
• 'Mulai' → changes to 'in_progress'
• 'Selesai' → changes to 'completed'
- Subscribe to realtime updates
RIGHT COLUMN (narrower):
Quick Actions:
- 'Daftar Pasien Baru' button → opens modal
- 'Buat Appointment' button → opens modal
- 'Cari Pasien' button → focuses search
Recent Activity Feed:
- Title: 'Aktivitas Terbaru'
- List of last 10 activities:
• '[09:15] Pasien John Doe check-in'
• '[09:10] Dr. Sari memulai konsultasi'
• '[09:05] Pembayaran Rp 150.000 diterima'
- Each with timestamp and description
- 'Lihat Semua' link
4. BOTTOM SECTION:
Appointments Chart (optional):
- Line chart showing appointments last 7 days
- Using recharts or chart.js
DATA FETCHING:
- Server component for initial data
- Client components for real-time updates
- Aggregate queries for stats:
• COUNT appointments WHERE date = today
• COUNT appointments WHERE date = today AND status = 'waiting'
• SUM billings WHERE date = today AND status = 'paid'
Create reusable components:
- components/dashboard/StatsCard.tsx
- components/dashboard/QueueTable.tsx
- components/dashboard/ActivityFeed.tsx
- components/dashboard/QuickActions.tsx
Test:
1. Stats show correct counts
2. Queue table shows today's appointments
3. Real-time: update appointment status in Supabase
4. Queue table updates without refresh
5. Activity feed shows recent items
Show me the dashboard with real data."
Phase 5.3: Patient Management
PROMPT 14 — PATIENT MANAGEMENT:
"Create patient management page at src/app/(dashboard)/dashboard/patients/page.tsx
FEATURES:
1. PAGE HEADER:
- Title: 'Data Pasien'
- 'Tambah Pasien' button (opens modal)
2. SEARCH & FILTER BAR:
- Search input: 'Cari nama, No. RM, NIK, atau telepon...'
- Filter by insurance type: All, Umum, BPJS, Asuransi
- Date range: registration date
- 'Reset Filter' button
3. DATA TABLE:
Columns:
| No. RM | Nama | NIK | Telepon | Asuransi | Terdaftar | Aksi |
Features:
- Sortable columns (click header)
- Pagination (20 per page)
- Show total count: 'Menampilkan 1-20 dari 150 pasien'
- Row click opens detail drawer
Actions column (dropdown):
- Lihat Detail
- Edit
- Buat Appointment
- Hapus (with confirmation)
4. ADD/EDIT PATIENT MODAL:
Form sections:
Data Pribadi:
- Nama Lengkap*
- NIK* (16 digits validation)
- Tanggal Lahir*
- Jenis Kelamin* (radio)
- Golongan Darah (select)
Kontak:
- No. Telepon* (format validation)
- Email
- Alamat* (textarea)
Asuransi:
- Jenis Pembayaran* (select)
- No. BPJS/Asuransi (required if not Umum)
Medis:
- Alergi (tags input, multiple)
Kontak Darurat:
- Nama
- Telepon
- Hubungan
For new patient:
- No. RM auto-generated (shown as preview)
Buttons:
- 'Batal' (closes modal)
- 'Simpan' (submits form)
5. PATIENT DETAIL DRAWER:
Opens from right side when clicking patient row
Header:
- Patient name (large)
- No. RM badge
- Status badge (if any)
- Edit button
Tabs:
Tab 1 - Informasi:
- All patient details in organized sections
- Two-column layout for details
Tab 2 - Kunjungan:
- List of appointments
- Date, doctor, status
- Click to see detail
Tab 3 - Rekam Medis:
- List of medical records
- Date, diagnosis preview
- Click to see full record
Tab 4 - Billing:
- List of bills
- Date, amount, status
- Click to see detail
Quick actions:
- 'Buat Appointment' button
- 'Cetak Kartu Pasien' button
6. DELETE CONFIRMATION:
- Alert dialog
- 'Apakah Anda yakin ingin menghapus pasien ini?'
- Warning: 'Data yang sudah dihapus tidak dapat dikembalikan'
- 'Batal' and 'Hapus' buttons
7. BULK ACTIONS (optional):
- Checkbox column
- Select all
- Bulk delete
- Export selected
8. EXPORT:
- 'Export Excel' button
- Downloads current filtered data as .xlsx
CREATE COMPONENTS:
- components/dashboard/patients/PatientTable.tsx
- components/dashboard/patients/PatientForm.tsx
- components/dashboard/patients/PatientDetail.tsx
- components/dashboard/patients/PatientFilters.tsx
VALIDATION:
- NIK: exactly 16 digits
- Phone: starts with 08, 10-13 digits
- Email: valid format if provided
- Required fields marked with *
Test:
1. Search finds patient by name
2. Search finds patient by RM number
3. Search finds patient by phone
4. Filter by insurance works
5. Add new patient → appears in list
6. Edit patient → changes saved
7. Delete patient → removed from list
8. Pagination works
9. Detail drawer shows correct data
Show me the patient management with CRUD working."
Phase 5.4: Quick Registration Modal
Untuk daftar pasien baru dari dashboard dengan cepat.
PROMPT 15 — QUICK REGISTRATION:
"Create quick patient registration that can be triggered from anywhere.
1. Create components/dashboard/QuickRegisterModal.tsx
MODAL CONTENT:
- Title: 'Daftar Pasien Baru'
- Simplified form (essential fields only):
• Nama Lengkap*
• NIK*
• Tanggal Lahir*
• Jenis Kelamin*
• No. Telepon*
• Jenis Pembayaran*
- Preview: 'No. RM: RM-202501-XXXXX'
- Checkbox: 'Langsung buat appointment'
- 'Daftar' button
On success:
- If checkbox checked → open appointment modal with patient selected
- If not → close modal, show success toast
- Refresh patient list if on patients page
2. Create components/dashboard/QuickAppointmentModal.tsx
MODAL CONTENT:
- Title: 'Buat Appointment'
- If patient pre-selected: show patient card (name, RM)
- If not: patient search input (autocomplete)
Form:
- Pilih Dokter* (select with search)
- Tanggal* (date picker, min today)
- Jam* (select available slots)
- Keluhan (textarea)
On selecting doctor + date:
- Fetch available slots
- Show remaining quota each slot
'Buat Appointment' button
On success:
- Show queue number
- Option to print ticket
- Close modal
3. Add trigger buttons:
- Dashboard quick actions use these modals
- Patient detail drawer 'Buat Appointment' uses this
- Header has '+' button for quick actions
4. Create print ticket function:
- Generate printable queue ticket
- Patient name, date, doctor, queue number
- Barcode/QR (optional)
- Open in new window for printing
Test:
1. Quick register from dashboard
2. Register with 'langsung buat appointment' checked
3. Appointment modal opens with patient pre-filled
4. Create appointment
5. Queue number generated
6. Print ticket works
Show me the quick registration flow."
Dashboard Part 1 Checkpoint
ADMIN DASHBOARD PART 1 COMPLETE:
Layout:
├── Responsive sidebar navigation
├── Header with search and user menu
├── Breadcrumb navigation
├── Role-based menu visibility
Pages:
├── /dashboard (home with stats and queue)
├── /dashboard/patients (CRUD)
Features Working:
□ Sidebar collapse/expand
□ Mobile sidebar
□ User dropdown with logout
□ Dashboard stats cards
□ Today's queue with realtime
□ Queue status change (call, start, complete)
□ Activity feed
□ Patient list with search
□ Patient filter by insurance
□ Patient pagination
□ Add new patient
□ Edit patient
□ Delete patient
□ Patient detail drawer
□ Patient tabs (info, visits, records, billing)
□ Quick register modal
□ Quick appointment modal
□ Print queue ticket
Mini Tips
"Admin dashboard adalah tool yang digunakan setiap hari oleh staff. Prioritaskan speed dan clarity. Pasien datang, receptionist harus bisa cari dan daftar dalam hitungan detik. Dokter harus bisa panggil pasien selanjutnya dengan satu klik. Setiap detik yang dihemat di sistem = antrian yang lebih lancar = pasien yang lebih happy."
Di bagian selanjutnya, kita akan lanjutkan Admin Dashboard dengan Appointment Management, Doctor & Schedule Management, dan Billing system. 🏥
Bagian 6: Admin Dashboard — Part 2
Lanjut ke fitur-fitur admin yang lebih spesifik: appointment management, doctor & schedule, dan billing system.
Phase 6.1: Appointment Management
Ini command center untuk mengelola semua jadwal kunjungan.
PROMPT 16 — APPOINTMENT MANAGEMENT:
"Create appointment management page at src/app/(dashboard)/dashboard/appointments/page.tsx
FEATURES:
1. PAGE HEADER:
- Title: 'Manajemen Appointment'
- 'Buat Appointment' button
2. VIEW TABS:
- Hari Ini (default) — today's appointments
- Minggu Ini — this week
- Semua — all with date filter
3. FILTER BAR:
- Date picker (for 'Semua' tab)
- Doctor filter (dropdown)
- Status filter: Semua, Menunggu, Dilayani, Selesai, Batal
- Search: patient name or RM number
4. QUEUE MANAGEMENT PANEL (for 'Hari Ini' tab):
Top section - Current Queue Display:
┌────────────────────────────────────────┐
│ ANTRIAN SAAT INI │
│ │
│ Dr. Sari Dewi - Poli Umum │
│ ┌──────────────────────┐ │
│ │ A-012 │ │
│ │ Ahmad Suryanto │ │
│ └──────────────────────┘ │
│ │
│ [◀ Sebelumnya] [Selanjutnya ▶] │
│ │
│ Panggil Manual: [___] [Panggil] │
└────────────────────────────────────────┘
- Shows currently being served (status = 'in_progress')
- Buttons to call next or go back
- Manual input to call specific number
- Updates in realtime
5. APPOINTMENTS TABLE:
Columns:
| Antrian | Waktu | Pasien | No. RM | Dokter | Status | Aksi |
- Queue number with badge
- Time slot
- Patient name (clickable → patient detail)
- Medical record number
- Doctor name
- Status with color badge:
• booked (gray) - 'Terdaftar'
• waiting (yellow) - 'Menunggu'
• in_progress (blue) - 'Dilayani'
• completed (green) - 'Selesai'
• cancelled (red) - 'Batal'
Actions dropdown:
- 'Check-in' (booked → waiting)
- 'Panggil' (waiting → in_progress)
- 'Mulai Konsultasi' → redirect to medical record form
- 'Selesai' (in_progress → completed) → redirect to billing
- 'Reschedule' → open reschedule modal
- 'Batalkan' → cancel with reason
6. APPOINTMENT DETAIL MODAL:
- Patient info card
- Appointment details (date, time, doctor, queue)
- Complaint/keluhan
- Notes (editable)
- Status history timeline
- Actions based on current status
7. RESCHEDULE MODAL:
- Current appointment info
- New date picker
- New time slot (based on doctor's schedule)
- Reason for reschedule
- 'Reschedule' button
- Notify patient option (checkbox)
8. CANCEL MODAL:
- Confirmation message
- Reason for cancellation (required)
- 'Batalkan Appointment' button
9. REALTIME UPDATES:
- Subscribe to appointments table
- Auto-refresh when status changes
- Audio notification option when new patient checks in
CREATE COMPONENTS:
- components/dashboard/appointments/QueueDisplay.tsx
- components/dashboard/appointments/AppointmentTable.tsx
- components/dashboard/appointments/AppointmentDetail.tsx
- components/dashboard/appointments/RescheduleModal.tsx
BUSINESS LOGIC:
- When status → 'completed':
- Prompt to create medical record
- Prompt to create billing
- When status → 'cancelled':
- Free up the slot quota
- Log cancellation reason
Test:
1. View today's appointments
2. Check-in patient (booked → waiting)
3. Call next (waiting → in_progress)
4. Start consultation → redirects to medical record
5. Complete → redirects to billing
6. Reschedule appointment
7. Cancel appointment
8. Realtime updates when status changes
Show me the queue management working."
Phase 6.2: Doctor & Schedule Management
PROMPT 17 — DOCTOR MANAGEMENT:
"Create doctor management at src/app/(dashboard)/dashboard/doctors/page.tsx
1. PAGE HEADER:
- Title: 'Manajemen Dokter'
- 'Tambah Dokter' button
2. DOCTORS GRID/LIST:
Toggle between grid and list view
Grid view (cards):
- Photo (large)
- Name
- Specialization
- License number (STR)
- Status badge (active/inactive)
- Consultation fee
- 'Kelola Jadwal' and 'Edit' buttons
List view (table):
| Foto | Nama | Spesialisasi | No. STR | Fee | Status | Aksi |
3. ADD/EDIT DOCTOR MODAL:
Form fields:
Akun:
- Link ke User Account* (dropdown of users with role 'doctor')
- Or create new user account
Informasi Dokter:
- Nama Lengkap* (auto-filled from user if linked)
- Spesialisasi* (select: Umum, Anak, Kandungan, Penyakit Dalam, Bedah, THT, Mata, Kulit, Gigi, Jantung, Saraf, Jiwa, dll)
- No. STR (Surat Tanda Registrasi)
- Biaya Konsultasi* (number input, Rupiah)
Profil:
- Bio (textarea)
- Foto (file upload dengan preview)
Status:
- Aktif (toggle) - inactive doctors don't appear in booking
'Simpan' button
4. DOCTOR DETAIL PAGE (/dashboard/doctors/[id]):
Header:
- Large photo
- Name and specialization
- Status badge
- Edit button
Stats cards:
- Total Pasien Bulan Ini
- Appointment Minggu Ini
- Rating Rata-rata
Tabs:
Tab 1 - Profil:
- All doctor info
- Bio
- Contact info
Tab 2 - Jadwal Praktek:
- Weekly schedule table
- 'Kelola Jadwal' button → schedule management
Tab 3 - Appointment:
- List of upcoming appointments
- Filter by date
Tab 4 - Statistik:
- Patients per month chart
- Common diagnoses (if data available)
5. DELETE DOCTOR:
- Only if no active appointments
- Soft delete (set inactive) if has history
- Confirmation dialog
Test:
1. Add new doctor
2. Upload photo
3. Edit doctor info
4. View doctor detail page
5. Toggle active/inactive
Show me doctor management working."
PROMPT 18 — SCHEDULE MANAGEMENT:
"Create schedule management at src/app/(dashboard)/dashboard/doctors/[id]/schedule/page.tsx
Also accessible from /dashboard/schedules for all doctors.
1. PAGE HEADER:
- Title: 'Jadwal Praktek - Dr. [Name]'
- Back button
- 'Tambah Jadwal' button
2. WEEKLY CALENDAR VIEW:
┌─────┬─────────┬─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐
│ │ Minggu │ Senin │ Selasa │ Rabu │ Kamis │ Jumat │ Sabtu │
├─────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤
│08:00│ │ ████████│ │ ████████│ │ ████████│ │
│ │ │ Poli A │ │ Poli A │ │ Poli A │ │
│ │ │ 20 slot │ │ 20 slot │ │ 15 slot │ │
├─────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤
│12:00│ │ │ │ │ │ │ │
├─────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤
│13:00│ │ │ ████████│ │ ████████│ │ │
│ │ │ │ Poli B │ │ Poli B │ │ │
│ │ │ │ 15 slot │ │ 15 slot │ │ │
└─────┴─────────┴─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘
- Click slot to edit
- Click empty to add
- Drag to adjust time (optional advanced feature)
- Color indicates active/inactive
3. SCHEDULE LIST VIEW (alternative):
Table showing:
| Hari | Jam Mulai | Jam Selesai | Ruangan | Kuota | Status | Aksi |
Sortable by day
4. ADD/EDIT SCHEDULE MODAL:
Form fields:
- Hari* (select: Minggu-Sabtu)
- Jam Mulai* (time picker)
- Jam Selesai* (time picker)
- Ruangan* (text or select from existing)
- Kuota Pasien* (number, default 20)
- Aktif (toggle)
Validation:
- End time must be after start time
- No overlapping schedules same doctor same day
- Show warning if conflicts
'Simpan' button
5. BULK SCHEDULE:
- 'Salin ke Minggu Lain' button
- Copy current week's schedule pattern
- Useful for initial setup
6. SCHEDULE OVERVIEW (/dashboard/schedules):
- All doctors' schedules
- Filter by day
- Filter by doctor
- Helpful for seeing availability gaps
Weekly grid showing all doctors:
┌──────────────┬────────┬────────┬────────┬────────┬────────┐
│ Dokter │ Senin │ Selasa │ Rabu │ Kamis │ Jumat │
├──────────────┼────────┼────────┼────────┼────────┼────────┤
│ Dr. Sari │ 08-12 │ - │ 08-12 │ - │ 08-12 │
│ Dr. Budi │ 13-17 │ 08-12 │ 13-17 │ 08-12 │ - │
│ Dr. Ani │ - │ 13-17 │ - │ 13-17 │ 08-15 │
└──────────────┴────────┴────────┴────────┴────────┴────────┘
Test:
1. Add schedule for a doctor
2. Edit existing schedule
3. Delete schedule
4. Verify schedule appears in booking page
5. Check schedule overview shows all doctors
Show me schedule management."
Phase 6.3: Billing System
PROMPT 19 — BILLING MANAGEMENT:
"Create billing system at src/app/(dashboard)/dashboard/billing/page.tsx
1. PAGE HEADER:
- Title: 'Billing & Pembayaran'
- 'Buat Tagihan Baru' button
2. TABS:
- Belum Dibayar (pending) — default
- Sudah Dibayar (paid)
- Semua
3. FILTER BAR:
- Date range
- Patient search
- Payment method filter
4. BILLING TABLE:
| No. Invoice | Tanggal | Pasien | Total | Status | Metode | Aksi |
- Invoice number (auto-generated)
- Date
- Patient name (link to patient)
- Total amount (Rupiah formatted)
- Status badge
- Payment method (if paid)
- Actions: View, Pay, Print, Cancel
5. CREATE BILLING MODAL:
Step 1 - Select Patient/Appointment:
- If from appointment: pre-filled
- If manual: search patient
- Show patient card (name, RM, insurance type)
Step 2 - Add Items:
┌────────────────────────────────────────────────────────────┐
│ ITEM TAGIHAN [+ Tambah] │
├────────────────────────────────────────────────────────────┤
│ Biaya Konsultasi - Dr. Sari 1 x Rp 150.000 = Rp 150.000│
│ Pemeriksaan Lab - Darah Lengkap 1 x Rp 250.000 = Rp 250.000│
│ Obat - Paracetamol 500mg 10 x Rp 2.000 = Rp 20.000 │
├────────────────────────────────────────────────────────────┤
│ Subtotal: Rp 420.000 │
│ Diskon: -Rp 20.000 │
│ ─────────────────────── │
│ TOTAL: Rp 400.000 │
└────────────────────────────────────────────────────────────┘
Add item options:
- Konsultasi (auto from doctor fee)
- Tindakan (searchable list)
- Obat (searchable list)
- Laboratorium (searchable list)
- Radiologi (searchable list)
- Custom item (name + price)
Each item:
- Name
- Quantity (number input)
- Unit price
- Subtotal (auto-calculated)
- Remove button
Bottom:
- Subtotal (sum of items)
- Discount (input: amount or percentage toggle)
- Tax (optional, for future)
- Total (auto-calculated)
- Notes (textarea)
'Simpan Tagihan' button (saves as pending)
6. PAYMENT MODAL:
When clicking 'Bayar' on pending bill:
- Bill summary (items, total)
- Payment method select:
• Tunai
• Transfer Bank
• Kartu Debit/Kredit
• BPJS (jika applicable)
• QRIS
For Tunai:
- Amount received input
- Change calculation: Rp [received - total]
For Transfer/Card:
- Reference number input (optional)
'Konfirmasi Pembayaran' button
On success:
- Update status to 'paid'
- Set paid_at timestamp
- Generate receipt number
- Option to print receipt
7. RECEIPT/INVOICE VIEW:
Printable layout:
┌──────────────────────────────────────────┐
│ RUMAH SAKIT XYZ │
│ Jl. Kesehatan No. 123 │
│ Telp: 021-1234567 │
├──────────────────────────────────────────┤
│ No. Invoice: INV-20250127-00001 │
│ Tanggal: 27 Januari 2025 │
│ │
│ Pasien: John Doe │
│ No. RM: RM-202501-00015 │
├──────────────────────────────────────────┤
│ RINCIAN BIAYA: │
│ │
│ Konsultasi Dr. Sari Rp 150.000 │
│ Lab - Darah Lengkap Rp 250.000 │
│ Obat - Paracetamol (10) Rp 20.000 │
│ ───────────── │
│ Subtotal Rp 420.000 │
│ Diskon -Rp 20.000 │
│ ───────────── │
│ TOTAL Rp 400.000 │
├──────────────────────────────────────────┤
│ Metode Pembayaran: Tunai │
│ Status: LUNAS │
│ Tanggal Bayar: 27 Jan 2025 10:30 │
├──────────────────────────────────────────┤
│ Terima kasih atas kunjungan Anda │
└──────────────────────────────────────────┘
Print button
Download PDF button
8. BILLING REPORTS SECTION:
- Today's revenue summary
- Payment method breakdown (pie chart)
- Outstanding bills alert
CREATE COMPONENTS:
- components/dashboard/billing/BillingTable.tsx
- components/dashboard/billing/BillingForm.tsx
- components/dashboard/billing/PaymentModal.tsx
- components/dashboard/billing/InvoicePreview.tsx
- components/dashboard/billing/ItemSelector.tsx
SAMPLE DATA - Create seed data:
- List of common tindakan with prices
- List of common lab tests with prices
- List of common medications with prices
Test:
1. Create billing from appointment
2. Add multiple items
3. Apply discount
4. Save as pending
5. Process payment (tunai)
6. Verify change calculation
7. Print receipt
8. View in paid list
Show me the billing system."
Dashboard Part 2 Checkpoint
ADMIN DASHBOARD PART 2 COMPLETE:
Pages:
├── /dashboard/appointments
├── /dashboard/doctors
├── /dashboard/doctors/[id]
├── /dashboard/doctors/[id]/schedule
├── /dashboard/schedules (overview)
└── /dashboard/billing
Features Working:
□ Appointment list with filters
□ Queue management panel
□ Call next patient
□ Status flow (booked → waiting → in_progress → completed)
□ Reschedule appointment
□ Cancel appointment
□ Doctor list (grid/table view)
□ Add/edit doctor
□ Doctor detail page
□ Schedule calendar view
□ Add/edit schedule
□ Schedule overview all doctors
□ Billing list with tabs
□ Create billing with items
□ Add items (consultation, lab, meds, custom)
□ Apply discount
□ Process payment
□ Print receipt/invoice
Bagian 7: Medical Records & Reports
Dua fitur terakhir yang critical: rekam medis elektronik dan laporan.
Phase 7.1: Medical Records (EMR Basic)
PROMPT 20 — MEDICAL RECORDS:
"Create medical records functionality.
1. ENTRY POINT - From Appointment:
When doctor clicks 'Mulai Konsultasi' on appointment:
- Change appointment status to 'in_progress'
- Redirect to /dashboard/medical-records/new?appointment=[id]
2. CREATE MEDICAL RECORD PAGE (/dashboard/medical-records/new):
HEADER:
- Title: 'Rekam Medis Baru'
- Patient card: name, RM, age, gender, allergies (highlighted if any)
- Appointment info: date, doctor, queue number
FORM SECTIONS:
Section 1 - Vital Signs:
┌─────────────────────────────────────────────────────────────┐
│ TANDA VITAL │
├─────────────────────────────────────────────────────────────┤
│ Tekanan Darah: [___]/[___] mmHg Suhu: [___] °C │
│ Nadi: [___] x/menit Respirasi: [___] x/m │
│ Berat Badan: [___] kg Tinggi: [___] cm │
│ BMI: [auto-calculated] Status: [auto] │
└─────────────────────────────────────────────────────────────┘
Section 2 - Keluhan:
- Pre-filled from appointment complaint
- Editable textarea
- History keluhan sebelumnya (collapsible)
Section 3 - Pemeriksaan Fisik:
- Textarea for examination notes
- Template buttons: 'Normal', 'Dalam Batas Normal'
Section 4 - Diagnosis:
- Primary diagnosis textarea
- ICD-10 code search (optional, autocomplete)
- Secondary diagnosis (optional)
- Diagnosis history (show previous if any)
Section 5 - Tindakan/Treatment:
- Treatment plan textarea
- Procedures performed (if any)
Section 6 - Resep Obat:
┌─────────────────────────────────────────────────────────────┐
│ RESEP OBAT [+ Obat] │
├─────────────────────────────────────────────────────────────┤
│ 1. Paracetamol 500mg │
│ Dosis: 3x1 tablet | Durasi: 5 hari | Sesudah makan │
│ [Edit] [Hapus] │
│ │
│ 2. Amoxicillin 500mg │
│ Dosis: 3x1 kapsul | Durasi: 7 hari | Sesudah makan │
│ [Edit] [Hapus] │
└─────────────────────────────────────────────────────────────┘
Add medication:
- Drug name (searchable)
- Dosage
- Frequency (select: 1x1, 2x1, 3x1, 4x1, etc.)
- Duration (days)
- Instructions (select: sebelum/sesudah makan, etc.)
- Notes
Section 7 - Attachments:
- File upload (images, PDFs)
- Lab results upload
- Preview uploaded files
Section 8 - Follow-up:
- Checkbox: Perlu kontrol
- If checked: suggest date
- Notes for next visit
ACTIONS:
- 'Simpan Draft' - save without completing
- 'Simpan & Selesai' - save, complete appointment, redirect to billing
3. VIEW MEDICAL RECORD (/dashboard/medical-records/[id]):
Read-only view of completed record:
- All sections displayed nicely
- Print button
- Download PDF button
- Edit button (if within same day, or admin)
Prescription section:
- Print prescription separately
- Standard prescription format
4. MEDICAL RECORDS LIST (/dashboard/medical-records):
- Search by patient, doctor, date
- Filter by date range
- Table: Date, Patient, Doctor, Diagnosis, Actions
- Click row to view detail
5. PATIENT MEDICAL HISTORY:
In patient detail drawer, tab 'Rekam Medis':
- Chronological list of all records
- Click to expand/view
- Useful for doctor to see history
6. PRINT FORMATS:
Medical Record Print:
- Hospital header
- Patient info
- Visit details
- All sections
- Doctor signature line
Prescription Print:
- Standard resep format
- Hospital header
- Patient name, age
- Date
- Medications list
- Doctor name + SIP number
- Signature line
CREATE COMPONENTS:
- components/dashboard/medical-records/VitalSignsForm.tsx
- components/dashboard/medical-records/DiagnosisForm.tsx
- components/dashboard/medical-records/PrescriptionBuilder.tsx
- components/dashboard/medical-records/MedicalRecordView.tsx
- components/dashboard/medical-records/PrintableRecord.tsx
- components/dashboard/medical-records/PrintablePrescription.tsx
MEDICATION DATABASE:
Create seed data dengan common medications:
- Paracetamol, Ibuprofen, Amoxicillin, etc.
- Include common dosages
Test:
1. Start consultation from appointment
2. Fill vital signs (BMI auto-calculates)
3. Add diagnosis
4. Add prescriptions (multiple)
5. Save & complete
6. Verify appointment status changes
7. Redirected to billing
8. View completed record
9. Print medical record
10. Print prescription
Show me the medical record form."
Phase 7.2: Reports & Analytics
PROMPT 21 — REPORTS DASHBOARD:
"Create reports page at src/app/(dashboard)/dashboard/reports/page.tsx
1. PAGE HEADER:
- Title: 'Laporan & Statistik'
- Date range selector (preset: Hari ini, Minggu ini, Bulan ini, Custom)
- Export button
2. SUMMARY CARDS ROW:
Compare with previous period (show % change):
| Total Pasien | Total Kunjungan | Pendapatan | Rata-rata/Hari |
| 1,234 | 856 | Rp 128.500.000 | Rp 4.283.000 |
| +12% ▲ | +5% ▲ | +18% ▲ | +8% ▲ |
3. CHARTS SECTION:
Row 1 (2 columns):
Chart 1 - Kunjungan per Hari (Line Chart):
- X-axis: dates
- Y-axis: count
- Line showing daily appointments
- Last 30 days default
Chart 2 - Pendapatan per Hari (Bar Chart):
- X-axis: dates
- Y-axis: amount (Rupiah)
- Bars showing daily revenue
Row 2 (2 columns):
Chart 3 - Pasien per Jenis Pembayaran (Pie/Donut Chart):
- Segments: Umum, BPJS, Asuransi
- Show percentage and count
Chart 4 - Kunjungan per Dokter (Horizontal Bar):
- Bar per doctor
- Sorted by count
- Show count on bar
4. DETAILED TABLES:
Table 1 - Top Diagnoses:
| Ranking | Diagnosis | Jumlah | Persentase |
| 1 | ISPA | 234 | 27% |
| 2 | Hipertensi | 156 | 18% |
| 3 | Diabetes | 98 | 11% |
Table 2 - Doctor Performance:
| Dokter | Pasien | Pendapatan | Avg Rating |
| Dr. Sari | 156 | Rp 23.400.000| 4.8 ⭐ |
| Dr. Budi | 134 | Rp 20.100.000| 4.6 ⭐ |
5. QUICK REPORTS:
Pre-built report templates:
- Laporan Harian:
• Summary of today
• Patient list
• Revenue breakdown
• Print-ready format
- Laporan Bulanan:
• Monthly summary
• Comparison with previous month
• Charts and tables
• Executive summary
- Laporan Kunjungan:
• Detailed appointment data
• Filter by doctor, status
• Export to Excel
- Laporan Keuangan:
• Revenue details
• Payment method breakdown
• Outstanding bills
• Export to Excel
6. EXPORT OPTIONS:
- Export to Excel (.xlsx)
- Export to PDF
- Print report
For Excel:
- Include all filtered data
- Formatted cells
- Summary sheet + detail sheet
7. DATA AGGREGATION QUERIES:
Create efficient queries for:
- Daily/weekly/monthly appointment counts
- Revenue aggregation
- Patient demographics
- Top diagnoses
- Doctor statistics
Consider creating database views or functions for complex aggregations.
CREATE COMPONENTS:
- components/dashboard/reports/SummaryCards.tsx
- components/dashboard/reports/VisitsChart.tsx
- components/dashboard/reports/RevenueChart.tsx
- components/dashboard/reports/PaymentPieChart.tsx
- components/dashboard/reports/DoctorBarChart.tsx
- components/dashboard/reports/ReportTable.tsx
- components/dashboard/reports/ExportButton.tsx
USE CHARTS LIBRARY:
- recharts (already installed)
- Responsive containers
- Tooltips on hover
- Legend
Test:
1. View default report (this month)
2. Change date range
3. Charts update accordingly
4. Export daily report to PDF
5. Export data to Excel
6. Print monthly report
Show me the reports dashboard with charts."
Reports & Medical Records Checkpoint
MEDICAL RECORDS & REPORTS COMPLETE:
Pages:
├── /dashboard/medical-records
├── /dashboard/medical-records/new
├── /dashboard/medical-records/[id]
└── /dashboard/reports
Features Working:
Medical Records:
□ Start from appointment
□ Vital signs form with BMI calculation
□ Diagnosis input
□ Prescription builder (add multiple meds)
□ Attachments upload
□ Save draft / Save & complete
□ Auto-update appointment status
□ View completed record
□ Print medical record
□ Print prescription
□ Patient medical history
Reports:
□ Summary cards with comparison
□ Visits line chart
□ Revenue bar chart
□ Payment type pie chart
□ Doctor performance bar chart
□ Top diagnoses table
□ Date range filter
□ Quick report templates
□ Export to Excel
□ Export to PDF
□ Print reports
Mini Tips
"Medical records adalah jantung dari hospital system. Data ini sangat sensitif — pastikan RLS policies benar-benar tested. Hanya dokter yang menangani dan admin yang boleh akses. Untuk reports, gunakan database views atau materialized views kalau data sudah besar — aggregate query di real-time bisa lambat dengan data ribuan records."
Di bagian terakhir, kita akan polish aplikasi dan deploy ke production! 🏥
Bagian 8: Polish, Testing & Deployment
Aplikasi sudah functional. Sekarang kita polish, test thoroughly, dan deploy ke production.
Phase 8.1: UI Polish & UX Improvements
PROMPT 22 — POLISH & IMPROVEMENTS:
"Polish the application with better UX.
1. LOADING STATES:
For all data fetching:
- Skeleton loaders for lists/tables
- Spinner for buttons when submitting
- Progress bar for file uploads
- Suspense boundaries where appropriate
Create components:
- components/ui/skeleton-card.tsx
- components/ui/skeleton-table.tsx
- components/ui/loading-spinner.tsx
2. ERROR HANDLING:
- Error boundaries for each major section
- Friendly error messages (not technical jargon)
- Retry buttons where applicable
- 404 page: 'Halaman tidak ditemukan'
- 500 page: 'Terjadi kesalahan, silakan coba lagi'
- Network error handling with offline detection
3. EMPTY STATES:
For all lists, create friendly empty states:
- No patients: illustration + 'Belum ada data pasien' + 'Tambah Pasien' CTA
- No appointments: 'Tidak ada jadwal' + 'Buat Appointment' CTA
- No records: 'Belum ada rekam medis'
- No search results: 'Tidak ditemukan' + suggestion to try different keywords
Create: components/shared/EmptyState.tsx
Props: icon, title, description, action (optional)
4. TOAST NOTIFICATIONS:
Using sonner (already installed):
Success toasts:
- 'Data berhasil disimpan'
- 'Pasien berhasil didaftarkan'
- 'Pembayaran berhasil diproses'
Error toasts:
- 'Gagal menyimpan data. Silakan coba lagi.'
- 'Koneksi terputus'
Info toasts:
- 'Antrian dipanggil: A-015'
- 'Ada appointment baru'
5. FORM IMPROVEMENTS:
- Autosave for long forms (medical records)
- Confirm before leaving unsaved changes
- Better validation messages in Indonesian
- Input masks:
• NIK: auto-format 16 digits
• Phone: 08xx-xxxx-xxxx
• Currency: auto-format Rupiah
6. RESPONSIVE FINAL CHECK:
Test all pages on:
- Mobile (375px)
- Tablet (768px)
- Desktop (1280px)
- Large desktop (1536px)
Fix any:
- Overflow issues
- Touch target sizes (min 44px)
- Text readability
- Table horizontal scroll on mobile
7. ACCESSIBILITY:
- Proper heading hierarchy (h1 → h2 → h3)
- Alt text for images
- ARIA labels for interactive elements
- Focus indicators visible
- Keyboard navigation works
- Color contrast meets WCAG AA
8. PERFORMANCE:
- Image optimization (next/image)
- Lazy load images below fold
- Code splitting (dynamic imports for modals)
- Debounce search inputs
- Pagination for large lists
9. ANIMATIONS:
Add subtle animations using Tailwind:
- Page transitions (fade in)
- Modal open/close
- Sidebar collapse
- Button hover states
- Toast slide in
Keep animations subtle — this is healthcare, not a game.
Do a complete walkthrough:
PUBLIC FLOW:
1. Landing page loads fast
2. Navigate to doctors → loading skeleton → data appears
3. Filter doctors → instant response
4. Click doctor → sheet slides in smoothly
5. Booking flow → step indicator animates
6. Submit → loading state → success
PATIENT FLOW:
1. Login → redirect smooth
2. Dashboard loads with skeletons
3. View appointments → tabs work
4. Update profile → toast confirms
ADMIN FLOW:
1. Dashboard → stats animate in
2. Queue management → realtime updates
3. Add patient → modal smooth → success toast
4. Medical record → autosave indicator
5. Billing → payment → receipt preview
Show me the polished application."
Phase 8.2: Testing
PROMPT 23 — TESTING CHECKLIST:
"Create comprehensive testing checklist and perform testing.
1. FUNCTIONAL TESTING:
Public Website:
□ Landing page loads correctly
□ All sections display
□ Doctors page shows doctors
□ Search doctors works
□ Filter by specialization works
□ Doctor schedule modal shows data
□ Booking flow - all 5 steps work
□ Booking creates appointment in database
□ Queue number generated correctly
□ Success page shows correct info
□ Queue check finds appointment
□ Queue check realtime updates
Authentication:
□ Register creates user and profile
□ Login works with correct credentials
□ Login fails with wrong credentials
□ Password reset email sends
□ Password reset works
□ Logout clears session
□ Protected routes redirect to login
□ Role-based access works
Patient Portal:
□ Dashboard shows correct data
□ Appointments list shows own appointments only
□ Can cancel upcoming appointment
□ Medical records shows own records only
□ Profile edit saves correctly
□ Password change works
Admin Dashboard:
□ Stats show correct counts
□ Queue management works
□ Status changes update realtime
□ Patient CRUD works
□ Patient search works
□ Doctor CRUD works
□ Schedule CRUD works
□ Appointment management works
□ Reschedule works
□ Cancel with reason works
□ Medical record form saves correctly
□ Prescription builder works
□ Billing creation works
□ Payment processing works
□ Receipt generates correctly
□ Reports load with data
□ Export to Excel works
□ Date range filter works
2. SECURITY TESTING:
□ Cannot access /dashboard without login
□ Cannot access /portal without login
□ Patient cannot access /dashboard
□ Non-admin cannot access admin-only features
□ RLS: Patient can only see own data
□ RLS: Staff can see all patients
□ RLS: Doctor can only edit own records
□ API routes check authentication
□ No sensitive data in client-side code
□ Environment variables not exposed
3. EDGE CASES:
□ Empty states display correctly
□ Very long names don't break layout
□ Special characters handled
□ Large file uploads work (and have limits)
□ Concurrent booking same slot handled
□ Network disconnect handled gracefully
□ Session expiry handled
4. PERFORMANCE TESTING:
□ Landing page < 3s load time
□ Dashboard < 2s with data
□ Search response < 500ms
□ No layout shift on load
□ Images optimized
□ Bundle size reasonable
5. BROWSER TESTING:
□ Chrome (latest)
□ Firefox (latest)
□ Safari (latest)
□ Edge (latest)
□ Mobile Chrome
□ Mobile Safari
Create test accounts:
- [email protected] (role: admin)
- [email protected] (role: doctor)
- [email protected] (role: patient)
Document any bugs found and fix them."
Phase 8.3: Deployment
PROMPT 24 — DEPLOYMENT:
"Prepare and deploy the application.
1. PRE-DEPLOYMENT CHECKLIST:
Code:
□ All console.logs removed (or only in development)
□ No hardcoded test data
□ Environment variables properly used
□ TypeScript has no errors
□ ESLint has no errors
□ Build succeeds locally (npm run build)
Supabase:
□ RLS policies tested and working
□ Database indexes created
□ No test data in production (or cleaned)
□ Email templates configured
□ Auth redirect URLs set
Security:
□ Service role key not exposed
□ CORS configured properly
□ Rate limiting considered
2. ENVIRONMENT VARIABLES FOR PRODUCTION:
Create .env.production (DO NOT COMMIT):
NEXT_PUBLIC_SUPABASE_URL=https://[project-id].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=[anon-key]
SUPABASE_SERVICE_ROLE_KEY=[service-role-key]
NEXT_PUBLIC_APP_URL=https://your-domain.com
3. VERCEL DEPLOYMENT:
Step 1: Push to GitHub
- Create GitHub repository
- Push code (make sure .env files in .gitignore)
Step 2: Connect to Vercel
- Go to vercel.com
- Import GitHub repository
- Select project
Step 3: Configure
- Framework: Next.js (auto-detected)
- Root directory: ./
- Build command: npm run build
- Output directory: .next
Step 4: Environment Variables
- Add all variables from .env.production
- Mark sensitive ones as 'Sensitive'
Step 5: Deploy
- Click Deploy
- Wait for build
- Get deployment URL
4. POST-DEPLOYMENT:
Supabase Configuration:
- Add Vercel URL to Auth redirect URLs
- Add to CORS allowed origins
- Test auth flow on production
Domain Setup (optional):
- Add custom domain in Vercel
- Configure DNS
- SSL auto-provisioned
Monitoring:
- Enable Vercel Analytics
- Set up error tracking (Sentry optional)
- Monitor Supabase usage
5. PRODUCTION CHECKLIST:
□ Site loads on production URL
□ Auth works (register, login, logout)
□ Database operations work
□ File uploads work
□ Realtime works
□ No console errors
□ Mobile responsive
□ Performance acceptable
6. BACKUP & MAINTENANCE:
Supabase:
- Enable Point-in-Time Recovery (paid plan)
- Or schedule regular exports
Monitoring:
- Set up uptime monitoring
- Database size alerts
- Error rate alerts
Create deployment documentation in README.md."
Phase 8.4: Documentation & Handoff
PROMPT 25 — DOCUMENTATION:
"Create comprehensive documentation.
1. README.md:
# Rumah Sakit XYZ - Hospital Management System
## Overview
Brief description of the system.
## Tech Stack
- Next.js 15
- Supabase
- Tailwind CSS
- TypeScript
## Features
- List all features
## Getting Started
### Prerequisites
- Node.js 18+
- Supabase account
### Installation
1. Clone repository
2. Install dependencies: npm install
3. Copy .env.example to .env.local
4. Fill environment variables
5. Run: npm run dev
### Database Setup
- Instructions for running migrations
- Link to SQL files
## Deployment
- Vercel deployment steps
## Environment Variables
- List all variables with descriptions
- DO NOT include actual values
## Project Structure
- Explain folder structure
## Contributing
- Guidelines if applicable
2. ADMIN GUIDE (docs/admin-guide.md):
For hospital staff:
- How to login
- Dashboard overview
- Managing patients
- Managing appointments
- Queue management
- Creating medical records
- Billing process
- Generating reports
- Common issues & solutions
3. USER GUIDE (docs/user-guide.md):
For patients:
- How to register
- Booking an appointment
- Checking queue status
- Using patient portal
- Viewing medical records
- Updating profile
4. API DOCUMENTATION (if applicable):
Document any API routes:
- Endpoint
- Method
- Request body
- Response format
- Authentication required
5. DATABASE SCHEMA (docs/database.md):
- ER diagram (can be ASCII or image)
- Table descriptions
- Relationships
- Important queries
Create these documentation files."
Final Checkpoint
PROJECT COMPLETE! 🎉
WHAT YOU BUILT:
Public Website:
├── Landing page
├── Doctors listing with filter
├── Online booking (5-step flow)
└── Real-time queue check
Patient Portal:
├── Dashboard
├── Appointments history
├── Medical records
└── Profile management
Admin Dashboard:
├── Dashboard with stats & queue
├── Patient management (CRUD)
├── Appointment management
├── Doctor management
├── Schedule management
├── Medical records (EMR)
├── Billing system
└── Reports & analytics
Technical Achievements:
├── Next.js 15 App Router
├── Supabase Auth & Database
├── Row Level Security
├── Real-time subscriptions
├── Responsive design
├── Print-ready documents
└── Export functionality
DEVELOPMENT TIME:
├── With Antigravity: ~15-20 hours
└── Traditional: ~80-120 hours
└── Time saved: ~80%
Project Enhancement Ideas
FUTURE ENHANCEMENTS:
Phase 2 Features:
├── WhatsApp integration (appointment reminders)
├── SMS notifications
├── Email notifications with templates
├── Patient feedback/rating system
├── Doctor availability calendar sync
└── Inventory management (pharmacy, supplies)
Phase 3 Features:
├── Telemedicine (video consultation)
├── Online payment gateway (Midtrans, Xendit)
├── BPJS integration
├── Lab results integration
├── Radiology image viewer
└── Multi-branch support
Technical Improvements:
├── Mobile app (React Native)
├── PWA support
├── Offline mode
├── Advanced analytics
├── AI-powered diagnosis suggestion
└── Integration with SATUSEHAT (gov system)
Pricing Guide for Freelancers
PROJECT PRICING REFERENCE:
MVP (What we built):
├── Development: Rp 50-80 juta
├── Timeline: 2-4 minggu
└── Includes: Training + 1 bulan support
Full System:
├── Development: Rp 100-200 juta
├── Timeline: 2-3 bulan
└── Includes: All Phase 2 features
Enterprise:
├── Development: Rp 200-500 juta
├── Timeline: 3-6 bulan
└── Includes: Phase 2 + 3, custom integrations
Maintenance:
├── Basic: Rp 3-5 juta/bulan
├── Standard: Rp 8-12 juta/bulan
├── Premium: Rp 15-25 juta/bulan
└── Includes: Bug fixes, minor updates, support
Hosting Costs (Client pays):
├── Supabase: Free tier atau $25/bulan (Pro)
├── Vercel: Free tier atau $20/bulan (Pro)
└── Domain: ~Rp 150-300rb/tahun
Closing
WHAT YOU LEARNED:
Technical Skills:
✓ Next.js 15 App Router architecture
✓ Supabase for backend (Auth, Database, Realtime, Storage)
✓ TypeScript for type safety
✓ Row Level Security implementation
✓ Real-time subscriptions
✓ Complex form handling
✓ Multi-step flows
✓ Report generation
✓ Print document formatting
Domain Knowledge:
✓ Hospital workflow understanding
✓ Patient data management
✓ Appointment scheduling logic
✓ Medical record structure
✓ Billing and payment flow
✓ Queue management system
Business Skills:
✓ Enterprise project scoping
✓ Feature prioritization (MVP)
✓ Healthcare market opportunity
✓ Project pricing strategy
Healthcare digital transformation di Indonesia masih di tahap awal. Dengan skill yang kamu pelajari dari tutorial ini, kamu punya competitive advantage untuk masuk ke market yang lucrative.
Project hospital management system bukan cuma portfolio piece — ini adalah real business opportunity. Ribuan rumah sakit dan klinik di Indonesia butuh sistem seperti ini.
Sekarang kamu punya blueprint lengkap. Build it. Deploy it. Pitch it to real clients.
The healthcare industry is waiting for developers like you.
Keep building! 🏥🚀
Artikel ini ditulis oleh Angga Risky Setiawan, Founder BuildWithAngga. Untuk kelas-kelas development lengkap dengan mentoring, kunjungi buildwithangga.com
