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/user/dashboard.blade.php
+75 -65
View File
@@ -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;