From b5e40c68d21aa19458c2454be8a5fe1de51195f7 Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Mon, 5 Jan 2026 08:32:59 +0700
Subject: [PATCH] QRscan implementation

---
 .gitignore                                    |    3 +
 ACCESS_DATABASE.md                            |  260 +
 HTTPS_SETUP.md                                |   61 +
 assets/scss/checkin/_components.scss          |  882 ++++
 assets/scss/checkin/_dialogs.scss             |  230 +
 assets/scss/checkin/_variables.scss           |   74 +
 components/checkin/CheckInDialog.vue          |  171 +
 components/checkin/CheckInHeader.vue          |  148 +
 components/checkin/GenerateQRTab.vue          |  325 ++
 components/checkin/HistoryDialog.vue          |  214 +
 components/checkin/ManualInputTab.vue         |  104 +
 components/checkin/QRHistoryDialog.vue        |  179 +
 components/checkin/QRScanTab.vue              |  218 +
 components/checkin/StatsFooter.vue            |  146 +
 composables/useCheckIn.ts                     |  203 +
 composables/useCheckInHistory.ts              |  276 +
 composables/useQRGenerator.ts                 |  211 +
 composables/useQRScanner.ts                   |  574 +++
 composables/useSnackbar.ts                    |   44 +
 constants/checkin.ts                          |   23 +
 nuxt.config.ts                                |   44 +-
 package-lock.json                             |    7 +
 package.json                                  |    3 +
 pages/CheckInPasien/checkIn.vue               | 4420 +++++++++++------
 .../checkIn.vue.refactore.backup              |  717 +++
 pages/Setting/HakAkses.vue                    |  831 +++-
 pages/Setting/UserLogin.vue                   |  677 ++-
 scripts/db-access.js                          |  145 +
 types/checkin.ts                              |   35 +
 29 files changed, 9490 insertions(+), 1735 deletions(-)
 create mode 100644 ACCESS_DATABASE.md
 create mode 100644 HTTPS_SETUP.md
 create mode 100644 assets/scss/checkin/_components.scss
 create mode 100644 assets/scss/checkin/_dialogs.scss
 create mode 100644 assets/scss/checkin/_variables.scss
 create mode 100644 components/checkin/CheckInDialog.vue
 create mode 100644 components/checkin/CheckInHeader.vue
 create mode 100644 components/checkin/GenerateQRTab.vue
 create mode 100644 components/checkin/HistoryDialog.vue
 create mode 100644 components/checkin/ManualInputTab.vue
 create mode 100644 components/checkin/QRHistoryDialog.vue
 create mode 100644 components/checkin/QRScanTab.vue
 create mode 100644 components/checkin/StatsFooter.vue
 create mode 100644 composables/useCheckIn.ts
 create mode 100644 composables/useCheckInHistory.ts
 create mode 100644 composables/useQRGenerator.ts
 create mode 100644 composables/useQRScanner.ts
 create mode 100644 composables/useSnackbar.ts
 create mode 100644 constants/checkin.ts
 create mode 100644 pages/CheckInPasien/checkIn.vue.refactore.backup
 create mode 100644 scripts/db-access.js
 create mode 100644 types/checkin.ts

diff --git a/.gitignore b/.gitignore
index 81b4e1b..629f949 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,6 @@ logs
 .env
 .env.*
 !.env.example
+REFACTORING_STATUS.md
+CHECKIN_DOCUMENTATION.md
+USERLOGIN_DOCUMENTATION.md
diff --git a/ACCESS_DATABASE.md b/ACCESS_DATABASE.md
new file mode 100644
index 0000000..40d7451
--- /dev/null
+++ b/ACCESS_DATABASE.md
@@ -0,0 +1,260 @@
+# Cara Mengakses Database better-sqlite3
+
+## 📍 Lokasi Database
+- **Path relatif**: `data/users.db`
+- **Path lengkap**: `E:\PROJECT\ddddd\Web-Antrean - Copy (2)\data\users.db`
+
+---
+
+## 🔧 Metode 1: Menggunakan Node.js Script (Recommended)
+
+Karena project ini sudah menggunakan `better-sqlite3`, cara termudah adalah membuat script Node.js:
+
+### Contoh Script untuk Query Database
+
+```javascript
+// scripts/query-db.js
+const Database = require('better-sqlite3');
+const path = require('path');
+
+const dbPath = path.join(__dirname, '..', 'data', 'users.db');
+const db = new Database(dbPath);
+
+// Contoh: Get all users
+const users = db.prepare('SELECT * FROM users').all();
+console.log('All users:', users);
+
+// Contoh: Get user by ID
+const user = db.prepare('SELECT * FROM users WHERE id = ?').get('user-id-here');
+console.log('User:', user);
+
+// Contoh: Count users
+const count = db.prepare('SELECT COUNT(*) as total FROM users').get();
+console.log('Total users:', count.total);
+
+db.close();
+```
+
+**Jalankan dengan:**
+```bash
+node scripts/query-db.js
+```
+
+---
+
+## 🔧 Metode 2: Menggunakan SQLite CLI
+
+### Install SQLite CLI (jika belum ada)
+
+**Windows:**
+1. Download dari: https://www.sqlite.org/download.html
+2. Atau install via Chocolatey: `choco install sqlite`
+3. Atau install via Scoop: `scoop install sqlite`
+
+**Atau gunakan npx (tidak perlu install):**
+```bash
+npx sqlite3 data/users.db
+```
+
+### Perintah SQLite CLI
+
+```bash
+# Buka database
+sqlite3 data/users.db
+
+# Atau dengan npx (jika SQLite tidak terinstall)
+npx sqlite3 data/users.db
+
+# Di dalam SQLite shell:
+.tables                    # Lihat semua tabel
+.schema users              # Lihat schema tabel users
+SELECT * FROM users;        # Lihat semua data
+SELECT * FROM users LIMIT 10;  # Lihat 10 baris pertama
+.mode column               # Format output sebagai kolom
+.headers on                # Tampilkan header kolom
+.quit                      # Keluar
+```
+
+---
+
+## 🔧 Metode 3: Menggunakan GUI Tools
+
+### 1. **DB Browser for SQLite** (Gratis, Recommended)
+- Download: https://sqlitebrowser.org/
+- Buka file: `data/users.db`
+- Bisa edit, query, dan export data dengan mudah
+
+### 2. **SQLiteStudio** (Gratis)
+- Download: https://sqlitestudio.pl/
+- Cross-platform, open source
+
+### 3. **DBeaver** (Gratis)
+- Download: https://dbeaver.io/
+- Universal database tool, support banyak database termasuk SQLite
+
+### 4. **VS Code Extension**
+- Install extension: **SQLite Viewer** atau **SQLite**
+- Buka file `data/users.db` langsung di VS Code
+
+---
+
+## 🔧 Metode 4: Menggunakan API Endpoints yang Sudah Ada
+
+Project ini sudah punya API endpoints untuk mengakses data:
+
+```bash
+# Get all users
+GET /api/users/list
+
+# Get current user
+GET /api/users/current
+
+# Get user by ID
+GET /api/users/[id]
+
+# Create user
+POST /api/users/create
+
+# Update user
+PATCH /api/users/[id]
+
+# Delete user
+DELETE /api/users/[id]
+```
+
+---
+
+## 📊 Contoh Query Berguna
+
+### Melihat semua users:
+```sql
+SELECT * FROM users;
+```
+
+### Melihat users dengan format tanggal yang readable:
+```sql
+SELECT 
+  id,
+  namaLengkap,
+  namaUser,
+  email,
+  datetime(lastLogin, 'unixepoch') as lastLoginFormatted,
+  datetime(createdAt, 'unixepoch') as createdAtFormatted
+FROM users;
+```
+
+### Mencari user berdasarkan nama:
+```sql
+SELECT * FROM users WHERE namaLengkap LIKE '%nama%';
+```
+
+### Mencari user berdasarkan username:
+```sql
+SELECT * FROM users WHERE namaUser = 'username';
+```
+
+### Melihat users yang belum login:
+```sql
+SELECT * FROM users WHERE lastLogin IS NULL;
+```
+
+### Melihat users yang baru dibuat:
+```sql
+SELECT * FROM users ORDER BY createdAt DESC LIMIT 10;
+```
+
+### Export data ke CSV:
+```sql
+.mode csv
+.headers on
+.output users_export.csv
+SELECT * FROM users;
+.output stdout
+```
+
+---
+
+## ⚠️ Catatan Penting
+
+1. **Backup sebelum edit manual**: Selalu backup database sebelum melakukan perubahan manual
+2. **Tutup koneksi**: Pastikan aplikasi tidak sedang menggunakan database saat mengedit manual
+3. **Format timestamps**: `lastLogin`, `createdAt`, `updatedAt` disimpan sebagai Unix timestamp (seconds)
+4. **JSON fields**: `roles`, `realmRoles`, `accountRoles`, `resourceRoles`, `groups` disimpan sebagai JSON string
+
+---
+
+## 🛠️ Quick Access Script
+
+Buat file `scripts/db-access.js` untuk akses cepat:
+
+```javascript
+const Database = require('better-sqlite3');
+const path = require('path');
+const readline = require('readline');
+
+const dbPath = path.join(process.cwd(), 'data', 'users.db');
+const db = new Database(dbPath);
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+console.log('📊 Database Access Tool');
+console.log('Database path:', dbPath);
+console.log('\nAvailable commands:');
+console.log('  list - List all users');
+console.log('  count - Count total users');
+console.log('  schema - Show table schema');
+console.log('  query <SQL> - Run custom SQL query');
+console.log('  exit - Exit\n');
+
+function prompt() {
+  rl.question('> ', (input) => {
+    const [cmd, ...args] = input.trim().split(' ');
+    
+    try {
+      switch(cmd.toLowerCase()) {
+        case 'list':
+          const users = db.prepare('SELECT id, namaLengkap, namaUser, email FROM users').all();
+          console.table(users);
+          break;
+        case 'count':
+          const count = db.prepare('SELECT COUNT(*) as total FROM users').get();
+          console.log(`Total users: ${count.total}`);
+          break;
+        case 'schema':
+          const schema = db.prepare("PRAGMA table_info(users)").all();
+          console.table(schema);
+          break;
+        case 'query':
+          const sql = args.join(' ');
+          if (!sql) {
+            console.log('Error: Please provide SQL query');
+            break;
+          }
+          const result = db.prepare(sql).all();
+          console.table(result);
+          break;
+        case 'exit':
+          db.close();
+          rl.close();
+          return;
+        default:
+          console.log('Unknown command. Type "exit" to quit.');
+      }
+    } catch (error) {
+      console.error('Error:', error.message);
+    }
+    
+    prompt();
+  });
+}
+
+prompt();
+```
+
+Jalankan dengan: `node scripts/db-access.js`
+
+
+
diff --git a/HTTPS_SETUP.md b/HTTPS_SETUP.md
new file mode 100644
index 0000000..159e4e3
--- /dev/null
+++ b/HTTPS_SETUP.md
@@ -0,0 +1,61 @@
+# Setup HTTPS untuk Development
+
+Aplikasi ini sudah dikonfigurasi untuk menggunakan HTTPS di development mode agar fitur kamera bisa berfungsi.
+
+## Cara Menggunakan
+
+1. **Jalankan aplikasi dengan HTTPS:**
+   ```bash
+   npm run dev:https
+   ```
+   atau
+   ```bash
+   npm run dev
+   ```
+
+2. **Akses aplikasi:**
+   - Dari komputer: `https://localhost:3001`
+   - Dari HP (dalam jaringan yang sama): `https://[IP-KOMPUTER]:3001`
+     - Contoh: `https://10.10.150.175:3001`
+
+## Peringatan Keamanan Browser
+
+Karena menggunakan self-signed certificate, browser akan menampilkan peringatan keamanan:
+
+### Chrome/Edge:
+1. Klik **"Advanced"** atau **"Lanjutkan ke localhost (tidak aman)"**
+2. Klik **"Proceed to localhost (unsafe)"**
+
+### Firefox:
+1. Klik **"Advanced"**
+2. Klik **"Accept the Risk and Continue"**
+
+### Safari (Mac):
+1. Klik **"Show Details"**
+2. Klik **"visit this website"**
+3. Klik **"Visit Website"** di dialog konfirmasi
+
+### Mobile (HP):
+- **Android Chrome**: Klik **"Advanced"** → **"Proceed to [IP] (unsafe)"**
+- **iOS Safari**: Klik **"Advanced"** → **"Proceed to [IP]"**
+
+## Catatan Penting
+
+- ✅ Setelah menerima certificate, browser akan mengingatnya untuk kunjungan selanjutnya
+- ✅ HTTPS diperlukan untuk akses kamera di browser modern
+- ✅ Pastikan HP dan komputer dalam jaringan yang sama (WiFi yang sama)
+- ✅ Gunakan IP komputer Anda, bukan `localhost` saat akses dari HP
+
+## Troubleshooting
+
+### Kamera masih tidak muncul?
+1. Pastikan sudah menggunakan `https://` bukan `http://`
+2. Cek izin kamera di browser settings
+3. Pastikan tidak ada aplikasi lain yang menggunakan kamera
+4. Restart browser setelah setup HTTPS pertama kali
+
+### Tidak bisa akses dari HP?
+1. Pastikan firewall tidak memblokir port 3001
+2. Pastikan HP dan komputer dalam WiFi yang sama
+3. Cek IP komputer dengan `ipconfig` (Windows) atau `ifconfig` (Mac/Linux)
+
diff --git a/assets/scss/checkin/_components.scss b/assets/scss/checkin/_components.scss
new file mode 100644
index 0000000..b0c2d04
--- /dev/null
+++ b/assets/scss/checkin/_components.scss
@@ -0,0 +1,882 @@
+// Check-in Page Component Styles
+@import 'variables';
+
+/* Modern Minimalist Background */
+.bg-modern {
+  background: $bg-white;
+  min-height: 100vh;
+  max-height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.no-scroll-container {
+  height: 100vh;
+  max-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.no-scroll-container::-webkit-scrollbar {
+  width: $spacing-xs;
+}
+
+.no-scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.no-scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+
+.no-overflow {
+  overflow: hidden !important;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+.bg-modern::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 50%, rgba(21, 101, 192, 0.05) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(21, 101, 192, 0.05) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Main Card dengan Glassmorphism */
+.main-card {
+  background: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: $radius-xl !important;
+  box-shadow: $shadow-xl !important;
+  overflow: hidden;
+  position: relative;
+  z-index: $z-base;
+}
+
+/* Header Modern Minimalis */
+.header-modern {
+  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
+  padding: $spacing-xl $spacing-2xl $spacing-lg;
+  position: relative;
+  overflow: hidden;
+}
+
+.header-modern::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-md;
+  margin-bottom: $spacing-xs;
+}
+
+.icon-circle {
+  width: 56px;
+  height: 56px;
+  border-radius: $radius-full;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.header-text {
+  text-align: center;
+}
+
+.title-modern {
+  font-size: $font-3xl;
+  font-weight: 600;
+  color: white;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.subtitle-modern {
+  font-size: $font-base;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 2px 0 0;
+  font-weight: 400;
+}
+
+.tabs-modern {
+  position: relative;
+  z-index: $z-base;
+}
+
+.tabs-modern :deep(.v-tab) {
+  color: rgba(255, 255, 255, 0.8) !important;
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0;
+  min-width: 120px;
+  transition: all $transition-base;
+}
+
+.tabs-modern :deep(.v-tab:hover) {
+  color: rgba(255, 255, 255, 1) !important;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: $radius-sm;
+}
+
+.tabs-modern :deep(.v-tab--selected) {
+  color: white !important;
+  font-weight: 600;
+}
+
+.tabs-modern :deep(.v-slider) {
+  background-color: $secondary-color !important;
+  height: 3px;
+  border-radius: 2px;
+}
+
+.tab-modern {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tab-modern .v-icon {
+  font-size: $font-xl !important;
+}
+
+/* Content Area */
+.content-modern {
+  background: white;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+.content-modern::-webkit-scrollbar {
+  width: $spacing-xs;
+}
+
+.content-modern::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.content-modern::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+
+.tab-content {
+  animation: fadeIn $transition-slow ease-out;
+}
+
+@keyframes fadeIn {
+  from { 
+    opacity: 0; 
+    transform: translateY(10px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+/* Status Header */
+.status-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-md;
+  padding: $spacing-lg;
+  background: linear-gradient(135deg, $bg-grey 0%, $bg-blue-light 100%);
+  border-radius: $radius-md;
+  border: 1px solid rgba(21, 101, 192, 0.1);
+  text-align: center;
+}
+
+.status-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: $shadow-sm;
+  flex-shrink: 0;
+  margin: 0 auto;
+}
+
+.status-text {
+  width: 100%;
+  text-align: center;
+}
+
+.status-title {
+  font-size: $font-lg;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0 0 $spacing-xs;
+  letter-spacing: -0.3px;
+  text-align: center;
+}
+
+.status-subtitle {
+  font-size: $font-base;
+  color: $text-secondary;
+  margin: 0;
+  line-height: 1.4;
+  text-align: center;
+}
+
+/* QR Scanner Modern */
+.qr-scanner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: $spacing-2xl 0;
+}
+
+.qr-placeholder {
+  width: 100%;
+  max-width: 300px;
+  height: 300px;
+  background: linear-gradient(135deg, $bg-grey 0%, $bg-blue-light 100%);
+  border-radius: $radius-lg;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 2px dashed $primary-color;
+  box-shadow: 0 4px 20px rgba(21, 101, 192, 0.1);
+  margin: 0 auto;
+}
+
+.qr-reader-container {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.qr-reader-wrapper {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  box-shadow: $shadow-xl;
+  background: #000;
+  position: relative;
+  max-width: 500px;
+  max-height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(21, 101, 192, 0.2);
+  margin: 0 auto;
+}
+
+.qr-reader-wrapper :deep(video) {
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: $radius-lg;
+  display: block !important;
+  object-fit: cover;
+  background: #000;
+  aspect-ratio: 1 / 1;
+}
+
+.qr-reader-wrapper :deep(canvas) {
+  display: none !important;
+}
+
+.qr-reader-wrapper :deep(#qr-reader__dashboard) {
+  display: none !important;
+}
+
+.qr-reader-wrapper :deep(#qr-reader__scan_region) {
+  border-radius: $radius-lg;
+  border: 3px solid rgba(21, 101, 192, 0.8) !important;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4) !important;
+  position: relative;
+}
+
+.qr-reader-wrapper :deep(#qr-reader__scan_region::before) {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  border: 3px solid rgba(21, 101, 192, 0.8);
+  border-radius: $radius-lg;
+  animation: pulse-border 2s ease-in-out infinite;
+}
+
+@keyframes pulse-border {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.02);
+  }
+}
+
+.qr-reader-wrapper :deep(#qr-reader__scan_region video) {
+  border-radius: $radius-lg;
+  width: 100% !important;
+  height: 100% !important;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+}
+
+.scanner-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 6px;
+  font-size: $font-sm;
+}
+
+.scanner-instruction {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: $spacing-md;
+  padding: 10px $spacing-md;
+  background: linear-gradient(135deg, rgba(21, 101, 192, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%);
+  border-radius: 10px;
+  color: $primary-color;
+  font-weight: 500;
+  font-size: $font-sm;
+  text-align: center;
+  border: 1px solid rgba(21, 101, 192, 0.2);
+}
+
+.scanner-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: $radius-lg;
+  z-index: $z-overlay;
+}
+
+.scanner-overlay {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+}
+
+.corner {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border: 3px solid $primary-color;
+}
+
+.corner-tl {
+  top: 0;
+  left: 0;
+  border-right: none;
+  border-bottom: none;
+  border-radius: $radius-sm 0 0 0;
+}
+
+.corner-tr {
+  top: 0;
+  right: 0;
+  border-left: none;
+  border-bottom: none;
+  border-radius: 0 $radius-sm 0 0;
+}
+
+.corner-bl {
+  bottom: 0;
+  left: 0;
+  border-right: none;
+  border-top: none;
+  border-radius: 0 0 0 $radius-sm;
+}
+
+.corner-br {
+  bottom: 0;
+  right: 0;
+  border-left: none;
+  border-top: none;
+  border-radius: 0 0 $radius-sm 0;
+}
+
+.scan-line {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, $primary-color, transparent);
+  top: 0;
+  animation: scan 2s linear infinite;
+  box-shadow: 0 0 10px $primary-color;
+}
+
+@keyframes scan {
+  0% { top: 0; }
+  100% { top: 100%; }
+}
+
+.qr-icon {
+  position: relative;
+  z-index: $z-base;
+  animation: breathe 2s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+/* Modern Buttons */
+.btn-primary-modern {
+  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%) !important;
+  color: white !important;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.3px;
+  border-radius: $radius-md !important;
+  padding: 14px $spacing-2xl !important;
+  transition: all $transition-bezier;
+  box-shadow: $shadow-primary !important;
+}
+
+.btn-primary-modern:hover {
+  transform: translateY(-2px);
+  box-shadow: $shadow-primary-hover !important;
+}
+
+.btn-primary-modern:active {
+  transform: translateY(0);
+}
+
+.btn-primary-modern:disabled {
+  opacity: 0.5;
+  transform: none !important;
+}
+
+.btn-stop-modern {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
+  color: white !important;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.3px;
+  border-radius: $radius-md !important;
+  padding: 14px $spacing-2xl !important;
+  transition: all $transition-bezier;
+  box-shadow: $shadow-error !important;
+}
+
+.btn-stop-modern:hover {
+  transform: translateY(-2px);
+  box-shadow: $shadow-error-hover !important;
+}
+
+.action-buttons {
+  margin-top: $spacing-xl;
+  display: flex;
+  justify-content: center;
+}
+
+.btn-centered {
+  width: auto !important;
+  min-width: 240px !important;
+  max-width: 320px !important;
+  margin: 0 auto !important;
+  display: block !important;
+}
+
+.btn-centered-small {
+  width: auto !important;
+  min-width: 180px !important;
+  margin: 0 auto;
+  display: block;
+}
+
+.btn-test-camera {
+  border-color: $primary-color !important;
+  color: $primary-color !important;
+}
+
+.btn-test-camera :deep(.v-btn__content) {
+  color: $primary-color !important;
+}
+
+.btn-test-camera :deep(.v-icon) {
+  color: $primary-color !important;
+  opacity: 1 !important;
+}
+
+/* Modern Inputs */
+.input-modern :deep(.v-field) {
+  border-radius: $radius-md;
+  font-size: $font-md;
+  background: $bg-light;
+  border: 1.5px solid $border-light;
+  transition: all $transition-base;
+}
+
+.input-modern :deep(.v-field--focused) {
+  background: white;
+  border-color: $primary-color;
+  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
+}
+
+.input-modern :deep(.v-field__input) {
+  padding-top: $spacing-md;
+  padding-bottom: $spacing-md;
+}
+
+.input-modern :deep(.v-label) {
+  font-weight: 500;
+  color: $text-secondary;
+}
+
+.quick-actions {
+  margin-top: $spacing-lg;
+  padding-top: $spacing-lg;
+  border-top: 1px solid $border-light;
+}
+
+.info-card {
+  display: flex;
+  justify-content: center;
+}
+
+.info-alert-centered {
+  width: 100%;
+}
+
+.info-alert-centered :deep(.v-alert__content) {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+}
+
+.quick-actions .v-btn {
+  transition: all $transition-base;
+  border-radius: $radius-md !important;
+  border: 1.5px solid $border-light !important;
+}
+
+.quick-actions .v-btn:hover {
+  transform: translateY(-2px);
+  border-color: $primary-color !important;
+  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
+}
+
+.quick-actions .v-btn :deep(.v-icon) {
+  opacity: 1 !important;
+  color: inherit !important;
+}
+
+.quick-actions .v-btn[color="primary"] {
+  color: $primary-color !important;
+  border-color: $primary-color !important;
+}
+
+.quick-actions .v-btn[color="primary"] :deep(.v-icon) {
+  color: $primary-color !important;
+}
+
+.qr-code-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $spacing-lg;
+  background: white;
+  border-radius: $radius-md;
+  box-shadow: $shadow-md;
+}
+
+.qr-code-container :deep(canvas) {
+  border-radius: $radius-sm;
+}
+
+.qr-display {
+  animation: slideUp 0.5s ease-out;
+}
+
+/* Stats Footer Modern */
+.stats-footer-modern {
+  animation: slideUp 0.5s ease-out 0.3s both;
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0; 
+    transform: translateY(10px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+.stat-card-modern {
+  background: white;
+  border-radius: $radius-md;
+  padding: $spacing-lg $spacing-md;
+  text-align: center;
+  border: 1px solid $border-light;
+  transition: all $transition-bezier;
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card-modern::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, $primary-color 0%, $primary-dark 100%);
+  transform: scaleX(0);
+  transition: transform $transition-base;
+}
+
+.stat-card-modern:hover {
+  transform: translateY(-4px);
+  box-shadow: $shadow-lg;
+  border-color: $primary-color;
+}
+
+.stat-card-modern:hover::before {
+  transform: scaleX(1);
+}
+
+.stat-icon-modern {
+  margin-bottom: $spacing-md;
+  display: inline-flex;
+  padding: $spacing-sm;
+  background: $bg-blue-light;
+  border-radius: 10px;
+}
+
+.stat-value {
+  font-size: $font-2xl;
+  font-weight: 700;
+  color: $text-primary;
+  margin-bottom: $spacing-xs;
+  letter-spacing: -0.5px;
+}
+
+.stat-label {
+  font-size: $font-sm;
+  color: $text-secondary;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.custom-snackbar {
+  margin-bottom: $spacing-lg;
+  margin-right: $spacing-lg;
+}
+
+.custom-snackbar :deep(.v-snackbar__wrapper) {
+  min-width: 300px;
+}
+
+/* History Dialog Styles */
+.history-list {
+  max-height: 500px;
+  overflow-y: auto;
+  padding-right: $spacing-sm;
+}
+
+.history-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.history-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.history-list::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+
+.history-list::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.history-item {
+  transition: all $transition-base;
+  border-left: 4px solid transparent;
+}
+
+.history-item:hover {
+  transform: translateX(4px);
+  box-shadow: $shadow-md;
+}
+
+.history-success {
+  border-left-color: #4caf50;
+  background: rgba(76, 175, 80, 0.05);
+}
+
+.history-failed {
+  border-left-color: #f44336;
+  background: rgba(244, 67, 54, 0.05);
+}
+
+.history-pending {
+  border-left-color: #ff9800;
+  background: rgba(255, 152, 0, 0.05);
+}
+
+/* Mobile Optimization */
+@media (max-width: 600px) {
+  .v-container.no-scroll-container {
+    padding: $spacing-sm !important;
+  }
+  
+  .main-card {
+    border-radius: $radius-lg !important;
+  }
+  
+  .header-modern {
+    padding: $spacing-lg $spacing-lg $spacing-md !important;
+  }
+  
+  .content-modern {
+    padding: $spacing-lg !important;
+    max-height: calc(100vh - 180px);
+  }
+  
+  .header-content {
+    flex-direction: column;
+    text-align: center;
+    gap: $spacing-md;
+  }
+  
+  .header-text {
+    text-align: center;
+  }
+  
+  .icon-circle {
+    width: 56px;
+    height: 56px;
+  }
+  
+  .title-modern {
+    font-size: $font-2xl;
+  }
+  
+  .subtitle-modern {
+    font-size: $font-base;
+  }
+  
+  .content-modern {
+    padding: $spacing-xl $spacing-lg !important;
+  }
+  
+  .status-header {
+    padding: $spacing-lg;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: $spacing-md;
+  }
+  
+  .status-icon-wrapper {
+    margin: 0 auto;
+  }
+  
+  .status-text {
+    text-align: center;
+    width: 100%;
+  }
+  
+  .status-title {
+    font-size: $font-lg;
+  }
+  
+  .status-subtitle {
+    font-size: $font-base;
+  }
+  
+  .qr-placeholder {
+    max-width: 100%;
+    height: 280px;
+  }
+  
+  .qr-reader-container {
+    max-width: 100%;
+  }
+  
+  .qr-reader-wrapper {
+    min-height: 300px;
+    max-height: 70vh;
+    border-radius: $radius-lg;
+  }
+  
+  .qr-reader-wrapper :deep(video) {
+    max-height: 70vh;
+    object-fit: contain;
+  }
+  
+  .scanner-instruction {
+    font-size: $font-sm;
+    padding: $spacing-md;
+  }
+  
+  .stats-footer-modern {
+    margin-top: $spacing-sm;
+  }
+  
+  .stat-card-modern {
+    padding: $spacing-md $spacing-sm;
+  }
+  
+  .stat-value {
+    font-size: $font-xl;
+  }
+  
+  .stat-label {
+    font-size: $font-xs;
+  }
+  
+  .stat-icon-modern {
+    margin-bottom: $spacing-sm;
+    padding: 6px;
+  }
+}
diff --git a/assets/scss/checkin/_dialogs.scss b/assets/scss/checkin/_dialogs.scss
new file mode 100644
index 0000000..9138abb
--- /dev/null
+++ b/assets/scss/checkin/_dialogs.scss
@@ -0,0 +1,230 @@
+// Check-in Page Dialog Styles
+@import 'variables';
+
+.blur-dialog :deep(.v-overlay__scrim) {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.dialog-card {
+  overflow: hidden;
+  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.dialog-header {
+  position: relative;
+  overflow: hidden;
+}
+
+.dialog-header::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
+  animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.icon-wrapper {
+  display: inline-block;
+  animation: bounceIn 0.6s ease-out 0.2s both;
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dialog-icon {
+  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
+}
+
+.success-header {
+  background: linear-gradient(135deg, $success-color 0%, $success-dark 100%);
+}
+
+.warning-header {
+  background: linear-gradient(135deg, $warning-color 0%, $warning-dark 100%);
+}
+
+.error-header {
+  background: linear-gradient(135deg, $error-color 0%, $error-dark 100%);
+}
+
+.icon-bg-error {
+  background: linear-gradient(135deg, $error-color 0%, $error-dark 100%);
+}
+
+.dialog-button {
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  transition: all $transition-base;
+}
+
+.dialog-button:hover {
+  transform: translateY(-2px);
+}
+
+/* Patient Info Card Styling */
+.patient-info-card {
+  background: rgba(250, 250, 250, 0.8) !important;
+  border-color: $border-grey !important;
+}
+
+.patient-info-label {
+  color: $text-grey !important;
+  font-weight: 500;
+  opacity: 0.9;
+}
+
+.patient-info-value {
+  color: $text-grey-dark !important;
+  font-weight: 500 !important;
+  opacity: 0.85;
+}
+
+.patient-info-icon {
+  opacity: 0.7;
+}
+
+/* Decorative Circles */
+.decorative-circles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: float 6s ease-in-out infinite;
+}
+
+.circle-1 {
+  width: 100px;
+  height: 100px;
+  top: -50px;
+  left: -50px;
+  animation-delay: 0s;
+}
+
+.circle-2 {
+  width: 150px;
+  height: 150px;
+  top: 50%;
+  right: -75px;
+  animation-delay: 2s;
+}
+
+.circle-3 {
+  width: 80px;
+  height: 80px;
+  bottom: -40px;
+  left: 20%;
+  animation-delay: 4s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: translate(20px, -20px) scale(1.1);
+    opacity: 0.5;
+  }
+}
+
+/* Message Container */
+.message-container {
+  text-align: center;
+}
+
+.message-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Status Badge */
+.status-badge {
+  display: inline-flex;
+}
+
+/* Instruction Box */
+.instruction-box {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.instruction-success {
+  background: rgba(76, 175, 80, 0.1);
+  border-color: rgba(76, 175, 80, 0.3);
+}
+
+.instruction-warning {
+  background: rgba(255, 152, 0, 0.1);
+  border-color: rgba(255, 152, 0, 0.3);
+}
+
+/* Icon Background */
+.icon-bg {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  position: relative;
+  z-index: 1;
+}
+
+.icon-bg-success {
+  background: linear-gradient(135deg, $success-color 0%, $success-dark 100%);
+}
+
+.icon-bg-warning {
+  background: linear-gradient(135deg, $warning-color 0%, $warning-dark 100%);
+}
+
+.icon-bg-error {
+  background: linear-gradient(135deg, $error-color 0%, $error-dark 100%);
+}
diff --git a/assets/scss/checkin/_variables.scss b/assets/scss/checkin/_variables.scss
new file mode 100644
index 0000000..bb52b37
--- /dev/null
+++ b/assets/scss/checkin/_variables.scss
@@ -0,0 +1,74 @@
+// Check-in Page Variables
+// Colors
+$primary-color: #1565C0;
+$primary-dark: #0D47A1;
+$secondary-color: #FB8C00;
+$success-color: #66BB6A;
+$success-dark: #43A047;
+$warning-color: #FFA726;
+$warning-dark: #FB8C00;
+$error-color: #EF5350;
+$error-dark: #E53935;
+
+// Background Colors
+$bg-white: #ffffff;
+$bg-light: #fafafa;
+$bg-grey: #f5f7fa;
+$bg-blue-light: #e3f2fd;
+
+// Text Colors
+$text-primary: #1a1a1a;
+$text-secondary: #6b7280;
+$text-grey: #9e9e9e;
+$text-grey-dark: #757575;
+
+// Border Colors
+$border-light: #e5e7eb;
+$border-grey: rgba(0, 0, 0, 0.08);
+
+// Shadow
+$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
+$shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.1);
+$shadow-primary: 0 4px 16px rgba(21, 101, 192, 0.3);
+$shadow-primary-hover: 0 8px 24px rgba(21, 101, 192, 0.4);
+$shadow-error: 0 4px 16px rgba(239, 68, 68, 0.3);
+$shadow-error-hover: 0 8px 24px rgba(239, 68, 68, 0.4);
+
+// Border Radius
+$radius-sm: 8px;
+$radius-md: 12px;
+$radius-lg: 16px;
+$radius-xl: 24px;
+$radius-full: 50%;
+
+// Spacing
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 12px;
+$spacing-lg: 16px;
+$spacing-xl: 20px;
+$spacing-2xl: 24px;
+$spacing-3xl: 28px;
+
+// Font Sizes
+$font-xs: 10px;
+$font-sm: 11px;
+$font-base: 13px;
+$font-md: 15px;
+$font-lg: 16px;
+$font-xl: 18px;
+$font-2xl: 20px;
+$font-3xl: 24px;
+
+// Transitions
+$transition-fast: 0.2s ease;
+$transition-base: 0.3s ease;
+$transition-slow: 0.4s ease;
+$transition-bezier: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+// Z-index
+$z-base: 1;
+$z-overlay: 10;
+$z-dialog: 100;
diff --git a/components/checkin/CheckInDialog.vue b/components/checkin/CheckInDialog.vue
new file mode 100644
index 0000000..59d426e
--- /dev/null
+++ b/components/checkin/CheckInDialog.vue
@@ -0,0 +1,171 @@
+<template>
+  <v-dialog 
+    :model-value="modelValue" 
+    @update:model-value="$emit('update:modelValue', $event)"
+    max-width="500" 
+    persistent
+    transition="dialog-transition"
+    scrim="rgba(0, 0, 0, 0.5)"
+    class="blur-dialog"
+  >
+    <v-card class="rounded-xl dialog-card" elevation="24">
+      <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : 'error-header'">
+        <div class="decorative-circles">
+          <div class="circle circle-1"></div>
+          <div class="circle circle-2"></div>
+          <div class="circle circle-3"></div>
+        </div>
+        
+        <div class="icon-wrapper mb-4">
+          <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : 'icon-bg-error'">
+            <v-icon size="64" color="white" class="dialog-icon">
+              {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-alert-circle' : 'mdi-close-circle' }}
+            </v-icon>
+          </div>
+        </div>
+        
+        <h2 class="text-h4 font-weight-bold text-white mb-2">
+          {{ lastCheckInResult?.success && infoAction === 'checkin' 
+            ? 'Check-in Berhasil!' 
+            : lastCheckInResult?.status === 'NOT_ALLOWED'
+            ? 'Belum Diizinkan'
+            : 'Check-in Gagal' }}
+        </h2>
+        
+        <div class="status-badge mt-3">
+          <v-chip 
+            :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
+            :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'"
+            size="small"
+            class="font-weight-bold"
+          >
+            <v-icon start size="16">
+              {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+            </v-icon>
+            {{ lastCheckInResult?.success && infoAction === 'checkin' 
+              ? 'Berhasil' 
+              : lastCheckInResult?.status === 'NOT_ALLOWED'
+              ? 'Menunggu'
+              : 'Gagal' }}
+          </v-chip>
+        </div>
+      </div>
+      
+      <v-card-text class="pa-8">
+        <div class="message-container">
+          <div class="message-icon mb-4">
+            <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'" size="32">
+              {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+            </v-icon>
+          </div>
+          
+          <div class="text-h6 font-weight-bold mb-3 text-center" style="white-space: pre-line;">{{ infoMessage }}</div>
+          
+          <v-divider class="my-4"></v-divider>
+          
+          <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
+            <div class="d-flex align-start">
+              <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : 'orange'" class="mr-3 mt-1">
+                {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
+              </v-icon>
+              <div>
+                <p class="text-body-1 font-weight-medium mb-1">
+                  {{ lastCheckInResult.success && infoAction === 'checkin' ? 'Status Check-in:' : 'Status:' }}
+                </p>
+                <p class="text-body-2 text-grey-darken-1">
+                  {{ lastCheckInResult.success && infoAction === 'checkin' 
+                    ? 'Check-in telah berhasil dilakukan. Pasien dapat melanjutkan ke tahap selanjutnya.' 
+                    : lastCheckInResult.status === 'NOT_ALLOWED'
+                    ? 'Mohon menunggu hingga antrean Anda dipanggil oleh petugas'
+                    : 'Proses check-in gagal. Silakan coba lagi atau hubungi petugas.' }}
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Patient Info Card -->
+          <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
+            <v-card-text class="py-3">
+              <div class="d-flex justify-space-between align-center">
+                <div class="d-flex align-center">
+                  <v-icon color="primary" class="mr-2 patient-info-icon">mdi-account-circle</v-icon>
+                  <div>
+                    <p class="text-caption patient-info-label mb-0">ID Pasien</p>
+                    <p class="text-body-1 patient-info-value mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
+                  </div>
+                </div>
+                <div class="text-right">
+                  <p class="text-caption patient-info-label mb-0">Waktu Scan</p>
+                  <p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </div>
+      </v-card-text>
+      
+      <v-card-actions class="pa-6 pt-0">
+        <v-row dense>
+          <v-col v-if="infoAction === 'kembali'" cols="12">
+            <v-btn
+              color="grey-darken-1"
+              class="text-white font-weight-bold text-none dialog-button"
+              size="x-large"
+              block
+              variant="flat"
+              @click="handleClose"
+              elevation="0"
+              prepend-icon="mdi-arrow-left"
+            >
+              Kembali
+            </v-btn>
+          </v-col>
+          <template v-else>
+            <v-col cols="12">
+              <v-btn
+                :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : 'primary'"
+                class="text-white font-weight-bold text-none dialog-button"
+                size="x-large"
+                block
+                variant="flat"
+                @click="handleClose"
+                elevation="4"
+                :prepend-icon="lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : 'mdi-close'"
+              >
+                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'Tutup' : 'Tutup' }}
+              </v-btn>
+            </v-col>
+          </template>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { CheckInResult, InfoAction } from '~/types/checkin'
+
+interface Props {
+  modelValue: boolean
+  lastCheckInResult: CheckInResult | null
+  infoMessage: string
+  infoAction: InfoAction
+  scannedData: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'close': []
+}>()
+
+const handleClose = () => {
+  emit('close')
+  emit('update:modelValue', false)
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/checkin/dialogs';
+</style>
diff --git a/components/checkin/CheckInHeader.vue b/components/checkin/CheckInHeader.vue
new file mode 100644
index 0000000..d5dee51
--- /dev/null
+++ b/components/checkin/CheckInHeader.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="header-modern">
+    <div class="header-content">
+      <div class="icon-circle">
+        <v-icon size="36" color="white">mdi-hospital-building</v-icon>
+      </div>
+      <div class="header-text">
+        <h1 class="title-modern">Check-in Pasien</h1>
+        <p class="subtitle-modern">Sistem Antrean Rumah Sakit</p>
+      </div>
+    </div>
+    
+    <!-- Tabs Minimalis -->
+    <v-tabs 
+      :model-value="modelValue" 
+      @update:model-value="updateTab"
+      align-tabs="center" 
+      class="tabs-modern mt-3"
+      bg-color="transparent"
+      slider-color="#FB8C00"
+      height="40"
+    >
+      <v-tab value="scan" class="tab-modern">
+        <v-icon size="20" class="mr-2">mdi-qrcode-scan</v-icon>
+        <span>Scan QR</span>
+      </v-tab>
+      <v-tab value="manual" class="tab-modern">
+        <v-icon size="20" class="mr-2">mdi-keyboard</v-icon>
+        <span>Manual</span>
+      </v-tab>
+      <v-tab value="generate" class="tab-modern">
+        <v-icon size="20" class="mr-2">mdi-qrcode</v-icon>
+        <span>Generate QR</span>
+      </v-tab>
+    </v-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TabValue } from '~/types/checkin'
+
+interface Props {
+  modelValue: TabValue
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: TabValue): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const updateTab = (value: TabValue) => {
+  emit('update:modelValue', value)
+}
+</script>
+
+<style scoped>
+/* Header Modern Minimalis */
+.header-modern {
+  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
+  padding: 20px 24px 16px;
+  position: relative;
+  overflow: hidden;
+}
+
+.header-modern::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.icon-circle {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.header-text {
+  text-align: center;
+}
+
+.title-modern {
+  font-size: 24px;
+  font-weight: 600;
+  color: white;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.subtitle-modern {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 2px 0 0;
+  font-weight: 400;
+}
+
+.tabs-modern {
+  position: relative;
+  z-index: 1;
+}
+
+.tabs-modern :deep(.v-tab) {
+  color: rgba(255, 255, 255, 0.8) !important;
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0;
+  min-width: 120px;
+  transition: all 0.3s ease;
+}
+
+.tabs-modern :deep(.v-tab:hover) {
+  color: rgba(255, 255, 255, 1) !important;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+}
+
+.tabs-modern :deep(.v-tab--selected) {
+  color: white !important;
+  font-weight: 600;
+}
+
+.tabs-modern :deep(.v-slider) {
+  background-color: #FB8C00 !important;
+  height: 3px;
+  border-radius: 2px;
+}
+</style>
diff --git a/components/checkin/GenerateQRTab.vue b/components/checkin/GenerateQRTab.vue
new file mode 100644
index 0000000..6d31aa7
--- /dev/null
+++ b/components/checkin/GenerateQRTab.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import QRCode from 'qrcode';
+import { onMounted } from 'vue';
+
+const props = defineProps<{
+  patientId: string;
+  status: string;
+  generatedQRData: string | null;
+  statusOptions: Array<{ title: string; value: string }>;
+  primaryColor: string;
+  generateRandomPatientId: () => string;
+}>();
+
+const emit = defineEmits<{
+  'update:patientId': [value: string];
+  'update:status': [value: string];
+  'generate': [];
+  'quick-generate': [patientId: string, status: string];
+  'download': [];
+  'copy': [];
+  'share': [];
+  'generate-random-id': [];
+}>();
+
+const localPatientId = computed({
+  get: () => props.patientId,
+  set: (value) => emit('update:patientId', value),
+});
+
+const localStatus = computed({
+  get: () => props.status,
+  set: (value) => emit('update:status', value),
+});
+
+const handleGenerate = () => {
+  emit('generate');
+};
+
+const handleQuickGenerate = (status: string) => {
+  const randomId = props.generateRandomPatientId();
+  emit('quick-generate', randomId, status);
+};
+
+const handleDownload = () => {
+  emit('download');
+};
+
+const handleCopy = () => {
+  emit('copy');
+};
+
+const handleShare = () => {
+  emit('share');
+};
+
+const handleGenerateRandomId = () => {
+  emit('generate-random-id');
+};
+
+const qrContainerRef = ref<HTMLDivElement | null>(null);
+
+// Function to render QR code
+const renderQRCode = async (data: string) => {
+  if (!data) {
+    return;
+  }
+
+  // Wait for DOM to be ready
+  await nextTick();
+  
+  // Wait a bit more to ensure ref is mounted (especially when switching tabs)
+  await new Promise(resolve => setTimeout(resolve, 150));
+  
+  if (!qrContainerRef.value) {
+    console.warn('QR container ref not available yet, retrying...');
+    // Retry after a short delay
+    setTimeout(() => {
+      if (qrContainerRef.value && data) {
+        renderQRCode(data);
+      }
+    }, 300);
+    return;
+  }
+
+  try {
+    // Clear previous content
+    qrContainerRef.value.innerHTML = '';
+    
+    // Generate QR code
+    const qrDataUrl = await QRCode.toDataURL(data, {
+      errorCorrectionLevel: 'M',
+      type: 'image/png',
+      quality: 0.92,
+      margin: 1,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF',
+      },
+      width: 300,
+    });
+    
+    // Create and append image
+    const img = document.createElement('img');
+    img.src = qrDataUrl;
+    img.alt = 'QR Code';
+    img.style.width = '100%';
+    img.style.maxWidth = '300px';
+    img.style.height = 'auto';
+    img.style.display = 'block';
+    img.style.margin = '0 auto';
+    qrContainerRef.value.appendChild(img);
+  } catch (error) {
+    console.error('Error generating QR code:', error);
+  }
+};
+
+// Watch for generatedQRData changes to render QR code
+watch(() => props.generatedQRData, async (newData) => {
+  if (newData) {
+    // Use setTimeout to ensure DOM is ready, especially when switching tabs
+    setTimeout(() => {
+      renderQRCode(newData);
+    }, 200);
+  } else if (qrContainerRef.value) {
+    // Clear container if data is cleared
+    qrContainerRef.value.innerHTML = '';
+  }
+}, { immediate: true });
+
+// Also watch for when component is mounted and ref is ready
+onMounted(() => {
+  if (props.generatedQRData) {
+    // Delay to ensure ref is mounted
+    setTimeout(() => {
+      renderQRCode(props.generatedQRData!);
+    }, 300);
+  }
+});
+</script>
+
+<template>
+  <div class="tab-content">
+    <!-- Status Header -->
+    <div class="status-header mb-3">
+      <div class="status-icon-wrapper">
+        <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
+      </div>
+      <div class="status-text">
+        <h3 class="status-title">Generate QR Code untuk Testing</h3>
+        <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
+      </div>
+    </div>
+
+    <!-- Quick Preset Buttons -->
+    <div class="mb-3">
+      <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
+      <v-row dense>
+        <v-col cols="6">
+          <v-btn
+            variant="outlined"
+            color="success"
+            size="small"
+            @click="handleQuickGenerate('ALLOWED')"
+            class="text-none"
+            block
+          >
+            <v-icon start size="16">mdi-check-circle</v-icon>
+            Test ALLOWED
+          </v-btn>
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            variant="outlined"
+            color="warning"
+            size="small"
+            @click="handleQuickGenerate('NOT_ALLOWED')"
+            class="text-none"
+            block
+          >
+            <v-icon start size="16">mdi-clock-alert</v-icon>
+            Test NOT_ALLOWED
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- Form Generate -->
+    <v-form @submit.prevent="handleGenerate">
+      <v-text-field
+        v-model="localPatientId"
+        label="ID Pasien"
+        placeholder="Contoh: P-123456"
+        prepend-inner-icon="mdi-identifier"
+        variant="outlined"
+        :color="primaryColor"
+        class="input-modern mb-3"
+        density="comfortable"
+        clearable
+        hide-details="auto"
+      >
+        <template #append-inner>
+          <v-btn
+            icon
+            size="small"
+            variant="text"
+            @click="handleGenerateRandomId"
+            title="Generate Random ID"
+          >
+            <v-icon size="20">mdi-refresh</v-icon>
+          </v-btn>
+        </template>
+      </v-text-field>
+
+      <v-select
+        v-model="localStatus"
+        label="Status Check-in"
+        :items="statusOptions"
+        prepend-inner-icon="mdi-shield-check"
+        variant="outlined"
+        :color="primaryColor"
+        class="input-modern mb-4"
+        density="comfortable"
+        hide-details="auto"
+      ></v-select>
+
+      <div class="d-flex justify-center">
+        <v-btn
+          class="btn-primary-modern btn-centered"
+          size="large"
+          type="submit"
+          elevation="0"
+          :disabled="!localPatientId"
+        >
+          <v-icon start size="20">mdi-qrcode-plus</v-icon>
+          Generate QR Code
+        </v-btn>
+      </div>
+    </v-form>
+
+    <!-- QR Code Display -->
+    <div v-if="props.generatedQRData" class="qr-display mt-6">
+      <v-card variant="outlined" class="pa-4">
+        <div class="text-center">
+          <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
+          <div ref="qrContainerRef" class="qr-code-container mb-4"></div>
+          
+          <v-chip :color="localStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
+            <v-icon start>{{ localStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
+            {{ localStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
+          </v-chip>
+
+          <p class="text-body-2 text-grey mb-4">
+            Data: {{ props.generatedQRData }}
+          </p>
+
+          <!-- Action Buttons -->
+          <v-row dense>
+            <v-col cols="4">
+              <v-btn
+                variant="outlined"
+                :color="primaryColor"
+                block
+                size="small"
+                @click="handleDownload"
+                class="text-none"
+              >
+                <v-icon start size="18">mdi-download</v-icon>
+                Download
+              </v-btn>
+            </v-col>
+            <v-col cols="4">
+              <v-btn
+                variant="outlined"
+                :color="primaryColor"
+                block
+                size="small"
+                @click="handleCopy"
+                class="text-none"
+              >
+                <v-icon start size="18">mdi-content-copy</v-icon>
+                Copy
+              </v-btn>
+            </v-col>
+            <v-col cols="4">
+              <v-btn
+                variant="outlined"
+                :color="primaryColor"
+                block
+                size="small"
+                @click="handleShare"
+                class="text-none"
+              >
+                <v-icon start size="18">mdi-share-variant</v-icon>
+                Share
+              </v-btn>
+            </v-col>
+          </v-row>
+        </div>
+      </v-card>
+
+      <!-- Instructions -->
+      <v-alert
+        type="success"
+        variant="tonal"
+        class="mt-4 text-body-2"
+      >
+        <template #prepend>
+          <v-icon>mdi-information</v-icon>
+        </template>
+        <strong>Cara menggunakan untuk Testing:</strong>
+        <ol class="ml-4 mt-2">
+          <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
+          <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
+          <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
+          <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
+          <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
+        </ol>
+      </v-alert>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '~/assets/scss/checkin/components';
+</style>
diff --git a/components/checkin/HistoryDialog.vue b/components/checkin/HistoryDialog.vue
new file mode 100644
index 0000000..366e0b4
--- /dev/null
+++ b/components/checkin/HistoryDialog.vue
@@ -0,0 +1,214 @@
+<template>
+  <v-dialog 
+    :model-value="modelValue" 
+    @update:model-value="$emit('update:modelValue', $event)"
+    max-width="800" 
+    persistent
+    transition="dialog-transition"
+    scrim="rgba(0, 0, 0, 0.5)"
+    class="blur-dialog"
+  >
+    <v-card class="rounded-xl dialog-card" elevation="24">
+      <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
+        <h2 class="text-h5 font-weight-bold text-white mb-2">
+          <v-icon color="white" class="mr-2">mdi-history</v-icon>
+          Riwayat Check-in
+        </h2>
+        <p class="text-body-2 text-white opacity-90">Daftar check-in yang telah dilakukan</p>
+      </div>
+      
+      <v-card-text class="pa-6">
+        <!-- Filter dan Search -->
+        <div class="mb-4">
+          <v-row dense>
+            <v-col cols="12" md="4">
+              <v-text-field
+                :model-value="search"
+                @update:model-value="$emit('update:search', $event)"
+                label="Cari ID Pasien atau Nomor Antrean"
+                prepend-inner-icon="mdi-magnify"
+                variant="outlined"
+                density="comfortable"
+                clearable
+                hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="3">
+              <v-text-field
+                :model-value="dateFilter"
+                @update:model-value="$emit('update:dateFilter', $event || '')"
+                type="date"
+                label="Filter Tanggal"
+                variant="outlined"
+                density="comfortable"
+                clearable
+                hide-details
+                class="date-picker-field"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="2">
+              <v-select
+                :model-value="statusFilter"
+                @update:model-value="$emit('update:statusFilter', $event)"
+                label="Filter Status"
+                :items="statusOptions"
+                variant="outlined"
+                density="comfortable"
+                hide-details
+                clearable
+              ></v-select>
+            </v-col>
+            <v-col cols="12" md="3">
+              <v-btn
+                color="error"
+                variant="outlined"
+                block
+                @click="$emit('clear')"
+                :disabled="history.length === 0"
+              >
+                <v-icon start>mdi-delete</v-icon>
+                Hapus Semua
+              </v-btn>
+            </v-col>
+          </v-row>
+        </div>
+
+        <!-- History List -->
+        <div v-if="filteredHistory.length > 0" class="history-list">
+          <v-card
+            v-for="(item, index) in filteredHistory"
+            :key="index"
+            variant="outlined"
+            class="mb-3 history-item"
+            :class="getStatusClass(item.status)"
+          >
+            <v-card-text class="pa-4">
+              <div class="d-flex justify-space-between align-start">
+                <div class="flex-grow-1">
+                  <div class="d-flex align-center mb-2">
+                    <v-chip
+                      :color="getStatusColor(item.status)"
+                      size="small"
+                      class="mr-2"
+                    >
+                      <v-icon start size="16">{{ getStatusIcon(item.status) }}</v-icon>
+                      {{ getStatusText(item.status) }}
+                    </v-chip>
+                    <v-chip
+                      color="grey-lighten-1"
+                      size="x-small"
+                      variant="text"
+                    >
+                      {{ item.method }}
+                    </v-chip>
+                  </div>
+                  
+                  <div class="mb-2">
+                    <p class="text-body-1 font-weight-bold mb-1">
+                      <v-icon size="18" class="mr-1" :color="primaryColor">mdi-account-circle</v-icon>
+                      ID Pasien: {{ item.patientId }}
+                    </p>
+                    <p v-if="item.queueNumber" class="text-body-2 text-grey mb-1">
+                      <v-icon size="16" class="mr-1">mdi-ticket</v-icon>
+                      Nomor Antrean: {{ item.queueNumber }}
+                    </p>
+                  </div>
+                  
+                  <div class="d-flex flex-wrap gap-2">
+                    <v-chip
+                      size="x-small"
+                      variant="outlined"
+                      color="grey-darken-1"
+                    >
+                      <v-icon start size="14">mdi-clock-outline</v-icon>
+                      {{ formatDateTime(item.checkInTime) }}
+                    </v-chip>
+                    <v-chip
+                      v-if="item.checkInDate"
+                      size="x-small"
+                      variant="outlined"
+                      color="grey-darken-1"
+                    >
+                      <v-icon start size="14">mdi-calendar</v-icon>
+                      {{ formatDate(item.checkInDate) }}
+                    </v-chip>
+                  </div>
+                </div>
+                
+                <div class="ml-4">
+                  <v-btn
+                    icon
+                    size="small"
+                    variant="text"
+                    color="error"
+                    @click="$emit('delete-item', index)"
+                  >
+                    <v-icon>mdi-delete-outline</v-icon>
+                  </v-btn>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="text-center py-12">
+          <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-history</v-icon>
+          <p class="text-h6 text-grey mb-2">Belum ada riwayat check-in</p>
+          <p class="text-body-2 text-grey">Riwayat check-in akan muncul di sini setelah Anda melakukan check-in</p>
+        </div>
+      </v-card-text>
+      
+      <v-card-actions class="pa-6 pt-0">
+        <v-spacer></v-spacer>
+        <v-btn
+          color="primary"
+          class="text-white font-weight-bold text-none"
+          size="large"
+          variant="flat"
+          @click="$emit('update:modelValue', false)"
+          prepend-icon="mdi-close"
+        >
+          Tutup
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { CheckInHistoryItem, HistoryStatus } from '~/types/checkin'
+
+interface Props {
+  modelValue: boolean
+  search: string
+  dateFilter: string
+  statusFilter: HistoryStatus | ''
+  filteredHistory: CheckInHistoryItem[]
+  history: CheckInHistoryItem[] | ReadonlyArray<CheckInHistoryItem>
+  statusOptions: Array<{ title: string; value: string }>
+  primaryColor: string
+  getStatusColor: (status: string) => string
+  getStatusIcon: (status: string) => string
+  getStatusText: (status: string) => string
+  getStatusClass: (status: string) => string
+  formatDateTime: (dateString: string) => string
+  formatDate: (dateString: string) => string
+}
+
+defineProps<Props>()
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+  'update:search': [value: string]
+  'update:dateFilter': [value: string]
+  'update:statusFilter': [value: HistoryStatus | '']
+  'delete-item': [index: number]
+  'clear': []
+}>()
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/checkin/components';
+@import '~/assets/scss/checkin/dialogs';
+</style>
diff --git a/components/checkin/ManualInputTab.vue b/components/checkin/ManualInputTab.vue
new file mode 100644
index 0000000..6ce0649
--- /dev/null
+++ b/components/checkin/ManualInputTab.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string;
+  primaryColor: string;
+  secondaryColor: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  'submit': [];
+  'open-history': [];
+}>();
+
+const manualForm = ref<{ validate: () => boolean; resetValidation: () => void; reset: () => void } | null>(null);
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+const handleSubmit = () => {
+  emit('submit');
+};
+
+const handleOpenHistory = () => {
+  emit('open-history');
+};
+
+// Expose form ref for parent component
+defineExpose({
+  form: manualForm,
+});
+</script>
+
+<template>
+  <div class="tab-content">
+    <!-- Status Header -->
+    <div class="status-header mb-3">
+      <div class="status-icon-wrapper">
+        <v-icon :color="secondaryColor" size="24">mdi-keyboard</v-icon>
+      </div>
+      <div class="status-text">
+        <h3 class="status-title">Input Manual</h3>
+        <p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
+      </div>
+    </div>
+
+    <v-form @submit.prevent="handleSubmit" ref="manualForm">
+      <v-text-field
+        v-model="localValue"
+        label="Nomor Antrean / ID Pasien"
+        placeholder="Contoh: P12345"
+        prepend-inner-icon="mdi-account-card-details"
+        variant="outlined"
+        :color="primaryColor"
+        class="input-modern mb-4"
+        required
+        :rules="[v => !!v || 'Field ini wajib diisi']"
+        density="comfortable"
+        hide-details="auto"
+      >
+        <template v-slot:append-inner>
+          <v-icon :color="localValue ? 'success' : 'grey'" size="20">
+            {{ localValue ? 'mdi-check-circle' : 'mdi-circle-outline' }}
+          </v-icon>
+        </template>
+      </v-text-field>
+
+      <v-btn
+        class="btn-primary-modern btn-centered"
+        size="large"
+        type="submit"
+        elevation="0"
+      >
+        <v-icon start size="20">mdi-login</v-icon>
+        Check-in Sekarang
+      </v-btn>
+    </v-form>
+
+    <!-- Quick Access Buttons -->
+    <div class="quick-actions mt-4">
+      <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
+      <v-row dense>
+        <v-col cols="12">
+          <v-btn
+            variant="outlined"
+            :color="primaryColor"
+            block
+            size="small"
+            class="text-none"
+            @click="handleOpenHistory"
+          >
+            <v-icon start size="18">mdi-history</v-icon>
+            Riwayat
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '~/assets/scss/checkin/components';
+</style>
diff --git a/components/checkin/QRHistoryDialog.vue b/components/checkin/QRHistoryDialog.vue
new file mode 100644
index 0000000..3e37959
--- /dev/null
+++ b/components/checkin/QRHistoryDialog.vue
@@ -0,0 +1,179 @@
+<template>
+  <v-dialog 
+    :model-value="modelValue" 
+    @update:model-value="$emit('update:modelValue', $event)"
+    max-width="800" 
+    persistent
+    transition="dialog-transition"
+    scrim="rgba(0, 0, 0, 0.5)"
+    class="blur-dialog"
+  >
+    <v-card class="rounded-xl dialog-card" elevation="24">
+      <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);">
+        <h2 class="text-h5 font-weight-bold text-white mb-2">
+          <v-icon color="white" class="mr-2">mdi-qrcode-scan</v-icon>
+          Riwayat QR Scan
+        </h2>
+        <p class="text-body-2 text-white opacity-90">Daftar QR code yang telah di-scan</p>
+      </div>
+      
+      <v-card-text class="pa-6">
+        <!-- Filter dan Search -->
+        <div class="mb-4">
+          <v-row dense>
+            <v-col cols="12" md="5">
+              <v-text-field
+                :model-value="search"
+                @update:model-value="$emit('update:search', $event)"
+                label="Cari Data QR Code"
+                prepend-inner-icon="mdi-magnify"
+                variant="outlined"
+                density="comfortable"
+                clearable
+                hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="4">
+              <v-text-field
+                :model-value="dateFilter"
+                @update:model-value="$emit('update:dateFilter', $event || '')"
+                type="date"
+                label="Filter Tanggal"
+                variant="outlined"
+                density="comfortable"
+                clearable
+                hide-details
+                class="date-picker-field"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="3">
+              <v-btn
+                color="error"
+                variant="outlined"
+                block
+                @click="$emit('clear')"
+                :disabled="history.length === 0"
+              >
+                <v-icon start>mdi-delete</v-icon>
+                Hapus Semua
+              </v-btn>
+            </v-col>
+          </v-row>
+        </div>
+
+        <!-- QR History List -->
+        <div v-if="filteredHistory.length > 0" class="history-list">
+          <v-card
+            v-for="(item, index) in filteredHistory"
+            :key="index"
+            variant="outlined"
+            class="mb-3 history-item"
+          >
+            <v-card-text class="pa-4">
+              <div class="d-flex justify-space-between align-start">
+                <div class="flex-grow-1">
+                  <div class="mb-2">
+                    <p class="text-body-1 font-weight-bold mb-1">
+                      <v-icon size="18" class="mr-1" :color="primaryColor">mdi-qrcode</v-icon>
+                      Data QR: {{ item.data }}
+                    </p>
+                  </div>
+                  
+                  <div class="d-flex flex-wrap gap-2">
+                    <v-chip
+                      size="x-small"
+                      variant="outlined"
+                      color="grey-darken-1"
+                    >
+                      <v-icon start size="14">mdi-clock-outline</v-icon>
+                      {{ item.time }}
+                    </v-chip>
+                    <v-chip
+                      size="x-small"
+                      variant="outlined"
+                      color="grey-darken-1"
+                    >
+                      <v-icon start size="14">mdi-calendar</v-icon>
+                      {{ item.date }}
+                    </v-chip>
+                  </div>
+                </div>
+                
+                <div class="ml-4">
+                  <v-btn
+                    icon
+                    size="small"
+                    variant="text"
+                    color="primary"
+                    @click="$emit('use-data', item.data)"
+                  >
+                    <v-icon>mdi-refresh</v-icon>
+                  </v-btn>
+                  <v-btn
+                    icon
+                    size="small"
+                    variant="text"
+                    color="error"
+                    @click="$emit('delete-item', index)"
+                  >
+                    <v-icon>mdi-delete-outline</v-icon>
+                  </v-btn>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="text-center py-12">
+          <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-qrcode-scan</v-icon>
+          <p class="text-h6 text-grey mb-2">Belum ada riwayat QR scan</p>
+          <p class="text-body-2 text-grey">Riwayat QR scan akan muncul di sini setelah Anda melakukan scan</p>
+        </div>
+      </v-card-text>
+      
+      <v-card-actions class="pa-6 pt-0">
+        <v-spacer></v-spacer>
+        <v-btn
+          color="primary"
+          class="text-white font-weight-bold text-none"
+          size="large"
+          variant="flat"
+          @click="$emit('update:modelValue', false)"
+          prepend-icon="mdi-close"
+        >
+          Tutup
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { ScannedQRHistoryItem } from '~/types/checkin'
+
+interface Props {
+  modelValue: boolean
+  search: string
+  dateFilter: string
+  filteredHistory: ScannedQRHistoryItem[]
+  history: ScannedQRHistoryItem[] | ReadonlyArray<ScannedQRHistoryItem>
+  primaryColor: string
+}
+
+defineProps<Props>()
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+  'update:search': [value: string]
+  'update:dateFilter': [value: string]
+  'use-data': [data: string]
+  'delete-item': [index: number]
+  'clear': []
+}>()
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/checkin/components';
+@import '~/assets/scss/checkin/dialogs';
+</style>
diff --git a/components/checkin/QRScanTab.vue b/components/checkin/QRScanTab.vue
new file mode 100644
index 0000000..3aee18c
--- /dev/null
+++ b/components/checkin/QRScanTab.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+const props = defineProps<{
+  isScanning: boolean;
+  hasCamera: boolean;
+  cameraChecking: boolean;
+  cameraReady: boolean;
+  primaryColor: string;
+}>();
+
+const emit = defineEmits<{
+  'start-scanning': [];
+  'stop-scanning': [];
+  'test-camera': [];
+  'open-history': [];
+  'open-qr-history': [];
+}>();
+
+const handleStartScanning = () => {
+  emit('start-scanning');
+};
+
+const handleStopScanning = () => {
+  emit('stop-scanning');
+};
+
+const handleTestCamera = () => {
+  emit('test-camera');
+};
+
+const handleOpenHistory = () => {
+  emit('open-history');
+};
+
+const handleOpenQRHistory = () => {
+  emit('open-qr-history');
+};
+</script>
+
+<template>
+  <div class="tab-content">
+    <!-- Status Header -->
+    <div class="status-header mb-3">
+      <div class="status-icon-wrapper">
+        <v-icon :color="primaryColor" size="24">mdi-qrcode-scan</v-icon>
+      </div>
+      <div class="status-text">
+        <h3 class="status-title">
+          {{ isScanning ? 'Arahkan Kamera ke QR Code' : 'Siap untuk Scan QR Code' }}
+        </h3>
+        <p class="status-subtitle">
+          {{ isScanning ? 'Pastikan QR code terlihat jelas dan tidak terpotong' : 'Klik tombol di bawah untuk memulai scan' }}
+        </p>
+      </div>
+    </div>
+    
+    <!-- Camera Status Check -->
+    <div v-if="cameraChecking" class="text-center mb-4">
+      <v-progress-circular
+        indeterminate
+        :color="primaryColor"
+        size="24"
+        class="mr-2"
+      ></v-progress-circular>
+      <span class="text-body-2 text-grey">Memeriksa ketersediaan kamera...</span>
+    </div>
+
+    <!-- Camera Not Available Warning -->
+    <v-alert
+      v-else-if="!hasCamera && !isScanning"
+      type="warning"
+      variant="tonal"
+      class="mb-4"
+    >
+      <template #prepend>
+        <v-icon>mdi-camera-off</v-icon>
+      </template>
+      <div>
+        <p class="font-weight-bold mb-1">Kamera tidak terdeteksi</p>
+        <p class="text-body-2 mb-0">
+          Perangkat Anda tidak memiliki kamera atau kamera tidak dapat diakses. 
+          Silakan gunakan tab <strong>Manual</strong> untuk input data secara manual.
+        </p>
+      </div>
+    </v-alert>
+
+    <!-- QR Scanner Area dengan webcam -->
+    <div class="qr-scanner-container mb-4">
+      <div v-if="!isScanning" class="qr-placeholder">
+        <div class="scanner-overlay">
+          <div class="corner corner-tl"></div>
+          <div class="corner corner-tr"></div>
+          <div class="corner corner-bl"></div>
+          <div class="corner corner-br"></div>
+          <div class="scan-line"></div>
+        </div>
+        <v-icon size="64" :color="primaryColor" class="qr-icon">mdi-qrcode-scan</v-icon>
+      </div>
+      <div v-else class="qr-reader-container">
+        <div class="scanner-status mb-2">
+          <v-chip color="success" size="small" class="mr-2">
+            <v-icon start size="16">mdi-camera</v-icon>
+            Kamera Aktif
+          </v-chip>
+          <span class="text-caption text-grey">Preview kamera sedang berjalan</span>
+        </div>
+        <div id="qr-reader" class="qr-reader-wrapper">
+          <div v-if="!cameraReady" class="scanner-loading-overlay">
+            <v-progress-circular
+              indeterminate
+              color="white"
+              size="48"
+            ></v-progress-circular>
+            <p class="text-white mt-4">Memuat kamera...</p>
+          </div>
+        </div>
+        <div class="scanner-instruction">
+          <v-icon :color="primaryColor" size="20" class="mr-2">mdi-information</v-icon>
+          <span class="text-body-2">Arahkan kamera ke QR code. Pastikan QR code berada dalam kotak pemindaian.</span>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Action Button Minimalis -->
+    <div class="action-buttons">
+      <v-btn
+        v-if="!isScanning"
+        class="btn-primary-modern btn-centered"
+        size="large"
+        elevation="0"
+        @click="handleStartScanning"
+        :disabled="!hasCamera && !cameraChecking"
+      >
+        <v-icon start size="20">mdi-camera</v-icon>
+        {{ hasCamera ? 'Mulai Scan QR' : 'Kamera Tidak Tersedia' }}
+      </v-btn>
+      <v-btn
+        v-else
+        class="btn-stop-modern btn-centered"
+        size="large"
+        elevation="0"
+        @click="handleStopScanning"
+      >
+        <v-icon start size="20">mdi-camera-off</v-icon>
+        Stop Scan
+      </v-btn>
+    </div>
+
+    <!-- Info tambahan -->
+    <div class="info-card mt-3">
+      <v-alert
+        type="info"
+        variant="tonal"
+        :color="primaryColor"
+        class="text-body-2 info-alert-centered"
+        density="compact"
+      >
+        <div class="d-flex align-center justify-center">
+          <v-icon size="16" class="mr-2">mdi-lightbulb-outline</v-icon>
+          <span style="font-size: 12px;">Tips: Pastikan pencahayaan cukup untuk hasil scan optimal</span>
+        </div>
+      </v-alert>
+    </div>
+
+    <!-- Test Camera Button (Debug) -->
+    <div class="test-camera-section mt-2 mb-2">
+      <v-btn
+        variant="outlined"
+        color="primary"
+        size="small"
+        class="text-none btn-centered-small btn-test-camera"
+        @click="handleTestCamera"
+      >
+        <v-icon start size="18" color="#1565C0">mdi-camera</v-icon>
+        Test Kamera
+      </v-btn>
+      <p class="text-caption text-grey text-center mt-1" style="font-size: 11px;">
+        Klik untuk menguji apakah browser dapat mengakses kamera
+      </p>
+    </div>
+
+    <!-- Quick Access Buttons -->
+    <div class="quick-actions mt-4">
+      <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
+      <v-row dense>
+        <v-col cols="12">
+          <v-btn
+            variant="outlined"
+            :color="primaryColor"
+            block
+            size="small"
+            class="text-none"
+            @click="handleOpenHistory"
+          >
+            <v-icon start size="18">mdi-history</v-icon>
+            Riwayat Check-in
+          </v-btn>
+        </v-col>
+        <v-col cols="12">
+          <v-btn
+            variant="outlined"
+            color="primary"
+            block
+            size="small"
+            class="text-none"
+            @click="handleOpenQRHistory"
+          >
+            <v-icon start size="18" color="#1565C0">mdi-qrcode-scan</v-icon>
+            Riwayat QR Scan
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '~/assets/scss/checkin/components';
+</style>
diff --git a/components/checkin/StatsFooter.vue b/components/checkin/StatsFooter.vue
new file mode 100644
index 0000000..3b84410
--- /dev/null
+++ b/components/checkin/StatsFooter.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="stats-footer-modern mt-3">
+    <v-row dense>
+      <v-col cols="4">
+        <div class="stat-card-modern">
+          <div class="stat-icon-modern">
+            <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
+          </div>
+          <div class="stat-value">{{ todayCount }}</div>
+          <div class="stat-label">Hari Ini</div>
+        </div>
+      </v-col>
+      <v-col cols="4">
+        <div class="stat-card-modern">
+          <div class="stat-icon-modern">
+            <v-icon color="success" size="20">mdi-check-circle</v-icon>
+          </div>
+          <div class="stat-value">{{ completedCount }}</div>
+          <div class="stat-label">Selesai</div>
+        </div>
+      </v-col>
+      <v-col cols="4">
+        <div class="stat-card-modern">
+          <div class="stat-icon-modern">
+            <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
+          </div>
+          <div class="stat-value">{{ pendingCount }}</div>
+          <div class="stat-label">Menunggu</div>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CheckInHistoryItem } from '~/types/checkin'
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '~/constants/checkin'
+
+interface Props {
+  history: CheckInHistoryItem[]
+  primaryColor?: string
+  secondaryColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  primaryColor: PRIMARY_COLOR,
+  secondaryColor: SECONDARY_COLOR,
+})
+
+// Computed untuk menghitung stats
+const todayCount = computed(() => {
+  const today = new Date().toDateString()
+  return props.history.filter(item => {
+    const itemDate = new Date(item.checkInDate).toDateString()
+    return itemDate === today
+  }).length
+})
+
+const completedCount = computed(() => {
+  return props.history.filter(item => 
+    item.status === 'success' || item.status === 'ALLOWED'
+  ).length
+})
+
+const pendingCount = computed(() => {
+  return props.history.filter(item => 
+    item.status === 'pending' || item.status === 'NOT_ALLOWED'
+  ).length
+})
+</script>
+
+<style scoped>
+/* Stats Footer Modern */
+.stats-footer-modern {
+  animation: slideUp 0.5s ease-out 0.3s both;
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0; 
+    transform: translateY(10px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+.stat-card-modern {
+  background: white;
+  border-radius: 12px;
+  padding: 16px 12px;
+  text-align: center;
+  border: 1px solid #e5e7eb;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card-modern::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.stat-card-modern:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: #1565C0;
+}
+
+.stat-card-modern:hover::before {
+  transform: scaleX(1);
+}
+
+.stat-icon-modern {
+  margin-bottom: 12px;
+  display: inline-flex;
+  padding: 8px;
+  background: #e3f2fd;
+  border-radius: 10px;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 4px;
+  letter-spacing: -0.5px;
+}
+
+.stat-label {
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+</style>
diff --git a/composables/useCheckIn.ts b/composables/useCheckIn.ts
new file mode 100644
index 0000000..509eb62
--- /dev/null
+++ b/composables/useCheckIn.ts
@@ -0,0 +1,203 @@
+import { ref, readonly } from 'vue'
+import type { CheckInResult } from '~/types/checkin'
+
+export interface UseCheckInOptions {
+  showSnackbar: (title: string, message: string, color: string, icon: string) => void
+  saveToHistory: (item: {
+    patientId: string
+    queueNumber?: string
+    status: string
+    checkInTime: string
+    checkInDate: string
+    method: string
+  }) => void
+  saveSuccessfulScan: (qrData: string) => void
+  onCheckInSuccess: (result: {
+    success: boolean
+    patientId: string
+    status: string
+    message: string
+    action: 'checkin' | 'kembali'
+  }) => void
+  autoCloseDialog: () => void
+}
+
+export const useCheckIn = (options: UseCheckInOptions) => {
+  const { showSnackbar, saveToHistory, saveSuccessfulScan, onCheckInSuccess, autoCloseDialog } = options
+
+  // State
+  const lastCheckInResult = ref<CheckInResult | null>(null)
+
+  // Perform check-in
+  const performCheckIn = async (data: string, method: string = 'QR Scan'): Promise<boolean> => {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    const success = Math.random() < 0.8
+    
+    // History akan disimpan di processQRCode setelah performCheckIn selesai
+    // Jadi kita hanya perlu return hasil check-in
+    return success
+  }
+
+  // Process QR code (rename dari onDetect)
+  const processQRCode = async (decodedText: string) => {
+    const [patientId, status] = decodedText.split('|')
+    
+    // Validasi format QR code
+    if (!patientId || !status) {
+      showSnackbar('Error', 'QR Code tidak valid. Format harus: ID_PASIEN|STATUS', 'error', 'mdi-close-circle')
+      return
+    }
+    
+    // Cek apakah pasien diperbolehkan check-in
+    const isAllowed = status === 'ALLOWED'
+    
+    if (isAllowed) {
+      // Jika diperbolehkan, langsung proses check-in
+      const checkinSuccess = await performCheckIn(decodedText, 'QR Scan')
+      
+      // Simpan hasil check-in
+      lastCheckInResult.value = {
+        success: checkinSuccess,
+        patientId: patientId,
+        status: status
+      }
+      
+      // Simpan ke history check-in dengan status hasil check-in
+      saveToHistory({
+        patientId: patientId || 'Unknown',
+        status: checkinSuccess ? 'success' : 'failed',
+        checkInTime: new Date().toISOString(),
+        checkInDate: new Date().toISOString(),
+        method: 'QR Scan'
+      })
+      
+      // Tampilkan dialog dengan hasil check-in
+      if (checkinSuccess) {
+        // Simpan QR code yang berhasil di-scan untuk mencegah scan ulang
+        saveSuccessfulScan(decodedText)
+        onCheckInSuccess({
+          success: true,
+          patientId: patientId,
+          status: status,
+          message: `✅ Check-in Berhasil!\n\nPasien ${patientId} berhasil melakukan check-in.`,
+          action: 'checkin'
+        })
+      } else {
+        onCheckInSuccess({
+          success: false,
+          patientId: patientId,
+          status: status,
+          message: `❌ Check-in Gagal!\n\nPasien ${patientId} diperbolehkan check-in, namun proses check-in gagal. Silakan coba lagi.`,
+          action: 'checkin'
+        })
+      }
+      
+      autoCloseDialog()
+    } else {
+      // Jika belum diperbolehkan, tampilkan pesan
+      lastCheckInResult.value = {
+        success: false,
+        patientId: patientId,
+        status: status
+      }
+      
+      // Simpan ke history check-in untuk NOT_ALLOWED
+      saveToHistory({
+        patientId: patientId || 'Unknown',
+        status: 'NOT_ALLOWED',
+        checkInTime: new Date().toISOString(),
+        checkInDate: new Date().toISOString(),
+        method: 'QR Scan'
+      })
+      
+      onCheckInSuccess({
+        success: false,
+        patientId: patientId,
+        status: status,
+        message: `⏳ Belum Diizinkan Check-in\n\nAntrean Pasien ${patientId} belum diperbolehkan check-in. Mohon menunggu hingga antrean Anda dipanggil.`,
+        action: 'kembali'
+      })
+      
+      autoCloseDialog()
+    }
+  }
+
+  // Check-in manual
+  const checkInManual = async (
+    patientId: string,
+    onSuccess: () => void,
+    onError: () => void
+  ) => {
+    try {
+      if (!patientId || !patientId.trim()) {
+        showSnackbar('Error', 'Mohon isi nomor antrean atau ID pasien', 'error', 'mdi-alert')
+        onError()
+        return
+      }
+
+      const trimmedPatientId = patientId.trim()
+
+      // Simulasi check-in manual
+      const success = await performCheckIn(`${trimmedPatientId}|ALLOWED`, 'Manual')
+      
+      // Simpan hasil check-in
+      lastCheckInResult.value = {
+        success: success,
+        patientId: trimmedPatientId,
+        status: 'ALLOWED',
+      }
+      
+      // Simpan ke history check-in
+      saveToHistory({
+        patientId: trimmedPatientId,
+        status: success ? 'success' : 'failed',
+        checkInTime: new Date().toISOString(),
+        checkInDate: new Date().toISOString(),
+        method: 'Manual'
+      })
+      
+      if (success) {
+        // Simpan QR code yang berhasil untuk mencegah double antrian (jika menggunakan format yang sama)
+        saveSuccessfulScan(`${trimmedPatientId}|ALLOWED`)
+        showSnackbar('Berhasil!', 'Check-in manual berhasil dilakukan.', 'success', 'mdi-check-circle')
+        
+        // Update info dialog
+        onCheckInSuccess({
+          success: true,
+          patientId: trimmedPatientId,
+          status: 'ALLOWED',
+          message: `✅ Check-in Berhasil!\n\nPasien ${trimmedPatientId} berhasil melakukan check-in secara manual.`,
+          action: 'checkin'
+        })
+        
+        autoCloseDialog()
+        onSuccess()
+      } else {
+        showSnackbar('Gagal!', 'Check-in manual gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle')
+        
+        // Update info dialog untuk gagal
+        onCheckInSuccess({
+          success: false,
+          patientId: trimmedPatientId,
+          status: 'ALLOWED',
+          message: `❌ Check-in Gagal!\n\nPasien ${trimmedPatientId} gagal melakukan check-in secara manual. Silakan coba lagi.`,
+          action: 'checkin'
+        })
+        
+        autoCloseDialog()
+        onError()
+      }
+    } catch (error) {
+      console.error('Error in checkInManual:', error)
+      showSnackbar('Error', 'Terjadi kesalahan saat melakukan check-in. Silakan coba lagi.', 'error', 'mdi-alert')
+      onError()
+    }
+  }
+
+  return {
+    lastCheckInResult: readonly(lastCheckInResult),
+    performCheckIn,
+    processQRCode,
+    checkInManual,
+  }
+}
diff --git a/composables/useCheckInHistory.ts b/composables/useCheckInHistory.ts
new file mode 100644
index 0000000..897a180
--- /dev/null
+++ b/composables/useCheckInHistory.ts
@@ -0,0 +1,276 @@
+import { ref, computed, readonly } from 'vue'
+import type { CheckInHistoryItem, ScannedQRHistoryItem, HistoryStatus } from '~/types/checkin'
+import { HISTORY_STORAGE_KEY, SCANNED_QR_STORAGE_KEY, MAX_HISTORY_ITEMS, MAX_SCANNED_QR_ITEMS, HISTORY_STATUS_OPTIONS } from '~/constants/checkin'
+
+export const useCheckInHistory = () => {
+  const checkInHistory = ref<CheckInHistoryItem[]>([])
+  const scannedQRHistory = ref<ScannedQRHistoryItem[]>([])
+  const historySearch = ref('')
+  const historyStatusFilter = ref<HistoryStatus | ''>('')
+  const historyDateFilter = ref<string>('')
+
+  const loadHistory = () => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(HISTORY_STORAGE_KEY)
+      if (stored) {
+        try {
+          checkInHistory.value = JSON.parse(stored)
+        } catch (e) {
+          console.error('Error loading history:', e)
+          checkInHistory.value = []
+        }
+      }
+    }
+  }
+
+  const saveToHistory = (item: CheckInHistoryItem) => {
+    const historyItem = {
+      ...item,
+      queueNumber: item.queueNumber || `ANT-${Date.now()}`,
+    }
+    
+    checkInHistory.value.unshift(historyItem)
+    
+    // Simpan maksimal item sesuai constant
+    if (checkInHistory.value.length > MAX_HISTORY_ITEMS) {
+      checkInHistory.value = checkInHistory.value.slice(0, MAX_HISTORY_ITEMS)
+    }
+    
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value))
+    }
+  }
+
+  const deleteHistoryItem = (index: number) => {
+    checkInHistory.value.splice(index, 1)
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value))
+    }
+  }
+
+  const clearHistory = () => {
+    checkInHistory.value = []
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem(HISTORY_STORAGE_KEY)
+    }
+  }
+
+  const loadScannedQRHistory = () => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(SCANNED_QR_STORAGE_KEY)
+      if (stored) {
+        try {
+          scannedQRHistory.value = JSON.parse(stored)
+        } catch (e) {
+          console.error('Error loading QR history:', e)
+          scannedQRHistory.value = []
+        }
+      } else {
+        scannedQRHistory.value = []
+      }
+    }
+  }
+
+  const saveScannedQRData = (qrData: string) => {
+    if (typeof window !== 'undefined') {
+      const scannedQRs = JSON.parse(localStorage.getItem(SCANNED_QR_STORAGE_KEY) || '[]')
+      scannedQRs.unshift({
+        data: qrData,
+        timestamp: new Date().toISOString(),
+        date: new Date().toLocaleDateString('id-ID'),
+        time: new Date().toLocaleTimeString('id-ID')
+      })
+      
+      // Simpan maksimal item sesuai constant
+      if (scannedQRs.length > MAX_SCANNED_QR_ITEMS) {
+        scannedQRs.pop()
+      }
+      
+      localStorage.setItem(SCANNED_QR_STORAGE_KEY, JSON.stringify(scannedQRs))
+    }
+  }
+
+  const clearQRHistory = () => {
+    scannedQRHistory.value = []
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem(SCANNED_QR_STORAGE_KEY)
+    }
+  }
+
+  const deleteQRHistoryItem = (index: number) => {
+    scannedQRHistory.value.splice(index, 1)
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(SCANNED_QR_STORAGE_KEY, JSON.stringify(scannedQRHistory.value))
+    }
+  }
+
+  const filteredHistory = computed(() => {
+    let filtered = [...checkInHistory.value]
+    
+    // Filter by search
+    if (historySearch.value) {
+      const search = historySearch.value.toLowerCase()
+      filtered = filtered.filter(item => 
+        item.patientId.toLowerCase().includes(search) ||
+        (item.queueNumber && item.queueNumber.toLowerCase().includes(search))
+      )
+    }
+    
+    // Filter by status
+    if (historyStatusFilter.value) {
+      filtered = filtered.filter(item => {
+        if (historyStatusFilter.value === 'success') {
+          return item.status === 'ALLOWED' || item.status === 'success'
+        } else if (historyStatusFilter.value === 'failed') {
+          return item.status === 'NOT_ALLOWED' || item.status === 'failed'
+        }
+        return true
+      })
+    }
+    
+    // Filter by date
+    if (historyDateFilter.value && historyDateFilter.value.trim() !== '') {
+      filtered = filtered.filter(item => {
+        if (!item.checkInDate) return false
+        try {
+          const itemDate = new Date(item.checkInDate)
+          const filterDate = new Date(historyDateFilter.value)
+          
+          // Validate dates
+          if (isNaN(itemDate.getTime()) || isNaN(filterDate.getTime())) {
+            return false
+          }
+          
+          // Compare dates (year, month, day only, ignore time)
+          const itemDateStr = itemDate.toISOString().substring(0, 10)
+          const filterDateStr = filterDate.toISOString().substring(0, 10)
+          
+          return itemDateStr === filterDateStr
+        } catch (e) {
+          console.error('Error filtering by date:', e)
+          return false
+        }
+      })
+    }
+    
+    return filtered
+  })
+
+  const filteredQRHistory = computed(() => {
+    let filtered = [...scannedQRHistory.value]
+    
+    // Filter by search
+    if (historySearch.value) {
+      const search = historySearch.value.toLowerCase()
+      filtered = filtered.filter(item => 
+        item.data.toLowerCase().includes(search)
+      )
+    }
+    
+    // Filter by date
+    if (historyDateFilter.value && historyDateFilter.value.trim() !== '') {
+      filtered = filtered.filter(item => {
+        if (!item.timestamp && !item.date) return false
+        try {
+          let itemDate: Date
+          if (item.timestamp) {
+            itemDate = new Date(item.timestamp)
+          } else {
+            // Parse Indonesian date format (dd/mm/yyyy or dd mmm yyyy)
+            itemDate = new Date(item.date)
+          }
+          const filterDate = new Date(historyDateFilter.value)
+          
+          // Validate dates
+          if (isNaN(itemDate.getTime()) || isNaN(filterDate.getTime())) {
+            return false
+          }
+          
+          // Compare dates (year, month, day only, ignore time)
+          const itemDateStr = itemDate.toISOString().substring(0, 10)
+          const filterDateStr = filterDate.toISOString().substring(0, 10)
+          
+          return itemDateStr === filterDateStr
+        } catch (e) {
+          console.error('Error filtering QR history by date:', e)
+          return false
+        }
+      })
+    }
+    
+    return filtered
+  })
+
+  const getStatusColor = (status: string) => {
+    if (status === 'ALLOWED' || status === 'success') return 'success'
+    if (status === 'NOT_ALLOWED' || status === 'failed') return 'error'
+    return 'warning'
+  }
+
+  const getStatusIcon = (status: string) => {
+    if (status === 'ALLOWED' || status === 'success') return 'mdi-check-circle'
+    if (status === 'NOT_ALLOWED' || status === 'failed') return 'mdi-close-circle'
+    return 'mdi-clock-alert'
+  }
+
+  const getStatusText = (status: string) => {
+    if (status === 'ALLOWED' || status === 'success') return 'Berhasil'
+    if (status === 'NOT_ALLOWED' || status === 'failed') return 'Gagal'
+    return 'Pending'
+  }
+
+  const getStatusClass = (status: string) => {
+    if (status === 'ALLOWED' || status === 'success') return 'history-success'
+    if (status === 'NOT_ALLOWED' || status === 'failed') return 'history-failed'
+    return 'history-pending'
+  }
+
+  const formatDateTime = (dateString: string) => {
+    const date = new Date(dateString)
+    return date.toLocaleTimeString('id-ID', { 
+      hour: '2-digit', 
+      minute: '2-digit',
+      second: '2-digit'
+    })
+  }
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('id-ID', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric'
+    })
+  }
+
+  // Load history on initialization
+  if (typeof window !== 'undefined') {
+    loadHistory()
+    loadScannedQRHistory()
+  }
+
+  return {
+    checkInHistory: readonly(checkInHistory),
+    scannedQRHistory: readonly(scannedQRHistory),
+    historySearch,
+    historyStatusFilter,
+    historyDateFilter,
+    filteredHistory,
+    filteredQRHistory,
+    loadHistory,
+    saveToHistory,
+    deleteHistoryItem,
+    clearHistory,
+    loadScannedQRHistory,
+    saveScannedQRData,
+    clearQRHistory,
+    deleteQRHistoryItem,
+    getStatusColor,
+    getStatusIcon,
+    getStatusText,
+    getStatusClass,
+    formatDateTime,
+    formatDate,
+    historyStatusOptions: [...HISTORY_STATUS_OPTIONS] as Array<{ title: string; value: string }>,
+  }
+}
diff --git a/composables/useQRGenerator.ts b/composables/useQRGenerator.ts
new file mode 100644
index 0000000..92c0418
--- /dev/null
+++ b/composables/useQRGenerator.ts
@@ -0,0 +1,211 @@
+import { ref, readonly, computed } from 'vue'
+import { nextTick } from 'vue'
+import type { CheckInStatus } from '~/types/checkin'
+
+export interface UseQRGeneratorOptions {
+  showSnackbar: (title: string, message: string, color: string, icon: string) => void
+  generateRandomPatientId: () => string
+}
+
+export const useQRGenerator = (options: UseQRGeneratorOptions) => {
+  const { showSnackbar, generateRandomPatientId } = options
+
+  // State
+  const generatePatientId = ref(generateRandomPatientId())
+  const generateStatus = ref<CheckInStatus>('ALLOWED')
+  const generatedQRData = ref('')
+
+  // Generate random patient ID
+  const generateRandomId = () => {
+    generatePatientId.value = generateRandomPatientId()
+  }
+
+  // Quick generate QR for testing
+  const generateQuickQR = (patientId: string, status: string) => {
+    generatePatientId.value = patientId
+    generateStatus.value = status as CheckInStatus
+    generateQRCode()
+  }
+
+  // Generate QR Code function
+  const generateQRCode = async () => {
+    if (!generatePatientId.value) {
+      showSnackbar('Error', 'Mohon isi ID Pasien', 'error', 'mdi-alert')
+      return
+    }
+
+    generatedQRData.value = `${generatePatientId.value}|${generateStatus.value}`
+    
+    await nextTick()
+    
+    // Clear previous QR code
+    const qrContainer = document.getElementById('qrcode')
+    if (qrContainer) {
+      qrContainer.innerHTML = ''
+      
+      try {
+        // Use qrcode package that's already installed
+        const QRCode = (await import('qrcode')).default
+        
+        // Create QR code as data URL
+        const qrDataUrl = await QRCode.toDataURL(generatedQRData.value, {
+          errorCorrectionLevel: 'M',
+          type: 'image/png',
+          quality: 0.92,
+          margin: 1,
+          color: {
+            dark: '#000000',
+            light: '#FFFFFF'
+          },
+          width: 300
+        })
+        
+        // Create img element and append to container
+        const img = document.createElement('img')
+        img.src = qrDataUrl
+        img.alt = 'QR Code'
+        img.style.width = '100%'
+        img.style.maxWidth = '300px'
+        img.style.height = 'auto'
+        img.style.display = 'block'
+        img.style.margin = '0 auto'
+        qrContainer.appendChild(img)
+        
+        console.log('QR Code created successfully:', generatedQRData.value)
+        showSnackbar('Berhasil!', 'QR Code berhasil di-generate. Silakan scan untuk testing', 'success', 'mdi-check-circle')
+      } catch (error) {
+        console.error('Error creating QR code:', error)
+        showSnackbar('Error', 'Gagal membuat QR Code. Silakan coba lagi', 'error', 'mdi-alert')
+      }
+    } else {
+      showSnackbar('Error', 'Container QR Code tidak ditemukan', 'error', 'mdi-alert')
+    }
+  }
+
+  // Download QR Code
+  const downloadQR = async () => {
+    const img = document.querySelector('#qrcode img') as HTMLImageElement
+    if (img && img.src) {
+      try {
+        // Convert img src (data URL) to blob
+        const response = await fetch(img.src)
+        const blob = await response.blob()
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        const fileName = `QR-Test-${generatePatientId.value}-${generateStatus.value}-${Date.now()}.png`
+        link.download = fileName
+        link.href = url
+        link.style.display = 'none'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+        showSnackbar('Berhasil!', `QR Code berhasil didownload: ${fileName}`, 'success', 'mdi-download')
+      } catch (error) {
+        console.error('Download error:', error)
+        // Fallback: use img src directly
+        const link = document.createElement('a')
+        link.download = `QR-Test-${generatePatientId.value}-${generateStatus.value}.png`
+        link.href = img.src
+        link.click()
+        showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download')
+      }
+    } else {
+      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert')
+    }
+  }
+
+  // Copy QR Code to Clipboard
+  const copyQRToClipboard = async () => {
+    const img = document.querySelector('#qrcode img') as HTMLImageElement
+    if (img && img.src) {
+      try {
+        // Convert img src to blob
+        const response = await fetch(img.src)
+        const blob = await response.blob()
+        
+        try {
+          await navigator.clipboard.write([
+            new ClipboardItem({
+              'image/png': blob
+            })
+          ])
+          showSnackbar('Berhasil!', 'QR Code berhasil disalin ke clipboard', 'success', 'mdi-content-copy')
+        } catch (err: any) {
+          console.error('Clipboard error:', err)
+          // Fallback: download instead
+          showSnackbar('Info', 'Copy ke clipboard tidak didukung. Gunakan tombol Download.', 'info', 'mdi-information')
+        }
+      } catch (error) {
+        console.error('Copy error:', error)
+        showSnackbar('Error', 'Gagal menyalin QR Code', 'error', 'mdi-alert')
+      }
+    } else {
+      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert')
+    }
+  }
+
+  // Share QR Code
+  const shareQR = async () => {
+    const img = document.querySelector('#qrcode img') as HTMLImageElement
+    if (img && img.src) {
+      try {
+        // Convert img src to blob
+        const response = await fetch(img.src)
+        const blob = await response.blob()
+        const file = new File([blob], `QR-Test-${generatePatientId.value}-${generateStatus.value}.png`, { type: 'image/png' })
+        
+        if (navigator.share && navigator.canShare({ files: [file] })) {
+          try {
+            await navigator.share({
+              files: [file],
+              title: 'QR Code Check-in Test',
+              text: `QR Code untuk testing: ${generatedQRData.value}`
+            })
+            showSnackbar('Berhasil!', 'QR Code berhasil dibagikan', 'success', 'mdi-share')
+          } catch (err: any) {
+            if (err.name !== 'AbortError') {
+              // Fallback to copy or download
+              copyQRToClipboard()
+            }
+          }
+        } else {
+          // Fallback: try copy to clipboard
+          copyQRToClipboard()
+        }
+      } catch (error) {
+        console.error('Share error:', error)
+        showSnackbar('Error', 'Gagal membagikan QR Code', 'error', 'mdi-alert')
+      }
+    } else {
+      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert')
+    }
+  }
+
+  // Computed untuk v-model
+  const generatePatientIdModel = computed({
+    get: () => generatePatientId.value,
+    set: (value: string) => {
+      generatePatientId.value = value
+    }
+  })
+
+  const generateStatusModel = computed({
+    get: () => generateStatus.value,
+    set: (value: CheckInStatus) => {
+      generateStatus.value = value
+    }
+  })
+
+  return {
+    generatePatientId: generatePatientIdModel,
+    generateStatus: generateStatusModel,
+    generatedQRData: readonly(generatedQRData),
+    generateRandomId,
+    generateQuickQR,
+    generateQRCode,
+    downloadQR,
+    copyQRToClipboard,
+    shareQR,
+  }
+}
diff --git a/composables/useQRScanner.ts b/composables/useQRScanner.ts
new file mode 100644
index 0000000..1a3a686
--- /dev/null
+++ b/composables/useQRScanner.ts
@@ -0,0 +1,574 @@
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { QR_CODE_ID, SCAN_DEBOUNCE_MS, SUCCESSFUL_SCANS_KEY } from '~/constants/checkin'
+
+export const useQRScanner = (
+  onQRDetected: (decodedText: string) => void,
+  showSnackbar: (title: string, message: string, color: string, icon: string) => void
+) => {
+  // Scanner state
+  const isScanning = ref(false)
+  const hasCamera = ref(false)
+  const cameraChecking = ref(true)
+  const cameraReady = ref(false)
+  let html5QrCode: any = null
+  const qrCodeId = QR_CODE_ID
+  let lastScannedQR: string | null = null
+  let lastScanTime: number = 0
+  let isProcessing = false // Flag untuk mencegah pemrosesan berulang
+
+  // Daftar QR code yang sudah berhasil di-scan (untuk mencegah double antrian)
+  const successfulScans = ref<Set<string>>(new Set())
+
+  // Detect mobile device
+  const isMobile = ref(false)
+  if (typeof window !== 'undefined') {
+    isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+                     (window.innerWidth <= 768)
+  }
+
+  // Load successful scans dari localStorage
+  const loadSuccessfulScans = () => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(SUCCESSFUL_SCANS_KEY)
+      if (stored) {
+        try {
+          const scansArray = JSON.parse(stored)
+          successfulScans.value = new Set(scansArray)
+        } catch (e) {
+          console.error('Error loading successful scans:', e)
+          successfulScans.value = new Set()
+        }
+      }
+    }
+  }
+
+  // Simpan successful scan ke localStorage
+  const saveSuccessfulScan = (qrData: string) => {
+    if (typeof window !== 'undefined') {
+      successfulScans.value.add(qrData)
+      const scansArray = Array.from(successfulScans.value)
+      localStorage.setItem(SUCCESSFUL_SCANS_KEY, JSON.stringify(scansArray))
+    }
+  }
+
+  // Cek apakah QR code sudah pernah berhasil di-scan
+  const isQRCodeAlreadyScanned = (qrData: string): boolean => {
+    return successfulScans.value.has(qrData)
+  }
+
+  // Check camera availability
+  const checkCameraAvailability = async () => {
+    cameraChecking.value = true
+    hasCamera.value = false
+    
+    // Check if browser supports mediaDevices
+    if (typeof navigator === 'undefined' || !navigator.mediaDevices) {
+      console.error('navigator.mediaDevices is not supported')
+      showSnackbar('Error', 'Browser tidak mendukung akses kamera. Pastikan menggunakan HTTPS atau localhost.', 'error', 'mdi-camera-off')
+      cameraChecking.value = false
+      return
+    }
+
+    try {
+      // First, request permission by trying to get user media
+      // This is required for enumerateDevices to return device labels
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true })
+      
+      // Stop the stream immediately after getting permission
+      stream.getTracks().forEach(track => track.stop())
+      
+      // Now enumerate devices (will have labels after permission granted)
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      const videoDevices = devices.filter(device => device.kind === 'videoinput')
+      
+      hasCamera.value = videoDevices.length > 0
+      
+      if (hasCamera.value) {
+        console.log(`Found ${videoDevices.length} camera(s):`, videoDevices.map(d => d.label || d.deviceId))
+      } else {
+        console.warn('No video input devices found')
+        showSnackbar('Warning', 'Tidak ada kamera yang terdeteksi', 'warning', 'mdi-camera-off')
+      }
+    } catch (err: any) {
+      console.error('Error checking camera:', err)
+      hasCamera.value = false
+      
+      let errorMessage = 'Gagal mengakses kamera. '
+      if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
+        errorMessage += 'Izin kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.'
+      } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
+        errorMessage += 'Tidak ada kamera yang ditemukan.'
+      } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
+        errorMessage += 'Kamera sedang digunakan aplikasi lain.'
+      } else if (err.name === 'OverconstrainedError' || err.name === 'ConstraintNotSatisfiedError') {
+        errorMessage += 'Kamera tidak memenuhi persyaratan.'
+      } else {
+        errorMessage += `Error: ${err.message || err.name}`
+      }
+      
+      showSnackbar('Error', errorMessage, 'error', 'mdi-camera-off')
+    } finally {
+      cameraChecking.value = false
+    }
+  }
+
+  // Test camera function for debugging
+  const testCamera = async () => {
+    try {
+      showSnackbar('Info', 'Menguji akses kamera...', 'info', 'mdi-camera')
+      
+      if (typeof navigator === 'undefined') {
+        showSnackbar('Error', 'navigator is undefined - pastikan di browser, bukan SSR', 'error', 'mdi-alert')
+        return
+      }
+      
+      if (!navigator.mediaDevices) {
+        showSnackbar('Error', 'navigator.mediaDevices is undefined - pastikan menggunakan HTTPS atau localhost', 'error', 'mdi-alert')
+        return
+      }
+      
+      if (!navigator.mediaDevices.getUserMedia) {
+        showSnackbar('Error', 'getUserMedia is not supported', 'error', 'mdi-alert')
+        return
+      }
+      
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        video: {
+          facingMode: 'user',
+          width: { ideal: 640 },
+          height: { ideal: 480 }
+        } 
+      })
+      
+      showSnackbar('Success', 'Kamera berhasil diakses!', 'success', 'mdi-check-circle')
+      
+      // Stop stream after 2 seconds
+      setTimeout(() => {
+        stream.getTracks().forEach(track => track.stop())
+      }, 2000)
+      
+    } catch (err: any) {
+      console.error('Test camera error:', err)
+      let errorMsg = `Error: ${err.name || 'Unknown'}`
+      if (err.message) errorMsg += ` - ${err.message}`
+      showSnackbar('Error', errorMsg, 'error', 'mdi-alert')
+    }
+  }
+
+  // Handle QR scan success
+  const handleQRScanSuccess = (decodedText: string) => {
+    // Validasi data QR - cek di awal sebelum log apapun
+    if (!decodedText || decodedText.trim() === '') {
+      return // Silent return untuk empty QR code
+    }
+    
+    // Cegah pemrosesan berulang jika sedang memproses
+    if (isProcessing) {
+      return // Silent return untuk mencegah spam log
+    }
+    
+    // Debounce: cegah scan berulang dalam waktu singkat - cek sebelum log
+    const now = Date.now()
+    if (lastScannedQR === decodedText && (now - lastScanTime) < SCAN_DEBOUNCE_MS) {
+      return // Silent return untuk debounce
+    }
+    
+    // Cek apakah QR code sudah pernah berhasil di-scan (mencegah double antrian)
+    if (isQRCodeAlreadyScanned(decodedText)) {
+      console.log('⏭️ Scan diabaikan: QR code sudah pernah berhasil di-scan')
+      showSnackbar('Peringatan', 'QR Code ini sudah pernah berhasil di-scan. Tidak dapat digunakan lagi untuk mencegah double antrian.', 'warning', 'mdi-alert-circle')
+      return
+    }
+    
+    // Set flag processing dan update last scan info
+    isProcessing = true
+    lastScannedQR = decodedText
+    lastScanTime = now
+    
+    console.log('🎯 QR Scan Success! Data:', decodedText)
+    
+    // Scanner tetap berjalan untuk memungkinkan scan QR code berikutnya
+    
+    // Proses data QR melalui callback
+    try {
+      onQRDetected(decodedText)
+    } catch (error) {
+      console.error('Error processing QR data:', error)
+      showSnackbar('Error', 'Gagal memproses data QR Code', 'error', 'mdi-alert')
+    } finally {
+      // Reset flag setelah selesai memproses (dengan delay kecil untuk memastikan callback selesai)
+      setTimeout(() => {
+        isProcessing = false
+      }, SCAN_DEBOUNCE_MS)
+    }
+  }
+
+  // QR Scanner Functions
+  const startScanning = async () => {
+    // Check camera first
+    if (!hasCamera.value) {
+      await checkCameraAvailability()
+      if (!hasCamera.value) {
+        showSnackbar('Error', 'Kamera tidak tersedia. Silakan gunakan input manual atau pastikan kamera terhubung.', 'error', 'mdi-camera-off')
+        return
+      }
+    }
+
+    try {
+      // Set scanning state first to render the element
+      isScanning.value = true
+      
+      // Wait for DOM to update and element to be rendered
+      await nextTick()
+      
+      // Wait a bit more to ensure element is fully rendered
+      await new Promise(resolve => setTimeout(resolve, 100))
+      
+      // Check if element exists
+      const qrElement = document.getElementById(qrCodeId)
+      if (!qrElement) {
+        console.error(`Element with id "${qrCodeId}" not found in DOM`)
+        isScanning.value = false
+        showSnackbar('Error', 'Element scanner tidak ditemukan. Silakan refresh halaman.', 'error', 'mdi-alert')
+        return
+      }
+      
+      // Dynamic import html5-qrcode
+      if (!html5QrCode) {
+        const { Html5Qrcode: Html5QrcodeClass } = await import('html5-qrcode')
+        html5QrCode = new Html5QrcodeClass(qrCodeId)
+        console.log('Html5Qrcode initialized')
+      }
+
+      if (html5QrCode) {
+        cameraReady.value = false
+        
+        // Konfigurasi kamera untuk mobile dan desktop
+        const cameraConfig = isMobile.value 
+          ? { facingMode: "environment" } // Mobile: gunakan kamera belakang
+          : { facingMode: "user" } // Desktop: gunakan kamera depan (webcam)
+        
+        // Video constraints yang lebih fleksibel
+        const baseVideoConstraints = isMobile.value
+          ? {
+              facingMode: "environment",
+              width: { ideal: 640, min: 320 },
+              height: { ideal: 480, min: 240 }
+            }
+          : {
+              facingMode: "user",
+              width: { ideal: 1280, min: 640 },
+              height: { ideal: 720, min: 480 }
+            }
+        
+        // Tambahkan advanced constraints hanya jika didukung
+        const videoConstraints: any = { ...baseVideoConstraints }
+        
+        console.log('Starting QR scanner with config:', {
+          isMobile: isMobile.value,
+          cameraConfig,
+          videoConstraints
+        })
+        
+        try {
+          await html5QrCode.start(
+            cameraConfig,
+            {
+              fps: isMobile.value ? 15 : 20, // FPS optimal untuk deteksi
+              qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+                // QR box dengan ukuran lebih besar untuk deteksi lebih mudah
+                const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight)
+                // Gunakan 80-90% dari viewfinder untuk area scanning yang lebih besar
+                const percentageSize = Math.floor(minEdgeSize * 0.80)
+                // Atau ukuran tetap yang lebih besar
+                const fixedSize = isMobile.value ? 250 : 250
+                // Gunakan yang lebih besar antara percentage atau fixed
+                const qrboxSize = Math.max(percentageSize, fixedSize)
+                
+                // Pastikan tidak melebihi viewfinder
+                const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80)
+                
+                console.log('QR Box size:', finalSize, 'Viewfinder:', viewfinderWidth, 'x', viewfinderHeight)
+                
+                return {
+                  width: Math.max(finalSize, 250), // Minimum 250px untuk deteksi lebih baik
+                  height: Math.max(finalSize, 250)
+                }
+              },
+              aspectRatio: 1.0,
+              disableFlip: false,
+              videoConstraints: videoConstraints,
+              rememberLastUsedCamera: true,
+              showTorchButtonIfSupported: true,
+              // Tambahkan opsi untuk meningkatkan deteksi
+              verbose: false // Set true untuk debugging
+            },
+            (decodedText: string, decodedResult: any) => {
+              // QR Code berhasil di-scan
+              console.log('✅ QR Code detected:', decodedText)
+              console.log('📊 Decoded result:', decodedResult)
+              
+              // Validasi dan proses QR code
+              if (decodedText && decodedText.trim() !== '') {
+                handleQRScanSuccess(decodedText)
+              } else {
+                console.warn('Empty QR code detected')
+              }
+            },
+            (errorMessage: string) => {
+              // Log error untuk debugging - hanya log error penting
+              // Error ini biasanya muncul terus menerus saat tidak ada QR code yang terdeteksi
+              // Jadi kita filter untuk menghindari spam console
+              if (errorMessage) {
+                // Filter out common non-critical errors
+                const isCriticalError = !errorMessage.includes('NotFoundException') && 
+                                       !errorMessage.includes('No QR') &&
+                                       !errorMessage.includes('QR code parse error') &&
+                                       !errorMessage.includes('QR code parse error, error') &&
+                                       !errorMessage.includes('QR code decode error')
+                
+                if (isCriticalError) {
+                  console.warn('QR Scanner warning:', errorMessage)
+                }
+              }
+            }
+          )
+          
+          // Set camera ready setelah sedikit delay untuk memastikan video sudah dimuat
+          setTimeout(() => {
+            cameraReady.value = true
+            console.log('Camera ready, scanner is active')
+          }, 500)
+          
+          showSnackbar('Info', 'Scanner aktif. Arahkan kamera ke QR code dan pastikan pencahayaan cukup', 'info', 'mdi-camera')
+        } catch (cameraError: any) {
+          console.error('Camera error:', cameraError)
+          
+          // Jika kamera belakang tidak tersedia di mobile, coba kamera depan
+          if (isMobile.value && cameraError.name === 'NotFoundError') {
+            try {
+              console.log('Trying front camera as fallback...')
+              await html5QrCode.start(
+                { facingMode: "user" },
+                {
+                  fps: 15,
+                  qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+                    const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight)
+                    const percentageSize = Math.floor(minEdgeSize * 0.85)
+                    const fixedSize = 300
+                    const qrboxSize = Math.max(percentageSize, fixedSize)
+                    const finalSize = Math.min(qrboxSize, minEdgeSize * 0.95)
+                    
+                    return {
+                      width: Math.max(finalSize, 250),
+                      height: Math.max(finalSize, 250)
+                    }
+                  },
+                  aspectRatio: 1.0,
+                  disableFlip: false,
+                  videoConstraints: {
+                    facingMode: "user",
+                    width: { ideal: 640, min: 320 },
+                    height: { ideal: 480, min: 240 }
+                  },
+                  rememberLastUsedCamera: true,
+                  verbose: false
+                },
+                (decodedText: string, decodedResult: any) => {
+                  console.log('✅ QR Code detected (front camera):', decodedText)
+                  if (decodedText && decodedText.trim() !== '') {
+                    handleQRScanSuccess(decodedText)
+                  }
+                },
+                (errorMessage: string) => {
+                  if (errorMessage) {
+                    const isCriticalError = !errorMessage.includes('NotFoundException') && 
+                                           !errorMessage.includes('No QR') &&
+                                           !errorMessage.includes('QR code parse error') &&
+                                           !errorMessage.includes('QR code decode error')
+                    
+                    if (isCriticalError) {
+                      console.warn('QR Scanner (front) warning:', errorMessage)
+                    }
+                  }
+                }
+              )
+              
+              setTimeout(() => {
+                cameraReady.value = true
+              }, 500)
+              
+              showSnackbar('Info', 'Menggunakan kamera depan. Arahkan QR code ke kamera', 'info', 'mdi-camera')
+            } catch (fallbackError: any) {
+              console.error('Fallback camera also failed:', fallbackError)
+              throw cameraError // Throw original error
+            }
+          } else {
+            // Coba menggunakan deviceId langsung jika facingMode gagal
+            try {
+              console.log('Trying to get camera devices...')
+              const devices = await navigator.mediaDevices.enumerateDevices()
+              const videoDevices = devices.filter(device => device.kind === 'videoinput')
+              
+              if (videoDevices.length > 0) {
+                // Gunakan kamera pertama yang tersedia
+                const deviceId = videoDevices[0].deviceId
+                console.log('Using device:', deviceId, videoDevices[0].label)
+                
+                await html5QrCode.start(
+                  { deviceId: { exact: deviceId } },
+                  {
+                    fps: isMobile.value ? 15 : 20,
+                    qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+                      const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight)
+                      const percentageSize = Math.floor(minEdgeSize * 0.80)
+                      const fixedSize = isMobile.value ? 300 : 400
+                      const qrboxSize = Math.max(percentageSize, fixedSize)
+                      const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80)
+                      
+                      return {
+                        width: Math.max(finalSize, 250),
+                        height: Math.max(finalSize, 250)
+                      }
+                    },
+                    aspectRatio: 1.0,
+                    disableFlip: false,
+                    videoConstraints: {
+                      deviceId: { exact: deviceId },
+                      width: { ideal: isMobile.value ? 640 : 1280, min: isMobile.value ? 320 : 640 },
+                      height: { ideal: isMobile.value ? 480 : 720, min: isMobile.value ? 240 : 480 }
+                    },
+                    rememberLastUsedCamera: true,
+                    verbose: false
+                  },
+                  (decodedText: string, decodedResult: any) => {
+                    console.log('✅ QR Code detected (deviceId):', decodedText)
+                    if (decodedText && decodedText.trim() !== '') {
+                      handleQRScanSuccess(decodedText)
+                    }
+                  },
+                  (errorMessage: string) => {
+                    if (errorMessage) {
+                      const isCriticalError = !errorMessage.includes('NotFoundException') && 
+                                             !errorMessage.includes('No QR') &&
+                                             !errorMessage.includes('QR code parse error') &&
+                                             !errorMessage.includes('QR code decode error')
+                      
+                      if (isCriticalError) {
+                        console.warn('QR Scanner (deviceId) warning:', errorMessage)
+                      }
+                    }
+                  }
+                )
+                
+                setTimeout(() => {
+                  cameraReady.value = true
+                }, 500)
+                
+                showSnackbar('Info', 'Scanner aktif menggunakan kamera yang tersedia', 'info', 'mdi-camera')
+              } else {
+                throw cameraError
+              }
+            } catch (deviceError: any) {
+              console.error('DeviceId approach also failed:', deviceError)
+              throw cameraError
+            }
+          }
+        }
+      }
+    } catch (err: any) {
+      console.error('Error starting scanner:', err)
+      isScanning.value = false
+      cameraReady.value = false
+      
+      // Don't set hasCamera to false if it was detected, just log the error
+      let errorMessage = 'Gagal memulai scanner. '
+      
+      if (err.message && err.message.includes('not found')) {
+        errorMessage = 'Element scanner tidak ditemukan. Silakan refresh halaman dan coba lagi.'
+        console.error('Element not found error. Element ID:', qrCodeId)
+      } else if (err.name === 'NotAllowedError') {
+        errorMessage = 'Akses kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.'
+      } else if (err.name === 'NotFoundError') {
+        errorMessage = 'Kamera tidak ditemukan. Silakan gunakan input manual.'
+        hasCamera.value = false
+      } else if (err.name === 'NotReadableError') {
+        errorMessage = 'Kamera sedang digunakan aplikasi lain. Tutup aplikasi lain yang menggunakan kamera.'
+      } else {
+        errorMessage += err.message || err.name || 'Unknown error'
+      }
+      
+      showSnackbar('Error', errorMessage, 'error', 'mdi-alert')
+    }
+  }
+
+  const stopScanning = async () => {
+    const scannerInstance = html5QrCode
+    
+    // Reset state immediately to update UI
+    isScanning.value = false
+    cameraReady.value = false
+    
+    // Clear reference immediately to prevent re-entry
+    html5QrCode = null
+    
+    // If no instance, nothing to clean up
+    if (!scannerInstance) {
+      return
+    }
+    
+    try {
+      // Stop the scanner (this stops the camera stream)
+      if (typeof scannerInstance.stop === 'function') {
+        await scannerInstance.stop().catch((err: any) => {
+          // Ignore stop errors - scanner might already be stopped
+          console.warn('Scanner stop error (ignored):', err?.message || err)
+        })
+      }
+    } catch (err: any) {
+      // Ignore errors from stop
+      console.warn('Error stopping scanner (ignored):', err?.message || err)
+    }
+    
+    try {
+      // Clear the scanner (this cleans up DOM and resources)
+      // Only try to clear if stop was successful or if clear method exists
+      if (typeof scannerInstance.clear === 'function') {
+        await scannerInstance.clear().catch((err: any) => {
+          // Ignore clear errors - DOM might already be cleaned up
+          console.warn('Scanner clear error (ignored):', err?.message || err)
+        })
+      }
+    } catch (err: any) {
+      // Ignore errors from clear
+      console.warn('Error clearing scanner (ignored):', err?.message || err)
+    }
+    
+    // Show notification after cleanup attempts
+    try {
+      showSnackbar('Info', 'Scanner dihentikan', 'info', 'mdi-camera-off')
+    } catch (e) {
+      // Ignore snackbar errors
+    }
+  }
+
+  // Initialize on mount
+  if (typeof window !== 'undefined') {
+    loadSuccessfulScans()
+  }
+
+  return {
+    // State
+    isScanning,
+    hasCamera,
+    cameraChecking,
+    cameraReady,
+    // Functions
+    checkCameraAvailability,
+    testCamera,
+    startScanning,
+    stopScanning,
+    saveSuccessfulScan,
+    isQRCodeAlreadyScanned,
+  }
+}
diff --git a/composables/useSnackbar.ts b/composables/useSnackbar.ts
new file mode 100644
index 0000000..5e38346
--- /dev/null
+++ b/composables/useSnackbar.ts
@@ -0,0 +1,44 @@
+import { ref, computed, readonly } from 'vue'
+import type { SnackbarState } from '~/types/checkin'
+
+export const useSnackbar = () => {
+  const snackbar = ref<SnackbarState>({
+    show: false,
+    title: '',
+    message: '',
+    color: '',
+    icon: '',
+    timeout: 4000,
+  })
+
+  const showSnackbar = (
+    title: string,
+    message: string,
+    color: string,
+    icon: string,
+    timeout = 4000
+  ) => {
+    snackbar.value = {
+      show: true,
+      title,
+      message,
+      color,
+      icon,
+      timeout,
+    }
+  }
+
+  // Computed untuk snackbar.show agar v-model bisa bekerja
+  const snackbarShow = computed({
+    get: () => snackbar.value.show,
+    set: (value: boolean) => {
+      snackbar.value.show = value
+    }
+  })
+
+  return {
+    snackbar: readonly(snackbar),
+    snackbarShow,
+    showSnackbar,
+  }
+}
diff --git a/constants/checkin.ts b/constants/checkin.ts
new file mode 100644
index 0000000..1bad408
--- /dev/null
+++ b/constants/checkin.ts
@@ -0,0 +1,23 @@
+export const PRIMARY_COLOR = '#1565C0'
+export const SECONDARY_COLOR = '#FB8C00'
+
+export const QR_CODE_ID = 'qr-reader'
+export const SCAN_DEBOUNCE_MS = 2000 // 2 detik debounce untuk mencegah scan berulang
+
+export const HISTORY_STORAGE_KEY = 'checkin_history'
+export const SCANNED_QR_STORAGE_KEY = 'scanned_qr_data'
+export const SUCCESSFUL_SCANS_KEY = 'successful_qr_scans'
+
+export const MAX_HISTORY_ITEMS = 100
+export const MAX_SCANNED_QR_ITEMS = 50
+
+export const HISTORY_STATUS_OPTIONS = [
+  { title: 'Berhasil', value: 'success' },
+  { title: 'Gagal', value: 'failed' },
+  { title: 'Pending', value: 'pending' }
+] as const
+
+export const QR_STATUS_OPTIONS = [
+  { title: 'Diizinkan Check-in', value: 'ALLOWED' },
+  { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
+] as const
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 79f249b..d4c73c0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,6 +9,17 @@ export default defineNuxtConfig({
     },
   },
 
+  app: {
+    head: {
+      meta: [
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
+        { name: 'mobile-web-app-capable', content: 'yes' },
+        { name: 'apple-mobile-web-app-capable', content: 'yes' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }
+      ]
+    }
+  },
+
   modules: [
     // "@nuxt/content",
     "@nuxt/eslint",
@@ -21,10 +32,28 @@ export default defineNuxtConfig({
     "@pinia/nuxt",
     "@vesp/nuxt-fontawesome",
     "@nuxtjs/google-fonts",
-    (_options, nuxt) => {
-      nuxt.hooks.hook("vite:extendConfig", (config) => {
+    async (_options, nuxt) => {
+      nuxt.hooks.hook("vite:extendConfig", async (config) => {
         // @ts-expect-error
         config.plugins.push(vuetify({ autoImport: true }));
+        
+        // Add HTTPS plugin
+        try {
+          // @ts-ignore
+          const { default: basicSsl } = await import('@vitejs/plugin-basic-ssl');
+          // @ts-expect-error
+          config.plugins.push(basicSsl());
+          // @ts-expect-error
+          config.server = config.server || {};
+          // @ts-expect-error
+          config.server.https = true;
+          // @ts-expect-error
+          config.server.host = '10.10.150.175';
+          // @ts-expect-error
+          config.server.port = 3001;
+        } catch (e) {
+          console.warn('Failed to load HTTPS plugin:', e);
+        }
       });
     },
   ],
@@ -64,19 +93,16 @@ export default defineNuxtConfig({
     "@mdi/font/css/materialdesignicons.min.css",
     "~/assets/scss/main.scss",
   ],
-  devServer: {
-    host: "http://10.10.150.175", // Changed from "10.10.123.139"
-    port: 3001
-  },
 
-  // // 'http://10.10.150.114:3001/'
-  // "http://10.10.150.175:3001"
+  devServer: {
+    port: 3001,
+    host: '10.10.150.175'
+  },
 
   vite: {
     css: {
       preprocessorOptions: {
         scss: {
-          api: "modern-compiler",
           additionalData: `
             @use "sass:math";
             @use "sass:map";
diff --git a/package-lock.json b/package-lock.json
index bb62b8e..ccecb48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "chart.js": "^4.5.0",
         "dayjs": "^1.11.18",
         "eslint": "^9.32.0",
+        "html5-qrcode": "^2.3.8",
         "nuxt": "^3.17.7",
         "nuxt-qrcode": "^0.4.8",
         "pinia": "^3.0.3",
@@ -10489,6 +10490,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/html5-qrcode": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
diff --git a/package.json b/package.json
index 05be73c..caffa43 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "_command_dev2": "nuxt dev -o --port 3001",
     "_command_dev3": "nuxt dev -o --host 10.10.150.175 --port 3001",
     "dev": "nuxt dev -o",
+    "dev:https": "nuxt dev -o --host localhost --port 3001",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
@@ -30,6 +31,7 @@
     "chart.js": "^4.5.0",
     "dayjs": "^1.11.18",
     "eslint": "^9.32.0",
+    "html5-qrcode": "^2.3.8",
     "nuxt": "^3.17.7",
     "nuxt-qrcode": "^0.4.8",
     "pinia": "^3.0.3",
@@ -44,6 +46,7 @@
   "devDependencies": {
     "@nuxtjs/google-fonts": "^3.2.0",
     "@types/node": "^24.7.2",
+    "@vitejs/plugin-basic-ssl": "^2.1.0",
     "sass": "^1.93.3",
     "sass-embedded": "^1.89.2",
     "vite-plugin-vuetify": "^2.1.2",
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index d514a34..4566a05 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -1,1481 +1,3123 @@
 <template>
-  <v-app class="bg-light">
-    <v-main>
-      <v-container fluid class="fill-height pa-4">
-        <v-row align="center" justify="center">
-          <v-col cols="12" sm="10" md="8" lg="6">
-            <v-card class="elevation-20 rounded-xl overflow-hidden card-main" :style="cardStyle">
-              
-              <!-- Header dengan gradient -->
-              <div class="header-gradient pa-6">
-                <div class="text-center">
-                  <div class="hospital-icon-wrapper mb-3">
-                    <v-icon size="56" color="white" class="pulse-animation">mdi-hospital-building</v-icon>
-                  </div>
-                  <h1 class="text-h4 font-weight-bold text-white mb-2">Check-in Pasien</h1>
-                  <p class="text-subtitle-1 text-white opacity-90">Sistem Antrean Rumah Sakit</p>
-                </div>
+    <v-app class="bg-modern">
+      <v-main class="no-overflow">
+        <v-container fluid class="no-scroll-container pa-2 pa-md-4">
+          <v-row align="start" justify="center" class="fill-height">
+            <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column">
+              <!-- Main Card dengan Glassmorphism -->
+              <v-card class="main-card" elevation="0">
                 
-                <!-- Tabs dengan desain modern -->
-                <v-tabs 
-                  v-model="tab" 
-                  align-tabs="center" 
-                  class="mt-6 custom-tabs"
-                  bg-color="transparent"
-                  slider-color="white"
-                  height="48"
-                >
-                  <v-tab value="scan" class="text-white tab-item">
-                    <v-icon start>mdi-qrcode-scan</v-icon>
-                    Scan QR
-                  </v-tab>
-                  <v-tab value="manual" class="text-white tab-item">
-                    <v-icon start>mdi-keyboard</v-icon>
-                    Manual
-                  </v-tab>
-                  <v-tab value="generate" class="text-white tab-item">
-                    <v-icon start>mdi-qrcode</v-icon>
-                    Generate QR
-                  </v-tab>
-                </v-tabs>
-              </div>
-
-              <v-card-text class="pa-8">
-                <v-window v-model="tab">
-                  <!-- Tab Scan QR -->
-                  <v-window-item value="scan">
-                    <div class="scan-section">
-                      <div class="text-center mb-6">
-                        <v-icon :color="primaryColor" size="32" class="mb-2">mdi-information-outline</v-icon>
-                        <p class="text-h6 font-weight-medium text-grey-darken-2">
-                          Arahkan Kamera ke QR Code
-                        </p>
-                        <p class="text-body-2 text-grey">
-                          Pastikan QR code terlihat jelas dan tidak terpotong
-                        </p>
-                      </div>
-                      
-                      <!-- QR Scanner Area dengan animasi -->
-                      <div class="qr-scanner-container mb-6">
-                        <div class="qr-placeholder">
-                          <div class="scanner-overlay">
-                            <div class="corner corner-tl"></div>
-                            <div class="corner corner-tr"></div>
-                            <div class="corner corner-bl"></div>
-                            <div class="corner corner-br"></div>
-                            <div class="scan-line"></div>
+                <!-- Header Minimalis -->
+                <div class="header-modern">
+                  <div class="header-content">
+                    <div class="icon-circle">
+                      <v-icon size="36" color="white">mdi-hospital-building</v-icon>
+                    </div>
+                    <div class="header-text">
+                      <h1 class="title-modern">Check-in Pasien</h1>
+                      <p class="subtitle-modern">Sistem Antrean Rumah Sakit</p>
+                    </div>
+                  </div>
+                  
+                  <!-- Tabs Minimalis -->
+                  <v-tabs 
+                    v-model="tab" 
+                    align-tabs="center" 
+                    class="tabs-modern mt-3"
+                    bg-color="transparent"
+                    slider-color="#FB8C00"
+                    height="40"
+                  >
+                    <v-tab value="scan" class="tab-modern">
+                      <v-icon size="20" class="mr-2">mdi-qrcode-scan</v-icon>
+                      <span>Scan QR</span>
+                    </v-tab>
+                    <v-tab value="manual" class="tab-modern">
+                      <v-icon size="20" class="mr-2">mdi-keyboard</v-icon>
+                      <span>Manual</span>
+                    </v-tab>
+                    <v-tab value="generate" class="tab-modern">
+                      <v-icon size="20" class="mr-2">mdi-qrcode</v-icon>
+                      <span>Generate QR</span>
+                    </v-tab>
+                  </v-tabs>
+                </div>
+  
+                <v-card-text class="content-modern pa-4 pa-md-6">
+                  <v-window v-model="tab">
+                    <!-- Tab Scan QR -->
+                    <v-window-item value="scan">
+                      <div class="tab-content">
+                        <!-- Status Header -->
+                        <div class="status-header mb-3">
+                          <div class="status-icon-wrapper">
+                            <v-icon :color="primaryColor" size="24">mdi-qrcode-scan</v-icon>
+                          </div>
+                          <div class="status-text">
+                            <h3 class="status-title">
+                              {{ isScanning ? 'Arahkan Kamera ke QR Code' : 'Siap untuk Scan QR Code' }}
+                            </h3>
+                            <p class="status-subtitle">
+                              {{ isScanning ? 'Pastikan QR code terlihat jelas dan tidak terpotong' : 'Klik tombol di bawah untuk memulai scan' }}
+                            </p>
                           </div>
-                          <v-icon size="80" :color="primaryColor" class="qr-icon">mdi-qrcode-scan</v-icon>
                         </div>
-                      </div>
-                      
-                      <!-- Button dengan gradient -->
-                      <div class="d-flex justify-center">
-                        <v-btn
-                          class="gradient-button fixed-width-button"
-                          size="large"
-                          elevation="8"
-                          @click="checkMockStatus"
-                        >
-                          <v-icon start>mdi-camera</v-icon>
-                          Simulasi Scan QR
-                        </v-btn>
-                      </div>
-
-                      <!-- Info tambahan -->
-                      <div class="info-card mt-6">
+                        
+                        <!-- Camera Status Check -->
+                        <div v-if="cameraChecking" class="text-center mb-4">
+                          <v-progress-circular
+                            indeterminate
+                            :color="primaryColor"
+                            size="24"
+                            class="mr-2"
+                          ></v-progress-circular>
+                          <span class="text-body-2 text-grey">Memeriksa ketersediaan kamera...</span>
+                        </div>
+  
+                        <!-- Camera Not Available Warning -->
                         <v-alert
-                          type="info"
+                          v-else-if="!hasCamera && !isScanning"
+                          type="warning"
                           variant="tonal"
-                          :color="primaryColor"
-                          class="text-body-2"
+                          class="mb-4"
                         >
                           <template v-slot:prepend>
-                            <v-icon>mdi-lightbulb-outline</v-icon>
+                            <v-icon>mdi-camera-off</v-icon>
                           </template>
-                          Tips: Pastikan pencahayaan cukup untuk hasil scan optimal
+                          <div>
+                            <p class="font-weight-bold mb-1">Kamera tidak terdeteksi</p>
+                            <p class="text-body-2 mb-0">
+                              Perangkat Anda tidak memiliki kamera atau kamera tidak dapat diakses. 
+                              Silakan gunakan tab <strong>Manual</strong> untuk input data secara manual.
+                            </p>
+                          </div>
                         </v-alert>
-                      </div>
-
-                      <!-- Quick Access Buttons -->
-                      <div class="quick-actions mt-6">
-                        <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
-                        <v-row dense>
-                          <v-col cols="12">
-                            <v-btn
-                              variant="outlined"
-                              :color="primaryColor"
-                              block
-                              size="small"
-                              class="text-none"
-                              @click="openHistoryDialog"
-                            >
-                              <v-icon start size="18">mdi-history</v-icon>
-                              Riwayat
-                            </v-btn>
-                          </v-col>
-                        </v-row>
-                      </div>
-                    </div>
-                  </v-window-item>
-
-                  <!-- Tab Manual -->
-                  <v-window-item value="manual">
-                    <div class="manual-section">
-                      <div class="text-center mb-6">
-                        <v-icon :color="secondaryColor" size="32" class="mb-2">mdi-form-textbox</v-icon>
-                        <p class="text-h6 font-weight-medium text-grey-darken-2">
-                          Input Manual
-                        </p>
-                        <p class="text-body-2 text-grey">
-                          Masukkan nomor antrean atau ID pasien
-                        </p>
-                      </div>
-
-                      <v-form @submit.prevent="checkInManual" ref="manualForm">
-                        <v-text-field
-                          v-model="manualInput"
-                          label="Nomor Antrean / ID Pasien"
-                          placeholder="Contoh: P12345"
-                          prepend-inner-icon="mdi-account-card-details"
-                          variant="outlined"
-                          :color="primaryColor"
-                          class="mb-2 custom-input"
-                          required
-                          :rules="[v => !!v || 'Field ini wajib diisi']"
-                          density="comfortable"
-                        >
-                          <template v-slot:append-inner>
-                            <v-icon :color="manualInput ? 'success' : 'grey'">
-                              {{ manualInput ? 'mdi-check-circle' : 'mdi-circle-outline' }}
-                            </v-icon>
-                          </template>
-                        </v-text-field>
-
-                        <div class="d-flex justify-center">
+  
+                        <!-- QR Scanner Area dengan webcam -->
+                        <div class="qr-scanner-container mb-4">
+                          <div v-if="!isScanning" class="qr-placeholder">
+                            <div class="scanner-overlay">
+                              <div class="corner corner-tl"></div>
+                              <div class="corner corner-tr"></div>
+                              <div class="corner corner-bl"></div>
+                              <div class="corner corner-br"></div>
+                              <div class="scan-line"></div>
+                            </div>
+                            <v-icon size="64" :color="primaryColor" class="qr-icon">mdi-qrcode-scan</v-icon>
+                          </div>
+                          <div v-else class="qr-reader-container">
+                            <div class="scanner-status mb-2">
+                              <v-chip color="success" size="small" class="mr-2">
+                                <v-icon start size="16">mdi-camera</v-icon>
+                                Kamera Aktif
+                              </v-chip>
+                              <span class="text-caption text-grey">Preview kamera sedang berjalan</span>
+                            </div>
+                            <div id="qr-reader" class="qr-reader-wrapper">
+                              <div class="scanner-loading-overlay" v-if="!cameraReady">
+                                <v-progress-circular
+                                  indeterminate
+                                  color="white"
+                                  size="48"
+                                ></v-progress-circular>
+                                <p class="text-white mt-4">Memuat kamera...</p>
+                              </div>
+                            </div>
+                            <div class="scanner-instruction">
+                              <v-icon :color="primaryColor" size="20" class="mr-2">mdi-information</v-icon>
+                              <span class="text-body-2">Arahkan kamera ke QR code. Pastikan QR code berada dalam kotak pemindaian.</span>
+                            </div>
+                          </div>
+                        </div>
+                        
+                        <!-- Action Button Minimalis -->
+                        <div class="action-buttons">
                           <v-btn
-                            :color="secondaryColor"
-                            class="text-white font-weight-bold text-none gradient-button-secondary fixed-width-button"
+                            v-if="!isScanning"
+                            class="btn-primary-modern btn-centered"
+                            size="large"
+                            elevation="0"
+                            @click="startScanning"
+                            :disabled="!hasCamera && !cameraChecking"
+                          >
+                            <v-icon start size="20">mdi-camera</v-icon>
+                            {{ hasCamera ? 'Mulai Scan QR' : 'Kamera Tidak Tersedia' }}
+                          </v-btn>
+                          <v-btn
+                            v-else
+                            class="btn-stop-modern btn-centered"
+                            size="large"
+                            elevation="0"
+                            @click="stopScanning"
+                          >
+                            <v-icon start size="20">mdi-camera-off</v-icon>
+                            Stop Scan
+                          </v-btn>
+                        </div>
+  
+                        <!-- Info tambahan -->
+                        <div class="info-card mt-3">
+                          <v-alert
+                            type="info"
+                            variant="tonal"
+                            :color="primaryColor"
+                            class="text-body-2 info-alert-centered"
+                            density="compact"
+                          >
+                            <div class="d-flex align-center justify-center">
+                              <v-icon size="16" class="mr-2">mdi-lightbulb-outline</v-icon>
+                              <span style="font-size: 12px;">Tips: Pastikan pencahayaan cukup untuk hasil scan optimal</span>
+                            </div>
+                          </v-alert>
+                        </div>
+  
+                        <!-- Test Camera Button (Debug) -->
+                        <div class="test-camera-section mt-2 mb-2">
+                          <v-btn
+                            variant="outlined"
+                            color="primary"
+                            size="small"
+                            class="text-none btn-centered-small btn-test-camera"
+                            @click="testCamera"
+                          >
+                            <v-icon start size="18" color="#1565C0">mdi-camera</v-icon>
+                            Test Kamera
+                          </v-btn>
+                          <p class="text-caption text-grey text-center mt-1" style="font-size: 11px;">
+                            Klik untuk menguji apakah browser dapat mengakses kamera
+                          </p>
+                        </div>
+  
+                        <!-- Quick Access Buttons -->
+                        <div class="quick-actions mt-4">
+                          <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
+                          <v-row dense>
+                            <v-col cols="12">
+                              <v-btn
+                                variant="outlined"
+                                :color="primaryColor"
+                                block
+                                size="small"
+                                class="text-none"
+                                @click="openHistoryDialog"
+                              >
+                                <v-icon start size="18">mdi-history</v-icon>
+                                Riwayat Check-in
+                              </v-btn>
+                            </v-col>
+                            <v-col cols="12">
+                              <v-btn
+                                variant="outlined"
+                                color="primary"
+                                block
+                                size="small"
+                                class="text-none"
+                                @click="openQRHistoryDialog"
+                              >
+                                <v-icon start size="18" color="#1565C0">mdi-qrcode-scan</v-icon>
+                                Riwayat QR Scan
+                              </v-btn>
+                            </v-col>
+                          </v-row>
+                        </div>
+                      </div>
+                    </v-window-item>
+  
+                    <!-- Tab Manual -->
+                    <v-window-item value="manual">
+                      <div class="tab-content">
+                        <!-- Status Header -->
+                        <div class="status-header mb-3">
+                          <div class="status-icon-wrapper">
+                            <v-icon :color="secondaryColor" size="24">mdi-keyboard</v-icon>
+                          </div>
+                          <div class="status-text">
+                            <h3 class="status-title">Input Manual</h3>
+                            <p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
+                          </div>
+                        </div>
+  
+                        <v-form @submit.prevent="checkInManual" ref="manualForm">
+                          <v-text-field
+                            v-model="manualInput"
+                            label="Nomor Antrean / ID Pasien"
+                            placeholder="Contoh: P12345"
+                            prepend-inner-icon="mdi-account-card-details"
+                            variant="outlined"
+                            :color="primaryColor"
+                            class="input-modern mb-4"
+                            required
+                            :rules="[v => !!v || 'Field ini wajib diisi']"
+                            density="comfortable"
+                            hide-details="auto"
+                          >
+                            <template v-slot:append-inner>
+                              <v-icon :color="manualInput ? 'success' : 'grey'" size="20">
+                                {{ manualInput ? 'mdi-check-circle' : 'mdi-circle-outline' }}
+                              </v-icon>
+                            </template>
+                          </v-text-field>
+  
+                          <v-btn
+                            class="btn-primary-modern btn-centered"
                             size="large"
                             type="submit"
-                            elevation="8"
+                            elevation="0"
                           >
-                            <v-icon start>mdi-login</v-icon>
+                            <v-icon start size="20">mdi-login</v-icon>
                             Check-in Sekarang
                           </v-btn>
+                        </v-form>
+  
+                        <!-- Quick Access Buttons -->
+                        <div class="quick-actions mt-4">
+                          <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
+                          <v-row dense>
+                            <v-col cols="12">
+                              <v-btn
+                                variant="outlined"
+                                :color="primaryColor"
+                                block
+                                size="small"
+                                class="text-none"
+                                @click="openHistoryDialog"
+                              >
+                                <v-icon start size="18">mdi-history</v-icon>
+                                Riwayat
+                              </v-btn>
+                            </v-col>
+                          </v-row>
                         </div>
-                      </v-form>
-
-                      <!-- Quick Access Buttons -->
-                      <div class="quick-actions mt-6">
-                        <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
-                        <v-row dense>
-                          <v-col cols="12">
-                            <v-btn
-                              variant="outlined"
-                              :color="primaryColor"
-                              block
-                              size="small"
-                              class="text-none"
-                              @click="openHistoryDialog"
-                            >
-                              <v-icon start size="18">mdi-history</v-icon>
-                              Riwayat
-                            </v-btn>
-                          </v-col>
-                        </v-row>
                       </div>
-                    </div>
-                  </v-window-item>
-
-                  <!-- Tab Generate QR -->
-                  <v-window-item value="generate">
-                    <div class="generate-section">
-                      <div class="text-center mb-6">
-                        <v-icon :color="primaryColor" size="32" class="mb-2">mdi-qrcode</v-icon>
-                        <p class="text-h6 font-weight-medium text-grey-darken-2">
-                          Generate QR Code untuk Testing
-                        </p>
-                        <p class="text-body-2 text-grey">
-                          Buat QR code yang bisa Anda scan di tab "Scan QR"
-                        </p>
-                      </div>
-
-                      <!-- Form Generate -->
-                      <v-form @submit.prevent="generateQRCode">
-                        <v-text-field
-                          v-model="generatePatientId"
-                          label="ID Pasien"
-                          placeholder="Contoh: P12345"
-                          prepend-inner-icon="mdi-identifier"
-                          variant="outlined"
-                          :color="primaryColor"
-                          class="mb-4 custom-input"
-                          density="comfortable"
-                        ></v-text-field>
-
-                        <v-select
-                          v-model="generateStatus"
-                          label="Status Check-in"
-                          :items="statusOptions"
-                          prepend-inner-icon="mdi-shield-check"
-                          variant="outlined"
-                          :color="primaryColor"
-                          class="mb-4 custom-input"
-                          density="comfortable"
-                        ></v-select>
-
-                        <div class="d-flex justify-center">
-                          <v-btn
-                            :color="primaryColor"
-                            class="gradient-button fixed-width-button"
-                            size="large"
-                            type="submit"
-                            elevation="8"
-                          >
-                            <v-icon start>mdi-qrcode-plus</v-icon>
-                            Generate QR Code
-                          </v-btn>
-                        </div>
-                      </v-form>
-
-                      <!-- QR Code Display -->
-                      <div v-if="generatedQRData" class="qr-display mt-6">
-                        <v-card variant="outlined" class="pa-4">
-                          <div class="text-center">
-                            <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
-                            <div id="qrcode" class="qr-code-container mb-4"></div>
-                            
-                            <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
-                              <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
-                              {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
-                            </v-chip>
-
-                            <p class="text-body-2 text-grey mb-4">
-                              Data: {{ generatedQRData }}
-                            </p>
-
-                            <!-- Action Buttons -->
-                            <v-row dense>
-                              <v-col cols="6">
-                                <v-btn
-                                  variant="outlined"
-                                  :color="primaryColor"
-                                  block
-                                  size="small"
-                                  @click="downloadQR"
-                                  class="text-none"
-                                >
-                                  <v-icon start size="18">mdi-download</v-icon>
-                                  Download
-                                </v-btn>
-                              </v-col>
-                              <v-col cols="6">
-                                <v-btn
-                                  variant="outlined"
-                                  :color="primaryColor"
-                                  block
-                                  size="small"
-                                  @click="shareQR"
-                                  class="text-none"
-                                >
-                                  <v-icon start size="18">mdi-share-variant</v-icon>
-                                  Share
-                                </v-btn>
-                              </v-col>
-                            </v-row>
+                    </v-window-item>
+  
+                    <!-- Tab Generate QR -->
+                    <v-window-item value="generate">
+                      <div class="tab-content">
+                        <!-- Status Header -->
+                        <div class="status-header mb-3">
+                          <div class="status-icon-wrapper">
+                            <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
                           </div>
-                        </v-card>
-
-                        <!-- Instructions -->
-                        <v-alert
-                          type="success"
-                          variant="tonal"
-                          class="mt-4 text-body-2"
-                        >
-                          <template v-slot:prepend>
-                            <v-icon>mdi-information</v-icon>
-                          </template>
-                          <strong>Cara menggunakan:</strong>
-                          <ol class="ml-4 mt-2">
-                            <li>Klik "Download" atau "Share" untuk menyimpan/mengirim QR ke HP Anda</li>
-                            <li>Buka QR code di HP Anda</li>
-                            <li>Pindah ke tab "Scan QR" dan scan QR code tersebut</li>
-                          </ol>
-                        </v-alert>
+                          <div class="status-text">
+                            <h3 class="status-title">Generate QR Code untuk Testing</h3>
+                            <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
+                          </div>
+                        </div>
+  
+                        <!-- Quick Preset Buttons -->
+                        <div class="mb-3">
+                          <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
+                          <v-row dense>
+                            <v-col cols="6">
+                              <v-btn
+                                variant="outlined"
+                                color="success"
+                                size="small"
+                                @click="generateQuickQR('P12345', 'ALLOWED')"
+                                class="text-none"
+                                block
+                              >
+                                <v-icon start size="16">mdi-check-circle</v-icon>
+                                Test ALLOWED
+                              </v-btn>
+                            </v-col>
+                            <v-col cols="6">
+                              <v-btn
+                                variant="outlined"
+                                color="warning"
+                                size="small"
+                                @click="generateQuickQR('P12345', 'NOT_ALLOWED')"
+                                class="text-none"
+                                block
+                              >
+                                <v-icon start size="16">mdi-clock-alert</v-icon>
+                                Test NOT_ALLOWED
+                              </v-btn>
+                            </v-col>
+                          </v-row>
+                        </div>
+  
+                        <!-- Form Generate -->
+                        <v-form @submit.prevent="generateQRCode">
+                          <v-text-field
+                            v-model="generatePatientId"
+                            label="ID Pasien"
+                            placeholder="Contoh: P12345"
+                            prepend-inner-icon="mdi-identifier"
+                            variant="outlined"
+                            :color="primaryColor"
+                            class="input-modern mb-3"
+                            density="comfortable"
+                            clearable
+                            hide-details="auto"
+                          ></v-text-field>
+  
+                          <v-select
+                            v-model="generateStatus"
+                            label="Status Check-in"
+                            :items="statusOptions"
+                            prepend-inner-icon="mdi-shield-check"
+                            variant="outlined"
+                            :color="primaryColor"
+                            class="input-modern mb-4"
+                            density="comfortable"
+                            hide-details="auto"
+                          ></v-select>
+  
+                          <div class="d-flex justify-center">
+                            <v-btn
+                              class="btn-primary-modern btn-centered"
+                              size="large"
+                              type="submit"
+                              elevation="0"
+                              :disabled="!generatePatientId"
+                            >
+                              <v-icon start size="20">mdi-qrcode-plus</v-icon>
+                              Generate QR Code
+                            </v-btn>
+                          </div>
+                        </v-form>
+  
+                        <!-- QR Code Display -->
+                        <div v-if="generatedQRData" class="qr-display mt-6">
+                          <v-card variant="outlined" class="pa-4">
+                            <div class="text-center">
+                              <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
+                              <div id="qrcode" class="qr-code-container mb-4"></div>
+                              
+                              <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
+                                <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
+                                {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
+                              </v-chip>
+  
+                              <p class="text-body-2 text-grey mb-4">
+                                Data: {{ generatedQRData }}
+                              </p>
+  
+                              <!-- Action Buttons -->
+                              <v-row dense>
+                                <v-col cols="4">
+                                  <v-btn
+                                    variant="outlined"
+                                    :color="primaryColor"
+                                    block
+                                    size="small"
+                                    @click="downloadQR"
+                                    class="text-none"
+                                  >
+                                    <v-icon start size="18">mdi-download</v-icon>
+                                    Download
+                                  </v-btn>
+                                </v-col>
+                                <v-col cols="4">
+                                  <v-btn
+                                    variant="outlined"
+                                    :color="primaryColor"
+                                    block
+                                    size="small"
+                                    @click="copyQRToClipboard"
+                                    class="text-none"
+                                  >
+                                    <v-icon start size="18">mdi-content-copy</v-icon>
+                                    Copy
+                                  </v-btn>
+                                </v-col>
+                                <v-col cols="4">
+                                  <v-btn
+                                    variant="outlined"
+                                    :color="primaryColor"
+                                    block
+                                    size="small"
+                                    @click="shareQR"
+                                    class="text-none"
+                                  >
+                                    <v-icon start size="18">mdi-share-variant</v-icon>
+                                    Share
+                                  </v-btn>
+                                </v-col>
+                              </v-row>
+                            </div>
+                          </v-card>
+  
+                          <!-- Instructions -->
+                          <v-alert
+                            type="success"
+                            variant="tonal"
+                            class="mt-4 text-body-2"
+                          >
+                            <template v-slot:prepend>
+                              <v-icon>mdi-information</v-icon>
+                            </template>
+                            <strong>Cara menggunakan untuk Testing:</strong>
+                            <ol class="ml-4 mt-2">
+                              <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
+                              <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
+                              <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
+                              <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
+                              <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
+                            </ol>
+                          </v-alert>
+                        </div>
                       </div>
+                    </v-window-item>
+                  </v-window>
+                </v-card-text>
+              </v-card>
+  
+              <!-- Stats Footer Minimalis -->
+              <div class="stats-footer-modern mt-3">
+                <v-row dense>
+                  <v-col cols="4">
+                    <div class="stat-card-modern">
+                      <div class="stat-icon-modern">
+                        <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
+                      </div>
+                      <div class="stat-value">24</div>
+                      <div class="stat-label">Hari Ini</div>
                     </div>
-                  </v-window-item>
-                </v-window>
-              </v-card-text>
-            </v-card>
-
-            <!-- Stats Footer -->
-            <div class="stats-footer mt-4">
-              <v-row>
-                <v-col cols="4">
-                  <div class="stat-card">
-                    <v-icon :color="primaryColor" size="24">mdi-clock-outline</v-icon>
-                    <div class="text-caption text-grey mt-1">Hari Ini</div>
-                    <div class="text-h6 font-weight-bold">24</div>
-                  </div>
-                </v-col>
-                <v-col cols="4">
-                  <div class="stat-card">
-                    <v-icon color="success" size="24">mdi-check-circle</v-icon>
-                    <div class="text-caption text-grey mt-1">Selesai</div>
-                    <div class="text-h6 font-weight-bold">18</div>
-                  </div>
-                </v-col>
-                <v-col cols="4">
-                  <div class="stat-card">
-                    <v-icon :color="secondaryColor" size="24">mdi-account-group</v-icon>
-                    <div class="text-caption text-grey mt-1">Menunggu</div>
-                    <div class="text-h6 font-weight-bold">6</div>
-                  </div>
-                </v-col>
-              </v-row>
-            </div>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-main>
-    
-    <!-- Enhanced Dialog with Blur -->
-    <v-dialog 
-      v-model="infoDialog" 
-      max-width="500" 
-      persistent
-      transition="dialog-transition"
-      scrim="rgba(0, 0, 0, 0.5)"
-      class="blur-dialog"
-    >
-      <v-card class="rounded-xl dialog-card" elevation="24">
-        <div class="dialog-header text-center pa-8" :class="infoAction === 'checkin' ? 'success-header' : 'warning-header'">
-          <div class="decorative-circles">
-            <div class="circle circle-1"></div>
-            <div class="circle circle-2"></div>
-            <div class="circle circle-3"></div>
-          </div>
-          
-          <div class="icon-wrapper mb-4">
-            <div class="icon-bg" :class="infoAction === 'checkin' ? 'icon-bg-success' : 'icon-bg-warning'">
-              <v-icon size="64" color="white" class="dialog-icon">
-                {{ infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
-              </v-icon>
-            </div>
-          </div>
-          
-          <h2 class="text-h4 font-weight-bold text-white mb-2">
-            {{ infoAction === 'checkin' ? 'Siap Check-in!' : 'Belum Diizinkan' }}
-          </h2>
-          
-          <div class="status-badge mt-3">
-            <v-chip 
-              :color="infoAction === 'checkin' ? 'white' : 'white'" 
-              :text-color="infoAction === 'checkin' ? 'success' : 'orange'"
-              size="small"
-              class="font-weight-bold"
-            >
-              <v-icon start size="16">
-                {{ infoAction === 'checkin' ? 'mdi-check' : 'mdi-clock-alert' }}
-              </v-icon>
-              {{ infoAction === 'checkin' ? 'Diizinkan' : 'Menunggu' }}
-            </v-chip>
-          </div>
-        </div>
-        
-        <v-card-text class="pa-8">
-          <div class="message-container">
-            <div class="message-icon mb-4">
-              <v-icon :color="infoAction === 'checkin' ? 'success' : 'orange'" size="32">
-                mdi-information-outline
-              </v-icon>
+                  </v-col>
+                  <v-col cols="4">
+                    <div class="stat-card-modern">
+                      <div class="stat-icon-modern">
+                        <v-icon color="success" size="20">mdi-check-circle</v-icon>
+                      </div>
+                      <div class="stat-value">18</div>
+                      <div class="stat-label">Selesai</div>
+                    </div>
+                  </v-col>
+                  <v-col cols="4">
+                    <div class="stat-card-modern">
+                      <div class="stat-icon-modern">
+                        <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
+                      </div>
+                      <div class="stat-value">6</div>
+                      <div class="stat-label">Menunggu</div>
+                    </div>
+                  </v-col>
+                </v-row>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-main>
+      
+      <!-- Enhanced Dialog with Blur -->
+      <v-dialog 
+        v-model="infoDialog" 
+        max-width="500" 
+        persistent
+        transition="dialog-transition"
+        scrim="rgba(0, 0, 0, 0.5)"
+        class="blur-dialog"
+      >
+        <v-card class="rounded-xl dialog-card" elevation="24">
+          <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : 'error-header'">
+            <div class="decorative-circles">
+              <div class="circle circle-1"></div>
+              <div class="circle circle-2"></div>
+              <div class="circle circle-3"></div>
             </div>
             
-            <p class="text-h6 font-weight-bold mb-3 text-center">{{ infoMessage }}</p>
-            
-            <v-divider class="my-4"></v-divider>
-            
-            <div class="instruction-box pa-4 rounded-lg" :class="infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
-              <div class="d-flex align-start">
-                <v-icon :color="infoAction === 'checkin' ? 'success' : 'orange'" class="mr-3 mt-1">
-                  {{ infoAction === 'checkin' ? 'mdi-hand-pointing-down' : 'mdi-timer-sand' }}
+            <div class="icon-wrapper mb-4">
+              <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : 'icon-bg-error'">
+                <v-icon size="64" color="white" class="dialog-icon">
+                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-alert-circle' : 'mdi-close-circle' }}
                 </v-icon>
-                <div>
-                  <p class="text-body-1 font-weight-medium mb-1">
-                    {{ infoAction === 'checkin' ? 'Langkah Selanjutnya:' : 'Informasi:' }}
-                  </p>
-                  <p class="text-body-2 text-grey-darken-1">
-                    {{ infoAction === 'checkin' ? 'Klik tombol Check-in di bawah untuk melanjutkan proses registrasi pasien' : 'Mohon menunggu hingga antrean Anda dipanggil oleh petugas' }}
-                  </p>
-                </div>
               </div>
             </div>
             
-            <!-- Patient Info Card -->
-            <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
-              <v-card-text class="py-3">
-                <div class="d-flex justify-space-between align-center">
-                  <div class="d-flex align-center">
-                    <v-icon color="primary" class="mr-2">mdi-account-circle</v-icon>
-                    <div>
-                      <p class="text-caption text-grey mb-0">ID Pasien</p>
-                      <p class="text-body-1 font-weight-bold mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
-                    </div>
-                  </div>
-                  <div class="text-right">
-                    <p class="text-caption text-grey mb-0">Waktu Scan</p>
-                    <p class="text-body-2 font-weight-medium mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
+            <h2 class="text-h4 font-weight-bold text-white mb-2">
+              {{ lastCheckInResult?.success && infoAction === 'checkin' 
+                ? 'Check-in Berhasil!' 
+                : lastCheckInResult?.status === 'NOT_ALLOWED'
+                ? 'Belum Diizinkan'
+                : 'Check-in Gagal' }}
+            </h2>
+            
+            <div class="status-badge mt-3">
+              <v-chip 
+                :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
+                :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'"
+                size="small"
+                class="font-weight-bold"
+              >
+                <v-icon start size="16">
+                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+                </v-icon>
+                {{ lastCheckInResult?.success && infoAction === 'checkin' 
+                  ? 'Berhasil' 
+                  : lastCheckInResult?.status === 'NOT_ALLOWED'
+                  ? 'Menunggu'
+                  : 'Gagal' }}
+              </v-chip>
+            </div>
+          </div>
+          
+          <v-card-text class="pa-8">
+            <div class="message-container">
+              <div class="message-icon mb-4">
+                <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'" size="32">
+                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+                </v-icon>
+              </div>
+              
+              <div class="text-h6 font-weight-bold mb-3 text-center" style="white-space: pre-line;">{{ infoMessage }}</div>
+              
+              <v-divider class="my-4"></v-divider>
+              
+              <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
+                <div class="d-flex align-start">
+                  <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : 'orange'" class="mr-3 mt-1">
+                    {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
+                  </v-icon>
+                  <div>
+                    <p class="text-body-1 font-weight-medium mb-1">
+                      {{ lastCheckInResult.success && infoAction === 'checkin' ? 'Status Check-in:' : 'Status:' }}
+                    </p>
+                    <p class="text-body-2 text-grey-darken-1">
+                      {{ lastCheckInResult.success && infoAction === 'checkin' 
+                        ? 'Check-in telah berhasil dilakukan. Pasien dapat melanjutkan ke tahap selanjutnya.' 
+                        : lastCheckInResult.status === 'NOT_ALLOWED'
+                        ? 'Mohon menunggu hingga antrean Anda dipanggil oleh petugas'
+                        : 'Proses check-in gagal. Silakan coba lagi atau hubungi petugas.' }}
+                    </p>
                   </div>
                 </div>
-              </v-card-text>
-            </v-card>
-          </div>
-        </v-card-text>
-        
-        <v-card-actions class="pa-6 pt-0">
-          <v-row dense>
-            <v-col v-if="infoAction === 'kembali'" cols="12">
-              <v-btn
-                color="grey-darken-1"
-                class="text-white font-weight-bold text-none dialog-button"
-                size="x-large"
-                block
-                variant="flat"
-                @click="handleInfoAction"
-                elevation="0"
-                prepend-icon="mdi-arrow-left"
-              >
-                Kembali
-              </v-btn>
-            </v-col>
-            <template v-else>
-              <v-col cols="6">
+              </div>
+              
+              <!-- Patient Info Card -->
+              <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
+                <v-card-text class="py-3">
+                  <div class="d-flex justify-space-between align-center">
+                    <div class="d-flex align-center">
+                      <v-icon color="primary" class="mr-2 patient-info-icon">mdi-account-circle</v-icon>
+                      <div>
+                        <p class="text-caption patient-info-label mb-0">ID Pasien</p>
+                        <p class="text-body-1 patient-info-value mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
+                      </div>
+                    </div>
+                    <div class="text-right">
+                      <p class="text-caption patient-info-label mb-0">Waktu Scan</p>
+                      <p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
+                    </div>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </div>
+          </v-card-text>
+          
+          <v-card-actions class="pa-6 pt-0">
+            <v-row dense>
+              <v-col v-if="infoAction === 'kembali'" cols="12">
                 <v-btn
-                  color="grey-lighten-1"
-                  class="text-none dialog-button"
-                  size="x-large"
-                  block
-                  variant="outlined"
-                  @click="infoDialog = false"
-                  prepend-icon="mdi-close"
-                >
-                  Batal
-                </v-btn>
-              </v-col>
-              <v-col cols="6">
-                <v-btn
-                  color="success"
+                  color="grey-darken-1"
                   class="text-white font-weight-bold text-none dialog-button"
                   size="x-large"
                   block
                   variant="flat"
                   @click="handleInfoAction"
-                  elevation="4"
-                  prepend-icon="mdi-login"
+                  elevation="0"
+                  prepend-icon="mdi-arrow-left"
                 >
-                  Check-in
-                </v-btn>
-              </v-col>
-            </template>
-          </v-row>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-    
-    <!-- Enhanced Snackbar -->
-    <v-snackbar
-      v-model="snackbar.show"
-      :color="snackbar.color"
-      :timeout="snackbar.timeout"
-      location="bottom right"
-      rounded="pill"
-      elevation="24"
-      class="custom-snackbar"
-    >
-      <div class="d-flex align-center">
-        <v-avatar :color="snackbar.color" size="32" class="mr-3">
-          <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
-        </v-avatar>
-        <div>
-          <div class="font-weight-bold">{{ snackbar.title }}</div>
-          <div class="text-body-2">{{ snackbar.message }}</div>
-        </div>
-      </div>
-    </v-snackbar>
-
-    <!-- History Dialog -->
-    <v-dialog 
-      v-model="historyDialog" 
-      max-width="800" 
-      persistent
-      transition="dialog-transition"
-      scrim="rgba(0, 0, 0, 0.5)"
-      class="blur-dialog"
-    >
-      <v-card class="rounded-xl dialog-card" elevation="24">
-        <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
-          <h2 class="text-h5 font-weight-bold text-white mb-2">
-            <v-icon color="white" class="mr-2">mdi-history</v-icon>
-            Riwayat Check-in
-          </h2>
-          <p class="text-body-2 text-white opacity-90">Daftar check-in yang telah dilakukan</p>
-        </div>
-        
-        <v-card-text class="pa-6">
-          <!-- Filter dan Search -->
-          <div class="mb-4">
-            <v-row dense>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="historySearch"
-                  label="Cari ID Pasien atau Nomor Antrean"
-                  prepend-inner-icon="mdi-magnify"
-                  variant="outlined"
-                  density="comfortable"
-                  clearable
-                  hide-details
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="3">
-                <v-select
-                  v-model="historyStatusFilter"
-                  label="Filter Status"
-                  :items="historyStatusOptions"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details
-                  clearable
-                ></v-select>
-              </v-col>
-              <v-col cols="12" md="3">
-                <v-btn
-                  color="error"
-                  variant="outlined"
-                  block
-                  @click="clearHistory"
-                  :disabled="checkInHistory.length === 0"
-                >
-                  <v-icon start>mdi-delete</v-icon>
-                  Hapus Semua
+                  Kembali
                 </v-btn>
               </v-col>
+              <template v-else>
+                <v-col cols="12">
+                  <v-btn
+                    :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : 'primary'"
+                    class="text-white font-weight-bold text-none dialog-button"
+                    size="x-large"
+                    block
+                    variant="flat"
+                    @click="handleInfoAction"
+                    elevation="4"
+                    :prepend-icon="lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : 'mdi-close'"
+                  >
+                    {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'Tutup' : 'Tutup' }}
+                  </v-btn>
+                </v-col>
+              </template>
             </v-row>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+      
+      <!-- Enhanced Snackbar -->
+      <v-snackbar
+        v-model="snackbar.show"
+        :color="snackbar.color"
+        :timeout="snackbar.timeout"
+        location="bottom right"
+        rounded="pill"
+        elevation="24"
+        class="custom-snackbar"
+      >
+        <div class="d-flex align-center">
+          <v-avatar :color="snackbar.color" size="32" class="mr-3">
+            <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
+          </v-avatar>
+          <div>
+            <div class="font-weight-bold">{{ snackbar.title }}</div>
+            <div class="text-body-2">{{ snackbar.message }}</div>
           </div>
-
-          <!-- History List -->
-          <div v-if="filteredHistory.length > 0" class="history-list">
-            <v-card
-              v-for="(item, index) in filteredHistory"
-              :key="index"
-              variant="outlined"
-              class="mb-3 history-item"
-              :class="getStatusClass(item.status)"
-            >
-              <v-card-text class="pa-4">
-                <div class="d-flex justify-space-between align-start">
-                  <div class="flex-grow-1">
-                    <div class="d-flex align-center mb-2">
-                      <v-chip
-                        :color="getStatusColor(item.status)"
+        </div>
+      </v-snackbar>
+  
+      <!-- History Dialog -->
+      <v-dialog 
+        v-model="historyDialog" 
+        max-width="800" 
+        persistent
+        transition="dialog-transition"
+        scrim="rgba(0, 0, 0, 0.5)"
+        class="blur-dialog"
+      >
+        <v-card class="rounded-xl dialog-card" elevation="24">
+          <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
+            <h2 class="text-h5 font-weight-bold text-white mb-2">
+              <v-icon color="white" class="mr-2">mdi-history</v-icon>
+              Riwayat Check-in
+            </h2>
+            <p class="text-body-2 text-white opacity-90">Daftar check-in yang telah dilakukan</p>
+          </div>
+          
+          <v-card-text class="pa-6">
+            <!-- Filter dan Search -->
+            <div class="mb-4">
+              <v-row dense>
+                <v-col cols="12" md="6">
+                  <v-text-field
+                    v-model="historySearch"
+                    label="Cari ID Pasien atau Nomor Antrean"
+                    prepend-inner-icon="mdi-magnify"
+                    variant="outlined"
+                    density="comfortable"
+                    clearable
+                    hide-details
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" md="3">
+                  <v-select
+                    v-model="historyStatusFilter"
+                    label="Filter Status"
+                    :items="historyStatusOptions"
+                    variant="outlined"
+                    density="comfortable"
+                    hide-details
+                    clearable
+                  ></v-select>
+                </v-col>
+                <v-col cols="12" md="3">
+                  <v-btn
+                    color="error"
+                    variant="outlined"
+                    block
+                    @click="clearHistory"
+                    :disabled="checkInHistory.length === 0"
+                  >
+                    <v-icon start>mdi-delete</v-icon>
+                    Hapus Semua
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </div>
+  
+            <!-- History List -->
+            <div v-if="filteredHistory.length > 0" class="history-list">
+              <v-card
+                v-for="(item, index) in filteredHistory"
+                :key="index"
+                variant="outlined"
+                class="mb-3 history-item"
+                :class="getStatusClass(item.status)"
+              >
+                <v-card-text class="pa-4">
+                  <div class="d-flex justify-space-between align-start">
+                    <div class="flex-grow-1">
+                      <div class="d-flex align-center mb-2">
+                        <v-chip
+                          :color="getStatusColor(item.status)"
+                          size="small"
+                          class="mr-2"
+                        >
+                          <v-icon start size="16">{{ getStatusIcon(item.status) }}</v-icon>
+                          {{ getStatusText(item.status) }}
+                        </v-chip>
+                        <v-chip
+                          color="grey-lighten-1"
+                          size="x-small"
+                          variant="text"
+                        >
+                          {{ item.method }}
+                        </v-chip>
+                      </div>
+                      
+                      <div class="mb-2">
+                        <p class="text-body-1 font-weight-bold mb-1">
+                          <v-icon size="18" class="mr-1" :color="primaryColor">mdi-account-circle</v-icon>
+                          ID Pasien: {{ item.patientId }}
+                        </p>
+                        <p v-if="item.queueNumber" class="text-body-2 text-grey mb-1">
+                          <v-icon size="16" class="mr-1">mdi-ticket</v-icon>
+                          Nomor Antrean: {{ item.queueNumber }}
+                        </p>
+                      </div>
+                      
+                      <div class="d-flex flex-wrap gap-2">
+                        <v-chip
+                          size="x-small"
+                          variant="outlined"
+                          color="grey-darken-1"
+                        >
+                          <v-icon start size="14">mdi-clock-outline</v-icon>
+                          {{ formatDateTime(item.checkInTime) }}
+                        </v-chip>
+                        <v-chip
+                          v-if="item.checkInDate"
+                          size="x-small"
+                          variant="outlined"
+                          color="grey-darken-1"
+                        >
+                          <v-icon start size="14">mdi-calendar</v-icon>
+                          {{ formatDate(item.checkInDate) }}
+                        </v-chip>
+                      </div>
+                    </div>
+                    
+                    <div class="ml-4">
+                      <v-btn
+                        icon
                         size="small"
-                        class="mr-2"
-                      >
-                        <v-icon start size="16">{{ getStatusIcon(item.status) }}</v-icon>
-                        {{ getStatusText(item.status) }}
-                      </v-chip>
-                      <v-chip
-                        color="grey-lighten-1"
-                        size="x-small"
                         variant="text"
+                        color="error"
+                        @click="deleteHistoryItem(index)"
                       >
-                        {{ item.method }}
-                      </v-chip>
-                    </div>
-                    
-                    <div class="mb-2">
-                      <p class="text-body-1 font-weight-bold mb-1">
-                        <v-icon size="18" class="mr-1" :color="primaryColor">mdi-account-circle</v-icon>
-                        ID Pasien: {{ item.patientId }}
-                      </p>
-                      <p v-if="item.queueNumber" class="text-body-2 text-grey mb-1">
-                        <v-icon size="16" class="mr-1">mdi-ticket</v-icon>
-                        Nomor Antrean: {{ item.queueNumber }}
-                      </p>
-                    </div>
-                    
-                    <div class="d-flex flex-wrap gap-2">
-                      <v-chip
-                        size="x-small"
-                        variant="outlined"
-                        color="grey-darken-1"
-                      >
-                        <v-icon start size="14">mdi-clock-outline</v-icon>
-                        {{ formatDateTime(item.checkInTime) }}
-                      </v-chip>
-                      <v-chip
-                        v-if="item.checkInDate"
-                        size="x-small"
-                        variant="outlined"
-                        color="grey-darken-1"
-                      >
-                        <v-icon start size="14">mdi-calendar</v-icon>
-                        {{ formatDate(item.checkInDate) }}
-                      </v-chip>
+                        <v-icon>mdi-delete-outline</v-icon>
+                      </v-btn>
                     </div>
                   </div>
-                  
-                  <div class="ml-4">
-                    <v-btn
-                      icon
-                      size="small"
-                      variant="text"
-                      color="error"
-                      @click="deleteHistoryItem(index)"
-                    >
-                      <v-icon>mdi-delete-outline</v-icon>
-                    </v-btn>
+                </v-card-text>
+              </v-card>
+            </div>
+  
+            <!-- Empty State -->
+            <div v-else class="text-center py-12">
+              <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-history</v-icon>
+              <p class="text-h6 text-grey mb-2">Belum ada riwayat check-in</p>
+              <p class="text-body-2 text-grey">Riwayat check-in akan muncul di sini setelah Anda melakukan check-in</p>
+            </div>
+          </v-card-text>
+          
+          <v-card-actions class="pa-6 pt-0">
+            <v-spacer></v-spacer>
+            <v-btn
+              color="primary"
+              class="text-white font-weight-bold text-none"
+              size="large"
+              variant="flat"
+              @click="historyDialog = false"
+              prepend-icon="mdi-close"
+            >
+              Tutup
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+  
+      <!-- QR History Dialog -->
+      <v-dialog 
+        v-model="qrHistoryDialog" 
+        max-width="800" 
+        persistent
+        transition="dialog-transition"
+        scrim="rgba(0, 0, 0, 0.5)"
+        class="blur-dialog"
+      >
+        <v-card class="rounded-xl dialog-card" elevation="24">
+          <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);">
+            <h2 class="text-h5 font-weight-bold text-white mb-2">
+              <v-icon color="white" class="mr-2">mdi-qrcode-scan</v-icon>
+              Riwayat QR Scan
+            </h2>
+            <p class="text-body-2 text-white opacity-90">Daftar QR code yang telah di-scan</p>
+          </div>
+          
+          <v-card-text class="pa-6">
+            <!-- Filter dan Search -->
+            <div class="mb-4">
+              <v-row dense>
+                <v-col cols="12" md="9">
+                  <v-text-field
+                    v-model="historySearch"
+                    label="Cari Data QR Code"
+                    prepend-inner-icon="mdi-magnify"
+                    variant="outlined"
+                    density="comfortable"
+                    clearable
+                    hide-details
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" md="3">
+                  <v-btn
+                    color="error"
+                    variant="outlined"
+                    block
+                    @click="clearQRHistory"
+                    :disabled="scannedQRHistory.length === 0"
+                  >
+                    <v-icon start>mdi-delete</v-icon>
+                    Hapus Semua
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </div>
+  
+            <!-- QR History List -->
+            <div v-if="filteredQRHistory.length > 0" class="history-list">
+              <v-card
+                v-for="(item, index) in filteredQRHistory"
+                :key="index"
+                variant="outlined"
+                class="mb-3 history-item"
+              >
+                <v-card-text class="pa-4">
+                  <div class="d-flex justify-space-between align-start">
+                    <div class="flex-grow-1">
+                      <div class="mb-2">
+                        <p class="text-body-1 font-weight-bold mb-1">
+                          <v-icon size="18" class="mr-1" :color="primaryColor">mdi-qrcode</v-icon>
+                          Data QR: {{ item.data }}
+                        </p>
+                      </div>
+                      
+                      <div class="d-flex flex-wrap gap-2">
+                        <v-chip
+                          size="x-small"
+                          variant="outlined"
+                          color="grey-darken-1"
+                        >
+                          <v-icon start size="14">mdi-clock-outline</v-icon>
+                          {{ item.time }}
+                        </v-chip>
+                        <v-chip
+                          size="x-small"
+                          variant="outlined"
+                          color="grey-darken-1"
+                        >
+                          <v-icon start size="14">mdi-calendar</v-icon>
+                          {{ item.date }}
+                        </v-chip>
+                      </div>
+                    </div>
+                    
+                    <div class="ml-4">
+                      <v-btn
+                        icon
+                        size="small"
+                        variant="text"
+                        color="primary"
+                        @click="useQRData(item.data)"
+                      >
+                        <v-icon>mdi-refresh</v-icon>
+                      </v-btn>
+                      <v-btn
+                        icon
+                        size="small"
+                        variant="text"
+                        color="error"
+                        @click="deleteQRHistoryItem(index)"
+                      >
+                        <v-icon>mdi-delete-outline</v-icon>
+                      </v-btn>
+                    </div>
                   </div>
-                </div>
-              </v-card-text>
-            </v-card>
-          </div>
-
-          <!-- Empty State -->
-          <div v-else class="text-center py-12">
-            <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-history</v-icon>
-            <p class="text-h6 text-grey mb-2">Belum ada riwayat check-in</p>
-            <p class="text-body-2 text-grey">Riwayat check-in akan muncul di sini setelah Anda melakukan check-in</p>
-          </div>
-        </v-card-text>
-        
-        <v-card-actions class="pa-6 pt-0">
-          <v-spacer></v-spacer>
-          <v-btn
-            color="primary"
-            class="text-white font-weight-bold text-none"
-            size="large"
-            variant="flat"
-            @click="historyDialog = false"
-            prepend-icon="mdi-close"
-          >
-            Tutup
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-  </v-app>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, nextTick } from 'vue';
-
-definePageMeta({
-  middleware:['auth'],
-  layout: false,
-})
-
-
-// TypeScript declaration for QRCode
-declare global {
-  interface Window {
-    QRCode: any;
-  }
-}
-
-// --- DESAIN & TEMA ---
-const primaryColor = ref('#1565C0');
-const secondaryColor = ref('#FB8C00');
-
-const cardStyle = computed(() => ({
-  background: 'white',
-}));
-
-// --- LOGIKA ---
-const tab = ref('scan');
-const infoDialog = ref(false);
-const infoMessage = ref('');
-const infoAction = ref<'checkin' | 'kembali'>('kembali'); 
-const scannedData = ref<string | null>(null);
-const manualInput = ref('');
-const manualForm = ref(null);
-
-// History Dialog
-const historyDialog = ref(false);
-const historySearch = ref('');
-const historyStatusFilter = ref('');
-const checkInHistory = ref<Array<{
-  patientId: string;
-  queueNumber?: string;
-  status: string;
-  checkInTime: string;
-  checkInDate: string;
-  method: string;
-}>>([]);
-
-const historyStatusOptions = [
-  { title: 'Berhasil', value: 'success' },
-  { title: 'Gagal', value: 'failed' },
-  { title: 'Pending', value: 'pending' }
-];
-
-// Generate QR variables
-const generatePatientId = ref('P12345');
-const generateStatus = ref('ALLOWED');
-const generatedQRData = ref('');
-const statusOptions = [
-  { title: 'Diizinkan Check-in', value: 'ALLOWED' },
-  { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
-];
-
-const snackbar = ref({
-  show: false,
-  title: '',
-  message: '',
-  color: '',
-  icon: '',
-  timeout: 4000,
-});
-
-const checkMockStatus = () => {
-    const isCurrentlyAllowed = infoAction.value === 'checkin';
-    const mockData = isCurrentlyAllowed ? 'P67890|NOT_ALLOWED' : 'P12345|ALLOWED';
-    
-    scannedData.value = mockData;
-    onDetect(mockData);
-};
-
-const onDetect = (decodedText: string) => {
-    const [patientId, status] = decodedText.split('|');
-    
-    if (status === 'ALLOWED') {
-        infoMessage.value = `Antrean Pasien ${patientId} sudah diperbolehkan check-in`;
-        infoAction.value = 'checkin';
-        infoDialog.value = true;
-    } else if (status === 'NOT_ALLOWED') {
-        infoMessage.value = `Antrean Pasien ${patientId} belum diperbolehkan check-in`;
-        infoAction.value = 'kembali';
-        infoDialog.value = true;
-    } else {
-        showSnackbar('Gagal', 'QR Code tidak valid.', 'error', 'mdi-close-circle');
+                </v-card-text>
+              </v-card>
+            </div>
+  
+            <!-- Empty State -->
+            <div v-else class="text-center py-12">
+              <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-qrcode-scan</v-icon>
+              <p class="text-h6 text-grey mb-2">Belum ada riwayat QR scan</p>
+              <p class="text-body-2 text-grey">Riwayat QR scan akan muncul di sini setelah Anda melakukan scan</p>
+            </div>
+          </v-card-text>
+          
+          <v-card-actions class="pa-6 pt-0">
+            <v-spacer></v-spacer>
+            <v-btn
+              color="primary"
+              class="text-white font-weight-bold text-none"
+              size="large"
+              variant="flat"
+              @click="qrHistoryDialog = false"
+              prepend-icon="mdi-close"
+            >
+              Tutup
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+  
+    </v-app>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
+  
+  definePageMeta({
+    middleware:['auth'],
+    layout: false,
+  })
+  
+  
+  // TypeScript declaration for QRCode
+  declare global {
+    interface Window {
+      QRCode: any;
     }
-};
-
-const handleInfoAction = async () => {
-    infoDialog.value = false;
+  }
+  
+  // --- DESAIN & TEMA ---
+  const primaryColor = ref('#1565C0');
+  const secondaryColor = ref('#FB8C00');
+  
+  // --- LOGIKA ---
+  const tab = ref('scan');
+  const infoDialog = ref(false);
+  const infoMessage = ref('');
+  const infoAction = ref<'checkin' | 'kembali'>('kembali'); 
+  const scannedData = ref<string | null>(null);
+  const manualInput = ref('');
+  const manualForm = ref(null);
+  const lastCheckInResult = ref<{ success: boolean; patientId: string; status: string } | null>(null);
+  
+  // QR Scanner state
+  const isScanning = ref(false);
+  const hasCamera = ref(false);
+  const cameraChecking = ref(true);
+  const cameraReady = ref(false);
+  let html5QrCode: any = null;
+  const qrCodeId = 'qr-reader';
+  let lastScannedQR: string | null = null;
+  let lastScanTime: number = 0;
+  const SCAN_DEBOUNCE_MS = 2000; // 2 detik debounce untuk mencegah scan berulang
+  
+  // Daftar QR code yang sudah berhasil di-scan (untuk mencegah double antrian)
+  const SUCCESSFUL_SCANS_KEY = 'successful_qr_scans';
+  const successfulScans = ref<Set<string>>(new Set());
+  
+  // Detect mobile device
+  const isMobile = ref(false);
+  if (typeof window !== 'undefined') {
+    isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+                     (window.innerWidth <= 768);
+  }
+  
+  // History Dialog
+  const historyDialog = ref(false);
+  const historySearch = ref('');
+  const historyStatusFilter = ref('');
+  const checkInHistory = ref<Array<{
+    patientId: string;
+    queueNumber?: string;
+    status: string;
+    checkInTime: string;
+    checkInDate: string;
+    method: string;
+  }>>([]);
+  
+  // QR History Dialog
+  const qrHistoryDialog = ref(false);
+  const scannedQRHistory = ref<Array<{
+    data: string;
+    timestamp: string;
+    date: string;
+    time: string;
+  }>>([]);
+  
+  const historyStatusOptions = [
+    { title: 'Berhasil', value: 'success' },
+    { title: 'Gagal', value: 'failed' },
+    { title: 'Pending', value: 'pending' }
+  ];
+  
+  // Generate QR variables
+  const generatePatientId = ref('P12345');
+  const generateStatus = ref('ALLOWED');
+  const generatedQRData = ref('');
+  const statusOptions = [
+    { title: 'Diizinkan Check-in', value: 'ALLOWED' },
+    { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
+  ];
+  
+  const snackbar = ref({
+    show: false,
+    title: '',
+    message: '',
+    color: '',
+    icon: '',
+    timeout: 4000,
+  });
+  
+  // Check camera availability
+  const checkCameraAvailability = async () => {
+    cameraChecking.value = true;
+    hasCamera.value = false;
     
-    if (infoAction.value === 'checkin') {
-        const checkinSuccess = await performCheckIn(scannedData.value!);
+    // Check if browser supports mediaDevices
+    if (typeof navigator === 'undefined' || !navigator.mediaDevices) {
+      console.error('navigator.mediaDevices is not supported');
+      showSnackbar('Error', 'Browser tidak mendukung akses kamera. Pastikan menggunakan HTTPS atau localhost.', 'error', 'mdi-camera-off');
+      cameraChecking.value = false;
+      return;
+    }
+  
+    try {
+      // First, request permission by trying to get user media
+      // This is required for enumerateDevices to return device labels
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      
+      // Stop the stream immediately after getting permission
+      stream.getTracks().forEach(track => track.stop());
+      
+      // Now enumerate devices (will have labels after permission granted)
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevices = devices.filter(device => device.kind === 'videoinput');
+      
+      hasCamera.value = videoDevices.length > 0;
+      
+      if (hasCamera.value) {
+        console.log(`Found ${videoDevices.length} camera(s):`, videoDevices.map(d => d.label || d.deviceId));
+      } else {
+        console.warn('No video input devices found');
+        showSnackbar('Warning', 'Tidak ada kamera yang terdeteksi', 'warning', 'mdi-camera-off');
+      }
+    } catch (err: any) {
+      console.error('Error checking camera:', err);
+      hasCamera.value = false;
+      
+      let errorMessage = 'Gagal mengakses kamera. ';
+      if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
+        errorMessage += 'Izin kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
+      } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
+        errorMessage += 'Tidak ada kamera yang ditemukan.';
+      } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
+        errorMessage += 'Kamera sedang digunakan aplikasi lain.';
+      } else if (err.name === 'OverconstrainedError' || err.name === 'ConstraintNotSatisfiedError') {
+        errorMessage += 'Kamera tidak memenuhi persyaratan.';
+      } else {
+        errorMessage += `Error: ${err.message || err.name}`;
+      }
+      
+      showSnackbar('Error', errorMessage, 'error', 'mdi-camera-off');
+    } finally {
+      cameraChecking.value = false;
+    }
+  };
+  
+  // Test camera function for debugging
+  const testCamera = async () => {
+    try {
+      showSnackbar('Info', 'Menguji akses kamera...', 'info', 'mdi-camera');
+      
+      if (typeof navigator === 'undefined') {
+        showSnackbar('Error', 'navigator is undefined - pastikan di browser, bukan SSR', 'error', 'mdi-alert');
+        return;
+      }
+      
+      if (!navigator.mediaDevices) {
+        showSnackbar('Error', 'navigator.mediaDevices is undefined - pastikan menggunakan HTTPS atau localhost', 'error', 'mdi-alert');
+        return;
+      }
+      
+      if (!navigator.mediaDevices.getUserMedia) {
+        showSnackbar('Error', 'getUserMedia is not supported', 'error', 'mdi-alert');
+        return;
+      }
+      
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        video: {
+          facingMode: 'user',
+          width: { ideal: 640 },
+          height: { ideal: 480 }
+        } 
+      });
+      
+      showSnackbar('Success', 'Kamera berhasil diakses!', 'success', 'mdi-check-circle');
+      
+      // Stop stream after 2 seconds
+      setTimeout(() => {
+        stream.getTracks().forEach(track => track.stop());
+      }, 2000);
+      
+    } catch (err: any) {
+      console.error('Test camera error:', err);
+      let errorMsg = `Error: ${err.name || 'Unknown'}`;
+      if (err.message) errorMsg += ` - ${err.message}`;
+      showSnackbar('Error', errorMsg, 'error', 'mdi-alert');
+    }
+  };
+  
+  // QR Scanner Functions
+  const startScanning = async () => {
+    // Check camera first
+    if (!hasCamera.value) {
+      await checkCameraAvailability();
+      if (!hasCamera.value) {
+        showSnackbar('Error', 'Kamera tidak tersedia. Silakan gunakan input manual atau pastikan kamera terhubung.', 'error', 'mdi-camera-off');
+        return;
+      }
+    }
+  
+    try {
+      // Set scanning state first to render the element
+      isScanning.value = true;
+      
+      // Wait for DOM to update and element to be rendered
+      await nextTick();
+      
+      // Wait a bit more to ensure element is fully rendered
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      // Check if element exists
+      const qrElement = document.getElementById(qrCodeId);
+      if (!qrElement) {
+        console.error(`Element with id "${qrCodeId}" not found in DOM`);
+        isScanning.value = false;
+        showSnackbar('Error', 'Element scanner tidak ditemukan. Silakan refresh halaman.', 'error', 'mdi-alert');
+        return;
+      }
+      
+      // Dynamic import html5-qrcode
+      if (!html5QrCode) {
+        const { Html5Qrcode: Html5QrcodeClass } = await import('html5-qrcode');
+        html5QrCode = new Html5QrcodeClass(qrCodeId);
+        console.log('Html5Qrcode initialized');
+      }
+  
+      if (html5QrCode) {
+        cameraReady.value = false;
         
-        if (checkinSuccess) {
-            showSnackbar('Berhasil!', 'Check-in antrean berhasil dilakukan.', 'success', 'mdi-check-circle');
-        } else {
-            showSnackbar('Gagal!', 'Check-in antrean gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
+        // Konfigurasi kamera untuk mobile dan desktop
+        const cameraConfig = isMobile.value 
+          ? { facingMode: "environment" } // Mobile: gunakan kamera belakang
+          : { facingMode: "user" }; // Desktop: gunakan kamera depan (webcam)
+        
+        // Video constraints yang lebih fleksibel
+        const baseVideoConstraints = isMobile.value
+          ? {
+              facingMode: "environment",
+              width: { ideal: 640, min: 320 },
+              height: { ideal: 480, min: 240 }
+            }
+          : {
+              facingMode: "user",
+              width: { ideal: 1280, min: 640 },
+              height: { ideal: 720, min: 480 }
+            };
+        
+        // Tambahkan advanced constraints hanya jika didukung
+        const videoConstraints: any = { ...baseVideoConstraints };
+        
+        console.log('Starting QR scanner with config:', {
+          isMobile: isMobile.value,
+          cameraConfig,
+          videoConstraints
+        });
+        
+        try {
+          await html5QrCode.start(
+            cameraConfig,
+            {
+              fps: isMobile.value ? 15 : 20, // FPS optimal untuk deteksi
+              qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+                // QR box dengan ukuran lebih besar untuk deteksi lebih mudah
+                const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
+                // Gunakan 80-90% dari viewfinder untuk area scanning yang lebih besar
+                const percentageSize = Math.floor(minEdgeSize * 0.80);
+                // Atau ukuran tetap yang lebih besar
+                const fixedSize = isMobile.value ? 250 : 250;
+                // Gunakan yang lebih besar antara percentage atau fixed
+                const qrboxSize = Math.max(percentageSize, fixedSize);
+                
+                // Pastikan tidak melebihi viewfinder
+                const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
+                
+                console.log('QR Box size:', finalSize, 'Viewfinder:', viewfinderWidth, 'x', viewfinderHeight);
+                
+                return {
+                  width: Math.max(finalSize, 250), // Minimum 250px untuk deteksi lebih baik
+                  height: Math.max(finalSize, 250)
+                };
+              },
+              aspectRatio: 1.0,
+              disableFlip: false,
+              videoConstraints: videoConstraints,
+              rememberLastUsedCamera: true,
+              showTorchButtonIfSupported: true,
+              // Tambahkan opsi untuk meningkatkan deteksi
+              verbose: false // Set true untuk debugging
+            },
+            (decodedText: string, decodedResult: any) => {
+              // QR Code berhasil di-scan
+              console.log('✅ QR Code detected:', decodedText);
+              console.log('📊 Decoded result:', decodedResult);
+              
+              // Validasi dan proses QR code
+              if (decodedText && decodedText.trim() !== '') {
+                handleQRScanSuccess(decodedText);
+              } else {
+                console.warn('Empty QR code detected');
+              }
+            },
+            (errorMessage: string) => {
+              // Log error untuk debugging - hanya log error penting
+              // Error ini biasanya muncul terus menerus saat tidak ada QR code yang terdeteksi
+              // Jadi kita filter untuk menghindari spam console
+              if (errorMessage) {
+                // Filter out common non-critical errors
+                const isCriticalError = !errorMessage.includes('NotFoundException') && 
+                                       !errorMessage.includes('No QR') &&
+                                       !errorMessage.includes('QR code parse error') &&
+                                       !errorMessage.includes('QR code parse error, error') &&
+                                       !errorMessage.includes('QR code decode error');
+                
+                if (isCriticalError) {
+                  console.warn('QR Scanner warning:', errorMessage);
+                }
+              }
+            }
+          );
+          
+          // Set camera ready setelah sedikit delay untuk memastikan video sudah dimuat
+          setTimeout(() => {
+            cameraReady.value = true;
+            console.log('Camera ready, scanner is active');
+          }, 500);
+          
+          showSnackbar('Info', 'Scanner aktif. Arahkan kamera ke QR code dan pastikan pencahayaan cukup', 'info', 'mdi-camera');
+        } catch (cameraError: any) {
+          console.error('Camera error:', cameraError);
+          
+          // Jika kamera belakang tidak tersedia di mobile, coba kamera depan
+          if (isMobile.value && cameraError.name === 'NotFoundError') {
+            try {
+              console.log('Trying front camera as fallback...');
+              await html5QrCode.start(
+                { facingMode: "user" },
+                {
+                  fps: 15,
+                  qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+                    const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
+                    const percentageSize = Math.floor(minEdgeSize * 0.85);
+                    const fixedSize = 300;
+                    const qrboxSize = Math.max(percentageSize, fixedSize);
+                    const finalSize = Math.min(qrboxSize, minEdgeSize * 0.95);
+                    
+                    return {
+                      width: Math.max(finalSize, 250),
+                      height: Math.max(finalSize, 250)
+                    };
+                  },
+                  aspectRatio: 1.0,
+                  disableFlip: false,
+                  videoConstraints: {
+                    facingMode: "user",
+                    width: { ideal: 640, min: 320 },
+                    height: { ideal: 480, min: 240 }
+                  },
+                  rememberLastUsedCamera: true,
+                  verbose: false
+                },
+                (decodedText: string, decodedResult: any) => {
+                  console.log('✅ QR Code detected (front camera):', decodedText);
+                  if (decodedText && decodedText.trim() !== '') {
+                    handleQRScanSuccess(decodedText);
+                  }
+                },
+                (errorMessage: string) => {
+                  if (errorMessage) {
+                    const isCriticalError = !errorMessage.includes('NotFoundException') && 
+                                           !errorMessage.includes('No QR') &&
+                                           !errorMessage.includes('QR code parse error') &&
+                                           !errorMessage.includes('QR code decode error');
+                    
+                    if (isCriticalError) {
+                      console.warn('QR Scanner (front) warning:', errorMessage);
+                    }
+                  }
+                }
+              );
+              
+              setTimeout(() => {
+                cameraReady.value = true;
+              }, 500);
+              
+              showSnackbar('Info', 'Menggunakan kamera depan. Arahkan QR code ke kamera', 'info', 'mdi-camera');
+            } catch (fallbackError: any) {
+              console.error('Fallback camera also failed:', fallbackError);
+              throw cameraError; // Throw original error
+            }
+          } else {
+            // Coba menggunakan deviceId langsung jika facingMode gagal
+            try {
+              console.log('Trying to get camera devices...');
+              const devices = await navigator.mediaDevices.enumerateDevices();
+              const videoDevices = devices.filter(device => device.kind === 'videoinput');
+              
+              if (videoDevices.length > 0) {
+                // Gunakan kamera pertama yang tersedia
+                const deviceId = videoDevices[0].deviceId;
+                console.log('Using device:', deviceId, videoDevices[0].label);
+                
+                await html5QrCode.start(
+                  { deviceId: { exact: deviceId } },
+                  {
+                    fps: isMobile.value ? 15 : 20,
+                    qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+                      const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
+                      const percentageSize = Math.floor(minEdgeSize * 0.80);
+                      const fixedSize = isMobile.value ? 300 : 400;
+                      const qrboxSize = Math.max(percentageSize, fixedSize);
+                      const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
+                      
+                      return {
+                        width: Math.max(finalSize, 250),
+                        height: Math.max(finalSize, 250)
+                      };
+                    },
+                    aspectRatio: 1.0,
+                    disableFlip: false,
+                    videoConstraints: {
+                      deviceId: { exact: deviceId },
+                      width: { ideal: isMobile.value ? 640 : 1280, min: isMobile.value ? 320 : 640 },
+                      height: { ideal: isMobile.value ? 480 : 720, min: isMobile.value ? 240 : 480 }
+                    },
+                    rememberLastUsedCamera: true,
+                    verbose: false
+                  },
+                  (decodedText: string, decodedResult: any) => {
+                    console.log('✅ QR Code detected (deviceId):', decodedText);
+                    if (decodedText && decodedText.trim() !== '') {
+                      handleQRScanSuccess(decodedText);
+                    }
+                  },
+                  (errorMessage: string) => {
+                    if (errorMessage) {
+                      const isCriticalError = !errorMessage.includes('NotFoundException') && 
+                                             !errorMessage.includes('No QR') &&
+                                             !errorMessage.includes('QR code parse error') &&
+                                             !errorMessage.includes('QR code decode error');
+                      
+                      if (isCriticalError) {
+                        console.warn('QR Scanner (deviceId) warning:', errorMessage);
+                      }
+                    }
+                  }
+                );
+                
+                setTimeout(() => {
+                  cameraReady.value = true;
+                }, 500);
+                
+                showSnackbar('Info', 'Scanner aktif menggunakan kamera yang tersedia', 'info', 'mdi-camera');
+              } else {
+                throw cameraError;
+              }
+            } catch (deviceError: any) {
+              console.error('DeviceId approach also failed:', deviceError);
+              throw cameraError;
+            }
+          }
         }
+      }
+    } catch (err: any) {
+      console.error('Error starting scanner:', err);
+      isScanning.value = false;
+      cameraReady.value = false;
+      
+      // Don't set hasCamera to false if it was detected, just log the error
+      let errorMessage = 'Gagal memulai scanner. ';
+      
+      if (err.message && err.message.includes('not found')) {
+        errorMessage = 'Element scanner tidak ditemukan. Silakan refresh halaman dan coba lagi.';
+        console.error('Element not found error. Element ID:', qrCodeId);
+      } else if (err.name === 'NotAllowedError') {
+        errorMessage = 'Akses kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
+      } else if (err.name === 'NotFoundError') {
+        errorMessage = 'Kamera tidak ditemukan. Silakan gunakan input manual.';
+        hasCamera.value = false;
+      } else if (err.name === 'NotReadableError') {
+        errorMessage = 'Kamera sedang digunakan aplikasi lain. Tutup aplikasi lain yang menggunakan kamera.';
+      } else {
+        errorMessage += err.message || err.name || 'Unknown error';
+      }
+      
+      showSnackbar('Error', errorMessage, 'error', 'mdi-alert');
     }
-};
-
-const performCheckIn = async (data: string): Promise<boolean> => {
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    const success = Math.random() < 0.8;
-    
-    // Simpan ke history (baik berhasil maupun gagal)
-    const [patientId, status] = data.split('|');
-    saveToHistory({
-        patientId: patientId || 'Unknown',
-        status: success ? (status || 'ALLOWED') : 'failed',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: scannedData.value ? 'QR Scan' : 'Manual'
-    });
-    
-    return success;
-};
-
-const showSnackbar = (title: string, message: string, color: string, icon: string) => {
-    snackbar.value.title = title;
-    snackbar.value.message = message;
-    snackbar.value.color = color;
-    snackbar.value.icon = icon;
-    snackbar.value.show = true;
-};
-
-const checkInManual = async () => {
-  if (!manualInput.value) {
-    showSnackbar('Error', 'Mohon isi nomor antrean atau ID pasien', 'error', 'mdi-alert');
-    return;
-  }
-
-  // Simulasi check-in manual
-  const success = await performCheckIn(`${manualInput.value}|ALLOWED`);
+  };
   
-  if (success) {
-    showSnackbar('Berhasil!', 'Check-in manual berhasil dilakukan.', 'success', 'mdi-check-circle');
-    manualInput.value = '';
-    if (manualForm.value) {
-      (manualForm.value as any).reset();
+  const stopScanning = async () => {
+    try {
+      if (html5QrCode && isScanning.value) {
+        await html5QrCode.stop();
+        await html5QrCode.clear();
+        isScanning.value = false;
+        cameraReady.value = false;
+        showSnackbar('Info', 'Scanner dihentikan', 'info', 'mdi-camera-off');
+      }
+    } catch (err: any) {
+      console.error('Error stopping scanner:', err);
+      isScanning.value = false;
+      cameraReady.value = false;
     }
-  } else {
-    showSnackbar('Gagal!', 'Check-in manual gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
-  }
-};
-
-// Generate QR Code function
-const generateQRCode = async () => {
-  if (!generatePatientId.value) {
-    showSnackbar('Error', 'Mohon isi ID Pasien', 'error', 'mdi-alert');
-    return;
-  }
-
-  generatedQRData.value = `${generatePatientId.value}|${generateStatus.value}`;
+  };
   
-  await nextTick();
-  
-  // Clear previous QR code
-  const qrContainer = document.getElementById('qrcode');
-  if (qrContainer) {
-    qrContainer.innerHTML = '';
+  const handleQRScanSuccess = (decodedText: string) => {
+    console.log('🎯 QR Scan Success! Data:', decodedText);
     
-    // Load QRCode.js from CDN if not already loaded
-    if (typeof window.QRCode === 'undefined') {
-      const script = document.createElement('script');
-      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js';
-      script.onload = () => createQR();
-      document.head.appendChild(script);
+    // Validasi data QR
+    if (!decodedText || decodedText.trim() === '') {
+      console.warn('QR Code data is empty');
+      showSnackbar('Error', 'QR Code tidak valid atau kosong', 'error', 'mdi-alert');
+      return;
+    }
+    
+    // Cek apakah QR code sudah pernah berhasil di-scan (mencegah double antrian)
+    if (isQRCodeAlreadyScanned(decodedText)) {
+      console.log('⏭️ Scan diabaikan: QR code sudah pernah berhasil di-scan');
+      showSnackbar('Peringatan', 'QR Code ini sudah pernah berhasil di-scan. Tidak dapat digunakan lagi untuk mencegah double antrian.', 'warning', 'mdi-alert-circle');
+      return;
+    }
+    
+    // Debounce: cegah scan berulang dalam waktu singkat
+    const now = Date.now();
+    if (lastScannedQR === decodedText && (now - lastScanTime) < SCAN_DEBOUNCE_MS) {
+      console.log('⏭️ Scan diabaikan (debounce): QR code sama dalam waktu singkat');
+      return;
+    }
+    
+    // Update last scan info
+    lastScannedQR = decodedText;
+    lastScanTime = now;
+    
+    // Simpan data QR yang di-scan
+    scannedData.value = decodedText;
+    
+    // Scanner tetap berjalan untuk memungkinkan scan QR code berikutnya
+    
+    // Proses data QR
+    try {
+      onDetect(decodedText);
+    } catch (error) {
+      console.error('Error processing QR data:', error);
+      showSnackbar('Error', 'Gagal memproses data QR Code', 'error', 'mdi-alert');
+    }
+    
+    // Simpan ke localStorage untuk riwayat
+    saveScannedQRData(decodedText);
+  };
+  
+  // Simpan data QR yang di-scan ke localStorage
+  const saveScannedQRData = (qrData: string) => {
+    if (typeof window !== 'undefined') {
+      const scannedQRs = JSON.parse(localStorage.getItem('scanned_qr_data') || '[]');
+      scannedQRs.unshift({
+        data: qrData,
+        timestamp: new Date().toISOString(),
+        date: new Date().toLocaleDateString('id-ID'),
+        time: new Date().toLocaleTimeString('id-ID')
+      });
+      
+      // Simpan maksimal 50 item
+      if (scannedQRs.length > 50) {
+        scannedQRs.pop();
+      }
+      
+      localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRs));
+    }
+  };
+  
+  // Load successful scans dari localStorage
+  const loadSuccessfulScans = () => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(SUCCESSFUL_SCANS_KEY);
+      if (stored) {
+        try {
+          const scansArray = JSON.parse(stored);
+          successfulScans.value = new Set(scansArray);
+        } catch (e) {
+          console.error('Error loading successful scans:', e);
+          successfulScans.value = new Set();
+        }
+      }
+    }
+  };
+  
+  // Simpan successful scan ke localStorage
+  const saveSuccessfulScan = (qrData: string) => {
+    if (typeof window !== 'undefined') {
+      successfulScans.value.add(qrData);
+      const scansArray = Array.from(successfulScans.value);
+      localStorage.setItem(SUCCESSFUL_SCANS_KEY, JSON.stringify(scansArray));
+    }
+  };
+  
+  // Cek apakah QR code sudah pernah berhasil di-scan
+  const isQRCodeAlreadyScanned = (qrData: string): boolean => {
+    return successfulScans.value.has(qrData);
+  };
+  
+  // Watch tab changes untuk stop scanner saat pindah tab
+  watch(tab, (newTab) => {
+    if (newTab !== 'scan' && isScanning.value) {
+      stopScanning();
+    }
+    // Check camera when switching to scan tab
+    if (newTab === 'scan' && !hasCamera.value && !cameraChecking.value) {
+      checkCameraAvailability();
+    }
+  });
+  
+  // Check camera on mount
+  onMounted(() => {
+    if (typeof window !== 'undefined' && typeof navigator !== 'undefined') {
+      if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
+        checkCameraAvailability();
+      } else {
+        console.warn('MediaDevices API not available. Make sure you are using HTTPS or localhost.');
+        hasCamera.value = false;
+        cameraChecking.value = false;
+        showSnackbar('Warning', 'MediaDevices API tidak tersedia. Pastikan menggunakan HTTPS atau localhost.', 'warning', 'mdi-alert');
+      }
     } else {
-      createQR();
+      hasCamera.value = false;
+      cameraChecking.value = false;
     }
-  }
+  });
   
-  showSnackbar('Berhasil!', 'QR Code berhasil di-generate', 'success', 'mdi-check-circle');
-};
-
-const createQR = () => {
-  const qrContainer = document.getElementById('qrcode');
-  if (qrContainer && window.QRCode) {
-    new window.QRCode(qrContainer, {
-      text: generatedQRData.value,
-      width: 256,
-      height: 256,
-      colorDark: '#1565C0',
-      colorLight: '#ffffff',
-      correctLevel: window.QRCode.CorrectLevel.H
-    });
-  }
-};
-
-const downloadQR = () => {
-  const canvas = document.querySelector('#qrcode canvas') as HTMLCanvasElement;
-  if (canvas) {
-    const url = canvas.toDataURL('image/png');
-    const link = document.createElement('a');
-    link.download = `QR-${generatePatientId.value}.png`;
-    link.href = url;
-    link.click();
-    showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download');
-  }
-};
-
-const shareQR = async () => {
-  const canvas = document.querySelector('#qrcode canvas') as HTMLCanvasElement;
-  if (canvas) {
-    canvas.toBlob(async (blob) => {
-      if (blob) {
-        const file = new File([blob], `QR-${generatePatientId.value}.png`, { type: 'image/png' });
+  // Cleanup saat component unmount
+  onUnmounted(() => {
+    if (html5QrCode && isScanning.value) {
+      stopScanning();
+    }
+  });
+  
+  const onDetect = async (decodedText: string) => {
+      const [patientId, status] = decodedText.split('|');
+      
+      // Validasi format QR code
+      if (!patientId || !status) {
+          showSnackbar('Error', 'QR Code tidak valid. Format harus: ID_PASIEN|STATUS', 'error', 'mdi-close-circle');
+          return;
+      }
+      
+      // Cek apakah pasien diperbolehkan check-in
+      const isAllowed = status === 'ALLOWED';
+      
+      if (isAllowed) {
+          // Jika diperbolehkan, langsung proses check-in
+          // Proses check-in langsung
+          const checkinSuccess = await performCheckIn(decodedText, 'QR Scan');
+          
+          // Simpan hasil check-in
+          lastCheckInResult.value = {
+              success: checkinSuccess,
+              patientId: patientId,
+              status: status
+          };
+          
+          // Simpan ke history check-in dengan status hasil check-in
+          saveToHistory({
+              patientId: patientId || 'Unknown',
+              status: checkinSuccess ? 'success' : 'failed',
+              checkInTime: new Date().toISOString(),
+              checkInDate: new Date().toISOString(),
+              method: 'QR Scan'
+          });
+          
+          // Tampilkan dialog dengan hasil check-in
+          if (checkinSuccess) {
+              // Simpan QR code yang berhasil di-scan untuk mencegah scan ulang
+              saveSuccessfulScan(decodedText);
+              infoMessage.value = `✅ Check-in Berhasil!\n\nPasien ${patientId} berhasil melakukan check-in.`;
+              infoAction.value = 'checkin';
+          } else {
+              infoMessage.value = `❌ Check-in Gagal!\n\nPasien ${patientId} diperbolehkan check-in, namun proses check-in gagal. Silakan coba lagi.`;
+              infoAction.value = 'checkin';
+          }
+          
+          infoDialog.value = true;
+      } else {
+          // Jika belum diperbolehkan, tampilkan pesan
+          lastCheckInResult.value = {
+              success: false,
+              patientId: patientId,
+              status: status
+          };
+          
+          // Simpan ke history check-in untuk NOT_ALLOWED
+          saveToHistory({
+              patientId: patientId || 'Unknown',
+              status: 'NOT_ALLOWED',
+              checkInTime: new Date().toISOString(),
+              checkInDate: new Date().toISOString(),
+              method: 'QR Scan'
+          });
+          
+          infoMessage.value = `⏳ Belum Diizinkan Check-in\n\nAntrean Pasien ${patientId} belum diperbolehkan check-in. Mohon menunggu hingga antrean Anda dipanggil.`;
+          infoAction.value = 'kembali';
+          infoDialog.value = true;
+      }
+  };
+  
+  const handleInfoAction = async () => {
+      infoDialog.value = false;
+      
+      // Scanner tetap berjalan setelah dialog ditutup
+      // Ini memungkinkan user untuk segera memproses QR code berikutnya
+      // tanpa perlu memulai scanner lagi
+  };
+  
+  const performCheckIn = async (data: string, method: string = 'QR Scan'): Promise<boolean> => {
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      const success = Math.random() < 0.8;
+      
+      // History akan disimpan di onDetect setelah performCheckIn selesai
+      // Jadi kita hanya perlu return hasil check-in
+      return success;
+  };
+  
+  const showSnackbar = (title: string, message: string, color: string, icon: string) => {
+      snackbar.value.title = title;
+      snackbar.value.message = message;
+      snackbar.value.color = color;
+      snackbar.value.icon = icon;
+      snackbar.value.show = true;
+  };
+  
+  const checkInManual = async () => {
+    if (!manualInput.value) {
+      showSnackbar('Error', 'Mohon isi nomor antrean atau ID pasien', 'error', 'mdi-alert');
+      return;
+    }
+  
+    // Simulasi check-in manual
+    const success = await performCheckIn(`${manualInput.value}|ALLOWED`);
+    
+    if (success) {
+      showSnackbar('Berhasil!', 'Check-in manual berhasil dilakukan.', 'success', 'mdi-check-circle');
+      manualInput.value = '';
+      if (manualForm.value) {
+        (manualForm.value as any).reset();
+      }
+    } else {
+      showSnackbar('Gagal!', 'Check-in manual gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
+    }
+  };
+  
+  // Quick generate QR for testing
+  const generateQuickQR = (patientId: string, status: string) => {
+    generatePatientId.value = patientId;
+    generateStatus.value = status;
+    generateQRCode();
+  };
+  
+  // Generate QR Code function
+  const generateQRCode = async () => {
+    if (!generatePatientId.value) {
+      showSnackbar('Error', 'Mohon isi ID Pasien', 'error', 'mdi-alert');
+      return;
+    }
+  
+    generatedQRData.value = `${generatePatientId.value}|${generateStatus.value}`;
+    
+    await nextTick();
+    
+    // Clear previous QR code
+    const qrContainer = document.getElementById('qrcode');
+    if (qrContainer) {
+      qrContainer.innerHTML = '';
+      
+      try {
+        // Use qrcode package that's already installed
+        const QRCode = (await import('qrcode')).default;
+        
+        // Create QR code as data URL
+        const qrDataUrl = await QRCode.toDataURL(generatedQRData.value, {
+          errorCorrectionLevel: 'H', // High error correction for better scanning
+          type: 'image/png',
+          quality: 1,
+          margin: 2,
+          width: 300,
+          color: {
+            dark: '#000000', // Black
+            light: '#FFFFFF' // White
+          }
+        });
+        
+        // Create img element and append to container
+        const img = document.createElement('img');
+        img.src = qrDataUrl;
+        img.alt = 'QR Code';
+        img.style.width = '100%';
+        img.style.maxWidth = '300px';
+        img.style.height = 'auto';
+        img.style.display = 'block';
+        img.style.margin = '0 auto';
+        qrContainer.appendChild(img);
+        
+        console.log('QR Code created successfully:', generatedQRData.value);
+        showSnackbar('Berhasil!', 'QR Code berhasil di-generate. Silakan scan untuk testing', 'success', 'mdi-check-circle');
+      } catch (error) {
+        console.error('Error creating QR code:', error);
+        showSnackbar('Error', 'Gagal membuat QR Code. Silakan coba lagi', 'error', 'mdi-alert');
+      }
+    } else {
+      showSnackbar('Error', 'Container QR Code tidak ditemukan', 'error', 'mdi-alert');
+    }
+  };
+  
+  const downloadQR = async () => {
+    const img = document.querySelector('#qrcode img') as HTMLImageElement;
+    if (img && img.src) {
+      try {
+        // Convert img src (data URL) to blob
+        const response = await fetch(img.src);
+        const blob = await response.blob();
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        const fileName = `QR-Test-${generatePatientId.value}-${generateStatus.value}-${Date.now()}.png`;
+        link.download = fileName;
+        link.href = url;
+        link.style.display = 'none';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+        showSnackbar('Berhasil!', `QR Code berhasil didownload: ${fileName}`, 'success', 'mdi-download');
+      } catch (error) {
+        console.error('Download error:', error);
+        // Fallback: use img src directly
+        const link = document.createElement('a');
+        link.download = `QR-Test-${generatePatientId.value}-${generateStatus.value}.png`;
+        link.href = img.src;
+        link.click();
+        showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download');
+      }
+    } else {
+      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
+    }
+  };
+  
+  const copyQRToClipboard = async () => {
+    const img = document.querySelector('#qrcode img') as HTMLImageElement;
+    if (img && img.src) {
+      try {
+        // Convert img src to blob
+        const response = await fetch(img.src);
+        const blob = await response.blob();
+        
+        try {
+          await navigator.clipboard.write([
+            new ClipboardItem({
+              'image/png': blob
+            })
+          ]);
+          showSnackbar('Berhasil!', 'QR Code berhasil disalin ke clipboard', 'success', 'mdi-content-copy');
+        } catch (err: any) {
+          console.error('Clipboard error:', err);
+          // Fallback: download instead
+          showSnackbar('Info', 'Copy ke clipboard tidak didukung. Gunakan tombol Download.', 'info', 'mdi-information');
+        }
+      } catch (error) {
+        console.error('Copy error:', error);
+        showSnackbar('Error', 'Gagal menyalin QR Code', 'error', 'mdi-alert');
+      }
+    } else {
+      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
+    }
+  };
+  
+  const shareQR = async () => {
+    const img = document.querySelector('#qrcode img') as HTMLImageElement;
+    if (img && img.src) {
+      try {
+        // Convert img src to blob
+        const response = await fetch(img.src);
+        const blob = await response.blob();
+        const file = new File([blob], `QR-Test-${generatePatientId.value}-${generateStatus.value}.png`, { type: 'image/png' });
         
         if (navigator.share && navigator.canShare({ files: [file] })) {
           try {
             await navigator.share({
               files: [file],
-              title: 'QR Code Check-in',
-              text: `QR Code untuk pasien ${generatePatientId.value}`
+              title: 'QR Code Check-in Test',
+              text: `QR Code untuk testing: ${generatedQRData.value}`
             });
             showSnackbar('Berhasil!', 'QR Code berhasil dibagikan', 'success', 'mdi-share');
           } catch (err: any) {
             if (err.name !== 'AbortError') {
-              showSnackbar('Info', 'Gagal membagikan. Silakan download dan kirim manual.', 'info', 'mdi-information');
+              // Fallback to copy or download
+              copyQRToClipboard();
             }
           }
         } else {
-          // Fallback: copy to clipboard atau download
-          showSnackbar('Info', 'Browser tidak support share. Silakan gunakan Download.', 'info', 'mdi-information');
+          // Fallback: try copy to clipboard
+          copyQRToClipboard();
         }
+      } catch (error) {
+        console.error('Share error:', error);
+        showSnackbar('Error', 'Gagal membagikan QR Code', 'error', 'mdi-alert');
       }
-    });
-  }
-};
-
-// History Functions
-const HISTORY_STORAGE_KEY = 'checkin_history';
-
-const loadHistory = () => {
-  if (typeof window !== 'undefined') {
-    const stored = localStorage.getItem(HISTORY_STORAGE_KEY);
-    if (stored) {
-      try {
-        checkInHistory.value = JSON.parse(stored);
-      } catch (e) {
-        console.error('Error loading history:', e);
-        checkInHistory.value = [];
-      }
+    } else {
+      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
     }
-  }
-};
-
-const saveToHistory = (item: {
-  patientId: string;
-  queueNumber?: string;
-  status: string;
-  checkInTime: string;
-  checkInDate: string;
-  method: string;
-}) => {
-  const historyItem = {
-    ...item,
-    queueNumber: item.queueNumber || `ANT-${Date.now()}`,
   };
   
-  checkInHistory.value.unshift(historyItem);
+  // History Functions
+  const HISTORY_STORAGE_KEY = 'checkin_history';
   
-  // Simpan maksimal 100 item
-  if (checkInHistory.value.length > 100) {
-    checkInHistory.value = checkInHistory.value.slice(0, 100);
-  }
-  
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
-  }
-};
-
-const deleteHistoryItem = (index: number) => {
-  checkInHistory.value.splice(index, 1);
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
-  }
-  showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
-};
-
-const clearHistory = () => {
-  checkInHistory.value = [];
-  if (typeof window !== 'undefined') {
-    localStorage.removeItem(HISTORY_STORAGE_KEY);
-  }
-  showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
-};
-
-const openHistoryDialog = () => {
-  loadHistory();
-  historyDialog.value = true;
-};
-
-const filteredHistory = computed(() => {
-  let filtered = [...checkInHistory.value];
-  
-  // Filter by search
-  if (historySearch.value) {
-    const search = historySearch.value.toLowerCase();
-    filtered = filtered.filter(item => 
-      item.patientId.toLowerCase().includes(search) ||
-      (item.queueNumber && item.queueNumber.toLowerCase().includes(search))
-    );
-  }
-  
-  // Filter by status
-  if (historyStatusFilter.value) {
-    filtered = filtered.filter(item => {
-      if (historyStatusFilter.value === 'success') {
-        return item.status === 'ALLOWED' || item.status === 'success';
-      } else if (historyStatusFilter.value === 'failed') {
-        return item.status === 'NOT_ALLOWED' || item.status === 'failed';
+  const loadHistory = () => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(HISTORY_STORAGE_KEY);
+      if (stored) {
+        try {
+          checkInHistory.value = JSON.parse(stored);
+        } catch (e) {
+          console.error('Error loading history:', e);
+          checkInHistory.value = [];
+        }
       }
-      return true;
+    }
+  };
+  
+  const saveToHistory = (item: {
+    patientId: string;
+    queueNumber?: string;
+    status: string;
+    checkInTime: string;
+    checkInDate: string;
+    method: string;
+  }) => {
+    const historyItem = {
+      ...item,
+      queueNumber: item.queueNumber || `ANT-${Date.now()}`,
+    };
+    
+    checkInHistory.value.unshift(historyItem);
+    
+    // Simpan maksimal 100 item
+    if (checkInHistory.value.length > 100) {
+      checkInHistory.value = checkInHistory.value.slice(0, 100);
+    }
+    
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
+    }
+  };
+  
+  const deleteHistoryItem = (index: number) => {
+    checkInHistory.value.splice(index, 1);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
+    }
+    showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
+  };
+  
+  const clearHistory = () => {
+    checkInHistory.value = [];
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem(HISTORY_STORAGE_KEY);
+    }
+    showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
+  };
+  
+  const openHistoryDialog = () => {
+    loadHistory();
+    historyDialog.value = true;
+  };
+  
+  const openQRHistoryDialog = () => {
+    loadScannedQRHistory();
+    qrHistoryDialog.value = true;
+  };
+  
+  const loadScannedQRHistory = () => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem('scanned_qr_data');
+      if (stored) {
+        try {
+          scannedQRHistory.value = JSON.parse(stored);
+        } catch (e) {
+          console.error('Error loading QR history:', e);
+          scannedQRHistory.value = [];
+        }
+      } else {
+        scannedQRHistory.value = [];
+      }
+    }
+  };
+  
+  const clearQRHistory = () => {
+    scannedQRHistory.value = [];
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('scanned_qr_data');
+    }
+    showSnackbar('Berhasil', 'Semua riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
+  };
+  
+  const deleteQRHistoryItem = (index: number) => {
+    scannedQRHistory.value.splice(index, 1);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRHistory.value));
+    }
+    showSnackbar('Berhasil', 'Riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
+  };
+  
+  const useQRData = (qrData: string) => {
+    qrHistoryDialog.value = false;
+    scannedData.value = qrData;
+    onDetect(qrData);
+  };
+  
+  const filteredQRHistory = computed(() => {
+    let filtered = [...scannedQRHistory.value];
+    
+    // Filter by search
+    if (historySearch.value) {
+      const search = historySearch.value.toLowerCase();
+      filtered = filtered.filter(item => 
+        item.data.toLowerCase().includes(search)
+      );
+    }
+    
+    return filtered;
+  });
+  
+  const filteredHistory = computed(() => {
+    let filtered = [...checkInHistory.value];
+    
+    // Filter by search
+    if (historySearch.value) {
+      const search = historySearch.value.toLowerCase();
+      filtered = filtered.filter(item => 
+        item.patientId.toLowerCase().includes(search) ||
+        (item.queueNumber && item.queueNumber.toLowerCase().includes(search))
+      );
+    }
+    
+    // Filter by status
+    if (historyStatusFilter.value) {
+      filtered = filtered.filter(item => {
+        if (historyStatusFilter.value === 'success') {
+          return item.status === 'ALLOWED' || item.status === 'success';
+        } else if (historyStatusFilter.value === 'failed') {
+          return item.status === 'NOT_ALLOWED' || item.status === 'failed';
+        }
+        return true;
+      });
+    }
+    
+    return filtered;
+  });
+  
+  const getStatusColor = (status: string) => {
+    if (status === 'ALLOWED' || status === 'success') return 'success';
+    if (status === 'NOT_ALLOWED' || status === 'failed') return 'error';
+    return 'warning';
+  };
+  
+  const getStatusIcon = (status: string) => {
+    if (status === 'ALLOWED' || status === 'success') return 'mdi-check-circle';
+    if (status === 'NOT_ALLOWED' || status === 'failed') return 'mdi-close-circle';
+    return 'mdi-clock-alert';
+  };
+  
+  const getStatusText = (status: string) => {
+    if (status === 'ALLOWED' || status === 'success') return 'Berhasil';
+    if (status === 'NOT_ALLOWED' || status === 'failed') return 'Gagal';
+    return 'Pending';
+  };
+  
+  const getStatusClass = (status: string) => {
+    if (status === 'ALLOWED' || status === 'success') return 'history-success';
+    if (status === 'NOT_ALLOWED' || status === 'failed') return 'history-failed';
+    return 'history-pending';
+  };
+  
+  const formatDateTime = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleTimeString('id-ID', { 
+      hour: '2-digit', 
+      minute: '2-digit',
+      second: '2-digit'
     });
+  };
+  
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('id-ID', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric'
+    });
+  };
+  
+  // Load history on mount
+  if (typeof window !== 'undefined') {
+    loadHistory();
+    loadScannedQRHistory();
+    loadSuccessfulScans();
+  }
+  </script>
+  
+  <style scoped>
+  /* Modern Minimalist Background */
+  .bg-modern {
+    background: #ffffff;
+    min-height: 100vh;
+    max-height: 100vh;
+    position: relative;
+    overflow: hidden;
   }
   
-  return filtered;
-});
-
-const getStatusColor = (status: string) => {
-  if (status === 'ALLOWED' || status === 'success') return 'success';
-  if (status === 'NOT_ALLOWED' || status === 'failed') return 'error';
-  return 'warning';
-};
-
-const getStatusIcon = (status: string) => {
-  if (status === 'ALLOWED' || status === 'success') return 'mdi-check-circle';
-  if (status === 'NOT_ALLOWED' || status === 'failed') return 'mdi-close-circle';
-  return 'mdi-clock-alert';
-};
-
-const getStatusText = (status: string) => {
-  if (status === 'ALLOWED' || status === 'success') return 'Berhasil';
-  if (status === 'NOT_ALLOWED' || status === 'failed') return 'Gagal';
-  return 'Pending';
-};
-
-const getStatusClass = (status: string) => {
-  if (status === 'ALLOWED' || status === 'success') return 'history-success';
-  if (status === 'NOT_ALLOWED' || status === 'failed') return 'history-failed';
-  return 'history-pending';
-};
-
-const formatDateTime = (dateString: string) => {
-  const date = new Date(dateString);
-  return date.toLocaleTimeString('id-ID', { 
-    hour: '2-digit', 
-    minute: '2-digit',
-    second: '2-digit'
-  });
-};
-
-const formatDate = (dateString: string) => {
-  const date = new Date(dateString);
-  return date.toLocaleDateString('id-ID', {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric'
-  });
-};
-
-// Load history on mount
-if (typeof window !== 'undefined') {
-  loadHistory();
-}
-</script>
-
-<style scoped>
-.bg-light {
-  background: #f5f7fa;
-  min-height: 100vh;
-}
-
-.card-main {
-  transition: all 0.3s ease;
-}
-
-.card-main:hover {
-  transform: translateY(-4px);
-}
-
-.header-gradient {
-  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
-  position: relative;
-  overflow: hidden;
-}
-
-.header-gradient::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  right: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-  animation: pulse 4s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 0.5; }
-  50% { transform: scale(1.1); opacity: 0.8; }
-}
-
-.hospital-icon-wrapper {
-  display: inline-block;
-  animation: float 3s ease-in-out infinite;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-}
-
-.pulse-animation {
-  animation: pulse-icon 2s ease-in-out infinite;
-}
-
-@keyframes pulse-icon {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.05); }
-}
-
-.custom-tabs :deep(.v-tab) {
-  text-transform: none;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  font-size: 0.9rem;
-}
-
-.custom-tabs :deep(.v-tab--selected) {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-}
-
-.scan-section, .manual-section, .generate-section {
-  animation: fadeIn 0.5s ease-in;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.qr-scanner-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.qr-placeholder {
-  width: 100%;
-  max-width: 320px;
-  height: 320px;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-  border-radius: 16px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
-}
-
-.scanner-overlay {
-  position: absolute;
-  width: 80%;
-  height: 80%;
-}
-
-.corner {
-  position: absolute;
-  width: 40px;
-  height: 40px;
-  border: 3px solid #1565C0;
-}
-
-.corner-tl {
-  top: 0;
-  left: 0;
-  border-right: none;
-  border-bottom: none;
-  border-radius: 8px 0 0 0;
-}
-
-.corner-tr {
-  top: 0;
-  right: 0;
-  border-left: none;
-  border-bottom: none;
-  border-radius: 0 8px 0 0;
-}
-
-.corner-bl {
-  bottom: 0;
-  left: 0;
-  border-right: none;
-  border-top: none;
-  border-radius: 0 0 0 8px;
-}
-
-.corner-br {
-  bottom: 0;
-  right: 0;
-  border-left: none;
-  border-top: none;
-  border-radius: 0 0 8px 0;
-}
-
-.scan-line {
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #1565C0, transparent);
-  top: 0;
-  animation: scan 2s linear infinite;
-  box-shadow: 0 0 10px #1565C0;
-}
-
-@keyframes scan {
-  0% { top: 0; }
-  100% { top: 100%; }
-}
-
-.qr-icon {
-  position: relative;
-  z-index: 1;
-  animation: breathe 2s ease-in-out infinite;
-}
-
-@keyframes breathe {
-  0%, 100% { opacity: 0.6; }
-  50% { opacity: 1; }
-}
-
-.gradient-button {
-  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
-  color: white !important;
-  font-weight: 700;
-  text-transform: none;
-  letter-spacing: 0.5px;
-  transition: all 0.3s ease;
-}
-
-.gradient-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4) !important;
-}
-
-.gradient-button-secondary {
-  background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%) !important;
-  color: white !important;
-  font-weight: 700;
-  text-transform: none;
-  letter-spacing: 0.5px;
-  transition: all 0.3s ease;
-}
-
-.gradient-button-secondary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(251, 140, 0, 0.4) !important;
-}
-
-.fixed-width-button {
-  width: 280px !important;
-  min-width: 280px !important;
-  max-width: 280px !important;
-}
-
-.custom-input :deep(.v-field) {
-  border-radius: 12px;
-  font-size: 16px;
-}
-
-.custom-input :deep(.v-field--focused) {
-  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.1);
-}
-
-.quick-actions .v-btn {
-  transition: all 0.3s ease;
-}
-
-.quick-actions .v-btn:hover {
-  transform: translateY(-2px);
-}
-
-.qr-code-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 16px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-
-.qr-code-container :deep(canvas) {
-  border-radius: 8px;
-}
-
-.qr-display {
-  animation: slideUp 0.5s ease-out;
-}
-
-.blur-dialog :deep(.v-overlay__scrim) {
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-}
-
-.dialog-card {
-  overflow: hidden;
-  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-@keyframes popIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.8) translateY(20px);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.dialog-header {
-  position: relative;
-  overflow: hidden;
-}
-
-.dialog-header::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
-  animation: rotate 10s linear infinite;
-}
-
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.icon-wrapper {
-  display: inline-block;
-  animation: bounceIn 0.6s ease-out 0.2s both;
-}
-
-@keyframes bounceIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.3);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  70% {
-    transform: scale(0.9);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.dialog-icon {
-  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
-}
-
-.success-header {
-  background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
-}
-
-.warning-header {
-  background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
-}
-
-.dialog-button {
-  text-transform: none;
-  letter-spacing: 0.5px;
-  font-weight: 600;
-  transition: all 0.3s ease;
-}
-
-.dialog-button:hover {
-  transform: translateY(-2px);
-}
-
-.stats-footer {
-  animation: slideUp 0.5s ease-out 0.3s both;
-}
-
-@keyframes slideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.stat-card {
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-  text-align: center;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  transition: all 0.3s ease;
-}
-
-.stat-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
-}
-
-.custom-snackbar {
-  margin-bottom: 16px;
-  margin-right: 16px;
-}
-
-.custom-snackbar :deep(.v-snackbar__wrapper) {
-  min-width: 300px;
-}
-
-/* History Dialog Styles */
-.history-list {
-  max-height: 500px;
-  overflow-y: auto;
-  padding-right: 8px;
-}
-
-.history-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.history-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-
-.history-list::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 10px;
-}
-
-.history-list::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-.history-item {
-  transition: all 0.3s ease;
-  border-left: 4px solid transparent;
-}
-
-.history-item:hover {
-  transform: translateX(4px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-
-.history-success {
-  border-left-color: #4caf50;
-  background: rgba(76, 175, 80, 0.05);
-}
-
-.history-failed {
-  border-left-color: #f44336;
-  background: rgba(244, 67, 54, 0.05);
-}
-
-.history-pending {
-  border-left-color: #ff9800;
-  background: rgba(255, 152, 0, 0.05);
-}
-
-/* Mobile Optimization */
-@media (max-width: 600px) {
-  .v-container.fill-height {
-    padding: 8px !important;
+  .no-scroll-container {
+    height: 100vh;
+    max-height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
   
-  .card-main {
+  .no-scroll-container::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  .no-scroll-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .no-scroll-container::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+  }
+  
+  .no-overflow {
+    overflow: hidden !important;
+    height: 100vh;
+    max-height: 100vh;
+  }
+  
+  .bg-modern::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      radial-gradient(circle at 20% 50%, rgba(21, 101, 192, 0.05) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(21, 101, 192, 0.05) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+  }
+  
+  /* Main Card dengan Glassmorphism */
+  .main-card {
+    background: rgba(255, 255, 255, 0.95) !important;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 24px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* Header Modern Minimalis */
+  .header-modern {
+    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
+    padding: 20px 24px 16px;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .header-modern::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+    pointer-events: none;
+  }
+  
+  .header-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    margin-bottom: 4px;
+  }
+  
+  .icon-circle {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-text {
+    text-align: left;
+  }
+  
+  .title-modern {
+    font-size: 20px;
+    font-weight: 700;
+    color: white;
     margin: 0;
+    letter-spacing: -0.5px;
   }
   
-  .header-gradient {
-    padding: 24px 16px !important;
+  .subtitle-modern {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.85);
+    margin: 2px 0 0;
+    font-weight: 400;
+  }
+  
+  /* Tabs Modern */
+  .tabs-modern {
+    position: relative;
+    z-index: 1;
+  }
+  
+  .tabs-modern :deep(.v-tab) {
+    text-transform: none;
+    font-weight: 500;
+    font-size: 13px;
+    letter-spacing: 0.2px;
+    color: rgba(255, 255, 255, 0.8);
+    min-width: auto;
+    padding: 0 16px;
+    transition: all 0.3s ease;
+  }
+  
+  .tabs-modern :deep(.v-tab--selected) {
+    color: #FB8C00 !important;
+    background: rgba(251, 140, 0, 0.2);
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+  }
+  
+  .tabs-modern :deep(.v-tab--selected .v-icon) {
+    color: #FB8C00 !important;
+  }
+  
+  .tabs-modern :deep(.v-tab--selected span) {
+    color: #FB8C00 !important;
+  }
+  
+  .tabs-modern :deep(.v-slider) {
+    display: none;
+  }
+  
+  .tab-modern {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  
+  .tab-modern .v-icon {
+    font-size: 18px !important;
+  }
+  
+  /* Content Area */
+  .content-modern {
+    background: white;
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+  }
+  
+  .content-modern::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  .content-modern::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .content-modern::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+  }
+  
+  .tab-content {
+    animation: fadeIn 0.4s ease-out;
+  }
+  
+  @keyframes fadeIn {
+    from { 
+      opacity: 0; 
+      transform: translateY(10px); 
+    }
+    to { 
+      opacity: 1; 
+      transform: translateY(0); 
+    }
+  }
+  
+  /* Status Header */
+  .status-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 16px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
+    border-radius: 12px;
+    border: 1px solid rgba(21, 101, 192, 0.1);
+    text-align: center;
+  }
+  
+  .status-icon-wrapper {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    flex-shrink: 0;
+    margin: 0 auto;
+  }
+  
+  .status-text {
+    width: 100%;
+    text-align: center;
+  }
+  
+  .status-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1a1a1a;
+    margin: 0 0 4px;
+    letter-spacing: -0.3px;
+    text-align: center;
+  }
+  
+  .status-subtitle {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0;
+    line-height: 1.4;
+    text-align: center;
+  }
+  
+  /* QR Scanner Modern */
+  .qr-scanner-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 24px 0;
   }
   
   .qr-placeholder {
-    max-width: 280px;
-    height: 280px;
+    width: 100%;
+    max-width: 300px;
+    height: 300px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
+    border-radius: 16px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 2px dashed #1565C0;
+    box-shadow: 0 4px 20px rgba(21, 101, 192, 0.1);
+    margin: 0 auto;
   }
   
-  .stats-footer {
-    display: none;
+  .qr-reader-container {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    position: relative;
   }
-
-  .custom-tabs :deep(.v-tab) {
-    font-size: 0.75rem;
-    padding: 0 8px;
+  
+  .qr-reader-wrapper {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+    background: #000;
+    position: relative;
+    max-width: 500px;
+    max-height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid rgba(21, 101, 192, 0.2);
+    margin: 0 auto;
   }
-}
-</style>
\ No newline at end of file
+  
+  .qr-reader-wrapper :deep(video) {
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 16px;
+    display: block !important;
+    object-fit: cover;
+    background: #000;
+    aspect-ratio: 1 / 1;
+  }
+  
+  .qr-reader-wrapper :deep(canvas) {
+    display: none !important;
+  }
+  
+  .qr-reader-wrapper :deep(#qr-reader__dashboard) {
+    display: none !important;
+  }
+  
+  .qr-reader-wrapper :deep(#qr-reader__scan_region) {
+    border-radius: 16px;
+    border: 3px solid rgba(21, 101, 192, 0.8) !important;
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4) !important;
+    position: relative;
+  }
+  
+  .qr-reader-wrapper :deep(#qr-reader__scan_region::before) {
+    content: '';
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    right: -3px;
+    bottom: -3px;
+    border: 3px solid rgba(21, 101, 192, 0.8);
+    border-radius: 16px;
+    animation: pulse-border 2s ease-in-out infinite;
+  }
+  
+  @keyframes pulse-border {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: scale(1.02);
+    }
+  }
+  
+  .qr-reader-wrapper :deep(#qr-reader__scan_region video) {
+    border-radius: 16px;
+    width: 100% !important;
+    height: 100% !important;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+  }
+  
+  .scanner-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 6px;
+    font-size: 12px;
+  }
+  
+  .scanner-instruction {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 12px;
+    padding: 10px 12px;
+    background: linear-gradient(135deg, rgba(21, 101, 192, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%);
+    border-radius: 10px;
+    color: #1565C0;
+    font-weight: 500;
+    font-size: 12px;
+    text-align: center;
+    border: 1px solid rgba(21, 101, 192, 0.2);
+  }
+  
+  .scanner-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: 16px;
+    z-index: 10;
+  }
+  
+  .scanner-overlay {
+    position: absolute;
+    width: 80%;
+    height: 80%;
+  }
+  
+  .corner {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border: 3px solid #1565C0;
+  }
+  
+  .corner-tl {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+    border-radius: 8px 0 0 0;
+  }
+  
+  .corner-tr {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+    border-radius: 0 8px 0 0;
+  }
+  
+  .corner-bl {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+    border-radius: 0 0 0 8px;
+  }
+  
+  .corner-br {
+    bottom: 0;
+    right: 0;
+    border-left: none;
+    border-top: none;
+    border-radius: 0 0 8px 0;
+  }
+  
+  .scan-line {
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #1565C0, transparent);
+    top: 0;
+    animation: scan 2s linear infinite;
+    box-shadow: 0 0 10px #1565C0;
+  }
+  
+  @keyframes scan {
+    0% { top: 0; }
+    100% { top: 100%; }
+  }
+  
+  .qr-icon {
+    position: relative;
+    z-index: 1;
+    animation: breathe 2s ease-in-out infinite;
+  }
+  
+  @keyframes breathe {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
+  }
+  
+  /* Modern Buttons */
+  .btn-primary-modern {
+    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
+    color: white !important;
+    font-weight: 600;
+    text-transform: none;
+    letter-spacing: 0.3px;
+    border-radius: 12px !important;
+    padding: 14px 28px !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.3) !important;
+  }
+  
+  .btn-primary-modern:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4) !important;
+  }
+  
+  .btn-primary-modern:active {
+    transform: translateY(0);
+  }
+  
+  .btn-primary-modern:disabled {
+    opacity: 0.5;
+    transform: none !important;
+  }
+  
+  .btn-stop-modern {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
+    color: white !important;
+    font-weight: 600;
+    text-transform: none;
+    letter-spacing: 0.3px;
+    border-radius: 12px !important;
+    padding: 14px 28px !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
+  }
+  
+  .btn-stop-modern:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important;
+  }
+  
+  .action-buttons {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .btn-centered {
+    width: auto !important;
+    min-width: 240px !important;
+    max-width: 320px !important;
+    margin: 0 auto !important;
+    display: block !important;
+  }
+  
+  .btn-centered-small {
+    width: auto !important;
+    min-width: 180px !important;
+    margin: 0 auto;
+    display: block;
+  }
+  
+  .btn-test-camera {
+    border-color: #1565C0 !important;
+    color: #1565C0 !important;
+  }
+  
+  .btn-test-camera :deep(.v-btn__content) {
+    color: #1565C0 !important;
+  }
+  
+  .btn-test-camera :deep(.v-icon) {
+    color: #1565C0 !important;
+    opacity: 1 !important;
+  }
+  
+  /* Modern Inputs */
+  .input-modern :deep(.v-field) {
+    border-radius: 12px;
+    font-size: 15px;
+    background: #fafafa;
+    border: 1.5px solid #e5e7eb;
+    transition: all 0.3s ease;
+  }
+  
+  .input-modern :deep(.v-field--focused) {
+    background: white;
+    border-color: #1565C0;
+    box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
+  }
+  
+  .input-modern :deep(.v-field__input) {
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+  
+  .input-modern :deep(.v-label) {
+    font-weight: 500;
+    color: #6b7280;
+  }
+  
+  .quick-actions {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #e5e7eb;
+  }
+  
+  .info-card {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .info-alert-centered {
+    width: 100%;
+  }
+  
+  .info-alert-centered :deep(.v-alert__content) {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 100% !important;
+  }
+  
+  .quick-actions .v-btn {
+    transition: all 0.3s ease;
+    border-radius: 12px !important;
+    border: 1.5px solid #e5e7eb !important;
+  }
+  
+  .quick-actions .v-btn:hover {
+    transform: translateY(-2px);
+    border-color: #1565C0 !important;
+    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
+  }
+  
+  .quick-actions .v-btn :deep(.v-icon) {
+    opacity: 1 !important;
+    color: inherit !important;
+  }
+  
+  .quick-actions .v-btn[color="primary"] {
+    color: #1565C0 !important;
+    border-color: #1565C0 !important;
+  }
+  
+  .quick-actions .v-btn[color="primary"] :deep(.v-icon) {
+    color: #1565C0 !important;
+  }
+  
+  .qr-code-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 16px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  }
+  
+  .qr-code-container :deep(canvas) {
+    border-radius: 8px;
+  }
+  
+  .qr-display {
+    animation: slideUp 0.5s ease-out;
+  }
+  
+  .blur-dialog :deep(.v-overlay__scrim) {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+  
+  .dialog-card {
+    overflow: hidden;
+    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  
+  @keyframes popIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.8) translateY(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+  
+  .dialog-header {
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .dialog-header::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
+    animation: rotate 10s linear infinite;
+  }
+  
+  @keyframes rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  .icon-wrapper {
+    display: inline-block;
+    animation: bounceIn 0.6s ease-out 0.2s both;
+  }
+  
+  @keyframes bounceIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.3);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    70% {
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  .dialog-icon {
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
+  }
+  
+  .success-header {
+    background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
+  }
+  
+  .warning-header {
+    background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
+  }
+  
+  .error-header {
+    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
+  }
+  
+  .icon-bg-error {
+    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
+  }
+  
+  .dialog-button {
+    text-transform: none;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+  }
+  
+  .dialog-button:hover {
+    transform: translateY(-2px);
+  }
+  
+  /* Patient Info Card Styling */
+  .patient-info-card {
+    background: rgba(250, 250, 250, 0.8) !important;
+    border-color: rgba(0, 0, 0, 0.08) !important;
+  }
+  
+  .patient-info-label {
+    color: #9e9e9e !important;
+    font-weight: 500;
+    opacity: 0.9;
+  }
+  
+  .patient-info-value {
+    color: #757575 !important;
+    font-weight: 500 !important;
+    opacity: 0.85;
+  }
+  
+  .patient-info-icon {
+    opacity: 0.7;
+  }
+  
+  /* Stats Footer Modern */
+  .stats-footer-modern {
+    animation: slideUp 0.5s ease-out 0.3s both;
+  }
+  
+  @keyframes slideUp {
+    from { 
+      opacity: 0; 
+      transform: translateY(10px); 
+    }
+    to { 
+      opacity: 1; 
+      transform: translateY(0); 
+    }
+  }
+  
+  .stat-card-modern {
+    background: white;
+    border-radius: 12px;
+    padding: 16px 12px;
+    text-align: center;
+    border: 1px solid #e5e7eb;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .stat-card-modern::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+  }
+  
+  .stat-card-modern:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    border-color: #1565C0;
+  }
+  
+  .stat-card-modern:hover::before {
+    transform: scaleX(1);
+  }
+  
+  .stat-icon-modern {
+    margin-bottom: 12px;
+    display: inline-flex;
+    padding: 8px;
+    background: #e3f2fd;
+    border-radius: 10px;
+  }
+  
+  .stat-value {
+    font-size: 20px;
+    font-weight: 700;
+    color: #1a1a1a;
+    margin-bottom: 4px;
+    letter-spacing: -0.5px;
+  }
+  
+  .stat-label {
+    font-size: 11px;
+    color: #6b7280;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
+  .custom-snackbar {
+    margin-bottom: 16px;
+    margin-right: 16px;
+  }
+  
+  .custom-snackbar :deep(.v-snackbar__wrapper) {
+    min-width: 300px;
+  }
+  
+  /* History Dialog Styles */
+  .history-list {
+    max-height: 500px;
+    overflow-y: auto;
+    padding-right: 8px;
+  }
+  
+  .history-list::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .history-list::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+  }
+  
+  .history-list::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+  }
+  
+  .history-list::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+  
+  .history-item {
+    transition: all 0.3s ease;
+    border-left: 4px solid transparent;
+  }
+  
+  .history-item:hover {
+    transform: translateX(4px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  }
+  
+  .history-success {
+    border-left-color: #4caf50;
+    background: rgba(76, 175, 80, 0.05);
+  }
+  
+  .history-failed {
+    border-left-color: #f44336;
+    background: rgba(244, 67, 54, 0.05);
+  }
+  
+  .history-pending {
+    border-left-color: #ff9800;
+    background: rgba(255, 152, 0, 0.05);
+  }
+  
+  /* Mobile Optimization */
+  @media (max-width: 600px) {
+    .v-container.no-scroll-container {
+      padding: 8px !important;
+    }
+    
+    .main-card {
+      border-radius: 16px !important;
+    }
+    
+    .header-modern {
+      padding: 16px 16px 12px !important;
+    }
+    
+    .content-modern {
+      padding: 16px !important;
+      max-height: calc(100vh - 180px);
+    }
+    
+    .header-content {
+      flex-direction: column;
+      text-align: center;
+      gap: 12px;
+    }
+    
+    .header-text {
+      text-align: center;
+    }
+    
+    .icon-circle {
+      width: 56px;
+      height: 56px;
+    }
+    
+    .title-modern {
+      font-size: 20px;
+    }
+    
+    .subtitle-modern {
+      font-size: 13px;
+    }
+    
+    .content-modern {
+      padding: 20px 16px !important;
+    }
+    
+    .status-header {
+      padding: 16px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: 12px;
+    }
+    
+    .status-icon-wrapper {
+      margin: 0 auto;
+    }
+    
+    .status-text {
+      text-align: center;
+      width: 100%;
+    }
+    
+    .status-title {
+      font-size: 16px;
+    }
+    
+    .status-subtitle {
+      font-size: 13px;
+    }
+    
+    .qr-placeholder {
+      max-width: 100%;
+      height: 280px;
+    }
+    
+    .qr-reader-container {
+      max-width: 100%;
+    }
+    
+    .qr-reader-wrapper {
+      min-height: 300px;
+      max-height: 70vh;
+      border-radius: 16px;
+    }
+    
+    .qr-reader-wrapper :deep(video) {
+      max-height: 70vh;
+      object-fit: contain;
+    }
+    
+    .scanner-instruction {
+      font-size: 12px;
+      padding: 12px;
+    }
+    
+    .stats-footer-modern {
+      margin-top: 8px;
+    }
+    
+    .stat-card-modern {
+      padding: 12px 8px;
+    }
+    
+    .stat-value {
+      font-size: 18px;
+    }
+    
+    .stat-label {
+      font-size: 10px;
+    }
+    
+    .stat-icon-modern {
+      margin-bottom: 8px;
+      padding: 6px;
+    }
+  
+    .tabs-modern :deep(.v-tab) {
+      font-size: 12px;
+      padding: 0 12px;
+    }
+    
+    .tabs-modern :deep(.v-tab .v-icon) {
+      font-size: 18px;
+    }
+    
+    .btn-primary-modern,
+    .btn-stop-modern {
+      padding: 12px 24px !important;
+      font-size: 14px;
+      min-width: 200px !important;
+    }
+    
+    .btn-centered {
+      min-width: 200px !important;
+      max-width: 280px !important;
+    }
+    
+    .qr-placeholder {
+      max-width: 100%;
+      height: 240px;
+    }
+    
+    .qr-reader-wrapper {
+      min-height: 240px;
+      max-height: 280px;
+    }
+  }
+  
+  /* Mobile Landscape */
+  @media (max-width: 900px) and (orientation: landscape) {
+    .qr-reader-wrapper {
+      min-height: 50vh;
+      max-height: 60vh;
+    }
+    
+    .qr-reader-wrapper :deep(video) {
+      max-height: 60vh;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/pages/CheckInPasien/checkIn.vue.refactore.backup b/pages/CheckInPasien/checkIn.vue.refactore.backup
new file mode 100644
index 0000000..17fb045
--- /dev/null
+++ b/pages/CheckInPasien/checkIn.vue.refactore.backup
@@ -0,0 +1,717 @@
+<template>
+  <v-app class="bg-modern">
+    <v-main class="no-overflow">
+      <v-container fluid class="no-scroll-container pa-2 pa-md-4">
+        <v-row align="start" justify="center" class="fill-height">
+          <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column">
+            <!-- Main Card dengan Glassmorphism -->
+            <v-card class="main-card" elevation="0">
+              
+              <!-- Header Minimalis -->
+              <div class="header-modern">
+                <div class="header-content">
+                  <div class="icon-circle">
+                    <v-icon size="36" color="white">mdi-hospital-building</v-icon>
+                  </div>
+                  <div class="header-text">
+                    <h1 class="title-modern">Check-in Pasien</h1>
+                    <p class="subtitle-modern">Sistem Antrean Rumah Sakit</p>
+                  </div>
+                </div>
+                
+                <!-- Tabs Minimalis -->
+                <v-tabs 
+                  v-model="tab" 
+                  align-tabs="center" 
+                  class="tabs-modern mt-3"
+                  bg-color="transparent"
+                  slider-color="#FB8C00"
+                  height="40"
+                >
+                  <v-tab value="scan" class="tab-modern">
+                    <v-icon size="20" class="mr-2">mdi-qrcode-scan</v-icon>
+                    <span>Scan QR</span>
+                  </v-tab>
+                  <v-tab value="manual" class="tab-modern">
+                    <v-icon size="20" class="mr-2">mdi-keyboard</v-icon>
+                    <span>Manual</span>
+                  </v-tab>
+                  <v-tab value="generate" class="tab-modern">
+                    <v-icon size="20" class="mr-2">mdi-qrcode</v-icon>
+                    <span>Generate QR</span>
+                  </v-tab>
+                </v-tabs>
+              </div>
+
+              <v-card-text class="content-modern pa-4 pa-md-6">
+                <v-window v-model="tab">
+                  <!-- Tab Scan QR -->
+                  <v-window-item value="scan">
+                    <QRScanTab
+                      :is-scanning="isScanning"
+                      :has-camera="hasCamera"
+                      :camera-checking="cameraChecking"
+                      :camera-ready="cameraReady"
+                      :primary-color="primaryColor"
+                      @start-scanning="startScanning"
+                      @stop-scanning="stopScanning"
+                      @test-camera="testCamera"
+                      @open-history="openHistoryDialog"
+                      @open-qr-history="openQRHistoryDialog"
+                    />
+                  </v-window-item>
+
+                  <!-- Tab Manual -->
+                  <v-window-item value="manual">
+                    <ManualInputTab
+                      v-model="manualInput"
+                      :primary-color="primaryColor"
+                      :secondary-color="secondaryColor"
+                      @submit="checkInManual"
+                      @open-history="openHistoryDialog"
+                      ref="manualInputTabRef"
+                    />
+                  </v-window-item>
+
+                  <!-- Tab Generate QR -->
+                  <v-window-item value="generate">
+                    <div class="tab-content">
+                      <!-- Status Header -->
+                      <div class="status-header mb-3">
+                        <div class="status-icon-wrapper">
+                          <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
+                        </div>
+                        <div class="status-text">
+                          <h3 class="status-title">Generate QR Code untuk Testing</h3>
+                          <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
+                        </div>
+                      </div>
+
+                      <!-- Quick Preset Buttons -->
+                      <div class="mb-3">
+                        <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
+                        <v-row dense>
+                          <v-col cols="6">
+                            <v-btn
+                              variant="outlined"
+                              color="success"
+                              size="small"
+                              @click="generateQuickQR(generateRandomPatientId(), 'ALLOWED')"
+                              class="text-none"
+                              block
+                            >
+                              <v-icon start size="16">mdi-check-circle</v-icon>
+                              Test ALLOWED
+                            </v-btn>
+                          </v-col>
+                          <v-col cols="6">
+                            <v-btn
+                              variant="outlined"
+                              color="warning"
+                              size="small"
+                              @click="generateQuickQR(generateRandomPatientId(), 'NOT_ALLOWED')"
+                              class="text-none"
+                              block
+                            >
+                              <v-icon start size="16">mdi-clock-alert</v-icon>
+                              Test NOT_ALLOWED
+                            </v-btn>
+                          </v-col>
+                        </v-row>
+                      </div>
+
+                      <!-- Form Generate -->
+                      <v-form @submit.prevent="generateQRCode">
+                        <v-text-field
+                          v-model="generatePatientId"
+                          label="ID Pasien"
+                          placeholder="Contoh: P-123456"
+                          prepend-inner-icon="mdi-identifier"
+                          variant="outlined"
+                          :color="primaryColor"
+                          class="input-modern mb-3"
+                          density="comfortable"
+                          clearable
+                          hide-details="auto"
+                        >
+                          <template v-slot:append-inner>
+                            <v-btn
+                              icon
+                              size="small"
+                              variant="text"
+                              @click="generateRandomId()"
+                              title="Generate Random ID"
+                            >
+                              <v-icon size="20">mdi-refresh</v-icon>
+                            </v-btn>
+                          </template>
+                        </v-text-field>
+
+                        <v-select
+                          v-model="generateStatus"
+                          label="Status Check-in"
+                          :items="statusOptions"
+                          prepend-inner-icon="mdi-shield-check"
+                          variant="outlined"
+                          :color="primaryColor"
+                          class="input-modern mb-4"
+                          density="comfortable"
+                          hide-details="auto"
+                        ></v-select>
+
+                        <div class="d-flex justify-center">
+                          <v-btn
+                            class="btn-primary-modern btn-centered"
+                            size="large"
+                            type="submit"
+                            elevation="0"
+                            :disabled="!generatePatientId"
+                          >
+                            <v-icon start size="20">mdi-qrcode-plus</v-icon>
+                            Generate QR Code
+                          </v-btn>
+                        </div>
+                      </v-form>
+
+                      <!-- QR Code Display -->
+                      <div v-if="generatedQRData" class="qr-display mt-6">
+                        <v-card variant="outlined" class="pa-4">
+                          <div class="text-center">
+                            <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
+                            <div id="qrcode" class="qr-code-container mb-4"></div>
+                            
+                            <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
+                              <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
+                              {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
+                            </v-chip>
+
+                            <p class="text-body-2 text-grey mb-4">
+                              Data: {{ generatedQRData }}
+                            </p>
+
+                            <!-- Action Buttons -->
+                            <v-row dense>
+                              <v-col cols="4">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  @click="downloadQR"
+                                  class="text-none"
+                                >
+                                  <v-icon start size="18">mdi-download</v-icon>
+                                  Download
+                                </v-btn>
+                              </v-col>
+                              <v-col cols="4">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  @click="copyQRToClipboard"
+                                  class="text-none"
+                                >
+                                  <v-icon start size="18">mdi-content-copy</v-icon>
+                                  Copy
+                                </v-btn>
+                              </v-col>
+                              <v-col cols="4">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  @click="shareQR"
+                                  class="text-none"
+                                >
+                                  <v-icon start size="18">mdi-share-variant</v-icon>
+                                  Share
+                                </v-btn>
+                              </v-col>
+                            </v-row>
+                          </div>
+                        </v-card>
+
+                        <!-- Instructions -->
+                        <v-alert
+                          type="success"
+                          variant="tonal"
+                          class="mt-4 text-body-2"
+                        >
+                          <template v-slot:prepend>
+                            <v-icon>mdi-information</v-icon>
+                          </template>
+                          <strong>Cara menggunakan untuk Testing:</strong>
+                          <ol class="ml-4 mt-2">
+                            <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
+                            <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
+                            <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
+                            <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
+                            <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
+                          </ol>
+                        </v-alert>
+                      </div>
+                    </div>
+                  </v-window-item>
+                </v-window>
+              </v-card-text>
+            </v-card>
+
+            <!-- Stats Footer Minimalis -->
+            <div class="stats-footer-modern mt-3">
+              <v-row dense>
+                <v-col cols="4">
+                  <div class="stat-card-modern">
+                    <div class="stat-icon-modern">
+                      <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
+                    </div>
+                    <div class="stat-value">{{ todayCount }}</div>
+                    <div class="stat-label">Hari Ini</div>
+                  </div>
+                </v-col>
+                <v-col cols="4">
+                  <div class="stat-card-modern">
+                    <div class="stat-icon-modern">
+                      <v-icon color="success" size="20">mdi-check-circle</v-icon>
+                    </div>
+                    <div class="stat-value">{{ completedCount }}</div>
+                    <div class="stat-label">Selesai</div>
+                  </div>
+                </v-col>
+                <v-col cols="4">
+                  <div class="stat-card-modern">
+                    <div class="stat-icon-modern">
+                      <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
+                    </div>
+                    <div class="stat-value">{{ pendingCount }}</div>
+                    <div class="stat-label">Menunggu</div>
+                  </div>
+                </v-col>
+              </v-row>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+    
+    <!-- Check-in Result Dialog -->
+    <CheckInDialog
+      v-model="infoDialog"
+      :last-check-in-result="lastCheckInResult"
+      :info-message="infoMessage"
+      :info-action="infoAction"
+      :scanned-data="scannedData"
+      @close="handleInfoAction"
+    />
+    
+    <!-- Enhanced Snackbar -->
+    <v-snackbar
+      v-model="snackbarShow"
+      :color="snackbar.color"
+      :timeout="snackbar.timeout"
+      location="bottom right"
+      rounded="pill"
+      elevation="24"
+      class="custom-snackbar"
+    >
+      <div class="d-flex align-center">
+        <v-avatar :color="snackbar.color" size="32" class="mr-3">
+          <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
+        </v-avatar>
+        <div>
+          <div class="font-weight-bold">{{ snackbar.title }}</div>
+          <div class="text-body-2">{{ snackbar.message }}</div>
+        </div>
+      </div>
+    </v-snackbar>
+
+    <!-- History Dialog -->
+    <HistoryDialog
+      v-model="historyDialog"
+      :search="historySearch"
+      :date-filter="historyDateFilter"
+      :status-filter="historyStatusFilter"
+      :filtered-history="filteredHistory"
+      :history="checkInHistory"
+      :status-options="historyStatusOptions"
+      :primary-color="primaryColor"
+      :get-status-color="getStatusColor"
+      :get-status-icon="getStatusIcon"
+      :get-status-text="getStatusText"
+      :get-status-class="getStatusClass"
+      :format-date-time="formatDateTime"
+      :format-date="formatDate"
+      @update:search="historySearch = $event"
+      @update:date-filter="historyDateFilter = $event"
+      @update:status-filter="historyStatusFilter = $event"
+      @delete-item="handleDeleteHistoryItem"
+      @clear="handleClearHistory"
+    />
+
+    <!-- QR History Dialog -->
+    <QRHistoryDialog
+      v-model="qrHistoryDialog"
+      :search="historySearch"
+      :date-filter="historyDateFilter"
+      :filtered-history="filteredQRHistory"
+      :history="scannedQRHistory"
+      :primary-color="primaryColor"
+      @update:search="historySearch = $event"
+      @update:date-filter="historyDateFilter = $event"
+      @use-data="useQRData"
+      @delete-item="handleDeleteQRHistoryItem"
+      @clear="handleClearQRHistory"
+    />
+
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import type { TabValue, InfoAction, CheckInHistoryItem } from '~/types/checkin';
+import { PRIMARY_COLOR, SECONDARY_COLOR, QR_STATUS_OPTIONS } from '~/constants/checkin';
+import { useSnackbar } from '~/composables/useSnackbar';
+import { useCheckInHistory } from '~/composables/useCheckInHistory';
+import { useQRScanner } from '~/composables/useQRScanner';
+import { useCheckIn } from '~/composables/useCheckIn';
+import { useQRGenerator } from '~/composables/useQRGenerator';
+import CheckInDialog from '~/components/checkin/CheckInDialog.vue';
+import HistoryDialog from '~/components/checkin/HistoryDialog.vue';
+import QRHistoryDialog from '~/components/checkin/QRHistoryDialog.vue';
+import ManualInputTab from '~/components/checkin/ManualInputTab.vue';
+import QRScanTab from '~/components/checkin/QRScanTab.vue';
+
+definePageMeta({
+  middleware:['auth'],
+  layout: false,
+})
+
+// TypeScript declaration for QRCode
+declare global {
+  interface Window {
+    QRCode: typeof import('qrcode').default;
+  }
+}
+
+// --- DESAIN & TEMA ---
+const primaryColor = ref(PRIMARY_COLOR);
+const secondaryColor = ref(SECONDARY_COLOR);
+
+// --- LOGIKA ---
+const tab = ref<TabValue>('scan');
+const infoDialog = ref(false);
+const infoMessage = ref('');
+const infoAction = ref<InfoAction>('kembali'); 
+const scannedData = ref<string | null>(null);
+const manualInput = ref('');
+const manualInputTabRef = ref<InstanceType<typeof ManualInputTab> | null>(null);
+// lastCheckInResult sudah dipindahkan ke useCheckIn composable
+
+// Timer untuk auto-close dialog
+let dialogAutoCloseTimer: ReturnType<typeof setTimeout> | null = null;
+
+// Fungsi untuk auto-close dialog setelah 15 detik
+const autoCloseDialog = () => {
+  // Clear timer sebelumnya jika ada
+  if (dialogAutoCloseTimer) {
+    clearTimeout(dialogAutoCloseTimer);
+  }
+  
+  // Set timer untuk menutup dialog setelah 15 detik
+  dialogAutoCloseTimer = setTimeout(() => {
+    if (infoDialog.value) {
+      infoDialog.value = false;
+      dialogAutoCloseTimer = null;
+    }
+  }, 15000); // 15 detik
+};
+
+// Snackbar composable (harus didefinisikan sebelum useQRScanner)
+const { snackbar, snackbarShow, showSnackbar } = useSnackbar();
+
+// History composable
+const {
+  checkInHistory,
+  scannedQRHistory,
+  historySearch,
+  historyDateFilter,
+  historyStatusFilter,
+  filteredHistory,
+  filteredQRHistory,
+  loadHistory,
+  saveToHistory,
+  deleteHistoryItem,
+  clearHistory,
+  loadScannedQRHistory,
+  saveScannedQRData,
+  clearQRHistory,
+  deleteQRHistoryItem,
+  getStatusColor,
+  getStatusIcon,
+  getStatusText,
+  getStatusClass,
+  formatDateTime,
+  formatDate,
+  historyStatusOptions,
+} = useCheckInHistory();
+
+// Computed untuk stats footer
+const todayCount = computed(() => {
+  const today = new Date().toDateString()
+  return checkInHistory.value.filter((item: CheckInHistoryItem) => {
+    const itemDate = new Date(item.checkInDate).toDateString()
+    return itemDate === today
+  }).length
+})
+
+const completedCount = computed(() => {
+  return checkInHistory.value.filter((item: CheckInHistoryItem) => 
+    item.status === 'success' || item.status === 'ALLOWED'
+  ).length
+})
+
+const pendingCount = computed(() => {
+  return checkInHistory.value.filter((item: CheckInHistoryItem) => 
+    item.status === 'pending' || item.status === 'NOT_ALLOWED'
+  ).length
+})
+
+// Check-in composable (didefinisikan dulu, saveSuccessfulScan akan di-set nanti)
+let saveSuccessfulScanRef: ((qrData: string) => void) | null = null
+
+const {
+  lastCheckInResult,
+  processQRCode,
+  checkInManual: checkInManualComposable,
+} = useCheckIn({
+  showSnackbar,
+  saveToHistory,
+  saveSuccessfulScan: (qrData: string) => {
+    // Delegate ke saveSuccessfulScan dari useQRScanner
+    if (saveSuccessfulScanRef) {
+      saveSuccessfulScanRef(qrData)
+    }
+  },
+  onCheckInSuccess: (result) => {
+    infoMessage.value = result.message
+    infoAction.value = result.action
+    infoDialog.value = true
+  },
+  autoCloseDialog,
+})
+
+// QR Scanner composable (setelah useCheckIn agar bisa akses processQRCode)
+const {
+  isScanning,
+  hasCamera,
+  cameraChecking,
+  cameraReady,
+  checkCameraAvailability,
+  testCamera,
+  startScanning,
+  stopScanning,
+  saveSuccessfulScan,
+} = useQRScanner(
+  (decodedText: string) => {
+    // Callback ketika QR berhasil di-scan
+    scannedData.value = decodedText
+    processQRCode(decodedText)
+    // Simpan ke history scanned QR
+    saveScannedQRData(decodedText)
+  },
+  showSnackbar
+)
+
+// Set saveSuccessfulScanRef setelah useQRScanner didefinisikan
+saveSuccessfulScanRef = saveSuccessfulScan
+
+// History Dialog
+const historyDialog = ref(false);
+const qrHistoryDialog = ref(false);
+
+// Generate random patient ID function (untuk digunakan di composable dan quick test buttons)
+const generateRandomPatientId = () => {
+  // Generate random 6-digit number
+  const randomNum = Math.floor(100000 + Math.random() * 900000);
+  return `P-${randomNum}`;
+};
+
+// QR Generator composable
+const {
+  generatePatientId,
+  generateStatus,
+  generatedQRData,
+  generateRandomId,
+  generateQuickQR,
+  generateQRCode,
+  downloadQR,
+  copyQRToClipboard,
+  shareQR,
+} = useQRGenerator({
+  showSnackbar,
+  generateRandomPatientId,
+});
+
+const statusOptions = [...QR_STATUS_OPTIONS] as Array<{ title: string; value: string }>;
+
+
+// Watch tab changes untuk stop scanner saat pindah tab
+watch(tab, (newTab: TabValue) => {
+  if (newTab !== 'scan' && isScanning.value) {
+    stopScanning();
+  }
+  // Check camera when switching to scan tab
+  if (newTab === 'scan' && !hasCamera.value && !cameraChecking.value) {
+    checkCameraAvailability();
+  }
+});
+
+// Check camera on mount
+onMounted(() => {
+  if (typeof window !== 'undefined' && typeof navigator !== 'undefined') {
+    if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
+      checkCameraAvailability();
+    } else {
+      console.warn('MediaDevices API not available. Make sure you are using HTTPS or localhost.');
+      hasCamera.value = false;
+      cameraChecking.value = false;
+      showSnackbar('Warning', 'MediaDevices API tidak tersedia. Pastikan menggunakan HTTPS atau localhost.', 'warning', 'mdi-alert');
+    }
+  } else {
+    hasCamera.value = false;
+    cameraChecking.value = false;
+  }
+});
+
+// Cleanup saat component unmount
+onUnmounted(() => {
+  if (isScanning.value) {
+    stopScanning();
+  }
+  // Clear dialog auto-close timer
+  if (dialogAutoCloseTimer) {
+    clearTimeout(dialogAutoCloseTimer);
+    dialogAutoCloseTimer = null;
+  }
+});
+
+// onDetect sudah dipindahkan ke useCheckIn composable sebagai processQRCode
+
+const handleInfoAction = async () => {
+    // Clear timer jika dialog ditutup secara manual
+    if (dialogAutoCloseTimer) {
+        clearTimeout(dialogAutoCloseTimer);
+        dialogAutoCloseTimer = null;
+    }
+    
+    infoDialog.value = false;
+    
+    // Scanner tetap berjalan setelah dialog ditutup
+    // Ini memungkinkan user untuk segera memproses QR code berikutnya
+    // tanpa perlu memulai scanner lagi
+};
+
+// performCheckIn sudah dipindahkan ke useCheckIn composable
+
+const checkInManual = async () => {
+  try {
+    if (!manualInput.value || !manualInput.value.trim()) {
+      showSnackbar('Error', 'Mohon isi nomor antrean atau ID pasien', 'error', 'mdi-alert');
+      return;
+    }
+
+    const patientId = manualInput.value.trim();
+
+    // Validate form if available
+    if (manualInputTabRef.value?.form) {
+      try {
+        const isValid = manualInputTabRef.value.form.validate();
+        if (!isValid) {
+          return;
+        }
+      } catch (e) {
+        // If validate fails, continue anyway
+        console.warn('Form validation error:', e);
+      }
+    }
+
+    await checkInManualComposable(
+      patientId,
+      () => {
+        // onSuccess callback
+        try {
+          manualInput.value = '';
+          if (manualInputTabRef.value?.form) {
+            try {
+              manualInputTabRef.value.form.reset();
+            } catch (e) {
+              // Ignore reset errors
+              console.warn('Form reset error:', e);
+            }
+          }
+        } catch (e) {
+          console.warn('Error in success callback:', e);
+        }
+      },
+      () => {
+        // onError callback - tidak perlu melakukan apa-apa karena error sudah ditangani di composable
+      }
+    );
+  } catch (error) {
+    console.error('Error in checkInManual:', error);
+    showSnackbar('Error', 'Terjadi kesalahan saat melakukan check-in. Silakan coba lagi.', 'error', 'mdi-alert');
+  }
+};
+
+// generateQRCode, generateQuickQR, downloadQR, copyQRToClipboard, shareQR sudah dipindahkan ke useQRGenerator composable
+
+// History Functions - semua sudah dipindahkan ke useCheckInHistory composable
+
+const openHistoryDialog = () => {
+  loadHistory();
+  historyDialog.value = true;
+};
+
+const openQRHistoryDialog = () => {
+  loadScannedQRHistory();
+  qrHistoryDialog.value = true;
+};
+
+const handleDeleteHistoryItem = (index: number) => {
+  deleteHistoryItem(index);
+  showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
+};
+
+const handleClearHistory = () => {
+  clearHistory();
+  showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
+};
+
+const handleDeleteQRHistoryItem = (index: number) => {
+  deleteQRHistoryItem(index);
+  showSnackbar('Berhasil', 'Riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
+};
+
+const handleClearQRHistory = () => {
+  clearQRHistory();
+  showSnackbar('Berhasil', 'Semua riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
+};
+
+const useQRData = (qrData: string) => {
+  qrHistoryDialog.value = false;
+  scannedData.value = qrData;
+  processQRCode(qrData);
+};
+
+// filteredHistory, filteredQRHistory, dan helper functions sudah dipindahkan ke useCheckInHistory composable
+
+// loadSuccessfulScans sudah dipanggil di dalam useQRScanner composable saat initialization
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/checkin/variables';
+@import '~/assets/scss/checkin/components';
+@import '~/assets/scss/checkin/dialogs';
+</style>
\ No newline at end of file
diff --git a/pages/Setting/HakAkses.vue b/pages/Setting/HakAkses.vue
index eb0e392..04f6bcb 100644
--- a/pages/Setting/HakAkses.vue
+++ b/pages/Setting/HakAkses.vue
@@ -1,18 +1,49 @@
 <template>
-  <div class="hak-akses-page pa-6">
+  <div class="hak-akses-page pa-4">
     <v-breadcrumbs :items="breadcrumbs" class="pl-0 mb-4">
       <template v-slot:divider>
         <v-icon icon="mdi-chevron-right"></v-icon>
       </template>
     </v-breadcrumbs>
 
-    <v-card v-if="viewMode === 'add' || viewMode === 'editName'" class="pa-6 rounded-xl elevation-4">
-      <v-card-title class="d-flex align-center text-h5 font-weight-bold mb-4">
-        <v-icon :icon="viewMode === 'add' ? 'mdi-plus' : 'mdi-pencil'" class="mr-2 text-primary" size="28"></v-icon>
-        <span>{{ formTitle }}</span>
-      </v-card-title>
-      <v-divider class="mb-4"></v-divider>
-      <v-card-text class="px-0">
+    <!-- Dialog for Add/Edit Form -->
+    <v-dialog 
+      v-model="showAddEditDialog" 
+      max-width="1200px" 
+      persistent 
+      scrollable
+      transition="dialog-bottom-transition"
+    >
+      <v-card class="modern-dialog-card">
+        <div class="dialog-header" :class="viewMode === 'add' ? 'header-add' : 'header-edit'">
+          <div class="dialog-header-content">
+            <div class="dialog-header-left">
+              <v-avatar 
+                :color="viewMode === 'add' ? 'green-darken-2' : 'orange-darken-2'" 
+                size="56" 
+                class="dialog-avatar elevation-4"
+              >
+                <v-icon :icon="viewMode === 'add' ? 'mdi-plus' : 'mdi-pencil'" color="white" size="28"></v-icon>
+              </v-avatar>
+              <div class="dialog-header-text">
+                <h2 class="dialog-title">{{ formTitle }}</h2>
+                <p class="dialog-subtitle">
+                  {{ viewMode === 'add' ? 'Tambahkan hak akses baru ke sistem' : 'Ubah informasi hak akses yang ada' }}
+                </p>
+              </div>
+            </div>
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              class="dialog-close-btn"
+              @click="cancelForm"
+            >
+              <v-icon color="white" size="24">mdi-close</v-icon>
+            </v-btn>
+          </div>
+        </div>
+        <v-card-text class="dialog-content">
         <v-row>
           <v-col cols="12" md="6">
             <v-label class="font-weight-bold text-medium-emphasis">Pilih User (Optional)</v-label>
@@ -237,43 +268,118 @@
             </v-card>
           </v-col>
         </v-row>
-      </v-card-text>
-      <v-card-actions class="d-flex justify-end pa-0 mt-4">
-        <v-btn
-          color="grey-darken-1"
-          variant="flat"
-          rounded="lg"
-          class="text-capitalize mr-2"
-          @click="cancelForm"
-        >
-          Batal
-        </v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
-          rounded="lg"
-          class="text-capitalize"
-          @click="saveItem"
-        >
-          Submit
-        </v-btn>
-      </v-card-actions>
-    </v-card>
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions class="dialog-actions">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="grey-darken-1"
+            variant="outlined"
+            rounded="lg"
+            class="text-capitalize mr-2"
+            @click="cancelForm"
+            size="large"
+          >
+            <v-icon left>mdi-close</v-icon>
+            Batal
+          </v-btn>
+          <v-btn
+            :color="viewMode === 'add' ? 'green-darken-2' : 'orange-darken-2'"
+            variant="flat"
+            rounded="lg"
+            class="text-capitalize"
+            @click="saveItem"
+            size="large"
+          >
+            <v-icon left>{{ viewMode === 'add' ? 'mdi-check' : 'mdi-content-save' }}</v-icon>
+            {{ viewMode === 'add' ? 'Simpan' : 'Update' }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
-    <EditHakAkses
-      v-else-if="viewMode === 'editAccess'"
-      :item="editedItem"
-      @save="updateItemAccess"
-      @cancel="cancelForm"
-    />
+    <!-- Dialog for Edit Access -->
+    <v-dialog 
+      v-model="showEditAccessDialog" 
+      max-width="1400px" 
+      persistent 
+      scrollable
+      transition="dialog-bottom-transition"
+    >
+      <v-card class="modern-dialog-card">
+        <div class="dialog-header header-edit-access">
+          <div class="dialog-header-content">
+            <div class="dialog-header-left">
+              <v-avatar 
+                color="green-darken-2" 
+                size="56" 
+                class="dialog-avatar elevation-4"
+              >
+                <v-icon icon="mdi-lock-check" color="white" size="28"></v-icon>
+              </v-avatar>
+              <div class="dialog-header-text">
+                <h2 class="dialog-title">Edit Hak Akses</h2>
+                <p class="dialog-subtitle">Kelola permissions dan akses menu untuk pengguna</p>
+              </div>
+            </div>
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              class="dialog-close-btn"
+              @click="cancelForm"
+            >
+              <v-icon color="white" size="24">mdi-close</v-icon>
+            </v-btn>
+          </div>
+        </div>
+        <v-card-text class="dialog-content">
+          <EditHakAkses
+            :item="editedItem"
+            @save="updateItemAccess"
+            @cancel="cancelForm"
+          />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
 
-    <v-card v-else-if="viewMode === 'view'" class="pa-6 rounded-xl elevation-4">
-      <v-card-title class="d-flex align-center text-h5 font-weight-bold mb-4">
-        <v-icon icon="mdi-eye-outline" class="mr-2 text-info" size="28"></v-icon>
-        <span>{{ formTitle }}</span>
-      </v-card-title>
-      <v-divider class="mb-4"></v-divider>
-      <v-card-text class="px-0">
+    <!-- Dialog for View Detail -->
+    <v-dialog 
+      v-model="showViewDialog" 
+      max-width="1200px" 
+      scrollable
+      :persistent="false"
+      transition="dialog-bottom-transition"
+    >
+      <v-card class="modern-dialog-card">
+        <div class="dialog-header header-view">
+          <div class="dialog-header-content">
+            <div class="dialog-header-left">
+              <v-avatar 
+                color="blue-darken-2" 
+                size="56" 
+                class="dialog-avatar elevation-4"
+              >
+                <v-icon icon="mdi-eye" color="white" size="28"></v-icon>
+              </v-avatar>
+              <div class="dialog-header-text">
+                <h2 class="dialog-title">Detail Hak Akses</h2>
+                <p class="dialog-subtitle">Lihat informasi detail hak akses pengguna</p>
+              </div>
+            </div>
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              class="dialog-close-btn"
+              @click="cancelForm"
+            >
+              <v-icon color="white" size="24">mdi-close</v-icon>
+            </v-btn>
+          </div>
+        </div>
+        <v-card-text class="dialog-content">
+          <div v-if="viewMode === 'view'">
         <v-row>
           <v-col cols="12" md="3">
             <v-label class="font-weight-bold text-medium-emphasis">User ID</v-label>
@@ -387,52 +493,70 @@
             </v-table>
           </v-col>
         </v-row>
-      </v-card-text>
-      <v-card-actions class="d-flex justify-end pa-0 mt-4">
-        <v-btn
-          color="grey-darken-1"
-          variant="flat"
-          rounded="lg"
-          class="text-capitalize"
-          @click="cancelForm"
-        >
-          Tutup
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-    <div v-else>
-      <v-card class="d-flex flex-column flex-sm-row justify-space-between align-center pa-6 mb-6 rounded-xl bg-blue-lighten-5 elevation-2">
-        <v-card-title class="d-flex align-center text-h5 font-weight-bold pa-0 text-blue-darken-3">
-          <v-icon icon="mdi-shield-lock-outline" class="mr-2" size="40"></v-icon>
-          <span>Hak Akses</span>
-        </v-card-title>
-        <div class="d-flex mt-4 mt-sm-0">
+          </div>
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions class="dialog-actions">
+          <v-spacer></v-spacer>
           <v-btn
-            color="success"
-            prepend-icon="mdi-plus"
-            rounded="lg"
-            class="text-capitalize mr-2"
-            variant="flat"
-            @click="showAddForm"
-          >
-            Tambah Baru
-          </v-btn>
-          <v-btn
-            color="info"
-            prepend-icon="mdi-format-list-numbered"
+            color="grey-darken-1"
+            variant="outlined"
             rounded="lg"
             class="text-capitalize"
-            variant="flat"
-            @click="toggleReorderMode"
+            @click="cancelForm"
+            size="large"
           >
-            {{ reorderMode ? 'Selesai' : 'Atur Urutan' }}
+            <v-icon left>mdi-close</v-icon>
+            Tutup
           </v-btn>
-        </div>
+        </v-card-actions>
       </v-card>
+    </v-dialog>
 
-      <v-card class="pa-6 rounded-xl elevation-2">
-        <v-card-text class="pa-0">
+    <!-- Main Table View - Always visible, dialog overlays it -->
+    <div>
+      <v-card class="rounded-xl elevation-2" style="background-color: white;">
+        <!-- Header -->
+        <div class="page-header">
+          <div class="header-content">
+            <div class="header-left">
+              <div class="header-icon">
+                <v-icon size="32" color="white">mdi-shield-lock-outline</v-icon>
+              </div>
+              <div class="header-text">
+                <h2 class="page-title">Hak Akses</h2>
+                <p class="page-subtitle">{{ new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }} - Manajemen Hak Akses</p>
+              </div>
+            </div>
+            <div class="header-stats">
+              <v-chip color="white" variant="flat" class="stat-chip mr-2">
+                <v-icon start size="16">mdi-account-group</v-icon>
+                {{ filteredHakAksesData.length }} User
+              </v-chip>
+              <v-btn 
+                color="white" 
+                @click="showAddForm"
+                elevation="0"
+                class="add-btn mr-2"
+              >
+                <v-icon left size="20">mdi-plus-circle</v-icon>
+                Tambah Baru
+              </v-btn>
+              <v-btn 
+                color="white" 
+                @click="toggleReorderMode"
+                elevation="0"
+                class="add-btn"
+              >
+                <v-icon left size="20">mdi-format-list-numbered</v-icon>
+                {{ reorderMode ? 'Selesai' : 'Atur Urutan' }}
+              </v-btn>
+            </div>
+          </div>
+        </div>
+
+        <!-- Table -->
+        <v-card-text>
           <div class="d-flex flex-column flex-sm-row align-center justify-space-between mb-4">
             <div class="d-flex align-center mb-4 mb-sm-0">
               <span class="mr-2 text-subtitle-1 text-medium-emphasis">Show</span>
@@ -458,6 +582,7 @@
                 hide-details
                 rounded="lg"
                 clearable
+                style="min-width: 300px; width: 100%; max-width: 400px;"
               ></v-text-field>
             </div>
           </div>
@@ -518,23 +643,21 @@
             :search="search"
             :items-per-page="itemsPerPage"
             v-model:page="page"
-            class="elevation-0 custom-table"
+            class="rounded-lg elevation-0 custom-table"
           >
             <template v-slot:[`item.actions`]="{ item }">
-              <div class="d-flex justify-center">
-                <v-btn icon size="small" variant="text" class="mr-1" @click="viewItem(item)">
-                  <v-icon color="blue-darken-1">mdi-eye-outline</v-icon>
-                </v-btn>
-                <v-btn icon size="small" variant="text" class="mr-1" @click="editItem(item)">
-                  <v-icon color="orange-darken-1">mdi-pencil-outline</v-icon>
-                </v-btn>
-                <v-btn icon size="small" variant="text" class="mr-1" @click="deleteItem(item)">
-                  <v-icon color="red-darken-1">mdi-delete-outline</v-icon>
-                </v-btn>
-                <v-btn icon size="small" variant="text" @click="editAccess(item)">
-                  <v-icon color="green-darken-1">mdi-lock-check-outline</v-icon>
-                </v-btn>
-              </div>
+              <v-btn icon color="blue" size="small" class="mr-2" @click="viewItem(item)">
+                <v-icon>mdi-eye</v-icon>
+              </v-btn>
+              <v-btn icon color="orange" size="small" class="mr-2" @click="editItem(item)">
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+              <v-btn icon color="red" size="small" class="mr-2" @click="deleteItem(item)">
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+              <v-btn icon color="green" size="small" @click="editAccess(item)">
+                <v-icon>mdi-lock-check</v-icon>
+              </v-btn>
             </template>
 
             <template v-slot:no-data>
@@ -553,10 +676,58 @@
                 {{ formatDisplayUserId(item) }}
               </div>
             </template>
+
+            <!-- Tipe User dengan chip -->
+            <template v-slot:item.tipeUser="{ item }">
+              <v-chip
+                v-if="item.tipeUser"
+                color="purple-lighten-1"
+                size="small"
+              >
+                {{ item.tipeUser }}
+              </v-chip>
+              <span v-else class="text-grey">-</span>
+            </template>
+
+            <!-- Role dengan chip -->
+            <template v-slot:item.role="{ item }">
+              <v-chip
+                v-if="item.role"
+                color="blue-lighten-1"
+                size="small"
+              >
+                {{ item.role }}
+              </v-chip>
+              <span v-else class="text-grey">-</span>
+            </template>
+
+            <!-- Group dengan chip -->
+            <template v-slot:item.group="{ item }">
+              <v-chip
+                v-if="item.group"
+                color="green-lighten-1"
+                size="small"
+              >
+                {{ item.group }}
+              </v-chip>
+              <span v-else class="text-grey">-</span>
+            </template>
+
+            <!-- Nama Tipe User dengan chip -->
+            <template v-slot:item.namaTipeUser="{ item }">
+              <v-chip
+                v-if="item.namaTipeUser"
+                color="orange-lighten-1"
+                size="small"
+              >
+                {{ item.namaTipeUser }}
+              </v-chip>
+              <span v-else class="text-grey">-</span>
+            </template>
             
             <template v-slot:bottom>
-              <v-row class="ma-2 pa-2">
-                <v-col cols="12" sm="6" class="d-flex align-center justify-start text-caption text-grey-darken-1">
+              <v-row class="ma-2">
+                <v-col cols="12" sm="6" class="d-flex align-center justify-start text-caption text-grey">
                   {{ showingEntriesText }}
                 </v-col>
                 <v-col cols="12" sm="6" class="d-flex align-center justify-end">
@@ -570,8 +741,8 @@
               </v-row>
             </template>
           </v-data-table>
-        </v-card-text>
-      </v-card>
+          </v-card-text>
+        </v-card>
     </div>
 
     <v-dialog v-model="showDeleteDialog" max-width="400px">
@@ -630,7 +801,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, nextTick } from 'vue';
 import { useLocalStorage } from '@vueuse/core';
 import { VueDraggableNext } from 'vue-draggable-next'; 
 import EditHakAkses from '@/components/HakAkses/editHakAkses.vue';
@@ -912,6 +1083,37 @@ const reindexData = () => {
   });
 };
 
+// Dialog state
+const showAddEditDialog = computed({
+  get: () => viewMode.value === 'add' || viewMode.value === 'editName',
+  set: (val: boolean) => {
+    if (!val) {
+      viewMode.value = 'table';
+      resetForm();
+    }
+  }
+});
+
+const showEditAccessDialog = computed({
+  get: () => viewMode.value === 'editAccess',
+  set: (val: boolean) => {
+    if (!val) {
+      viewMode.value = 'table';
+      resetForm();
+    }
+  }
+});
+
+const showViewDialog = computed({
+  get: () => viewMode.value === 'view',
+  set: (val: boolean) => {
+    if (!val) {
+      viewMode.value = 'table';
+      resetForm();
+    }
+  }
+});
+
 // Functions for actions
 const showAddForm = () => {
   resetForm();
@@ -1330,7 +1532,6 @@ const saveItem = async () => {
     allHakAksesData.value.push({ ...itemToSave });
     console.log('✅ New item added with ID:', newId);
     console.log('📊 New allHakAksesData length:', allHakAksesData.value.length);
-    reindexData(); // Re-index to ensure sequential IDs
     snackbar.value = {
       show: true,
       message: 'Data hak akses berhasil ditambahkan!',
@@ -1339,8 +1540,23 @@ const saveItem = async () => {
     };
   }
 
-  // Force update localStorage
+  // Force update localStorage by triggering reactivity
+  // useLocalStorage should auto-save, but we ensure it by reassigning
+  await nextTick();
+  allHakAksesData.value = [...allHakAksesData.value];
+  
+  // Double-check localStorage is updated
+  await nextTick();
+  if (typeof window !== 'undefined') {
+    const stored = localStorage.getItem('allHakAksesData');
+    console.log('💾 localStorage after save:', stored ? JSON.parse(stored).length + ' items' : 'empty');
+  }
+  
   console.log('💾 Final allHakAksesData:', allHakAksesData.value);
+  console.log('💾 Final allHakAksesData length:', allHakAksesData.value.length);
+  
+  // Reset editedIndex after save
+  editedIndex.value = -1;
   
   cancelForm();
 };
@@ -1351,7 +1567,17 @@ onMounted(async () => {
   console.log('📊 Initial allHakAksesData:', allHakAksesData.value);
   console.log('📊 Initial allHakAksesData length:', allHakAksesData.value.length);
   
-  reindexData();
+  // Only reindex if data exists and IDs are not sequential
+  if (allHakAksesData.value.length > 0) {
+    const needsReindex = allHakAksesData.value.some((item, index) => item.id !== index + 1);
+    if (needsReindex) {
+      console.log('🔄 Re-indexing data...');
+      reindexData();
+      // Force save after reindex
+      allHakAksesData.value = [...allHakAksesData.value];
+    }
+  }
+  
   await loadAvailableRolesAndGroups();
   
   console.log('✅ After load - allHakAksesData length:', allHakAksesData.value.length);
@@ -1365,32 +1591,218 @@ onMounted(async () => {
       try {
         const parsed = JSON.parse(stored);
         console.log('📦 Parsed localStorage data:', parsed);
+        console.log('📦 Parsed data length:', parsed.length);
       } catch (e) {
         console.error('❌ Error parsing localStorage:', e);
       }
+    } else {
+      console.log('⚠️ No data in localStorage');
     }
   }
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// Colors from Design System
+$neutral-900: #212121;
+$neutral-800: #4D4D4D;
+$neutral-700: #717171;
+$neutral-600: #89939E;
+$neutral-500: #ABBED1;
+$neutral-400: #E5F7FA;
+$neutral-300: #F5F7FA;
+$neutral-100: #FFFFFF;
+
+$success-700: #1B6E53;
+$success-600: #009262;
+$success-400: #32C997;
+$success-300: #84DFC1;
+$success-200: #F1FBF8;
+
+$danger-600: #E02B1D;
+
+// Font Family & Weights
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+// Apply font family
+* {
+  font-family: $font-family-base;
+}
+
+// Ensure page container doesn't shrink
+.hak-akses-page,
+.hak-akses-page * {
+  box-sizing: border-box;
+}
+
 .hak-akses-page {
-  font-family: 'Roboto', sans-serif;
-  background-color: #f5f7fa;
+  font-family: $font-family-base;
+  background-color: $neutral-300;
   min-height: 100vh;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  padding: 16px !important;
+  box-sizing: border-box;
+  margin: 0 !important;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+  display: block !important;
+  position: relative !important;
 }
 
-.custom-table {
-  border: none;
+// Ensure no max-width constraints and white background
+.hak-akses-page :deep(.v-card) {
+  max-width: 100% !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  background-color: $neutral-100 !important;
+  border-radius: 12px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  margin: 0 !important;
 }
 
-.v-data-table :deep(th) {
-  font-weight: bold !important;
-  color: #333 !important;
+// Override v-main constraints from layout
+:deep(.v-main) {
+  padding: 0 !important;
+  width: 100% !important;
+  max-width: 100% !important;
 }
 
-.v-data-table :deep(td) {
-  vertical-align: middle;
+:deep(.v-main__wrap) {
+  padding: 0 !important;
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+// Override any container constraints
+:deep(.v-container),
+:deep(.container) {
+  max-width: 100% !important;
+  width: 100% !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+// Ensure v-card-text has white background and proper padding
+.hak-akses-page :deep(.v-card-text) {
+  padding: 24px !important;
+  background-color: $neutral-100 !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+// Ensure wrapper div doesn't shrink
+.hak-akses-page > div {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  display: block !important;
+}
+
+// Ensure v-card wrapper doesn't shrink
+.hak-akses-page > div > .v-card {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  display: block !important;
+}
+
+// Ensure all child elements don't constrain width
+.hak-akses-page > div > * {
+  max-width: 100% !important;
+}
+
+// ============================================
+// PAGE HEADER
+// ============================================
+.page-header {
+  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: $neutral-100;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+  color: $neutral-100;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+  color: $neutral-100;
+}
+
+.header-stats {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stat-chip {
+  color: $success-600 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.add-btn {
+  font-weight: $font-weight-semibold;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-size: 16px;
+  line-height: 24px;
+  color: $success-600 !important;
+}
+
+// ============================================
+// DATA TABLE
+// ============================================
+.custom-table :deep(table) {
+  border-collapse: collapse;
+}
+
+.custom-table :deep(th) {
+  background-color: #f5f5f5 !important;
+  font-weight: bold;
+  font-size: 0.875rem; /* text-sm */
+}
+
+.custom-table :deep(td) {
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
 }
 
 .v-btn--icon {
@@ -1402,7 +1814,196 @@ onMounted(async () => {
   padding-bottom: 0 !important;
 }
 
+// Ensure search field stays large
+.hak-akses-page :deep(.v-text-field[label="Search"]) {
+  min-width: 300px !important;
+  width: 100% !important;
+  max-width: 400px !important;
+}
+
+.hak-akses-page :deep(.v-text-field[label="Search"] .v-field) {
+  min-width: 300px !important;
+}
+
 .handle {
   cursor: grab;
 }
+
+// ============================================
+// MODERN DIALOG STYLING
+// ============================================
+// Ensure overlay doesn't hide content completely
+:deep(.v-overlay__scrim) {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.modern-dialog-card {
+  border-radius: 16px !important;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
+}
+
+.dialog-header {
+  padding: 32px;
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.dialog-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+  pointer-events: none;
+}
+
+.dialog-header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+}
+
+.dialog-header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.dialog-avatar {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.dialog-header-text {
+  flex: 1;
+}
+
+.dialog-title {
+  font-size: 28px;
+  font-weight: $font-weight-semibold;
+  margin: 0 0 8px 0;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.dialog-subtitle {
+  font-size: 14px;
+  margin: 0;
+  opacity: 0.9;
+  color: white;
+}
+
+.dialog-close-btn {
+  color: white !important;
+  background: rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.dialog-close-btn:hover {
+  background: rgba(255, 255, 255, 0.3) !important;
+  transform: rotate(90deg);
+}
+
+.header-add {
+  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
+}
+
+.header-edit {
+  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+}
+
+.header-edit-access {
+  background: linear-gradient(135deg, #009262 0%, #1B6E53 100%);
+}
+
+.header-view {
+  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
+}
+
+.dialog-content {
+  padding: 32px !important;
+  background-color: #f5f7fa;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.dialog-actions {
+  padding: 20px 32px !important;
+  background-color: white;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+// Dialog animation
+.dialog-bottom-transition-enter-active,
+.dialog-bottom-transition-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dialog-bottom-transition-enter-from {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+
+.dialog-bottom-transition-leave-to {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+
+// ============================================
+// RESPONSIVE
+// ============================================
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .header-stats {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .dialog-header {
+    padding: 24px;
+  }
+
+  .dialog-title {
+    font-size: 24px;
+  }
+
+  .dialog-content {
+    padding: 24px !important;
+  }
+
+  .dialog-actions {
+    padding: 16px 24px !important;
+  }
+
+  .dialog-header-left {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+}
+
+// Ensure container never shrinks on any screen size
+@media (min-width: 0px) {
+  .hak-akses-page {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+  }
+  
+  .hak-akses-page :deep(.v-card) {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pages/Setting/UserLogin.vue b/pages/Setting/UserLogin.vue
index e331798..55f55de 100644
--- a/pages/Setting/UserLogin.vue
+++ b/pages/Setting/UserLogin.vue
@@ -10,7 +10,7 @@
     </div>
 
     <v-breadcrumbs :items="breadcrumbs" class="pl-0">
-      <template v-slot:divider>
+      <template #divider>
         <v-icon icon="mdi-chevron-right"></v-icon>
       </template>
     </v-breadcrumbs>
@@ -25,193 +25,272 @@
       Failed to load initial data: {{ fetchError.message }}. Check your API connections.
     </v-alert>
 
-    <v-card v-if="showForm" class="pa-4 rounded-lg elevation-2">
-      <v-card-title class="text-h5 font-weight-bold mb-4">
-        {{ isEditMode ? 'Edit Pengguna' : readOnly ? 'Detail Pengguna' : 'Tambah Pengguna' }}
-      </v-card-title>
-      <v-card-text>
-        <v-row>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Nama Lengkap</v-label>
-            <v-text-field
-              v-model="editedItem.namaLengkap"
-              placeholder="Masukkan Nama Lengkap"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Nama User</v-label>
-            <v-text-field
-              v-model="editedItem.namaUser"
-              placeholder="Masukkan Nama User"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly || isEditMode"
-              :hint="isEditMode ? 'Username tidak dapat diubah' : ''"
-              persistent-hint
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Tipe User</v-label>
-            <v-select
-              v-model="editedItem.tipeUser"
-              :items="['Super Admin', 'Admin', 'Loket', 'Klinik', 'Admin Barcode', 'INOVA', 'Ranap', 'Report Only', 'Farmasi', 'Manager']"
-              placeholder="Pilih Tipe User"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-select>
-          </v-col>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Last Access</v-label>
-            <v-text-field
-              :value="formatLastLogin(editedItem.lastLogin)"
-              placeholder="Last Access Time"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              readonly
-              disabled
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        
-        <v-row>
-          <v-col cols="12" md="4">
-            <v-label class="font-weight-bold">Realm Roles</v-label>
-            <v-select
-              v-model="editedItem.realmRoles"
-              :items="availableRoles"
-              multiple
-              chips
-              placeholder="Pilih Realm Roles"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-select>
-          </v-col>
-          <v-col cols="12" md="4">
-            <v-label class="font-weight-bold">Account Roles</v-label>
-            <v-select
-              v-model="editedItem.accountRoles"
-              :items="availableRoles"
-              multiple
-              chips
-              placeholder="Pilih Account Roles"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-select>
-          </v-col>
-          <v-col cols="12" md="4">
-            <v-label class="font-weight-bold">Resource Roles</v-label>
-            <v-select
-              v-model="editedItem.resourceRoles"
-              :items="availableRoles"
-              multiple
-              chips
-              placeholder="Pilih Resource Roles"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-select>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12" md="6">
-            <v-label class="font-weight-bold">Groups</v-label>
-            <v-select
-              v-model="editedItem.groups"
-              :items="availableGroups"
-              multiple
-              chips
-              placeholder="Pilih Groups Pengguna"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-              :readonly="readOnly"
-            ></v-select>
-          </v-col>
-        </v-row>
-        <v-row v-if="!readOnly">
-          <v-col cols="12">
-            <v-label class="font-weight-bold">{{ isEditMode ? 'Ganti Password (Kosongkan jika tidak diubah)' : 'Password' }}</v-label>
-            <v-text-field
-              v-model="editedItem.password"
-              placeholder="Masukkan Password"
-              type="password"
-              variant="outlined"
-              density="comfortable"
-              class="mb-2"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-      </v-card-text>
-      <v-card-actions class="d-flex justify-start pa-4">
-        <v-btn
-          color="grey-darken-1"
-          variant="flat"
-          class="text-capitalize rounded-lg mr-2"
-          @click="cancelForm"
+    <!-- Form Dialog Popup -->
+    <v-dialog v-model="showForm" max-width="950px" :persistent="!readOnly" scrollable>
+      <v-card class="rounded-lg overflow-hidden elevation-8">
+        <v-card-title 
+          class="text-h5 font-weight-bold pa-5 text-white dialog-header"
+          :class="readOnly ? 'bg-blue-darken-3' : isEditMode ? 'bg-orange-darken-2' : 'bg-green-darken-2'"
         >
-          {{ readOnly ? 'Tutup' : 'Batal' }}
-        </v-btn>
-        <v-btn
-          v-if="!readOnly"
-          color="orange-darken-2"
-          variant="flat"
-          class="text-capitalize rounded-lg"
-          @click="saveItem"
-          :loading="isSaving"
-          :disabled="isSaving"
-        >
-          Submit
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-    <div v-else>
-      <v-card class="d-flex flex-wrap justify-space-between align-center pa-4 mb-4 rounded-lg bg-blue-darken-2 text-white elevation-2">
-        <v-card-title class="d-flex align-center text-h5 font-weight-bold pa-0">
-          <v-icon icon="mdi-account-group-outline" class="mr-2" size="40"></v-icon> 
-          <span>User Login Management</span>
+          <v-avatar 
+            :color="readOnly ? 'blue-darken-4' : isEditMode ? 'orange-darken-3' : 'green-darken-3'" 
+            size="48" 
+            class="mr-3 elevation-2"
+          >
+            <v-icon :icon="readOnly ? 'mdi-eye' : isEditMode ? 'mdi-pencil' : 'mdi-account-plus'" color="white" size="24"></v-icon>
+          </v-avatar>
+          <div>
+            <div class="text-h5 font-weight-bold">{{ isEditMode ? 'Edit Pengguna' : readOnly ? 'Detail Pengguna' : 'Tambah Pengguna' }}</div>
+            <div class="text-caption text-white text-opacity-75 mt-1">
+              {{ readOnly ? 'Lihat informasi detail pengguna' : isEditMode ? 'Ubah data pengguna yang ada' : 'Tambahkan pengguna baru ke sistem' }}
+            </div>
+          </div>
         </v-card-title>
-        <div class="d-flex align-center gap-2">
-          <v-chip 
-            v-if="autoRefreshInterval" 
-            color="success" 
-            size="small" 
-            variant="flat"
-            prepend-icon="mdi-sync"
-          >
-            Auto-refresh aktif
-          </v-chip>
-          <v-btn
-            color="white"
-            prepend-icon="mdi-refresh"
-            rounded
-            class="text-capitalize"
-            @click="refreshAllUsers"
-            :disabled="isPending || isSaving"
-            :loading="isSaving"
-            variant="outlined"
-          >
-            Sync dari Keycloak
-          </v-btn>
-        </div>
-      </v-card>
+        <v-card-text class="pa-6">
+          <!-- Basic Information Section -->
+          <div class="mb-4">
+            <div class="text-subtitle-1 font-weight-bold mb-3 d-flex align-center">
+              <v-icon icon="mdi-information" size="small" class="mr-2 text-primary"></v-icon>
+              Informasi Dasar
+            </div>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="editedItem.namaLengkap"
+                  label="Nama Lengkap"
+                  placeholder="Masukkan Nama Lengkap"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-account-outline"
+                  :readonly="readOnly"
+                  hide-details="auto"
+                  class="mb-3"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="editedItem.namaUser"
+                  label="Nama User"
+                  placeholder="Masukkan Nama User"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-account-circle-outline"
+                  :readonly="readOnly || isEditMode"
+                  :hint="isEditMode ? 'Username tidak dapat diubah' : ''"
+                  persistent-hint
+                  hide-details="auto"
+                  class="mb-3"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="editedItem.tipeUser"
+                  label="Tipe User"
+                  :items="['Super Admin', 'Admin', 'Loket', 'Klinik', 'Admin Barcode', 'INOVA', 'Ranap', 'Report Only', 'Farmasi', 'Manager']"
+                  placeholder="Pilih Tipe User"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-account-tie-outline"
+                  :readonly="readOnly"
+                  hide-details="auto"
+                  class="mb-3"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  :value="formatLastLogin(editedItem.lastLogin)"
+                  label="Last Access"
+                  placeholder="Last Access Time"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-clock-time-four-outline"
+                  readonly
+                  disabled
+                  hide-details="auto"
+                  class="mb-3"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </div>
 
-      <v-card class="pa-4 rounded-lg elevation-2">
+          <v-divider class="my-4"></v-divider>
+          <!-- Roles & Permissions Section -->
+          <div class="mb-4">
+            <div class="text-subtitle-1 font-weight-bold mb-3 d-flex align-center">
+              <v-icon icon="mdi-shield-account" size="small" class="mr-2 text-primary"></v-icon>
+              Roles & Permissions
+            </div>
+            <v-row>
+              <v-col cols="12" md="4">
+                <v-select
+                  v-model="editedItem.realmRoles"
+                  label="Realm Roles"
+                  :items="availableRoles"
+                  multiple
+                  chips
+                  placeholder="Pilih Realm Roles"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-shield-account-outline"
+                  :readonly="readOnly"
+                  hide-details="auto"
+                  class="mb-3"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-select
+                  v-model="editedItem.accountRoles"
+                  label="Account Roles"
+                  :items="availableRoles"
+                  multiple
+                  chips
+                  placeholder="Pilih Account Roles"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-account-key-outline"
+                  :readonly="readOnly"
+                  hide-details="auto"
+                  class="mb-3"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-select
+                  v-model="editedItem.resourceRoles"
+                  label="Resource Roles"
+                  :items="availableRoles"
+                  multiple
+                  chips
+                  placeholder="Pilih Resource Roles"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-folder-key-outline"
+                  :readonly="readOnly"
+                  hide-details="auto"
+                  class="mb-3"
+                ></v-select>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="editedItem.groups"
+                  label="Groups"
+                  :items="availableGroups"
+                  multiple
+                  chips
+                  placeholder="Pilih Groups Pengguna"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-account-group-outline"
+                  :readonly="readOnly"
+                  hide-details="auto"
+                  class="mb-3"
+                ></v-select>
+              </v-col>
+            </v-row>
+          </div>
+
+          <v-divider v-if="!readOnly" class="my-4"></v-divider>
+
+          <!-- Security Section -->
+          <div v-if="!readOnly" class="mb-2">
+            <div class="text-subtitle-1 font-weight-bold mb-3 d-flex align-center">
+              <v-icon icon="mdi-lock" size="small" class="mr-2 text-primary"></v-icon>
+              Keamanan
+            </div>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="editedItem.password"
+                  :label="isEditMode ? 'Ganti Password (Kosongkan jika tidak diubah)' : 'Password'"
+                  placeholder="Masukkan Password"
+                  type="password"
+                  variant="outlined"
+                  density="comfortable"
+                  prepend-inner-icon="mdi-lock-outline"
+                  hide-details="auto"
+                  disabled
+                  class="mb-3"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </div>
+        </v-card-text>
+        <v-card-actions class="d-flex justify-end pa-5 bg-grey-lighten-4">
+          <v-btn
+            color="grey-darken-1"
+            variant="flat"
+            class="text-capitalize rounded-lg mr-3 px-6"
+            prepend-icon="mdi-close"
+            @click="cancelForm"
+            :disabled="isSaving"
+            size="default"
+          >
+            {{ readOnly ? 'Tutup' : 'Batal' }}
+          </v-btn>
+          <v-btn
+            v-if="!readOnly"
+            :color="isEditMode ? 'orange-darken-2' : 'green-darken-2'"
+            variant="flat"
+            class="text-capitalize rounded-lg px-6"
+            :prepend-icon="isEditMode ? 'mdi-content-save' : 'mdi-check'"
+            @click="saveItem"
+            :loading="isSaving"
+            :disabled="isSaving"
+            size="default"
+          >
+            {{ isEditMode ? 'Simpan Perubahan' : 'Simpan' }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <div>
+      <v-card class="mb-4">
+        <!-- Header -->
+        <div class="page-header">
+          <div class="header-content">
+            <div class="header-left">
+              <div class="header-icon">
+                <v-icon size="32" color="white">mdi-account-group</v-icon>
+              </div>
+              <div class="header-text">
+                <h2 class="page-title">User Login Management</h2>
+                <p class="page-subtitle">{{ new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }} - Manajemen Pengguna</p>
+              </div>
+            </div>
+            <div class="header-stats">
+              <v-chip color="white" variant="flat" class="stat-chip mr-2">
+                <v-icon start size="16">mdi-account</v-icon>
+                {{ filteredUsers.length }} Pengguna
+              </v-chip>
+              <v-chip 
+                v-if="autoRefreshInterval" 
+                color="white" 
+                variant="flat" 
+                class="stat-chip mr-2"
+              >
+                <v-icon start size="16">mdi-sync</v-icon>
+                Auto-refresh aktif
+              </v-chip>
+              <v-btn 
+                color="white" 
+                @click="refreshAllUsers"
+                elevation="0"
+                class="add-btn"
+                :disabled="isPending || isSaving"
+                :loading="isSaving"
+              >
+                <v-icon left size="20">mdi-refresh</v-icon>
+                Sync dari Keycloak
+              </v-btn>
+            </div>
+          </div>
+        </div>
+
+        <!-- Table -->
         <v-card-text>
           <div class="d-flex flex-wrap align-center justify-space-between mb-4">
             <div class="d-flex align-center">
@@ -306,7 +385,7 @@
             loading-text="Memuat data pengguna..."
             class="rounded-lg elevation-0 custom-table"
           >
-            <template v-slot:item.realmRoles="{ item }">
+            <template #item.realmRoles="{ item }">
               <v-chip
                 v-for="role in (item.realmRoles || [])"
                 :key="role"
@@ -319,7 +398,7 @@
               <span v-if="!item.realmRoles || item.realmRoles.length === 0" class="text-grey">-</span>
             </template>
             
-            <template v-slot:item.accountRoles="{ item }">
+            <template #item.accountRoles="{ item }">
               <v-chip
                 v-for="role in (item.accountRoles || [])"
                 :key="role"
@@ -332,7 +411,7 @@
               <span v-if="!item.accountRoles || item.accountRoles.length === 0" class="text-grey">-</span>
             </template>
             
-            <template v-slot:item.resourceRoles="{ item }">
+            <template #item.resourceRoles="{ item }">
               <v-chip
                 v-for="role in (item.resourceRoles || [])"
                 :key="role"
@@ -345,7 +424,7 @@
               <span v-if="!item.resourceRoles || item.resourceRoles.length === 0" class="text-grey">-</span>
             </template>
             
-            <template v-slot:item.groups="{ item }">
+            <template #item.groups="{ item }">
               <v-chip
                 v-for="group in (item.groups || [])"
                 :key="group"
@@ -358,7 +437,7 @@
               <span v-if="!item.groups || item.groups.length === 0" class="text-grey">-</span>
             </template>
             
-            <template v-slot:item.lastLogin="{ item }">
+            <template #item.lastLogin="{ item }">
               <span class="text-body-2">
                 {{ formatLastLogin(item.lastLogin) }}
               </span>
@@ -371,25 +450,25 @@
               </v-tooltip>
             </template>
             
-            <template v-slot:item.actions="{ item }">
+            <template #item.actions="{ item }">
               <v-btn icon color="blue" size="small" class="mr-2" @click="viewItem(item)">
                 <v-icon>mdi-eye</v-icon>
               </v-btn>
-              <v-btn icon color="orange" size="small" class="mr-2" @click="editItem(item)">
+              <!-- <v-btn icon color="orange" size="small" class="mr-2" @click="editItem(item)">
                 <v-icon>mdi-pencil</v-icon>
-              </v-btn>
+              </v-btn> -->
               <v-btn icon color="red" size="small" @click="deleteItem(item)">
                 <v-icon>mdi-delete</v-icon>
               </v-btn>
             </template>
             
-            <template v-slot:no-data>
+            <template #no-data>
               <v-alert :value="true" color="grey-lighten-3" icon="mdi-information">
                 Tidak ada data yang tersedia.
               </v-alert>
             </template>
 
-            <template v-slot:bottom>
+            <template #bottom>
               <v-row class="ma-2">
                 <v-col cols="12" sm="6" class="d-flex align-center justify-start text-caption text-grey">
                   {{ showingEntriesText }}
@@ -473,7 +552,8 @@ interface InitialData {
 // --- AUTHENTICATION & INITIAL DATA FETCHING (SSR Compatible) ---
 
 // 1. Get Auth State
-const { user, isAuthenticated } = useAuth();
+// Note: user and isAuthenticated are not used but kept for potential future use
+const { user: _user, isAuthenticated: _isAuthenticated } = useAuth();
 
 // 2. Get current user data from JWT token (like index.vue)
 const currentUserData = ref<any>(null);
@@ -483,10 +563,10 @@ const currentUserGroups = ref<string[]>([]);
 // Function to get current user from JWT token
 const fetchCurrentUser = async () => {
     try {
-        const userData = await $fetch('/api/users/current');
+        const userData = await $fetch('/api/users/current') as any;
         currentUserData.value = userData;
-        currentUserRoles.value = userData.roles || [];
-        currentUserGroups.value = userData.groups || [];
+        currentUserRoles.value = (userData?.roles as string[]) || [];
+        currentUserGroups.value = (userData?.groups as string[]) || [];
         
         // Extract unique roles and groups from all users for dropdown options
         // We'll collect these from the users list
@@ -536,7 +616,7 @@ const { data: initialData, pending: isPending, error: fetchError, refresh } = aw
                 currentUser.roles?.forEach((r: string) => allRolesSet.add(r));
                 currentUser.groups?.forEach((g: string) => allGroupsSet.add(g));
             }
-        } catch (e) {
+        } catch {
             // Ignore if current user fetch fails
         }
         
@@ -565,7 +645,7 @@ const availableGroups = ref<string[]>(initialData.value?.groups || []);
 const isSaving = ref(false); // Tracks client-side CRUD operations (Add/Edit/Delete)
 
 // Watch the Nuxt data ref and pending state to update local data and loading status
-watch(initialData, (newData) => {
+watch(initialData, (newData: InitialData | null) => {
     if (newData) {
         allUserData.value = newData.users;
         availableRoles.value = newData.roles;
@@ -582,7 +662,7 @@ const refreshAllUsers = async () => {
     try {
         isSaving.value = true;
         // Call sync-all endpoint to sync all users from Keycloak
-        const result = await $fetch('/api/users/sync-all', { method: 'POST' });
+        const result = await $fetch('/api/users/sync-all', { method: 'POST' }) as { stats?: { created?: number; updated?: number } };
         // Refresh the list
         await refresh();
         snackbar.value = { 
@@ -635,7 +715,7 @@ onMounted(async () => {
     
     // Sync current user when page loads - this ensures the logged-in user is in the database
     try {
-        const syncResult = await syncCurrentUser();
+        const syncResult = await syncCurrentUser() as { action?: string } | null;
         console.log('✅ Current user synced:', syncResult);
         
         // If current user was just created, refresh the list immediately
@@ -882,12 +962,14 @@ const resetForm = () => {
     editedItem.value = Object.assign({}, emptyItem);
 };
 
-const showAddForm = () => {
-    resetForm();
-    isEditMode.value = false;
-    readOnly.value = false;
-    showForm.value = true;
-};
+// Unused function - no button in UI to trigger this
+// If add user functionality is needed, add a button that calls this function
+// const showAddForm = () => {
+//     resetForm();
+//     isEditMode.value = false;
+//     readOnly.value = false;
+//     showForm.value = true;
+// };
 
 const viewItem = (item: UserManagementItem) => {
     editedItem.value = Object.assign({}, item);
@@ -896,13 +978,15 @@ const viewItem = (item: UserManagementItem) => {
     showForm.value = true;
 };
 
-const editItem = (item: UserManagementItem) => {
-    editedItem.value = Object.assign({}, item);
-    editedItem.value.password = ''; // Clear password field for security
-    isEditMode.value = true;
-    readOnly.value = false;
-    showForm.value = true;
-};
+// Unused function - edit button has been removed from UI
+// If edit functionality is needed, uncomment this and add edit button back
+// const editItem = (item: UserManagementItem) => {
+//     editedItem.value = Object.assign({}, item);
+//     editedItem.value.password = ''; // Clear password field for security
+//     isEditMode.value = true;
+//     readOnly.value = false;
+//     showForm.value = true;
+// };
 
 const cancelForm = () => {
     showForm.value = false;
@@ -918,10 +1002,12 @@ const saveItem = async () => {
         return;
     }
     
-    if (!isEditMode.value && !editedItem.value.password) {
-        snackbar.value = { show: true, message: 'Password wajib diisi saat membuat pengguna baru!', color: 'error', timeout: 3000 };
-        return;
-    }
+    // Password validation removed because password field is disabled
+    // If add user functionality is enabled in the future, uncomment and enable password field
+    // if (!isEditMode.value && !editedItem.value.password) {
+    //     snackbar.value = { show: true, message: 'Password wajib diisi saat membuat pengguna baru!', color: 'error', timeout: 3000 };
+    //     return;
+    // }
     
     isSaving.value = true;
 
@@ -1013,8 +1099,97 @@ const confirmDelete = async () => {
 };
 </script>
 
-<style scoped>
-/* Custom Table Styling for better visual separation */
+<style scoped lang="scss">
+// Colors from Design System (matching MasterKlinikRuang)
+$success-700: #1B6E53;
+$success-600: #009262;
+$neutral-100: #FFFFFF;
+$neutral-800: #4D4D4D;
+
+// Font Family & Weights
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+// Apply font family
+* {
+  font-family: $font-family-base;
+}
+
+// ============================================
+// PAGE HEADER (matching MasterKlinikRuang style)
+// ============================================
+.page-header {
+  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: $neutral-100;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 16px;
+  margin-right: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.page-title {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: $font-weight-semibold;
+  margin: 0;
+  color: $neutral-100;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  margin: 4px 0 0 0;
+  opacity: 0.9;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+  color: $neutral-100;
+}
+
+.header-stats {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stat-chip {
+  color: $success-600 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.add-btn {
+  font-weight: $font-weight-semibold;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-size: 16px;
+  line-height: 24px;
+  color: $success-600 !important;
+}
+
+// ============================================
+// CUSTOM TABLE STYLING
+// ============================================
 .custom-table :deep(table) {
     border-collapse: collapse;
 }
@@ -1029,4 +1204,62 @@ const confirmDelete = async () => {
     padding-top: 12px !important;
     padding-bottom: 12px !important;
 }
+
+// ============================================
+// MODERN DIALOG STYLING
+// ============================================
+.dialog-header {
+    background: linear-gradient(135deg, var(--v-theme-primary) 0%, var(--v-theme-primary-darken-1) 100%);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.dialog-header.bg-blue-darken-3 {
+    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+}
+
+.dialog-header.bg-orange-darken-2 {
+    background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
+}
+
+.dialog-header.bg-green-darken-2 {
+    background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
+}
+
+// ============================================
+// FORM FIELD STYLING
+// ============================================
+:deep(.v-field__prepend-inner) {
+    padding-right: 12px;
+}
+
+:deep(.v-field__prepend-inner .v-icon) {
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+:deep(.v-field--focused .v-field__prepend-inner .v-icon) {
+    opacity: 1;
+}
+
+// ============================================
+// SECTION DIVIDER STYLING
+// ============================================
+:deep(.v-divider) {
+    border-color: rgba(0, 0, 0, 0.08);
+}
+
+// ============================================
+// RESPONSIVE
+// ============================================
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .header-stats {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+}
 </style>
diff --git a/scripts/db-access.js b/scripts/db-access.js
new file mode 100644
index 0000000..9370c74
--- /dev/null
+++ b/scripts/db-access.js
@@ -0,0 +1,145 @@
+// Quick database access script
+// Usage: node scripts/db-access.js
+
+const Database = require('better-sqlite3');
+const path = require('path');
+const readline = require('readline');
+
+const dbPath = path.join(process.cwd(), 'data', 'users.db');
+
+// Check if database exists
+const fs = require('fs');
+if (!fs.existsSync(dbPath)) {
+  console.error('❌ Database not found at:', dbPath);
+  process.exit(1);
+}
+
+const db = new Database(dbPath);
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+console.log('📊 Database Access Tool');
+console.log('Database path:', dbPath);
+console.log('\nAvailable commands:');
+console.log('  list - List all users');
+console.log('  count - Count total users');
+console.log('  schema - Show table schema');
+console.log('  search <name> - Search user by name');
+console.log('  user <username> - Get user by username');
+console.log('  query <SQL> - Run custom SQL query');
+console.log('  exit - Exit\n');
+
+function prompt() {
+  rl.question('> ', (input) => {
+    const trimmed = input.trim();
+    if (!trimmed) {
+      prompt();
+      return;
+    }
+    
+    const [cmd, ...args] = trimmed.split(' ');
+    
+    try {
+      switch(cmd.toLowerCase()) {
+        case 'list':
+          const users = db.prepare('SELECT id, namaLengkap, namaUser, email, tipeUser FROM users LIMIT 50').all();
+          if (users.length === 0) {
+            console.log('No users found.');
+          } else {
+            console.table(users);
+            console.log(`\nShowing ${users.length} users`);
+          }
+          break;
+          
+        case 'count':
+          const count = db.prepare('SELECT COUNT(*) as total FROM users').get();
+          console.log(`\nTotal users: ${count.total}`);
+          break;
+          
+        case 'schema':
+          const schema = db.prepare("PRAGMA table_info(users)").all();
+          console.table(schema);
+          break;
+          
+        case 'search':
+          const searchTerm = args.join(' ');
+          if (!searchTerm) {
+            console.log('Error: Please provide search term');
+            break;
+          }
+          const searchResults = db.prepare(`
+            SELECT id, namaLengkap, namaUser, email, tipeUser 
+            FROM users 
+            WHERE namaLengkap LIKE ? OR namaUser LIKE ?
+          `).all(`%${searchTerm}%`, `%${searchTerm}%`);
+          if (searchResults.length === 0) {
+            console.log('No users found.');
+          } else {
+            console.table(searchResults);
+          }
+          break;
+          
+        case 'user':
+          const username = args.join(' ');
+          if (!username) {
+            console.log('Error: Please provide username');
+            break;
+          }
+          const user = db.prepare('SELECT * FROM users WHERE namaUser = ?').get(username);
+          if (!user) {
+            console.log('User not found.');
+          } else {
+            console.log('\nUser Details:');
+            console.log(JSON.stringify(user, null, 2));
+          }
+          break;
+          
+        case 'query':
+          const sql = args.join(' ');
+          if (!sql) {
+            console.log('Error: Please provide SQL query');
+            break;
+          }
+          const result = db.prepare(sql).all();
+          if (result.length === 0) {
+            console.log('No results.');
+          } else {
+            console.table(result);
+          }
+          break;
+          
+        case 'exit':
+        case 'quit':
+        case 'q':
+          db.close();
+          rl.close();
+          console.log('\n👋 Goodbye!');
+          return;
+          
+        default:
+          console.log('Unknown command. Type "exit" to quit.');
+      }
+    } catch (error) {
+      console.error('❌ Error:', error.message);
+    }
+    
+    console.log(''); // Empty line for readability
+    prompt();
+  });
+}
+
+// Handle Ctrl+C
+rl.on('SIGINT', () => {
+  console.log('\n\n👋 Goodbye!');
+  db.close();
+  rl.close();
+  process.exit(0);
+});
+
+prompt();
+
+
+
diff --git a/types/checkin.ts b/types/checkin.ts
new file mode 100644
index 0000000..eb4968f
--- /dev/null
+++ b/types/checkin.ts
@@ -0,0 +1,35 @@
+export interface CheckInResult {
+  success: boolean
+  patientId: string
+  status: string
+}
+
+export interface CheckInHistoryItem {
+  patientId: string
+  queueNumber?: string
+  status: string
+  checkInTime: string
+  checkInDate: string
+  method: string
+}
+
+export interface ScannedQRHistoryItem {
+  data: string
+  timestamp: string
+  date: string
+  time: string
+}
+
+export interface SnackbarState {
+  show: boolean
+  title: string
+  message: string
+  color: string
+  icon: string
+  timeout: number
+}
+
+export type TabValue = 'scan' | 'manual' | 'generate'
+export type InfoAction = 'checkin' | 'kembali'
+export type CheckInStatus = 'ALLOWED' | 'NOT_ALLOWED'
+export type HistoryStatus = 'success' | 'failed' | 'pending'