From d8f0e48bf30c2af82535b91765cfdbd5a91372e6 Mon Sep 17 00:00:00 2001
From: antv <antv@runsystem.net>
Date: Fri, 3 Jul 2026 16:54:43 +0700
Subject: [PATCH] feature: my page

---
 .../views/components/info-card.blade.php      |  11 +-
 .../views/components/ranking-item.blade.php   |  14 +-
 resources/views/components/sidebar.blade.php  |  36 ++++-
 .../views/components/thank-card.blade.php     |  14 +-
 resources/views/layouts/app.blade.php         |   2 +-
 resources/views/login.blade.php               |   2 +-
 resources/views/user/dashboard.blade.php      | 140 ++++++++++--------
 7 files changed, 126 insertions(+), 93 deletions(-)

diff --git a/resources/views/components/info-card.blade.php b/resources/views/components/info-card.blade.php
index c47c2fd..21af161 100644
--- a/resources/views/components/info-card.blade.php
+++ b/resources/views/components/info-card.blade.php
@@ -1,11 +1,12 @@
-<div class="w-full rounded-[20px] p-4 bg-[#F5F7FA] border border-[#E2E8F0] shadow-sm flex items-center gap-4">
+<div class="w-full rounded-[24px] p-5 bg-gradient-to-br from-[#FFF9E8] to-[#FFFDF8] shadow-[0_8px_24px_rgba(15,23,42,0.04)] flex items-center gap-4">
     <div class="flex-1">
-        <h4 class="font-bold text-[#1E293B] text-[14px] mb-1.5">Bạn có biết?</h4>
-        <p class="text-[12px] text-[#475569] font-medium leading-relaxed">
+        <h4 class="font-bold text-[#F59E0B] text-[15px] mb-1.5">Bạn có biết?</h4>
+        <p class="text-[13px] text-[#5B6475] font-medium leading-[1.6]">
             Một lời cảm ơn chân thành có thể nhân đôi động lực làm việc của đồng nghiệp!
         </p>
     </div>
-    <div class="w-6 h-6 bg-white rounded-full flex items-center justify-center shrink-0 shadow-sm border border-[#E2E8F0]">
-        <span class="text-lg drop-shadow-sm">💡</span>
+    <div class="w-11 h-11 bg-white rounded-full flex items-center justify-center shrink-0 shadow-[0_4px_16px_rgba(245,158,11,0.15)] relative">
+        <div class="absolute inset-0 bg-[#F59E0B] rounded-full blur-md opacity-20"></div>
+        <span class="text-[22px] drop-shadow-sm relative z-10">💡</span>
     </div>
 </div>
diff --git a/resources/views/components/ranking-item.blade.php b/resources/views/components/ranking-item.blade.php
index a54565c..69335ea 100644
--- a/resources/views/components/ranking-item.blade.php
+++ b/resources/views/components/ranking-item.blade.php
@@ -1,6 +1,6 @@
 @props(['rank', 'name', 'team', 'avatar', 'score', 'isCurrent' => false, 'unit' => 'điểm'])
 
-<div class="flex items-center justify-between py-3 border-b border-gray-50 last:border-0 hover:bg-gray-50 rounded-xl px-3 transition-colors {{ $isCurrent ? 'bg-blue-50/50' : '' }}">
+<div class="flex items-center justify-between py-3 border-b border-gray-50 last:border-0 hover:bg-gray-50 rounded-xl px-3 transition-colors {{ $isCurrent ? 'bg-[#F5F8FF]' : '' }}">
     <div class="flex items-center gap-3">
         <!-- Rank -->
         <div class="w-6 flex justify-center items-center">
@@ -18,17 +18,17 @@
         
         <!-- Avatar & Info -->
         <div class="flex items-center gap-3 ml-1">
-            <img src="{{ $avatar }}" alt="{{ $name }}" class="w-9 h-9 rounded-full object-cover shadow-sm">
+            <img src="{{ $avatar }}" alt="{{ $name }}" class="w-10 h-10 rounded-full object-cover shadow-sm border border-gray-100">
             <div class="flex flex-col">
