Files
web-antrean/docs/DEVPLAN.md
T
2026-07-10 11:14:36 +07:00

10 KiB

🗺️ 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

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

# 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)

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