feat: menambahkan lottie saat data nya tidak ada

This commit is contained in:
Yoga Pangestu 2025-11-13 19:27:36 +07:00
parent 4988fe4420
commit 6bcd196010
2 changed files with 271 additions and 246 deletions

View File

@ -27,6 +27,7 @@ class="text-sm">
<flux:separator class="mb-6" /> <flux:separator class="mb-6" />
@if (!empty($outlets))
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
@foreach ($outlets as $outlet) @foreach ($outlets as $outlet)
<flux:card <flux:card
@ -62,7 +63,8 @@ class="w-12 h-12 rounded-full cursor-pointer"
</div> </div>
<div class="mb-4"> <div class="mb-4">
<h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2"> <h4
class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
<flux:icon.clock class="w-4 h-4" /> <flux:icon.clock class="w-4 h-4" />
Jam Operasional Jam Operasional
</h4> </h4>
@ -80,7 +82,8 @@ class="font-medium text-gray-700 dark:text-gray-300">{{ $day }}:</span>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2"> <h4
class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
<flux:icon.wifi class="w-4 h-4" /> <flux:icon.wifi class="w-4 h-4" />
Fasilitas Fasilitas
</h4> </h4>
@ -101,7 +104,8 @@ class="font-medium text-gray-700 dark:text-gray-300">{{ $day }}:</span>
@if ($outlet['closed_date']) @if ($outlet['closed_date'])
<div> <div>
<span class="font-medium text-gray-900 dark:text-white">Tgl Tutup:</span> <span class="font-medium text-gray-900 dark:text-white">Tgl Tutup:</span>
<span class="text-gray-700 dark:text-gray-300">{{ $outlet['closed_date'] }}</span> <span
class="text-gray-700 dark:text-gray-300">{{ $outlet['closed_date'] }}</span>
<span class="text-gray-500">({{ $outlet['closed_ago'] }})</span> <span class="text-gray-500">({{ $outlet['closed_ago'] }})</span>
</div> </div>
@endif @endif
@ -151,6 +155,10 @@ class="w-12 h-12 rounded-full -ml-3 first:ml-0 cursor-pointer"
</flux:card> </flux:card>
@endforeach @endforeach
</div> </div>
@else
@include('components.lottie.not-found')
@endif
</div> </div>
@include('components.confirmation.delete') @include('components.confirmation.delete')
@ -162,3 +170,7 @@ class="w-12 h-12 rounded-full -ml-3 first:ml-0 cursor-pointer"
</flux:modal> </flux:modal>
</flux:main> </flux:main>
@assets
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
@endassets

View File

@ -35,6 +35,7 @@ class="text-sm">
<flux:separator class="mb-6" /> <flux:separator class="mb-6" />
@if (!empty($employees))
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 items-start"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 items-start">
@foreach ($employees as $employee) @foreach ($employees as $employee)
<flux:card <flux:card
@ -51,7 +52,8 @@ class="flex flex-col items-center text-center mb-4 p-4 rounded-t-lg {{ $employee
<div class="space-y-3"> <div class="space-y-3">
<div> <div>
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Kredensial <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">
Kredensial
</flux:heading> </flux:heading>
<div class="flex items-start gap-2 text-sm"> <div class="flex items-start gap-2 text-sm">
<flux:icon.envelope <flux:icon.envelope
@ -76,14 +78,16 @@ class="w-4 h-4 text-gray-500 dark:text-white flex-shrink-0 mt-0.5" />
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Alamat <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Alamat
</flux:heading> </flux:heading>
<div class="flex items-start gap-2 text-sm"> <div class="flex items-start gap-2 text-sm">
<flux:icon.map-pin class="w-4 h-4 text-gray-500 dark:text-white flex-shrink-0 mt-0.5" /> <flux:icon.map-pin
class="w-4 h-4 text-gray-500 dark:text-white flex-shrink-0 mt-0.5" />
<flux:text>{{ $employee['address'] }}</flux:text> <flux:text>{{ $employee['address'] }}</flux:text>
</div> </div>
</div> </div>
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div> <div>
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Jenis <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">
Jenis
Kelamin</flux:heading> Kelamin</flux:heading>
<flux:badge color="{{ $employee['gender']['color'] }}" size="sm"> <flux:badge color="{{ $employee['gender']['color'] }}" size="sm">
{{ $employee['gender']['label'] }} {{ $employee['gender']['label'] }}
@ -101,7 +105,8 @@ class="w-4 h-4 text-gray-500 dark:text-white flex-shrink-0 mt-0.5" />
<div> <div>
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Kode <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Kode
Referral</flux:heading> Referral</flux:heading>
<flux:badge color="zinc" size="sm">{{ $employee['referral_code'] }}</flux:badge> <flux:badge color="zinc" size="sm">{{ $employee['referral_code'] }}
</flux:badge>
</div> </div>
@endif @endif
@ -178,7 +183,8 @@ class="text-gray-700 dark:text-gray-300">{{ $employee['resign_date'] }}</span>
@can('update user') @can('update user')
<flux:tooltip content="Ubah"> <flux:tooltip content="Ubah">
<flux:button href="{{ route('studio.master.user.edit', $employee['user']['hash']) }}" <flux:button
href="{{ route('studio.master.user.edit', $employee['user']['hash']) }}"
wire:navigate.hover variant="primary" color="yellow" icon="pencil-square" wire:navigate.hover variant="primary" color="yellow" icon="pencil-square"
size="sm"></flux:button> size="sm"></flux:button>
</flux:tooltip> </flux:tooltip>
@ -199,8 +205,15 @@ class="text-gray-700 dark:text-gray-300">{{ $employee['resign_date'] }}</span>
</flux:card> </flux:card>
@endforeach @endforeach
</div> </div>
@else
@include('components.lottie.not-found')
@endif
</div> </div>
@include('components.confirmation.delete') @include('components.confirmation.delete')
@include('components.confirmation.reset-password') @include('components.confirmation.reset-password')
</flux:main> </flux:main>
@assets
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
@endassets