This commit is contained in:
antv
2026-07-17 00:11:23 +07:00
parent ad5465198e
commit c4e652e64c
5 changed files with 129 additions and 30 deletions
+21 -10
View File
@@ -4,22 +4,33 @@
@section('content')
<div class="max-w-[1280px] mx-auto w-full pb-10 px-2 lg:px-8">
{{-- Hero Section same look as dashboard --}}
<x-hero-banner>
<h2 class="text-[32px] md:text-[42px] font-extrabold text-[#1a2b49] mb-3">💜 Thanks đã nhận</h2>
<p class="text-[16px] text-gray-600 mb-6">Các lời cảm ơn đồng nghiệp đã gửi đến bạn.</p>
</x-hero-banner>
{{-- Summary Card simple total count --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 mt-6">
<x-stat-card title="Tổng số Thanks" value="{{ count($cards ?? []) }}" iconBgClass="bg-purple-50" iconColorClass="text-purple-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="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>
</x-stat-card>
<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 nhận trong tháng" value="{{ count($cards ?? []) }}" iconBgClass="bg-purple-50" iconColorClass="text-purple-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="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>
</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>
<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()" />
</div>
</form>
</div>
{{-- Cards List use simple styled cards --}}
@if (!empty($cards) && $cards->count())
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@foreach ($cards as $c)
@@ -33,7 +44,7 @@
@endforeach
</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 này." icon="hero"/>
<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"/>
@endif
</div>
@endsection