2b5983fb2a
- kasih otorisasi saat delete dan reset password - memperbaiki testnya - kasih kondisi untuk data kosong jangan di tampilkan di view
249 lines
14 KiB
PHP
249 lines
14 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">
|
|
<flux:callout icon="megaphone" color="blue" class="mb-6">
|
|
<flux:callout.heading>Informasi</flux:callout.heading>
|
|
<flux:callout.text>
|
|
Jika pegawai keluar / resign, maka silakan ubah statusnya menjadi "Tidak Aktif" dan jangan dihapus buat
|
|
informasi data.
|
|
</flux:callout.text>
|
|
</flux:callout>
|
|
|
|
<div class="mb-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<flux:input icon="magnifying-glass" placeholder="Cari pegawai..." wire:model.live.debounce.500ms="search"
|
|
autocomplete="off" />
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<flux:separator class="mb-6" />
|
|
|
|
@if ($employees->isNotEmpty())
|
|
<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>
|
|
|
|
@if ($employee['address'])
|
|
<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>
|
|
@endif
|
|
|
|
<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>{{ currency($employee->base_salary, 'Rp') }}</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->refferal_code }}
|
|
</flux:badge>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($employee->user?->outlets?->isNotEmpty())
|
|
<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->user?->outlets as $outlet)
|
|
<span
|
|
class="text-xs text-gray-400 border border-gray-400 rounded px-2 py-1">
|
|
{{ $outlet->name }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($employee->user?->roles?->isNotEmpty())
|
|
<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->user?->roles as $role)
|
|
<span
|
|
class="text-xs text-gray-400 border border-gray-400 rounded px-2 py-1">
|
|
{{ $role->name }}
|
|
</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-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">{{ formatDate($employee->birthdate) }}</span>
|
|
<span class="text-gray-500">({{ getAge($employee->birthdate) }})</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">{{ formatDate($employee->hire_date) }}</span>
|
|
<span class="text-gray-500">({{ timeAgo($employee->hire_date) }})</span>
|
|
</div>
|
|
@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">{{ formatDate($employee->resign_date) }}</span>
|
|
<span
|
|
class="text-gray-500">({{ timeAgo($employee->resign_date) }})</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@canany(['reset password user', '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-confirmation">
|
|
<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 }}' })">
|
|
</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>
|
|
@endcan
|
|
|
|
@can('delete user')
|
|
<flux:modal.trigger name="delete-confirmation">
|
|
<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.animations.lottie.not-found')
|
|
@endif
|
|
</div>
|
|
|
|
@include('components.modals.confirmation', [
|
|
'modalName' => 'reset-password-confirmation',
|
|
'modalTitle' => 'Reset Kata Sandi',
|
|
'modalMessage' =>
|
|
'Anda yakin ingin mereset kata sandi pegawai ini menjadi ' . config('myconfig.password_default') . '?',
|
|
'buttonVariant' => 'primary',
|
|
'buttonColor' => 'reset',
|
|
'buttonText' => 'Ya, Reset',
|
|
'target' => 'resetPassword',
|
|
])
|
|
|
|
@include('components.modals.confirmation', [
|
|
'modalName' => 'delete-confirmation',
|
|
'modalTitle' => 'Apakah Anda yakin?',
|
|
'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
|
|
'buttonVariant' => 'primary',
|
|
'buttonColor' => 'danger',
|
|
'buttonText' => 'Ya, Hapus',
|
|
])
|
|
</flux:main>
|
|
|
|
@assets
|
|
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
|
@endassets
|