From f393f79ec08b0a8b150931459076f953faa3c951 Mon Sep 17 00:00:00 2001
From: Bro <bro@local>
Date: Fri, 24 Jul 2026 18:15:25 +0700
Subject: [PATCH] feat: UI premium polish

- Sidebar: gradient blue tint background + subtle shadow
- Sidebar nav: active indicator gradient, border-left glow
- Halaman: fade-in animation tiap navigasi
- Stat cards: hover lift + shadow glow (stat-card-glow)
- Transisi halus di semua elemen interaktif
---
 resources/views/components/nav-item.blade.php |  8 ++++----
 resources/views/dashboard/index.blade.php     |  8 ++++----
 resources/views/layouts/app.blade.php         | 12 ++++++++++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/resources/views/components/nav-item.blade.php b/resources/views/components/nav-item.blade.php
index c8ad86a..2e74444 100644
--- a/resources/views/components/nav-item.blade.php
+++ b/resources/views/components/nav-item.blade.php
@@ -3,8 +3,8 @@
 @php
 $isActive = $active ?? request()->fullUrlIs($href) || request()->is(trim(parse_url($href, PHP_URL_PATH) ?? '', '/'));
 $classes = $isActive
-    ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-500'
-    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900';
+    ? 'bg-gradient-to-r from-blue-50 to-white text-blue-700 border-l-[3px] border-blue-500 shadow-sm'
+    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100/70 border-l-[3px] border-transparent';
 
 $faIcons = [
     'home' => 'fa-solid fa-house',
@@ -26,7 +26,7 @@ $faIcons = [
 $faClass = $faIcons[$icon] ?? 'fa-solid fa-circle';
 @endphp
 
-<a href="{{ $href }}" {{ $attributes->merge(['class' => 'group flex items-center px-3 py-2 text-sm font-medium rounded-md ' . $classes]) }}>
-    <i class="{{ $faClass }} mr-3 w-5 text-center text-sm flex-shrink-0"></i>
+<a href="{{ $href }}" {{ $attributes->merge(['class' => 'group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-150 ' . $classes]) }}>
+    <i class="{{ $faClass }} mr-3 w-5 text-center text-sm flex-shrink-0 {{ $isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600' }}"></i>
     {{ $slot }}
 </a>
diff --git a/resources/views/dashboard/index.blade.php b/resources/views/dashboard/index.blade.php
index ca25b37..b959fb1 100644
--- a/resources/views/dashboard/index.blade.php
+++ b/resources/views/dashboard/index.blade.php
@@ -12,7 +12,7 @@
 
     {{-- Gradient Stats Cards --}}
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-5 shadow-sm">
+        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-5 shadow-sm stat-card-glow transition-all duration-200">
             <div class="absolute right-0 top-0 w-20 h-20 opacity-10">
                 <i class="fa-solid fa-triangle-exclamation text-white text-6xl"></i>
             </div>
@@ -22,7 +22,7 @@
                 <p class="text-[10px] text-white/50 mt-0.5">data terbaru</p>
             </div>
         </div>
-        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-5 shadow-sm">
+        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
             <div class="absolute right-0 top-0 w-20 h-20 opacity-10">
                 <i class="fa-solid fa-list-check text-white text-6xl"></i>
             </div>
@@ -32,7 +32,7 @@
                 <p class="text-[10px] text-white/50 mt-0.5">semua waktu</p>
             </div>
         </div>
-        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 p-5 shadow-sm">
+        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
             <div class="absolute right-0 top-0 w-20 h-20 opacity-10">
                 <i class="fa-solid fa-users text-white text-6xl"></i>
             </div>
@@ -42,7 +42,7 @@
                 <p class="text-[10px] text-white/50 mt-0.5">terdata</p>
             </div>
         </div>
-        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-violet-700 p-5 shadow-sm">
+        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-violet-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
             <div class="absolute right-0 top-0 w-20 h-20 opacity-10">
                 <i class="fa-solid fa-file-lines text-white text-6xl"></i>
             </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index a63da80..7428991 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -33,12 +33,20 @@
 
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <style>
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .animate-fade-in { animation: fadeInUp 0.3s ease-out; }
+        .stat-card-glow:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
+    </style>
     @stack('styles')
 </head>
 <body class="h-full antialiased">
     <div x-data="notifications()" class="min-h-screen flex">
         {{-- Sidebar --}}
-        <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 lg:translate-x-0 lg:static lg:inset-auto transition-transform duration-200 ease-in-out flex flex-col">
+        <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-50 w-64 bg-gradient-to-b from-white via-blue-50/30 to-white border-r border-gray-200 lg:translate-x-0 lg:static lg:inset-auto transition-transform duration-200 ease-in-out flex flex-col shadow-sm">
             <div class="flex items-start justify-between h-auto px-4 pt-4 pb-3 border-b border-gray-200">
                 <a href="{{ route('dashboard') }}" class="min-w-0">
                     <div class="flex items-center gap-2.5 mb-2">
@@ -228,7 +236,7 @@
             </header>
 
             {{-- Page Content --}}
-            <main class="flex-1 p-4 lg:p-6">
+            <main class="flex-1 p-4 lg:p-6 animate-fade-in">
                 @if (session('success'))
                     <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center justify-between">
                         <span>{{ session('success') }}</span>