diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php
index c651d53..fb8f535 100644
--- a/app/Http/Controllers/AdminController.php
+++ b/app/Http/Controllers/AdminController.php
@@ -5,6 +5,7 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\DB;
 use App\Models\User;
 use App\Models\Admin;
 use App\Models\Antrian;
@@ -76,7 +77,7 @@ public function manageUsers(Request $request)
             });
         }
 
-        $users = $query->orderBy('created_at', 'desc')->get();
+        $users = $query->orderBy('created_at', 'desc')->paginate(15);
         return view('admin.users.index', compact('users'));
     }
 
@@ -527,6 +528,119 @@ public function batalAntrian(Request $request)
         }
     }
 
+    public function tambahAntrian()
+    {
+        $polis = Poli::all();
+        return view('admin.antrian.tambah', compact('polis'));
+    }
+
+    public function cariUser(Request $request)
+    {
+        $request->validate([
+            'search' => 'required|string|min:3'
+        ]);
+
+        $users = User::where('nama', 'like', "%{$request->search}%")
+            ->orWhere('no_ktp', 'like', "%{$request->search}%")
+            ->orWhere('no_hp', 'like', "%{$request->search}%")
+            ->limit(10)
+            ->get(['id', 'nama', 'no_ktp', 'no_hp', 'jenis_kelamin', 'alamat']);
+
+        return response()->json([
+            'success' => true,
+            'users' => $users
+        ]);
+    }
+
+    public function storeAntrianAdmin(Request $request)
+    {
+        $request->validate([
+            'user_id' => 'required|exists:users,id',
+            'poli_id' => 'required|exists:polis,id'
+        ]);
+
+        try {
+            DB::beginTransaction();
+
+            $user = User::findOrFail($request->user_id);
+            $poli = Poli::findOrFail($request->poli_id);
+
+            // Check if user already has active queue in this poli today
+            $existingQueue = Antrian::where('user_id', $request->user_id)
+                ->where('poli_id', $request->poli_id)
+                ->whereDate('created_at', today())
+                ->whereIn('status', ['menunggu', 'dipanggil'])
+                ->first();
+
+            if ($existingQueue) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'User ini sudah memiliki antrian aktif di ' . $poli->nama_poli . ' hari ini.'
+                ]);
+            }
+
+            // Get poli prefix
+            $prefix = $this->getPoliPrefix($poli->nama_poli);
+
+            // Get next queue number for the poli
+            $lastQueue = Antrian::where('poli_id', $request->poli_id)
+                ->whereDate('created_at', today())
+                ->orderBy('id', 'desc')
+                ->first();
+
+            // Extract number from last queue (remove prefix)
+            $lastNumber = 0;
+            if ($lastQueue && $lastQueue->no_antrian) {
+                $lastNumber = (int) preg_replace('/^[A-Z]+/', '', $lastQueue->no_antrian);
+            }
+
+            $nextNumber = $lastNumber + 1;
+            $nextQueueNumber = $prefix . $nextNumber;
+
+            // Create new queue
+            $antrian = Antrian::create([
+                'user_id' => $request->user_id,
+                'poli_id' => $request->poli_id,
+                'no_antrian' => $nextQueueNumber,
+                'tanggal_antrian' => now()->toDateString(),
+                'status' => 'menunggu'
+            ]);
+
+            DB::commit();
+
+            return response()->json([
+                'success' => true,
+                'message' => 'Antrian berhasil dibuat untuk ' . $user->nama . ' di ' . $poli->nama_poli . ' dengan nomor ' . $nextQueueNumber,
+                'antrian' => [
+                    'id' => $antrian->id,
+                    'no_antrian' => $nextQueueNumber,
+                    'poli_name' => $poli->nama_poli,
+                    'user_name' => $user->nama,
+                    'status' => 'menunggu'
+                ]
+            ]);
+
+        } catch (\Exception $e) {
+            DB::rollback();
+            return response()->json([
+                'success' => false,
+                'message' => 'Terjadi kesalahan: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+    private function getPoliPrefix($namaPoli)
+    {
+        $prefixMap = [
+            'umum' => 'U',
+            'gigi' => 'G',
+            'kesehatan jiwa' => 'J',
+            'kesehatan tradisional' => 'T'
+        ];
+
+        return $prefixMap[strtolower($namaPoli)] ?? 'A';
+    }
+
     public function cetakAntrian(Antrian $antrian)
     {
         try {
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index 1721c25..a2725af 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -8,11 +8,15 @@
 use App\Models\Poli;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Log;
 
 class DashboardController extends Controller
 {
     public function index()
     {
+        // Auto-batalkan antrian yang sudah dipanggil lebih dari 5 menit
+        $this->autoBatalkanAntrianLama();
+
         // Get user's own queues
         $antrianSaya = Antrian::with(['user', 'poli'])
             ->where('user_id', Auth::id())
@@ -25,6 +29,9 @@ public function index()
 
     public function addQueue(Request $request)
     {
+        // Auto-batalkan antrian yang sudah dipanggil lebih dari 5 menit
+        $this->autoBatalkanAntrianLama();
+
         $request->validate([
             'poli_id' => 'required|exists:polis,id'
         ]);
@@ -71,20 +78,28 @@ public function addQueue(Request $request)
             // Get poli info for prefix
             $prefix = $this->getPoliPrefix($poli->nama_poli);
 
-            // Get next queue number for the poli
+            // Get next queue number for the poli - perbaikan logika
             $lastQueue = Antrian::where('poli_id', $request->poli_id)
                 ->whereDate('created_at', today())
-                ->max('no_antrian');
+                ->orderBy('id', 'desc')
+                ->first();
 
             // Extract number from last queue (remove prefix)
             $lastNumber = 0;
-            if ($lastQueue) {
-                $lastNumber = (int) preg_replace('/[^0-9]/', '', $lastQueue);
+            if ($lastQueue && $lastQueue->no_antrian) {
+                // Extract only the numeric part after the prefix
+                $lastNumber = (int) preg_replace('/^[A-Z]+/', '', $lastQueue->no_antrian);
+
+                // Debug log
+                \Log::info("Last queue: {$lastQueue->no_antrian}, Extracted number: {$lastNumber}");
             }
 
             $nextNumber = $lastNumber + 1;
             $nextQueueNumber = $prefix . $nextNumber;
 
+            // Debug log
+            \Log::info("Generated next queue number: {$nextQueueNumber} for poli: {$poliName}");
+
             // Create new queue using current user's data
             $antrian = Antrian::create([
                 'user_id' => $user->id,
@@ -188,6 +203,36 @@ private function getPoliPrefix($namaPoli)
         }
     }
 
+    /**
+     * Auto-batalkan antrian yang sudah dipanggil lebih dari 5 menit
+     * tanpa dikonfirmasi selesai oleh admin
+     */
+    private function autoBatalkanAntrianLama()
+    {
+        try {
+            // Cari antrian yang sudah dipanggil lebih dari 5 menit
+            $antrianLama = Antrian::where('status', 'dipanggil')
+                ->where('waktu_panggil', '<=', now()->subMinutes(5))
+                ->get();
+
+            foreach ($antrianLama as $antrian) {
+                // Update status menjadi 'batal'
+                $antrian->update(['status' => 'batal']);
+
+                // Log untuk tracking (optional)
+                \Log::info("Antrian {$antrian->no_antrian} otomatis dibatalkan karena lewat 5 menit sejak dipanggil");
+            }
+
+            // Jika ada antrian yang dibatalkan, log jumlahnya
+            if ($antrianLama->count() > 0) {
+                \Log::info("Total {$antrianLama->count()} antrian otomatis dibatalkan karena timeout");
+            }
+        } catch (\Exception $e) {
+            // Log error jika terjadi masalah
+            \Log::error("Error saat auto-batalkan antrian: " . $e->getMessage());
+        }
+    }
+
     public function batalAntrian(Request $request)
     {
         try {
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 452e6b6..cdf5020 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -19,6 +19,7 @@ public function register(): void
      */
     public function boot(): void
     {
-        //
+        // Set pagination to use Tailwind CSS styling
+        \Illuminate\Pagination\Paginator::useTailwind();
     }
 }
diff --git a/config/app.php b/config/app.php
index 423eed5..c74a68d 100644
--- a/config/app.php
+++ b/config/app.php
@@ -65,7 +65,7 @@
     |
     */
 
-    'timezone' => 'UTC',
+    'timezone' => 'Asia/Jakarta',
 
     /*
     |--------------------------------------------------------------------------
diff --git a/resources/views/admin/antrian/tambah.blade.php b/resources/views/admin/antrian/tambah.blade.php
new file mode 100644
index 0000000..28fad1c
--- /dev/null
+++ b/resources/views/admin/antrian/tambah.blade.php
@@ -0,0 +1,263 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="min-h-screen bg-gray-50">
+    @include('admin.partials.top-nav')
+
+    <div class="flex">
+        @include('admin.partials.sidebar')
+
+        <!-- Main Content -->
+        <div class="flex-1 lg:ml-0">
+            <div class="px-4 sm:px-6 lg:px-8 py-6 md:py-8">
+                <!-- Header -->
+                <div class="mb-6">
+                    <h1 class="text-2xl font-bold text-gray-900 mb-2">Tambah Antrian Manual</h1>
+                    <p class="text-gray-600">Bantu pasien yang tidak bisa antri online dengan membuat antrian manual</p>
+                </div>
+
+                <!-- Search User Section -->
+                <div class="bg-white rounded-lg shadow-sm border p-6 mb-6">
+                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Cari Pasien</h2>
+                    
+                    <div class="flex space-x-4 mb-4">
+                        <div class="flex-1">
+                            <input type="text" id="searchInput" placeholder="Cari berdasarkan nama, NIK, atau nomor HP..." 
+                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                        <button id="searchBtn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">
+                            Cari
+                        </button>
+                    </div>
+
+                    <!-- Search Results -->
+                    <div id="searchResults" class="hidden">
+                        <h3 class="text-md font-medium text-gray-900 mb-3">Hasil Pencarian:</h3>
+                        <div id="userList" class="space-y-2"></div>
+                    </div>
+
+                    <!-- No Results Message -->
+                    <div id="noResults" class="hidden text-center py-4 text-gray-500">
+                        Tidak ada hasil yang ditemukan
+                    </div>
+                </div>
+
+                <!-- Selected User & Poli Selection -->
+                <div id="userSelection" class="hidden bg-white rounded-lg shadow-sm border p-6 mb-6">
+                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Pilih Poli</h2>
+                    
+                    <div class="mb-4">
+                        <h3 class="text-md font-medium text-gray-700 mb-2">Pasien yang dipilih:</h3>
+                        <div id="selectedUserInfo" class="bg-gray-50 rounded-lg p-3"></div>
+                    </div>
+
+                    <div class="mb-4">
+                        <label for="poliSelect" class="block text-sm font-medium text-gray-700 mb-2">Pilih Poli:</label>
+                        <select id="poliSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                            <option value="">Pilih Poli</option>
+                            @foreach($polis as $poli)
+                                <option value="{{ $poli->id }}">{{ ucfirst($poli->nama_poli) }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <button id="createQueueBtn" class="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                        Buat Antrian
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Logout Form -->
+<form id="logout-form" method="POST" action="{{ route('logout') }}" class="hidden">
+    @csrf
+</form>
+
+<script>
+let selectedUser = null;
+
+// Search functionality
+document.getElementById('searchBtn').addEventListener('click', function() {
+    const searchTerm = document.getElementById('searchInput').value.trim();
+    if (searchTerm.length < 3) {
+        Swal.fire({
+            icon: 'warning',
+            title: 'Peringatan',
+            text: 'Masukkan minimal 3 karakter untuk pencarian',
+            confirmButtonColor: '#3B82F6'
+        });
+        return;
+    }
+    searchUsers(searchTerm);
+});
+
+document.getElementById('searchInput').addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') {
+        document.getElementById('searchBtn').click();
+    }
+});
+
+function searchUsers(searchTerm) {
+    fetch('{{ route("admin.antrian.cari-user") }}', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+        },
+        body: JSON.stringify({ search: searchTerm })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success && data.users.length > 0) {
+            displaySearchResults(data.users);
+        } else {
+            showNoResults();
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        Swal.fire({
+            icon: 'error',
+            title: 'Error',
+            text: 'Terjadi kesalahan saat mencari user',
+            confirmButtonColor: '#EF4444'
+        });
+    });
+}
+
+function displaySearchResults(users) {
+    const userList = document.getElementById('userList');
+    const searchResults = document.getElementById('searchResults');
+    const noResults = document.getElementById('noResults');
+    
+    userList.innerHTML = '';
+    
+    users.forEach(user => {
+        const userDiv = document.createElement('div');
+        userDiv.className = 'flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer';
+        userDiv.innerHTML = `
+            <div>
+                <div class="font-medium text-gray-900">${user.nama}</div>
+                <div class="text-sm text-gray-600">NIK: ${user.no_ktp} | HP: ${user.no_hp}</div>
+                <div class="text-sm text-gray-500">${user.jenis_kelamin} - ${user.alamat}</div>
+            </div>
+            <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm" onclick="selectUser(${JSON.stringify(user).replace(/"/g, '&quot;')})">
+                Pilih
+            </button>
+        `;
+        userList.appendChild(userDiv);
+    });
+    
+    searchResults.classList.remove('hidden');
+    noResults.classList.add('hidden');
+}
+
+function showNoResults() {
+    document.getElementById('searchResults').classList.add('hidden');
+    document.getElementById('noResults').classList.remove('hidden');
+}
+
+function selectUser(user) {
+    selectedUser = user;
+    
+    // Display selected user info
+    const selectedUserInfo = document.getElementById('selectedUserInfo');
+    selectedUserInfo.innerHTML = `
+        <div class="font-medium text-gray-900">${user.nama}</div>
+        <div class="text-sm text-gray-600">NIK: ${user.no_ktp} | HP: ${user.no_hp}</div>
+        <div class="text-sm text-gray-500">${user.jenis_kelamin} - ${user.alamat}</div>
+    `;
+    
+    // Show user selection section
+    document.getElementById('userSelection').classList.remove('hidden');
+    
+    // Reset poli selection
+    document.getElementById('poliSelect').value = '';
+    document.getElementById('createQueueBtn').disabled = true;
+    
+    // Hide search results
+    document.getElementById('searchResults').classList.add('hidden');
+    document.getElementById('searchInput').value = '';
+}
+
+// Poli selection change
+document.getElementById('poliSelect').addEventListener('change', function() {
+    const createQueueBtn = document.getElementById('createQueueBtn');
+    createQueueBtn.disabled = !this.value;
+});
+
+// Create queue
+document.getElementById('createQueueBtn').addEventListener('click', function() {
+    if (!selectedUser || !document.getElementById('poliSelect').value) {
+        Swal.fire({
+            icon: 'warning',
+            title: 'Peringatan',
+            text: 'Pilih user dan poli terlebih dahulu',
+            confirmButtonColor: '#3B82F6'
+        });
+        return;
+    }
+    
+    createQueue();
+});
+
+function createQueue() {
+    const poliId = document.getElementById('poliSelect').value;
+    
+    fetch('{{ route("admin.antrian.store") }}', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+        },
+        body: JSON.stringify({
+            user_id: selectedUser.id,
+            poli_id: poliId
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            Swal.fire({
+                icon: 'success',
+                title: 'Berhasil!',
+                text: data.message,
+                confirmButtonColor: '#10B981'
+            }).then(() => {
+                resetForm();
+            });
+        } else {
+            Swal.fire({
+                icon: 'error',
+                title: 'Error',
+                text: data.message,
+                confirmButtonColor: '#EF4444'
+            });
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        Swal.fire({
+            icon: 'error',
+            title: 'Error',
+            text: 'Terjadi kesalahan saat membuat antrian',
+            confirmButtonColor: '#EF4444'
+        });
+    });
+}
+
+function resetForm() {
+    selectedUser = null;
+    document.getElementById('userSelection').classList.add('hidden');
+    document.getElementById('searchResults').classList.add('hidden');
+    document.getElementById('noResults').classList.add('hidden');
+    document.getElementById('searchInput').value = '';
+    document.getElementById('poliSelect').value = '';
+    document.getElementById('createQueueBtn').disabled = true;
+}
+</script>
+
+@include('admin.partials.sidebar-script')
+@endsection
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index 037f320..2a50a45 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -4,143 +4,10 @@
 
 @section('content')
     <div class="min-h-screen bg-gray-50">
-        <!-- Top Navigation -->
-        <nav class="bg-white shadow-lg sticky top-0 z-40">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex justify-between h-16">
-                    <div class="flex items-center">
-                        <button id="sidebar-toggle" class="lg:hidden text-gray-700 hover:text-primary mr-4">
-                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M4 6h16M4 12h16M4 18h16"></path>
-                            </svg>
-                        </button>
-                        <div class="flex-shrink-0">
-                            <h1 class="text-xl md:text-2xl font-bold text-primary">🏥 Admin Puskesmas</h1>
-                        </div>
-                    </div>
-                    <div class="hidden md:flex items-center space-x-4">
-                        <a href="{{ route('display') }}"
-                            class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Display</a>
-                        <span class="text-gray-700">Selamat datang, Admin</span>
-                        <button onclick="confirmLogout()"
-                            class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">
-                            Logout
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </nav>
+        @include('admin.partials.top-nav')
 
         <div class="flex">
-            <!-- Sidebar -->
-            <aside id="sidebar"
-                class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition duration-200 ease-in-out">
-                <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200">
-                    <h2 class="text-lg font-semibold text-gray-900">Menu Admin</h2>
-                    <button id="sidebar-close" class="lg:hidden text-gray-500 hover:text-gray-700">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
-                            </path>
-                        </svg>
-                    </button>
-                </div>
-
-                <nav class="px-6 py-6">
-                    <div class="space-y-6">
-                        <!-- Dashboard -->
-                        <div>
-                            <a href="{{ route('admin.dashboard') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.dashboard') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M8 5a2 2 0 012-2h4a2 2 0 012 2v6H8V5z"></path>
-                                </svg>
-                                <span class="font-medium">Dashboard</span>
-                            </a>
-                        </div>
-
-                        <!-- Daftar Antrian -->
-                        <div>
-                            <div
-                                class="flex items-center px-4 py-2 text-sm font-semibold text-gray-500 uppercase tracking-wider">
-                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
-                                    </path>
-                                </svg>
-                                Daftar Antrian
-                            </div>
-                            <div class="mt-3 space-y-1">
-                                <a href="{{ route('admin.poli.umum') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.umum') ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Umum</span>
-                                </a>
-                                <a href="{{ route('admin.poli.gigi') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.gigi') ? 'bg-green-50 text-green-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Gigi</span>
-                                </a>
-                                <a href="{{ route('admin.poli.jiwa') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.jiwa') ? 'bg-purple-50 text-purple-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Jiwa</span>
-                                </a>
-                                <a href="{{ route('admin.poli.tradisional') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.tradisional') ? 'bg-yellow-50 text-yellow-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-yellow-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Tradisional</span>
-                                </a>
-                            </div>
-                        </div>
-
-                        <!-- Kelola User -->
-                        <div>
-                            <a href="{{ route('admin.users.index') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.users.*') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Kelola User</span>
-                            </a>
-                        </div>
-
-                        <!-- Laporan -->
-                        <div>
-                            <a href="{{ route('admin.laporan.index') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.laporan.*') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Laporan</span>
-                            </a>
-                        </div>
-
-                        <!-- Display -->
-                        <div>
-                            <a href="{{ route('display') }}"
-                                class="flex items-center px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Display</span>
-                            </a>
-                        </div>
-                    </div>
-                </nav>
-            </aside>
-
-            <!-- Overlay for mobile -->
-            <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden"></div>
+            @include('admin.partials.sidebar')
 
             <!-- Main Content -->
             <div class="flex-1 lg:ml-0">
@@ -218,194 +85,114 @@ class="flex items-center px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 tra
                         </div>
                     </div>
 
-                    <!-- Recent Queue Table -->
-                    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
-                        <div class="px-6 py-4 border-b border-gray-200">
-                            <h3 class="text-lg font-semibold text-gray-900">Antrian Terbaru</h3>
-                        </div>
-
-                        <!-- Desktop Table -->
-                        <div class="hidden lg:block overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
-                                    <tr>
-                                        <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            No. Antrian</th>
-                                        <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Nama</th>
-                                        <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Poli</th>
-                                        <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Status</th>
-                                        <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Waktu</th>
-                                    </tr>
-                                </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
-                                    @forelse($antrianTerbaru ?? [] as $antrian)
-                                        <tr class="hover:bg-gray-50 transition duration-200">
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span
-                                                    class="text-lg font-semibold text-primary">{{ $antrian->no_antrian ?? 'N/A' }}</span>
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <div class="text-sm font-medium text-gray-900">
-                                                    {{ $antrian->user?->nama ?? 'N/A' }}
-                                                </div>
-                                                <div class="text-sm text-gray-500">{{ $antrian->user?->no_hp ?? 'N/A' }}
-                                                </div>
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span
-                                                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
-                                                    {{ $antrian->poli->nama_poli ?? 'N/A' }}
-                                                </span>
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                @if (($antrian->status ?? '') == 'menunggu')
-                                                    <span
-                                                        class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
-                                                        Menunggu
-                                                    </span>
-                                                @elseif(($antrian->status ?? '') == 'dipanggil')
-                                                    <span
-                                                        class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
-                                                        Dipanggil
-                                                    </span>
-                                                @elseif(($antrian->status ?? '') == 'selesai')
-                                                    <span
-                                                        class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
-                                                        Selesai
-                                                    </span>
-                                                @else
-                                                    <span
-                                                        class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
-                                                        Batal
-                                                    </span>
-                                                @endif
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                                {{ $antrian->created_at?->format('H:i') ?? 'N/A' }}
-                                            </td>
-                                        </tr>
-                                    @empty
-                                        <tr>
-                                            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
-                                                <svg class="w-12 h-12 mx-auto mb-4 text-gray-400" fill="none"
-                                                    stroke="currentColor" viewBox="0 0 24 24">
-                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
-                                                    </path>
-                                                </svg>
-                                                <p class="text-lg font-medium">Belum ada antrian hari ini</p>
-                                                <p class="text-sm text-gray-400">Antrian akan muncul di sini setelah ada
-                                                    pendaftaran</p>
-                                            </td>
-                                        </tr>
-                                    @endforelse
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <!-- Mobile Table -->
-                        <div class="lg:hidden">
-                            @forelse($antrianTerbaru ?? [] as $antrian)
-                                <div class="border-b border-gray-200 p-4 hover:bg-gray-50">
-                                    <!-- 4 Kolom Penting untuk Mobile -->
-                                    <div class="grid grid-cols-2 gap-4 mb-3">
-                                        <div>
-                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">No.
-                                                Antrian</p>
-                                            <span
-                                                class="text-lg font-semibold text-primary">{{ $antrian->no_antrian ?? 'N/A' }}</span>
-                                        </div>
-                                        <div>
-                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Nama</p>
-                                            <div class="text-sm font-medium text-gray-900">
-                                                {{ $antrian->user?->nama ?? 'N/A' }}</div>
-                                        </div>
-                                        <div>
-                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Poli</p>
-                                            <span
-                                                class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
-                                                {{ $antrian->poli->nama_poli ?? 'N/A' }}
-                                            </span>
-                                        </div>
-                                        <div>
-                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Status
-                                            </p>
-                                            @if (($antrian->status ?? '') == 'menunggu')
-                                                <span
-                                                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
-                                                    Menunggu
-                                                </span>
-                                            @elseif(($antrian->status ?? '') == 'dipanggil')
-                                                <span
-                                                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
-                                                    Dipanggil
-                                                </span>
-                                            @elseif(($antrian->status ?? '') == 'selesai')
-                                                <span
-                                                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
-                                                    Selesai
-                                                </span>
-                                            @else
-                                                <span
-                                                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
-                                                    Batal
-                                                </span>
-                                            @endif
-                                        </div>
-                                    </div>
-
-                                    <!-- Button Selengkapnya untuk Mobile -->
-                                    <div class="border-t border-gray-100 pt-3">
-                                        <button onclick="toggleDashboardDetails({{ $antrian->id }})"
-                                            class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
-                                            <span id="dashboard-btn-text-{{ $antrian->id }}">Selengkapnya</span>
-                                            <svg id="dashboard-icon-{{ $antrian->id }}"
-                                                class="w-4 h-4 ml-1 transform transition-transform" fill="none"
-                                                stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M19 9l-7 7-7-7"></path>
-                                            </svg>
-                                        </button>
-
-                                        <!-- Detail Tambahan (Hidden by default) -->
-                                        <div id="dashboard-details-{{ $antrian->id }}" class="hidden mt-3 space-y-2">
-                                            <div class="grid grid-cols-1 gap-2 text-sm">
-                                                <div>
-                                                    <span class="font-medium text-gray-700">No. HP:</span>
-                                                    <span
-                                                        class="text-gray-600">{{ $antrian->user?->no_hp ?? 'N/A' }}</span>
-                                                </div>
-                                                <div>
-                                                    <span class="font-medium text-gray-700">Waktu Daftar:</span>
-                                                    <span
-                                                        class="text-gray-600">{{ $antrian->created_at?->format('H:i') ?? 'N/A' }}</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            @empty
-                                <div class="p-8 text-center text-gray-500">
-                                    <svg class="w-12 h-12 mx-auto mb-4 text-gray-400" fill="none"
-                                        stroke="currentColor" viewBox="0 0 24 24">
+                    <!-- Quick Actions -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+                        <div class="bg-white rounded-2xl shadow-xl p-6">
+                            <div class="flex items-center mb-4">
+                                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
+                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+                                            d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                    </svg>
+                                </div>
+                                <h3 class="text-lg font-semibold text-gray-900 ml-3">Tambah Antrian</h3>
+                            </div>
+                            <p class="text-gray-600 mb-4">Bantu pasien yang tidak bisa antri online</p>
+                            <a href="{{ route('admin.antrian.tambah') }}"
+                                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
+                                Tambah Antrian
+                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M9 5l7 7-7 7"></path>
+                                </svg>
+                            </a>
+                        </div>
+
+                        <div class="bg-white rounded-2xl shadow-xl p-6">
+                            <div class="flex items-center mb-4">
+                                <div class="p-3 rounded-full bg-green-100 text-green-600">
+                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
                                         </path>
                                     </svg>
-                                    <p class="text-lg font-medium">Belum ada antrian hari ini</p>
-                                    <p class="text-sm text-gray-400">Antrian akan muncul di sini setelah ada
-                                        pendaftaran</p>
                                 </div>
-                            @endforelse
+                                <h3 class="text-lg font-semibold text-gray-900 ml-3">Display Antrian</h3>
+                            </div>
+                            <p class="text-gray-600 mb-4">Lihat display antrian untuk pasien</p>
+                            <a href="{{ route('display') }}"
+                                class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-200">
+                                Lihat Display
+                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M9 5l7 7-7 7"></path>
+                                </svg>
+                            </a>
+                        </div>
+
+                        <div class="bg-white rounded-2xl shadow-xl p-6">
+                            <div class="flex items-center mb-4">
+                                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
+                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+                                        </path>
+                                    </svg>
+                                </div>
+                                <h3 class="text-lg font-semibold text-gray-900 ml-3">Laporan</h3>
+                            </div>
+                            <p class="text-gray-600 mb-4">Lihat laporan dan statistik antrian</p>
+                            <a href="{{ route('admin.laporan.index') }}"
+                                class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-200">
+                                Lihat Laporan
+                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M9 5l7 7-7 7"></path>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Recent Activity -->
+                    <div class="bg-white rounded-2xl shadow-xl p-6">
+                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Aktivitas Terbaru</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-center p-4 bg-gray-50 rounded-lg">
+                                <div class="p-2 rounded-full bg-blue-100 text-blue-600">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                    </svg>
+                                </div>
+                                <div class="ml-3">
+                                    <p class="text-sm font-medium text-gray-900">Antrian baru ditambahkan</p>
+                                    <p class="text-xs text-gray-500">Poli Umum - 2 menit yang lalu</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center p-4 bg-gray-50 rounded-lg">
+                                <div class="p-2 rounded-full bg-green-100 text-green-600">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </div>
+                                <div class="ml-3">
+                                    <p class="text-sm font-medium text-gray-900">Antrian selesai</p>
+                                    <p class="text-xs text-gray-500">Poli Gigi - 5 menit yang lalu</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center p-4 bg-gray-50 rounded-lg">
+                                <div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                    </svg>
+                                </div>
+                                <div class="ml-3">
+                                    <p class="text-sm font-medium text-gray-900">Antrian dipanggil</p>
+                                    <p class="text-xs text-gray-500">Poli Jiwa - 8 menit yang lalu</p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -413,116 +200,10 @@ class="text-gray-600">{{ $antrian->created_at?->format('H:i') ?? 'N/A' }}</span>
         </div>
     </div>
 
-    @push('scripts')
-        <script>
-            // Sidebar toggle for mobile
-            document.getElementById('sidebar-toggle').addEventListener('click', function() {
-                document.getElementById('sidebar').classList.remove('-translate-x-full');
-                document.getElementById('sidebar-overlay').classList.remove('hidden');
-            });
+    <!-- Logout Form -->
+    <form id="logout-form" method="POST" action="{{ route('logout') }}" class="hidden">
+        @csrf
+    </form>
 
-            document.getElementById('sidebar-close').addEventListener('click', function() {
-                document.getElementById('sidebar').classList.add('-translate-x-full');
-                document.getElementById('sidebar-overlay').classList.add('hidden');
-            });
-
-            document.getElementById('sidebar-overlay').addEventListener('click', function() {
-                document.getElementById('sidebar').classList.add('-translate-x-full');
-                document.getElementById('sidebar-overlay').classList.add('hidden');
-            });
-
-            // Show SweetAlert2 for success messages
-            @if (session('success'))
-                Swal.fire({
-                    icon: 'success',
-                    title: 'Berhasil!',
-                    text: '{{ session('success') }}',
-                    confirmButtonText: 'OK',
-                    confirmButtonColor: '#10B981',
-                    timer: 3000,
-                    timerProgressBar: true
-                });
-            @endif
-
-            // Show welcome message for admin
-            @if (session('success') && str_contains(session('success'), 'Selamat datang'))
-                Swal.fire({
-                    icon: 'success',
-                    title: 'Selamat Datang!',
-                    text: '{{ session('success') }}',
-                    confirmButtonText: 'OK',
-                    confirmButtonColor: '#10B981',
-                    timer: 4000,
-                    timerProgressBar: true,
-                    showClass: {
-                        popup: 'animate__animated animate__fadeInDown'
-                    },
-                    hideClass: {
-                        popup: 'animate__animated animate__fadeOutUp'
-                    }
-                });
-            @endif
-
-            // Show SweetAlert2 for error messages
-            @if (session('error'))
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Error!',
-                    text: '{{ session('error') }}',
-                    confirmButtonText: 'OK',
-                    confirmButtonColor: '#EF4444',
-                    timer: 4000,
-                    timerProgressBar: true
-                });
-            @endif
-
-            // Function to confirm logout
-            function confirmLogout() {
-                Swal.fire({
-                    title: 'Konfirmasi Logout',
-                    text: 'Apakah Anda yakin ingin keluar dari sistem?',
-                    icon: 'question',
-                    showCancelButton: true,
-                    confirmButtonText: 'Ya, Logout',
-                    cancelButtonText: 'Batal',
-                    confirmButtonColor: '#EF4444',
-                    cancelButtonColor: '#6B7280'
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        const form = document.createElement('form');
-                        form.method = 'POST';
-                        form.action = '{{ route('logout') }}';
-
-                        const csrfToken = document.createElement('input');
-                        csrfToken.type = 'hidden';
-                        csrfToken.name = '_token';
-                        csrfToken.value = '{{ csrf_token() }}';
-
-                        form.appendChild(csrfToken);
-                        document.body.appendChild(form);
-                        form.submit();
-                    }
-                });
-            }
-
-            // Function to toggle dashboard details
-            function toggleDashboardDetails(antrianId) {
-                const detailsElement = document.getElementById(`dashboard-details-${antrianId}`);
-                const buttonTextElement = document.getElementById(`dashboard-btn-text-${antrianId}`);
-                const iconElement = document.getElementById(`dashboard-icon-${antrianId}`);
-
-                if (detailsElement.classList.contains('hidden')) {
-                    detailsElement.classList.remove('hidden');
-                    buttonTextElement.textContent = 'Sembunyikan';
-                    iconElement.classList.remove('transform', 'rotate-180');
-                    iconElement.classList.add('transform', 'rotate-0');
-                } else {
-                    detailsElement.classList.add('hidden');
-                    buttonTextElement.textContent = 'Selengkapnya';
-                    iconElement.classList.remove('transform', 'rotate-0');
-                    iconElement.classList.add('transform', 'rotate-180');
-                }
-            }
-        </script>
-    @endpush
+    @include('admin.partials.sidebar-script')
 @endsection
diff --git a/resources/views/admin/indonesian-tts/index.blade.php b/resources/views/admin/indonesian-tts/index.blade.php
deleted file mode 100644
index f204c9d..0000000
--- a/resources/views/admin/indonesian-tts/index.blade.php
+++ /dev/null
@@ -1,536 +0,0 @@
-@extends('layouts.app')
-
-@section('title', 'Indonesian TTS Settings')
-
-@section('content')
-    <div class="min-h-screen bg-gray-50">
-        <!-- Top Navigation -->
-        <nav class="bg-white shadow-lg sticky top-0 z-40">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex justify-between h-16">
-                    <div class="flex items-center">
-                        <button id="sidebar-toggle" class="lg:hidden text-gray-700 hover:text-primary mr-4">
-                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M4 6h16M4 12h16M4 18h16"></path>
-                            </svg>
-                        </button>
-                        <div class="flex-shrink-0">
-                            <h1 class="text-xl md:text-2xl font-bold text-primary">🏥 Admin Puskesmas</h1>
-                        </div>
-                    </div>
-                    <div class="hidden md:flex items-center space-x-4">
-                        <a href="{{ route('display') }}"
-                            class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Display</a>
-                        <span class="text-gray-700">Selamat datang, Admin</span>
-                        <button onclick="confirmLogout()"
-                            class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">
-                            Logout
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </nav>
-
-        <div class="flex">
-            <!-- Sidebar -->
-            <aside id="sidebar"
-                class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition duration-200 ease-in-out">
-                <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200">
-                    <h2 class="text-lg font-semibold text-gray-900">Menu Admin</h2>
-                    <button id="sidebar-close" class="lg:hidden text-gray-500 hover:text-gray-700">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
-                            </path>
-                        </svg>
-                    </button>
-                </div>
-
-                <nav class="px-6 py-6">
-                    <div class="space-y-6">
-                        <!-- Dashboard -->
-                        <div>
-                            <a href="{{ route('admin.dashboard') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.dashboard') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M8 5a2 2 0 012-2h4a2 2 0 012 2v6H8V5z"></path>
-                                </svg>
-                                <span class="font-medium">Dashboard</span>
-                            </a>
-                        </div>
-
-                        <!-- Daftar Antrian -->
-                        <div>
-                            <div
-                                class="flex items-center px-4 py-2 text-sm font-semibold text-gray-500 uppercase tracking-wider">
-                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
-                                    </path>
-                                </svg>
-                                Daftar Antrian
-                            </div>
-                            <div class="mt-3 space-y-1">
-                                <a href="{{ route('admin.poli.umum') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.umum') ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Umum</span>
-                                </a>
-                                <a href="{{ route('admin.poli.gigi') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.gigi') ? 'bg-green-50 text-green-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Gigi</span>
-                                </a>
-                                <a href="{{ route('admin.poli.jiwa') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.jiwa') ? 'bg-purple-50 text-purple-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Jiwa</span>
-                                </a>
-                                <a href="{{ route('admin.poli.tradisional') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.tradisional') ? 'bg-yellow-50 text-yellow-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-yellow-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Tradisional</span>
-                                </a>
-                            </div>
-                        </div>
-
-                        <!-- Kelola User -->
-                        <div>
-                            <a href="{{ route('admin.users.index') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.users.*') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Kelola User</span>
-                            </a>
-                        </div>
-
-                        <!-- Laporan -->
-                        <div>
-                            <a href="{{ route('admin.laporan.index') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.laporan.*') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Laporan</span>
-                            </a>
-                        </div>
-
-                        <!-- Indonesian TTS Settings -->
-                        <div>
-                            <a href="{{ route('admin.indonesian-tts.index') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.indonesian-tts.*') ? 'bg-green-50 text-green-700 border border-green-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Indonesian TTS</span>
-                            </a>
-                        </div>
-
-                        <!-- Display -->
-                        <div>
-                            <a href="{{ route('display') }}"
-                                class="flex items-center px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Display</span>
-                            </a>
-                        </div>
-                    </div>
-                </nav>
-            </aside>
-
-            <!-- Overlay for mobile -->
-            <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden"></div>
-
-            <!-- Main Content -->
-            <div class="flex-1 lg:ml-0">
-                <div class="px-4 sm:px-6 lg:px-8 py-6 md:py-8">
-                    <!-- Header -->
-                    <div class="mb-8 animate-fade-in">
-                        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Indonesian TTS Settings</h1>
-                        <p class="text-gray-600 text-lg">Kelola pengaturan Text-to-Speech Indonesia</p>
-                    </div>
-
-                    <!-- Status Cards -->
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-                        <!-- Indonesian TTS Status -->
-                        <div class="bg-white rounded-xl shadow-lg p-6">
-                            <div class="flex items-center">
-                                <div class="flex-shrink-0">
-                                    <div id="indonesian-tts-status"
-                                        class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
-                                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor"
-                                            viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div class="ml-4">
-                                    <h3 class="text-lg font-semibold text-gray-900">Indonesian TTS</h3>
-                                    <p id="indonesian-tts-text" class="text-sm text-gray-500">Checking...</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Coqui TTS Status -->
-                        <div class="bg-white rounded-xl shadow-lg p-6">
-                            <div class="flex items-center">
-                                <div class="flex-shrink-0">
-                                    <div id="coqui-tts-status"
-                                        class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
-                                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor"
-                                            viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div class="ml-4">
-                                    <h3 class="text-lg font-semibold text-gray-900">Coqui TTS</h3>
-                                    <p id="coqui-tts-text" class="text-sm text-gray-500">Checking...</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Model Files Status -->
-                        <div class="bg-white rounded-xl shadow-lg p-6">
-                            <div class="flex items-center">
-                                <div class="flex-shrink-0">
-                                    <div id="model-files-status"
-                                        class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
-                                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor"
-                                            viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div class="ml-4">
-                                    <h3 class="text-lg font-semibold text-gray-900">Model Files</h3>
-                                    <p id="model-files-text" class="text-sm text-gray-500">Checking...</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Speakers Status -->
-                        <div class="bg-white rounded-xl shadow-lg p-6">
-                            <div class="flex items-center">
-                                <div class="flex-shrink-0">
-                                    <div id="speakers-status"
-                                        class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
-                                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor"
-                                            viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div class="ml-4">
-                                    <h3 class="text-lg font-semibold text-gray-900">Available Speakers</h3>
-                                    <p id="speakers-text" class="text-sm text-gray-500">Checking...</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Test TTS Section -->
-                    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
-                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Test Indonesian TTS</h2>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <div>
-                                <label for="test-text" class="block text-sm font-medium text-gray-700 mb-2">Text untuk
-                                    Test</label>
-                                <textarea id="test-text" rows="4"
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                                    placeholder="Masukkan text untuk test TTS...">Nomor antrian U Lima, silakan menuju ke Poli Umum</textarea>
-                            </div>
-                            <div class="flex items-end">
-                                <button id="test-tts-btn"
-                                    class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-md font-medium transition duration-200">
-                                    Test TTS
-                                </button>
-                            </div>
-                        </div>
-                        <div id="test-result" class="mt-4 hidden">
-                            <div class="bg-gray-50 rounded-lg p-4">
-                                <h4 class="font-semibold text-gray-900 mb-2">Hasil Test:</h4>
-                                <p id="test-result-text" class="text-sm text-gray-600"></p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Installation Instructions -->
-                    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
-                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Instalasi Indonesian TTS</h2>
-                        <div id="installation-instructions" class="prose max-w-none">
-                            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
-                                <div class="flex">
-                                    <div class="flex-shrink-0">
-                                        <svg class="h-5 w-5 text-yellow-400" fill="none" stroke="currentColor"
-                                            viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z">
-                                            </path>
-                                        </svg>
-                                    </div>
-                                    <div class="ml-3">
-                                        <h3 class="text-sm font-medium text-yellow-800">Perhatian</h3>
-                                        <div class="mt-2 text-sm text-yellow-700">
-                                            <p>Indonesian TTS memerlukan instalasi Coqui TTS dan model files. Ikuti
-                                                langkah-langkah di bawah ini.</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div id="installation-steps" class="space-y-4">
-                                <!-- Installation steps will be loaded here -->
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Download Model Files -->
-                    <div class="bg-white rounded-2xl shadow-xl p-8">
-                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Download Model Files</h2>
-                        <div id="download-info" class="space-y-4">
-                            <!-- Download info will be loaded here -->
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    @push('scripts')
-        <script>
-            // Sidebar toggle for mobile
-            document.getElementById('sidebar-toggle').addEventListener('click', function() {
-                document.getElementById('sidebar').classList.remove('-translate-x-full');
-                document.getElementById('sidebar-overlay').classList.remove('hidden');
-            });
-
-            document.getElementById('sidebar-close').addEventListener('click', function() {
-                document.getElementById('sidebar').classList.add('-translate-x-full');
-                document.getElementById('sidebar-overlay').classList.add('hidden');
-            });
-
-            document.getElementById('sidebar-overlay').addEventListener('click', function() {
-                document.getElementById('sidebar').classList.add('-translate-x-full');
-                document.getElementById('sidebar-overlay').classList.add('hidden');
-            });
-
-            // Load status on page load
-            document.addEventListener('DOMContentLoaded', function() {
-                loadStatus();
-                loadInstallationInstructions();
-                loadDownloadInfo();
-            });
-
-            // Load Indonesian TTS status
-            function loadStatus() {
-                fetch('{{ route('admin.indonesian-tts.status') }}')
-                    .then(response => response.json())
-                    .then(data => {
-                        updateStatusCard('indonesian-tts', data.indonesian_tts_available, 'Indonesian TTS');
-                        updateStatusCard('coqui-tts', data.coqui_tts_installed, 'Coqui TTS');
-                        updateStatusCard('model-files', data.model_files_exist, 'Model Files');
-
-                        const speakersCount = Object.keys(data.available_speakers || {}).length;
-                        updateStatusCard('speakers', speakersCount > 0, `${speakersCount} Speakers Available`);
-                    })
-                    .catch(error => {
-                        console.error('Error loading status:', error);
-                    });
-            }
-
-            // Update status card
-            function updateStatusCard(id, isAvailable, text) {
-                const statusElement = document.getElementById(`${id}-status`);
-                const textElement = document.getElementById(`${id}-text`);
-
-                if (isAvailable) {
-                    statusElement.className = 'w-8 h-8 rounded-full bg-green-100 flex items-center justify-center';
-                    statusElement.innerHTML =
-                        '<svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>';
-                    textElement.textContent = text;
-                    textElement.className = 'text-sm text-green-600';
-                } else {
-                    statusElement.className = 'w-8 h-8 rounded-full bg-red-100 flex items-center justify-center';
-                    statusElement.innerHTML =
-                        '<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>';
-                    textElement.textContent = 'Not Available';
-                    textElement.className = 'text-sm text-red-600';
-                }
-            }
-
-            // Load installation instructions
-            function loadInstallationInstructions() {
-                fetch('{{ route('admin.indonesian-tts.install') }}')
-                    .then(response => response.json())
-                    .then(data => {
-                        const container = document.getElementById('installation-steps');
-                        const steps = data.instructions.steps;
-
-                        let html = '<ol class="list-decimal list-inside space-y-2">';
-                        steps.forEach(step => {
-                            if (step.trim() === '') {
-                                html += '</ol><ol class="list-decimal list-inside space-y-2 mt-4">';
-                            } else {
-                                html += `<li class="text-sm text-gray-700">${step}</li>`;
-                            }
-                        });
-                        html += '</ol>';
-
-                        container.innerHTML = html;
-                    })
-                    .catch(error => {
-                        console.error('Error loading installation instructions:', error);
-                    });
-            }
-
-            // Load download info
-            function loadDownloadInfo() {
-                fetch('{{ route('admin.indonesian-tts.download') }}')
-                    .then(response => response.json())
-                    .then(data => {
-                        const container = document.getElementById('download-info');
-                        const info = data.download_info;
-
-                        let html = `
-                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
-                        <h3 class="text-lg font-semibold text-blue-900 mb-2">${info.title}</h3>
-                        <p class="text-blue-700">${info.description}</p>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                `;
-
-                        Object.entries(info.files).forEach(([filename, url]) => {
-                            html += `
-                        <div class="bg-gray-50 rounded-lg p-4">
-                            <h4 class="font-semibold text-gray-900 mb-2">${filename}</h4>
-                            <a href="${url}" target="_blank" 
-                               class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                                Download
-                            </a>
-                        </div>
-                    `;
-                        });
-
-                        html += '</div>';
-
-                        html += '<div class="bg-gray-50 rounded-lg p-4">';
-                        html += '<h4 class="font-semibold text-gray-900 mb-2">Langkah Manual:</h4>';
-                        html += '<ol class="list-decimal list-inside space-y-1 text-sm text-gray-700">';
-                        info.manual_steps.forEach(step => {
-                            html += `<li>${step}</li>`;
-                        });
-                        html += '</ol></div>';
-
-                        container.innerHTML = html;
-                    })
-                    .catch(error => {
-                        console.error('Error loading download info:', error);
-                    });
-            }
-
-            // Test TTS functionality
-            document.getElementById('test-tts-btn').addEventListener('click', function() {
-                const text = document.getElementById('test-text').value;
-                const button = this;
-                const resultDiv = document.getElementById('test-result');
-                const resultText = document.getElementById('test-result-text');
-
-                if (!text.trim()) {
-                    Swal.fire({
-                        icon: 'warning',
-                        title: 'Text Kosong',
-                        text: 'Masukkan text untuk test TTS'
-                    });
-                    return;
-                }
-
-                button.disabled = true;
-                button.textContent = 'Testing...';
-
-                fetch('{{ route('admin.indonesian-tts.test') }}', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
-                        },
-                        body: JSON.stringify({
-                            text: text
-                        })
-                    })
-                    .then(response => response.json())
-                    .then(data => {
-                        resultDiv.classList.remove('hidden');
-                        if (data.success) {
-                            resultText.textContent = `TTS berhasil dibuat! Type: ${data.tts_type}`;
-                            resultText.className = 'text-sm text-green-600';
-
-                            if (data.audio_url) {
-                                resultText.innerHTML +=
-                                    `<br><audio controls class="mt-2"><source src="${data.audio_url}" type="audio/wav">Your browser does not support the audio element.</audio>`;
-                            }
-                        } else {
-                            resultText.textContent = `TTS gagal: ${data.message}`;
-                            resultText.className = 'text-sm text-red-600';
-                        }
-                    })
-                    .catch(error => {
-                        resultDiv.classList.remove('hidden');
-                        resultText.textContent = `Error: ${error.message}`;
-                        resultText.className = 'text-sm text-red-600';
-                    })
-                    .finally(() => {
-                        button.disabled = false;
-                        button.textContent = 'Test TTS';
-                    });
-            });
-
-            function confirmLogout() {
-                Swal.fire({
-                    title: 'Konfirmasi Logout',
-                    text: 'Apakah Anda yakin ingin keluar dari sistem?',
-                    icon: 'question',
-                    showCancelButton: true,
-                    confirmButtonText: 'Ya, Logout',
-                    cancelButtonText: 'Batal',
-                    confirmButtonColor: '#EF4444',
-                    cancelButtonColor: '#6B7280'
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        const form = document.createElement('form');
-                        form.method = 'POST';
-                        form.action = '{{ route('logout') }}';
-
-                        const csrfToken = document.createElement('input');
-                        csrfToken.type = 'hidden';
-                        csrfToken.name = '_token';
-                        csrfToken.value = '{{ csrf_token() }}';
-
-                        form.appendChild(csrfToken);
-                        document.body.appendChild(form);
-                        form.submit();
-                    }
-                });
-            }
-        </script>
-    @endpush
-@endsection
diff --git a/resources/views/admin/laporan/index.blade.php b/resources/views/admin/laporan/index.blade.php
index a60b97e..2d12f40 100644
--- a/resources/views/admin/laporan/index.blade.php
+++ b/resources/views/admin/laporan/index.blade.php
@@ -20,8 +20,7 @@
                         </div>
                     </div>
                     <div class="hidden md:flex items-center space-x-4">
-                        <a href="{{ route('display') }}"
-                            class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Display</a>
+                        
                         <span class="text-gray-700">Selamat datang, Admin</span>
                         <button onclick="confirmLogout()"
                             class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">
diff --git a/resources/views/admin/partials/sidebar-script.blade.php b/resources/views/admin/partials/sidebar-script.blade.php
new file mode 100644
index 0000000..5a3bb19
--- /dev/null
+++ b/resources/views/admin/partials/sidebar-script.blade.php
@@ -0,0 +1,49 @@
+<script>
+// Sidebar functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const sidebar = document.getElementById('sidebar');
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const sidebarClose = document.getElementById('sidebar-close');
+    const sidebarOverlay = document.getElementById('sidebar-overlay');
+    const mainContent = document.querySelector('.flex-1');
+
+    // Toggle sidebar on mobile
+    if (sidebarToggle) {
+        sidebarToggle.addEventListener('click', function() {
+            sidebar.classList.remove('-translate-x-full');
+            sidebarOverlay.classList.remove('hidden');
+        });
+    }
+
+    // Close sidebar on mobile
+    if (sidebarClose) {
+        sidebarClose.addEventListener('click', function() {
+            sidebar.classList.add('-translate-x-full');
+            sidebarOverlay.classList.add('hidden');
+        });
+    }
+
+    // Close sidebar when clicking overlay
+    if (sidebarOverlay) {
+        sidebarOverlay.addEventListener('click', function() {
+            sidebar.classList.add('-translate-x-full');
+            sidebarOverlay.classList.add('hidden');
+        });
+    }
+
+    // Close sidebar on escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            sidebar.classList.add('-translate-x-full');
+            sidebarOverlay.classList.add('hidden');
+        }
+    });
+});
+
+// Logout confirmation
+function confirmLogout() {
+    if (confirm('Apakah Anda yakin ingin keluar?')) {
+        document.getElementById('logout-form').submit();
+    }
+}
+</script>
diff --git a/resources/views/admin/partials/sidebar.blade.php b/resources/views/admin/partials/sidebar.blade.php
new file mode 100644
index 0000000..1ce859a
--- /dev/null
+++ b/resources/views/admin/partials/sidebar.blade.php
@@ -0,0 +1,121 @@
+<!-- Sidebar -->
+<aside id="sidebar"
+    class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition duration-200 ease-in-out">
+    <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200">
+        <h2 class="text-lg font-semibold text-gray-900">Menu Admin</h2>
+        <button id="sidebar-close" class="lg:hidden text-gray-500 hover:text-gray-700">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
+                </path>
+            </svg>
+        </button>
+    </div>
+
+    <nav class="px-6 py-6">
+        <div class="space-y-6">
+            <!-- Dashboard -->
+            <div>
+                <a href="{{ route('admin.dashboard') }}"
+                    class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.dashboard') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M8 5a2 2 0 012-2h4a2 2 0 012 2v6H8V5z"></path>
+                    </svg>
+                    <span class="font-medium">Dashboard</span>
+                </a>
+            </div>
+
+            <!-- Daftar Antrian -->
+            <div>
+                <div class="flex items-center px-4 py-2 text-sm font-semibold text-gray-500 uppercase tracking-wider">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
+                        </path>
+                    </svg>
+                    Daftar Antrian
+                </div>
+                <div class="mt-3 space-y-1">
+                    <a href="{{ route('admin.poli.umum') }}"
+                        class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.umum') ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
+                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
+                        <span class="text-sm">Poli Umum</span>
+                    </a>
+                    <a href="{{ route('admin.poli.gigi') }}"
+                        class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.gigi') ? 'bg-green-50 text-green-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
+                        <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
+                        <span class="text-sm">Poli Gigi</span>
+                    </a>
+                    <a href="{{ route('admin.poli.jiwa') }}"
+                        class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.jiwa') ? 'bg-purple-50 text-purple-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
+                        <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
+                        <span class="text-sm">Poli Jiwa</span>
+                    </a>
+                    <a href="{{ route('admin.poli.tradisional') }}"
+                        class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.tradisional') ? 'bg-yellow-50 text-yellow-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
+                        <div class="w-2 h-2 bg-yellow-500 rounded-full mr-3"></div>
+                        <span class="text-sm">Poli Tradisional</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Tambah Antrian Manual -->
+            <div>
+                <a href="{{ route('admin.antrian.tambah') }}"
+                    class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.antrian.tambah') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    <span class="font-medium">Tambah Antrian</span>
+                </a>
+            </div>
+
+            <!-- Kelola User -->
+            <div>
+                <a href="{{ route('admin.users.index') }}"
+                    class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.users.*') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z">
+                        </path>
+                    </svg>
+                    <span class="font-medium">Kelola User</span>
+                </a>
+            </div>
+
+            <!-- Laporan -->
+            <div>
+                <a href="{{ route('admin.laporan.index') }}"
+                    class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.laporan.*') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+                        </path>
+                    </svg>
+                    <span class="font-medium">Laporan</span>
+                </a>
+            </div>
+
+
+
+            <!-- Display -->
+            <div>
+                <a href="{{ route('display') }}"
+                    class="flex items-center px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 transition duration-200">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
+                        </path>
+                    </svg>
+                    <span class="font-medium">Display</span>
+                </a>
+            </div>
+        </div>
+    </nav>
+</aside>
+
+<!-- Overlay for mobile -->
+<div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden"></div>
diff --git a/resources/views/admin/partials/top-nav.blade.php b/resources/views/admin/partials/top-nav.blade.php
new file mode 100644
index 0000000..07e6092
--- /dev/null
+++ b/resources/views/admin/partials/top-nav.blade.php
@@ -0,0 +1,26 @@
+<!-- Top Navigation -->
+<nav class="bg-white shadow-lg sticky top-0 z-40">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between h-16">
+            <div class="flex items-center">
+                <button id="sidebar-toggle" class="lg:hidden text-gray-700 hover:text-primary mr-4">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M4 6h16M4 12h16M4 18h16"></path>
+                    </svg>
+                </button>
+                <div class="flex-shrink-0">
+                    <h1 class="text-xl md:text-2xl font-bold text-primary">🏥 Admin Puskesmas</h1>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center space-x-4">
+               
+                <span class="text-gray-700">Selamat datang, Admin</span>
+                <button onclick="confirmLogout()"
+                    class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">
+                    Logout
+                </button>
+            </div>
+        </div>
+    </div>
+</nav>
diff --git a/resources/views/admin/poli/index.blade.php b/resources/views/admin/poli/index.blade.php
index 22c2e66..588c14c 100644
--- a/resources/views/admin/poli/index.blade.php
+++ b/resources/views/admin/poli/index.blade.php
@@ -20,8 +20,7 @@
                         </div>
                     </div>
                     <div class="hidden md:flex items-center space-x-4">
-                        <a href="{{ route('display') }}"
-                            class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Display</a>
+                        
                         <span class="text-gray-700">Selamat datang, Admin</span>
                         <button onclick="confirmLogout()"
                             class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">
diff --git a/resources/views/admin/users/create.blade.php b/resources/views/admin/users/create.blade.php
index 71f0cfe..8677322 100644
--- a/resources/views/admin/users/create.blade.php
+++ b/resources/views/admin/users/create.blade.php
@@ -20,8 +20,7 @@
                         </div>
                     </div>
                     <div class="hidden md:flex items-center space-x-4">
-                        <a href="{{ route('display') }}"
-                            class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Display</a>
+                        
                         <span class="text-gray-700">Selamat datang, Admin</span>
                         <button onclick="confirmLogout()"
                             class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">
diff --git a/resources/views/admin/users/index.blade.php b/resources/views/admin/users/index.blade.php
index 9f9cfc3..c6e624c 100644
--- a/resources/views/admin/users/index.blade.php
+++ b/resources/views/admin/users/index.blade.php
@@ -4,198 +4,23 @@
 
 @section('content')
     <div class="min-h-screen bg-gray-50">
-        <!-- Top Navigation -->
-        <nav class="bg-white shadow-lg sticky top-0 z-40">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex justify-between h-16">
-                    <div class="flex items-center">
-                        <button id="sidebar-toggle" class="lg:hidden text-gray-700 hover:text-primary mr-4">
-                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M4 6h16M4 12h16M4 18h16"></path>
-                            </svg>
-                        </button>
-                        <div class="flex-shrink-0">
-                            <h1 class="text-xl md:text-2xl font-bold text-primary">🏥 Admin Puskesmas</h1>
-                        </div>
-                    </div>
-                    <div class="hidden md:flex items-center space-x-4">
-                        <a href="{{ route('display') }}"
-                            class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Display</a>
-                        <span class="text-gray-700">Selamat datang, Admin</span>
-                        <button onclick="confirmLogout()"
-                            class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">
-                            Logout
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </nav>
+        @include('admin.partials.top-nav')
 
         <div class="flex">
-            <!-- Sidebar -->
-            <aside id="sidebar"
-                class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition duration-200 ease-in-out">
-                <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200">
-                    <h2 class="text-lg font-semibold text-gray-900">Menu Admin</h2>
-                    <button id="sidebar-close" class="lg:hidden text-gray-500 hover:text-gray-700">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
-                            </path>
-                        </svg>
-                    </button>
-                </div>
-
-                <nav class="px-6 py-6">
-                    <div class="space-y-6">
-                        <!-- Dashboard -->
-                        <div>
-                            <a href="{{ route('admin.dashboard') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.dashboard') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M8 5a2 2 0 012-2h4a2 2 0 012 2v6H8V5z"></path>
-                                </svg>
-                                <span class="font-medium">Dashboard</span>
-                            </a>
-                        </div>
-
-                        <!-- Daftar Antrian -->
-                        <div>
-                            <div
-                                class="flex items-center px-4 py-2 text-sm font-semibold text-gray-500 uppercase tracking-wider">
-                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
-                                    </path>
-                                </svg>
-                                Daftar Antrian
-                            </div>
-                            <div class="mt-3 space-y-1">
-                                <a href="{{ route('admin.poli.umum') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.umum') ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Umum</span>
-                                </a>
-                                <a href="{{ route('admin.poli.gigi') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.gigi') ? 'bg-green-50 text-green-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Gigi</span>
-                                </a>
-                                <a href="{{ route('admin.poli.jiwa') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.jiwa') ? 'bg-purple-50 text-purple-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Jiwa</span>
-                                </a>
-                                <a href="{{ route('admin.poli.tradisional') }}"
-                                    class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('admin.poli.tradisional') ? 'bg-yellow-50 text-yellow-700' : 'text-gray-600 hover:bg-gray-50' }} transition duration-200">
-                                    <div class="w-2 h-2 bg-yellow-500 rounded-full mr-3"></div>
-                                    <span class="text-sm">Poli Tradisional</span>
-                                </a>
-                            </div>
-                        </div>
-
-                        <!-- Kelola User -->
-                        <div>
-                            <a href="{{ route('admin.users.index') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.users.*') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Kelola User</span>
-                            </a>
-                        </div>
-
-                        <!-- Laporan -->
-                        <div>
-                            <a href="{{ route('admin.laporan.index') }}"
-                                class="flex items-center px-4 py-3 rounded-xl {{ request()->routeIs('admin.laporan.*') ? 'bg-blue-50 text-blue-700 border border-blue-200' : 'text-gray-700 hover:bg-gray-50' }} transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Laporan</span>
-                            </a>
-                        </div>
-
-                        <!-- Display -->
-                        <div>
-                            <a href="{{ route('display') }}"
-                                class="flex items-center px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 transition duration-200">
-                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
-                                    </path>
-                                </svg>
-                                <span class="font-medium">Display</span>
-                            </a>
-                        </div>
-                    </div>
-                </nav>
-            </aside>
-
-            <!-- Sidebar Overlay -->
-            <div id="sidebar-overlay"
-                class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden transition duration-200 ease-in-out">
-            </div>
+            @include('admin.partials.sidebar')
 
             <!-- Main Content -->
             <div class="flex-1 lg:ml-0">
-                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8">
+                <div class="px-4 sm:px-6 lg:px-8 py-6 md:py-8">
                     <!-- Header -->
-                    <div class="mb-8 animate-fade-in">
-                        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Kelola Data User</h1>
-                        <p class="text-gray-600 text-lg">Kelola data pengguna sistem antrian Puskesmas</p>
-                    </div>
-
-                    <!-- Search Box -->
-                    <div class="bg-white rounded-2xl shadow-xl p-6 mb-8">
-                        <form method="GET" action="{{ route('admin.users.index') }}"
-                            class="flex flex-col md:flex-row gap-4">
-                            <div class="flex-1">
-                                <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Cari
-                                    User</label>
-                                <div class="relative">
-                                    <input type="text" id="search" name="search" value="{{ request('search') }}"
-                                        class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
-                                        placeholder="Cari berdasarkan nama, KTP, HP, alamat, pekerjaan, atau jenis kelamin...">
-                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
-                                            viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                                        </svg>
-                                    </div>
-                                </div>
+                    <div class="mb-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h1 class="text-2xl font-bold text-gray-900 mb-2">Kelola Data User</h1>
+                                <p class="text-gray-600">Kelola data pengguna yang terdaftar dalam sistem</p>
                             </div>
-                            <div class="flex items-end space-x-3">
-                                <button type="submit"
-                                    class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium transition duration-200 flex items-center">
-                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                                    </svg>
-                                    Cari
-                                </button>
-                                <a href="{{ route('admin.users.index') }}"
-                                    class="px-6 py-3 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 transition duration-200">
-                                    Reset
-                                </a>
-                            </div>
-                        </form>
-                    </div>
-
-                    <!-- Users Table -->
-                    <div class="bg-white rounded-2xl shadow-xl overflow-hidden animate-slide-up">
-                        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
-                            <h3 class="text-lg font-semibold text-gray-900">Daftar User</h3>
                             <a href="{{ route('admin.users.create') }}"
-                                class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition duration-200">
+                                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 transition duration-200">
                                 <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
@@ -203,65 +28,86 @@ class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-whi
                                 Tambah User
                             </a>
                         </div>
+                    </div>
+
+                    <!-- Search and Filter -->
+                    <div class="bg-white rounded-lg shadow-sm border p-6 mb-6">
+                        <div class="flex flex-col sm:flex-row gap-4">
+                            <div class="flex-1">
+                                <input type="text" id="searchInput"
+                                    placeholder="Cari berdasarkan nama, NIK, atau nomor HP..."
+                                    value="{{ request('search') }}"
+                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                            </div>
+                            <button id="searchBtn"
+                                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">
+                                Cari
+                            </button>
+                            @if(request('search'))
+                                <a href="{{ route('admin.users.index') }}"
+                                    class="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 focus:ring-2 focus:ring-gray-500">
+                                    Clear
+                                </a>
+                            @endif
+                        </div>
+                    </div>
+
+                    <!-- Users Table -->
+                    <div class="bg-white rounded-lg shadow-sm border overflow-hidden">
+                        <div class="px-6 py-4 border-b border-gray-200">
+                            <h3 class="text-lg font-semibold text-gray-900">Daftar User</h3>
+                        </div>
 
                         <!-- Desktop Table -->
                         <div class="hidden lg:block overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200 table-fixed">
+                            <table class="min-w-full divide-y divide-gray-200">
                                 <thead class="bg-gray-50">
                                     <tr>
                                         <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">
-                                            Nama & Alamat</th>
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Nama</th>
                                         <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">
-                                            No. KTP</th>
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            NIK</th>
                                         <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">
-                                            No. HP</th>
-                                        <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                             Jenis Kelamin</th>
                                         <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">
-                                            Pekerjaan</th>
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            No. HP</th>
                                         <th
-                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Alamat</th>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                             Aksi</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
+                                <tbody id="usersTableBody" class="bg-white divide-y divide-gray-200">
                                     @forelse($users as $user)
                                         <tr class="hover:bg-gray-50 transition duration-200">
-                                            <td class="px-6 py-4">
+                                            <td class="px-6 py-4 whitespace-nowrap">
                                                 <div class="text-sm font-medium text-gray-900">{{ $user->nama }}</div>
-                                                <div class="text-sm text-gray-500 max-w-xs truncate hover:text-gray-700"
-                                                    title="{{ $user->alamat }}">
-                                                    {{ Str::limit($user->alamat, 50) }}
-                                                    @if (strlen($user->alamat) > 50)
-                                                        <span class="text-blue-500">...</span>
-                                                    @endif
-                                                </div>
                                             </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                                                {{ $user->no_ktp }}
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                                                {{ $user->no_hp }}
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="text-sm text-gray-900">{{ $user->no_ktp }}</div>
                                             </td>
                                             <td class="px-6 py-4 whitespace-nowrap">
                                                 <span
-                                                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $user->jenis_kelamin == 'laki-laki' ? 'bg-blue-100 text-blue-800' : 'bg-pink-100 text-pink-800' }}">
-                                                    {{ $user->jenis_kelamin == 'laki-laki' ? 'Laki-laki' : 'Perempuan' }}
+                                                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $user->jenis_kelamin == 'Laki-laki' ? 'bg-blue-100 text-blue-800' : 'bg-pink-100 text-pink-800' }}">
+                                                    {{ $user->jenis_kelamin }}
                                                 </span>
                                             </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                                                {{ $user->pekerjaan }}
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="text-sm text-gray-900">{{ $user->no_hp }}</div>
+                                            </td>
+                                            <td class="px-6 py-4">
+                                                <div class="text-sm text-gray-900 max-w-xs truncate">{{ $user->alamat }}
+                                                </div>
                                             </td>
                                             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                                <button onclick="viewUser({{ $user->id }})"
-                                                    class="text-blue-600 hover:text-blue-900 mr-3">Detail</button>
-                                                <button onclick="resetPassword({{ $user->id }})"
-                                                    class="text-green-600 hover:text-green-900">Reset Password</button>
+                                                <a href="{{ route('admin.users.show', $user->id) }}"
+                                                    class="text-blue-600 hover:text-blue-900 mr-3">Detail</a>
                                             </td>
                                         </tr>
                                     @empty
@@ -273,8 +119,9 @@ class="text-green-600 hover:text-green-900">Reset Password</button>
                                                         d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z">
                                                     </path>
                                                 </svg>
-                                                <p class="text-lg font-medium">Belum ada user</p>
-                                                <p class="text-sm text-gray-400">Tidak ada data user yang tersedia</p>
+                                                <p class="text-lg font-medium">Belum ada user terdaftar</p>
+                                                <p class="text-sm text-gray-400">User akan muncul di sini setelah ada
+                                                    pendaftaran</p>
                                             </td>
                                         </tr>
                                     @endforelse
@@ -286,360 +133,110 @@ class="text-green-600 hover:text-green-900">Reset Password</button>
                         <div class="lg:hidden">
                             @forelse($users as $user)
                                 <div class="border-b border-gray-200 p-4 hover:bg-gray-50">
-                                    <!-- 4 Kolom Penting untuk Mobile -->
                                     <div class="grid grid-cols-2 gap-4 mb-3">
                                         <div>
                                             <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Nama</p>
-                                            <p class="text-sm font-medium text-gray-900">{{ $user->nama }}</p>
+                                            <div class="text-sm font-medium text-gray-900">{{ $user->nama }}</div>
                                         </div>
                                         <div>
-                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">No. KTP
-                                            </p>
-                                            <p class="text-sm text-gray-900">{{ $user->no_ktp }}</p>
-                                        </div>
-                                        <div>
-                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">No. HP
-                                            </p>
-                                            <p class="text-sm text-gray-900">{{ $user->no_hp }}</p>
+                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">NIK</p>
+                                            <div class="text-sm text-gray-900">{{ $user->no_ktp }}</div>
                                         </div>
                                         <div>
                                             <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Jenis
                                                 Kelamin</p>
                                             <span
-                                                class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $user->jenis_kelamin == 'laki-laki' ? 'bg-blue-100 text-blue-800' : 'bg-pink-100 text-pink-800' }}">
-                                                {{ $user->jenis_kelamin == 'laki-laki' ? 'Laki-laki' : 'Perempuan' }}
+                                                class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $user->jenis_kelamin == 'Laki-laki' ? 'bg-blue-100 text-blue-800' : 'bg-pink-100 text-pink-800' }}">
+                                                {{ $user->jenis_kelamin }}
                                             </span>
                                         </div>
+                                        <div>
+                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">No. HP</p>
+                                            <div class="text-sm text-gray-900">{{ $user->no_hp }}</div>
+                                        </div>
                                     </div>
 
-                                    <!-- Button Selengkapnya untuk Mobile -->
                                     <div class="border-t border-gray-100 pt-3">
-                                        <button onclick="toggleUserDetails({{ $user->id }})"
-                                            class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
-                                            <span id="user-btn-text-{{ $user->id }}">Selengkapnya</span>
-                                            <svg id="user-icon-{{ $user->id }}"
-                                                class="w-4 h-4 ml-1 transform transition-transform" fill="none"
-                                                stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M19 9l-7 7-7-7"></path>
-                                            </svg>
-                                        </button>
-
-                                        <!-- Detail Tambahan (Hidden by default) -->
-                                        <div id="user-details-{{ $user->id }}" class="hidden mt-3 space-y-2">
-                                            <div class="grid grid-cols-1 gap-2 text-sm">
-                                                <div>
-                                                    <span class="font-medium text-gray-700">Alamat:</span>
-                                                    <span class="text-gray-600">{{ $user->alamat }}</span>
-                                                </div>
-                                                <div>
-                                                    <span class="font-medium text-gray-700">Pekerjaan:</span>
-                                                    <span class="text-gray-600">{{ $user->pekerjaan }}</span>
-                                                </div>
-                                                <div class="flex space-x-2 pt-2">
-                                                    <button onclick="viewUser({{ $user->id }})"
-                                                        class="text-blue-600 hover:text-blue-900 text-sm font-medium">Detail</button>
-                                                    <button onclick="resetPassword({{ $user->id }})"
-                                                        class="text-green-600 hover:text-green-900 text-sm font-medium">Reset
-                                                        Password</button>
-                                                </div>
-                                            </div>
+                                        <div class="mb-2">
+                                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Alamat</p>
+                                            <div class="text-sm text-gray-900">{{ $user->alamat }}</div>
                                         </div>
+                                        <a href="{{ route('admin.users.show', $user->id) }}"
+                                            class="inline-flex items-center text-blue-600 hover:text-blue-900 text-sm font-medium">
+                                            Lihat Detail
+                                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor"
+                                                viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M9 5l7 7-7 7"></path>
+                                            </svg>
+                                        </a>
                                     </div>
                                 </div>
                             @empty
                                 <div class="p-8 text-center text-gray-500">
-                                    <svg class="w-12 h-12 mx-auto mb-4 text-gray-400" fill="none"
-                                        stroke="currentColor" viewBox="0 0 24 24">
+                                    <svg class="w-12 h-12 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor"
+                                        viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                             d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z">
                                         </path>
                                     </svg>
-                                    <p class="text-lg font-medium">Belum ada user</p>
-                                    <p class="text-sm text-gray-400">Tidak ada data user yang tersedia</p>
+                                    <p class="text-lg font-medium">Belum ada user terdaftar</p>
+                                    <p class="text-sm text-gray-400">User akan muncul di sini setelah ada pendaftaran</p>
                                 </div>
                             @endforelse
                         </div>
                     </div>
-                </div>
-            </div>
 
-            <!-- User Detail Modal -->
-            <div id="userModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
-                <div class="flex items-center justify-center min-h-screen p-4">
-                    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-screen overflow-y-auto">
-                        <div class="p-6">
-                            <div class="flex items-center justify-between mb-6">
-                                <h3 class="text-xl font-bold text-gray-900">Detail User</h3>
-                                <button onclick="closeUserModal()" class="text-gray-400 hover:text-gray-600">
-                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M6 18L18 6M6 6l12 12"></path>
-                                    </svg>
-                                </button>
-                            </div>
-
-                            <div id="userDetailContent">
-                                <!-- User detail content will be loaded here -->
-                            </div>
+                    <!-- Pagination -->
+                    @if ($users->hasPages())
+                        <div class="mt-6">
+                            {{ $users->links() }}
                         </div>
+                    @endif
+
+                    <!-- Show total count -->
+                    <div class="mt-4 text-sm text-gray-600 text-center">
+                        Total: {{ $users->total() }} user
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 
-            <!-- Reset Password Modal -->
-            <div id="resetPasswordModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
-                <div class="flex items-center justify-center min-h-screen p-4">
-                    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md">
-                        <div class="p-6">
-                            <div class="flex items-center justify-between mb-6">
-                                <h3 class="text-xl font-bold text-gray-900">Reset Password User</h3>
-                                <button onclick="closeResetPasswordModal()" class="text-gray-400 hover:text-gray-600">
-                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M6 18L18 6M6 6l12 12"></path>
-                                    </svg>
-                                </button>
-                            </div>
+    <!-- Logout Form -->
+    <form id="logout-form" method="POST" action="{{ route('logout') }}" class="hidden">
+        @csrf
+    </form>
 
-                            <form id="resetPasswordForm" class="space-y-6">
-                                @csrf
-                                <input type="hidden" id="resetUserId" name="user_id">
+    <script>
+        // Search functionality
+        document.getElementById('searchBtn').addEventListener('click', function() {
+            const searchTerm = document.getElementById('searchInput').value.trim();
+            if (searchTerm.length < 3) {
+                Swal.fire({
+                    icon: 'warning',
+                    title: 'Peringatan',
+                    text: 'Masukkan minimal 3 karakter untuk pencarian',
+                    confirmButtonColor: '#3B82F6'
+                });
+                return;
+            }
+            searchUsers(searchTerm);
+        });
 
-                                <div>
-                                    <label for="new_password" class="block text-sm font-medium text-gray-700 mb-2">
-                                        Password Baru
-                                    </label>
-                                    <input type="password" name="new_password" id="new_password" required
-                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
-                                        placeholder="Masukkan password baru (min. 8 karakter)">
-                                </div>
+        document.getElementById('searchInput').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                document.getElementById('searchBtn').click();
+            }
+        });
 
-                                <div class="flex justify-end space-x-3 pt-6">
-                                    <button type="button" onclick="closeResetPasswordModal()"
-                                        class="px-6 py-3 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 transition duration-200">
-                                        Batal
-                                    </button>
-                                    <button type="submit"
-                                        class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-xl font-medium transition duration-200">
-                                        Reset Password
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        function searchUsers(searchTerm) {
+            // Redirect to search with query parameter
+            const currentUrl = new URL(window.location);
+            currentUrl.searchParams.set('search', searchTerm);
+            window.location.href = currentUrl.toString();
+        }
+    </script>
 
-            @push('scripts')
-                <script>
-                    // Sidebar functionality
-                    document.addEventListener('DOMContentLoaded', function() {
-                        const sidebar = document.getElementById('sidebar');
-                        const sidebarToggle = document.getElementById('sidebar-toggle');
-                        const sidebarClose = document.getElementById('sidebar-close');
-                        const sidebarOverlay = document.getElementById('sidebar-overlay');
-
-                        // Toggle sidebar on mobile
-                        sidebarToggle.addEventListener('click', function() {
-                            sidebar.classList.remove('-translate-x-full');
-                            sidebarOverlay.classList.remove('hidden');
-                        });
-
-                        // Close sidebar
-                        sidebarClose.addEventListener('click', function() {
-                            sidebar.classList.add('-translate-x-full');
-                            sidebarOverlay.classList.add('hidden');
-                        });
-
-                        // Close sidebar when clicking overlay
-                        sidebarOverlay.addEventListener('click', function() {
-                            sidebar.classList.add('-translate-x-full');
-                            sidebarOverlay.classList.add('hidden');
-                        });
-                    });
-
-                    // View user detail
-                    function viewUser(userId) {
-                        fetch(`/admin/users/${userId}`)
-                            .then(response => response.text())
-                            .then(html => {
-                                document.getElementById('userDetailContent').innerHTML = html;
-                                document.getElementById('userModal').classList.remove('hidden');
-                                document.body.style.overflow = 'hidden';
-                            })
-                            .catch(error => {
-                                console.error('Error:', error);
-                                Swal.fire({
-                                    icon: 'error',
-                                    title: 'Error!',
-                                    text: 'Terjadi kesalahan saat memuat data user',
-                                    confirmButtonText: 'OK'
-                                });
-                            });
-                    }
-
-                    // Close user modal
-                    function closeUserModal() {
-                        document.getElementById('userModal').classList.add('hidden');
-                        document.body.style.overflow = 'auto';
-                    }
-
-                    // Reset password
-                    function resetPassword(userId) {
-                        document.getElementById('resetUserId').value = userId;
-                        document.getElementById('resetPasswordModal').classList.remove('hidden');
-                        document.body.style.overflow = 'hidden';
-                    }
-
-                    // Close reset password modal
-                    function closeResetPasswordModal() {
-                        document.getElementById('resetPasswordModal').classList.add('hidden');
-                        document.body.style.overflow = 'auto';
-                        document.getElementById('resetPasswordForm').reset();
-                    }
-
-                    // Close modals when clicking outside
-                    document.getElementById('userModal').addEventListener('click', function(e) {
-                        if (e.target === this) {
-                            closeUserModal();
-                        }
-                    });
-
-                    document.getElementById('resetPasswordModal').addEventListener('click', function(e) {
-                        if (e.target === this) {
-                            closeResetPasswordModal();
-                        }
-                    });
-
-                    // Reset password form submission
-                    document.getElementById('resetPasswordForm').addEventListener('submit', function(e) {
-                        e.preventDefault();
-
-                        const userId = document.getElementById('resetUserId').value;
-                        const newPassword = document.getElementById('new_password').value;
-
-                        if (newPassword.length < 8) {
-                            Swal.fire({
-                                icon: 'warning',
-                                title: 'Password Terlalu Pendek!',
-                                text: 'Password harus minimal 8 karakter.',
-                                confirmButtonText: 'OK',
-                                confirmButtonColor: '#F59E0B'
-                            });
-                            return;
-                        }
-
-                        const formData = new FormData(this);
-
-                        fetch(`/admin/users/${userId}/reset-password`, {
-                                method: 'POST',
-                                body: formData,
-                                headers: {
-                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
-                                }
-                            })
-                            .then(response => response.json())
-                            .then(data => {
-                                if (data.success) {
-                                    Swal.fire({
-                                        icon: 'success',
-                                        title: 'Berhasil!',
-                                        text: data.message,
-                                        confirmButtonText: 'OK'
-                                    }).then(() => {
-                                        closeResetPasswordModal();
-                                    });
-                                } else {
-                                    Swal.fire({
-                                        icon: 'error',
-                                        title: 'Error!',
-                                        text: data.message,
-                                        confirmButtonText: 'OK'
-                                    });
-                                }
-                            })
-                            .catch(error => {
-                                Swal.fire({
-                                    icon: 'error',
-                                    title: 'Error!',
-                                    text: 'Terjadi kesalahan saat reset password',
-                                    confirmButtonText: 'OK'
-                                });
-                            });
-                    });
-
-                    // Function to confirm logout
-                    function confirmLogout() {
-                        Swal.fire({
-                            title: 'Konfirmasi Logout',
-                            text: 'Apakah Anda yakin ingin keluar dari sistem?',
-                            icon: 'question',
-                            showCancelButton: true,
-                            confirmButtonText: 'Ya, Logout',
-                            cancelButtonText: 'Batal',
-                            confirmButtonColor: '#EF4444',
-                            cancelButtonColor: '#6B7280'
-                        }).then((result) => {
-                            if (result.isConfirmed) {
-                                const form = document.createElement('form');
-                                form.method = 'POST';
-                                form.action = '{{ route('logout') }}';
-
-                                const csrfToken = document.createElement('input');
-                                csrfToken.type = 'hidden';
-                                csrfToken.name = '_token';
-                                csrfToken.value = '{{ csrf_token() }}';
-
-                                form.appendChild(csrfToken);
-                                document.body.appendChild(form);
-                                form.submit();
-                            }
-                        });
-                    }
-
-                    // Show SweetAlert2 for success messages
-                    @if (session('success'))
-                        Swal.fire({
-                            icon: 'success',
-                            title: 'Berhasil!',
-                            text: '{{ session('success') }}',
-                            confirmButtonText: 'OK',
-                            confirmButtonColor: '#10B981',
-                            timer: 3000,
-                            timerProgressBar: true
-                        });
-                    @endif
-
-                    // Show SweetAlert2 for error messages
-                    @if (session('error'))
-                        Swal.fire({
-                            icon: 'error',
-                            title: 'Error!',
-                            text: '{{ session('error') }}',
-                            confirmButtonText: 'OK',
-                            confirmButtonColor: '#EF4444',
-                            timer: 4000,
-                            timerProgressBar: true
-                        });
-                    @endif
-
-                    // Function to toggle user details on mobile
-                    function toggleUserDetails(userId) {
-                        const detailsDiv = document.getElementById(`user-details-${userId}`);
-                        const buttonText = document.getElementById(`user-btn-text-${userId}`);
-                        const icon = document.getElementById(`user-icon-${userId}`);
-
-                        if (detailsDiv.classList.contains('hidden')) {
-                            detailsDiv.classList.remove('hidden');
-                            buttonText.textContent = 'Lebih Sedikit';
-                            icon.classList.remove('transform', 'rotate-180');
-                        } else {
-                            detailsDiv.classList.add('hidden');
-                            buttonText.textContent = 'Selengkapnya';
-                            icon.classList.add('transform', 'rotate-180');
-                        }
-                    }
-                </script>
-            @endpush
-        @endsection
+    @include('admin.partials.sidebar-script')
+@endsection
diff --git a/resources/views/dashboard/index.blade.php b/resources/views/dashboard/index.blade.php
index b7b321b..96f1266 100644
--- a/resources/views/dashboard/index.blade.php
+++ b/resources/views/dashboard/index.blade.php
@@ -634,9 +634,50 @@ function closeEditModal() {
                                 title: 'Berhasil!',
                                 text: data.message,
                                 confirmButtonText: 'OK',
-                                confirmButtonColor: '#10B981'
+                                confirmButtonColor: '#10B981',
+                                timer: 3000, // Auto close after 3 seconds
+                                timerProgressBar: true,
+                                showConfirmButton: false
                             }).then(() => {
-                                location.reload();
+                                // After success alert closes, show reminder alert
+                                Swal.fire({
+                                    icon: 'info',
+                                    title: 'Pengingat Penting!',
+                                    html: `
+                                    <div class="text-center">
+                                        <div class="mb-4">
+                                            <svg class="w-16 h-16 text-blue-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                            </svg>
+                                        </div>
+                                        <p class="text-lg font-semibold text-gray-800 mb-3">
+                                            Harap Hadir 30 Menit Sebelum Nomor Dipanggil!
+                                        </p>
+                                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+                                            <div class="flex items-center justify-center mb-2">
+                                                <svg class="w-5 h-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+                                                </svg>
+                                                <span class="font-medium text-blue-800">Tips:</span>
+                                            </div>
+                                            <ul class="text-sm text-blue-700 text-left space-y-1">
+                                                <li>• Pastikan membawa dokumen yang diperlukan</li>
+                                                <li>• Ikuti protokol kesehatan yang berlaku</li>
+                                                <li>• Tunggu di area yang ditentukan</li>
+                                            </ul>
+                                        </div>
+                                        <p class="text-sm text-gray-600">
+                                            Terima kasih telah menggunakan layanan kami!
+                                        </p>
+                                    </div>
+                                `,
+                                    confirmButtonText: 'Saya Mengerti',
+                                    confirmButtonColor: '#3B82F6',
+                                    allowOutsideClick: false,
+                                    allowEscapeKey: false
+                                }).then(() => {
+                                    location.reload();
+                                });
                             });
                         } else {
                             // Handle different error types
@@ -668,7 +709,7 @@ function closeEditModal() {
                                     confirmButtonText: 'OK',
                                     confirmButtonColor: '#F59E0B'
                                 });
-                                                         } else {
+                            } else {
                                 // Generic error
                                 Swal.fire({
                                     icon: 'error',
diff --git a/resources/views/vendor/pagination/bootstrap-4.blade.php b/resources/views/vendor/pagination/bootstrap-4.blade.php
new file mode 100644
index 0000000..63c6f56
--- /dev/null
+++ b/resources/views/vendor/pagination/bootstrap-4.blade.php
@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                        @else
+                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/tailwind.blade.php b/resources/views/vendor/pagination/tailwind.blade.php
new file mode 100644
index 0000000..e5b90b0
--- /dev/null
+++ b/resources/views/vendor/pagination/tailwind.blade.php
@@ -0,0 +1,130 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
+        <div class="flex justify-between flex-1 sm:hidden">
+            @if ($paginator->onFirstPage())
+                <span
+                    class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    {!! __('pagination.previous') !!}
+                </span>
+            @else
+                <a href="{{ $paginator->previousPageUrl() }}"
+                    class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.previous') !!}
+                </a>
+            @endif
+
+            @if ($paginator->hasMorePages())
+                <a href="{{ $paginator->nextPageUrl() }}"
+                    class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.next') !!}
+                </a>
+            @else
+                <span
+                    class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    {!! __('pagination.next') !!}
+                </span>
+            @endif
+        </div>
+
+        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+            <div>
+                <p class="text-sm text-gray-700 leading-5">
+                    {!! __('Showing') !!}
+                    @if ($paginator->firstItem())
+                        <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                        {!! __('to') !!}
+                        <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                    @else
+                        {{ $paginator->count() }}
+                    @endif
+                    {!! __('of') !!}
+                    <span class="font-medium">{{ $paginator->total() }}</span>
+                    {!! __('results') !!}
+                </p>
+            </div>
+
+            <div>
+                <span class="relative z-0 inline-flex shadow-sm rounded-md">
+                    {{-- Previous Page Link --}}
+                    @if ($paginator->onFirstPage())
+                        <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                            <span
+                                class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
+                                aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd"
+                                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @else
+                        <a href="{{ $paginator->previousPageUrl() }}" rel="prev"
+                            class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
+                            aria-label="{{ __('pagination.previous') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @endif
+
+                    {{-- Pagination Elements --}}
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <span aria-disabled="true">
+                                <span
+                                    class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
+                            </span>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <span aria-current="page">
+                                        <span
+                                            class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-white bg-blue-600 border border-blue-600 cursor-default leading-5">{{ $page }}</span>
+                                    </span>
+                                @else
+                                    <a href="{{ $url }}"
+                                        class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+                                        aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                        {{ $page }}
+                                    </a>
+                                @endif
+                            @endforeach
+                        @endif
+
+                        {{-- Next Page Link --}}
+                        @if ($paginator->hasMorePages())
+                            <a href="{{ $paginator->nextPageUrl() }}" rel="next"
+                                class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
+                                aria-label="{{ __('pagination.next') }}">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd"
+                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                            </a>
+                        @else
+                            <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                                <span
+                                    class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5"
+                                    aria-hidden="true">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd"
+                                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                            clip-rule="evenodd" />
+                                    </svg>
+                                </span>
+                            </span>
+                        @endif
+                    @endforeach
+                </span>
+            </div>
+        </div>
+    </nav>
+@endif
diff --git a/routes/web.php b/routes/web.php
index 0e19f65..ece8bbe 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -80,6 +80,9 @@
     Route::get('/admin/laporan/export-excel', [AdminController::class, 'exportExcel'])->name('admin.laporan.export-excel');
 
     // Antrian Routes
+    Route::get('/admin/antrian/tambah', [AdminController::class, 'tambahAntrian'])->name('admin.antrian.tambah');
+    Route::post('/admin/antrian/cari-user', [AdminController::class, 'cariUser'])->name('admin.antrian.cari-user');
+    Route::post('/admin/antrian/store', [AdminController::class, 'storeAntrianAdmin'])->name('admin.antrian.store');
     Route::get('/admin/antrian/{antrian}/cetak', [AdminController::class, 'cetakAntrian'])->name('admin.antrian.cetak');
 
     // TTS Routes