arie.bagus.2905/web-antrean

Files

T

Fanrouver e18ed186e1 feat: implement queue management store and administrative interface for patient flow control

2026-06-23 08:24:26 +07:00

9.1 KiB

Raw Blame History

🗺️ DEVPLAN — Development Plan

Project: Web Antrean — Sistem Manajemen Antrean Rawat Jalan RSSA Version: 1.0.0 Author: Akbar Stack: JavaScript · Vue 3 · TypeScript · Nuxt 3 · Vuetify 3 · Pinia Last Updated: 2026-05-25

🧠 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──[Launch]
          Setup   Fondasi  Inti API  Hak Akses Eksekutif Stabilisasi Verifikasi

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	🔄 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

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 Routes (CORS Proxy API)
├── Auth Layer
│   └── Keycloak SSO (OIDC/OAuth 2.0)
├── API Layer
│   ├── Visit API (10.10.123.135:8084)
│   └── Antrian API (10.10.123.140:8089)
└── 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.123.140:8089/api/v1"
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"

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
🚀 Production Go-Live	Deployment docker di server production	Q2/Q3 2026	🔄 Pending

8. Changelog

Versi	Tanggal	Author	Perubahan
1.0.0	2026-05-25	Akbar	Initial plan — direkonstruksi berdasarkan timeline aktual

9.1 KiB Raw Blame History