-                <span class="text-[13px] font-bold {{ $isCurrent ? 'text-gray-900' : 'text-gray-800' }} leading-tight mb-0.5">{{ $name }}</span>
-                <span class="text-[11px] text-gray-400 font-medium">{{ $team }}</span>
+                <span class="text-[14px] font-bold {{ $isCurrent ? 'text-[#1a2b49]' : 'text-gray-800' }} leading-tight mb-0.5">{{ $name }}</span>
+                <span class="text-[12px] text-gray-500 font-medium">{{ $team }}</span>
             </div>
         </div>
     </div>
     
     <!-- Score -->
-    <div class="text-[13px]">
-        <span class="font-extrabold {{ $isCurrent ? 'text-blue-600' : 'text-gray-700' }}">{{ number_format($score, 0, ',', '.') }}</span>
-        <span class="text-gray-400 font-medium ml-0.5">{{ $unit }}</span>
+    <div class="text-[14px]">
+        <span class="font-extrabold {{ $isCurrent ? 'text-blue-600' : 'text-gray-800' }}">{{ number_format($score, 0, ',', '.') }}</span>
+        <span class="text-gray-400 font-medium ml-1 text-[13px]">{{ $unit }}</span>
     </div>
 </div>
diff --git a/resources/views/components/sidebar.blade.php b/resources/views/components/sidebar.blade.php
index 8c17a8a..3b4b2ac 100644
--- a/resources/views/components/sidebar.blade.php
+++ b/resources/views/components/sidebar.blade.php
@@ -33,8 +33,6 @@
 
 
         @if(Auth::check() && Auth::user()->role == \App\Models\User::ROLE_ADMIN)
-            <!-- ADMIN SIDEBAR -->
-            <div class="pt-2 mt-2 border-t border-gray-100"></div>
             <x-sidebar-item href="{{ route('admin.users.index') }}" :active="request()->routeIs('admin.users.index')" icon="users">
                 Quản lý User
             </x-sidebar-item>
@@ -51,18 +49,42 @@
     </div>
 
     <!-- User Profile Section -->
-    <div class="p-5 border-t border-gray-100 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors shrink-0">
+    <div id="sidebar-profile" class="p-5 border-t border-gray-100 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors shrink-0">
         <div class="flex items-center gap-3">
             <div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200">
-                <img src="https://api.dicebear.com/7.x/notionists/svg?seed={{ Auth::id() ?? 'MinhAnh' }}&backgroundColor=e2e8f0" alt="Avatar" class="w-full h-full object-cover">
+@php
+    $avatarUrl = Auth::check() && Auth::user()->avatar
+        ? Auth::user()->avatar
+        : (Auth::check() && Auth::user()->name
+            ? 'https://api.dicebear.com/7.x/notionists/svg?seed=' . urlencode(Auth::user()->name) . '&backgroundColor=e2e8f0'
+            : asset('images/avatar.png'));
+@endphp
+                <img src="{{ $avatarUrl }}" alt="Avatar" class="w-full h-full object-cover">
             </div>
             <div class="flex flex-col">
                 <span class="text-[14px] font-bold text-[#1e293b] leading-tight truncate max-w-[130px]">{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}</span>
                 <span class="text-[12px] text-gray-500 font-medium">{{ Auth::check() ? (Auth::user()->role == \App\Models\User::ROLE_ADMIN ? 'Administrator' : 'Product Team') : 'Product Team' }}</span>
             </div>
         </div>
-        <svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-        </svg>
+        <svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
     </div>
+    <!-- Logout Modal -->
+    <div id="logout-modal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
+        <div class="bg-white rounded-lg shadow-lg p-6 w-80">
+            <h2 class="text-lg font-semibold mb-4">Bạn có muốn đăng xuất?</h2>
+            <form method="POST" action="{{ route('logout') }}">
+                @csrf
+                <button type="submit" class="w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700">Logout</button>
+            </form>
+            <button id="close-logout-modal" class="mt-3 w-full text-gray-600 py-2 rounded-md hover:bg-gray-100">Cancel</button>
+        </div>
+    </div>
+    <script>
+        document.getElementById('sidebar-profile')?.addEventListener('click', function () {
+            document.getElementById('logout-modal').classList.remove('hidden');
+        });
+        document.getElementById('close-logout-modal')?.addEventListener('click', function () {
+            document.getElementById('logout-modal').classList.add('hidden');
+        });
+    </script>
 </aside>
