# 🗺️ DEVPLAN — Development Plan

**Project:** Web Antrean — Sistem Manajemen Antrean Rawat Jalan RSSA
**Version:** 1.1.0
**Author:** Akbar
**Stack:** JavaScript · Vue 3 · TypeScript · Nuxt 3 · Vuetify 3 · Pinia
**Last Updated:** 2026-07-10

---

## 🧠 AI Prompt — Cara Menggunakan Dokumen Ini

> Salin prompt berikut ke Claude untuk membantu membuat dev plan:

```
Kamu adalah tech lead senior fullstack (Nuxt 3, Vue 3, TypeScript).

Project: Web Antrean — Sistem Manajemen Antrean Rawat Jalan RSSA
Deskripsi: Digitalisasi alur antrean pasien rawat jalan di rumah sakit
Deadline: Mei 2026 (Go-Live)
Tim: 1 Fullstack Engineer (Akbar), PO Tim RSSA

Fitur yang harus dibangun:
1. Anjungan mandiri (kiosk registrasi pasien, pilih klinik/subspesialis)
2. Check-in pasien via QR code
3. Manajemen antrean loket & display screen
4. Manajemen antrean klinik & ruang
5. Manajemen antrean penunjang
6. Real-time sync via WebSocket
7. Dashboard monitoring & statistik
8. Manajemen user, master data, dan hak akses (Keycloak)

Buatkan:
1. Breakdown fase development (Phase 0 s/d launch)
2. Task list per fase dengan estimasi
3. Urutan prioritas fitur (MoSCoW)
4. Technical dependencies antar task
5. Milestone dan checkpoint

Format dalam tabel Markdown yang terstruktur.
```

---

## 1. Project Timeline

```
[Start]──Phase 0──Phase 1──Phase 2──Phase 3──Phase 4──Phase 5──Phase 6──Phase 7──[Launch]
          Setup   Fondasi  Inti API  Hak Akses Eksekutif Stabilisasi Verifikasi Infrastruktur
```

| Fase | Nama | Durasi | Target | Status |
|------|------|--------|--------|--------|
| Phase 0 | Setup & Arsitektur | 1 Minggu | Awal Jan 2026 | ✅ Done |
| Phase 1 | Fondasi (Loket, Klinik, QR) | 3 Minggu | Jan 2026 | ✅ Done |
| Phase 2 | Fitur Inti (Anjungan, WS, API) | 3 Minggu | Feb 2026 | ✅ Done |
| Phase 3 | Hak Akses & Keycloak | 2 Minggu | Apr 2026 | ✅ Done |
| Phase 4 | Fitur Eksekutif & Docker | 1 Minggu | Pertengahan Mei | ✅ Done |
| Phase 5 | Stabilisasi & Dokumentasi | 2 Minggu | Akhir Mei 2026 | ✅ Done |
| Phase 6 | Verifikasi Akun & Kiosk | 2 Minggu | Juni 2026 | ✅ Done |
| Phase 7 | Infrastruktur & Dokumentasi | Ongoing | Juli 2026 | 🔄 In Progress |

---

## 2. Feature Prioritization (MoSCoW)

| Priority | Fitur | Estimasi | Phase |
|----------|-------|----------|-------|
| 🔴 Must Have | Modul Anjungan (Pilih klinik, ambil tiket, cetak) | 40 jam | 2 |
| 🔴 Must Have | Modul Loket (Panggil, skip, recall, next) | 30 jam | 1 & 2 |
| 🔴 Must Have | Check-in via QR Code | 20 jam | 1 |
| 🔴 Must Have | Sinkronisasi Real-time via WebSocket | 30 jam | 2 |
| 🔴 Must Have | Integrasi API Eksternal (Visit API, Antrian API) | 40 jam | 2 |
| 🔴 Must Have | Manajemen Hak Akses Keycloak | 25 jam | 3 |
| 🟡 Should Have | Antrean Klinik & Penunjang | 30 jam | 1 & 4 |
| 🟡 Should Have | Dashboard Monitoring & Statistik | 15 jam | 1 |
| 🟡 Should Have | Pilihan Subspesialis (Klinik Eksekutif) | 10 jam | 4 |
| 🟢 Could Have | Notifikasi Suara Panggilan (Text-to-Speech) | 15 jam | Future |
| ⬜ Won't Have | Aplikasi Mobile Native | — | Out of scope |
| ⬜ Won't Have | Integrasi Billing / Pembayaran Langsung | — | Out of scope |

---

## 3. Task Breakdown

