🏦 Banking Queue Management System

Sistem antrian digital real-time untuk layanan perbankan


---

📸 Preview

🖥️ Queue Display — Layar Antrian Publik

Layar yang dipasang di ruang tunggu nasabah, menampilkan nomor yang sedang dilayani dan nomor yang menunggu secara real-time.

---

🎛️ Admin Panel — Panel Operator Teller

Dashboard operator untuk memanggil nasabah, mengelola antrian, dan memantau semua loket secara bersamaan.

---

🎫 Ambil Nomor — Self-Service Kiosk

Halaman kios mandiri bagi nasabah untuk memilih layanan dan mengambil nomor antrian.

---

✨ Fitur Utama

Fitur	Deskripsi
📡 Real-Time Updates	Semua perubahan antrian langsung tersinkron ke seluruh klien via SignalR WebSocket
🔊 Voice Announcement	Pengumuman suara otomatis menggunakan Web Speech API (Bahasa Indonesia) saat nomor dipanggil
🏧 Multi-Service	Mendukung 7 jenis layanan perbankan dengan kode tiket unik masing-masing
🖥️ Queue Display	Layar publik yang menampilkan nomor sedang dilayani dan antrian menunggu
🎛️ Admin Panel	Operator dapat memanggil, melayani, menyelesaikan, atau melewati antrian
🎫 Self-Service Kiosk	Nasabah dapat mengambil nomor antrian sendiri tanpa bantuan petugas
💾 State Persistence	State antrian tersimpan di database — aman dari restart server
⚡ In-Memory Performance	State di-cache di memori untuk performa broadcast real-time yang optimal

---

🏗️ Arsitektur Sistem

┌─────────────────────────────────────────────────────────────┐
│                        CLIENTS                              │
│                                                             │
│   [Queue Display]   [Admin Panel]   [Ambil Nomor Kiosk]    │
└──────────────┬──────────────────────────────────────────────┘
               │  WebSocket (SignalR) + HTTP REST
               ▼
┌─────────────────────────────────────────────────────────────┐
│                     Queue.API (ASP.NET Core 10)             │
│                                                             │
│   ┌──────────────┐   ┌───────────────────────────────────┐ │
│   │ QueueHub     │   │ QueueController (REST API)        │ │
│   │ (SignalR)    │   │ GET /api/queue/new-queue           │ │
│   │              │   │ GET /api/queue/get-queues          │ │
│   └──────┬───────┘   └──────────────┬────────────────────┘ │
│          │                          │                       │
│          └──────────┬───────────────┘                       │
│                     ▼                                       │
│          ┌──────────────────────┐                           │
│          │  QueueStateService   │  ← Singleton In-Memory   │
│          │  (SemaphoreSlim)     │    Thread-Safe State      │
│          └──────────┬───────────┘                           │
│                     │                                       │
│          ┌──────────▼───────────┐                           │
│          │  AppDbContext (EF)   │  ← SQL Server Persistence │
│          └──────────────────────┘                           │
└─────────────────────────────────────────────────────────────┘

---

🛠️ Tech Stack

Backend — Queue.API

Teknologi	Versi	Peran
ASP.NET Core	.NET 10	Web framework & REST API
ASP.NET SignalR	10.0	Real-time WebSocket communication
Entity Framework Core	10.0	ORM & database migrations
SQL Server	—	Persistent storage
OpenAPI	Built-in	API documentation

Frontend — Queue.UI

Teknologi	Versi	Peran
Vue.js	3.5	UI Framework (Composition API)
TypeScript	~6.0	Type-safe development
Pinia	3.0	State management
Vue Router	5.0	Client-side routing
@microsoft/signalr	10.0	SignalR client connection
Vite	8.0	Build tool & dev server
Web Speech API	Native	Text-to-speech voice announcement

---

🎯 Layanan yang Didukung

Kode	Layanan	Contoh Tiket
A	Teller	A001
C	Customer Service	C001
K	Kredit	K001
I	Investasi	I001
P	Priority Banking	P001
F	Trade Finance	F001
S	Safe Deposit Box	S001

---

