From b4d73f7d4d637eb708bfd253be36fe9ad73d4412 Mon Sep 17 00:00:00 2001
From: Stephen Gesityan <sgesityan@gmail.com>
Date: Sat, 10 May 2025 18:15:10 +0700
Subject: [PATCH] Update

---
 resources/views/account/settings.blade.php | 371 ++++++++++-----------
 resources/views/layouts/admin.blade.php    | 125 ++++---
 resources/views/layouts/main.blade.php     |   6 -
 resources/views/pages/venue.blade.php      |  79 ++++-
 4 files changed, 313 insertions(+), 268 deletions(-)

diff --git a/resources/views/account/settings.blade.php b/resources/views/account/settings.blade.php
index 61a4d5d..507f466 100644
--- a/resources/views/account/settings.blade.php
+++ b/resources/views/account/settings.blade.php
@@ -1,245 +1,226 @@
-@extends('layouts.app')
+@extends('layouts.main')
 
 @section('content')
-<div class="py-12 animated-bg">
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card shadow-lg border-0 rounded-3 overflow-hidden">
-                    <div class="card-header bg-gradient-to-r from-indigo-600 to-blue-500 text-white p-3">
-                        <h2 class="mb-0 d-flex align-items-center">
-                            <i class="fas fa-user-cog me-2"></i>{{ __('Account Settings') }}
-                        </h2>
-                    </div>
-                    <div class="card-body p-4">
+    <div class="min-h-screen bg-gray-50 py-12">
+        <div class="container mx-auto px-4 lg:px-44">
+            <div class="flex justify-center">
+                <div class="w-full max-w-2xl">
+                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-4">
+                            <h2 class="text-xl font-semibold text-white flex items-center">
+                                <i class="fas fa-user-cog mr-2"></i>{{ __('Pengaturan Akun') }}
+                            </h2>
+                        </div>
+                        <div class="p-6">
 
-                        @if (session('message'))
-                            <div class="alert alert-success d-flex align-items-center border-0 shadow-sm mb-4" role="alert">
-                                <div class="me-2">
-                                    <i class="fas fa-check-circle"></i>
-                                </div>
-                                <div>
-                                    {{ session('message') }}
-                                </div>
-                            </div>
-                        @endif
-
-                        @if (session('success'))
-                            <div class="alert alert-success d-flex align-items-center border-0 shadow-sm mb-4" role="alert">
-                                <div class="me-2">
-                                    <i class="fas fa-check-circle"></i>
-                                </div>
-                                <div>
-                                    {{ session('success') }}
-                                </div>
-                            </div>
-                        @endif
-
-                        <form method="POST" action="{{ route('account.update') }}">
-                            @csrf
-                            @method('PUT')
-
-                            <!-- Name -->
-                            <div class="mb-4">
-                                <label for="name" class="form-label fw-medium">
-                                    <i class="fas fa-user text-primary me-1"></i>{{ __('Name') }}
-                                </label>
-                                <div class="input-group">
-                                    <span class="input-group-text bg-light">
-                                        <i class="fas fa-user-edit"></i>
-                                    </span>
-                                    <input id="name" type="text" name="name" value="{{ old('name', $user->name) }}"
-                                        required autofocus class="form-control border-start-0"
-                                        placeholder="Enter your name">
-                                </div>
-                                @error('name')
-                                    <div class="text-danger mt-1 small"><i
-                                            class="fas fa-exclamation-circle me-1"></i>{{ $message }}</div>
-                                @enderror
-                            </div>
-
-                            <!-- Email -->
-                            <div class="mb-4">
-                                <label for="email" class="form-label fw-medium">
-                                    <i class="fas fa-envelope text-primary me-1"></i>{{ __('Email') }}
-                                </label>
-                                <div class="input-group">
-                                    <span class="input-group-text bg-light">
-                                        <i class="fas fa-at"></i>
-                                    </span>
-                                    <input id="email" type="email" name="email" value="{{ old('email', $user->email) }}"
-                                        required class="form-control border-start-0" placeholder="Enter your email">
-                                </div>
-                                @error('email')
-                                    <div class="text-danger mt-1 small"><i
-                                            class="fas fa-exclamation-circle me-1"></i>{{ $message }}</div>
-                                @enderror
-                                @if ($user->email)
-                                    <div class="mt-2 small d-flex align-items-center">
-                                        @if ($user->hasVerifiedEmail())
-                                            <span class="text-success d-flex align-items-center">
-                                                <i class="fas fa-check-circle me-1"></i> {{ __('Email verified') }}
-                                            </span>
-                                        @else
-                                            <span class="text-warning d-flex align-items-center">
-                                                <i class="fas fa-exclamation-circle me-1"></i> {{ __('Not Verified') }}
-                                            </span>
-                                            <a href="{{ route('verification.resend') }}"
-                                                class="ms-2 text-primary text-decoration-none">
-                                                {{ __('Resend verification email') }}
-                                            </a>
-                                        @endif
+                            @if (session('message') || session('success'))
+                                <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4 rounded-md flex items-center"
+                                    role="alert">
+                                    <div class="mr-2">
+                                        <i class="fas fa-check-circle"></i>
+                                    </div>
+                                    <div>
+                                        {{ session('message') ?? session('success') }}
                                     </div>
