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

feature: my page

Browse Source
This commit is contained in:
antv
2026-07-03 16:54:43 +07:00
parent 1943f23406
commit d8f0e48bf3
7 changed files with 126 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/info-card.blade.php
+6 -5
View File
@@ -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>
resources/views/components/ranking-item.blade.php
+7 -7
View File
@@ -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>
resources/views/components/sidebar.blade.php
+29 -7
View File
@@ -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>
resources/views/components/thank-card.blade.php
+7 -7
View File
@@ -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>