feature: my page
This commit is contained in:
antv
@@ -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">
|
<div class="flex-1">
|
||||||
<h4 class="font-bold text-[#1E293B] text-[14px] mb-1.5">Bạn có biết?</h4>
|
<h4 class="font-bold text-[#F59E0B] text-[15px] mb-1.5">Bạn có biết?</h4>
|
||||||
<p class="text-[12px] text-[#475569] font-medium leading-relaxed">
|
<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!
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-6 h-6 bg-white rounded-full flex items-center justify-center shrink-0 shadow-sm border border-[#E2E8F0]">
|
<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">
|
||||||
<span class="text-lg drop-shadow-sm">💡</span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
@props(['rank', 'name', 'team', 'avatar', 'score', 'isCurrent' => false, 'unit' => 'điểm'])
|
@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">
|
<div class="flex items-center gap-3">
|
||||||
<!-- Rank -->
|
<!-- Rank -->
|
||||||
<div class="w-6 flex justify-center items-center">
|
<div class="w-6 flex justify-center items-center">
|
||||||
@@ -18,17 +18,17 @@
|
|||||||
|
|
||||||
<!-- Avatar & Info -->
|
<!-- Avatar & Info -->
|
||||||
<div class="flex items-center gap-3 ml-1">
|
<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">
|
<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-[14px] font-bold {{ $isCurrent ? 'text-[#1a2b49]' : 'text-gray-800' }} leading-tight mb-0.5">{{ $name }}</span>
|
||||||
<span class="text-[11px] text-gray-400 font-medium">{{ $team }}</span>
|
<span class="text-[12px] text-gray-500 font-medium">{{ $team }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Score -->
|
<!-- Score -->
|
||||||
<div class="text-[13px]">
|
<div class="text-[14px]">
|
||||||
<span class="font-extrabold {{ $isCurrent ? 'text-blue-600' : 'text-gray-700' }}">{{ number_format($score, 0, ',', '.') }}</span>
|
<span class="font-extrabold {{ $isCurrent ? 'text-blue-600' : 'text-gray-800' }}">{{ number_format($score, 0, ',', '.') }}</span>
|
||||||
<span class="text-gray-400 font-medium ml-0.5">{{ $unit }}</span>
|
<span class="text-gray-400 font-medium ml-1 text-[13px]">{{ $unit }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -33,8 +33,6 @@
|
|||||||
|
|
||||||
|
|
||||||
@if(Auth::check() && Auth::user()->role == \App\Models\User::ROLE_ADMIN)
|
@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">
|
<x-sidebar-item href="{{ route('admin.users.index') }}" :active="request()->routeIs('admin.users.index')" icon="users">
|
||||||
Quản lý User
|
Quản lý User
|
||||||
</x-sidebar-item>
|
</x-sidebar-item>
|
||||||
@@ -51,18 +49,42 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- User Profile Section -->
|
<!-- 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="flex items-center gap-3">
|
||||||
<div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200">
|
<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>
|
||||||
<div class="flex flex-col">
|
<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-[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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<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>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</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>
|
</aside>
|
||||||
|
|||||||
@@ -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">
|
<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] text-[#1E293B] uppercase tracking-wider mb-3">
|
<h4 class="text-center font-black text-[18px] {{ $titleColorClass }} uppercase tracking-wider mb-3">
|
||||||
@if(str_contains($title, 'GREAT JOB'))
|
@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'))
|
@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
|
@else
|
||||||
💖 {{ $title }} 💖
|
<span class="opacity-40 text-[16px] mr-1">💖</span>{{ $title }}<span class="opacity-40 text-[16px] ml-1">💖</span>
|
||||||
@endif
|
@endif
|
||||||
</h4>
|
</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 }}"
|
"{{ $message }}"
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
<!-- Sidebar Component -->
|
<!-- Sidebar Component -->
|
||||||
<x-sidebar />
|
<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 -->
|
<!-- Header Component -->
|
||||||
<x-header />
|
<x-header />
|
||||||
|
|
||||||
|
|||||||
@@ -114,7 +114,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center mt-auto pt-8 relative z-10">
|
<div class="text-center mt-auto pt-8 relative z-10">
|
||||||
<span class="text-[11px] font-medium text-gray-400">© 2024 GMO-Z.com RUNSYSTEM. All rights reserved.</span>
|
<span class="text-[11px] font-medium text-gray-400">© 2026 GMO-Z.com RUNSYSTEM. All rights reserved.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -53,93 +53,103 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Row 3: Thanks Grid & Ranking -->
|
<!-- Row 3: Thanks Grid & Ranking -->
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-12 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 md:grid-cols-3 gap-4 flex-1">
|
<!-- 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">
|
||||||
|
|
||||||
|
<!-- 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
|
<x-thank-card
|
||||||
title="GREAT JOB!"
|
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!"
|
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"
|
:isLiked="false"
|
||||||
bgClass="bg-[#fff9e6]"
|
bgClass="bg-gradient-to-br from-[#FFFDF7] to-[#FFF5DD]"
|
||||||
titleColorClass="text-[#f59e0b]"
|
titleColorClass="text-[#FFB800]"
|
||||||
textColorClass="text-[#d97706]"
|
textColorClass="text-[#4B5563]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<x-thank-card
|
<x-thank-card
|
||||||
title="YOU ROCK!"
|
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!"
|
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"
|
:isLiked="true"
|
||||||
bgClass="bg-[#faf5ff]"
|
bgClass="bg-gradient-to-br from-[#FCFAFF] to-[#F5F0FF]"
|
||||||
titleColorClass="text-[#a855f7]"
|
titleColorClass="text-[#8B5CF6]"
|
||||||
textColorClass="text-[#7e22ce]"
|
textColorClass="text-[#4B5563]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<x-thank-card
|
<x-thank-card
|
||||||
title="THANK YOU!"
|
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ể!"
|
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"
|
:isLiked="false"
|
||||||
bgClass="bg-[#f0f9ff]"
|
bgClass="bg-gradient-to-br from-[#FBFEFF] to-[#EDF8FF]"
|
||||||
titleColorClass="text-[#0ea5e9]"
|
titleColorClass="text-[#4DA6FF]"
|
||||||
textColorClass="text-[#0369a1]"
|
textColorClass="text-[#4B5563]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-6 w-full">
|
|
||||||
<x-info-card />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Ranking and Tip (Right 1/3) -->
|
<!-- Info Tip Card -->
|
||||||
<div class="col-span-1 flex flex-col w-full max-w-[420px] min-w-[380px] flex-1">
|
<div class="w-full">
|
||||||
<div class="flex items-center justify-between mb-3 pl-1 pr-1">
|
<x-info-card />
|
||||||
<h3 class="text-[17px] font-extrabold text-[#1a2b49]">Bảng xếp hạng</h3>
|
</div>
|
||||||
<a href="{{ route('user.ranking') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tabs Toggle -->
|
<!-- Ranking (Right 1/3) -->
|
||||||
<div class="inline-flex bg-[#F5F7FB] rounded-xl p-1 mb-4 w-fit space-x-2">
|
<div class="col-span-1 flex flex-col w-full flex-1 h-full">
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Tab Content: Received -->
|
<!-- Ranking Card -->
|
||||||
<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">
|
<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 flex flex-col h-full">
|
||||||
<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ẻ" />
|
<div class="flex items-center justify-between mb-3 pl-1 pr-1">
|
||||||
<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ẻ" />
|
<h3 class="text-[17px] font-extrabold text-[#1a2b49]">Bảng xếp hạng</h3>
|
||||||
<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ẻ" />
|
<a href="{{ route('user.ranking') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="my-3 border-t border-dashed border-gray-100 mx-2"></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>
|
||||||
|
|
||||||
<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" />
|
<!-- Tab Content: Received -->
|
||||||
</div>
|
<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ẻ" />
|
||||||
|
|
||||||
<!-- Tab Content: Sent -->
|
<div class="my-3 border-t border-dashed border-gray-100 mx-2"></div>
|
||||||
<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="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>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -154,8 +164,8 @@
|
|||||||
const receivedContent = document.getElementById('ranking-received');
|
const receivedContent = document.getElementById('ranking-received');
|
||||||
const sentContent = document.getElementById('ranking-sent');
|
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 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-[135px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 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') {
|
if (tab === 'received') {
|
||||||
receivedTab.className = activeClass;
|
receivedTab.className = activeClass;
|
||||||
|
|||||||
Reference in New Issue
Block a user