-                                @endif
-                            </div>
-
-                            <div class="card mt-4 mb-4 shadow-sm border-0">
-                                <div class="card-header bg-light">
-                                    <h3 class="mb-0 fs-5 fw-semibold text-primary">
-                                        <i class="fas fa-lock me-2"></i>{{ __('Change Password') }}
-                                    </h3>
                                 </div>
-                                <div class="card-body">
+                            @endif
+
+                            <form method="POST" action="{{ route('account.update') }}" class="space-y-6">
+                                @csrf
+                                @method('PUT')
+
+                                <!-- Name -->
+                                <div>
+                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
+                                        <i class="fas fa-user text-blue-600 mr-1"></i>{{ __('Nama') }}
+                                    </label>
+                                    <div class="flex rounded-md shadow-sm">
+                                        <span
+                                            class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
+                                            <i class="fas fa-user-edit"></i>
+                                        </span>
+                                        <input id="name" type="text" name="name" value="{{ old('name', $user->name) }}"
+                                            required autofocus
+                                            class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none rounded-r-md border-gray-300 p-1"
+                                            placeholder="Masukkan nama">
+                                    </div>
+                                    @error('name')
+                                        <div class="text-red-500 mt-1 text-sm"><i
+                                                class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</div>
+                                    @enderror
+                                </div>
+
+                                <!-- Email -->
+                                <div>
+                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
+                                        <i class="fas fa-envelope text-blue-600 mr-1"></i>{{ __('Email') }}
+                                    </label>
+                                    <div class="flex rounded-md shadow-sm">
+                                        <span
+                                            class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
+                                            <i class="fas fa-at"></i>
+                                        </span>
+                                        <input id="email" type="email" name="email" value="{{ old('email', $user->email) }}"
+                                            required
+                                            class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none rounded-r-md border-gray-300 p-1"
+                                            placeholder="Masukkan email">
+                                    </div>
+                                    @error('email')
+                                        <div class="text-red-500 mt-1 text-sm"><i
+                                                class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</div>
+                                    @enderror
+                                    @if ($user->email)
+                                        <div class="mt-2 text-sm flex items-center">
+                                            @if ($user->hasVerifiedEmail())
+                                                <span class="text-green-600 flex items-center">
+                                                    <i class="fas fa-check-circle mr-1"></i> {{ __('Email terverifikasi') }}
+                                                </span>
+                                            @else
+                                                <span class="text-yellow-600 flex items-center">
+                                                    <i class="fas fa-exclamation-circle mr-1"></i> {{ __('Belum Terverifikasi') }}
+                                                </span>
+                                                <a href="{{ route('verification.resend') }}"
+                                                    class="ml-2 text-blue-600 hover:underline">
+                                                    {{ __('Kirim ulang email verifikasi') }}
+                                                </a>
+                                            @endif
+                                        </div>
+                                    @endif
+                                </div>
+
+                                <div class="bg-gray-50 rounded-lg p-4 mt-6 mb-6">
+                                    <h3 class="text-lg font-semibold text-blue-600 mb-4 flex items-center">
+                                        <i class="fas fa-lock mr-2"></i>{{ __('Ubah Password') }}
+                                    </h3>
+
                                     <!-- Current Password -->
-                                    <div class="mb-3">
-                                        <label for="current_password" class="form-label fw-medium">
-                                            <i class="fas fa-key text-primary me-1"></i>{{ __('Current Password') }}
+                                    <div class="mb-4">
+                                        <label for="current_password" class="block text-sm font-medium text-gray-700 mb-1">
+                                            <i class="fas fa-key text-blue-600 mr-1"></i>{{ __('Password Saat Ini') }}
                                         </label>
