diff --git a/HAK_AKSES_API_ENDPOINT.md b/HAK_AKSES_API_ENDPOINT.md
new file mode 100644
index 0000000..3ff87a8
--- /dev/null
+++ b/HAK_AKSES_API_ENDPOINT.md
@@ -0,0 +1,700 @@
+# API Endpoint Documentation - Hak Akses
+
+## Deskripsi
+Dokumentasi ini menjelaskan semua API endpoint yang diperlukan untuk fitur **Hak Akses** di halaman `/pages/Setting/HakAkses.vue`. Endpoint-endpoint ini akan dihubungkan ke backend API yang disediakan oleh tim backend.
+
+---
+
+## Base URL
+```
+{API_BASE_URL}/api/v1
+```
+**Catatan:** Ganti `{API_BASE_URL}` dengan URL backend yang sebenarnya (contoh: `http://10.10.150.131:8089`)
+
+---
+
+## 1. Get List Users
+
+Mengambil daftar semua users beserta roles, groups, dan informasi lainnya yang diperlukan untuk form hak akses.
+
+### Endpoint
+```
+GET /api/users/list
+```
+
+### Request
+**Headers:**
+```
+Content-Type: application/json
+Accept: application/json
+```
+
+**Query Parameters:** Tidak ad
+
+### Response
+**Success (200 OK):**
+```json
+[
+  {
+    "id": "user-123",
+    "namaLengkap": "John Doe",
+    "namaUser": "johndoe",
+    "email": "john.doe@example.com",
+    "tipeUser": "Super Admin",
+    "lastLogin": 1704067200,
+    "roles": ["superadmin", "admin"],
+    "realmRoles": ["default-roles-sandbox"],
+    "accountRoles": [],
+    "resourceRoles": [],
+    "groups": [
+      "/Instalasi STIM/Devops/Superadmin",
+      "/Instalasi STIM/Admin"
+    ],
+    "given_name": "John",
+    "family_name": "Doe",
+    "createdAt": 1704067200,
+    "updatedAt": 1704067200
+  }
+]
+```
+
+**Error (500 Internal Server Error):**
+```json
+{
+  "statusCode": 500,
+  "statusMessage": "Failed to fetch users"
+}
+```
+
+### Field Description
+- `id`: Unique identifier user
+- `namaLengkap`: Nama lengkap user
+- `namaUser`: Username untuk login
+- `email`: Email user
+- `tipeUser`: Tipe/jenis user (contoh: "Super Admin", "Admin Loket", dll)
+- `lastLogin`: Timestamp terakhir login (Unix timestamp dalam detik)
+- `roles`: Array of role names
+- `realmRoles`: Array of realm roles dari Keycloak
+- `accountRoles`: Array of account roles
+- `resourceRoles`: Array of resource roles
+- `groups`: Array of group paths (contoh: "/Instalasi STIM/Devops/Superadmin")
+- `given_name`: Nama depan
+- `family_name`: Nama belakang
+- `createdAt`: Timestamp pembuatan (Unix timestamp dalam detik)
+- `updatedAt`: Timestamp update terakhir (Unix timestamp dalam detik)
+
+---
+
+## 2. Get Permissions by Role and Group
+
+Mengambil daftar permissions dari backend berdasarkan role dan group yang dipilih.
+
+### Endpoint
+```
+GET /api/v1/permission
+```
+
+### Request
+**Headers:**
+```
+Content-Type: application/json
+Accept: application/json
+```
+
+**Query Parameters:**
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `roles` | string | Yes | Role name (contoh: "superadmin", "admin") |
+| `groups` | string | Yes | Group name atau group path (contoh: "STIM", "/Instalasi STIM/Devops/Superadmin") |
+
+**Example:**
+```
+GET /api/v1/permission?roles=superadmin&groups=STIM
+```
+
+### Response
+**Success (200 OK):**
+```json
+{
+  "message": "Data permission berhasil diambil",
+  "data": [
+    {
+      "id": 1,
+      "create": false,
+      "read": true,
+      "update": false,
+      "disable": false,
+      "delete": false,
+      "active": true,
+      "pagename": "Halaman Utama",
+      "pagesID": 1,
+      "level": 1,
+      "sort": 1,
+      "parent": null
+    },
+    {
+      "id": 2,
+      "create": false,
+      "read": true,
+      "update": false,
+      "disable": false,
+      "delete": false,
+      "active": true,
+      "pagename": "Pengaturan",
+      "pagesID": 2,
+      "level": 1,
+      "sort": 2,
+      "parent": null
+    },
+    {
+      "id": 3,
+      "create": true,
+      "read": true,
+      "update": true,
+      "disable": true,
+      "delete": false,
+      "active": true,
+      "pagename": "Hak Akses",
+      "pagesID": 3,
+      "level": 2,
+      "sort": 3,
+      "parent": 2
+    }
+  ],
+  "meta": {
+    "count": 3,
+    "total": 3
+  }
+}
+```
+
+**Error (400 Bad Request):**
+```json
+{
+  "statusCode": 400,
+  "statusMessage": "roles or groups parameter is required"
+}
+```
+
+**Error (500 Internal Server Error):**
+```json
+{
+  "message": "Failed to fetch permissions",
+  "data": [],
+  "meta": {
+    "count": 0,
+    "total": 0
+  }
+}
+```
+
+### Field Description
+- `id`: Unique identifier permission
+- `create`: Boolean, permission untuk create/tambah data
+- `read`: Boolean, permission untuk read/lihat data
+- `update`: Boolean, permission untuk update/edit data
+- `disable`: Boolean, permission untuk disable/nonaktifkan
+- `delete`: Boolean, permission untuk delete/hapus data
+- `active`: Boolean, status aktif permission
+- `pagename`: Nama halaman/menu (akan di-mapping ke menu sidebar)
+- `pagesID`: ID halaman di sistem backend
+- `level`: Level hierarki menu (1 = parent, 2 = child, dll)
+- `sort`: Urutan tampil
+- `parent`: ID parent menu (null jika parent menu)
+
+---
+
+## 3. Get List Hak Akses
+
+Mengambil daftar semua hak akses yang sudah tersimpan.
+
+### Endpoint
+```
+GET /api/v1/hak-akses
+```
+
+### Request
+**Headers:**
+```
+Content-Type: application/json
+Accept: application/json
+```
+
+**Query Parameters:** Tidak ada
+
+### Response
+**Success (200 OK):**
+```json
+[
+  {
+    "id": 1,
+    "userId": "user-123",
+    "namaLengkap": "John Doe",
+    "namaUser": "johndoe",
+    "tipeUser": "Super Admin",
+    "role": "superadmin",
+    "group": "STIM",
+    "groupPath": "/Instalasi STIM/Devops/Superadmin",
+    "namaTipeUser": "Super Admin",
+    "hakAksesMenu": [
+      {
+        "name": "Dashboard",
+        "canAccess": true,
+        "canView": true,
+        "canAdd": false,
+        "canEdit": false,
+        "canDelete": false
+      },
+      {
+        "name": "Master Data",
+        "canAccess": true,
+        "canView": true,
+        "canAdd": true,
+        "canEdit": true,
+        "canDelete": false
+      }
+    ],
+    "isGroupBased": true,
+    "createdAt": 1704067200,
+    "updatedAt": 1704067200
+  }
+]
+```
+
+**Error (500 Internal Server Error):**
+```json
+{
+  "statusCode": 500,
+  "statusMessage": "Failed to fetch hak akses"
+}
+```
+
+### Field Description
+- `id`: Unique identifier hak akses
+- `userId`: ID user (optional, untuk backward compatibility)
+- `namaLengkap`: Nama lengkap user (optional)
+- `namaUser`: Username (optional)
+- `tipeUser`: Tipe user (optional)
+- `role`: Role name (required)
+- `group`: Group name (required)
+- `groupPath`: Full group path (optional, untuk group-based access)
+- `namaTipeUser`: Nama tipe user (optional)
+- `hakAksesMenu`: Array of menu permissions
+  - `name`: Nama menu
+  - `canAccess`: Boolean, apakah bisa akses menu
+  - `canView`: Boolean, apakah bisa lihat data
+  - `canAdd`: Boolean, apakah bisa tambah data
+  - `canEdit`: Boolean, apakah bisa edit data
+  - `canDelete`: Boolean, apakah bisa hapus data
+- `isGroupBased`: Boolean, apakah hak akses ini group-based (true) atau individual (false)
+- `createdAt`: Timestamp pembuatan (Unix timestamp dalam detik)
+- `updatedAt`: Timestamp update terakhir (Unix timestamp dalam detik)
+
+---
+
+## 4. Create Hak Akses
+
+Membuat hak akses baru (group-based atau individual).
+
+### Endpoint
+```
+POST /api/v1/hak-akses
+```
+
+### Request
+**Headers:**
+```
+Content-Type: application/json
+Accept: application/json
+```
+
+**Body:**
+```json
+{
+  "role": "superadmin",
+  "group": "STIM",
+  "groupPath": "/Instalasi STIM/Devops/Superadmin",
+  "namaTipeUser": "Super Admin",
+  "hakAksesMenu": [
+    {
+      "name": "Dashboard",
+      "canAccess": true,
+      "canView": true,
+      "canAdd": false,
+      "canEdit": false,
+      "canDelete": false
+    },
+    {
+      "name": "Master Data",
+      "canAccess": true,
+      "canView": true,
+      "canAdd": true,
+      "canEdit": true,
+      "canDelete": false
+    }
+  ],
+  "isGroupBased": true
+}
+```
+
+### Response
+**Success (201 Created):**
+```json
+{
+  "success": true,
+  "message": "Hak akses berhasil dibuat",
+  "data": {
+    "id": 1,
+    "role": "superadmin",
+    "group": "STIM",
+    "groupPath": "/Instalasi STIM/Devops/Superadmin",
+    "namaTipeUser": "Super Admin",
+    "hakAksesMenu": [
+      {
+        "name": "Dashboard",
+        "canAccess": true,
+        "canView": true,
+        "canAdd": false,
+        "canEdit": false,
+        "canDelete": false
+      }
+    ],
+    "isGroupBased": true,
+    "createdAt": 1704067200,
+    "updatedAt": 1704067200
+  }
+}
+```
+
+**Error (400 Bad Request):**
+```json
+{
+  "statusCode": 400,
+  "statusMessage": "role and group are required"
+}
+```
+
+**Error (409 Conflict):**
+```json
+{
+  "statusCode": 409,
+  "statusMessage": "Hak akses untuk group dan role ini sudah ada"
+}
+```
+
+### Field Description
+**Required Fields:**
+- `role`: Role name (string, required)
+- `group`: Group name (string, required)
+- `hakAksesMenu`: Array of menu permissions (array, required)
+
+**Optional Fields:**
+- `userId`: ID user (string, optional)
+- `namaLengkap`: Nama lengkap (string, optional)
+- `namaUser`: Username (string, optional)
+- `tipeUser`: Tipe user (string, optional)
+- `groupPath`: Full group path (string, optional)
+- `namaTipeUser`: Nama tipe user (string, optional)
+- `isGroupBased`: Boolean, default true (boolean, optional)
+
+---
+
+## 5. Update Hak Akses
+
+Mengupdate hak akses yang sudah ada.
+
+### Endpoint
+```
+PATCH /api/v1/hak-akses/{id}
+```
+
+### Request
+**Headers:**
+```
+Content-Type: application/json
+Accept: application/json
+```
+
+**Path Parameters:**
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `id` | integer | Yes | ID hak akses yang akan diupdate |
+
+**Body (semua field optional, hanya kirim field yang ingin diupdate):**
+```json
+{
+  "role": "admin",
+  "group": "LOKET",
+  "namaTipeUser": "Admin Loket",
+  "hakAksesMenu": [
+    {
+      "name": "Dashboard",
+      "canAccess": true,
+      "canView": true,
+      "canAdd": false,
+      "canEdit": false,
+      "canDelete": false
+    }
+  ]
+}
+```
+
+### Response
+**Success (200 OK):**
+```json
+{
+  "success": true,
+  "message": "Hak akses berhasil diperbarui",
+  "data": {
+    "id": 1,
+    "role": "admin",
+    "group": "LOKET",
+    "groupPath": "/Instalasi STIM/Loket",
+    "namaTipeUser": "Admin Loket",
+    "hakAksesMenu": [
+      {
+        "name": "Dashboard",
+        "canAccess": true,
+        "canView": true,
+        "canAdd": false,
+        "canEdit": false,
+        "canDelete": false
+      }
+    ],
+    "isGroupBased": true,
+    "createdAt": 1704067200,
+    "updatedAt": 1704067300
+  }
+}
+```
+
+**Error (400 Bad Request):**
+```json
+{
+  "statusCode": 400,
+  "statusMessage": "ID is required"
+}
+```
+
+**Error (404 Not Found):**
+```json
+{
+  "statusCode": 404,
+  "statusMessage": "Hak akses not found"
+}
+```
+
+**Error (500 Internal Server Error):**
+```json
+{
+  "statusCode": 500,
+  "statusMessage": "Failed to update hak akses"
+}
+```
+
+---
+
+## 6. Delete Hak Akses
+
+Menghapus hak akses.
+
+### Endpoint
+```
+DELETE /api/v1/hak-akses/{id}
+```
+
+### Request
+**Headers:**
+```
+Content-Type: application/json
+Accept: application/json
+```
+
+**Path Parameters:**
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `id` | integer | Yes | ID hak akses yang akan dihapus |
+
+### Response
+**Success (200 OK):**
+```json
+{
+  "success": true,
+  "message": "Hak akses berhasil dihapus"
+}
+```
+
+**Error (400 Bad Request):**
+```json
+{
+  "statusCode": 400,
+  "statusMessage": "ID is required"
+}
+```
+
+**Error (404 Not Found):**
+```json
+{
+  "statusCode": 404,
+  "statusMessage": "Hak akses not found"
+}
+```
+
+**Error (500 Internal Server Error):**
+```json
+{
+  "statusCode": 500,
+  "statusMessage": "Failed to delete hak akses"
+}
+```
+
+---
+
+## Mapping Permissions ke Menu Sidebar
+
+Sistem akan otomatis memetakan `pagename` dari API permission ke nama menu di sidebar. Mapping dilakukan dengan:
+
+1. **Exact match**: `pagename.toLowerCase() === menu.name.toLowerCase()`
+2. **Partial match**: `pagename.toLowerCase().includes(menu.name.toLowerCase())` atau sebaliknya
+
+### Contoh Mapping:
+- `pagename: "Halaman Utama"` → Menu: "Dashboard"
+- `pagename: "Pengaturan"` → Menu: "Master Data"
+- `pagename: "Hak Akses"` → Menu: "Hak Akses"
+
+### Permission Mapping:
+- `read: true` → `canView: true`
+- `create: true` → `canAdd: true`
+- `update: true` → `canEdit: true`
+- `delete: true` → `canDelete: true`
+- `active: true || read: true` → `canAccess: true`
+
+---
+
+## Group-Based Access
+
+Sistem mendukung **Group-Based Access** dimana:
+- Satu hak akses dapat diberikan ke semua user yang memiliki group dan role yang sama
+- Setiap user dapat memiliki multiple hak akses dari berbagai group
+- Hak akses disimpan dengan flag `isGroupBased: true` dan `groupPath` untuk identifikasi
+
+### Contoh:
+Jika hak akses dibuat dengan:
+- `role: "superadmin"`
+- `groupPath: "/Instalasi STIM/Devops/Superadmin"`
+- `isGroupBased: true`
+
+Maka semua user yang memiliki:
+- Role: "superadmin" **DAN**
+- Group: "/Instalasi STIM/Devops/Superadmin"
+
+Akan otomatis mendapatkan hak akses tersebut.
+
+---
+
+## Error Handling
+
+Semua endpoint harus mengembalikan error dengan format konsisten:
+
+```json
+{
+  "statusCode": 400|404|409|500,
+  "statusMessage": "Error message description"
+}
+```
+
+**HTTP Status Codes:**
+- `200 OK`: Request berhasil
+- `201 Created`: Resource berhasil dibuat
+- `400 Bad Request`: Request tidak valid (missing required fields, invalid format)
+- `404 Not Found`: Resource tidak ditemukan
+- `409 Conflict`: Resource sudah ada (untuk create duplicate)
+- `500 Internal Server Error`: Server error
+
+---
+
+## Authentication
+
+**Catatan:** Tim backend perlu menentukan apakah endpoint-endpoint ini memerlukan authentication token atau tidak. Jika diperlukan, tambahkan:
+
+**Headers:**
+```
+Authorization: Bearer {access_token}
+```
+
+---
+
+## Testing
+
+### Contoh Request dengan cURL:
+
+**1. Get Users List:**
+```bash
+curl -X GET "http://{API_BASE_URL}/api/users/list" \
+  -H "Content-Type: application/json"
+```
+
+**2. Get Permissions:**
+```bash
+curl -X GET "http://{API_BASE_URL}/api/v1/permission?roles=superadmin&groups=STIM" \
+  -H "Content-Type: application/json"
+```
+
+**3. Create Hak Akses:**
+```bash
+curl -X POST "http://{API_BASE_URL}/api/v1/hak-akses" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "role": "superadmin",
+    "group": "STIM",
+    "groupPath": "/Instalasi STIM/Devops/Superadmin",
+    "namaTipeUser": "Super Admin",
+    "hakAksesMenu": [
+      {
+        "name": "Dashboard",
+        "canAccess": true,
+        "canView": true,
+        "canAdd": false,
+        "canEdit": false,
+        "canDelete": false
+      }
+    ],
+    "isGroupBased": true
+  }'
+```
+
+**4. Update Hak Akses:**
+```bash
+curl -X PATCH "http://{API_BASE_URL}/api/v1/hak-akses/1" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "namaTipeUser": "Updated Admin",
+    "hakAksesMenu": [...]
+  }'
+```
+
+**5. Delete Hak Akses:**
+```bash
+curl -X DELETE "http://{API_BASE_URL}/api/v1/hak-akses/1" \
+  -H "Content-Type: application/json"
+```
+
+---
+
+## Catatan Penting
+
+1. **Base URL**: Ganti `{API_BASE_URL}` dengan URL backend yang sebenarnya
+2. **Timestamps**: Semua timestamp menggunakan format Unix timestamp (detik sejak epoch)
+3. **Group Path**: Group path harus full path (contoh: "/Instalasi STIM/Devops/Superadmin") untuk group-based access
+4. **Menu Permissions**: Array `hakAksesMenu` harus sesuai dengan struktur menu sidebar
+5. **Validation**: Backend harus melakukan validasi untuk:
+   - Required fields (role, group, hakAksesMenu)
+   - Duplicate check untuk group+role combination (jika isGroupBased = true)
+   - Format data yang valid
+
+---
+
+## Kontak
+
+Jika ada pertanyaan atau perubahan requirement, silakan hubungi tim frontend.
+
diff --git a/components/verification/PatientVerificationList.vue b/components/verification/PatientVerificationList.vue
index 5e2d2ac..38e6870 100644
--- a/components/verification/PatientVerificationList.vue
+++ b/components/verification/PatientVerificationList.vue
@@ -1,83 +1,93 @@
 <template>
   <v-card-text class="pa-0 bg-white">
