antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

m

Browse Source
This commit is contained in:
antv
2026-07-21 10:16:06 +07:00
parent f8385185c9
commit 781a0f8aa7
17 changed files with 436 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/user/dashboard.blade.php
+96 -35
View File
@@ -38,15 +38,27 @@
</x-stat-card>
<x-stat-card
title="Thứ hạng"
value="#{{ $currentRank > 0 ? $currentRank : '-' }}"
iconBgClass="bg-green-50"
iconColorClass="text-green-500">
<svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</x-stat-card>
@if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
<x-stat-card
title="Thứ hạng"
value="#{{ $currentRank > 0 ? $currentRank : '-' }}"
iconBgClass="bg-green-50"
iconColorClass="text-green-500">
<svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</x-stat-card>
@else
<x-stat-card
title="Thứ hạng"
value="Không có quyền xem"
iconBgClass="bg-amber-50"
iconColorClass="text-amber-500">
<svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</x-stat-card>
@endif
</div>
<div class="flex flex-col gap-6 lg:flex-row lg:items-stretch lg:gap-8">
@@ -96,39 +108,86 @@
<div class="w-full lg:w-[32%] lg:min-w-[340px] lg:max-w-[400px] flex flex-col gap-6">
<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="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 flex flex-col h-full relative overflow-hidden">
<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>
@if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
<a href="{{ route('user.ranking') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
@endif
</div>
<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="cursor-pointer 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="cursor-pointer 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>
@if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
<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="cursor-pointer 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="cursor-pointer 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>
<div id="ranking-list-container" class="flex-1 flex flex-col mb-2">
<!-- Pre-rendered ranking lists -->
<div id="ranking-received-content" class="flex-1 flex flex-col">
@include('user.partials.ranking_list', ['rankers' => array_slice($receivedRankers, 0, 4), 'currentUserRankItem' => $receivedCurrentUserRankItem])
<div id="ranking-list-container" class="flex-1 flex flex-col mb-2">
<!-- Pre-rendered ranking lists -->
<div id="ranking-received-content" class="flex-1 flex flex-col">
@include('user.partials.ranking_list', ['rankers' => array_slice($receivedRankers, 0, 4), 'currentUserRankItem' => $receivedCurrentUserRankItem])
</div>
<div id="ranking-sent-content" class="hidden flex-1 flex flex-col">
@include('user.partials.ranking_list', ['rankers' => array_slice($sentRankers, 0, 4), 'currentUserRankItem' => $sentCurrentUserRankItem])
</div>
</div>
<div id="ranking-sent-content" class="hidden flex-1 flex flex-col">
@include('user.partials.ranking_list', ['rankers' => array_slice($sentRankers, 0, 4), 'currentUserRankItem' => $sentCurrentUserRankItem])
@else
<div class="relative flex-1 flex flex-col h-full min-h-[220px]">
<!-- Blur container -->
<div class="filter blur-[5px] select-none pointer-events-none opacity-40 flex-1 flex flex-col">
<div class="inline-flex bg-[#F5F7FB] rounded-xl p-1 mb-4 w-fit space-x-2">
<button class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] bg-white text-[#3462f7] font-bold text-[14px]">TOP Nhận</button>
<button class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] text-[#64748b] font-bold text-[14px]">TOP Gửi</button>
</div>
<div class="space-y-3.5">
<div class="flex items-center gap-3 p-3 rounded-2xl bg-gray-50/80 border border-gray-100">
<div class="w-10 h-10 bg-gray-200 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-3.5 bg-gray-200 rounded w-24"></div>
<div class="h-2.5 bg-gray-200 rounded w-16"></div>
</div>
</div>
<div class="flex items-center gap-3 p-3 rounded-2xl bg-gray-50/80 border border-gray-100">
<div class="w-10 h-10 bg-gray-200 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-3.5 bg-gray-200 rounded w-28"></div>
<div class="h-2.5 bg-gray-200 rounded w-12"></div>
</div>
</div>
<div class="flex items-center gap-3 p-3 rounded-2xl bg-gray-50/80 border border-gray-100">
<div class="w-10 h-10 bg-gray-200 rounded-full"></div>
<div class="flex-1 space-y-2">
<div class="h-3.5 bg-gray-200 rounded w-20"></div>
<div class="h-2.5 bg-gray-200 rounded w-14"></div>
</div>
</div>
</div>
</div>
<!-- Overlay -->
<div class="absolute inset-0 flex flex-col items-center justify-center bg-white/40 backdrop-blur-[1px] rounded-2xl z-10 p-4 text-center">
<div class="w-14 h-14 bg-amber-500 text-white rounded-full flex items-center justify-center shadow-lg shadow-amber-500/30 mb-3.5 transform transition-transform hover:scale-105 duration-300">
<svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<h4 class="text-sm font-extrabold text-[#1a2b49] mb-1">Không có quyền xem</h4>
<p class="text-[11px] text-gray-500 font-semibold max-w-[200px] leading-relaxed">Bảng xếp hạng đã bị ẩn với tài khoản thành viên.</p>
</div>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
@@ -142,6 +201,8 @@
const receivedContent = document.getElementById('ranking-received-content');
const sentContent = document.getElementById('ranking-sent-content');
if (!receivedTab || !sentTab || !receivedContent || !sentContent) return;
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]';