263 lines
10 KiB
Markdown
263 lines
10 KiB
Markdown
# 🗺️ 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 |
|