yadiparfum/parfum
yadiparfum/parfum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add empty state handling for rewards and redemption history.

Browse Source
This commit is contained in:
Yoga Pangestu 2026-01-05 19:33:19 +07:00
parent f107e99d64
commit 8f3dd9975c
1 changed files with 104 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
resources/views/livewire/member/rewards.blade.php
View File

@ -24,6 +24,7 @@ class="w-fit bg-zinc-100 dark:bg-zinc-800/50 p-4 rounded-3xl border border-zinc-
</flux:tabs>
<flux:tab.panel name="redeem-point">
@if (!empty($rewards))
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
@foreach ($rewards as $reward)
<div class="relative group h-[180px] sm:h-[200px] rounded-3xl transition-all duration-300 overflow-hidden"
@ -52,7 +53,8 @@ class="text-[10px] font-bold text-white/50 uppercase tracking-widest mb-1 trunca
</div>
<div class="text-2xl sm:text-3xl text-white/70 italic leading-tight">
{{ formatCurrencyNumber($reward['points']) }}
<span class="text-sm font-bold opacity-60 uppercase tracking-tight">Poin</span>
<span
class="text-sm font-bold opacity-60 uppercase tracking-tight">Poin</span>
</div>
<div
class="text-white/70 font-bold mt-1 text-base sm:text-lg truncate drop-shadow-md">
@ -85,10 +87,14 @@ class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rou
</div>
@endforeach
</div>
@else
@include('components.animations.lottie.not-found', [
'message' => 'Belum ada hadiah yang tersedia untuk Anda saat ini.',
])
@endif
</flux:tab.panel>
<flux:tab.panel name="history">
@if (!empty($userRedemptions))
<flux:card>
<flux:table>
<flux:table.columns>
@ -100,7 +106,7 @@ class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rou
</flux:table.columns>
<flux:table.rows>
@foreach ($userRedemptions as $redemption)
@forelse ($userRedemptions as $redemption)
<flux:table.row>
<flux:table.cell>{{ $redemption['reward']['name'] }}</flux:table.cell>
<flux:table.cell>{{ $redemption['code'] }}</flux:table.cell>
@ -116,11 +122,17 @@ class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rou
{{ formatDateLocalized($redemption['expires_at'], 'l, d M Y H:i') }}
</flux:table.cell>
</flux:table.row>
@endforeach
@empty
<flux:table.row>
<flux:table.cell colspan="5" class="text-center">
<flux:text class="text-sm italic">Belum ada poin yang ditukar
</flux:text>
</flux:table.cell>
</flux:table.row>
@endforelse
</flux:table.rows>
</flux:table>
</flux:card>
@endif
</flux:tab.panel>
</flux:tab.group>
</div>
@ -133,4 +145,8 @@ class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rou
'buttonColor' => 'zinc',
'buttonText' => 'Ya, Tukarkan',
])
@assets
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
@endassets
</flux:main>