refactor(payroll): menyesuaikan tampilan nya
This commit is contained in:
parent
d23de954d6
commit
1ada8a2738
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user