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-17 14:19:34 +07:00
parent 7af5de6048
commit 98a56eb130
6 changed files with 426 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/User/UserController.php
+38 -4
View File
@@ -123,20 +123,54 @@ class UserController extends Controller
} }
// New page: list of ThankCards received by the current user // New page: list of ThankCards received by the current user
public function receivedCards(Request $request): View public function receivedCards(Request $request)
{ {
$selectedMonth = $request->input('month', Carbon::now()->format('Y-m')); $selectedMonth = $request->input('month', Carbon::now()->format('Y-m'));
$user = Auth::user(); $user = Auth::user();
$data = $this->userService->getReceivedPageData($user, $selectedMonth);
if ($request->ajax() || $request->wantsJson()) {
$offset = (int) $request->input('offset', 0);
$limit = 12;
$data = $this->userService->getReceivedPageData($user, $selectedMonth, $limit, $offset);
$html = view('user.partials.received_cards_feed', ['cards' => $data['cards']])->render();
return response()->json([
'success' => true,
'html' => $html,
'hasMore' => $data['hasMore'],
'totalCards' => $data['totalCards'],
'totalSenders' => $data['totalSenders']
]);
}
$data = $this->userService->getReceivedPageData($user, $selectedMonth, 12, 0);
$data['selectedMonth'] = $selectedMonth;
return view('user.received', $data); return view('user.received', $data);
} }
// New page: list of ThankCards sent by the current user // New page: list of ThankCards sent by the current user
public function sentCards(Request $request): View public function sentCards(Request $request)
{ {
$selectedMonth = $request->input('month', Carbon::now()->format('Y-m')); $selectedMonth = $request->input('month', Carbon::now()->format('Y-m'));
$user = Auth::user(); $user = Auth::user();
$data = $this->userService->getSentPageData($user, $selectedMonth);
if ($request->ajax() || $request->wantsJson()) {
$offset = (int) $request->input('offset', 0);
$limit = 12;
$data = $this->userService->getSentPageData($user, $selectedMonth, $limit, $offset);
$html = view('user.partials.sent_cards_feed', ['cards' => $data['cards']])->render();
return response()->json([
'success' => true,
'html' => $html,
'hasMore' => $data['hasMore'],
'totalCards' => $data['totalCards'],
'totalReceivers' => $data['totalReceivers']
]);
}
$data = $this->userService->getSentPageData($user, $selectedMonth, 12, 0);
$data['selectedMonth'] = $selectedMonth;
return view('user.sent', $data); return view('user.sent', $data);
} }
app/Services/User/UserService.php
+2
View File
@@ -257,6 +257,7 @@ class UserService implements UserServiceInterface
->whereBetween('date', [$start, $end]) ->whereBetween('date', [$start, $end])
->where('received', '>', 0) ->where('received', '>', 0)
->skip($offset + $limit) ->skip($offset + $limit)
->take(1)
->exists(); ->exists();
return [ return [
@@ -293,6 +294,7 @@ class UserService implements UserServiceInterface
->whereBetween('date', [$start, $end]) ->whereBetween('date', [$start, $end])
->where('sent', '>', 0) ->where('sent', '>', 0)
->skip($offset + $limit) ->skip($offset + $limit)
->take(1)
->exists(); ->exists();
return [ return [
resources/views/user/partials/received_cards_feed.blade.php
+41
View File
@@ -0,0 +1,41 @@
@foreach ($cards as $c)
<div class="bg-white rounded-[24px] border border-gray-100 p-6 shadow-sm hover:shadow-md hover:border-[#8b5cf6] hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between h-full group">
<div>
<div class="flex items-center justify-between mb-4">
<span class="text-xs font-bold text-gray-400 flex items-center gap-1.5">
<span class="text-[14px]">💜</span> Từ
</span>
<span class="text-[11px] font-extrabold text-[#6d28d9] bg-[#f5f3ff] px-2 py-0.5 rounded-full">
{{ $c->received }} Thẻ
</span>
</div>
<div class="flex items-start gap-3.5">
<div class="relative shrink-0">
@if($c->senderUser)
<x-avatar :user="$c->senderUser" class="w-12 h-12 rounded-full object-cover border-2 border-purple-50" />
@else
<div class="w-12 h-12 rounded-full bg-gray-50 border border-gray-200 flex items-center justify-center font-bold text-gray-400">
{{ strtoupper(substr($c->sender ?? 'U', 0, 1)) }}
</div>
@endif
</div>
<div class="flex-1 min-w-0">
<h4 class="font-extrabold text-[#1a2b49] text-[15px] leading-snug truncate" title="{{ $c->senderUser ? $c->senderUser->name : ($c->sender ?? '---') }}">
{{ $c->senderUser ? $c->senderUser->name : ($c->sender ?? '---') }}
</h4>
<p class="text-xs text-gray-400 font-semibold mt-0.5">
MSNV: {{ $c->senderUser ? $c->senderUser->msnv : ($c->sender ?? '---') }}
</p>
<p class="text-xs text-gray-400 truncate mt-0.5" title="{{ $c->senderUser ? $c->senderUser->mail : '---' }}">
{{ $c->senderUser ? $c->senderUser->mail : '---' }}
</p>
</div>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-50 text-[11px] font-semibold text-gray-400 mt-6">
<span>Ngày nhận:</span>
<span>{{ \Carbon\Carbon::parse($c->date)->format('d/m/Y') }}</span>
</div>
</div>
@endforeach
resources/views/user/partials/sent_cards_feed.blade.php
+41
View File
@@ -0,0 +1,41 @@
@foreach ($cards as $c)
<div class="bg-white rounded-[24px] border border-gray-100 p-6 shadow-sm hover:shadow-md hover:border-[#3462f7] hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between h-full group">
<div>
<div class="flex items-center justify-between mb-4">
<span class="text-xs font-bold text-gray-400 flex items-center gap-1.5">
<span class="text-[14px]">💌</span> Gửi tới
</span>
<span class="text-[11px] font-extrabold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
{{ $c->sent }} Thẻ
</span>
</div>
<div class="flex items-start gap-3.5">
<div class="relative shrink-0">
@if($c->receiverUser)
<x-avatar :user="$c->receiverUser" class="w-12 h-12 rounded-full object-cover border-2 border-blue-50" />
@else
<div class="w-12 h-12 rounded-full bg-gray-50 border border-gray-200 flex items-center justify-center font-bold text-gray-400">
{{ strtoupper(substr($c->receiver ?? 'U', 0, 1)) }}
</div>
@endif
</div>
<div class="flex-1 min-w-0">
<h4 class="font-extrabold text-[#1a2b49] text-[15px] leading-snug truncate" title="{{ $c->receiverUser ? $c->receiverUser->name : ($c->receiver ?? '---') }}">
{{ $c->receiverUser ? $c->receiverUser->name : ($c->receiver ?? '---') }}
</h4>
<p class="text-xs text-gray-400 font-semibold mt-0.5">
MSNV: {{ $c->receiverUser ? $c->receiverUser->msnv : ($c->receiver ?? '---') }}
</p>
<p class="text-xs text-gray-400 truncate mt-0.5" title="{{ $c->receiverUser ? $c->receiverUser->mail : '---' }}">
{{ $c->receiverUser ? $c->receiverUser->mail : '---' }}
</p>
</div>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-50 text-[11px] font-semibold text-gray-400 mt-6">
<span>Ngày gửi:</span>
<span>{{ \Carbon\Carbon::parse($c->date)->format('d/m/Y') }}</span>
</div>
</div>
@endforeach
resources/views/user/received.blade.php
+146 -42
View File
@@ -10,60 +10,164 @@
<p class="text-[16px] text-gray-600 mb-6">Các lời cảm ơn mà đồng nghiệp đã gửi đến bạn.</p> <p class="text-[16px] text-gray-600 mb-6">Các lời cảm ơn mà đồng nghiệp đã gửi đến bạn.</p>
</x-hero-banner> </x-hero-banner>
<div class="flex flex-col md:flex-row md:items-center gap-6 mb-8 mt-6"> <!-- Month Filter & Actions -->
<div class="flex-1 max-w-sm"> <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8 mt-6">
<x-stat-card title="Tổng số thanks nhận trong tháng" value="{{ count($cards ?? []) }}" iconBgClass="bg-purple-50" iconColorClass="text-purple-500"> <form id="filterForm" class="flex items-center gap-4 bg-white p-3 md:p-4 pr-6 rounded-[24px] shadow-[0_4px_12px_rgba(0,0,0,0.03)] border border-gray-100 transition-all hover:shadow-md">
<svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"> <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center text-[#8b5cf6]">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg> </svg>
</x-stat-card>
</div>
<form method="GET" class="flex items-center gap-4 bg-white p-3 md:p-4 pr-6 rounded-[24px] shadow-[0_4px_12px_rgba(0,0,0,0.03)] border border-gray-100 transition-all hover:shadow-md">
<div class="w-12 h-12 rounded-full bg-[#f5f7ff] flex items-center justify-center text-primary">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</div> </div>
<div> <div>
<label for="month" class="block text-xs font-extrabold text-gray-400 uppercase tracking-wider mb-1">Lọc theo tháng</label> <label for="month" class="block text-xs font-extrabold text-gray-400 uppercase tracking-wider mb-1">Lọc theo tháng</label>
<input type="month" id="month" name="month" class="block w-full border-0 bg-transparent p-0 text-lg font-bold text-[#1a2b49] focus:ring-0 cursor-pointer" value="{{ request('month', \Carbon\Carbon::now()->format('Y-m')) }}" onchange="this.form.submit()" /> <input type="month" id="month" name="month" class="block w-full border-0 bg-transparent p-0 text-lg font-bold text-[#1a2b49] focus:ring-0 cursor-pointer" value="{{ $selectedMonth }}" />
</div> </div>
</form> </form>
</div> </div>
<!-- Statistics Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-8">
<div class="bg-white rounded-[24px] border border-gray-100/80 p-5 shadow-sm flex items-center gap-4 hover:shadow-md transition-all duration-300">
<div class="w-12 h-12 rounded-full bg-purple-50 text-[#8b5cf6] flex items-center justify-center shrink-0">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</div>
<div>
<p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Tổng số thanks nhận trong <span id="statMonth">tháng {{ \Carbon\Carbon::parse($selectedMonth)->format('n/Y') }}</span></p>
<h3 class="text-2xl font-extrabold text-[#1a2b49] mt-0.5" id="totalCardsVal">{{ $totalCards }}</h3>
</div>
</div>
@if (!empty($cards) && $cards->count()) <div class="bg-white rounded-[24px] border border-gray-100/80 p-5 shadow-sm flex items-center gap-4 hover:shadow-md transition-all duration-300">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="w-12 h-12 rounded-full bg-blue-50 text-[#3462f7] flex items-center justify-center shrink-0">
@foreach ($cards as $c) <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-gray-100/50 p-6 flex flex-col justify-between hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
<div class="flex items-start gap-4"> </svg>
@if($c->senderUser)
<x-avatar :user="$c->senderUser" class="w-12 h-12 rounded-full object-cover border-2 border-purple-100 flex-shrink-0" />
<div class="flex-1 min-w-0">
<h4 class="font-bold text-[#1a2b49] text-base truncate" title="{{ $c->senderUser->name }}">{{ $c->senderUser->name }}</h4>
<p class="text-xs font-semibold text-gray-400 mt-0.5">MSNV: {{ $c->senderUser->msnv }}</p>
<p class="text-xs text-gray-500 mt-1 truncate" title="{{ $c->senderUser->mail }}">{{ $c->senderUser->mail }}</p>
</div> </div>
@else <div>
<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 font-bold flex-shrink-0"> <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Số người đã gửi tới</p>
{{ strtoupper(substr($c->sender ?? 'S', 0, 1)) }} <h3 class="text-2xl font-extrabold text-[#1a2b49] mt-0.5" id="totalSendersVal">{{ $totalSenders }}</h3>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-bold text-[#1a2b49] text-base truncate">Từ: {{ $c->sender ?? '---' }}</h4>
<p class="text-xs font-semibold text-gray-400 mt-0.5">MSNV: {{ $c->sender ?? '---' }}</p>
</div>
@endif
</div>
<div class="flex justify-between items-center mt-6 pt-4 border-t border-gray-50">
<span class="text-gray-400 text-xs font-medium">{{ \Carbon\Carbon::parse($c->date)->format('d/m/Y') }}</span>
<span class="px-3 py-1 inline-flex text-xs font-extrabold rounded-full bg-purple-50 text-purple-700 border border-purple-100/80">
+{{ $c->received }} thẻ
</span>
</div> </div>
</div> </div>
@endforeach
</div> </div>
@else
<x-empty-state title="Chưa có Thanks nào" description="Bạn chưa nhận bất kỳ Thank Card nào trong tháng đã chọn." icon="hero"/> <!-- Empty State -->
@endif <div id="emptyState" class="bg-white rounded-[24px] border border-dashed border-gray-200 p-12 text-center shadow-sm {{ count($cards) === 0 ? '' : 'hidden' }}">
<div class="w-16 h-16 rounded-full bg-purple-50 text-purple-500 flex items-center justify-center text-3xl mx-auto mb-4 animate-bounce">
❤️
</div>
<h3 class="text-lg font-extrabold text-[#1a2b49] mb-2">Chưa nhận được Thank Card nào</h3>
<p class="text-sm text-gray-500 max-w-sm mx-auto font-medium">Bạn chưa nhận được Thank Card nào trong tháng này.</p>
</div>
<!-- Activity Feed Grid -->
<div id="cardsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 {{ count($cards) === 0 ? 'hidden' : '' }}">
@include('user.partials.received_cards_feed', ['cards' => $cards])
</div>
<!-- Load More Container -->
<div id="loadMoreContainer" class="flex justify-center mt-16 {{ $hasMore ? '' : 'hidden' }}">
<button id="loadMoreBtn" class="px-8 py-3 bg-[#3462f7] hover:bg-[#254edb] text-white font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 cursor-pointer">
<span id="btnText">Xem thêm</span>
<span id="btnSpinner" class="hidden animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></span>
</button>
</div>
</div> </div>
@endsection @endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const monthInput = document.getElementById('month');
const cardsGrid = document.getElementById('cardsGrid');
const emptyState = document.getElementById('emptyState');
const loadMoreContainer = document.getElementById('loadMoreContainer');
const loadMoreBtn = document.getElementById('loadMoreBtn');
const btnText = document.getElementById('btnText');
const btnSpinner = document.getElementById('btnSpinner');
const totalCardsVal = document.getElementById('totalCardsVal');
const totalSendersVal = document.getElementById('totalSendersVal');
let offset = 12;
async function fetchFeed(reset = false) {
const month = monthInput.value;
const currentOffset = reset ? 0 : offset;
const url = `{{ route('user.received') }}?month=${month}&offset=${currentOffset}`;
if (reset) {
cardsGrid.style.opacity = '0.5';
} else {
loadMoreBtn.disabled = true;
btnText.textContent = 'Đang tải...';
btnSpinner.classList.remove('hidden');
}
try {
const response = await fetch(url, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
});
const data = await response.json();
if (data.success) {
if (reset) {
cardsGrid.innerHTML = data.html;
offset = 12;
cardsGrid.style.opacity = '1';
} else {
cardsGrid.insertAdjacentHTML('beforeend', data.html);
offset += 12;
loadMoreBtn.disabled = false;
btnText.textContent = 'Xem thêm';
btnSpinner.classList.add('hidden');
}
// Update statistics
totalCardsVal.textContent = data.totalCards;
totalSendersVal.textContent = data.totalSenders;
const [year, month] = monthInput.value.split('-');
document.getElementById('statMonth').textContent = `tháng ${parseInt(month, 10)}/${year}`;
// Update Visibility
const cardCount = cardsGrid.children.length;
if (cardCount === 0) {
cardsGrid.classList.add('hidden');
emptyState.classList.remove('hidden');
loadMoreContainer.classList.add('hidden');
} else {
cardsGrid.classList.remove('hidden');
emptyState.classList.add('hidden');
if (data.hasMore) {
loadMoreContainer.classList.remove('hidden');
} else {
loadMoreContainer.classList.add('hidden');
}
}
}
} catch (error) {
console.error('Error fetching received cards feed:', error);
if (reset) {
cardsGrid.style.opacity = '1';
} else {
loadMoreBtn.disabled = false;
btnText.textContent = 'Xem thêm';
btnSpinner.classList.add('hidden');
}
}
}
monthInput.addEventListener('change', () => {
fetchFeed(true);
});
loadMoreBtn.addEventListener('click', () => {
fetchFeed(false);
});
});
</script>
@endpush
resources/views/user/sent.blade.php
+150 -42
View File
@@ -9,60 +9,168 @@
<h2 class="text-[32px] md:text-[42px] font-extrabold text-[#1a2b49] mb-3">📨 Thanks đã gửi</h2> <h2 class="text-[32px] md:text-[42px] font-extrabold text-[#1a2b49] mb-3">📨 Thanks đã gửi</h2>
<p class="text-[16px] text-gray-600 mb-6">Các lời cảm ơn bạn đã gửi tới đồng nghiệp.</p> <p class="text-[16px] text-gray-600 mb-6">Các lời cảm ơn bạn đã gửi tới đồng nghiệp.</p>
</x-hero-banner> </x-hero-banner>
<div class="flex flex-col md:flex-row md:items-center gap-6 mb-8 mt-6">
<div class="flex-1 max-w-sm">
<x-stat-card title="Tổng số thanks gửi trong tháng" value="{{ count($cards ?? []) }}" iconBgClass="bg-blue-50" iconColorClass="text-blue-500">
<svg class="w-[26px] h-[26px] transform -rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</x-stat-card>
</div>
<form method="GET" class="flex items-center gap-4 bg-white p-3 md:p-4 pr-6 rounded-[24px] shadow-[0_4px_12px_rgba(0,0,0,0.03)] border border-gray-100 transition-all hover:shadow-md"> <!-- Month Filter & Actions -->
<div class="w-12 h-12 rounded-full bg-[#f5f7ff] flex items-center justify-center text-primary"> <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8 mt-6">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg> <form id="filterForm" class="flex items-center gap-4 bg-white p-3 md:p-4 pr-6 rounded-[24px] shadow-[0_4px_12px_rgba(0,0,0,0.03)] border border-gray-100 transition-all hover:shadow-md">
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-primary">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div> </div>
<div> <div>
<label for="month" class="block text-xs font-extrabold text-gray-400 uppercase tracking-wider mb-1">Lọc theo tháng</label> <label for="month" class="block text-xs font-extrabold text-gray-400 uppercase tracking-wider mb-1">Lọc theo tháng</label>
<input type="month" id="month" name="month" class="block w-full border-0 bg-transparent p-0 text-lg font-bold text-[#1a2b49] focus:ring-0 cursor-pointer" value="{{ request('month', \Carbon\Carbon::now()->format('Y-m')) }}" onchange="this.form.submit()" /> <input type="month" id="month" name="month" class="block w-full border-0 bg-transparent p-0 text-lg font-bold text-[#1a2b49] focus:ring-0 cursor-pointer" value="{{ $selectedMonth }}" />
</div> </div>
</form> </form>
</div> </div>
<!-- Statistics Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-8">
<div class="bg-white rounded-[24px] border border-gray-100/80 p-5 shadow-sm flex items-center gap-4 hover:shadow-md transition-all duration-300">
<div class="w-12 h-12 rounded-full bg-blue-50 text-[#3462f7] flex items-center justify-center shrink-0">
<svg class="w-6 h-6 transform -rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</div>
<div>
<p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Tổng số thanks gửi trong <span id="statMonth">tháng {{ \Carbon\Carbon::parse($selectedMonth)->format('n/Y') }}</span></p>
<h3 class="text-2xl font-extrabold text-[#1a2b49] mt-0.5" id="totalCardsVal">{{ $totalCards }}</h3>
</div>
</div>
@if (!empty($cards) && $cards->count()) <div class="bg-white rounded-[24px] border border-gray-100/80 p-5 shadow-sm flex items-center gap-4 hover:shadow-md transition-all duration-300">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="w-12 h-12 rounded-full bg-purple-50 text-[#8b5cf6] flex items-center justify-center shrink-0">
@foreach ($cards as $c) <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-gray-100/50 p-6 flex flex-col justify-between hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
<div class="flex items-start gap-4"> </svg>
@if($c->receiverUser)
<x-avatar :user="$c->receiverUser" class="w-12 h-12 rounded-full object-cover border-2 border-blue-100 flex-shrink-0" />
<div class="flex-1 min-w-0">
<h4 class="font-bold text-[#1a2b49] text-base truncate" title="{{ $c->receiverUser->name }}">{{ $c->receiverUser->name }}</h4>
<p class="text-xs font-semibold text-gray-400 mt-0.5">MSNV: {{ $c->receiverUser->msnv }}</p>
<p class="text-xs text-gray-500 mt-1 truncate" title="{{ $c->receiverUser->mail }}">{{ $c->receiverUser->mail }}</p>
</div> </div>
@else <div>
<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 font-bold flex-shrink-0"> <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Số người đã nhận</p>
{{ strtoupper(substr($c->receiver ?? 'R', 0, 1)) }} <h3 class="text-2xl font-extrabold text-[#1a2b49] mt-0.5" id="totalReceiversVal">{{ $totalReceivers }}</h3>
</div>
<div class="flex-1 min-w-0">
<h4 class="font-bold text-[#1a2b49] text-base truncate">Tới: {{ $c->receiver ?? '---' }}</h4>
<p class="text-xs font-semibold text-gray-400 mt-0.5">MSNV: {{ $c->receiver ?? '---' }}</p>
</div>
@endif
</div>
<div class="flex justify-between items-center mt-6 pt-4 border-t border-gray-50">
<span class="text-gray-400 text-xs font-medium">{{ \Carbon\Carbon::parse($c->date)->format('d/m/Y') }}</span>
<span class="px-3 py-1 inline-flex text-xs font-extrabold rounded-full bg-blue-50 text-blue-700 border border-blue-100/80">
-{{ $c->sent }} thẻ
</span>
</div> </div>
</div> </div>
@endforeach
</div> </div>
@else
<x-empty-state title="Chưa gửi Thanks" description="Bạn chưa gửi bất kỳ Thank Card nào trong tháng đã chọn." icon="hero"/> <!-- Empty State -->
@endif <div id="emptyState" class="bg-white rounded-[24px] border border-dashed border-gray-200 p-12 text-center shadow-sm {{ count($cards) === 0 ? '' : 'hidden' }}">
<div class="w-16 h-16 rounded-full bg-blue-50 text-blue-500 flex items-center justify-center text-3xl mx-auto mb-4 animate-bounce">
💌
</div>
<h3 class="text-lg font-extrabold text-[#1a2b49] mb-2">Chưa gửi Thank Card nào</h3>
<p class="text-sm text-gray-500 max-w-sm mx-auto font-medium mb-6">Bạn chưa gửi Thank Card nào trong tháng này.</p>
<a href="{{ route('user.send') }}" class="px-6 py-3 bg-[#3462f7] hover:bg-[#254edb] text-white font-bold rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center gap-2">
<span>Gửi Thank Card ngay</span>
</a>
</div>
<!-- Activity Feed Grid -->
<div id="cardsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 {{ count($cards) === 0 ? 'hidden' : '' }}">
@include('user.partials.sent_cards_feed', ['cards' => $cards])
</div>
<!-- Load More Container -->
<div id="loadMoreContainer" class="flex justify-center mt-16 {{ $hasMore ? '' : 'hidden' }}">
<button id="loadMoreBtn" class="px-8 py-3 bg-[#3462f7] hover:bg-[#254edb] text-white font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 cursor-pointer">
<span id="btnText">Xem thêm</span>
<span id="btnSpinner" class="hidden animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></span>
</button>
</div>
</div> </div>
@endsection @endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const monthInput = document.getElementById('month');
const cardsGrid = document.getElementById('cardsGrid');
const emptyState = document.getElementById('emptyState');
const loadMoreContainer = document.getElementById('loadMoreContainer');
const loadMoreBtn = document.getElementById('loadMoreBtn');
const btnText = document.getElementById('btnText');
const btnSpinner = document.getElementById('btnSpinner');
const totalCardsVal = document.getElementById('totalCardsVal');
const totalReceiversVal = document.getElementById('totalReceiversVal');
let offset = 12;
async function fetchFeed(reset = false) {
const month = monthInput.value;
const currentOffset = reset ? 0 : offset;
const url = `{{ route('user.sent') }}?month=${month}&offset=${currentOffset}`;
if (reset) {
cardsGrid.style.opacity = '0.5';
} else {
loadMoreBtn.disabled = true;
btnText.textContent = 'Đang tải...';
btnSpinner.classList.remove('hidden');
}
try {
const response = await fetch(url, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
});
const data = await response.json();
if (data.success) {
if (reset) {
cardsGrid.innerHTML = data.html;
offset = 12;
cardsGrid.style.opacity = '1';
} else {
cardsGrid.insertAdjacentHTML('beforeend', data.html);
offset += 12;
loadMoreBtn.disabled = false;
btnText.textContent = 'Xem thêm';
btnSpinner.classList.add('hidden');
}
// Update statistics
totalCardsVal.textContent = data.totalCards;
totalReceiversVal.textContent = data.totalReceivers;
const [year, month] = monthInput.value.split('-');
document.getElementById('statMonth').textContent = `tháng ${parseInt(month, 10)}/${year}`;
// Update Visibility
const cardCount = cardsGrid.children.length;
if (cardCount === 0) {
cardsGrid.classList.add('hidden');
emptyState.classList.remove('hidden');
loadMoreContainer.classList.add('hidden');
} else {
cardsGrid.classList.remove('hidden');
emptyState.classList.add('hidden');
if (data.hasMore) {
loadMoreContainer.classList.remove('hidden');
} else {
loadMoreContainer.classList.add('hidden');
}
}
}
} catch (error) {
console.error('Error fetching sent cards feed:', error);
if (reset) {
cardsGrid.style.opacity = '1';
} else {
loadMoreBtn.disabled = false;
btnText.textContent = 'Xem thêm';
btnSpinner.classList.add('hidden');
}
}
}
monthInput.addEventListener('change', () => {
fetchFeed(true);
});
loadMoreBtn.addEventListener('click', () => {
fetchFeed(false);
});
});
</script>
@endpush