-    <v-list lines="two" class="pa-0">
-      <v-list-item
-        v-for="patient in patients"
-        :key="patient.rm"
-        class="patient-item"
-        :class="{ 'verified-item': patient.status === 'Terverifikasi' }"
-      >
-        <template #prepend>
-          <v-avatar 
-            :color="patient.status === 'Terverifikasi' ? 'secondary-600' : 'primary-600'" 
-            size="64" 
-            class="patient-avatar"
-          >
-            <v-icon size="36" color="white">
-              {{ patient.status === 'Terverifikasi' ? 'mdi-check-decagram' : 'mdi-clock-alert' }}
-            </v-icon>
-          </v-avatar>
-        </template>
+    <v-table class="patient-table">
+      <!-- Table Body -->
+      <tbody>
+        <tr
+          v-for="patient in patients"
+          :key="patient.rm"
+          class="table-row"
+          :class="{ 'verified-row': patient.status === 'Terverifikasi' }"
+        >
+          <!-- Status Avatar -->
+          <td class="table-cell status-cell">
+            <div class="status-wrapper">
+              <v-avatar 
+                :color="patient.status === 'Terverifikasi' ? 'secondary-600' : 'primary-600'" 
+                size="48" 
+                class="patient-avatar"
+              >
+                <v-icon size="24" color="white">
+                  {{ patient.status === 'Terverifikasi' ? 'mdi-check-decagram' : 'mdi-clock-alert' }}
+                </v-icon>
+              </v-avatar>
+            </div>
+          </td>
 
-        <v-list-item-title class="patient-name">
-          {{ patient.nama }}
-        </v-list-item-title>
+          <!-- Nama -->
+          <td class="table-cell">
+            <span class="patient-name">{{ patient.nama }}</span>
+          </td>
 
-        <v-list-item-subtitle class="mt-2">
-          <v-row dense class="patient-info">
-            <v-col cols="12" sm="3" md="2" class="py-1"> 
-              <v-chip size="default" color="primary-200" class="chip-rm" variant="flat">
-                <v-icon start size="18" color="secondary-600">mdi-file-document</v-icon>
-                <span class="chip-rm-text">{{ patient.rm }}</span>
-              </v-chip>
-            </v-col>
-            
-            <v-col cols="12" sm="5" md="6" class="py-1 info-item"> 
-              <v-icon size="18" class="mr-2" color="neutral-600">mdi-map-marker</v-icon>
+          <!-- RM -->
+          <td class="table-cell">
+            <v-chip size="small" color="primary-200" class="chip-rm" variant="flat">
+              <v-icon start size="14" color="secondary-600">mdi-file-document</v-icon>
+              <span class="chip-rm-text">{{ patient.rm }}</span>
+            </v-chip>
+          </td>
+
+          <!-- Alamat -->
+          <td class="table-cell">
+            <div class="info-item">
+              <v-icon size="14" class="mr-2" color="neutral-600">mdi-map-marker</v-icon>
               <span>{{ patient.alamat }}</span>
-            </v-col>
-            
-            <v-col cols="12" sm="4" md="4" class="py-1 info-item"> 
-              <v-icon size="18" class="mr-2" color="neutral-600">mdi-phone</v-icon>
-              <span>{{ patient.telepon || 'Belum diisi' }}</span>
-            </v-col>
-          </v-row>
-        </v-list-item-subtitle>
+            </div>
+          </td>
 
-        <template #append>
-          <v-btn
-            v-if="patient.status === 'Belum Terverifikasi'"
-            color="primary-600"
-            size="x-large"
-            @click="$emit('verify', patient)"
-            prepend-icon="mdi-qrcode-scan"
-            variant="flat"
-            class="action-btn"
-            rounded="xl"
-          >
-            VERIFIKASI
-          </v-btn>
-          
-          <v-chip
-            v-else
-            color="secondary-600"
-            size="x-large"
-            variant="flat"
-            class="verified-chip"
-            rounded="xl"
-          >
-            <v-icon start size="24">mdi-shield-check</v-icon>
-            VERIFIED
-          </v-chip>
-        </template>
-      </v-list-item>
-      
-      <v-list-item v-if="patients.length === 0">
-        <v-list-item-title class="empty-state">
-          {{ emptyMessage }}
-        </v-list-item-title>
-      </v-list-item>
-    </v-list>
+          <!-- Nomor Telepon -->
+          <td class="table-cell">
+            <div class="info-item">
+              <v-icon size="14" class="mr-2" color="neutral-600">mdi-phone</v-icon>
+              <span>{{ patient.telepon || 'Belum diisi' }}</span>
+            </div>
+          </td>
+
+          <!-- Aksi -->
+          <td class="table-cell action-col">
+            <div class="action-wrapper">
+              <v-btn
+                v-if="patient.status === 'Belum Terverifikasi'"
+                variant="flat"
+                class="action-btn"
+                @click="$emit('verify', patient)"
+              >
+                <v-icon start size="16">mdi-qrcode-scan</v-icon>
+                VERIFIKASI
+              </v-btn>
+              
+              <v-btn
+                v-else
+                color="secondary-600"
+                variant="flat"
+                class="verified-btn"
+                disabled
+              >
+                <v-icon start size="16">mdi-shield-check</v-icon>
+                VERIFIED
+              </v-btn>
+            </div>
+          </td>
+        </tr>
+        
+        <!-- Empty State -->
+        <tr v-if="patients.length === 0">
+          <td colspan="6" class="empty-state-cell">
+            <div class="empty-state">{{ emptyMessage }}</div>
+          </td>
+        </tr>
+      </tbody>
+    </v-table>
   </v-card-text>
 </template>
 
@@ -99,12 +109,14 @@ defineEmits(['verify']);
 <style scoped lang="scss">
 $neutral-100: #FFFFFF;
 $neutral-400: #E5F7FA;
+$neutral-500: #ABBED1;
 $neutral-600: #89939E;
 $neutral-700: #717171;
 $neutral-900: #212121;
 $primary-100: #FFE8CC;
 $primary-200: #FFDCAF;
 $primary-600: #FFA532;
+$primary-700: #FF9B1B;
 $secondary-200: #EDF5FF;
 $secondary-300: #DBEDFF;
 $secondary-400: #B3D9FF;
@@ -116,63 +128,129 @@ $font-weight-semibold: 600;
 $font-weight-bold: 700;
 $font-weight-extra-bold: 800;
 
-.patient-item {
-  border-bottom: 1px solid $neutral-400;
-  padding: 24px;
+.patient-table {
+  font-family: $font-family-base;
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  
+  :deep(thead),
+  :deep(tbody),
+  :deep(tr) {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// ============================================
+// TABLE HEADER
+// ============================================
+.table-header {
+  background-color: $neutral-400;
+}
+
+.header-cell {
+  padding: 16px 24px !important;
+  text-align: left;
+  font-weight: $font-weight-bold;
+  font-size: 14px;
+  color: $neutral-900;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-family: $font-family-base;
+  border-bottom: 2px solid $neutral-500;
+  vertical-align: middle;
+  
+  &.status-header-hidden {
+    padding: 16px 24px !important;
+    width: 96px;
+    min-width: 96px;
+    max-width: 96px;
+  }
+  
+  &.action-col {
+    text-align: right;
+    padding-right: 24px !important;
+  }
+}
+
+// ============================================
+// TABLE BODY
+// ============================================
+.table-row {
   transition: all 0.3s ease;
   position: relative;
-  overflow: hidden;
+  
+  &:hover {
+    background-color: $primary-100 !important;
+    
+    &::before {
+      transform: scaleY(1);
+    }
+  }
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    background: $primary-600;
+    transform: scaleY(0);
+    transition: transform 0.3s ease;
+  }
+}
+
+.verified-row {
+  background-color: $secondary-200 !important;
+  
+  &::before {
+    background: $secondary-600 !important;
+  }
+  
+  &:hover {
+    background-color: $secondary-300 !important;
+  }
+}
+
+.table-cell {
+  padding: 16px 24px !important;
+  vertical-align: middle;
   font-family: $font-family-base;
+  border-bottom: 1px solid $neutral-400;
+  
+  &.status-cell {
+    text-align: center;
+    padding: 16px 24px !important;
+    width: 96px;
+    min-width: 96px;
+    max-width: 96px;
+  }
+  
+  &.action-col {
+    text-align: right;
+    padding-right: 24px !important;
+  }
 }
 
-.patient-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 4px;
-  background: $primary-600;
-  transform: scaleY(0);
-  transition: transform 0.3s ease;
-}
-
-.patient-item:hover::before {
-  transform: scaleY(1);
-}
-
-.patient-item:hover {
-  background: $primary-100 !important;
-  transform: translateX(4px);
-}
-
-.verified-item {
-  background: $secondary-200 !important;
-}
-
-.verified-item::before {
-  background: $secondary-600 !important;
-}
-
-.verified-item:hover {
-  background: $secondary-300 !important;
+.status-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
 }
 
 .patient-avatar {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   border: 3px solid $neutral-100;
+  margin: 0 auto;
 }
 
 .patient-name {
-  font-size: 24px;
+  font-size: 18px;
   font-weight: $font-weight-extra-bold;
   color: $neutral-900;
-  margin-bottom: 8px;
-  font-family: $font-family-base;
-}
-
-.patient-info {
-  font-size: 14px;
   font-family: $font-family-base;
 }
 
@@ -195,51 +273,93 @@ $font-weight-extra-bold: 800;
   font-family: $font-family-base;
 }
 
+.action-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .action-btn {
+  background-color: $primary-700 !important;
   text-transform: none;
   letter-spacing: 0.5px;
   font-weight: $font-weight-extra-bold;
-  font-size: 16px;
-  color: $neutral-100;
-  padding: 12px 32px;
-  box-shadow: 0 2px 8px rgba(255, 155, 27, 0.25);
+  font-size: 14px;
+  color: $neutral-100 !important;
+  padding: 8px 24px !important;
+  height: 40px !important;
+  min-width: 150px;
+  box-shadow: 0 4px 12px rgba(255, 155, 27, 0.4), 0 2px 6px rgba(255, 155, 27, 0.3);
   font-family: $font-family-base;
+  transition: all 0.3s ease;
 }
 
