refactor(payroll): menyesuaikan tampilan nya

This commit is contained in:
Yoga Pangestu 2025-11-09 17:52:42 +07:00
parent d23de954d6
commit 1ada8a2738

View File

@ -16,63 +16,61 @@
</div>
<div class="mt-6">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-4 text-sm">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-4 text-sm items-start">
@foreach ($payrolls as $payroll)
<flux:card class="h-auto">
<div class="border rounded-lg p-4 bg-white shadow-sm dark:bg-zinc-900">
<div class="flex justify-between items-center mb-3">
<div>
<flux:heading>{{ $payroll->user->employee->full_name }}</flux:heading>
<flux:text>{{ formatDate($payroll->period_month, 'F Y') }}</flux:text>
</div>
<div class="text-right">
<flux:badge color="{{ $payroll->is_paid->color() }}">
{{ $payroll->is_paid->label() }}
</flux:badge>
</div>
<div class="flex justify-between items-center mb-3">
<div>
<flux:heading>{{ $payroll->user->employee->full_name }}</flux:heading>
<flux:text>{{ formatDate($payroll->period_month, 'F Y') }}</flux:text>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-2 text-sm">
<div>
<flux:text>Gaji Pokok</flux:text>
<div class="font-medium">{{ currency($payroll->base_salary, 'Rp') }}</div>
</div>
<div>
<flux:text>Bonus</flux:text>
<div class="font-medium text-green-600">{{ currency($payroll->bonus, 'Rp') }}</div>
</div>
<div>
<flux:text>Potongan</flux:text>
<div class="font-medium text-red-600">{{ currency($payroll->deduction, 'Rp') }}</div>
</div>
<div class="text-right">
<flux:badge color="{{ $payroll->is_paid->color() }}">
{{ $payroll->is_paid->label() }}
</flux:badge>
</div>
</div>
<flux:separator class="my-2 !bg-black dark:!bg-white" />
<div class="grid grid-cols-1 gap-4 mb-2 text-sm">
<div>
<flux:text>Gaji Pokok</flux:text>
<div class="font-medium">{{ currency($payroll->base_salary, 'Rp') }}</div>
</div>
<div>
<flux:text>Bonus</flux:text>
<div class="font-medium text-green-600">{{ currency($payroll->bonus, 'Rp') }}</div>
</div>
<div>
<flux:text>Potongan</flux:text>
<div class="font-medium text-red-600">{{ currency($payroll->deduction, 'Rp') }}</div>
</div>
</div>
<flux:text class="mb-1">Rincian</flux:text>
@foreach ($payroll->adjustments->where('payroll_id', $payroll->id) as $item)
<div class="flex justify-between items-start text-[13px] leading-tight mb-2">
<div>
<div
class="font-bold {{ $item->type->value == \App\Enums\SalaryAdjustmentType::DEDUCTION->value ? 'text-red-500' : 'text-green-500' }}">
{{ currency($item->amount, 'Rp') }}
</div>
<div class="text-gray-400 text-[12px]">{{ $item->description }}</div>
<flux:separator class="my-2 !bg-black dark:!bg-white" />
<flux:text class="mb-1">Rincian</flux:text>
@foreach ($payroll->adjustments->where('payroll_id', $payroll->id) as $item)
<div class="flex justify-between items-start text-[13px] leading-tight mb-2">
<div>
<div
class="font-bold {{ $item->type->value == \App\Enums\SalaryAdjustmentType::DEDUCTION->value ? 'text-red-500' : 'text-green-500' }}">
{{ currency($item->amount, 'Rp') }}
</div>
<flux:modal.trigger name="delete">
<flux:button variant="danger" icon="trash" size="sm"
wire:click="$dispatch('fn:confirmDelete', {id: '{{ $item->id }}'})">
</flux:button>
</flux:modal.trigger>
<div class="text-gray-400 text-[12px]">{{ $item->description }}</div>
</div>
@endforeach
<flux:separator class="my-2 !bg-black dark:!bg-white" />
<div class="flex justify-between items-center mt-2">
<flux:text>Total Gaji</flux:text>
<FLux:heading>{{ currency($payroll->total_salary, 'Rp') }}</FLux:heading>
<flux:modal.trigger name="delete">
<flux:button variant="danger" icon="trash" size="sm"
wire:click="$dispatch('fn:confirmDelete', {id: '{{ $item->id }}'})">
</flux:button>
</flux:modal.trigger>
</div>
@endforeach
<flux:separator class="my-2 !bg-black dark:!bg-white" />
<div class="flex justify-between items-center mt-2">
<flux:text>Total Gaji</flux:text>
<FLux:heading>{{ currency($payroll->total_salary, 'Rp') }}</FLux:heading>
</div>
</flux:card>
@endforeach