🚀 Cara Menjalankan

Prasyarat

• .NET 10 SDK
• Node.js 20+
• SQL Server (LocalDB / Express / Full)

1. Clone & Setup Backend

cd Queue.API

Edit appsettings.Development.json dan sesuaikan connection string:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=QueueDB;Trusted_Connection=True;"
  }
}

Jalankan migrasi dan start server:

dotnet ef database update
dotnet run

API akan berjalan di https://localhost:7xxx atau http://localhost:5xxx

2. Setup Frontend

cd Queue.UI
npm install
npm run dev

Frontend akan berjalan di http://localhost:5173

3. Akses Aplikasi

URL	Halaman
http://localhost:5173/	Queue Display (Layar Publik)
http://localhost:5173/take	Ambil Nomor (Kiosk)
http://localhost:5173/admin	Admin Panel (Operator)

---

📡 SignalR Hub Events

Server → Client (Broadcast)

Event	Payload	Keterangan
QueueUpdate	QueueUpdatePayload	Update penuh state antrian
QueueCalled	QueueCalledPayload	Nomor baru dipanggil ke loket
Announcement	string	Pesan pengumuman teks bebas

Client → Server (Invoke)

Method	Parameter	Keterangan
AddQueue	queueNumber, serviceName	Tambah nomor antrian baru
CallNext	counterName, serviceName	Panggil nomor berikutnya
CallSpecific	queueNumber, counterName, serviceName	Panggil nomor tertentu
CompleteQueue	queueNumber, counterName	Selesaikan pelayanan
SkipQueue	queueNumber	Lewati / skip nomor
SendAnnouncement	message	Kirim pengumuman ke semua layar

---

📁 Struktur Proyek

Queue/
├── Queue.API/                  # ASP.NET Core Backend
│   ├── Controllers/
│   │   └── QueueController.cs  # REST API endpoints
│   ├── Hubs/
│   │   └── QueueHub.cs         # SignalR real-time hub
│   ├── Services/
│   │   ├── QueueStateService.cs    # Singleton in-memory state
│   │   └── QueueStateInitializer.cs # DB → Memory loader on startup
│   ├── Models/
│   │   ├── Queue.cs            # Entity model
│   │   └── ActivityLog.cs      # Activity log model
│   ├── Data/
│   │   └── AppDbContext.cs     # EF Core DB context
│   ├── Shared/
│   │   └── AppEnum.cs          # Service types, statuses, ticket prefixes
│   └── Migrations/             # EF Core database migrations
│
└── Queue.UI/                   # Vue 3 Frontend
    └── src/
        ├── views/
        │   ├── QueueDisplay.vue    # Layar antrian publik
        │   ├── TakeQueueView.vue   # Kios ambil nomor
        │   └── AdminView.vue       # Panel operator
        ├── stores/
        │   ├── queue.ts        # Pinia: real-time queue state
        │   └── admin.ts        # Pinia: admin / counter state
        ├── services/
        │   └── signalrService.ts   # SignalR connection & event handlers
        └── composables/
            └── useVoice.ts     # Web Speech API TTS composable

---

🔄 Alur Kerja Sistem

Nasabah                  Sistem                    Operator
   │                        │                          │
   │── Pilih Layanan ──────►│                          │
   │                        │── Buat Tiket (DB) ──────►│
   │◄─ Terima Nomor ────────│◄─ Broadcast QueueUpdate ─│
   │                        │                          │
   │  [Menunggu]            │◄─ CallNext() ────────────│
   │                        │── QueueCalled Event ─────►│
   │◄─ 🔊 Suara Panggil ───│── Broadcast ke Display ──►│
   │                        │                          │
   │── Menuju Loket ────────│                          │
   │                        │◄─ CompleteQueue() ───────│
   │                        │── Broadcast QueueUpdate ─►│
   │  [Selesai]             │                          │

---

👨‍💻 Author

Dibangun sebagai portofolio proyek full-stack menggunakan teknologi modern untuk sistem antrian perbankan berbasis web real-time.

---

⭐ Jika proyek ini bermanfaat, berikan bintang!