diff --git a/resources/views/components/thank-card.blade.php b/resources/views/components/thank-card.blade.php
index b882304..e5bd516 100644
--- a/resources/views/components/thank-card.blade.php
+++ b/resources/views/components/thank-card.blade.php
@@ -1,16 +1,16 @@
-@props(['title', 'message', 'isLiked' => false, 'bgClass', 'titleColorClass', 'textColorClass'])
+@props(['title', 'message', 'isLiked' => false, 'bgClass', 'titleColorClass', 'textColorClass', 'style' => ''])
 
-<div class="rounded-[20px] p-5 border border-gray-100 shadow-sm {{ $bgClass }} transition-transform hover:-translate-y-1 hover:shadow-lg w-full">
-    <h4 class="text-center font-black text-[18px] text-[#1E293B] uppercase tracking-wider mb-3">
+<div class="rounded-3xl p-5 shadow-[0_10px_30px_rgba(15,23,42,0.05)] {{ $bgClass }} transition-transform hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(15,23,42,0.08)] w-full min-h-[180px]" style="{{ $style }}">
+    <h4 class="text-center font-black text-[18px] {{ $titleColorClass }} uppercase tracking-wider mb-3">
         @if(str_contains($title, 'GREAT JOB'))
-            ✨ {{ $title }} ✨
+            <span class="opacity-40 text-[16px] mr-1">✨</span>{{ $title }}<span class="opacity-40 text-[16px] ml-1">✨</span>
         @elseif(str_contains($title, 'YOU ROCK'))
-            🌟 {{ $title }} 🌟
+            <span class="opacity-40 text-[16px] mr-1">🌟</span>{{ $title }}<span class="opacity-40 text-[16px] ml-1">🌟</span>
         @else
-            💖 {{ $title }} 💖
+            <span class="opacity-40 text-[16px] mr-1">💖</span>{{ $title }}<span class="opacity-40 text-[16px] ml-1">💖</span>
         @endif
     </h4>
-    <p class="text-left text-[13px] text-[#475569] font-semibold leading-relaxed italic px-2">
+    <p class="text-left text-[14px] text-[#4B5563] font-medium leading-[1.8] italic px-2">
         "{{ $message }}"
     </p>
 </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 66d6129..191dacd 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -15,7 +15,7 @@
         <!-- Sidebar Component -->
         <x-sidebar />
 
-        <main class="main-content flex-1 flex flex-col h-full bg-[#f8faff] overflow-hidden relative w-full lg:w-auto">
+        <main class="main-content flex-1 flex flex-col h-full bg-[#FAFBFF] overflow-hidden relative w-full lg:w-auto">
             <!-- Header Component -->
             <x-header />
 
diff --git a/resources/views/login.blade.php b/resources/views/login.blade.php
index bff6b2d..70c8c1a 100644
--- a/resources/views/login.blade.php
+++ b/resources/views/login.blade.php
@@ -114,7 +114,7 @@
             </div>
 
             <div class="text-center mt-auto pt-8 relative z-10">
-                <span class="text-[11px] font-medium text-gray-400">&copy; 2024 GMO-Z.com RUNSYSTEM. All rights reserved.</span>
+                <span class="text-[11px] font-medium text-gray-400">&copy; 2026 GMO-Z.com RUNSYSTEM. All rights reserved.</span>
             </div>
         </div>
 
diff --git a/resources/views/user/dashboard.blade.php b/resources/views/user/dashboard.blade.php
index 990829c..cf4354c 100644
--- a/resources/views/user/dashboard.blade.php
+++ b/resources/views/user/dashboard.blade.php
@@ -53,93 +53,103 @@
     </div>
 
     <!-- Row 3: Thanks Grid & Ranking -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
