181 lines
9.7 KiB
PHP
181 lines
9.7 KiB
PHP
<flux:main>
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<flux:heading size="xl">{{ $pageTitle }}</flux:heading>
|
|
</div>
|
|
@can('create user')
|
|
<div>
|
|
<flux:button href="{{ route('studio.master.user.create') }}" variant="primary" wire:navigate.hover
|
|
class="text-sm">
|
|
Tambah
|
|
</flux:button>
|
|
</div>
|
|
@endcan
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="mb-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<flux:card class="flex flex-col justify-center">
|
|
<flux:input icon="magnifying-glass" placeholder="Cari outlet..."
|
|
wire:model.live.debounce.500ms="search" />
|
|
</flux:card>
|
|
|
|
<flux:card>
|
|
<flux:checkbox.group wire:model.live="status" variant="buttons">
|
|
@foreach (\App\Enums\UserStatus::cases() as $status)
|
|
<flux:checkbox value="{{ $status->value }}" label="{{ $status->label() }}" />
|
|
@endforeach
|
|
</flux:checkbox.group>
|
|
</flux:card>
|
|
</div>
|
|
|
|
<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
|
|
</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>
|
|
<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>
|
|
<flux:text>{{ $employee['base_salary'] }}</flux:text>
|
|
</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>
|
|
</div>
|
|
@endif
|
|
|
|
@if (count($employee['outlets']) > 0)
|
|
<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>
|
|
@endif
|
|
|
|
<div>
|
|
<flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">
|
|
Informasi
|
|
Tanggal</flux:heading>
|
|
<div class="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 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['user']['hire_date'] }}</span>
|
|
<span class="text-gray-500">({{ $employee['user']['hire_ago'] }})</span>
|
|
</div>
|
|
@if ($employee['user']['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['user']['resign_date'] }}</span>
|
|
<span class="text-gray-500">({{ $employee['user']['resign_ago'] }})</span>
|
|
</div>
|
|
@endif
|
|
</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('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:confirmDelete', {id: '{{ $employee['user']['hash'] }}'})">
|
|
</flux:button>
|
|
</flux:tooltip>
|
|
</flux:modal.trigger>
|
|
@endcan
|
|
</div>
|
|
@endif
|
|
@endcanany
|
|
</flux:card>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
@include('components.confirmation.delete')
|
|
</flux:main>
|