81 lines
4.1 KiB
PHP
81 lines
4.1 KiB
PHP
<flux:main>
|
|
<flux:heading size="xl" level="1">Referral</flux:heading>
|
|
<flux:text class="mb-6 mt-2 text-base">Ajak temanmu bergabung dan dapatkan hadiah menarik dengan kode referralmu.
|
|
</flux:text>
|
|
|
|
<div class="mt-6">
|
|
<flux:card class="mb-8">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<flux:heading size="lg">Kode Referral Anda</flux:heading>
|
|
<div class="flex items-center gap-2 mt-2" x-data="{ copied: false }">
|
|
<div
|
|
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 font-mono text-xl font-bold tracking-wider">
|
|
{{ $referralCode->code }}
|
|
</div>
|
|
<flux:button x-bind:icon="copied ? 'check' : 'clipboard'"
|
|
@click="navigator.clipboard.writeText('{{ $referralCode->code }}'); copied = true; setTimeout(() => copied = false, 2000)">
|
|
<span x-text="copied ? 'Tersalin' : 'Salin'"></span>
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<flux:button href="{{ $whatsappUrl }}" target="_blank" color="emerald" icon="share">
|
|
Undang Teman via WhatsApp
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
|
|
<flux:heading size="lg" class="mb-4">Riwayat Penggunaan</flux:heading>
|
|
|
|
@if ($usages->isEmpty())
|
|
<flux:card class="flex flex-col items-center justify-center py-12">
|
|
@include('components.animations.lottie.boxing-cat', [
|
|
'message' => 'Belum ada yang menggunakan kode referral Anda. Ayo ajak teman-temanmu!',
|
|
])
|
|
</flux:card>
|
|
@else
|
|
<div class="grid grid-cols-1 gap-4">
|
|
@foreach ($usages as $usage)
|
|
<flux:card>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<flux:heading size="md">{{ $usage['name'] }}</flux:heading>
|
|
<flux:text size="sm">Bergabung pada
|
|
{{ formatDateLocalized($usage['joined_at'], 'd M Y') }}
|
|
</flux:text>
|
|
</div>
|
|
<div>
|
|
@if ($usage['is_reward_earned'])
|
|
<flux:badge color="emerald" inset="top bottom">Target Tercapai</flux:badge>
|
|
@else
|
|
<flux:badge color="amber" inset="top bottom">Dalam Proses</flux:badge>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between text-sm">
|
|
<flux:text>Akumulasi Belanja: {{ formatCurrencyNumber($usage['spending'], 'Rp') }}
|
|
</flux:text>
|
|
<flux:text>Target: {{ formatCurrencyNumber($targetSpending, 'Rp') }}</flux:text>
|
|
</div>
|
|
<div class="h-2 bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
|
|
<div class="h-full bg-emerald-500 transition-all duration-500"
|
|
style="width: {{ $usage['progress'] }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
@endforeach
|
|
</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
|