-        <!-- Recent Thanks (Left 2/3) -->
-        <div class="col-span-1 lg:col-span-2 flex flex-col flex-1">
-            <div class="flex items-center justify-between mb-4 pl-1 pr-1">
-                <h3 class="text-[17px] font-extrabold text-[#1a2b49]">Thanks gần đây</h3>
-                <a href="{{ route('user.received') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
-            </div>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-12 items-start">
+        
+        <!-- LEFT COLUMN: Thanks & Tip (Left 2/3) -->
+        <div class="col-span-1 lg:col-span-2 flex flex-col flex-1 h-full gap-6">
             
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1">
+            <!-- Recent Thanks Card -->
+            <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 flex flex-col">
+                <div class="flex items-center justify-between mb-4 pl-1 pr-1">
+                    <h3 class="text-[17px] font-extrabold text-[#1a2b49]">Thanks gần đây</h3>
+                    <a href="{{ route('user.received') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1">
                 <x-thank-card 
                     title="GREAT JOB!" 
                     message="Cảm ơn bạn đã luôn nhiệt tình giúp đỡ và đồng hành cùng mọi người. Chúc bạn một ngày làm việc thật vui vẻ và tràn đầy năng lượng!"
                     :isLiked="false"
-                    bgClass="bg-[#fff9e6]"
-                    titleColorClass="text-[#f59e0b]"
-                    textColorClass="text-[#d97706]"
+                    bgClass="bg-gradient-to-br from-[#FFFDF7] to-[#FFF5DD]"
+                    titleColorClass="text-[#FFB800]"
+                    textColorClass="text-[#4B5563]"
                 />
                 
                 <x-thank-card 
                     title="YOU ROCK!" 
                     message="Sự cống hiến và tinh thần làm việc trách nhiệm của bạn luôn là nguồn cảm hứng lớn. Cảm ơn vì những nỗ lực không ngừng nghỉ của bạn!"
                     :isLiked="true"
-                    bgClass="bg-[#faf5ff]"
-                    titleColorClass="text-[#a855f7]"
-                    textColorClass="text-[#7e22ce]"
+                    bgClass="bg-gradient-to-br from-[#FCFAFF] to-[#F5F0FF]"
+                    titleColorClass="text-[#8B5CF6]"
+                    textColorClass="text-[#4B5563]"
                 />
                 
                 <x-thank-card 
                     title="THANK YOU!" 
                     message="Rất vui và may mắn khi được làm việc cùng một người đồng nghiệp tuyệt vời. Cảm ơn bạn vì tất cả những đóng góp tích cực cho tập thể!"
                     :isLiked="false"
-                    bgClass="bg-[#f0f9ff]"
-                    titleColorClass="text-[#0ea5e9]"
-                    textColorClass="text-[#0369a1]"
+                    bgClass="bg-gradient-to-br from-[#FBFEFF] to-[#EDF8FF]"
+                    titleColorClass="text-[#4DA6FF]"
+                    textColorClass="text-[#4B5563]"
                 />
             </div>
             
-            <div class="mt-6 w-full">
-                <x-info-card />
-            </div>
         </div>
-
-        <!-- Ranking and Tip (Right 1/3) -->
-        <div class="col-span-1 flex flex-col w-full max-w-[420px] min-w-[380px] flex-1">
-            <div class="flex items-center justify-between mb-3 pl-1 pr-1">
-                <h3 class="text-[17px] font-extrabold text-[#1a2b49]">Bảng xếp hạng</h3>
-                <a href="{{ route('user.ranking') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
-            </div>
+        
+        <!-- Info Tip Card -->
+        <div class="w-full">
+            <x-info-card />
+        </div>
+        
+        <!-- Ranking (Right 1/3) -->
+        <div class="col-span-1 flex flex-col w-full flex-1 h-full">
             