-.verified-chip {
+.action-btn:hover {
+  background-color: #E68A00 !important;
+  box-shadow: 0 6px 16px rgba(255, 155, 27, 0.5), 0 3px 8px rgba(255, 155, 27, 0.4);
+  transform: translateY(-2px);
+}
+
+.verified-btn {
+  text-transform: none;
+  letter-spacing: 0.5px;
   font-weight: $font-weight-extra-bold;
-  font-size: 16px;
-  color: $neutral-100;
-  padding: 12px 24px;
+  font-size: 14px;
+  color: $neutral-100 !important;
+  padding: 8px 24px !important;
+  height: 40px !important;
+  min-width: 150px;
   font-family: $font-family-base;
+  opacity: 1 !important;
+}
+
+.empty-state-cell {
+  padding: 40px 24px;
+  text-align: center;
 }
 
 .empty-state {
-  text-align: center;
-  padding: 32px 0;
   font-size: 18px;
   color: $neutral-600;
   font-weight: $font-weight-semibold;
   font-family: $font-family-base;
 }
 
+// ============================================
+// RESPONSIVE
+// ============================================
 @media (max-width: 960px) {
-  .patient-item {
-    padding: 20px;
+  .patient-table {
+    display: block;
+    overflow-x: auto;
   }
   
-  .action-btn {
-    font-size: 14px;
-    padding: 10px 20px;
+  .table-cell {
+    padding: 20px 16px;
+    white-space: nowrap;
+  }
+  
+  .header-cell {
+    padding: 12px 16px;
+    font-size: 12px;
+  }
+  
+  .action-btn,
+  .verified-btn {
+    font-size: 12px;
   }
   
   .patient-avatar {
-    width: 56px !important;
-    height: 56px !important;
+    width: 44px !important;
+    height: 44px !important;
   }
   
   .patient-name {
-    font-size: 20px;
+    font-size: 16px;
+  }
+  
+  .info-item {
+    font-size: 12px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/pages/CheckInPasien/checkIn.vue.backup.combined-layout b/pages/CheckInPasien/checkIn.vue.backup.combined-layout
new file mode 100644
index 0000000..2f72c74
--- /dev/null
+++ b/pages/CheckInPasien/checkIn.vue.backup.combined-layout
@@ -0,0 +1,3386 @@
+<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="checkin" class="tab-modern">
+                      <v-icon size="20" class="mr-2">mdi-login</v-icon>
+                      <span>Check-in</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 Check-in (Combined Scan QR + Manual) -->
+                    <v-window-item value="checkin">
+                      <v-row class="checkin-layout">
+                        <!-- Left: Scan QR -->
+                        <v-col cols="12" md="6" class="checkin-left-col">
+                          <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 v-slot: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 input <strong>Manual</strong> di sebelah kanan.
+                                </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 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
+                                v-if="!isScanning"
+                                class="btn-primary-modern btn-centered"
+                                size="large"
+                                elevation="0"
+                                @click="startScanning"
+                                :disabled="!hasCamera && !cameraChecking"
+                                block
+                              >
+                                <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"
+                                block
+                              >
+                                <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"
+                                block
+                              >
+                                <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-col>
+  
+                        <!-- Right: Manual Input -->
+                        <v-col cols="12" md="6" class="checkin-right-col">
+                          <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="0"
+                                block
+                              >
+                                <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>
+                          </div>
+                        </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>
+                          <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('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('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-select
+                            v-model="selectedKlinik"
+                            label="Pilih Klinik/Poli"
+                            :items="klinikOptions"
+                            prepend-inner-icon="mdi-hospital-building"
+                            variant="outlined"
+                            :color="primaryColor"
+                            class="input-modern mb-3"
+                            density="comfortable"
+                            :rules="[v => !!v || 'Klinik/Poli harus dipilih']"
+                            hide-details="auto"
+                            required
+                          ></v-select>
+                          
+                          <v-text-field
+                            v-model="generatePatientId"
+                            label="ID Pasien"
+                            placeholder="Auto-generate: P-00001"
+                            prepend-inner-icon="mdi-identifier"
+                            variant="outlined"
+                            :color="primaryColor"
+                            class="input-modern mb-3"
+                            density="comfortable"
+                            readonly
+                            hint="ID Pasien akan di-generate secara otomatis secara sequential"
+                            persistent-hint
+                            hide-details="auto"
+                          >
+                            <template v-slot:append-inner>
+                              <v-btn
+                                icon
+                                size="small"
+                                variant="text"
+                                @click="generatePatientId = generateSequentialPatientId()"
+                                title="Generate ID Baru"
+                              >
+                                <v-icon size="18">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="!selectedKlinik"
+                            >
+                              <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">{{ statsToday }}</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">{{ statsCompleted }}</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">{{ statsWaiting }}</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>
+            
+            <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="handleInfoAction"
+                  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="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>
+        </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"
+                        variant="text"
+                        color="error"
+                        @click="deleteHistoryItem(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="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>
+                </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';
+import { useMasterStore } from '@/stores/masterStore';
+
+definePageMeta({
+  middleware:['auth'],
+  layout: false,
+})
+
+const masterStore = useMasterStore();
+  
+  
+  // TypeScript declaration for QRCode
+  declare global {
+    interface Window {
+      QRCode: any;
+    }
+  }
+  
+  // --- DESAIN & TEMA ---
+  const primaryColor = ref('#1565C0');
+  const secondaryColor = ref('#FB8C00');
+  
+  // --- LOGIKA ---
+  const tab = ref('checkin');
+  const infoDialog = ref(false);
+  const infoMessage = ref('');
+  const infoAction = ref<'checkin' | 'kembali'>('kembali');
+  let autoCloseTimer: ReturnType<typeof setTimeout> | null = null; 
+  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('');
+  const generateStatus = ref('ALLOWED');
+  const generatedQRData = ref('');
+  const selectedKlinik = ref('');
+  const statusOptions = [
+    { title: 'Diizinkan Check-in', value: 'ALLOWED' },
+    { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
+  ];
+  
+  // Get klinik list for dropdown
+  const klinikOptions = computed(() => {
+    const klinikList = masterStore.klinikList.map((k: { kode: string; nama: string }) => ({
+      title: `${k.kode} - ${k.nama}`,
+      value: k.kode
+    }));
+    
+    // Tambahkan opsi "UM" (Umum) di awal list
+    return [
+      { title: 'UM - Umum', value: 'UM' },
+      ...klinikList
+    ];
+  });
+  
+  // Sequential Patient ID Management
+  const PATIENT_ID_STORAGE_KEY = 'checkin_patient_id_counter';
+  const QUEUE_NUMBER_STORAGE_KEY = 'checkin_queue_number_counters';
+  
+  // Generate sequential patient ID (P-00001, P-00002, etc.)
+  const generateSequentialPatientId = (): string => {
+    if (typeof window === 'undefined') return 'P-00001';
+    
+    let counter = parseInt(localStorage.getItem(PATIENT_ID_STORAGE_KEY) || '0', 10);
+    counter += 1;
+    localStorage.setItem(PATIENT_ID_STORAGE_KEY, counter.toString());
+    
+    return `P-${String(counter).padStart(5, '0')}`;
+  };
+  
+  // Generate sequential queue number based on klinik code (AN-0001, AS-0001, etc.)
+  const generateSequentialQueueNumber = (kodeKlinik: string): string => {
+    if (typeof window === 'undefined') return `${kodeKlinik}-0001`;
+    
+    const counters = JSON.parse(localStorage.getItem(QUEUE_NUMBER_STORAGE_KEY) || '{}');
+    let counter = parseInt(counters[kodeKlinik] || '0', 10);
+    counter += 1;
+    counters[kodeKlinik] = counter;
+    localStorage.setItem(QUEUE_NUMBER_STORAGE_KEY, JSON.stringify(counters));
+    
+    return `${kodeKlinik}-${String(counter).padStart(4, '0')}`;
+  };
+  
+  
+  const snackbar = ref({
+    show: false,
+    title: '',
+    message: '',
+    color: '',
+    icon: '',
+    timeout: 4000,
+  });
+  
+  // 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: 1920, min: 1280 },
+          height: { ideal: 1080, min: 720 }
+        } 
+      });
+      
+      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;
+        
+        // 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 dioptimalkan untuk kualitas tinggi
+        const baseVideoConstraints = isMobile.value
+          ? {
+              facingMode: "environment",
+              width: { ideal: 1280, min: 640, max: 1920 },
+              height: { ideal: 720, min: 480, max: 1080 }
+            }
+          : {
+              facingMode: "user",
+              width: { ideal: 1920, min: 1280, max: 1920 },
+              height: { ideal: 1080, min: 720, max: 1080 }
+            };
+        
+        // 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 ? 30 : 30, // FPS tinggi untuk deteksi lebih baik dan smooth
+              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: 30,
+                  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: 1280, min: 640, max: 1920 },
+                    height: { ideal: 720, min: 480, max: 1080 }
+                  },
+                  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: 30,
+                    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 ? 1280 : 1920, min: isMobile.value ? 640 : 1280, max: isMobile.value ? 1920 : 1920 },
+                      height: { ideal: isMobile.value ? 720 : 1080, min: isMobile.value ? 480 : 720, max: isMobile.value ? 1080 : 1080 }
+                    },
+                    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 () => {
+    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;
+    }
+  };
+  
+  const handleQRScanSuccess = (decodedText: string) => {
+    console.log('🎯 QR Scan Success! Data:', decodedText);
+    
+    // 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 and initialize patient ID
+  onMounted(() => {
+    if (typeof window !== 'undefined') {
+      // Initialize patient ID if empty
+      if (!generatePatientId.value) {
+        generatePatientId.value = generateSequentialPatientId();
+      }
+      
+      // Set default klinik if available
+      if (!selectedKlinik.value && klinikOptions.value.length > 0) {
+        selectedKlinik.value = klinikOptions.value[0].value;
+      }
+      
+      // Check camera availability
+      if (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;
+      }
+    } else {
+      hasCamera.value = false;
+      cameraChecking.value = false;
+    }
+  });
+  
+  // Cleanup saat component unmount
+  onUnmounted(() => {
+    if (html5QrCode && isScanning.value) {
+      stopScanning();
+    }
+    // Clear auto-close timer jika ada
+    if (autoCloseTimer) {
+      clearTimeout(autoCloseTimer);
+      autoCloseTimer = null;
+    }
+  });
+  
+  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;
+      }
+      
+      // Extract kode klinik from patient ID if available (format: P-00001 or from context)
+      // For now, we'll try to get it from the selected klinik or use a default
+      let kodeKlinik = selectedKlinik.value || '';
+      
+      // If no klinik selected, try to infer from context or use first available
+      if (!kodeKlinik && klinikOptions.value.length > 0) {
+        kodeKlinik = klinikOptions.value[0].value;
+      }
+      
+      // 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
+          };
+          
+          // Generate queue number based on klinik
+          const queueNumber = kodeKlinik ? generateSequentialQueueNumber(kodeKlinik) : undefined;
+          
+          // Simpan ke history check-in dengan status hasil check-in
+          saveToHistory({
+              patientId: patientId || 'Unknown',
+              queueNumber: queueNumber,
+              status: checkinSuccess ? 'success' : 'failed',
+              checkInTime: new Date().toISOString(),
+              checkInDate: new Date().toISOString(),
+              method: 'QR Scan',
+              kodeKlinik: kodeKlinik
+          });
+          
+          // 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
+          };
+          
+          // Extract kode klinik (same as above)
+          let kodeKlinik = selectedKlinik.value || '';
+          if (!kodeKlinik && klinikOptions.value.length > 0) {
+            kodeKlinik = klinikOptions.value[0].value;
+          }
+          
+          // 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',
+              kodeKlinik: kodeKlinik
+          });
+          
+          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 () => {
+      // Clear auto-close timer jika ada
+      if (autoCloseTimer) {
+        clearTimeout(autoCloseTimer);
+        autoCloseTimer = null;
+      }
+      
+      infoDialog.value = false;
+      
+      // Scanner tetap berjalan setelah dialog ditutup
+      // Ini memungkinkan user untuk segera memproses QR code berikutnya
+      // tanpa perlu memulai scanner lagi
+  };
+  
+  // Watch infoDialog untuk auto-close setelah 3 detik
+  watch(infoDialog, (isOpen: boolean) => {
+    // Clear timer yang ada jika dialog ditutup
+    if (autoCloseTimer) {
+      clearTimeout(autoCloseTimer);
+      autoCloseTimer = null;
+    }
+    
+    // Jika dialog dibuka, set timer untuk auto-close setelah 3 detik
+    if (isOpen) {
+      autoCloseTimer = setTimeout(() => {
+        infoDialog.value = false;
+        autoCloseTimer = null;
+      }, 5000); // 5   detik
+    }
+  });
+  
+  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;
+    }
+  
+    // Get kode klinik (use first available if none selected)
+    let kodeKlinik = selectedKlinik.value || '';
+    if (!kodeKlinik && klinikOptions.value.length > 0) {
+      kodeKlinik = klinikOptions.value[0].value;
+    }
+    
+    // Simulasi check-in manual
+    const success = await performCheckIn(`${manualInput.value}|ALLOWED`);
+    
+    if (success) {
+      // Generate queue number
+      const queueNumber = kodeKlinik ? generateSequentialQueueNumber(kodeKlinik) : undefined;
+      
+      // Save to history
+      saveToHistory({
+        patientId: manualInput.value,
+        queueNumber: queueNumber,
+        status: 'success',
+        checkInTime: new Date().toISOString(),
+        checkInDate: new Date().toISOString(),
+        method: 'Manual Input',
+        kodeKlinik: kodeKlinik
+      });
+      
+      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 = (status: string) => {
+    // Auto-generate sequential patient ID
+    generatePatientId.value = generateSequentialPatientId();
+    generateStatus.value = status;
+    // Use first klinik if none selected
+    if (!selectedKlinik.value && klinikOptions.value.length > 0) {
+      selectedKlinik.value = klinikOptions.value[0].value;
+    }
+    generateQRCode();
+  };
+  
+  // Generate QR Code function
+  const generateQRCode = async () => {
+    // Auto-generate patient ID if empty
+    if (!generatePatientId.value) {
+      generatePatientId.value = generateSequentialPatientId();
+    }
+    
+    if (!selectedKlinik.value) {
+      showSnackbar('Error', 'Mohon pilih Klinik/Poli', '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 klinikCode = selectedKlinik.value || 'UNKNOWN';
+        const fileName = `QR-Test-${klinikCode}-${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');
+        const klinikCode = selectedKlinik.value || 'UNKNOWN';
+        link.download = `QR-Test-${klinikCode}-${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 klinikCode = selectedKlinik.value || 'UNKNOWN';
+        const file = new File([blob], `QR-Test-${klinikCode}-${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');
+    }
+  };
+  
+  // 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 = [];
+        }
+      }
+    }
+  };
+  
+  const saveToHistory = (item: {
+    patientId: string;
+    queueNumber?: string;
+    status: string;
+    checkInTime: string;
+    checkInDate: string;
+    method: string;
+    kodeKlinik?: string;
+  }) => {
+    // Generate queue number based on klinik code if not provided
+    let queueNumber = item.queueNumber;
+    if (!queueNumber && item.kodeKlinik) {
+      queueNumber = generateSequentialQueueNumber(item.kodeKlinik);
+    } else if (!queueNumber) {
+      // Fallback to default if no klinik code
+      queueNumber = `ANT-${Date.now()}`;
+    }
+    
+    const historyItem = {
+      ...item,
+      queueNumber: queueNumber,
+    };
+    
+    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'
+    });
+  };
+  
+  // Statistics computed properties
+  const statsToday = computed(() => {
+    const today = new Date();
+    const todayStr = today.toISOString().split('T')[0]; // YYYY-MM-DD
+    
+    return checkInHistory.value.filter(item => {
+      const itemDate = new Date(item.checkInDate || item.checkInTime);
+      const itemDateStr = itemDate.toISOString().split('T')[0];
+      return itemDateStr === todayStr;
+    }).length;
+  });
+  
+  const statsCompleted = computed(() => {
+    return checkInHistory.value.filter(item => {
+      return item.status === 'success' || item.status === 'ALLOWED';
+    }).length;
+  });
+  
+  const statsWaiting = computed(() => {
+    return checkInHistory.value.filter(item => {
+      return item.status === 'NOT_ALLOWED' || item.status === 'pending' || item.status === 'failed';
+    }).length;
+  });
+  
+  // 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;
+  }
+  
+  .no-scroll-container {
+    height: 100vh;
+    max-height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  
+  .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;
+  }
+  
+  .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;
+    height: 100%;
+  }
+  
+  /* Two-column layout styling */
+  .checkin-layout {
+    gap: 0;
+  }
+  
+  .checkin-left-col {
+    padding-right: 16px;
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+  }
+  
+  .checkin-right-col {
+    padding-left: 16px;
+  }
+  
+  @media (max-width: 959px) {
+    .checkin-left-col {
+      border-right: none;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      padding-right: 0;
+      padding-bottom: 24px;
+      margin-bottom: 24px;
+    }
+    
+    .checkin-right-col {
+      padding-left: 0;
+      padding-top: 24px;
+    }
+  }
+  
+  @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 {
+    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;
+  }
+  
+  .qr-reader-container {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    position: relative;
+  }
+  
+  .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;
+  }
+  
+  .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;
+    transform: scaleX(-1); /* Mirror effect */
+    -webkit-transform: scaleX(-1); /* Safari support */
+    /* Reduce brightness to prevent overexposure/bloom */
+    filter: brightness(0.75) contrast(1.1);
+    -webkit-filter: brightness(0.75) contrast(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;
+    transform: scaleX(-1); /* Mirror effect */
+    -webkit-transform: scaleX(-1); /* Safari support */
+    /* Reduce brightness to prevent overexposure/bloom */
+    filter: brightness(0.75) contrast(1.1);
+    -webkit-filter: brightness(0.75) contrast(1.1);
+  }
+  
+  .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;
+      transform: scaleX(-1); /* Mirror effect */
+      -webkit-transform: scaleX(-1); /* Safari support */
+      /* Reduce brightness to prevent overexposure/bloom */
+      filter: brightness(0.75) contrast(1.1);
+      -webkit-filter: brightness(0.75) contrast(1.1);
+    }
+    
+    .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;
+      transform: scaleX(-1); /* Mirror effect */
+      -webkit-transform: scaleX(-1); /* Safari support */
+      /* Reduce brightness to prevent overexposure/bloom */
+      filter: brightness(0.75) contrast(1.1);
+      -webkit-filter: brightness(0.75) contrast(1.1);
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/pages/CheckInPasien/checkIn.vue.before-combined.backup b/pages/CheckInPasien/checkIn.vue.before-combined.backup
new file mode 100644
index 0000000..964886f
--- /dev/null
+++ b/pages/CheckInPasien/checkIn.vue.before-combined.backup
@@ -0,0 +1,3351 @@
+<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">
+                      <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 v-slot: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 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
+                            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="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="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="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('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('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-select
+                            v-model="selectedKlinik"
+                            label="Pilih Klinik/Poli"
+                            :items="klinikOptions"
+                            prepend-inner-icon="mdi-hospital-building"
+                            variant="outlined"
+                            :color="primaryColor"
+                            class="input-modern mb-3"
+                            density="comfortable"
+                            :rules="[v => !!v || 'Klinik/Poli harus dipilih']"
+                            hide-details="auto"
+                            required
+                          ></v-select>
+                          
+                          <v-text-field
+                            v-model="generatePatientId"
+                            label="ID Pasien"
+                            placeholder="Auto-generate: P-00001"
+                            prepend-inner-icon="mdi-identifier"
+                            variant="outlined"
+                            :color="primaryColor"
+                            class="input-modern mb-3"
+                            density="comfortable"
+                            readonly
+                            hint="ID Pasien akan di-generate secara otomatis secara sequential"
+                            persistent-hint
+                            hide-details="auto"
+                          >
+                            <template v-slot:append-inner>
+                              <v-btn
+                                icon
+                                size="small"
+                                variant="text"
+                                @click="generatePatientId = generateSequentialPatientId()"
+                                title="Generate ID Baru"
+                              >
+                                <v-icon size="18">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="!selectedKlinik"
+                            >
+                              <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">{{ statsToday }}</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">{{ statsCompleted }}</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">{{ statsWaiting }}</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>
+            
+            <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="handleInfoAction"
+                  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="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>
+        </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"
+                        variant="text"
+                        color="error"
+                        @click="deleteHistoryItem(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="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>
+                </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';
+import { useMasterStore } from '@/stores/masterStore';
+
+definePageMeta({
+  middleware:['auth'],
+  layout: false,
+})
+
+const masterStore = useMasterStore();
+  
+  
+  // TypeScript declaration for QRCode
+  declare global {
+    interface Window {
+      QRCode: any;
+    }
+  }
+  
+  // --- 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');
+  let autoCloseTimer: ReturnType<typeof setTimeout> | null = null; 
+  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('');
+  const generateStatus = ref('ALLOWED');
+  const generatedQRData = ref('');
+  const selectedKlinik = ref('');
+  const statusOptions = [
+    { title: 'Diizinkan Check-in', value: 'ALLOWED' },
+    { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
+  ];
+  
+  // Get klinik list for dropdown
+  const klinikOptions = computed(() => {
+    const klinikList = masterStore.klinikList.map((k: { kode: string; nama: string }) => ({
+      title: `${k.kode} - ${k.nama}`,
+      value: k.kode
+    }));
+    
+    // Tambahkan opsi "UM" (Umum) di awal list
+    return [
+      { title: 'UM - Umum', value: 'UM' },
+      ...klinikList
+    ];
+  });
+  
+  // Sequential Patient ID Management
+  const PATIENT_ID_STORAGE_KEY = 'checkin_patient_id_counter';
+  const QUEUE_NUMBER_STORAGE_KEY = 'checkin_queue_number_counters';
+  
+  // Generate sequential patient ID (P-00001, P-00002, etc.)
+  const generateSequentialPatientId = (): string => {
+    if (typeof window === 'undefined') return 'P-00001';
+    
+    let counter = parseInt(localStorage.getItem(PATIENT_ID_STORAGE_KEY) || '0', 10);
+    counter += 1;
+    localStorage.setItem(PATIENT_ID_STORAGE_KEY, counter.toString());
+    
+    return `P-${String(counter).padStart(5, '0')}`;
+  };
+  
+  // Generate sequential queue number based on klinik code (AN-0001, AS-0001, etc.)
+  const generateSequentialQueueNumber = (kodeKlinik: string): string => {
+    if (typeof window === 'undefined') return `${kodeKlinik}-0001`;
+    
+    const counters = JSON.parse(localStorage.getItem(QUEUE_NUMBER_STORAGE_KEY) || '{}');
+    let counter = parseInt(counters[kodeKlinik] || '0', 10);
+    counter += 1;
+    counters[kodeKlinik] = counter;
+    localStorage.setItem(QUEUE_NUMBER_STORAGE_KEY, JSON.stringify(counters));
+    
+    return `${kodeKlinik}-${String(counter).padStart(4, '0')}`;
+  };
+  
+  
+  const snackbar = ref({
+    show: false,
+    title: '',
+    message: '',
+    color: '',
+    icon: '',
+    timeout: 4000,
+  });
+  
+  // 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: 1920, min: 1280 },
+          height: { ideal: 1080, min: 720 }
+        } 
+      });
+      
+      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;
+        
+        // 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 dioptimalkan untuk kualitas tinggi
+        const baseVideoConstraints = isMobile.value
+          ? {
+              facingMode: "environment",
+              width: { ideal: 1280, min: 640, max: 1920 },
+              height: { ideal: 720, min: 480, max: 1080 }
+            }
+          : {
+              facingMode: "user",
+              width: { ideal: 1920, min: 1280, max: 1920 },
+              height: { ideal: 1080, min: 720, max: 1080 }
+            };
+        
+        // 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 ? 30 : 30, // FPS tinggi untuk deteksi lebih baik dan smooth
+              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: 30,
+                  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: 1280, min: 640, max: 1920 },
+                    height: { ideal: 720, min: 480, max: 1080 }
+                  },
+                  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: 30,
+                    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 ? 1280 : 1920, min: isMobile.value ? 640 : 1280, max: isMobile.value ? 1920 : 1920 },
+                      height: { ideal: isMobile.value ? 720 : 1080, min: isMobile.value ? 480 : 720, max: isMobile.value ? 1080 : 1080 }
+                    },
+                    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 () => {
+    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;
+    }
+  };
+  
+  const handleQRScanSuccess = (decodedText: string) => {
+    console.log('🎯 QR Scan Success! Data:', decodedText);
+    
+    // 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 and initialize patient ID
+  onMounted(() => {
+    if (typeof window !== 'undefined') {
+      // Initialize patient ID if empty
+      if (!generatePatientId.value) {
+        generatePatientId.value = generateSequentialPatientId();
+      }
+      
+      // Set default klinik if available
+      if (!selectedKlinik.value && klinikOptions.value.length > 0) {
+        selectedKlinik.value = klinikOptions.value[0].value;
+      }
+      
+      // Check camera availability
+      if (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;
+      }
+    } else {
+      hasCamera.value = false;
+      cameraChecking.value = false;
+    }
+  });
+  
+  // Cleanup saat component unmount
+  onUnmounted(() => {
+    if (html5QrCode && isScanning.value) {
+      stopScanning();
+    }
+    // Clear auto-close timer jika ada
+    if (autoCloseTimer) {
+      clearTimeout(autoCloseTimer);
+      autoCloseTimer = null;
+    }
+  });
+  
+  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;
+      }
+      
+      // Extract kode klinik from patient ID if available (format: P-00001 or from context)
+      // For now, we'll try to get it from the selected klinik or use a default
+      let kodeKlinik = selectedKlinik.value || '';
+      
+      // If no klinik selected, try to infer from context or use first available
+      if (!kodeKlinik && klinikOptions.value.length > 0) {
+        kodeKlinik = klinikOptions.value[0].value;
+      }
+      
+      // 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
+          };
+          
+          // Generate queue number based on klinik
+          const queueNumber = kodeKlinik ? generateSequentialQueueNumber(kodeKlinik) : undefined;
+          
+          // Simpan ke history check-in dengan status hasil check-in
+          saveToHistory({
+              patientId: patientId || 'Unknown',
+              queueNumber: queueNumber,
+              status: checkinSuccess ? 'success' : 'failed',
+              checkInTime: new Date().toISOString(),
+              checkInDate: new Date().toISOString(),
+              method: 'QR Scan',
+              kodeKlinik: kodeKlinik
+          });
+          
+          // 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
+          };
+          
+          // Extract kode klinik (same as above)
+          let kodeKlinik = selectedKlinik.value || '';
+          if (!kodeKlinik && klinikOptions.value.length > 0) {
+            kodeKlinik = klinikOptions.value[0].value;
+          }
+          
+          // 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',
+              kodeKlinik: kodeKlinik
+          });
+          
+          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 () => {
+      // Clear auto-close timer jika ada
+      if (autoCloseTimer) {
+        clearTimeout(autoCloseTimer);
+        autoCloseTimer = null;
+      }
+      
+      infoDialog.value = false;
+      
+      // Scanner tetap berjalan setelah dialog ditutup
+      // Ini memungkinkan user untuk segera memproses QR code berikutnya
+      // tanpa perlu memulai scanner lagi
+  };
+  
+  // Watch infoDialog untuk auto-close setelah 3 detik
+  watch(infoDialog, (isOpen: boolean) => {
+    // Clear timer yang ada jika dialog ditutup
+    if (autoCloseTimer) {
+      clearTimeout(autoCloseTimer);
+      autoCloseTimer = null;
+    }
+    
+    // Jika dialog dibuka, set timer untuk auto-close setelah 3 detik
+    if (isOpen) {
+      autoCloseTimer = setTimeout(() => {
+        infoDialog.value = false;
+        autoCloseTimer = null;
+      }, 5000); // 5   detik
+    }
+  });
+  
+  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;
+    }
+  
+    // Get kode klinik (use first available if none selected)
+    let kodeKlinik = selectedKlinik.value || '';
+    if (!kodeKlinik && klinikOptions.value.length > 0) {
+      kodeKlinik = klinikOptions.value[0].value;
+    }
+    
+    // Simulasi check-in manual
+    const success = await performCheckIn(`${manualInput.value}|ALLOWED`);
+    
+    if (success) {
+      // Generate queue number
+      const queueNumber = kodeKlinik ? generateSequentialQueueNumber(kodeKlinik) : undefined;
+      
+      // Save to history
+      saveToHistory({
+        patientId: manualInput.value,
+        queueNumber: queueNumber,
+        status: 'success',
+        checkInTime: new Date().toISOString(),
+        checkInDate: new Date().toISOString(),
+        method: 'Manual Input',
+        kodeKlinik: kodeKlinik
+      });
+      
+      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 = (status: string) => {
+    // Auto-generate sequential patient ID
+    generatePatientId.value = generateSequentialPatientId();
+    generateStatus.value = status;
+    // Use first klinik if none selected
+    if (!selectedKlinik.value && klinikOptions.value.length > 0) {
+      selectedKlinik.value = klinikOptions.value[0].value;
+    }
+    generateQRCode();
+  };
+  
+  // Generate QR Code function
+  const generateQRCode = async () => {
+    // Auto-generate patient ID if empty
+    if (!generatePatientId.value) {
+      generatePatientId.value = generateSequentialPatientId();
+    }
+    
+    if (!selectedKlinik.value) {
+      showSnackbar('Error', 'Mohon pilih Klinik/Poli', '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 klinikCode = selectedKlinik.value || 'UNKNOWN';
+        const fileName = `QR-Test-${klinikCode}-${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');
+        const klinikCode = selectedKlinik.value || 'UNKNOWN';
+        link.download = `QR-Test-${klinikCode}-${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 klinikCode = selectedKlinik.value || 'UNKNOWN';
+        const file = new File([blob], `QR-Test-${klinikCode}-${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');
+    }
+  };
+  
+  // 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 = [];
+        }
+      }
+    }
+  };
+  
+  const saveToHistory = (item: {
+    patientId: string;
+    queueNumber?: string;
+    status: string;
+    checkInTime: string;
+    checkInDate: string;
+    method: string;
+    kodeKlinik?: string;
+  }) => {
+    // Generate queue number based on klinik code if not provided
+    let queueNumber = item.queueNumber;
+    if (!queueNumber && item.kodeKlinik) {
+      queueNumber = generateSequentialQueueNumber(item.kodeKlinik);
+    } else if (!queueNumber) {
+      // Fallback to default if no klinik code
+      queueNumber = `ANT-${Date.now()}`;
+    }
+    
+    const historyItem = {
+      ...item,
+      queueNumber: queueNumber,
+    };
+    
+    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'
+    });
+  };
+  
+  // Statistics computed properties
+  const statsToday = computed(() => {
+    const today = new Date();
+    const todayStr = today.toISOString().split('T')[0]; // YYYY-MM-DD
+    
+    return checkInHistory.value.filter(item => {
+      const itemDate = new Date(item.checkInDate || item.checkInTime);
+      const itemDateStr = itemDate.toISOString().split('T')[0];
+      return itemDateStr === todayStr;
+    }).length;
+  });
+  
+  const statsCompleted = computed(() => {
+    return checkInHistory.value.filter(item => {
+      return item.status === 'success' || item.status === 'ALLOWED';
+    }).length;
+  });
+  
+  const statsWaiting = computed(() => {
+    return checkInHistory.value.filter(item => {
+      return item.status === 'NOT_ALLOWED' || item.status === 'pending' || item.status === 'failed';
+    }).length;
+  });
+  
+  // 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;
+  }
+  
+  .no-scroll-container {
+    height: 100vh;
+    max-height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  
+  .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;
+  }
+  
+  .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 {
+    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;
+  }
+  
+  .qr-reader-container {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    position: relative;
+  }
+  
+  .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;
+  }
+  
+  .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;
+    transform: scaleX(-1); /* Mirror effect */
+    -webkit-transform: scaleX(-1); /* Safari support */
+    /* Reduce brightness to prevent overexposure/bloom */
+    filter: brightness(0.75) contrast(1.1);
+    -webkit-filter: brightness(0.75) contrast(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;
+    transform: scaleX(-1); /* Mirror effect */
+    -webkit-transform: scaleX(-1); /* Safari support */
+    /* Reduce brightness to prevent overexposure/bloom */
+    filter: brightness(0.75) contrast(1.1);
+    -webkit-filter: brightness(0.75) contrast(1.1);
+  }
+  
+  .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;
+      transform: scaleX(-1); /* Mirror effect */
+      -webkit-transform: scaleX(-1); /* Safari support */
+      /* Reduce brightness to prevent overexposure/bloom */
+      filter: brightness(0.75) contrast(1.1);
+      -webkit-filter: brightness(0.75) contrast(1.1);
+    }
+    
+    .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;
+      transform: scaleX(-1); /* Mirror effect */
+      -webkit-transform: scaleX(-1); /* Safari support */
+      /* Reduce brightness to prevent overexposure/bloom */
+      filter: brightness(0.75) contrast(1.1);
+      -webkit-filter: brightness(0.75) contrast(1.1);
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/pages/MonitoringPasien/monitoringPasien.vue b/pages/MonitoringPasien/monitoringPasien.vue
index 2fe1497..e520982 100644
--- a/pages/MonitoringPasien/monitoringPasien.vue
+++ b/pages/MonitoringPasien/monitoringPasien.vue
@@ -1,27 +1,43 @@
 <template>
