Smart Queue Management System

Halaman Login Petugas
Layar Antrian Utama (Light Mode)
Layar TV Antrian (Dark Mode)
List Antrian dan Loket Pemanggilan
Dashboard Rekapitulasi Pelayanan
Konfigurasi Tipe Antrian
Manajemen Petugas Loket

Project Information

  • Category: Web Dashboard (Laravel)
  • Client: Internal Project
  • Project Date: 2026
  • My Role: Full Stack Developer
  • Project Status: Completed
  • Technology Stack:
    Laravel Vue.js Tailwind CSS WebSockets (Pusher) MySQL Web Speech API

Project Overview

Smart Queue Management System adalah sistem manajemen antrian digital yang dirancang untuk meningkatkan efisiensi pelayanan internal perusahaan. Berbeda dengan sistem antrian konvensional, aplikasi ini dilengkapi dengan monitoring status online/offline petugas, voice notification, voice reminder, pengaturan waktu istirahat (Break Management), dashboard monitoring real-time, serta layar khusus untuk ditampilkan pada TV informasi. Sistem juga mendukung tema Light Mode dan Dark Mode untuk meningkatkan kenyamanan pengguna.

Key Features

Digital Queue Management

Mengelola antrian pelanggan secara otomatis dengan pembagian tipe antrian dan pemanggilan loket yang cepat.

Online Status Monitoring

Memantau status keaktifan petugas loket secara real-time, termasuk kondisi online, offline, break, maupun sedang melayani.

Voice Notification & Reminder

Pengumuman panggilan suara nomor antrian otomatis berbasis komputer dan pengingat jika petugas sedang idle terlalu lama.

TV Display Screen

Layar fullscreen khusus yang didesain modern untuk ditampilkan pada TV ruang tunggu informasi, lengkap dengan suara panggil.

Challenges & Solutions

Sinkronisasi Antrian Instan

Tantangan: Layar TV informasi di ruang tunggu harus memperbarui data nomor antrian yang dipanggil dalam hitungan milidetik setelah tombol klik pemanggilan loket ditekan tanpa reload halaman.

Solusi: Menggunakan protokol WebSocket dengan library `Laravel Echo` dan driver `Pusher`. Setiap aksi pemanggilan memicu event di backend yang secara real-time di-broadcast ke seluruh client yang aktif.

Tabrakan Suara Pemanggilan Loket

Tantangan: Jika beberapa petugas di loket berbeda menekan tombol panggilan hampir bersamaan, pengucapan teks suara panggilan (Text-to-Speech) akan bertabrakan dan menjadi tidak jelas.

Solusi: Membangun queue system audio di sisi frontend JavaScript. Panggilan yang masuk akan dimasukkan ke dalam antrian list (FIFO) dan `Web Speech API` hanya akan mengucapkan teks setelah pemanggilan suara sebelumnya selesai sepenuhnya (`speechSynthesis.speaking === false`).