-                                        <div class="input-group">
-                                            <span class="input-group-text bg-light">
+                                        <div class="flex rounded-md shadow-sm">
+                                            <span
+                                                class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
                                                 <i class="fas fa-lock"></i>
                                             </span>
                                             <input id="current_password" type="password" name="current_password"
-                                                class="form-control border-start-0"
-                                                placeholder="Enter current password">
-                                            <button class="btn btn-outline-secondary" type="button"
-                                                id="toggleCurrentPassword">
+                                                class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none border-gray-300 p-1"
+                                                placeholder="Masukkan password saat ini">
+                                            <button type="button" id="toggleCurrentPassword"
+                                                class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100">
                                                 <i class="fas fa-eye"></i>
                                             </button>
                                         </div>
                                         @error('current_password')
-                                            <div class="text-danger mt-1 small"><i
-                                                    class="fas fa-exclamation-circle me-1"></i>{{ $message }}</div>
+                                            <div class="text-red-500 mt-1 text-sm"><i
+                                                    class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</div>
                                         @enderror
                                     </div>
 
                                     <!-- New Password -->
-                                    <div class="mb-3">
-                                        <label for="password" class="form-label fw-medium">
-                                            <i class="fas fa-lock-open text-primary me-1"></i>{{ __('New Password') }}
+                                    <div class="mb-4">
+                                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
+                                            <i class="fas fa-lock-open text-blue-600 mr-1"></i>{{ __('Password Baru') }}
                                         </label>
-                                        <div class="input-group">
-                                            <span class="input-group-text bg-light">
+                                        <div class="flex rounded-md shadow-sm">
+                                            <span
+                                                class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
                                                 <i class="fas fa-key"></i>
                                             </span>
                                             <input id="password" type="password" name="password"
-                                                class="form-control border-start-0" placeholder="Enter new password">
-                                            <button class="btn btn-outline-secondary" type="button"
-                                                id="toggleNewPassword">
+                                                class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none border-gray-300 p-1"
+                                                placeholder="Masukkan password baru">
+                                            <button type="button" id="toggleNewPassword"
+                                                class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100">
                                                 <i class="fas fa-eye"></i>
                                             </button>
                                         </div>
                                         @error('password')
-                                            <div class="text-danger mt-1 small"><i 
-                                                class="fas fa-exclamation-circle me-1"></i>{{ $message }}</div>
+                                            <div class="text-red-500 mt-1 text-sm"><i
+                                                    class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</div>
                                         @enderror
                                     </div>
 
                                     <!-- Confirm New Password -->
-                                    <div class="mb-3">
-                                        <label for="password_confirmation" class="form-label fw-medium">
-                                            <i class="fas fa-check-double text-primary me-1"></i>{{ __('Confirm New Password') }}
+                                    <div>
+                                        <label for="password_confirmation"
+                                            class="block text-sm font-medium text-gray-700 mb-1">
+                                            <i
+                                                class="fas fa-check-double text-blue-600 mr-1"></i>{{ __('Konfirmasi Password Baru') }}
                                         </label>
-                                        <div class="input-group">
-                                            <span class="input-group-text bg-light">
+                                        <div class="flex rounded-md shadow-sm">
+                                            <span
+                                                class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
                                                 <i class="fas fa-key"></i>
                                             </span>
                                             <input id="password_confirmation" type="password" name="password_confirmation"
-                                                class="form-control border-start-0" placeholder="Confirm new password">
-                                            <button class="btn btn-outline-secondary" type="button"
-                                                id="toggleConfirmPassword">
+                                                class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none border-gray-300 p-1"
+                                                placeholder="Konfirmasi password baru">
+                                            <button type="button" id="toggleConfirmPassword"
+                                                class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100">
                                                 <i class="fas fa-eye"></i>
                                             </button>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div class="d-flex justify-content-end mt-4">
-                                <button type="submit"
-                                    class="btn btn-primary-custom d-flex align-items-center">
-                                    <i class="fas fa-save me-2"></i>{{ __('Update Account') }}
-                                </button>
-                            </div>
-                        </form>
+                                <div class="flex justify-end mt-6">
+                                    <button type="submit"
+                                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center transition">
+                                        <i class="fas fa-save mr-2"></i>{{ __('Simpan Perubahan') }}
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
 
