48 lines
2.4 KiB
PHP
48 lines
2.4 KiB
PHP
<flux:main>
|
|
<flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>
|
|
|
|
<div class="mt-6">
|
|
@if ($membership)
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
@foreach ($stats as $stat)
|
|
<div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
|
|
<div class="flex items-center justify-between">
|
|
<flux:heading size="lg">{{ $stat['title'] }}</flux:heading>
|
|
</div>
|
|
<flux:heading class="text-4xl! font-bold py-3 ">{{ $stat['value'] }}</flux:heading>
|
|
<flux:text size="lg">{{ $stat['description'] }}</flux:text>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="bg-zinc-200 dark:bg-zinc-700 rounded-xl p-6 shadow-md mb-8">
|
|
<h2 class="text-xl font-semibold mb-4">Proses ke Tier {{ $nextTierName }}</h2>
|
|
<div class="relative">
|
|
<div class="flex justify-between mb-2 text-sm text-gray-600">
|
|
<flux:text>Sekarang: {{ $currentSpending }}</flux:text>
|
|
<flux:text>Target: {{ $nextTierSpending }}</flux:text>
|
|
</div>
|
|
<div class="h-4 bg-white rounded-full overflow-hidden">
|
|
<div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
|
|
style="width: {{ $progress }}%"></div>
|
|
</div>
|
|
<flux:heading class="mt-2">{{ $progress }} %</flux:heading>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="flex justify-center flex-col">
|
|
<dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
|
|
loop style="width: 200px; height: 200px; margin: 0 auto;">
|
|
</dotlottie-wc>
|
|
<flux:text class="block text-center italic mt-5">
|
|
Apa? Anda belum menjadi member, ayo sini <flux:link href="{{ route('member.overview') }}"
|
|
wire:navigate>daftar.</flux:link>
|
|
</flux:text>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</flux:main>
|
|
@assets
|
|
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
|
@endassets
|