m

resources/views/components/sidebar-item.blade.php

@@ -2,8 +2,8 @@
 
 @php
 $classes = $active
-            ? 'flex items-center gap-4 px-4 py-3 rounded-xl bg-[#eff4ff] text-[#3462f7] font-semibold transition-all duration-200'
+    ? 'flex items-center gap-4 px-4 py-3 rounded-xl bg-[#eff4ff] text-[#3462f7] font-semibold transition-all duration-200'
-            : 'flex items-center gap-4 px-4 py-3 rounded-xl text-gray-500 hover:bg-gray-50 hover:text-gray-900 font-medium transition-all duration-200';
+    : 'flex items-center gap-4 px-4 py-3 rounded-xl text-gray-500 hover:bg-gray-50 hover:text-gray-900 font-medium transition-all duration-200';
 @endphp
 
 <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>

resources/views/components/sidebar.blade.php

@@ -1,13 +1,15 @@
 @props(['active' => false])
 
-<aside class="sidebar flex flex-col justify-between h-screen w-60 bg-white border-r border-gray-100 shadow-sm transition-all duration-300 shrink-0 overflow-hidden fixed inset-y-0 left-0 z-40 -translate-x-full lg:sticky lg:top-0 lg:translate-x-0" aria-label="Main navigation">
+<aside class="sidebar flex flex-col justify-between h-screen w-[85vw] max-w-[280px] lg:w-64 bg-white border-r border-gray-100 shadow-sm transition-transform duration-200 shrink-0 overflow-hidden fixed inset-y-0 left-0 z-40 -translate-x-full lg:sticky lg:top-0 lg:translate-x-0" aria-label="Main navigation">
-    <div class="p-6 flex items-center justify-between shrink-0">
+            <div class="px-5 py-6 flex items-center justify-between shrink-0">
-        <img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-6 w-auto object-contain">
+            <img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-4 lg:h-5 w-auto object-contain">
-        <!-- Mobile hamburger button/close -->
+            <!-- Mobile hamburger button/close -->
-        <button id="sidebar-close" class="lg:hidden p-2 text-gray-500 hover:bg-gray-100 rounded-md focus:outline-none" aria-label="Close navigation">
+            <button id="sidebar-close" type="button" class="lg:hidden w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-[#F3F5F9] active:scale-95 focus-visible:ring-2 focus-visible:ring-primary transition duration-200 cursor-pointer" aria-label="Đóng menu">
-            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        </button>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-    </div>
+                </svg>
+            </button>
+        </div>
 
     <nav class="px-4 space-y-1.5 overflow-y-auto flex-1 pb-4">
         <!-- TABS CHUNG -->

resources/views/layouts/app.blade.php

@@ -16,7 +16,7 @@
     </script>
     <div class="app-layout">
         <!-- Mobile overlay (click outside to close) -->
-        <div id="sidebar-overlay" class="fixed inset-0 bg-black/30 hidden" aria-hidden="true"></div>
+        <div id="sidebar-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm hidden transition-opacity duration-200" aria-hidden="true"></div>
         <!-- Sidebar Component -->
         <x-sidebar />
 
@@ -121,12 +121,17 @@
                 function openSidebar() {
                     sidebar.classList.remove('-translate-x-full');
                     overlay.classList.remove('hidden');
+                    overlay.classList.add('opacity-100');
                     document.body.style.overflow = 'hidden';
                 }
                 
                 function closeSidebar() {
                     sidebar.classList.add('-translate-x-full');
-                    overlay.classList.add('hidden');
+                    overlay.classList.remove('opacity-100');
+                    // after transition, hide overlay
+                    setTimeout(() => {
+                        overlay.classList.add('hidden');
+                    }, 200);
                     document.body.style.overflow = '';
                 }
                 
@@ -140,6 +145,12 @@
                 });
                 closeBtn.addEventListener('click', closeSidebar);
                 overlay.addEventListener('click', closeSidebar);
