diff --git a/app/Http/Controllers/superadmin/SuperAdminController.php b/app/Http/Controllers/superadmin/SuperAdminController.php
index a232157..045d640 100644
--- a/app/Http/Controllers/superadmin/SuperAdminController.php
+++ b/app/Http/Controllers/superadmin/SuperAdminController.php
@@ -5,8 +5,11 @@
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
 use App\Models\User;
+use App\Models\Booking;
 use App\Models\Venue;
 use App\Models\Table;
+use Carbon\Carbon;
+use Illuminate\Support\Facades\DB;
 
 class SuperAdminController extends Controller
 {
@@ -17,19 +20,63 @@ class SuperAdminController extends Controller
      */
     public function index()
     {
-        // Menghitung jumlah admin, venue, user, venue aktif, dan meja
+        // Basic counts
         $adminCount = User::where('role', 'admin')->count();
         $venueCount = Venue::count();
         $userCount = User::where('role', 'user')->count();
-        // $activeVenueCount = Venue::where('status', 'active')->count();
         $tableCount = Table::count();
 
+        // Revenue comparison for current month
+        $currentMonth = Carbon::now()->startOfMonth();
+        $revenueData = $this->getMonthlyRevenueByVenue($currentMonth);
+
+        // Popular venues ranking data
+        $popularVenuesData = $this->getPopularVenuesData($currentMonth);
+
         return view('superadmin.dashboard', compact(
             'adminCount',
             'venueCount',
             'userCount',
-            // 'activeVenueCount',
-            'tableCount'
+            'tableCount',
+            'revenueData',
+            'popularVenuesData'
         ));
     }
+
+    /**
+     * Get monthly revenue by venue for chart
+     */
+    private function getMonthlyRevenueByVenue($startDate)
+    {
+        return Venue::leftJoin('tables', 'venues.id', '=', 'tables.venue_id')
+            ->leftJoin('bookings', function($join) use ($startDate) {
+                $join->on('tables.id', '=', 'bookings.table_id')
+                     ->where('bookings.status', 'paid')
+                     ->where('bookings.created_at', '>=', $startDate)
+                     ->where('bookings.created_at', '<', $startDate->copy()->endOfMonth());
+            })
+            ->select('venues.name as venue_name', 
+                    DB::raw('COALESCE(SUM(bookings.total_amount), 0) as total_revenue'))
+            ->groupBy('venues.id', 'venues.name')
+            ->get();
+    }
+
+    /**
+     * Get popular venues data for ranking
+     */
+    private function getPopularVenuesData($startDate)
+    {
+        return Venue::leftJoin('tables', 'venues.id', '=', 'tables.venue_id')
+            ->leftJoin('bookings', function($join) use ($startDate) {
+                $join->on('tables.id', '=', 'bookings.table_id')
+                     ->where('bookings.status', 'paid')
+                     ->where('bookings.created_at', '>=', $startDate)
+                     ->where('bookings.created_at', '<', $startDate->copy()->endOfMonth());
+            })
+            ->select('venues.name as venue_name',
+                    DB::raw('COALESCE(COUNT(bookings.id), 0) as total_bookings'),
+                    DB::raw('COALESCE(SUM(bookings.total_amount), 0) as total_revenue'))
+            ->groupBy('venues.id', 'venues.name')
+            ->get();
+    }
 }