-            <!-- Tabs Toggle -->
-            <div class="inline-flex bg-[#F5F7FB] rounded-xl p-1 mb-4 w-fit space-x-2">
-                <button id="tab-received" onclick="switchRankingTab('received')" class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all bg-white text-[#3462f7] font-bold text-[14px]">
-                    <svg class="w-[18px] h-[18px]" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M17.5 4h-11c-1.38 0-2.5 1.12-2.5 2.5V8c0 2.21 1.79 4 4 4h.34c1.17 2.19 3.52 3.56 6.16 3.56s4.99-1.37 6.16-3.56h.34c2.21 0 4-1.79 4-4v-1.5c0-1.38-1.12-2.5-2.5-2.5zm-11 6c-.55 0-1-.45-1-1V6.5c0-.28.22-.5.5-.5h2v4H6.5zm11 0h-2v-4h2c.28 0 .5.22.5.5V9c0 .55-.45 1-1 1zM11 16h2v4h-2v-4zm-2 4h6v2H9v-2z"/>
-                        <path fill="#ffffff" d="M12 11.5L10 7h4z"/>
-                    </svg>
-                    TOP Nhận
-                </button>
-                <button id="tab-sent" onclick="switchRankingTab('sent')" class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 font-bold text-[14px]">
-                    <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M22 2L11 13"></path>
-                        <path d="M22 2L15 22L11 13L2 9L22 2Z"></path>
-                    </svg>
-                    TOP Gửi
-                </button>
-            </div>
+            <!-- Ranking Card -->
+            <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 flex flex-col h-full">
+                <div class="flex items-center justify-between mb-3 pl-1 pr-1">
+                    <h3 class="text-[17px] font-extrabold text-[#1a2b49]">Bảng xếp hạng</h3>
+                    <a href="{{ route('user.ranking') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
+                </div>
+                
+                <!-- Tabs Toggle -->
+                <div class="inline-flex bg-[#F5F7FB] rounded-xl p-1 mb-4 w-fit space-x-2">
+                    <button id="tab-received" onclick="switchRankingTab('received')" class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all bg-white shadow-[0_2px_4px_rgba(0,0,0,0.04)] text-[#3462f7] font-bold text-[14px]">
+                        <svg class="w-[18px] h-[18px]" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M17.5 4h-11c-1.38 0-2.5 1.12-2.5 2.5V8c0 2.21 1.79 4 4 4h.34c1.17 2.19 3.52 3.56 6.16 3.56s4.99-1.37 6.16-3.56h.34c2.21 0 4-1.79 4-4v-1.5c0-1.38-1.12-2.5-2.5-2.5zm-11 6c-.55 0-1-.45-1-1V6.5c0-.28.22-.5.5-.5h2v4H6.5zm11 0h-2v-4h2c.28 0 .5.22.5.5V9c0 .55-.45 1-1 1zM11 16h2v4h-2v-4zm-2 4h6v2H9v-2z"/>
+                            <path fill="#ffffff" d="M12 11.5L10 7h4z"/>
+                        </svg>
+                        TOP Nhận
+                    </button>
+                    <button id="tab-sent" onclick="switchRankingTab('sent')" class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 font-bold text-[14px]">
+                        <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M22 2L11 13"></path>
+                            <path d="M22 2L15 22L11 13L2 9L22 2Z"></path>
+                        </svg>
+                        TOP Gửi
+                    </button>
+                </div>
 
-            <!-- Tab Content: Received -->
-            <div id="ranking-received" class="bg-white rounded-2xl p-4 border border-gray-100 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] flex-1 flex flex-col mb-4">
-                <x-ranking-item rank="1" name="Lê Quỳnh Chi" team="Marketing Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Chi&backgroundColor=fef3c7" score="95" unit="thẻ" />
-                <x-ranking-item rank="2" name="Trần Hoàng Nam" team="Dev Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Nam&backgroundColor=e2e8f0" score="82" unit="thẻ" />
-                <x-ranking-item rank="3" name="Phạm Đức Huy" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Huy&backgroundColor=e2e8f0" score="67" unit="thẻ" />
-                
-                <div class="my-3 border-t border-dashed border-gray-100 mx-2"></div>
-                
-                <x-ranking-item rank="5" name="{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed={{ Auth::id() ?? 'MinhAnh' }}&backgroundColor=bfdbfe" score="45" unit="thẻ" :isCurrent="true" />
-            </div>
+                <!-- Tab Content: Received -->
+                <div id="ranking-received" class="flex-1 flex flex-col mb-2">
+                    <x-ranking-item rank="1" name="Lê Quỳnh Chi" team="Marketing Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Chi&backgroundColor=fef3c7" score="95" unit="thẻ" />
+                    <x-ranking-item rank="2" name="Trần Hoàng Nam" team="Dev Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Nam&backgroundColor=e2e8f0" score="82" unit="thẻ" />
+                    <x-ranking-item rank="3" name="Phạm Đức Huy" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Huy&backgroundColor=e2e8f0" score="67" unit="thẻ" />
+                    
+                    <div class="my-3 border-t border-dashed border-gray-100 mx-2"></div>
+                    
+                    <x-ranking-item rank="5" name="{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed={{ Auth::id() ?? 'MinhAnh' }}&backgroundColor=bfdbfe" score="45" unit="thẻ" :isCurrent="true" />
+                </div>
 
-            <!-- Tab Content: Sent -->
-            <div id="ranking-sent" class="bg-white rounded-2xl p-4 border border-gray-100 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] flex-1 flex flex-col mb-4 hidden">
-                <x-ranking-item rank="1" name="Nguyễn Văn Lâm" team="HR Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Lam&backgroundColor=fef3c7" score="88" unit="thẻ" />
-                <x-ranking-item rank="2" name="Phạm Thu Thủy" team="Admin Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Thuy&backgroundColor=e2e8f0" score="75" unit="thẻ" />
-                <x-ranking-item rank="3" name="Lê Quỳnh Chi" team="Marketing Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Chi&backgroundColor=e2e8f0" score="64" unit="thẻ" />
-                
-                <div class="my-3 border-t border-dashed border-gray-100 mx-2"></div>
-                
-                <x-ranking-item rank="12" name="{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed={{ Auth::id() ?? 'MinhAnh' }}&backgroundColor=bfdbfe" score="18" unit="thẻ" :isCurrent="true" />
+                <!-- Tab Content: Sent -->
+                <div id="ranking-sent" class="flex-1 flex flex-col mb-2 hidden">
+                    <x-ranking-item rank="1" name="Nguyễn Văn Lâm" team="HR Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Lam&backgroundColor=fef3c7" score="88" unit="thẻ" />
+                    <x-ranking-item rank="2" name="Phạm Thu Thủy" team="Admin Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Thuy&backgroundColor=e2e8f0" score="75" unit="thẻ" />
+                    <x-ranking-item rank="3" name="Lê Quỳnh Chi" team="Marketing Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Chi&backgroundColor=e2e8f0" score="64" unit="thẻ" />
+                    
+                    <div class="my-3 border-t border-dashed border-gray-100 mx-2"></div>
+                    
+                    <x-ranking-item rank="12" name="{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed={{ Auth::id() ?? 'MinhAnh' }}&backgroundColor=bfdbfe" score="18" unit="thẻ" :isCurrent="true" />
+                </div>
             </div>
         </div>
     </div>
@@ -154,8 +164,8 @@
         const receivedContent = document.getElementById('ranking-received');
         const sentContent = document.getElementById('ranking-sent');
 
-        const activeClass = 'flex items-center justify-center gap-2 w-[135px] py-2 rounded-[10px] transition-all bg-white shadow-[0_2px_4px_rgba(0,0,0,0.04)] text-[#3462f7] font-bold text-[14px]';
-        const inactiveClass = 'flex items-center justify-center gap-2 w-[135px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 font-bold text-[14px]';
+        const activeClass = 'flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all bg-white shadow-[0_2px_4px_rgba(0,0,0,0.04)] text-[#3462f7] font-bold text-[14px]';
+        const inactiveClass = 'flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 font-bold text-[14px]';
 
         if (tab === 'received') {
             receivedTab.className = activeClass;