### Phase 0 — Setup & Arsitektur
| Task | Estimasi | Dependencies | Status |
|------|----------|--------------|--------|
| Init Nuxt 3 + TypeScript | 2 jam | — | ✅ Done |
| Setup Vuetify 3 + SCSS variables | 4 jam | Task 1 | ✅ Done |
| Setup Pinia state management | 2 jam | Task 1 | ✅ Done |
| Setup Vue Router (Nuxt pages/layout) | 3 jam | Task 1 | ✅ Done |
| Konfigurasi Proxy API di `nuxt.config.ts` | 3 jam | Task 1 | ✅ Done |

### Phase 1 — Fondasi (Loket, Klinik, QR)
| Task | Estimasi | Dependencies | Status |
|------|----------|--------------|--------|
| UI Layout, Sidebar, PageHeader | 8 jam | Phase 0 | ✅ Done |
| Komponen PatientCard & Tabel | 8 jam | Phase 0 | ✅ Done |
| UI Admin Loket & Admin Klinik | 12 jam | Task 2 | ✅ Done |
| Check-in Pasien UI & QR Scanner (`html5-qrcode`) | 12 jam | Phase 0 | ✅ Done |
| Generator Tiket QR (`qrcode.vue`) | 6 jam | Phase 0 | ✅ Done |
| Cetak Tiket Thermal (`useThermalPrint.ts`) | 8 jam | Phase 0 | ✅ Done |

### Phase 2 — Fitur Inti (Anjungan, WS, API)
| Task | Estimasi | Dependencies | Status |
|------|----------|--------------|--------|
| Integrasi Visit API & Antrian API | 16 jam | Phase 0 | ✅ Done |
| Setup WebSocket client (`useWebSocket.ts`) | 8 jam | Task 1 | ✅ Done |
| Layar Display Antrean (Klinik & Loket) | 12 jam | Task 2 | ✅ Done |
| Modul Anjungan Mandiri (UI & Logic) | 16 jam | Task 1 | ✅ Done |
| Centralized `queueStore` | 12 jam | Task 1, 2 | ✅ Done |
| Bugfix duplikasi data & WS handling | 12 jam | Task 2, 5 | ✅ Done |

### Phase 3 — Hak Akses & Keycloak
| Task | Estimasi | Dependencies | Status |
|------|----------|--------------|--------|
| Konfigurasi Keycloak SSO di frontend | 8 jam | — | ✅ Done |
| Middleware Auth & Guest | 4 jam | Task 1 | ✅ Done |
| CRUD Master Data (Klinik, Loket, Screen) | 12 jam | Phase 1 | ✅ Done |
| Manajemen Hak Akses User/Group (UI & API) | 12 jam | Task 1 | ✅ Done |
| Middleware Permission & Page Access Guard | 8 jam | Task 4 | ✅ Done |

### Phase 4 — Fitur Eksekutif & Docker
| Task | Estimasi | Dependencies | Status |
|------|----------|--------------|--------|
| UI Pemilihan Subspesialis di Anjungan | 8 jam | Phase 2 | ✅ Done |
| Conditional display spesialis di PatientCard | 4 jam | Task 1 | ✅ Done |
| Setup Dockerfile & docker-compose | 4 jam | — | ✅ Done |
| Update konfigurasi environment untuk container | 4 jam | Task 3 | ✅ Done |

### Phase 5 — Stabilisasi & QA
| Task | Estimasi | Dependencies | Status |
|------|----------|--------------|--------|
| Standardisasi WS Client ID (Deterministic) | 4 jam | Phase 2 | ✅ Done |
| Polling fallback 30s untuk layar display | 6 jam | Phase 2 | ✅ Done |
| Isolasi state loket (`currentProcessingPatient`) | 6 jam | Phase 2 | ✅ Done |
| Blacklist handler untuk endpoint gagal 500 | 4 jam | Phase 2 | ✅ Done |
| Dokumentasi PRD, QMD, DEVLOG, EVLOG | 8 jam | — | ✅ Done |
| Setup Unit Testing & E2E framework | 4 jam | — | ✅ Done |

### Phase 6 — Verifikasi Akun & Kiosk
| Task | Estimasi | Dependencies | Status |
|------|----------|--------------|--------|
| Sistem notifikasi suara (voice over) loket & klinik | 12 jam | Phase 2 | ✅ Done |
| Fitur pindah klinik pada dashboard admin | 8 jam | Phase 2 | ✅ Done |
| Halaman Detail Akun Verifikasi | 4 jam | Phase 3 | ✅ Done |
| Implementasi Proxy Routes (CORS) | 8 jam | Phase 2 | ✅ Done |
| Refactoring queueStore.js ke TypeScript | 8 jam | Phase 2 | ✅ Done |
| Ekstraksi useQueueSync composable | 4 jam | Phase 2 | ✅ Done |

