From 1ada8a273831c59d0143ffb8c192fbd0043365ed Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 9 Nov 2025 17:52:42 +0700
Subject: [PATCH] refactor(payroll): menyesuaikan tampilan nya

---
 .../studio/finance/payrolls.blade.php         | 94 +++++++++----------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/resources/views/livewire/studio/finance/payrolls.blade.php b/resources/views/livewire/studio/finance/payrolls.blade.php
index 4261c60..bab7404 100644
--- a/resources/views/livewire/studio/finance/payrolls.blade.php
+++ b/resources/views/livewire/studio/finance/payrolls.blade.php
@@ -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