-    <v-container fluid class="pa-0">
-    
-    <div class="pa-4 pb-0"> 
-      <v-toolbar flat color="#B3E5FC" class="floating-toolbar custom-padding"> <v-toolbar-title class="text-h6 font-weight-bold text-blue-darken-3">
-          <v-icon left class="mr-2" color="blue-darken-3">mdi-heart-pulse</v-icon>
-          Monitoring Pasien
-        </v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-chip color="blue-darken-1" text-color="white" class="font-weight-medium admin-chip"> <v-icon start>mdi-account-tie</v-icon>
-          Admin
-        </v-chip>
-      </v-toolbar>
-    </div>
+  <v-container>
+    <v-card>
+      <!-- Header -->
+      <div class="page-header">
+        <div class="header-content">
+          <div class="header-left">
+            <div class="header-icon">
+              <v-icon size="32" color="white">mdi-heart-pulse</v-icon>
+            </div>
+            <div class="header-text">
+              <h2 class="page-title">Monitoring Pasien</h2>
+              <p class="page-subtitle">{{ currentDate }} - Manajemen Data Pasien</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>
+              {{ totalCount }} Total
+            </v-chip>
+            <v-chip color="white" variant="flat" class="stat-chip mr-2">
+              <v-icon start size="16">mdi-clock-outline</v-icon>
+              {{ waitingCount }} Menunggu
+            </v-chip>
+            <v-chip color="white" variant="flat" class="stat-chip">
+              <v-icon start size="16">mdi-check-circle</v-icon>
+              {{ doneCount }} Selesai
+            </v-chip>
+          </div>
+        </div>
+      </div>
 
