layer-chicken/resources/views/filament/resources/finance/payrolls/list-payrolls.blade.php

108 lines
5.7 KiB
PHP

<x-filament-panels::page>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@forelse ($currentMonthPayrolls as $payroll)
<div x-data="{ showAdjustments: false }"
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-sm overflow-hidden">
<div class="p-5 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
<div class="flex items-center gap-3">
<div>
<h3 class="text-sm font-bold">{{ $payroll->user->name }}</h3>
</div>
</div>
<div>
{{ $payroll->period_label }}</div>
</div>
<div class="p-5 space-y-4">
<div class="flex justify-between text-xs">
<span class="text-gray-500">Gaji Pokok</span>
<span
class="font-bold text-gray-900 dark:text-gray-100">{{ $payroll->base_salary_formatted }}</span>
</div>
<div class="space-y-2">
<button @click="showAdjustments = !showAdjustments"
class="w-full flex justify-between text-xs focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-800 p-1 rounded">
<span class="text-gray-500 flex items-center gap-1">
<x-heroicon-m-chevron-right class="w-3 h-3 transition"
x-bind:class="showAdjustments ? 'rotate-90' : ''" />
Penyesuaian
</span>
<div class="flex gap-2 font-bold">
<span class="text-emerald-600">+{{ $payroll->bonus_formatted }}</span>
<span class="text-rose-600">-{{ $payroll->deduction_formatted }}</span>
</div>
</button>
<div x-show="showAdjustments"
class="pl-4 space-y-1 mt-2 border-l border-gray-100 dark:border-gray-800">
@forelse($payroll->adjustments as $adj)
<div class="flex justify-between items-center text-[11px]">
<span class="text-gray-600 dark:text-gray-400">
{{ $adj->description }}
</span>
<div class="flex items-center gap-2">
<span @class([
'font-bold',
'text-emerald-600' => $adj->type === \App\Enums\SalaryAdjustmentType::BONUS,
'text-rose-600' =>
$adj->type === \App\Enums\SalaryAdjustmentType::DEDUCTION,
])>
{{ $adj->type === \App\Enums\SalaryAdjustmentType::BONUS ? '+' : '-' }}
{{ $adj->amount_formatted }}
</span>
<div class="flex items-center gap-1">
{{ $this->editAdjustmentAction()->arguments([
'adjustment_id' => $adj->id,
]) }}
{{ $this->deleteAdjustmentAction()->arguments([
'adjustment_id' => $adj->id,
]) }}
</div>
</div>
</div>
@empty
<div class="text-[10px] text-gray-400 italic">Tidak ada rincian</div>
@endforelse
</div>
<div
class="pt-4 border-t border-gray-100 dark:border-gray-800 flex justify-between items-center">
<div class="flex flex-col">
<span class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Total
Diterima</span>
<span class="text-lg font-black text-gray-900 dark:text-white">
{{ $payroll->total_salary_formatted }}
</span>
</div>
<div
class="px-2 py-0.5 rounded text-red-500 text-[10px] font-bold border border-red-500 dark:border-red-800">
{{ $payroll->is_paid_label }}
</div>
</div>
</div>
<div class="px-5 pb-5">
{{ $this->addAdjustmentAction()->arguments([
'payroll_id' => $payroll->id,
]) }}
</div>
</div>
</div>
@empty
<div
class="col-span-full p-12 text-center border-2 border-dashed border-gray-200 dark:border-gray-800 rounded-xl">
<p class="text-gray-500">Data gaji {{ now()->translatedFormat('F Y') }} belum tersedia.</p>
</div>
@endforelse
</div>
{{ $this->content }}
<x-filament-actions::modals />
</x-filament-panels::page>