+                // ESC key to close sidebar
+                document.addEventListener('keydown', function (e) {
+                    if (e.key === 'Escape' && !overlay.classList.contains('hidden')) {
+                        closeSidebar();
+                    }
+                });
             }
 
             // Client-side flash message support

resources/views/user/ranking.blade.php

@@ -8,11 +8,25 @@
     <div class="relative overflow-hidden rounded-[32px] mb-10 shadow-[0_8px_32px_rgba(0,0,0,0.04)]" style="background: linear-gradient(135deg, #f5f7ff 0%, #e0e7ff 100%);">
         <x-hero-banner>
             <h2 class="text-[32px] md:text-[42px] font-extrabold text-[#1a2b49] mb-3 drop-shadow-sm">🏆 Bảng xếp hạng</h2>
-            <p class="text-[16px] md:text-[18px] text-gray-700 mb-4 max-w-2xl">Tôn vinh những cá nhân lan tỏa văn hóa cảm ơn và ghi nhận trong tổ chức.</p>
+             <p class="text-[16px] md:text-[18px] text-gray-700 mb-4 max-w-2xl">Tôn vinh những cá nhân lan tỏa văn hóa cảm ơn và ghi nhận trong tổ chức.</p>
         </x-hero-banner>
         <img src="{{ asset('images/illustrations/trophy.svg') }}" alt="trophy" class="absolute right-4 bottom-0 w-40 h-40 md:w-56 md:h-56 opacity-20 pointer-events-none">
     </div>
 
+    <!-- Month Filter -->
+    <div class="flex justify-start mb-8">
+        <form method="GET" class="flex items-center gap-4 bg-white p-3 md:p-4 pr-6 rounded-[24px] shadow-[0_4px_12px_rgba(0,0,0,0.03)] border border-gray-100 transition-all hover:shadow-md">
+            <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-[#3462f7]">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                </svg>
+            </div>
+            <div>
+                <label for="month" class="block text-xs font-extrabold text-gray-400 uppercase tracking-wider mb-1">Lọc theo tháng</label>
+                <input type="month" id="month" name="month" class="block w-full border-0 bg-transparent p-0 text-lg font-bold text-[#1a2b49] focus:ring-0 cursor-pointer" value="{{ $selectedMonth }}" onchange="this.form.submit()" />
+            </div>
+        </form>
+    </div>
 
     <div class="flex justify-center mb-10">
         <div class="inline-flex bg-[#F5F7FB] rounded-[20px] p-1.5 shadow-inner border border-gray-100">

resources/views/user/received.blade.php

@@ -67,7 +67,7 @@
     </div>
 
     <!-- Load More Container -->
-    <div id="loadMoreContainer" class="flex justify-center mt-16 {{ $hasMore ? '' : 'hidden' }}">
+    <div id="loadMoreContainer" class="flex justify-center {{ $hasMore ? '' : 'hidden' }}" style="margin-top: 64px; margin-bottom: 32px;">
         <button id="loadMoreBtn" class="px-8 py-3 bg-[#3462f7] hover:bg-[#254edb] text-white font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 cursor-pointer">
             <span id="btnText">Xem thêm</span>
             <span id="btnSpinner" class="hidden animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></span>

resources/views/user/sent.blade.php

@@ -70,7 +70,7 @@
     </div>
 
     <!-- Load More Container -->
-    <div id="loadMoreContainer" class="flex justify-center mt-16 {{ $hasMore ? '' : 'hidden' }}">
+    <div id="loadMoreContainer" class="flex justify-center {{ $hasMore ? '' : 'hidden' }}" style="margin-top: 64px; margin-bottom: 32px;">
         <button id="loadMoreBtn" class="px-8 py-3 bg-[#3462f7] hover:bg-[#254edb] text-white font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 cursor-pointer">
             <span id="btnText">Xem thêm</span>
             <span id="btnSpinner" class="hidden animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></span>