-    <v-container class="mt-6">
-
-      <v-card flat class="mb-4">
+      <!-- Tabs -->
+      <v-card-text class="tabs-section">
         <v-tabs
           v-model="activeTab"
           color="primary"
           align-tabs="start"
           show-arrows
-          class="mb-4"
+          class="status-tabs"
         >
           <v-tab value="all" @click="filterByStatus('all')">
             Semua Pasien <v-badge color="grey-lighten-1" :content="totalCount" inline class="ml-2"></v-badge>
@@ -32,56 +48,99 @@
           <v-tab value="Diperiksa Dokter" @click="filterByStatus('Diperiksa Dokter')">
             Diperiksa Dokter <v-badge color="green-lighten-1" :content="examiningCount" inline class="ml-2"></v-badge>
           </v-tab>
-           <v-tab value="Selesai Pelayanan" @click="filterByStatus('Selesai Pelayanan')">
+          <v-tab value="Selesai Pelayanan" @click="filterByStatus('Selesai Pelayanan')">
             Selesai Pelayanan <v-badge color="blue-lighten-1" :content="doneCount" inline class="ml-2"></v-badge>
           </v-tab>
         </v-tabs>
-      </v-card>
-      
-      <v-card class="mb-6 pa-4 elevation-1">
-        <v-row class="align-center">
-          <v-col cols="12" sm="3">
-            <v-text-field label="No. RM" v-model="filters.rm_number" variant="outlined" density="compact" hide-details></v-text-field>
-          </v-col>
-          <!-- <v-col cols="12" sm="3">
-            <v-text-field label="No. Kode QR" v-model="filters.qr_code" variant="outlined" density="compact" hide-details></v-text-field>
-          </v-col> -->
-          <v-col cols="12" sm="2">
-            <v-text-field label="No. Antrean" v-model="filters.queue_number" variant="outlined" density="compact" hide-details type="number"></v-text-field>
-          </v-col>
-          <v-col cols="12" sm="2">
-            <v-select label="Layanan" v-model="filters.service" :items="['Klinik Jiwa', 'Radiologi', 'Fisioterapi', 'Klinik Umum']" variant="outlined" density="compact" hide-details clearable></v-select>
-          </v-col>
-          <v-col cols="12" sm="2">
-            <v-btn color="blue-lighten-1" block height="40" @click="applyFilters">Cari</v-btn>
-          </v-col>
-        </v-row>
-      </v-card>
+      </v-card-text>
 
-      <v-data-table
-        :headers="headers"
-        :items="paginatedPatients" 
-        :items-per-page="10"
-        class="elevation-1"
-        :search="currentSearchTerm" 
-      >
-        <template v-slot:item.status="{ item }">
-          <v-chip :color="getStatusColor(item.status)" size="small" class="font-weight-medium" label>
-            {{ item.status }}
-          </v-chip>
-        </template>
-        <template v-slot:item.aksi="{ item }">
-          <v-btn size="small" color="orange-darken-1" dark @click="viewPatient(item.id)">
-            Lihat
-          </v-btn>
-        </template>
-        <template v-slot:no-data>
-          <v-alert :value="true" color="info" icon="mdi-information-outline">
-            Tidak ada data pasien untuk ditampilkan.
-          </v-alert>
-        </template>
-      </v-data-table>
-    </v-container>
+      <!-- Filter Section -->
+      <v-card-text class="filter-section">
+        <div class="filter-card">
+          <v-row class="align-center">
+            <v-col cols="12" sm="3">
+              <v-text-field 
+                label="No. RM" 
+                v-model="filters.rm_number" 
+                variant="outlined" 
+                density="compact" 
+                hide-details
+                class="input-field"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="2">
+              <v-text-field 
+                label="No. Antrean" 
+                v-model="filters.queue_number" 
+                variant="outlined" 
+                density="compact" 
+                hide-details 
+                type="number"
+                class="input-field"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="2">
+              <v-select 
+                label="Layanan" 
+                v-model="filters.service" 
+                :items="['Klinik Jiwa', 'Radiologi', 'Fisioterapi', 'Klinik Umum']" 
+                variant="outlined" 
+                density="compact" 
+                hide-details 
+                clearable
+                class="input-field"
+              ></v-select>
+            </v-col>
+            <v-col cols="12" sm="2">
+              <v-btn 
+                color="success" 
+                block 
+                height="40" 
+                @click="applyFilters"
+                class="btn-search"
+                variant="flat"
+              >
+                <v-icon left size="18">mdi-magnify</v-icon>
+                Cari
+              </v-btn>
+            </v-col>
+          </v-row>
+        </div>
+      </v-card-text>
+
+      <!-- Table -->
+      <v-card-text>
+        <v-data-table
+          :headers="headers"
+          :items="paginatedPatients" 
+          :items-per-page="10"
+          class="elevation-0 data-table"
+          :search="currentSearchTerm" 
+        >
+          <template v-slot:item.status="{ item }">
+            <v-chip :color="getStatusColor(item.status)" size="small" class="font-weight-medium status-chip" label>
+              {{ item.status }}
+            </v-chip>
+          </template>
+          <template v-slot:item.aksi="{ item }">
+            <v-btn 
+              size="small" 
+              @click="viewPatient(item.id)"
+              class="btn-view"
+              variant="flat"
+            >
+              <v-icon size="16" left>mdi-eye</v-icon>
+              Lihat
+            </v-btn>
+          </template>
+          <template v-slot:no-data>
+            <v-alert :value="true" color="info" icon="mdi-information-outline">
+              Tidak ada data pasien untuk ditampilkan.
+            </v-alert>
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
 