### Phase 7 — Infrastruktur & Dokumentasi
| Task | Estimasi | Dependencies | Status |
|------|----------|--------------|--------|
| Migrasi API endpoint (123.140 → 150.131) | 2 jam | — | ✅ Done |
| Pembuatan Project Knowledge Base (AGENTS.md) | 3 jam | — | ✅ Done |
| Update DEVLOG, DEVPLAN, PRD | 2 jam | — | ✅ Done |
| Fix Admin Klinik Ruang missing clinics | 1 jam | Phase 2 | ✅ Done |
| Eliminasi hardcoded fallback IP di source files | 4 jam | Task 1 | ⏳ Pending |
| SQLite config → External API migration | 8 jam | Phase 2 | ⏳ Pending |
| Production deployment & monitoring | 8 jam | All | ⏳ Pending |

---

## 4. Technical Dependencies

```text
Nuxt 3 + TypeScript
├── Pinia (State Management)
│   └── pinia-plugin-persistedstate (localStorage)
├── Vuetify 3 (UI Framework)
│   └── Material Design Icons
├── Nuxt Nitro (Server Engine)
│   └── Server API Routes + SQLite (better-sqlite3)
├── Auth Layer
│   └── Keycloak SSO (OIDC/OAuth 2.0)
├── API Layer
│   ├── Visit API (10.10.123.135:8084)
│   └── Antrian API (10.10.150.131:8089) ← UPDATED
└── Real-time Layer
    └── Native Browser WebSocket
```

---

## 5. Environment Setup

### Local Development
```bash
# Clone repo
git clone https://git.rssa.top/arie.bagus.2905/web-antrean
cd web-antrean

# Install dependencies
npm install

# Copy env
cp .env.example .env

# Jalankan dev server dengan host spesifik
npm run dev
# ATAU
npm run _command_dev
```

### Environment Variables (.env)
```env
AUTH_ORIGIN="http://10.10.150.175:3000"
KEYCLOAK_CLIENT_ID="akbar-test"
KEYCLOAK_ISSUER="https://auth.rssa.top/realms/sandbox"
ANTRIAN_API_URL="http://10.10.150.131:8089/api/v1"          # UPDATED Juli 2026
VERIFICATION_API_BASE_URL="http://10.10.150.131:8089/api/v1" # UPDATED Juli 2026
VISIT_API_URL="http://10.10.123.135:8084/api/v1"
WS_API_URL="ws://10.10.123.135:8084/api/v1/ws"
PROXY_CLIENT_ORIGIN="http://10.10.150.175:3000"
PROXY_TARGET_HOST_KLINIK_FALLBACK="10.10.150.131:8089"       # UPDATED Juli 2026
```

---

## 6. Git Strategy

### Branch Naming
```
main          → production (stable)
Antrean-Code  → development / staging
feature/xxx   → fitur baru (contoh: feature/anjungan-eksekutif)
fix/xxx       → bug fix (contoh: fix/ws-duplicate)
```

### Commit Convention
Saat ini commit message banyak menggunakan free-text (contoh: `push perbaikan`, `update bug ws`). Ke depannya, disarankan menggunakan **Conventional Commits**:
```
feat: tambah halaman dashboard
fix: perbaiki duplikasi antrean di loket
chore: update docker config
docs: update DEVPLAN
```

---

## 7. Milestones & Checkpoints

| Milestone | Kriteria | Target Tanggal | Status |
|-----------|----------|----------------|--------|
| 🏁 Project Kickoff | Setup Nuxt, Layout, Styling | Jan 2026 | ✅ Done |
| 🔌 API & WS Connected | Data mengalir dari backend, WS sync jalan | Feb 2026 | ✅ Done |
| 🔐 Auth & Roles | Keycloak jalan, routing terlindungi middleware | Apr 2026 | ✅ Done |
| 🏥 Anjungan Ready | Pasien bisa check-in & ambil tiket lancar | Pertengahan Mei | ✅ Done |
| 🛡️ Stability Pass | Tidak ada leak, isolasi loket aman, no WS drift | Akhir Mei 2026 | ✅ Done |
| 🔄 TypeScript Migration | queueStore refactored ke TS, composable extracted | Juni 2026 | ✅ Done |
| 📡 API Endpoint Migration | Antrian API pindah ke server baru (150.131) | Juli 2026 | ✅ Done |
| 🚀 Production Go-Live | Deployment docker di server production | Q3 2026 | 🔄 Pending |

---

## 8. Changelog

| Versi | Tanggal | Author | Perubahan |
|-------|---------|--------|-----------|
| 1.1.0 | 2026-07-10 | Akbar | Phase 7: migrasi API, knowledge base, update docs |
| 1.0.0 | 2026-05-25 | Akbar | Initial plan — direkonstruksi berdasarkan timeline aktual |