arie.bagus.2905/web-antrean
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement queue display system with localized store, composables, and administrative dashboard pages

Browse Source
This commit is contained in:
Fanrouver
2026-06-02 09:14:38 +07:00
parent ffdb88d13c
commit 047b39064d
12 changed files with 2345 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/DEVPLAN.md
+234
View File
@@ -0,0 +1,234 @@
# 🗺️ 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──[Launch]
Setup Fondasi Inti API Hak Akses Eksekutif Stabilisasi
```
| 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 | 🔄 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 | — | 🔄 In Prog |
---
## 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 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
```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.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 |