@@ -95,6 +154,14 @@ definePageMeta({
 
 const router = useRouter();
 
+// Get current date formatted
+const currentDate = computed(() => {
+  const date = new Date();
+  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+  const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+  return `${days[date.getDay()]}, ${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
+});
+
 // === STATE MANAGEMENT ===
 const activeTab = ref('all');
 
@@ -224,29 +291,180 @@ const viewPatient = (patientId) => {
 };
 </script>
 
-<style scoped>
-.floating-toolbar {
-  border-radius: 9999px; 
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); 
-  height: 64px !important;
+<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;
 }
 
-/* Jarak PENTING: Tambahkan padding horizontal ke toolbar */
-.floating-toolbar.custom-padding {
-    padding: 0 16px; /* Memberi jarak 16px di kiri dan kanan */
+// ============================================
+// 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);
 }
 
-/* Penyesuaian agar teks dan ikon kontras dengan soft blue background */
-.v-toolbar-title {
-    margin-left: 0 !important; /* Reset default margin */
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  color: $neutral-100;
 }
 
-/* Pastikan chip Admin tidak mepet */
-.admin-chip {
-    margin-right: 0 !important; /* Reset default margin */
+.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;
+}
+
+// ============================================
+// TABS SECTION
+// ============================================
+.tabs-section {
+  padding: 24px 24px 0 24px !important;
+  background: $neutral-100;
+}
+
+.status-tabs {
+  font-family: $font-family-base;
 }
 
 .v-tab.v-tab--selected {
-  font-weight: 600; 
+  font-weight: $font-weight-semibold;
+}
+
+// ============================================
+// FILTER SECTION
+// ============================================
+.filter-section {
+  padding: 24px !important;
+  background: $neutral-100;
+}
+
+.filter-card {
+  background: $neutral-300;
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid $neutral-400;
+}
+
+.input-field {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.btn-search {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+// ============================================
+// DATA TABLE
+// ============================================
+.data-table {
+  font-family: $font-family-base;
+}
+
+.status-chip {
+  font-weight: $font-weight-medium;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.btn-view {
+  background-color: $success-600 !important;
+  color: $neutral-100 !important;
+  text-transform: none;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+// ============================================
+// RESPONSIVE
+// ============================================
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .header-stats {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .filter-card {
+    padding: 16px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/MonitoringPasien/pasien/[id].vue b/pages/MonitoringPasien/pasien/[id].vue
index 2cc8beb..0955d28 100644
--- a/pages/MonitoringPasien/pasien/[id].vue
+++ b/pages/MonitoringPasien/pasien/[id].vue
@@ -1,30 +1,44 @@
 <template>
-  <v-container fluid class="pa-0">
+  <v-container>
+    <v-card>
+      <!-- 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-details</v-icon>
+            </div>
+            <div class="header-text">
+              <h2 class="page-title">Informasi Pasien</h2>
+              <p class="page-subtitle">{{ currentDate }} - Detail Data Pasien</p>
+            </div>
+          </div>
+          <div class="header-stats">
+            <v-chip 
+              v-if="patient.status"
+              color="white" 
+              variant="flat" 
+              class="stat-chip mr-2"
+            >
+              <v-icon start size="16">mdi-progress-check</v-icon>
+              {{ patient.status }}
+            </v-chip>
+            <v-btn 
+              color="white" 
+              elevation="0"
+              class="btn-back"
+              @click="$router.go(-1)"
+            >
+              <v-icon left size="20">mdi-arrow-left</v-icon>
+              Kembali
+            </v-btn>
+          </div>
+        </div>
+      </div>
 
-    <div class="pa-4 pb-0"> 
-      <v-toolbar flat color="#B3E5FC" class="floating-toolbar custom-padding"> 
-        <v-toolbar-title class="text-h6 font-weight-bold text-blue-darken-3">
-          <v-icon left class="mr-2" color="blue-darken-3">mdi-account-details</v-icon>
-          Informasi Pasien
-        </v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn
-            color="orange-darken-1"
-            dark
-            variant="flat"
-            size="small"
-            @click="$router.go(-1)"
-            prepend-icon="mdi-arrow-left"
-            class="admin-chip" 
-        >
-            Kembali
-        </v-btn>
-      </v-toolbar>
-    </div>
-
-    <v-container class="mt-6">
-      
-      <v-card class="mb-6 pa-6 elevation-4 rounded-lg" color="white">
+      <!-- Content -->
+      <v-card-text class="content-section">
+        <v-card class="mb-6 patient-info-card" elevation="0">
         <v-row class="align-center mb-4">
             <v-col cols="12" md="8">
                 <div class="d-flex align-center mb-2">
@@ -42,15 +56,9 @@
                     </div>
                 </div>
             </v-col>
-            <v-col cols="12" md="4" class="d-flex justify-md-end">
-                <v-chip :color="patient.status === 'Aktif' ? 'green-darken-1' : 'grey-darken-1'" size="x-large" class="font-weight-bold px-6 py-2">
-                    <v-icon start>mdi-progress-check</v-icon> 
-                    Status: {{ patient.status }}
-                </v-chip>
-            </v-col>
         </v-row>
         
-        <v-divider class="my-4"></v-divider>
+        <v-divider class="my-4" />
 
         <v-row>
           <v-col cols="12" sm="6" md="4" class="py-1">
@@ -84,17 +92,17 @@
       </v-card>
       
       
-      <h2 class="text-h5 mb-4 font-weight-bold text-blue-darken-3">Tiket Pelayanan Aktif</h2>
+        <h2 class="section-title">Tiket Pelayanan Aktif</h2>
       
       <v-row class="ticket-row">
         
         <v-col 
+            v-for="ticket in patient.activeTickets" 
+            :key="ticket.title"
             cols="12" 
             sm="6"    
             md="4"   
-            lg="3"    
-            v-for="ticket in patient.activeTickets" 
-            :key="ticket.title"
+            lg="3"
         >
           <MonitorPasienTicketCard 
             :title="ticket.title" 
@@ -105,24 +113,33 @@
         </v-col>
         
         <v-col v-if="!patient.activeTickets || patient.activeTickets.length === 0" cols="12">
-            <v-card class="pa-6 text-center" variant="tonal" color="grey-lighten-2">
-                <v-icon size="48" color="grey">mdi-ticket-off-outline</v-icon>
-                <div class="text-subtitle-1 text-grey-darken-1 mt-2">Pasien ini tidak memiliki tiket pelayanan aktif saat ini.</div>
-            </v-card>
+          <v-card class="empty-ticket-card" elevation="0">
+            <v-icon size="48" color="grey">mdi-ticket-off-outline</v-icon>
+            <div class="empty-text">Pasien ini tidak memiliki tiket pelayanan aktif saat ini.</div>
+          </v-card>
         </v-col>
         
       </v-row>
-    </v-container>
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 
 definePageMeta({
   middleware:['auth']
 })
+
+// Get current date formatted
+const currentDate = computed(() => {
+  const date = new Date();
+  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+  const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+  return `${days[date.getDay()]}, ${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
+});
 // ===============================================
 // JSON MOCK DATA STRUCTURE (Tetap sama)
 // ===============================================
@@ -255,44 +272,175 @@ const fetchPatientData = () => {
 onMounted(fetchPatientData);
 </script>
 
-<style scoped>
-/* =============================================== */
-/* FLOATING TOOLBAR STYLES */
-/* =============================================== */
-.floating-toolbar {
-  border-radius: 9999px; 
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); 
-  height: 64px !important;
+<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;
 }
 
-.floating-toolbar.custom-padding {
-    padding: 0 16px; 
+// ============================================
+// 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);
 }
 
-.admin-chip {
-    margin-right: 0 !important; 
-}
-
-/* =============================================== */
-/* TICKET CARD ALIGNMENT STYLES (Fix Tinggi Card) */
-/* =============================================== */
-.ticket-row {
-  /* Mengaktifkan flex container pada row */
+.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;
+}
+
+.btn-back {
+  font-weight: $font-weight-semibold;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-size: 16px;
+  line-height: 24px;
+  color: $success-600 !important;
+}
+
+// ============================================
+// CONTENT SECTION
+// ============================================
+.content-section {
+  padding: 24px !important;
+  background: $neutral-100;
+}
+
+.patient-info-card {
+  background: $neutral-300;
+  padding: 24px;
+  border-radius: 12px;
+  border: 1px solid $neutral-400;
+  margin-bottom: 24px;
+}
+
+.section-title {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: $font-weight-semibold;
+  color: $success-600;
+  margin-bottom: 16px;
+}
+
+// ============================================
+// TICKET ROW
+// ============================================
+.ticket-row {
   display: flex;
-  /* Agar item (v-col) menyesuaikan tinggi item tertinggi */
   align-items: stretch;
 }
 
-/* Pastikan v-col children juga menggunakan full height */
 .ticket-row > .v-col {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
-/* =============================================== */
-/* TIMELINE STYLES (Jika ada) */
-/* =============================================== */
-.v-timeline-item {
-    padding-bottom: 8px !important;
+.empty-ticket-card {
+  background: $neutral-300;
+  padding: 48px 24px;
+  border-radius: 12px;
+  text-align: center;
+  border: 1px solid $neutral-400;
+}
+
+.empty-text {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: $font-weight-regular;
+  color: $neutral-700;
+  margin-top: 16px;
+}
+
+// ============================================
+// RESPONSIVE
+// ============================================
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .header-stats {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .patient-info-card {
+    padding: 16px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/Setting/HakAkses.vue b/pages/Setting/HakAkses.vue
index 04f6bcb..2d91378 100644
--- a/pages/Setting/HakAkses.vue
+++ b/pages/Setting/HakAkses.vue
@@ -45,74 +45,22 @@
         </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>
-            <v-select
-              v-model="selectedUserId"
-              :items="availableUsers"
-              item-title="namaLengkap"
-              item-value="id"
-              placeholder="Pilih User untuk auto-fill data"
-              variant="outlined"
+          <v-col cols="12">
+            <v-alert 
+              type="info" 
+              variant="tonal" 
               density="comfortable"
-              class="mt-1"
-              @update:model-value="fillUserData"
-              clearable
+              class="mb-4"
             >
-              <template v-slot:item="{ props, item }">
-                <v-list-item v-bind="props" :title="`${item.raw.namaLengkap} (${item.raw.namaUser})`" :subtitle="item.raw.tipeUser"></v-list-item>
-              </template>
-            </v-select>
+              <v-alert-title>Group-Based Access</v-alert-title>
+              Hak akses akan diberikan ke semua user yang memiliki group dan role yang dipilih. 
+              Setiap user dapat memiliki multiple hak akses dari berbagai group.
+            </v-alert>
           </v-col>
         </v-row>
         <v-row>
-          <v-col cols="12" md="3">
-            <v-label class="font-weight-bold text-medium-emphasis">User ID</v-label>
-            <v-text-field
-              v-model="editedItem.userId"
-              placeholder="User ID"
-              variant="outlined"
-              density="comfortable"
-              class="mt-1"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" md="3">
-            <v-label class="font-weight-bold text-medium-emphasis">Nama Lengkap</v-label>
-            <v-text-field
-              v-model="editedItem.namaLengkap"
-              placeholder="Nama Lengkap"
-              variant="outlined"
-              density="comfortable"
-              class="mt-1"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" md="3">
-            <v-label class="font-weight-bold text-medium-emphasis">Nama User</v-label>
-            <v-text-field
-              v-model="editedItem.namaUser"
-              placeholder="Nama User"
-              variant="outlined"
-              density="comfortable"
-              class="mt-1"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" md="3">
-            <v-label class="font-weight-bold text-medium-emphasis">Tipe User</v-label>
-            <v-select
-              v-model="selectedTipeUser"
-              :items="availableTipeUsers"
-              placeholder="Pilih Tipe User"
-              variant="outlined"
-              density="comfortable"
-              class="mt-1"
-              @update:model-value="fillUserDataByTipeUser"
-              clearable
-            ></v-select>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12" md="4">
-            <v-label class="font-weight-bold text-medium-emphasis">Role</v-label>
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold text-medium-emphasis">Role <span class="text-error">*</span></v-label>
             <v-select
               v-model="editedItem.role"
               :items="availableRoles"
@@ -120,20 +68,54 @@
               variant="outlined"
               density="comfortable"
               class="mt-1"
+              required
             ></v-select>
           </v-col>
-          <v-col cols="12" md="4">
-            <v-label class="font-weight-bold text-medium-emphasis">Group</v-label>
+          <v-col cols="12" md="6">
+            <v-label class="font-weight-bold text-medium-emphasis">Group <span class="text-error">*</span></v-label>
             <v-select
-              v-model="editedItem.group"
-              :items="availableGroups"
+              v-model="selectedGroup"
+              :items="availableGroupPaths"
+              item-title="label"
+              item-value="value"
               placeholder="Pilih Group"
               variant="outlined"
               density="comfortable"
               class="mt-1"
-            ></v-select>
+              required
+              @update:model-value="onGroupSelected"
+            >
+              <template v-slot:item="{ props, item }">
+                <v-list-item v-bind="props" :title="item.raw.label" :subtitle="item.raw.path"></v-list-item>
+              </template>
+            </v-select>
+            <div v-if="selectedGroupUsers.length > 0" class="mt-2">
+              <v-chip size="small" color="info" class="mr-1 mb-1">
+                {{ selectedGroupUsers.length }} user akan mendapatkan hak akses ini
+              </v-chip>
+            </div>
           </v-col>
-          <v-col cols="12" md="4">
+        </v-row>
+        <v-row v-if="selectedGroupUsers.length > 0">
+          <v-col cols="12">
+            <v-label class="font-weight-bold text-medium-emphasis mb-2">User yang akan mendapatkan hak akses:</v-label>
+            <v-card variant="outlined" class="pa-3">
+              <div class="d-flex flex-wrap gap-2">
+                <v-chip 
+                  v-for="user in selectedGroupUsers" 
+                  :key="user.id"
+                  size="small"
+                  color="primary"
+                  variant="tonal"
+                >
+                  {{ user.namaLengkap || user.namaUser }} ({{ user.namaUser }})
+                </v-chip>
+              </div>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12" md="6">
             <v-label class="font-weight-bold text-medium-emphasis">Nama Tipe User (Optional)</v-label>
             <v-text-field
               v-model="editedItem.namaTipeUser"
@@ -423,35 +405,23 @@
           </v-col>
         </v-row>
         <v-row>
-          <v-col cols="12" md="4">
-            <v-label class="font-weight-bold text-medium-emphasis">Role</v-label>
-            <v-text-field
-              v-model="editedItem.role"
-              variant="outlined"
-              density="comfortable"
-              class="mt-1"
-              readonly
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" md="4">
-            <v-label class="font-weight-bold text-medium-emphasis">Group</v-label>
-            <v-text-field
-              v-model="editedItem.group"
-              variant="outlined"
-              density="comfortable"
-              class="mt-1"
-              readonly
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" md="4">
-            <v-label class="font-weight-bold text-medium-emphasis">Nama Tipe User</v-label>
-            <v-text-field
-              v-model="editedItem.namaTipeUser"
-              variant="outlined"
-              density="comfortable"
-              class="mt-1"
-              readonly
-            ></v-text-field>
+          <v-col cols="12">
+            <v-label class="font-weight-bold text-medium-emphasis mb-2">Hak Akses (Multiple Groups)</v-label>
+            <v-card variant="outlined" class="pa-3">
+              <div class="d-flex flex-wrap gap-2">
+                <v-chip 
+                  v-for="(hakAkses, idx) in viewModeHakAksesList" 
+                  :key="idx"
+                  size="small"
+                  color="primary"
+                  variant="tonal"
+                >
+                  <v-icon start size="14">mdi-account-group</v-icon>
+                  {{ hakAkses.group }} / {{ hakAkses.role }}
+                </v-chip>
+                <span v-if="viewModeHakAksesList.length === 0" class="text-grey">Tidak ada hak akses</span>
+              </div>
+            </v-card>
           </v-col>
         </v-row>
         <v-row>
@@ -589,20 +559,7 @@
 
           <!-- Filter bar -->
           <v-row class="mb-4" dense>
-            <v-col cols="12" sm="3">
-              <v-select
-                v-model="filterUserId"
-                :items="filterUserIdOptions"
-                item-title="label"
-                item-value="value"
-                label="Filter User ID"
-                variant="outlined"
-                density="compact"
-                clearable
-                hide-details
-              />
-            </v-col>
-            <v-col cols="12" sm="3">
+            <v-col cols="12" sm="4">
               <v-select
                 v-model="filterTipeUser"
                 :items="availableTipeUsers"
@@ -613,7 +570,7 @@
                 hide-details
               />
             </v-col>
-            <v-col cols="12" sm="3">
+            <v-col cols="12" sm="4">
               <v-select
                 v-model="filterRole"
                 :items="availableRoles"
@@ -624,7 +581,7 @@
                 hide-details
               />
             </v-col>
-            <v-col cols="12" sm="3">
+            <v-col cols="12" sm="4">
               <v-select
                 v-model="filterGroup"
                 :items="availableGroups"
@@ -670,10 +627,10 @@
               <div class="text-center">{{ item.id }}</div>
             </template>
 
-            <!-- Tampilkan User ID virtual yang dikelompokkan per tipe user -->
+            <!-- Tampilkan User ID dengan format generated -->
             <template v-slot:item.userId="{ item }">
               <div class="text-center">
-                {{ formatDisplayUserId(item) }}
+                {{ generateDisplayUserId(item) }}
               </div>
             </template>
 
@@ -689,40 +646,30 @@
               <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>
+            <!-- Hak Akses List - menampilkan multiple hak akses per user -->
+            <template v-slot:item.hakAksesList="{ item }">
+              <div class="d-flex flex-wrap gap-1">
+                <v-tooltip
+                  v-for="(hakAkses, idx) in item.hakAksesList"
+                  :key="idx"
+                  location="top"
+                >
+                  <template v-slot:activator="{ props }">
+                    <v-chip
+                      v-bind="props"
+                      :color="hakAkses.isGroupBased ? 'primary' : 'grey'"
+                      size="small"
+                      variant="tonal"
+                      class="mb-1"
+                    >
+                      <v-icon start size="14">{{ hakAkses.isGroupBased ? 'mdi-account-group' : 'mdi-account' }}</v-icon>
+                      {{ hakAkses.group }} / {{ hakAkses.role }}
+                    </v-chip>
+                  </template>
+                  <span>{{ hakAkses.groupPath || hakAkses.group }} - {{ hakAkses.role }}</span>
+                </v-tooltip>
+                <span v-if="item.hakAksesList.length === 0" class="text-grey">-</span>
+              </div>
             </template>
             
             <template v-slot:bottom>
@@ -830,7 +777,7 @@ interface NavItem {
 
 interface HakAksesData {
   id: number;
-  userId?: string;
+  userId?: string; // Optional: untuk backward compatibility dan tracking
   namaLengkap?: string;
   namaUser?: string;
   tipeUser?: string;
@@ -838,6 +785,9 @@ interface HakAksesData {
   group: string;
   namaTipeUser: string;
   hakAksesMenu: HakAksesMenu[];
+  // New: untuk group-based access
+  isGroupBased?: boolean; // Flag untuk membedakan group-based vs individual
+  groupPath?: string; // Full group path untuk matching
 }
 
 interface BackendPermissionItem {
@@ -870,16 +820,14 @@ const navItemsStore = useNavItemsStore();
 const draggableMenus = ref<NavItem[]>([]);
 
 // Data table headers
-// Kolom "No" dan "User ID" di-center agar sejajar dengan isi sel yang juga center
+// Changed to show user with their multiple access rights
 const headers = ref([
   { title: 'No', key: 'id' as const, align: 'center' as const },
   { title: 'User ID', key: 'userId' as const, sortable: true, align: 'center' as const },
   { title: 'Nama Lengkap', key: 'namaLengkap' as const, sortable: true },
   { title: 'Nama User', key: 'namaUser' as const, sortable: true },
   { title: 'Tipe User', key: 'tipeUser' as const, sortable: true },
-  { title: 'Role', key: 'role' as const, sortable: true },
-  { title: 'Group', key: 'group' as const, sortable: true },
-  { title: 'Nama Tipe User', key: 'namaTipeUser' as const, sortable: true },
+  { title: 'Hak Akses', key: 'hakAksesList' as const, sortable: false },
   { title: 'Aksi', align: 'center' as const, key: 'actions' as const, sortable: false },
 ]);
 
@@ -923,9 +871,34 @@ const availableUsers = ref<any[]>([]);
 const availableTipeUsers = ref<string[]>([]);
 const selectedUserId = ref<string | null>(null);
 const selectedTipeUser = ref<string | null>(null);
+const selectedGroup = ref<string | null>(null);
+const selectedGroupUsers = ref<any[]>([]);
 const isFetchingPermissions = ref(false);
 const fetchedBackendData = ref<BackendPermissionItem[]>([]);
 
+// Group paths dengan label yang lebih user-friendly
+const availableGroupPaths = computed(() => {
+  const groupMap = new Map<string, { value: string; label: string; path: string }>();
+  
+  availableUsers.value.forEach((user) => {
+    if (Array.isArray(user.groups)) {
+      user.groups.forEach((groupPath: string) => {
+        if (groupPath && !groupMap.has(groupPath)) {
+          const parts = groupPath.split('/').filter(Boolean);
+          const label = parts.length > 1 ? parts[1] : parts[0] || groupPath;
+          groupMap.set(groupPath, {
+            value: groupPath,
+            label: label,
+            path: groupPath,
+          });
+        }
+      });
+    }
+  });
+  
+  return Array.from(groupMap.values()).sort((a, b) => a.label.localeCompare(b.label));
+});
+
 // --- Menu management logic ---
 const buildMenuTemplate = (items: NavItem[]): HakAksesMenu[] => {
   const result: HakAksesMenu[] = [];
@@ -970,82 +943,98 @@ const showingEntriesText = computed(() => {
 });
 
 // Filter state
-const filterUserId = ref<number | null>(null);
 const filterTipeUser = ref<string | null>(null);
 const filterRole = ref<string | null>(null);
 const filterGroup = ref<string | null>(null);
 
-// Opsi dropdown User ID (pakai ID baris + label User ID virtual)
-const filterUserIdOptions = computed(() =>
-  Array.from(
-    new Map(
-      allHakAksesData.value.map((item) => [
-        item.id,
-        {
-          value: item.id,
-          label: formatDisplayUserId(item),
-        },
-      ]),
-    ).values(),
-  ),
-);
 
-// Data tabel setelah difilter oleh dropdown
+// Group hak akses data by user untuk menampilkan multiple hak akses per user
+const groupedHakAksesByUser = computed(() => {
+  const userMap = new Map<string, {
+    userId: string;
+    namaLengkap: string;
+    namaUser: string;
+    tipeUser: string;
+    hakAksesList: HakAksesData[];
+  }>();
+
+  allHakAksesData.value.forEach((item) => {
+    // Untuk group-based, kita perlu mencari user yang memiliki group tersebut
+    if (item.isGroupBased && item.groupPath) {
+      // Find users with this group
+      const usersWithGroup = availableUsers.value.filter((u: any) => 
+        Array.isArray(u.groups) && u.groups.includes(item.groupPath)
+      );
+      
+      usersWithGroup.forEach((user: any) => {
+        const key = user.id;
+        if (!userMap.has(key)) {
+          userMap.set(key, {
+            userId: user.id,
+            namaLengkap: user.namaLengkap || '',
+            namaUser: user.namaUser || '',
+            tipeUser: user.tipeUser || '',
+            hakAksesList: [],
+          });
+        }
+        const userData = userMap.get(key)!;
+        userData.hakAksesList.push(item);
+      });
+    } else if (item.userId) {
+      // Legacy: individual user access
+      const key = item.userId;
+      if (!userMap.has(key)) {
+        userMap.set(key, {
+          userId: item.userId,
+          namaLengkap: item.namaLengkap || '',
+          namaUser: item.namaUser || '',
+          tipeUser: item.tipeUser || '',
+          hakAksesList: [],
+        });
+      }
+      const userData = userMap.get(key)!;
+      userData.hakAksesList.push(item);
+    }
+  });
+
+  return Array.from(userMap.values()).map((userData, index) => ({
+    id: index + 1,
+    ...userData,
+  }));
+});
+
+// Data tabel setelah difilter oleh dropdown (menggunakan grouped data)
 const filteredHakAksesData = computed(() =>
-  allHakAksesData.value.filter((item) => {
-    const matchUserId = !filterUserId.value || item.id === filterUserId.value;
+  groupedHakAksesByUser.value.filter((item) => {
     const matchTipeUser = !filterTipeUser.value || (item.tipeUser || '') === filterTipeUser.value;
-    const matchRole = !filterRole.value || item.role === filterRole.value;
-    const matchGroup = !filterGroup.value || item.group === filterGroup.value;
-    return matchUserId && matchTipeUser && matchRole && matchGroup;
+    const matchRole = !filterRole.value || 
+      item.hakAksesList.some(ha => ha.role === filterRole.value);
+    const matchGroup = !filterGroup.value || 
+      item.hakAksesList.some(ha => ha.group === filterGroup.value || ha.groupPath === filterGroup.value);
+    return matchTipeUser && matchRole && matchGroup;
   }),
 );
 
-// Generate display User ID grouped by tipeUser
-const getTipeUserCode = (tipeUser?: string): string => {
-  if (!tipeUser) return 'USR';
-
-  const normalized = tipeUser.toLowerCase().trim();
-
-  if (normalized.includes('super') && normalized.includes('admin')) return 'SA';
-  if (normalized === 'admin') return 'ADM';
-  if (normalized.includes('loket')) return 'LOK';
-  if (normalized.includes('klinik')) return 'KLN';
-  if (normalized.includes('barcode')) return 'BAR';
-  if (normalized.includes('inova')) return 'INV';
-  if (normalized.includes('ranap')) return 'RNP';
-  if (normalized.includes('report')) return 'RPT';
-  if (normalized.includes('farmasi')) return 'FRM';
-  if (normalized.includes('manager')) return 'MGR';
-
-  // Default: ambil inisial dari tiap kata, maksimal 3 huruf
-  const initials = normalized
-    .split(/\s+/)
-    .filter(Boolean)
-    .map((w) => w[0]?.toUpperCase() || '')
-    .join('')
-    .slice(0, 3);
-
-  return initials || 'USR';
-};
-
-const formatDisplayUserId = (item: HakAksesData): string => {
-  const tipe = item.tipeUser || 'Unknown';
-  const prefix = getTipeUserCode(tipe);
-
-  // Kelompokkan berdasarkan tipeUser, urut berdasarkan userId untuk konsistensi
-  const sameTypeItems = allHakAksesData.value
-    .filter((i) => (i.tipeUser || 'Unknown') === tipe)
-    .slice()
-    .sort((a, b) => (a.userId || '').localeCompare(b.userId || ''));
-
-  const index = sameTypeItems.findIndex(
-    (i) => i.userId === item.userId && (i.tipeUser || 'Unknown') === tipe
+// Generate display User ID dengan format US-001, US-002, dll
+// Berdasarkan urutan di filteredHakAksesData (bukan user ID asli)
+const generateDisplayUserId = (item: any): string => {
+  if (!item || !item.userId) {
+    return 'US-000';
+  }
+  
+  // Cari index di filteredHakAksesData
+  const index = filteredHakAksesData.value.findIndex(
+    (i) => i.userId === item.userId
   );
-
-  const number = index >= 0 ? index + 1 : sameTypeItems.length + 1;
-
-  return `${prefix}-${String(number).padStart(4, '0')}`;
+  
+  // Jika tidak ditemukan, cari di groupedHakAksesByUser
+  const finalIndex = index >= 0 
+    ? index 
+    : groupedHakAksesByUser.value.findIndex((i) => i.userId === item.userId);
+  
+  const number = finalIndex >= 0 ? finalIndex + 1 : 1;
+  
+  return `US-${String(number).padStart(3, '0')}`;
 };
 
 const formTitle = computed(() => {
@@ -1120,33 +1109,136 @@ const showAddForm = () => {
   viewMode.value = 'add';
 };
 
-const viewItem = (item: HakAksesData) => {
-  editedItem.value = { ...item };
+const viewModeHakAksesList = ref<HakAksesData[]>([]);
+
+const viewItem = (item: any) => {
+  // Item is from groupedHakAksesByUser
+  // For view, we'll show all hak akses for this user
+  // Store the list of hak akses for display
+  viewModeHakAksesList.value = item.hakAksesList || [];
+  
+  if (item.hakAksesList && item.hakAksesList.length > 0) {
+    // Merge all hak akses menus (OR logic - if any access allows, then allow)
+    const baseMenuItems = buildMenuTemplate(navItemsStore.navItems);
+    const mergedMenu: HakAksesMenu[] = baseMenuItems.map(menu => {
+      let canAccess = false;
+      let canView = false;
+      let canAdd = false;
+      let canEdit = false;
+      let canDelete = false;
+      
+      item.hakAksesList.forEach((ha: HakAksesData) => {
+        const haMenu = ha.hakAksesMenu.find(m => m.name === menu.name);
+        if (haMenu) {
+          canAccess = canAccess || haMenu.canAccess;
+          canView = canView || haMenu.canView;
+          canAdd = canAdd || haMenu.canAdd;
+          canEdit = canEdit || haMenu.canEdit;
+          canDelete = canDelete || haMenu.canDelete;
+        }
+      });
+      
+      return {
+        name: menu.name,
+        canAccess,
+        canView,
+        canAdd,
+        canEdit,
+        canDelete,
+      };
+    });
+    
+    editedItem.value = {
+      id: item.id,
+      userId: item.userId,
+      namaLengkap: item.namaLengkap,
+      namaUser: item.namaUser,
+      tipeUser: item.tipeUser,
+      role: '', // Not used in view mode
+      group: '', // Not used in view mode
+      namaTipeUser: item.hakAksesList[0]?.namaTipeUser || '',
+      hakAksesMenu: mergedMenu,
+    };
+  } else {
+    editedItem.value = {
+      id: item.id,
+      userId: item.userId,
+      namaLengkap: item.namaLengkap,
+      namaUser: item.namaUser,
+      tipeUser: item.tipeUser,
+      role: '',
+      group: '',
+      namaTipeUser: '',
+      hakAksesMenu: [],
+    };
+  }
   viewMode.value = 'view';
 };
 
-const editItem = (item: HakAksesData) => {
-  editedIndex.value = allHakAksesData.value.findIndex(d => d.id === item.id);
-  editedItem.value = { ...item };
-  selectedTipeUser.value = item.tipeUser || null;
-  viewMode.value = 'editName';
+const editItem = (item: any) => {
+  // Item is now from groupedHakAksesByUser, so we need to edit the first hak akses or create new
+  // For now, we'll edit the group-based access if it exists
+  if (item.hakAksesList && item.hakAksesList.length > 0) {
+    // Find the group-based access for this user
+    const groupBasedAccess = item.hakAksesList.find((ha: HakAksesData) => ha.isGroupBased);
+    if (groupBasedAccess) {
+      editedIndex.value = allHakAksesData.value.findIndex(d => d.id === groupBasedAccess.id);
+      editedItem.value = { ...groupBasedAccess };
+      selectedGroup.value = groupBasedAccess.groupPath || null;
+      onGroupSelected(selectedGroup.value);
+      viewMode.value = 'editName';
+      return;
+    }
+  }
+  
+  // Fallback: create new access
+  resetForm();
+  viewMode.value = 'add';
 };
 
-const editAccess = (item: HakAksesData) => {
-  editedIndex.value = allHakAksesData.value.findIndex(d => d.id === item.id);
-  const baseMenuItems = buildMenuTemplate(navItemsStore.navItems);
-  const mergedMenuItems = mergePermissions(baseMenuItems, item.hakAksesMenu);
+const editAccess = (item: any) => {
+  // Item is from groupedHakAksesByUser
+  // For edit access, we'll edit all group-based accesses for this user
+  // For simplicity, we'll edit the first one or create new
+  if (item.hakAksesList && item.hakAksesList.length > 0) {
+    const groupBasedAccess = item.hakAksesList.find((ha: HakAksesData) => ha.isGroupBased);
+    if (groupBasedAccess) {
+      editedIndex.value = allHakAksesData.value.findIndex(d => d.id === groupBasedAccess.id);
+      const baseMenuItems = buildMenuTemplate(navItemsStore.navItems);
+      const mergedMenuItems = mergePermissions(baseMenuItems, groupBasedAccess.hakAksesMenu);
 
-  editedItem.value = {
-    ...item,
-    hakAksesMenu: mergedMenuItems
-  };
-  viewMode.value = 'editAccess';
+      editedItem.value = {
+        ...groupBasedAccess,
+        hakAksesMenu: mergedMenuItems
+      };
+      selectedGroup.value = groupBasedAccess.groupPath || null;
+      onGroupSelected(selectedGroup.value);
+      viewMode.value = 'editAccess';
+      return;
+    }
+  }
+  
+  // Fallback
+  resetForm();
+  viewMode.value = 'add';
 };
 
-const deleteItem = (item: HakAksesData) => {
-  editedIndex.value = allHakAksesData.value.findIndex(d => d.id === item.id);
-  showDeleteDialog.value = true;
+const deleteItem = (item: any) => {
+  // Item is from groupedHakAksesByUser
+  // We need to delete all group-based accesses for this user
+  // For now, we'll delete the first group-based access
+  if (item.hakAksesList && item.hakAksesList.length > 0) {
+    const groupBasedAccess = item.hakAksesList.find((ha: HakAksesData) => ha.isGroupBased);
+    if (groupBasedAccess) {
+      editedIndex.value = allHakAksesData.value.findIndex(d => d.id === groupBasedAccess.id);
+      showDeleteDialog.value = true;
+      return;
+    }
+  }
+  
+  // Fallback
+  editedIndex.value = -1;
+  showDeleteDialog.value = false;
 };
 
 const closeDeleteDialog = () => {
@@ -1198,18 +1290,19 @@ const updateItemAccess = (updatedItem: HakAksesData & { backendPermissions?: Bac
 const resetForm = () => {
   editedItem.value = {
     id: 0,
-    userId: '',
-    namaLengkap: '',
-    namaUser: '',
-    tipeUser: '',
     role: '',
     group: '',
+    groupPath: '',
     namaTipeUser: '',
     hakAksesMenu: buildMenuTemplate(navItemsStore.navItems),
+    isGroupBased: true,
   };
   selectedUserId.value = null;
   selectedTipeUser.value = null;
+  selectedGroup.value = null;
+  selectedGroupUsers.value = [];
   fetchedBackendData.value = [];
+  viewModeHakAksesList.value = [];
 };
 
 // Check if a permission is mapped to a menu
@@ -1225,72 +1318,28 @@ const getMappingStatus = (pagename: string): boolean => {
   );
 };
 
-// Fill user data when user is selected by ID
-const fillUserData = (userId: string | null) => {
-  if (!userId) {
-    editedItem.value.userId = '';
-    editedItem.value.namaLengkap = '';
-    editedItem.value.namaUser = '';
-    editedItem.value.tipeUser = '';
-    selectedTipeUser.value = null;
+// Handle group selection
+const onGroupSelected = (groupPath: string | null) => {
+  if (!groupPath) {
+    selectedGroupUsers.value = [];
+    editedItem.value.group = '';
+    editedItem.value.groupPath = '';
     return;
   }
 
-  const user = availableUsers.value.find(u => u.id === userId);
-  if (user) {
-    editedItem.value.userId = user.id;
-    editedItem.value.namaLengkap = user.namaLengkap || '';
-    editedItem.value.namaUser = user.namaUser || '';
-    editedItem.value.tipeUser = user.tipeUser || '';
-    selectedTipeUser.value = user.tipeUser || null;
-    
-    // Auto-fill role and group if available
-    if (user.realmRoles && user.realmRoles.length > 0) {
-      editedItem.value.role = user.realmRoles[0];
-    }
-    if (user.groups && user.groups.length > 0) {
-      const groupPath = user.groups[0];
-      const parts = groupPath.split('/').filter(Boolean);
-      if (parts.length > 1) {
-        editedItem.value.group = parts[1];
-      } else if (parts.length === 1) {
-        editedItem.value.group = parts[0];
-      }
-    }
-  }
+  // Extract group name from path
+  const parts = groupPath.split('/').filter(Boolean);
+  editedItem.value.group = parts.length > 1 ? parts[1] : parts[0] || groupPath;
+  editedItem.value.groupPath = groupPath;
+
+  // Find all users with this group
+  selectedGroupUsers.value = availableUsers.value.filter((u: any) => 
+    Array.isArray(u.groups) && u.groups.includes(groupPath)
+  );
+
+  console.log(`📋 Selected group: ${groupPath}, found ${selectedGroupUsers.value.length} users`);
 };
 
-// Fill user data when tipe user is selected
-const fillUserDataByTipeUser = (tipeUser: string | null) => {
-  if (!tipeUser) {
-    editedItem.value.tipeUser = '';
-    return;
-  }
-
-  editedItem.value.tipeUser = tipeUser;
-  
-  // Find first user with this tipe user and fill their data
-  const user = availableUsers.value.find(u => u.tipeUser === tipeUser);
-  if (user) {
-    editedItem.value.userId = user.id;
-    editedItem.value.namaLengkap = user.namaLengkap || '';
-    editedItem.value.namaUser = user.namaUser || '';
-    
-    // Auto-fill role and group if available
-    if (user.realmRoles && user.realmRoles.length > 0) {
-      editedItem.value.role = user.realmRoles[0];
-    }
-    if (user.groups && user.groups.length > 0) {
-      const groupPath = user.groups[0];
-      const parts = groupPath.split('/').filter(Boolean);
-      if (parts.length > 1) {
-        editedItem.value.group = parts[1];
-      } else if (parts.length === 1) {
-        editedItem.value.group = parts[0];
-      }
-    }
-  }
-};
 
 // Snackbar for notifications
 const snackbar = ref({
@@ -1436,7 +1485,7 @@ const loadAvailableRolesAndGroups = async () => {
           // Extract group name from path (e.g., "/Instalasi STIM/Devops/Superadmin" -> "STIM")
           const parts = g.split('/').filter(Boolean);
           if (parts.length > 1) {
-            groupsSet.add(parts[1]); // Get second part as group name
+            groupsSet.add(parts[1]); // Get second part as group name for filter
           } else if (parts.length === 1) {
             groupsSet.add(parts[0]);
           }
@@ -1455,6 +1504,8 @@ const loadAvailableRolesAndGroups = async () => {
       }
     });
     availableTipeUsers.value = Array.from(tipeUsersSet).sort();
+    
+    console.log(`✅ Loaded ${availableUsers.value.length} users, ${availableRoles.value.length} roles, ${availableGroups.value.length} groups`);
   } catch (error) {
     console.error('Error loading roles and groups:', error);
   }
@@ -1462,7 +1513,7 @@ const loadAvailableRolesAndGroups = async () => {
 
 const saveItem = async () => {
   // Validate required fields
-  if (!editedItem.value.role || !editedItem.value.group) {
+  if (!editedItem.value.role || !selectedGroup.value) {
     snackbar.value = {
       show: true,
       message: 'Role dan Group wajib diisi!',
@@ -1497,51 +1548,65 @@ const saveItem = async () => {
     editedItem.value.hakAksesMenu = buildMenuTemplate(navItemsStore.navItems);
   }
 
-  // Create a clean copy of the item to save
-  const itemToSave: HakAksesData = {
-    id: editedItem.value.id || 0,
-    userId: editedItem.value.userId || '',
-    namaLengkap: editedItem.value.namaLengkap || '',
-    namaUser: editedItem.value.namaUser || '',
-    tipeUser: editedItem.value.tipeUser || '',
-    role: editedItem.value.role,
-    group: editedItem.value.group,
-    namaTipeUser: editedItem.value.namaTipeUser || editedItem.value.tipeUser || '',
-    hakAksesMenu: editedItem.value.hakAksesMenu || [],
-  };
+  // Check if this group+role combination already exists
+  const existingIndex = allHakAksesData.value.findIndex(
+    item => item.isGroupBased && 
+            item.groupPath === editedItem.value.groupPath && 
+            item.role === editedItem.value.role
+  );
 
-  console.log('💾 Saving item:', itemToSave);
-  console.log('📊 Current allHakAksesData length:', allHakAksesData.value.length);
-
-  if (editedIndex.value > -1) {
-    // Edit item
-    allHakAksesData.value[editedIndex.value] = { ...itemToSave };
-    console.log('✅ Item updated at index:', editedIndex.value);
+  if (editedIndex.value > -1 || existingIndex > -1) {
+    // Edit existing group-based access
+    const indexToUpdate = editedIndex.value > -1 ? editedIndex.value : existingIndex;
+    const existingItem = allHakAksesData.value[indexToUpdate];
+    
+    // Update the group-based access entry
+    allHakAksesData.value[indexToUpdate] = {
+      ...existingItem,
+      role: editedItem.value.role,
+      group: editedItem.value.group,
+      groupPath: editedItem.value.groupPath,
+      namaTipeUser: editedItem.value.namaTipeUser || '',
+      hakAksesMenu: editedItem.value.hakAksesMenu || [],
+      isGroupBased: true,
+    };
+    
+    console.log('✅ Group-based access updated at index:', indexToUpdate);
     snackbar.value = {
       show: true,
-      message: 'Data hak akses berhasil diperbarui!',
+      message: `Hak akses untuk group "${editedItem.value.group}" berhasil diperbarui! ${selectedGroupUsers.value.length} user terpengaruh.`,
       color: 'success',
-      timeout: 3000,
+      timeout: 4000,
     };
   } else {
-    // Add item with a new ID
+    // Create new group-based access entry
     const newId = allHakAksesData.value.length > 0 
       ? Math.max(...allHakAksesData.value.map(i => i.id)) + 1 
       : 1;
-    itemToSave.id = newId;
-    allHakAksesData.value.push({ ...itemToSave });
-    console.log('✅ New item added with ID:', newId);
-    console.log('📊 New allHakAksesData length:', allHakAksesData.value.length);
+    
+    const groupBasedAccess: HakAksesData = {
+      id: newId,
+      role: editedItem.value.role,
+      group: editedItem.value.group,
+      groupPath: editedItem.value.groupPath || selectedGroup.value || '',
+      namaTipeUser: editedItem.value.namaTipeUser || '',
+      hakAksesMenu: editedItem.value.hakAksesMenu || [],
+      isGroupBased: true,
+    };
+
+    allHakAksesData.value.push(groupBasedAccess);
+    
+    console.log('✅ New group-based access added with ID:', newId);
+    console.log(`📋 Affected users: ${selectedGroupUsers.value.length}`);
     snackbar.value = {
       show: true,
-      message: 'Data hak akses berhasil ditambahkan!',
+      message: `Hak akses untuk group "${editedItem.value.group}" berhasil ditambahkan! ${selectedGroupUsers.value.length} user mendapatkan hak akses ini.`,
       color: 'success',
-      timeout: 3000,
+      timeout: 4000,
     };
   }
 
   // Force update localStorage by triggering reactivity
-  // useLocalStorage should auto-save, but we ensure it by reassigning
   await nextTick();
   allHakAksesData.value = [...allHakAksesData.value];
   
diff --git a/pages/Setting/UserLogin.vue b/pages/Setting/UserLogin.vue
index 55f55de..c84ee39 100644
--- a/pages/Setting/UserLogin.vue
+++ b/pages/Setting/UserLogin.vue
@@ -222,7 +222,8 @@
           <v-btn
             color="grey-darken-1"
             variant="flat"
-            class="text-capitalize rounded-lg mr-3 px-6"
+            class="text-capitalize mr-3 px-6"
+            rounded="0"
             prepend-icon="mdi-close"
             @click="cancelForm"
             :disabled="isSaving"
@@ -234,7 +235,8 @@
             v-if="!readOnly"
             :color="isEditMode ? 'orange-darken-2' : 'green-darken-2'"
             variant="flat"
-            class="text-capitalize rounded-lg px-6"
+            class="text-capitalize px-6"
+            rounded="0"
             :prepend-icon="isEditMode ? 'mdi-content-save' : 'mdi-check'"
             @click="saveItem"
             :loading="isSaving"
@@ -280,6 +282,7 @@
                 @click="refreshAllUsers"
                 elevation="0"
                 class="add-btn"
+                rounded="0"
                 :disabled="isPending || isSaving"
                 :loading="isSaving"
               >
@@ -451,13 +454,13 @@
             </template>
             
             <template #item.actions="{ item }">
-              <v-btn icon color="blue" size="small" class="mr-2" @click="viewItem(item)">
+              <v-btn icon color="blue" size="small" class="mr-2" rounded="0" @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" rounded="0" @click="editItem(item)">
                 <v-icon>mdi-pencil</v-icon>
               </v-btn> -->
-              <v-btn icon color="red" size="small" @click="deleteItem(item)">
+              <v-btn icon color="red" size="small" rounded="0" @click="deleteItem(item)">
                 <v-icon>mdi-delete</v-icon>
               </v-btn>
             </template>
@@ -494,8 +497,8 @@
         <v-card-title class="text-h6 font-weight-bold">Hapus Data</v-card-title>
         <v-card-text>Apakah Anda yakin ingin menghapus data **{{ itemToDelete?.namaLengkap }}**?</v-card-text>
         <v-card-actions class="d-flex justify-end">
-          <v-btn color="grey-darken-1" variant="text" @click="closeDeleteDialog" :disabled="isSaving">Batal</v-btn>
-          <v-btn color="red" variant="text" @click="confirmDelete" :loading="isSaving">Hapus</v-btn>
+          <v-btn color="grey-darken-1" variant="text" rounded="0" @click="closeDeleteDialog" :disabled="isSaving">Batal</v-btn>
+          <v-btn color="red" variant="text" rounded="0" @click="confirmDelete" :loading="isSaving">Hapus</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/pages/verifikasiAkun/VerifikasiAkun.vue b/pages/verifikasiAkun/VerifikasiAkun.vue
index 3e7b166..9253f17 100644
--- a/pages/verifikasiAkun/VerifikasiAkun.vue
+++ b/pages/verifikasiAkun/VerifikasiAkun.vue
@@ -1,68 +1,78 @@
 <template>
   <v-container>
-    <v-app>
-    <!-- Page Header -->
-    <PageHeader
-      icon="mdi-shield-check"
-      title="Verifikasi Akun"
-      subtitle="Manajemen Pasien Digital"
-      :show-add-button="false"
-      theme="primary"
+    <v-card>
+      <!-- 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-check</v-icon>
+            </div>
+            <div class="header-text">
+              <h2 class="page-title">Verifikasi Akun</h2>
+              <p class="page-subtitle">{{ currentDate }} - Manajemen Pasien Digital</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>
+              {{ patients.length }} User
+            </v-chip>
+            <v-chip color="white" variant="flat" class="stat-chip mr-2">
+              <v-icon start size="16">mdi-clock-alert</v-icon>
+              {{ unverifiedPatients.length }} Pending
+            </v-chip>
+            <v-chip color="white" variant="flat" class="stat-chip">
+              <v-icon start size="16">mdi-check-decagram</v-icon>
+              {{ verifiedPatients.length }} Terverifikasi
+            </v-chip>
+          </div>
+        </div>
+      </div>
+
+      <!-- Search & Content -->
+      <v-card-text class="pa-0">
+        <!-- Search & Tabs -->
+        <VerificationSearchTabs
+          v-model:search-query="search"
+          v-model:selected-tab="filterStatus"
+          :all-count="patients.length"
+          :pending-count="unverifiedPatients.length"
+          :verified-count="verifiedPatients.length"
+        />
+
+        <!-- Patient List -->
+        <PatientVerificationList
+          :patients="filteredPatients"
+          :empty-message="noDataText"
+          @verify="openDaftarModal"
+        />
+      </v-card-text>
+    </v-card>
+
+    <!-- QR Verification Dialog -->
+    <QRVerificationDialog
+      v-model="isModalOpen"
+      v-model:phone-number="tempTelepon"
+      :patient="selectedPatient"
+      :qr-generated="qrCodeGenerated"
+      :is-mobile="display.xs.value"
+      @generate="generateQrCode"
+      @reload="reloadQr"
+      @complete="completeVerification"
+      @close="closeModal"
     >
-      <template #actions>
-        <v-chip color="secondary-600" class="admin-chip" variant="flat" rounded="xl" size="large">
-          <v-icon start color="white">mdi-account-star</v-icon>
-          <span class="chip-text">Admin</span>
-        </v-chip>
+      <template #qr-code>
+        <qrcode-vue 
+          :value="qrCodeData" 
+          :size="qrSize" 
+          level="H" 
+          :foreground="'#FFA532'"
+          :background="'#FFFFFF'"
+          class="qr-code"
+        />
       </template>
-    </PageHeader>
-    
-    <v-main class="main-bg"> 
-      <v-container fluid class="pa-6 pt-8 pb-12">
-        <v-card class="content-card">
-          <!-- Search & Tabs -->
-          <VerificationSearchTabs
-            v-model:search-query="search"
-            v-model:selected-tab="filterStatus"
-            :all-count="patients.length"
-            :pending-count="unverifiedPatients.length"
-            :verified-count="verifiedPatients.length"
-          />
-
-          <!-- Patient List -->
-          <PatientVerificationList
-            :patients="filteredPatients"
-            :empty-message="noDataText"
-            @verify="openDaftarModal"
-          />
-        </v-card>
-
-        <!-- QR Verification Dialog -->
-        <QrVerificationDialog
-          v-model="isModalOpen"
-          :patient="selectedPatient"
-          v-model:phone-number="tempTelepon"
-          :qr-generated="qrCodeGenerated"
-          :is-mobile="display.xs.value"
-          @generate="generateQrCode"
-          @reload="reloadQr"
-          @complete="completeVerification"
-          @close="closeModal"
-        >
-          <template #qr-code>
-            <qrcode-vue 
-              :value="qrCodeData" 
-              :size="qrSize" 
-              level="H" 
-              :foreground="'#0663C7'"
-              :background="'#FFFFFF'"
-              class="qr-code"
-            />
-          </template>
-        </QrVerificationDialog>
-      </v-container>
-    </v-main>
-  </v-app>
+    </QRVerificationDialog>
   </v-container>
 </template>
 
@@ -70,10 +80,9 @@
 import { ref, computed } from 'vue';
 import { useDisplay } from 'vuetify';
 import QrcodeVue from 'qrcode.vue';
-import PageHeader from '@/components/common/PageHeader.vue';
 import VerificationSearchTabs from '@/components/verification/VerificationSearchTabs.vue';
 import PatientVerificationList from '@/components/verification/PatientVerificationList.vue';
-import QrVerificationDialog from '@/components/verification/QrVerificationDialog.vue';
+import QRVerificationDialog from '@/components/verification/QRVerificationDialog.vue';
 
 definePageMeta({
   middleware: ['auth']
@@ -98,6 +107,13 @@ const tempTelepon = ref('');
 const qrCodeGenerated = ref(false);
 
 // Computed
+const currentDate = computed(() => {
+  const now = new Date();
+  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+  const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+  return `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
+});
+
 const noDataText = computed(() => 
   search.value 
     ? 'Tidak ada data pasien yang cocok dengan pencarian.' 
@@ -196,42 +212,121 @@ const completeVerification = () => {
 </script>
 
 <style scoped lang="scss">
-$neutral-100: #FFFFFF;
-$neutral-300: #F5F7FA;
+// Colors from Design System
+$neutral-900: #212121;
+$neutral-800: #4D4D4D;
+$neutral-700: #717171;
+$neutral-600: #89939E;
 $neutral-500: #ABBED1;
-$secondary-600: #0671E0;
+$neutral-400: #E5F7FA;
+$neutral-300: #F5F7FA;
+$neutral-100: #FFFFFF;
+
+// Orange/Primary Colors
+$primary-700: #FF9B1B;
+$primary-600: #FFA532;
+$primary-500: #FFB95F;
+$primary-400: #FFCD8D;
+$primary-300: #FFDCAF;
+$primary-200: #FFE6C6;
+
+$danger-600: #E02B1D;
+
+// Font Family & Weights
 $font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-$font-weight-bold: 700;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
 
-.main-bg {
-  background: $neutral-300;
-  min-height: 100vh;
+// Apply font family
+* {
   font-family: $font-family-base;
 }
 
-.admin-chip {
-  font-weight: $font-weight-bold;
-  padding: 12px 20px;
+// ============================================
+// PAGE HEADER
+// ============================================
+.page-header {
+  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 4px 16px rgba(255, 165, 50, 0.2);
 }
 
-.chip-text {
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
   color: $neutral-100;
-  font-weight: $font-weight-bold;
-  font-family: $font-family-base;
 }
 
-.content-card {
-  background: $neutral-100;
-  border-radius: 12px;
-  padding: 0;
-  margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  overflow: hidden;
-  border: 1px solid $neutral-500;
+.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: $primary-600 !important;
+  font-weight: $font-weight-semibold;
+  font-size: 14px;
+  line-height: 20px;
 }
 
 .qr-code {
   border-radius: 8px;
   display: block;
 }
+
+// ============================================
+// RESPONSIVE
+// ============================================
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .header-stats {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .page-title {
+    font-size: 28px;
+    line-height: 36px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/scripts/db-access.js b/scripts/db-access.js
index 9370c74..c587906 100644
--- a/scripts/db-access.js
+++ b/scripts/db-access.js
@@ -1,14 +1,16 @@
 // Quick database access script
 // Usage: node scripts/db-access.js
 
-const Database = require('better-sqlite3');
-const path = require('path');
-const readline = require('readline');
+import Database from 'better-sqlite3';
+import path from 'path';
+import readline from 'readline';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 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);
diff --git a/scripts/view-db.js b/scripts/view-db.js
new file mode 100644
index 0000000..cb194ad
--- /dev/null
+++ b/scripts/view-db.js
@@ -0,0 +1,73 @@
+// Quick database viewer - shows all content and exits
+// Usage: node scripts/view-db.js
+
+import Database from 'better-sqlite3';
+import path from 'path';
+import fs from 'fs';
+
+const dbPath = path.join(process.cwd(), 'data', 'users.db');
+
+if (!fs.existsSync(dbPath)) {
+  console.error('❌ Database not found at:', dbPath);
+  process.exit(1);
+}
+
+const db = new Database(dbPath);
+
+console.log('📊 Database Content Viewer\n');
+console.log('Database path:', dbPath);
+console.log('='.repeat(80));
+
+// Get all tables
+const tables = db.prepare(`
+  SELECT name FROM sqlite_master 
+  WHERE type='table' AND name NOT LIKE 'sqlite_%'
+`).all();
+
+console.log('\n📋 Available Tables:');
+tables.forEach((table, index) => {
+  console.log(`  ${index + 1}. ${table.name}`);
+});
+
+// Show content for each table
+tables.forEach((table) => {
+  const tableName = table.name;
+  
+  // Get row count
+  const count = db.prepare(`SELECT COUNT(*) as total FROM ${tableName}`).get();
+  
+  console.log('\n' + '='.repeat(80));
+  console.log(`\n📊 Table: ${tableName} (${count.total} rows)`);
+  console.log('-'.repeat(80));
+  
+  // Get table schema
+  const schema = db.prepare(`PRAGMA table_info(${tableName})`).all();
+  console.log('\n📐 Schema:');
+  console.table(schema.map(col => ({
+    column: col.name,
+    type: col.type,
+    nullable: col.notnull === 0 ? 'YES' : 'NO',
+    default: col.dflt_value || '-'
+  })));
+  
+  // Get all data
+  const data = db.prepare(`SELECT * FROM ${tableName}`).all();
+  
+  if (data.length === 0) {
+    console.log('\n📭 No data in this table.');
+  } else {
+    console.log(`\n📄 Data (showing all ${data.length} rows):`);
+    console.table(data);
+    
+    // If there are many rows, also show a summary
+    if (data.length > 10) {
+      console.log(`\n💡 Tip: Showing all ${data.length} rows. Use the interactive script for filtering.`);
+    }
+  }
+});
+
+console.log('\n' + '='.repeat(80));
+console.log('\n✅ Done! Use `node scripts/db-access.js` for interactive queries.\n');
+
+db.close();
+