-<style>
-    @keyframes fade-in-down {
-        0% {
-            opacity: 0;
-            transform: translateY(-10px);
-        }
+    <script>
+        // Toggle password visibility
+        document.addEventListener('DOMContentLoaded', function () {
+            const toggleCurrentPassword = document.getElementById('toggleCurrentPassword');
+            const toggleNewPassword = document.getElementById('toggleNewPassword');
+            const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
 
-        100% {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
+            const currentPassword = document.getElementById('current_password');
+            const newPassword = document.getElementById('password');
+            const confirmPassword = document.getElementById('password_confirmation');
 
-    .animate-fade-in-down {
-        animation: fade-in-down 0.5s ease-out;
-    }
-</style>
-
-<script>
-    // Toggle password visibility
-    document.addEventListener('DOMContentLoaded', function() {
-        const toggleCurrentPassword = document.getElementById('toggleCurrentPassword');
-        const toggleNewPassword = document.getElementById('toggleNewPassword');
-        const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
-        
-        const currentPassword = document.getElementById('current_password');
-        const newPassword = document.getElementById('password');
-        const confirmPassword = document.getElementById('password_confirmation');
-        
-        if(toggleCurrentPassword) {
-            toggleCurrentPassword.addEventListener('click', function() {
-                togglePasswordVisibility(currentPassword, this);
-            });
-        }
-        
-        if(toggleNewPassword) {
-            toggleNewPassword.addEventListener('click', function() {
-                togglePasswordVisibility(newPassword, this);
-            });
-        }
-        
-        if(toggleConfirmPassword) {
-            toggleConfirmPassword.addEventListener('click', function() {
-                togglePasswordVisibility(confirmPassword, this);
-            });
-        }
-        
-        function togglePasswordVisibility(input, button) {
-            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
-            input.setAttribute('type', type);
-            
-            // Toggle icon
-            const icon = button.querySelector('i');
-            if (type === 'text') {
-                icon.classList.remove('fa-eye');
-                icon.classList.add('fa-eye-slash');
-            } else {
-                icon.classList.remove('fa-eye-slash');
-                icon.classList.add('fa-eye');
+            if (toggleCurrentPassword) {
+                toggleCurrentPassword.addEventListener('click', function () {
+                    togglePasswordVisibility(currentPassword, this);
+                });
             }
-        }
-    });
-</script>
+
+            if (toggleNewPassword) {
+                toggleNewPassword.addEventListener('click', function () {
+                    togglePasswordVisibility(newPassword, this);
+                });
+            }
+
+            if (toggleConfirmPassword) {
+                toggleConfirmPassword.addEventListener('click', function () {
+                    togglePasswordVisibility(confirmPassword, this);
+                });
+            }
+
+            function togglePasswordVisibility(input, button) {
+                const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
+                input.setAttribute('type', type);
+
+                // Toggle icon
+                const icon = button.querySelector('i');
+                if (type === 'text') {
+                    icon.classList.remove('fa-eye');
+                    icon.classList.add('fa-eye-slash');
+                } else {
+                    icon.classList.remove('fa-eye-slash');
+                    icon.classList.add('fa-eye');
+                }
+            }
+        });
+    </script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index 0af06aa..451fb01 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -12,15 +12,18 @@
         body {
             font-family: 'Inter', sans-serif;
         }
+
         .nav-item {
             transition: all 0.3s ease;
         }
+
         .nav-item.active {
             position: relative;
             background-color: rgb(239, 246, 255);
             color: rgb(37, 99, 235);
             font-weight: 500;
         }
+
         .nav-item.active::before {
             content: '';
             position: absolute;
@@ -31,10 +34,12 @@
             background-color: rgb(37, 99, 235);
             border-radius: 0 4px 4px 0;
         }
+
         .nav-item:hover:not(.active) {
             background-color: rgb(249, 250, 251);
             color: rgb(55, 65, 81);
         }
+
         .dropdown-transition {
             transition: all 0.2s ease-out;
         }
@@ -44,89 +49,100 @@
 <body x-data="{ sidebarOpen: true, userDropdownOpen: false }" class="bg-gray-50">
     <div class="flex h-screen overflow-hidden">
         <!-- Sidebar Overlay -->
-        <div x-show="sidebarOpen" @click="sidebarOpen = false" class="fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden"></div>
+        <div x-show="sidebarOpen" @click="sidebarOpen = false"
+            class="fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden"></div>
 
         <!-- Sidebar -->
-        <div :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0 lg:w-20'" 
+        <div :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0 lg:w-20'"
             class="fixed inset-y-0 left-0 z-30 w-64 bg-white shadow-lg transition-all duration-300 transform lg:relative lg:translate-x-0">
-            
+
             <!-- Sidebar Header -->
             <div class="flex items-center justify-between h-16 px-4 border-b">
                 <div class="flex items-center space-x-2">
                     <div class="p-2 bg-blue-600 rounded-lg">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none"
+                            viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M13 10V3L4 14h7v7l9-11h-7z" />
                         </svg>
                     </div>
                     <span class="font-bold text-lg text-gray-800" x-show="sidebarOpen">VenueApp</span>
                 </div>
                 <button @click="sidebarOpen = !sidebarOpen" class="p-1 rounded-md hover:bg-gray-100 focus:outline-none">
-                    <svg x-show="sidebarOpen" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                    <svg x-show="sidebarOpen" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500"
+                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                     </svg>
-                    <svg x-show="!sidebarOpen" class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+                    <svg x-show="!sidebarOpen" class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor"
+                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M4 6h16M4 12h16m-7 6h7"></path>
                     </svg>
                 </button>
             </div>
 
             <!-- Navigation -->
             <div class="px-2 py-4">
-                <div x-show="sidebarOpen" class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 mb-2">
+                <div x-show="sidebarOpen"
+                    class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 mb-2">
                     Menu Utama
                 </div>
                 <nav class="space-y-1">
-                    <a href="{{ route('admin.dashboard') }}" 
-                       class="nav-item flex items-center px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                    <a href="{{ route('admin.dashboard') }}"
+                        class="nav-item flex items-center px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                         </svg>
                         <span x-show="sidebarOpen">Dashboard</span>
                     </a>
-                    
-                    <a href="{{ route('admin.tables.index') }}" 
-                       class="nav-item flex items-center px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.tables.*') ? 'active' : '' }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+
+                    <a href="{{ route('admin.tables.index') }}"
+                        class="nav-item flex items-center px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.tables.*') ? 'active' : '' }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                         </svg>
                         <span x-show="sidebarOpen">Kelola Meja</span>
                     </a>
-                    
-                    <a href="{{ route('admin.bookings.index') }}" 
-                       class="nav-item flex items-center px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.bookings.*') ? 'active' : '' }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+
+                    <a href="{{ route('admin.bookings.index') }}"
+                        class="nav-item flex items-center px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.bookings.*') ? 'active' : '' }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                         </svg>
                         <span x-show="sidebarOpen">Daftar Booking</span>
                     </a>
-
-                    <a href="#" 
-                       class="nav-item flex items-center px-3 py-2.5 rounded-lg">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <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 7a4 4 0 11-8 0 4 4 0 018 0z" />
-                        </svg>
-                        <span x-show="sidebarOpen">Data User</span>
-                    </a>
                 </nav>
 
-                <div x-show="sidebarOpen" class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 mb-2 mt-6">
+                <div x-show="sidebarOpen"
+                    class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 mb-2 mt-6">
                     Sistem
                 </div>
                 <nav class="space-y-1">
-                    <a href="#" 
-                       class="nav-item flex items-center px-3 py-2.5 rounded-lg">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                    <a href="#" class="nav-item flex items-center px-3 py-2.5 rounded-lg">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                         </svg>
                         <span x-show="sidebarOpen">Notifikasi</span>
-                        <span class="ml-auto bg-red-500 text-white px-2 py-0.5 rounded-full text-xs" x-show="sidebarOpen">3</span>
+                        <span class="ml-auto bg-red-500 text-white px-2 py-0.5 rounded-full text-xs"
+                            x-show="sidebarOpen">3</span>
                     </a>
-                    
-                    <a href="#" 
-                       class="nav-item flex items-center px-3 py-2.5 rounded-lg">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+
+                    <a href="#" class="nav-item flex items-center px-3 py-2.5 rounded-lg">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                         </svg>
                         <span x-show="sidebarOpen">Pengaturan</span>
                     </a>
@@ -138,7 +154,8 @@ class="nav-item flex items-center px-3 py-2.5 rounded-lg">
                 <div x-data="{ open: false }" class="relative p-4">
                     <button @click="open = !open" class="flex items-center w-full text-left focus:outline-none">
                         <div class="flex-shrink-0">
-                            <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold">
+                            <div
+                                class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold">
                                 {{ substr(auth()->user()->name, 0, 1) }}
                             </div>
                         </div>
@@ -146,19 +163,22 @@ class="nav-item flex items-center px-3 py-2.5 rounded-lg">
                             <p class="text-sm font-medium text-gray-800 truncate">{{ auth()->user()->name }}</p>
                             <p class="text-xs text-gray-500 truncate">{{ auth()->user()->email }}</p>
                         </div>
-                        <svg x-show="sidebarOpen" xmlns="http://www.w3.org/2000/svg" class="ml-auto h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg x-show="sidebarOpen" xmlns="http://www.w3.org/2000/svg"
+                            class="ml-auto h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                         </svg>
                     </button>
 
                     <!-- Dropdown -->
-                    <div x-show="open" @click.outside="open = false" class="absolute bottom-full left-0 mb-1 w-full bg-white rounded-lg shadow-lg border border-gray-200 py-1 dropdown-transition">
+                    <div x-show="open" @click.outside="open = false"
+                        class="absolute bottom-full left-0 mb-1 w-full bg-white rounded-lg shadow-lg border border-gray-200 py-1 dropdown-transition">
                         <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
                         <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
                         <div class="border-t border-gray-200 my-1"></div>
                         <form method="POST" action="{{ route('logout') }}">
                             @csrf
-                            <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
+                            <button type="submit"
+                                class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                 Logout
                             </button>
                         </form>
@@ -172,9 +192,12 @@ class="nav-item flex items-center px-3 py-2.5 rounded-lg">
             <!-- Top Header -->
             <header class="bg-white shadow-sm lg:hidden">
                 <div class="px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
-                    <button @click="sidebarOpen = !sidebarOpen" class="p-1 rounded-md text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 lg:hidden">
-                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                    <button @click="sidebarOpen = !sidebarOpen"
+                        class="p-1 rounded-md text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 lg:hidden">
+                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 6h16M4 12h16M4 18h16"></path>
                         </svg>
                     </button>
                     <div class="lg:hidden">
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index 1d0bc34..68aa645 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -28,8 +28,6 @@
             </a>
 
             <div class="flex items-center space-x-4">
-                <a href="#"><i class="fa fa-shopping-cart text-xl text-gray-700"></i></a>
-
                 <!-- Mobile hamburger -->
                 <button @click="isMobileMenuOpen = !isMobileMenuOpen"
                     class="block lg:hidden border-l pl-4 border-gray-300 focus:outline-none">
@@ -159,10 +157,6 @@ class="w-full border px-4 py-2 rounded" required>
 
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <input class="mr-2" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
-                            <label class="text-sm text-gray-600" for="remember">
-                                Ingat saya
-                            </label>
                         </div>
                         <a href="{{ route('password.request') }}" class="text-sm text-primary hover:underline">
                             Lupa Password?
diff --git a/resources/views/pages/venue.blade.php b/resources/views/pages/venue.blade.php
index 9f1316a..d081b06 100644
--- a/resources/views/pages/venue.blade.php
+++ b/resources/views/pages/venue.blade.php
@@ -142,6 +142,9 @@ class="border rounded-lg shadow-md p-4 mb-4">
     <script src="https://app.sandbox.midtrans.com/snap/snap.js"
         data-client-key="{{ config('midtrans.client_key') }}"></script>
     <script>
+        // Custom event for refreshing pending bookings across components
+        const refreshPendingBookingsEvent = new Event('refresh-pending-bookings');
+
         function updateClock() {
             const now = new Date();
             const options = { timeZone: 'Asia/Jakarta', hour12: false };
@@ -153,28 +156,36 @@ function updateClock() {
 
         // Format functions for pending bookings
         function formatDateTime(dateTimeStr) {
-            const date = new Date(dateTimeStr);
-            // Explicitly use Jakarta timezone for display
-            return new Intl.DateTimeFormat('id-ID', {
+            // Parse the ISO date string without timezone conversion
+            const parts = dateTimeStr.split(/[^0-9]/);
+            const year = parseInt(parts[0]);
+            const month = parseInt(parts[1]) - 1; // JS months are 0-based
+            const day = parseInt(parts[2]);
+            const hour = parseInt(parts[3]);
+            const minute = parseInt(parts[4]);
+
+            const dateFormatter = new Intl.DateTimeFormat('id-ID', {
                 day: '2-digit',
                 month: 'short',
                 year: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: false,
-                timeZone: 'Asia/Jakarta'
-            }).format(date);
+            });
+
+            // Format the date and time separately to avoid timezone issues
+            const dateObj = new Date(year, month, day);
+            return dateFormatter.format(dateObj) + ' ' +
+                (hour.toString().padStart(2, '0') + ':' +
+                    minute.toString().padStart(2, '0'));
         }
 
         function formatTime(timeStr) {
-            const date = new Date(timeStr);
-            // Explicitly use Jakarta timezone for display
-            return new Intl.DateTimeFormat('id-ID', {
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: false,
-                timeZone: 'Asia/Jakarta'
-            }).format(date);
+            // Parse the ISO date string without timezone conversion
+            const parts = timeStr.split(/[^0-9]/);
+            const hour = parseInt(parts[3]);
+            const minute = parseInt(parts[4]);
+
+            // Format time manually to avoid timezone issues
+            return hour.toString().padStart(2, '0') + ':' +
+                minute.toString().padStart(2, '0');
         }
 
         function formatPrice(price) {
@@ -190,6 +201,13 @@ function formatPrice(price) {
 
                 init() {
                     this.fetchPendingBookings();
+
+                    // Listen for the custom event to refresh pending bookings
+                    document.addEventListener('refresh-pending-bookings', () => {
+                        console.log('Refreshing pending bookings from event');
+                        this.fetchPendingBookings();
+                        this.showPendingBookings = true; // Auto-expand the section
+                    });
                 },
 
                 fetchPendingBookings() {
@@ -208,6 +226,13 @@ function formatPrice(price) {
 
                             // Log jumlah pending bookings yang ditemukan
                             console.log("Found", this.pendingBookings.length, "pending bookings");
+
+                            // If we have pending bookings and this was triggered by payment cancellation,
+                            // make sure to show them
+                            if (this.pendingBookings.length > 0 && window.justClosedPayment) {
+                                this.showPendingBookings = true;
+                                window.justClosedPayment = false;
+                            }
                         })
                         .catch(error => console.error('Error fetching pending bookings:', error));
                 },
@@ -392,6 +417,9 @@ function formatPrice(price) {
                     const start_time = `${today} ${selectedTime}`;
                     const end_time = `${today} ${endTimeFormatted}`;
 
+                    // Track that we're creating a new booking
+                    window.creatingNewBooking = true;
+
                     // Kirim ke backend untuk membuat payment intent (tanpa membuat booking dulu)
                     fetch('/booking/payment-intent', {
                         method: 'POST',
@@ -430,10 +458,24 @@ function formatPrice(price) {
                                 onError: (result) => {
                                     alert('Pembayaran gagal');
                                     this.isLoading = false;
+                                    // Reset the state
+                                    window.creatingNewBooking = false;
                                 },
                                 onClose: () => {
                                     alert('Anda menutup popup tanpa menyelesaikan pembayaran');
                                     this.isLoading = false;
+
+                                    // Set flag to indicate payment popup was just closed
+                                    window.justClosedPayment = true;
+
+                                    // Only trigger the refresh if we were creating a new booking
+                                    if (window.creatingNewBooking) {
+                                        // Reset the flag
+                                        window.creatingNewBooking = false;
+
+                                        // Dispatch the custom event to refresh pending bookings
+                                        document.dispatchEvent(refreshPendingBookingsEvent);
+                                    }
                                 }
                             });
                         })
@@ -441,6 +483,7 @@ function formatPrice(price) {
                             console.error('Payment intent error:', err);
                             alert('Gagal membuat payment: ' + err.message);
                             this.isLoading = false;
+                            window.creatingNewBooking = false;
                         });
                 },
 
@@ -470,6 +513,9 @@ function formatPrice(price) {
                         .then(data => {
                             alert('Pembayaran dan booking berhasil!');
 
+                            // Reset the flag
+                            window.creatingNewBooking = false;
+
                             // Refresh component data
                             document.dispatchEvent(new CustomEvent('booking-completed'));
 
@@ -480,6 +526,7 @@ function formatPrice(price) {
                             console.error('Booking error:', err);
                             alert('Pembayaran berhasil tetapi gagal menyimpan booking: ' + err.message);
                             this.isLoading = false;
+                            window.creatingNewBooking = false;
                         });
                 },