feat: menambahkan lottie saat data nya tidak ada
This commit is contained in:
Yoga Pangestu
parent
4988fe4420
commit
6bcd196010
@ -27,130 +27,138 @@ class="text-sm">
|
||||
|
||||
<flux:separator class="mb-6" />
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
|
||||
@foreach ($outlets as $outlet)
|
||||
<flux:card
|
||||
class="space-y-2 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="{{ $outlet['image'] }}" alt="{{ $outlet['image'] }}"
|
||||
class="w-12 h-12 rounded-full cursor-pointer"
|
||||
wire:click="openImage('{{ $outlet['image'] }}')">
|
||||
@if (!empty($outlets))
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
|
||||
@foreach ($outlets as $outlet)
|
||||
<flux:card
|
||||
class="space-y-2 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="{{ $outlet['image'] }}" alt="{{ $outlet['image'] }}"
|
||||
class="w-12 h-12 rounded-full cursor-pointer"
|
||||
wire:click="openImage('{{ $outlet['image'] }}')">
|
||||
|
||||
<div>
|
||||
<flux:heading size="lg">{{ $outlet['name'] }}</flux:heading>
|
||||
<flux:badge color="{{ $outlet['status']['color'] }}" size="sm">
|
||||
{{ $outlet['status']['label'] }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 mb-4">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<flux:icon.phone class="w-4 h-4 text-gray-500 dark:text-white" />
|
||||
<span class="text-gray-700 dark:text-gray-300">{{ $outlet['phone_number'] }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-2 text-sm">
|
||||
<flux:icon.map-pin class="w-4 h-4 text-gray-500 dark:text-white" />
|
||||
<div class="text-gray-700 dark:text-gray-300">
|
||||
<div class="font-medium">{{ $outlet['landmark'] }}</div>
|
||||
<div class="text-gray-600 dark:text-gray-400">{{ $outlet['address'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<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" />
|
||||
Jam Operasional
|
||||
</h4>
|
||||
<div class="space-y-1 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
@foreach ($outlet['opening_hours'] as $day => $time)
|
||||
<div class="flex justify-between text-xs">
|
||||
<span
|
||||
class="font-medium text-gray-700 dark:text-gray-300">{{ $day }}:</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">
|
||||
{{ $time['is_closed'] ? 'Tutup' : "{$time['open']} - {$time['close']}" }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<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" />
|
||||
Fasilitas
|
||||
</h4>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($outlet['facilities'] as $facility)
|
||||
<flux:badge color="zinc" size="sm">{{ $facility }}</flux:badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
<div class="flex flex-col gap-2 text-xs">
|
||||
<div>
|
||||
<span class="font-medium text-gray-900 dark:text-white">Tgl Buka:</span>
|
||||
<span class="text-gray-700 dark:text-gray-300">{{ $outlet['opened_date'] }}</span>
|
||||
<span class="text-gray-500">({{ $outlet['opened_ago'] }})</span>
|
||||
</div>
|
||||
@if ($outlet['closed_date'])
|
||||
<div>
|
||||
<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-500">({{ $outlet['closed_ago'] }})</span>
|
||||
<flux:heading size="lg">{{ $outlet['name'] }}</flux:heading>
|
||||
<flux:badge color="{{ $outlet['status']['color'] }}" size="sm">
|
||||
{{ $outlet['status']['label'] }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 mb-4">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<flux:icon.phone class="w-4 h-4 text-gray-500 dark:text-white" />
|
||||
<span class="text-gray-700 dark:text-gray-300">{{ $outlet['phone_number'] }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-2 text-sm">
|
||||
<flux:icon.map-pin class="w-4 h-4 text-gray-500 dark:text-white" />
|
||||
<div class="text-gray-700 dark:text-gray-300">
|
||||
<div class="font-medium">{{ $outlet['landmark'] }}</div>
|
||||
<div class="text-gray-600 dark:text-gray-400">{{ $outlet['address'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (count($outlet['images']) > 0)
|
||||
<div class="mb-4">
|
||||
<h4
|
||||
class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<flux:icon.photo class="w-4 h-4" />
|
||||
Gambar
|
||||
<flux:icon.clock class="w-4 h-4" />
|
||||
Jam Operasional
|
||||
</h4>
|
||||
<div class="flex mt-6">
|
||||
@foreach ($outlet['images'] as $key => $value)
|
||||
<img src="{{ $value }}" alt="{{ $value }}"
|
||||
class="w-12 h-12 rounded-full -ml-3 first:ml-0 cursor-pointer"
|
||||
wire:click="openImage('{{ $value }}')">
|
||||
<div class="space-y-1 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
@foreach ($outlet['opening_hours'] as $day => $time)
|
||||
<div class="flex justify-between text-xs">
|
||||
<span
|
||||
class="font-medium text-gray-700 dark:text-gray-300">{{ $day }}:</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">
|
||||
{{ $time['is_closed'] ? 'Tutup' : "{$time['open']} - {$time['close']}" }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@canany(['update outlet', 'delete outlet'])
|
||||
<flux:separator></flux:separator>
|
||||
<div class="flex gap-2 pt-2 border-gray-200 dark:border-gray-700">
|
||||
@can('update outlet')
|
||||
<flux:tooltip content="Ubah">
|
||||
<flux:button href="{{ route('studio.master.outlet.edit', $outlet['hash']) }}"
|
||||
wire:navigate.hover variant="primary" color="yellow" icon="pencil-square"
|
||||
size="sm">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
@endcan
|
||||
<div class="mb-4">
|
||||
<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" />
|
||||
Fasilitas
|
||||
</h4>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($outlet['facilities'] as $facility)
|
||||
<flux:badge color="zinc" size="sm">{{ $facility }}</flux:badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@can('delete outlet')
|
||||
<flux:modal.trigger name="delete">
|
||||
<flux:tooltip content="Hapus">
|
||||
<flux:button variant="danger" icon="trash" size="sm"
|
||||
wire:click="$dispatch('fn:confirmAction', {id: '{{ $outlet['hash'] }}'})">
|
||||
<div class="mb-4 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
<div class="flex flex-col gap-2 text-xs">
|
||||
<div>
|
||||
<span class="font-medium text-gray-900 dark:text-white">Tgl Buka:</span>
|
||||
<span class="text-gray-700 dark:text-gray-300">{{ $outlet['opened_date'] }}</span>
|
||||
<span class="text-gray-500">({{ $outlet['opened_ago'] }})</span>
|
||||
</div>
|
||||
@if ($outlet['closed_date'])
|
||||
<div>
|
||||
<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-500">({{ $outlet['closed_ago'] }})</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (count($outlet['images']) > 0)
|
||||
<div class="mb-4">
|
||||
<h4
|
||||
class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<flux:icon.photo class="w-4 h-4" />
|
||||
Gambar
|
||||
</h4>
|
||||
<div class="flex mt-6">
|
||||
@foreach ($outlet['images'] as $key => $value)
|
||||
<img src="{{ $value }}" alt="{{ $value }}"
|
||||
class="w-12 h-12 rounded-full -ml-3 first:ml-0 cursor-pointer"
|
||||
wire:click="openImage('{{ $value }}')">
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@canany(['update outlet', 'delete outlet'])
|
||||
<flux:separator></flux:separator>
|
||||
<div class="flex gap-2 pt-2 border-gray-200 dark:border-gray-700">
|
||||
@can('update outlet')
|
||||
<flux:tooltip content="Ubah">
|
||||
<flux:button href="{{ route('studio.master.outlet.edit', $outlet['hash']) }}"
|
||||
wire:navigate.hover variant="primary" color="yellow" icon="pencil-square"
|
||||
size="sm">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
@endcan
|
||||
</div>
|
||||
@endcanany
|
||||
</flux:card>
|
||||
@endforeach
|
||||
</div>
|
||||
@endcan
|
||||
|
||||
@can('delete outlet')
|
||||
<flux:modal.trigger name="delete">
|
||||
<flux:tooltip content="Hapus">
|
||||
<flux:button variant="danger" icon="trash" size="sm"
|
||||
wire:click="$dispatch('fn:confirmAction', {id: '{{ $outlet['hash'] }}'})">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
@endcan
|
||||
</div>
|
||||
@endcanany
|
||||
</flux:card>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
@include('components.lottie.not-found')
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
@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:main>
|
||||
|
||||
@assets
|
||||
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
||||
@endassets
|
||||
|
||||
@ -35,172 +35,185 @@ class="text-sm">
|
||||
|
||||
<flux:separator class="mb-6" />
|
||||
|
||||
<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)
|
||||
<flux:card
|
||||
class="relative space-y-4 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
|
||||
<div
|
||||
class="flex flex-col items-center text-center mb-4 p-4 rounded-t-lg {{ $employee['user']['status']['gradient'] }}">
|
||||
<flux:avatar circle size="xl" name="{{ $employee['full_name'] }}" class="mb-3" />
|
||||
<flux:heading size="lg" class="mb-1 text-white">{{ $employee['full_name'] }}
|
||||
</flux:heading>
|
||||
<div class="text-sm text-white/80 mb-2">{{ $employee['code'] }}</div>
|
||||
</div>
|
||||
|
||||
<flux:separator></flux:separator>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Kredensial
|
||||
@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">
|
||||
@foreach ($employees as $employee)
|
||||
<flux:card
|
||||
class="relative space-y-4 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
|
||||
<div
|
||||
class="flex flex-col items-center text-center mb-4 p-4 rounded-t-lg {{ $employee['user']['status']['gradient'] }}">
|
||||
<flux:avatar circle size="xl" name="{{ $employee['full_name'] }}" class="mb-3" />
|
||||
<flux:heading size="lg" class="mb-1 text-white">{{ $employee['full_name'] }}
|
||||
</flux:heading>
|
||||
<div class="flex items-start gap-2 text-sm">
|
||||
<flux:icon.envelope
|
||||
class="w-4 h-4 text-gray-500 dark:text-white flex-shrink-0 mt-0.5" />
|
||||
<div class="text-gray-700 dark:text-gray-300">
|
||||
<flux:text>{{ $employee['user']['email'] }}</flux:text>
|
||||
<flux:text class="text-xs">{{ $employee['user']['username'] }}</flux:text>
|
||||
<div class="text-sm text-white/80 mb-2">{{ $employee['code'] }}</div>
|
||||
</div>
|
||||
|
||||
<flux:separator></flux:separator>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">
|
||||
Kredensial
|
||||
</flux:heading>
|
||||
<div class="flex items-start gap-2 text-sm">
|
||||
<flux:icon.envelope
|
||||
class="w-4 h-4 text-gray-500 dark:text-white flex-shrink-0 mt-0.5" />
|
||||
<div class="text-gray-700 dark:text-gray-300">
|
||||
<flux:text>{{ $employee['user']['email'] }}</flux:text>
|
||||
<flux:text class="text-xs">{{ $employee['user']['username'] }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Telepon
|
||||
</flux:heading>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<flux:icon.phone class="w-4 h-4 text-gray-500 dark:text-white" />
|
||||
<flux:text>{{ $employee['phone_number'] }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Alamat
|
||||
</flux:heading>
|
||||
<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:text>{{ $employee['address'] }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Jenis
|
||||
Kelamin</flux:heading>
|
||||
<flux:badge color="{{ $employee['gender']['color'] }}" size="sm">
|
||||
{{ $employee['gender']['label'] }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Gaji
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Telepon
|
||||
</flux:heading>
|
||||
<flux:text>{{ $employee['base_salary'] }}</flux:text>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<flux:icon.phone class="w-4 h-4 text-gray-500 dark:text-white" />
|
||||
<flux:text>{{ $employee['phone_number'] }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($employee['referral_code'])
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Kode
|
||||
Referral</flux:heading>
|
||||
<flux:badge color="zinc" size="sm">{{ $employee['referral_code'] }}</flux:badge>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Alamat
|
||||
</flux:heading>
|
||||
<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:text>{{ $employee['address'] }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Outlet
|
||||
</flux:heading>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($employee['outlets'] as $outlet)
|
||||
<span class="text-xs text-gray-400 border border-gray-400 rounded px-2 py-1">
|
||||
{{ $outlet }}
|
||||
</span>
|
||||
@endforeach
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">
|
||||
Jenis
|
||||
Kelamin</flux:heading>
|
||||
<flux:badge color="{{ $employee['gender']['color'] }}" size="sm">
|
||||
{{ $employee['gender']['label'] }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Gaji
|
||||
</flux:heading>
|
||||
<flux:text>{{ $employee['base_salary'] }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Peran
|
||||
</flux:heading>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($employee['roles'] as $role)
|
||||
<span class="text-xs text-gray-400 border border-gray-400 rounded px-2 py-1">
|
||||
{{ $role }}
|
||||
</span>
|
||||
@endforeach
|
||||
@if ($employee['referral_code'])
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Kode
|
||||
Referral</flux:heading>
|
||||
<flux:badge color="zinc" size="sm">{{ $employee['referral_code'] }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Outlet
|
||||
</flux:heading>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($employee['outlets'] as $outlet)
|
||||
<span class="text-xs text-gray-400 border border-gray-400 rounded px-2 py-1">
|
||||
{{ $outlet }}
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">
|
||||
Informasi
|
||||
Tanggal</flux:heading>
|
||||
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-3">
|
||||
<div class="flex flex-col gap-2 text-xs">
|
||||
<div>
|
||||
<span class="font-medium text-gray-900 dark:text-white">Tgl Lahir:</span>
|
||||
<span
|
||||
class="text-gray-700 dark:text-gray-300">{{ $employee['birthdate'] }}</span>
|
||||
<span class="text-gray-500">({{ $employee['birth_age'] }})</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-gray-900 dark:text-white">Tgl
|
||||
Bergabung:</span>
|
||||
<span
|
||||
class="text-gray-700 dark:text-gray-300">{{ $employee['hire_date'] }}</span>
|
||||
<span class="text-gray-500">({{ $employee['hire_ago'] }})</span>
|
||||
</div>
|
||||
@if ($employee['resign_date'])
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Peran
|
||||
</flux:heading>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($employee['roles'] as $role)
|
||||
<span class="text-xs text-gray-400 border border-gray-400 rounded px-2 py-1">
|
||||
{{ $role }}
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">
|
||||
Informasi
|
||||
Tanggal</flux:heading>
|
||||
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-3">
|
||||
<div class="flex flex-col gap-2 text-xs">
|
||||
<div>
|
||||
<span class="font-medium text-gray-900 dark:text-white">Tgl Lahir:</span>
|
||||
<span
|
||||
class="text-gray-700 dark:text-gray-300">{{ $employee['birthdate'] }}</span>
|
||||
<span class="text-gray-500">({{ $employee['birth_age'] }})</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-gray-900 dark:text-white">Tgl
|
||||
Resign:</span>
|
||||
Bergabung:</span>
|
||||
<span
|
||||
class="text-gray-700 dark:text-gray-300">{{ $employee['resign_date'] }}</span>
|
||||
<span class="text-gray-500">({{ $employee['resign_ago'] }})</span>
|
||||
class="text-gray-700 dark:text-gray-300">{{ $employee['hire_date'] }}</span>
|
||||
<span class="text-gray-500">({{ $employee['hire_ago'] }})</span>
|
||||
</div>
|
||||
@endif
|
||||
@if ($employee['resign_date'])
|
||||
<div>
|
||||
<span class="font-medium text-gray-900 dark:text-white">Tgl
|
||||
Resign:</span>
|
||||
<span
|
||||
class="text-gray-700 dark:text-gray-300">{{ $employee['resign_date'] }}</span>
|
||||
<span class="text-gray-500">({{ $employee['resign_ago'] }})</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@canany(['update user', 'delete user'])
|
||||
@if (auth()->id() !== $employee['user']['id'])
|
||||
<flux:separator></flux:separator>
|
||||
<div class="flex gap-2 pt-2">
|
||||
@can('reset password user')
|
||||
<flux:modal.trigger name="reset-password">
|
||||
<flux:tooltip content="Reset Kata Sandi">
|
||||
<flux:button variant="primary" color="blue" icon="lock-open" size="sm"
|
||||
wire:click="$dispatch('fn:confirmAction', { id: '{{ $employee['user']['hash'] }}', title: 'Reset Kata Sandi', message: 'Anda yakin ingin mereset kata sandi pegawai ini menjadi {{ config('myconfig.password_default') }}?' ,confirmButtonText: 'Ya, Reset' })">
|
||||
</flux:button>
|
||||
@canany(['update user', 'delete user'])
|
||||
@if (auth()->id() !== $employee['user']['id'])
|
||||
<flux:separator></flux:separator>
|
||||
<div class="flex gap-2 pt-2">
|
||||
@can('reset password user')
|
||||
<flux:modal.trigger name="reset-password">
|
||||
<flux:tooltip content="Reset Kata Sandi">
|
||||
<flux:button variant="primary" color="blue" icon="lock-open" size="sm"
|
||||
wire:click="$dispatch('fn:confirmAction', { id: '{{ $employee['user']['hash'] }}', title: 'Reset Kata Sandi', message: 'Anda yakin ingin mereset kata sandi pegawai ini menjadi {{ config('myconfig.password_default') }}?' ,confirmButtonText: 'Ya, Reset' })">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
@endcan
|
||||
|
||||
@can('update user')
|
||||
<flux:tooltip content="Ubah">
|
||||
<flux:button
|
||||
href="{{ route('studio.master.user.edit', $employee['user']['hash']) }}"
|
||||
wire:navigate.hover variant="primary" color="yellow" icon="pencil-square"
|
||||
size="sm"></flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
@endcan
|
||||
@endcan
|
||||
|
||||
@can('update user')
|
||||
<flux:tooltip content="Ubah">
|
||||
<flux:button href="{{ route('studio.master.user.edit', $employee['user']['hash']) }}"
|
||||
wire:navigate.hover variant="primary" color="yellow" icon="pencil-square"
|
||||
size="sm"></flux:button>
|
||||
</flux:tooltip>
|
||||
@endcan
|
||||
@can('delete user')
|
||||
<flux:modal.trigger name="delete">
|
||||
<flux:tooltip content="Hapus">
|
||||
<flux:button variant="danger" icon="trash" size="sm"
|
||||
wire:click="$dispatch('fn:confirmAction', {id: '{{ $employee['user']['hash'] }}'})">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
@endcan
|
||||
</div>
|
||||
@endif
|
||||
@endcanany
|
||||
</flux:card>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
@include('components.lottie.not-found')
|
||||
|
||||
@can('delete user')
|
||||
<flux:modal.trigger name="delete">
|
||||
<flux:tooltip content="Hapus">
|
||||
<flux:button variant="danger" icon="trash" size="sm"
|
||||
wire:click="$dispatch('fn:confirmAction', {id: '{{ $employee['user']['hash'] }}'})">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
@endcan
|
||||
</div>
|
||||
@endif
|
||||
@endcanany
|
||||
</flux:card>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@include('components.confirmation.delete')
|
||||
@include('components.confirmation.reset-password')
|
||||
</flux:main>
|
||||
@assets
|
||||
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
||||
@endassets
|
||||
|
||||
Loading…
Reference in New Issue
Block a user