\ No newline at end of file
diff --git a/resources/views/layouts/super-admin.blade.php b/resources/views/layouts/super-admin.blade.php
index 892c95f..c9b1bd4 100644
--- a/resources/views/layouts/super-admin.blade.php
+++ b/resources/views/layouts/super-admin.blade.php
@@ -12,91 +12,230 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <!-- Alpine.js -->
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.12.0/cdn.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        
+        /* Custom scrollbar for sidebar */
+        .sidebar-scroll::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar-scroll::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+        }
+        
+        .sidebar-scroll::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 2px;
+        }
+        
+        /* Hover effects */
+        .nav-item {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .nav-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+            transition: left 0.5s;
+        }
+        
+        .nav-item:hover::before {
+            left: 100%;
+        }
+        
+        /* Active nav indicator */
+        .nav-active {
+            background: rgba(255, 255, 255, 0.15);
+            border-right: 3px solid white;
+        }
+        
+        /* Profile section gradient */
+        .profile-section {
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+    </style>
 </head>
 
-<body class="bg-gray-100">
+<body class="bg-gray-50">
     <div x-data="{ sidebarOpen: true }">
         <!-- Sidebar -->
         <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
-            class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform bg-blue-800 text-white">
-            <div class="flex items-center justify-between p-4 border-b border-blue-700">
-                <h2 class="text-2xl font-bold">Venue System</h2>
-                <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden">
-                    <i class="fas fa-times"></i>
+            class="fixed top-0 left-0 z-40 w-72 h-screen transition-transform duration-300 ease-in-out bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 text-white shadow-2xl">
+            
+            <!-- Header -->
+            <div class="flex items-center justify-between p-6 border-b border-slate-600/30">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
+                        <i class="fas fa-cubes text-white text-lg"></i>
+                    </div>
+                    <div>
+                        <h2 class="text-xl font-bold bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
+                            VenueSystem
+                        </h2>
+                        <p class="text-xs text-slate-400 font-medium">Super Admin Panel</p>
+                    </div>
+                </div>
+                <button @click="sidebarOpen = !sidebarOpen" 
+                    class="lg:hidden w-8 h-8 rounded-lg bg-slate-600/50 hover:bg-slate-600 transition-colors flex items-center justify-center">
+                    <i class="fas fa-times text-sm"></i>
                 </button>
             </div>
-            <div class="p-4">
-                <div class="mb-8">
-                    <div class="flex items-center mb-4">
-                        <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
-                            <i class="fas fa-user-shield"></i>
+            
+            <!-- Profile Section -->
+            <div class="p-6">
+                <div class="profile-section rounded-xl p-4 mb-6">
+                    <div class="flex items-center space-x-4">
+                        <div class="relative">
+                            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
+                                <i class="fas fa-user-shield text-white text-lg"></i>
+                            </div>
+                            <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-slate-800"></div>
                         </div>
-                        <div class="ml-3">
-                            <p class="text-sm font-medium">Super Admin</p>
-                            <p class="text-xs opacity-75">{{ auth()->user()->name ?? 'Admin' }}</p>
+                        <div class="flex-1">
+                            <p class="font-semibold text-white">{{ auth()->user()->name ?? 'Admin' }}</p>
+                            <p class="text-sm text-slate-300">Super Administrator</p>
+                            <div class="mt-1">
+                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">
+                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1"></span>
+                                    Online
+                                </span>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <nav>
-                    <ul>
-                        <li class="mb-2">
-                            <a href="{{ route('superadmin.dashboard') }}"
-                                class="flex items-center p-3 rounded-lg hover:bg-blue-700 {{ request()->routeIs('superadmin.dashboard') ? 'bg-blue-700' : '' }}">
-                                <i class="fas fa-tachometer-alt w-5"></i>
-                                <span class="ml-3">Dashboard</span>
-                            </a>
-                        </li>
+                
+                <!-- Navigation -->
+                <nav class="space-y-2">
+                    <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4 px-3">
+                        Main Navigation
+                    </div>
+                    
+                    <a href="{{ route('superadmin.dashboard') }}"
+                        class="nav-item flex items-center p-3 rounded-lg hover:bg-slate-600/30 {{ request()->routeIs('superadmin.dashboard') ? 'nav-active' : '' }} group">
+                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500/20 to-blue-600/20 flex items-center justify-center group-hover:from-blue-500/30 group-hover:to-blue-600/30 transition-all">
+                            <i class="fas fa-chart-line text-blue-400 group-hover:text-blue-300"></i>
+                        </div>
+                        <div class="ml-4">
+                            <span class="font-medium text-slate-200 group-hover:text-white transition-colors">Dashboard</span>
+                            <p class="text-xs text-slate-400 group-hover:text-slate-300">Analytics & Overview</p>
+                        </div>
+                    </a>
 
-                        <li class="mb-2">
-                            <a href="{{ route('superadmin.venue.index') }}"
-                                class="flex items-center p-3 rounded-lg hover:bg-blue-700 {{ request()->routeIs('superadmin.venue.*') ? 'bg-blue-700' : '' }}">
-                                <i class="fas fa-building w-5"></i>
-                                <span class="ml-3">Manajemen Venue</span>
-                            </a>
-                        </li>
-                        <li class="mb-2">
-                            <a href="{{ route('superadmin.admin.index') }}"
-                                class="flex items-center p-3 rounded-lg hover:bg-blue-700 {{ request()->routeIs('superadmin.admin.*') ? 'bg-blue-700' : '' }}">
-                                <i class="fas fa-users-cog w-5"></i>
-                                <span class="ml-3">Manajemen Admin</span>
-                            </a>
-                        </li>
-                        <li class="mb-2">
-                            <a href="{{ route('logout') }}"
+                    <a href="{{ route('superadmin.venue.index') }}"
+                        class="nav-item flex items-center p-3 rounded-lg hover:bg-slate-600/30 {{ request()->routeIs('superadmin.venue.*') ? 'nav-active' : '' }} group">
+                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500/20 to-emerald-600/20 flex items-center justify-center group-hover:from-emerald-500/30 group-hover:to-emerald-600/30 transition-all">
+                            <i class="fas fa-building text-emerald-400 group-hover:text-emerald-300"></i>
+                        </div>
+                        <div class="ml-4">
+                            <span class="font-medium text-slate-200 group-hover:text-white transition-colors">Manajemen Venue</span>
+                            <p class="text-xs text-slate-400 group-hover:text-slate-300">Kelola semua venue</p>
+                        </div>
+                    </a>
+                    
+                    <a href="{{ route('superadmin.admin.index') }}"
+                        class="nav-item flex items-center p-3 rounded-lg hover:bg-slate-600/30 {{ request()->routeIs('superadmin.admin.*') ? 'nav-active' : '' }} group">
+                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500/20 to-purple-600/20 flex items-center justify-center group-hover:from-purple-500/30 group-hover:to-purple-600/30 transition-all">
+                            <i class="fas fa-users-cog text-purple-400 group-hover:text-purple-300"></i>
+                        </div>
+                        <div class="ml-4">
+                            <span class="font-medium text-slate-200 group-hover:text-white transition-colors">Manajemen Admin</span>
+                            <p class="text-xs text-slate-400 group-hover:text-slate-300">Kelola admin venue</p>
+                        </div>
+                    </a>
+
+                    <a href="{{ route('logout') }}"
                                 onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
-                                class="flex items-center p-3 rounded-lg hover:bg-blue-700">
+                                class="flex items-center p-3 rounded-lg hover:bg-red-700">
                                 <i class="fas fa-sign-out-alt w-5"></i>
                                 <span class="ml-3">Logout</span>
+                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
+                                    @csrf
+                                </form>
                             </a>
-                            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
-                                @csrf
-                            </form>
-                        </li>
-                    </ul>
                 </nav>
             </div>
         </aside>
 
         <!-- Content -->
-        <div :class="sidebarOpen ? 'lg:ml-64' : ''" class="transition-all duration-300">
+        <div :class="sidebarOpen ? 'lg:ml-72' : ''" class="transition-all duration-300">
             <!-- Top bar -->
-            <header class="bg-white border-b border-gray-200 sticky top-0 z-30">
-                <div class="px-4 py-3 flex items-center justify-between">
-                    <button @click="sidebarOpen = !sidebarOpen" class="text-gray-600 focus:outline-none">
-                        <i class="fas fa-bars"></i>
-                    </button>
+            <header class="bg-white/80 backdrop-blur-md border-b border-gray-200/50 sticky top-0 z-30 shadow-sm">
+                <div class="px-6 py-4 flex items-center justify-between">
                     <div class="flex items-center space-x-4">
+                        <button @click="sidebarOpen = !sidebarOpen" 
+                            class="w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors flex items-center justify-center text-gray-600 hover:text-gray-800">
+                            <i class="fas fa-bars text-sm"></i>
+                        </button>
+                        
+                        <!-- Breadcrumb -->
+                        <nav class="flex items-center space-x-2 text-sm text-gray-500">
+                            <span class="font-medium text-gray-900">Super Admin</span>
+                            <i class="fas fa-chevron-right text-xs"></i>
+                            <span>Dashboard</span>
+                        </nav>
+                    </div>
+                    
+                    <div class="flex items-center space-x-4">
+                        <!-- Notifications -->
+                        <button class="relative w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors flex items-center justify-center text-gray-600 hover:text-gray-800">
+                            <i class="fas fa-bell text-sm"></i>
+                            <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
+                        </button>
+                        
+                        <!-- Profile Dropdown -->
                         <div class="relative" x-data="{ open: false }">
-                            <button @click="open = !open" class="flex items-center text-gray-600 focus:outline-none">
-                                <span class="mr-2">{{ auth()->user()->name ?? 'Admin' }}</span>
-                                <i class="fas fa-chevron-down text-xs"></i>
+                            <button @click="open = !open" 
+                                class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 transition-colors">
+                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center">
+                                    <i class="fas fa-user text-white text-sm"></i>
+                                </div>
+                                <div class="text-left hidden md:block">
+                                    <p class="text-sm font-medium text-gray-900">{{ auth()->user()->name ?? 'Admin' }}</p>
+                                    <p class="text-xs text-gray-500">Super Admin</p>
+                                </div>
+                                <i class="fas fa-chevron-down text-xs text-gray-400" 
+                                   :class="{ 'rotate-180': open }" 
+                                   style="transition: transform 0.2s"></i>
                             </button>
-                            <div x-show="open" @click.away="open = false"
-                                class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
-                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
-                                <a href="{{ route('logout') }}"
+                            
+                            <div x-show="open" 
+                                 @click.away="open = false"
+                                 x-transition:enter="transition ease-out duration-200"
+                                 x-transition:enter-start="opacity-0 scale-95"
+                                 x-transition:enter-end="opacity-100 scale-100"
+                                 x-transition:leave="transition ease-in duration-150"
+                                 x-transition:leave-start="opacity-100 scale-100"
+                                 x-transition:leave-end="opacity-0 scale-95"
+                                 class="absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50">
+                                <div class="px-4 py-3 border-b border-gray-100">
+                                    <p class="text-sm font-medium text-gray-900">{{ auth()->user()->name ?? 'Admin' }}</p>
+                                    <p class="text-xs text-gray-500">{{ auth()->user()->email ?? 'admin@example.com' }}</p>
+                                </div>
+                                <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
+                                    <i class="fas fa-user mr-3 text-gray-400"></i>
+                                    Profile Settings
+                                </a>
+                                <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
+                                    <i class="fas fa-cog mr-3 text-gray-400"></i>
+                                    Account Settings
+                                </a>
+                                <div class="border-t border-gray-100 mt-2 pt-2">
+                                    <a href="{{ route('logout') }}"
                                     onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                                     class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/resources/views/superadmin/dashboard.blade.php b/resources/views/superadmin/dashboard.blade.php
index d80acfd..47eedaf 100644
--- a/resources/views/superadmin/dashboard.blade.php
+++ b/resources/views/superadmin/dashboard.blade.php
@@ -1,120 +1,282 @@
 @extends('layouts.super-admin')
 
 @section('content')
-    <div class="mb-6">
-        <h1 class="text-3xl font-bold text-gray-800">Dashboard Super Admin</h1>
-        <p class="text-gray-600">Selamat datang di panel kontrol Super Admin</p>
+    <div class="mb-8">
+        <h1 class="text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+            Dashboard Super Admin
+        </h1>
+        <p class="text-gray-600 text-lg">Analytics & Overview dari seluruh venue</p>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-        <div class="bg-white rounded-lg shadow p-6">
-            <div class="flex items-center justify-between mb-4">
-                <h2 class="text-xl font-semibold text-gray-800">
-                    <i class="fas fa-users-cog mr-2 text-blue-600"></i>Admin
-                </h2>
-                <span class="bg-blue-100 text-blue-800 text-xs font-medium px-3 py-1 rounded-full">
-                    Total: {{ $adminCount ?? 0 }}
-                </span>
+    <!-- Main Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-6 text-white">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-blue-100 text-sm font-medium">Total Admin</p>
+                    <p class="text-3xl font-bold">{{ $adminCount ?? 0 }}</p>
+                </div>
+                <div class="bg-blue-400 bg-opacity-30 rounded-full p-3">
+                    <i class="fas fa-users-cog text-2xl"></i>
+                </div>
             </div>
-            <p class="text-gray-600 mb-4">Kelola semua admin venue dalam sistem</p>
-            <a href="{{ route('superadmin.admin.index') }}"
-                class="inline-flex items-center text-blue-600 hover:text-blue-800">
-                Lihat Detail
-                <i class="fas fa-arrow-right ml-2"></i>
-            </a>
         </div>
 
-        <div class="bg-white rounded-lg shadow p-6">
-            <div class="flex items-center justify-between mb-4">
-                <h2 class="text-xl font-semibold text-gray-800">
-                    <i class="fas fa-building mr-2 text-green-600"></i>Venue
-                </h2>
-                <span class="bg-green-100 text-green-800 text-xs font-medium px-3 py-1 rounded-full">
-                    Total: {{ $venueCount ?? 0 }}
-                </span>
+        <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl shadow-lg p-6 text-white">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-emerald-100 text-sm font-medium">Total Venue</p>
+                    <p class="text-3xl font-bold">{{ $venueCount ?? 0 }}</p>
+                </div>
+                <div class="bg-emerald-400 bg-opacity-30 rounded-full p-3">
+                    <i class="fas fa-building text-2xl"></i>
+                </div>
             </div>
-            <p class="text-gray-600 mb-4">Kelola semua venue dalam sistem</p>
-            <a href="{{ route('superadmin.venue.index') }}"
-                class="inline-flex items-center text-green-600 hover:text-green-800">
-                Lihat Detail
-                <i class="fas fa-arrow-right ml-2"></i>
-            </a>
         </div>
-    </div>
 
-    <!-- Recent Activity Section -->
-    <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
-        <div class="border-b border-gray-200 px-6 py-4">
-            <h3 class="text-lg font-semibold text-gray-800">Aktivitas Terbaru</h3>
+        <div class="bg-gradient-to-br from-amber-500 to-orange-500 rounded-xl shadow-lg p-6 text-white">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-amber-100 text-sm font-medium">Total User</p>
+                    <p class="text-3xl font-bold">{{ $userCount ?? 0 }}</p>
+                </div>
+                <div class="bg-amber-400 bg-opacity-30 rounded-full p-3">
+                    <i class="fas fa-users text-2xl"></i>
+                </div>
+            </div>
         </div>
-        <div class="p-6">
-            <div class="space-y-4">
-                <!-- Sample activity items - in production, these would come from database -->
-                <div class="flex items-center">
-                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
-                        <i class="fas fa-user-plus"></i>
-                    </div>
-                    <div class="ml-4">
-                        <p class="text-sm font-medium text-gray-900">Admin baru ditambahkan</p>
-                        <p class="text-xs text-gray-500">2 jam yang lalu</p>
-                    </div>
+
+        <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl shadow-lg p-6 text-white">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-purple-100 text-sm font-medium">Total Meja</p>
+                    <p class="text-3xl font-bold">{{ $tableCount ?? 0 }}</p>
                 </div>
-                <div class="flex items-center">
-                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
-                        <i class="fas fa-building"></i>
-                    </div>
-                    <div class="ml-4">
-                        <p class="text-sm font-medium text-gray-900">Venue baru ditambahkan</p>
-                        <p class="text-xs text-gray-500">1 hari yang lalu</p>
-                    </div>
-                </div>
-                <div class="flex items-center">
-                    <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
-                        <i class="fas fa-edit"></i>
-                    </div>
-                    <div class="ml-4">
-                        <p class="text-sm font-medium text-gray-900">Venue diperbarui</p>
-                        <p class="text-xs text-gray-500">2 hari yang lalu</p>
-                    </div>
+                <div class="bg-purple-400 bg-opacity-30 rounded-full p-3">
+                    <i class="fas fa-table text-2xl"></i>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Quick Stats -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div class="bg-white rounded-lg shadow p-6">
-            <div class="flex items-center">
-                <div class="rounded-full bg-blue-100 p-3">
-                    <i class="fas fa-users text-blue-600 text-xl"></i>
-                </div>
-                <div class="ml-4">
-                    <h4 class="text-gray-500 text-sm">Total Pengguna</h4>
-                    <p class="text-2xl font-bold text-gray-800">{{ $userCount ?? 0 }}</p>
-                </div>
+    <!-- Charts Section -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <!-- Revenue Comparison Chart -->
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+            <div class="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-4">
+                <h3 class="text-xl font-bold text-white flex items-center">
+                    <i class="fas fa-chart-bar mr-3"></i>
+                    Revenue Bulan Ini
+                </h3>
+                <p class="text-indigo-100 text-sm">Per venue - {{ Carbon\Carbon::now()->format('F Y') }}</p>
+            </div>
+            <div class="p-6">
+                <canvas id="revenueChart" width="400" height="300"></canvas>
             </div>
         </div>
-        <div class="bg-white rounded-lg shadow p-6">
-            <div class="flex items-center">
-                <div class="rounded-full bg-green-100 p-3">
-                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
-                </div>
-                <div class="ml-4">
-                    <h4 class="text-gray-500 text-sm">Venue Aktif</h4>
-                    <p class="text-2xl font-bold text-gray-800">{{ $activeVenueCount ?? 0 }}</p>
-                </div>
+
+        <!-- Popular Venues Ranking -->
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+            <div class="bg-gradient-to-r from-pink-500 to-rose-600 px-6 py-4">
+                <h3 class="text-xl font-bold text-white flex items-center">
+                    <i class="fas fa-trophy mr-3"></i>
+                    Ranking Popularitas
+                </h3>
+                <p class="text-pink-100 text-sm">Venue terpopuler bulan ini</p>
             </div>
-        </div>
-        <div class="bg-white rounded-lg shadow p-6">
-            <div class="flex items-center">
-                <div class="rounded-full bg-purple-100 p-3">
-                    <i class="fas fa-table text-purple-600 text-xl"></i>
-                </div>
-                <div class="ml-4">
-                    <h4 class="text-gray-500 text-sm">Total Meja</h4>
-                    <p class="text-2xl font-bold text-gray-800">{{ $tableCount ?? 0 }}</p>
+            <div class="p-6">
+                <!-- Filter Toggle -->
+                <div class="mb-4">
+                    <div class="bg-gray-100 rounded-lg p-1 flex">
+                        <button 
+                            id="rankingByBookings" 
+                            class="flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 bg-rose-500 text-white"
+                            onclick="toggleRanking('bookings')">
+                            <i class="fas fa-calendar-check mr-2"></i>
+                            Total Booking
+                        </button>
+                        <button 
+                            id="rankingByRevenue" 
+                            class="flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 text-gray-600 hover:text-gray-800"
+                            onclick="toggleRanking('revenue')">
+                            <i class="fas fa-money-bill-wave mr-2"></i>
+                            Total Revenue
+                        </button>
+                    </div>
                 </div>
+                <canvas id="popularVenuesChart" width="400" height="300"></canvas>
             </div>
         </div>
     </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <script>
+        // Revenue Chart Data
+        const revenueData = @json($revenueData);
+        
+        // Popular Venues Data
+        const popularVenuesData = @json($popularVenuesData);
+
+        // Color Palettes
+        const revenueColors = [
+            'rgba(99, 102, 241, 0.8)',  // Indigo
+            'rgba(168, 85, 247, 0.8)',  // Purple  
+            'rgba(236, 72, 153, 0.8)',  // Pink
+            'rgba(34, 197, 94, 0.8)',   // Emerald
+            'rgba(251, 146, 60, 0.8)',  // Orange
+        ];
+
+        const rankingColors = [
+            'rgba(239, 68, 68, 0.8)',   // Red
+            'rgba(245, 158, 11, 0.8)',  // Amber
+            'rgba(34, 197, 94, 0.8)',   // Emerald
+            'rgba(59, 130, 246, 0.8)',  // Blue
+            'rgba(168, 85, 247, 0.8)',  // Purple
+        ];
+
+        // Revenue Chart
+        const revenueCtx = document.getElementById('revenueChart').getContext('2d');
+        const revenueChart = new Chart(revenueCtx, {
+            type: 'bar',
+            data: {
+                labels: revenueData.map(item => item.venue_name),
+                datasets: [{
+                    label: 'Revenue (Rp)',
+                    data: revenueData.map(item => parseFloat(item.total_revenue)),
+                    backgroundColor: revenueColors,
+                    borderRadius: 8,
+                    borderSkipped: false,
+                }]
+            },
+            options: {
+                indexAxis: 'y',
+                responsive: true,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                return 'Revenue: Rp ' + new Intl.NumberFormat('id-ID').format(context.parsed.x);
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        beginAtZero: true,
+                        ticks: {
+                            callback: function(value) {
+                                return 'Rp ' + new Intl.NumberFormat('id-ID', { 
+                                    notation: 'compact', 
+                                    maximumFractionDigits: 1 
+                                }).format(value);
+                            }
+                        }
+                    },
+                    y: {
+                        grid: {
+                            display: false
+                        }
+                    }
+                }
+            }
+        });
+
+        // Popular Venues Chart
+        const popularCtx = document.getElementById('popularVenuesChart').getContext('2d');
+        let popularChart;
+
+        function createPopularChart(sortBy) {
+            const sortedData = [...popularVenuesData].sort((a, b) => {
+                if (sortBy === 'revenue') {
+                    return parseFloat(b.total_revenue) - parseFloat(a.total_revenue);
+                } else {
+                    return parseInt(b.total_bookings) - parseInt(a.total_bookings);
+                }
+            });
+
+            const chartData = {
+                labels: sortedData.map(item => item.venue_name),
+                datasets: [{
+                    label: sortBy === 'revenue' ? 'Revenue (Rp)' : 'Total Booking',
+                    data: sortedData.map(item => sortBy === 'revenue' ? parseFloat(item.total_revenue) : parseInt(item.total_bookings)),
+                    backgroundColor: rankingColors,
+                    borderRadius: 8,
+                    borderSkipped: false,
+                }]
+            };
+
+            if (popularChart) {
+                popularChart.destroy();
+            }
+
+            popularChart = new Chart(popularCtx, {
+                type: 'bar',
+                data: chartData,
+                options: {
+                    indexAxis: 'y',
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    if (sortBy === 'revenue') {
+                                        return 'Revenue: Rp ' + new Intl.NumberFormat('id-ID').format(context.parsed.x);
+                                    } else {
+                                        return 'Total Booking: ' + context.parsed.x;
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            beginAtZero: true,
+                            ticks: {
+                                callback: function(value) {
+                                    if (sortBy === 'revenue') {
+                                        return 'Rp ' + new Intl.NumberFormat('id-ID', { 
+                                            notation: 'compact', 
+                                            maximumFractionDigits: 1 
+                                        }).format(value);
+                                    } else {
+                                        return value;
+                                    }
+                                }
+                            }
+                        },
+                        y: {
+                            grid: {
+                                display: false
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+        // Initialize popular venues chart
+        createPopularChart('bookings');
+
+        // Toggle function for ranking chart
+        function toggleRanking(type) {
+            const bookingBtn = document.getElementById('rankingByBookings');
+            const revenueBtn = document.getElementById('rankingByRevenue');
+
+            if (type === 'bookings') {
+                bookingBtn.className = 'flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 bg-rose-500 text-white';
+                revenueBtn.className = 'flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 text-gray-600 hover:text-gray-800';
+                createPopularChart('bookings');
+            } else {
+                revenueBtn.className = 'flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 bg-rose-500 text-white';
+                bookingBtn.className = 'flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 text-gray-600 hover:text-gray-800';
+                createPopularChart('revenue');
+            }
+        }
+    </script>
 @endsection
\ No newline at end of file