dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement CRUD functionality for payroll adjustments including update and delete operations

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-14 14:38:38 +07:00
parent ac373240e7
commit d076df9d72
11 changed files with 405 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/Enums/Permission.php
View File

@ -94,9 +94,7 @@ enum Permission: string
case EMPLOYEE_ADVANCES_PAY = 'employee-advances.pay';
case PAYROLL_VIEW = 'payroll.view';
case PAYROLL_PAY = 'payroll.pay';
case PAYROLL_ADJUST = 'payroll.adjust';
case PAYROLL_CLOSE = 'payroll.close';
case SETTINGS_VIEW = 'settings.view';
case SETTINGS_UPDATE = 'settings.update';
@ -197,9 +195,7 @@ public function label(): string
self::EMPLOYEE_ADVANCES_PAY => 'Pelunasi Kasbon',
self::PAYROLL_VIEW => 'Lihat Gaji',
self::PAYROLL_PAY => 'Bayar Gaji',
self::PAYROLL_ADJUST => 'Sesuaikan Gaji',
self::PAYROLL_CLOSE => 'Tutup Periode Gaji',
self::SETTINGS_VIEW => 'Lihat Pengaturan Aplikasi',
self::SETTINGS_UPDATE => 'Ubah Pengaturan Aplikasi',
@ -247,8 +243,7 @@ public function group(): string
self::EMPLOYEE_ADVANCES_VIEW, self::EMPLOYEE_ADVANCES_CREATE, self::EMPLOYEE_ADVANCES_UPDATE,
self::EMPLOYEE_ADVANCES_DELETE, self::EMPLOYEE_ADVANCES_VERIFY,
self::EMPLOYEE_ADVANCES_PAY => 'Kasbon',
self::PAYROLL_VIEW, self::PAYROLL_PAY, self::PAYROLL_ADJUST,
self::PAYROLL_CLOSE => 'Gaji',
self::PAYROLL_VIEW, self::PAYROLL_ADJUST => 'Gaji',
self::SETTINGS_VIEW, self::SETTINGS_UPDATE => 'Pengaturan Aplikasi',
self::ACTIVITY_LOGS_VIEW => 'Log Aktivitas',
self::ROLES_VIEW, self::ROLES_CREATE, self::ROLES_UPDATE,

4
app/Enums/Role.php
View File

@ -142,9 +142,7 @@ public function permissions(): array
Permission::EMPLOYEE_ADVANCES_PAY,
Permission::PAYROLL_VIEW,
Permission::PAYROLL_PAY,
Permission::PAYROLL_ADJUST,
Permission::PAYROLL_CLOSE,
],
self::ADMIN_BAHAN_BAKU => [
@ -208,9 +206,7 @@ public function permissions(): array
Permission::EMPLOYEE_ADVANCES_PAY,
Permission::PAYROLL_VIEW,
Permission::PAYROLL_PAY,
Permission::PAYROLL_ADJUST,
Permission::PAYROLL_CLOSE,
],
self::MARKETING => [

42
app/Http/Controllers/Admin/Finance/PayrollController.php
View File

@ -6,6 +6,7 @@
use App\Http\Controllers\Controller;
use App\Http\Requests\Admin\Finance\PayrollAdjustmentRequest;
use App\Models\Payroll;
use App\Models\PayrollAdjustment;
use App\Services\Finance\PayrollService;
use Illuminate\Http\RedirectResponse;
@ -17,23 +18,12 @@ public function __construct(
private readonly PayrollService $payrollService,
) {}
public function pay(Payroll $payroll): RedirectResponse
{
$this->payrollService->pay($payroll, auth()->user());
$this->flashSuccess('Gaji berhasil dibayar.');
return redirect()->route('admin.finance.payroll.index', [
'period_id' => $payroll->payroll_period_id,
]);
}
public function storeAdjustment(PayrollAdjustmentRequest $request, Payroll $payroll): RedirectResponse
{
$this->payrollService->addAdjustment(
$payroll,
$request->validated(),
auth()->user(),
$request->user(),
);
$this->flashSuccess('Penyesuaian gaji berhasil ditambahkan.');
@ -42,4 +32,32 @@ public function storeAdjustment(PayrollAdjustmentRequest $request, Payroll $payr
'period_id' => $payroll->payroll_period_id,
]);
}
public function updateAdjustment(PayrollAdjustmentRequest $request, PayrollAdjustment $payrollAdjustment): RedirectResponse
{
$this->payrollService->updateAdjustment(
$payrollAdjustment,
$request->validated(),
$request->user(),
);
$this->flashSuccess('Penyesuaian gaji berhasil diperbarui.');
return redirect()->route('admin.finance.payroll.index', [
'period_id' => $payrollAdjustment->payroll->payroll_period_id,
]);
}
public function destroyAdjustment(PayrollAdjustment $payrollAdjustment): RedirectResponse
{
$payroll = $payrollAdjustment->payroll;
$this->payrollService->deleteAdjustment($payrollAdjustment);
$this->flashSuccess('Penyesuaian gaji berhasil dihapus.');
return redirect()->route('admin.finance.payroll.index', [
'period_id' => $payroll->payroll_period_id,
]);
}
}

13
app/Http/Controllers/Admin/Finance/PayrollPeriodController.php
View File

@ -6,9 +6,7 @@
use App\Http\Controllers\Concerns\FlashesEntityMessage;
use App\Http\Controllers\Concerns\ParsesDataTableQuery;
use App\Http\Controllers\Controller;
use App\Models\PayrollPeriod;
use App\Services\Finance\PayrollService;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;
@ -44,15 +42,4 @@ public function index(Request $request): Response
),
]);
}
public function close(PayrollPeriod $payrollPeriod): RedirectResponse
{
$this->payrollService->closePeriod($payrollPeriod, auth()->user());
$this->flashSuccess('Periode gaji berhasil ditutup.');
return redirect()->route('admin.finance.payroll.index', [
'period_id' => $payrollPeriod->id,
]);
}
}

10
app/Models/Payroll.php
View File

@ -23,7 +23,6 @@
'status_label',
'employee_name',
'paid_at_formatted',
'can_pay',
'can_adjust',
])]
class Payroll extends Model
@ -91,15 +90,6 @@ public function canAdjust(): Attribute
);
}
public function canPay(): Attribute
{
return Attribute::make(
get: fn () => $this->status === PayrollStatus::UNPAID
&& $this->relationLoaded('payrollPeriod')
&& $this->payrollPeriod?->isOpen(),
);
}
public function deductionAmountFormatted(): Attribute
{
return Attribute::make(

164
app/Services/Finance/PayrollService.php
View File

@ -10,6 +10,7 @@
use App\Models\Employee;
use App\Models\EmployeeAdvance;
use App\Models\Payroll;
use App\Models\PayrollAdjustment;
use App\Models\PayrollPeriod;
use App\Models\User;
use App\Services\System\PushNotificationService;
@ -56,30 +57,24 @@ public function resolvePeriod(?int $periodId): ?PayrollPeriod
}
/**
* @return array{total_total_amount: int, total_total_amount_formatted: string, unpaid_count: int, paid_count: int}
* @return array{total_amount: int, total_amount_formatted: string, total_count: int, status: string, status_label: string}
*/
public function periodSummary(PayrollPeriod $period): array
{
$totalTotalAmount = (int) Payroll::query()
$totalAmount = (int) Payroll::query()
->where('payroll_period_id', $period->id)
->where('status', PayrollStatus::UNPAID)
->sum('total_amount');
$unpaidCount = Payroll::query()
$totalCount = Payroll::query()
->where('payroll_period_id', $period->id)
->where('status', PayrollStatus::UNPAID)
->count();
$paidCount = Payroll::query()
->where('payroll_period_id', $period->id)
->where('status', PayrollStatus::PAID)
->count();
return [
'total_total_amount' => $totalTotalAmount,
'total_total_amount_formatted' => 'Rp '.number_format($totalTotalAmount, 0, ',', '.'),
'unpaid_count' => $unpaidCount,
'paid_count' => $paidCount,
'total_amount' => $totalAmount,
'total_amount_formatted' => 'Rp '.number_format($totalAmount, 0, ',', '.'),
'total_count' => $totalCount,
'status' => $period->status->value,
'status_label' => $period->status->label(),
];
}
@ -89,7 +84,7 @@ public function periodSummary(PayrollPeriod $period): array
public function paginateForPeriod(PayrollPeriod $period, array $tableQuery): LengthAwarePaginator
{
$query = Payroll::query()
->with(['employee.user.profile', 'payrollPeriod'])
->with(['employee.user.profile', 'payrollPeriod', 'adjustments.createdBy.profile'])
->where('payroll_period_id', $period->id)
->when($tableQuery['search'] !== '', function (Builder $query) use ($tableQuery): void {
$search = $tableQuery['search'];
@ -108,18 +103,37 @@ public function paginateForPeriod(PayrollPeriod $period, array $tableQuery): Len
public function openCurrentPeriod(?User $closedBy = null): PayrollPeriod
{
$period = DB::transaction(function () use ($closedBy): PayrollPeriod {
$user = $closedBy
?? auth()->user()
?? User::query()->whereHas('roles', fn ($q) => $q->whereIn('name', [Role::DEVELOPER->value, Role::OWNER->value]))->first()
?? User::query()->first();
$period = DB::transaction(function () use ($user): PayrollPeriod {
$now = now();
$year = $now->year;
$month = $now->month;
PayrollPeriod::query()
$openPeriods = PayrollPeriod::query()
->where('status', PayrollPeriodStatus::OPEN)
->update([
'status' => PayrollPeriodStatus::CLOSED,
'closed_at' => now(),
'closed_by_id' => $closedBy?->id,
]);
->get();
foreach ($openPeriods as $oldPeriod) {
$unpaidPayrolls = Payroll::query()
->where('payroll_period_id', $oldPeriod->id)
->where('status', PayrollStatus::UNPAID)
->get();
foreach ($unpaidPayrolls as $payroll) {
if ($user) {
$this->pay($payroll, $user);
}
}
$oldPeriod->status = PayrollPeriodStatus::CLOSED;
$oldPeriod->closed_at = now();
$oldPeriod->closed_by_id = $user?->id;
$oldPeriod->save();
}
$period = PayrollPeriod::query()
->where('year', $year)
@ -144,47 +158,9 @@ public function openCurrentPeriod(?User $closedBy = null): PayrollPeriod
return $period->fresh();
});
$this->pushNotificationService->sendToAll(
'📊 Periode Gaji Baru Dibuka',
"Periode gaji untuk {$period->period_label} telah dibuka.",
'/admin/finance/payrolls',
);
return $period;
}
public function closePeriod(PayrollPeriod $period, User $user): void
{
if (! $period->isOpen()) {
throw ValidationException::withMessages([
'payroll_period' => 'Periode gaji ini sudah ditutup.',
]);
}
$unpaidCount = Payroll::query()
->where('payroll_period_id', $period->id)
->where('status', PayrollStatus::UNPAID)
->where('total_amount', '>', 0)
->count();
if ($unpaidCount > 0) {
throw ValidationException::withMessages([
'payroll_period' => 'Masih ada gaji yang belum dibayar.',
]);
}
$period->status = PayrollPeriodStatus::CLOSED;
$period->closed_at = now();
$period->closed_by_id = $user->id;
$period->save();
$this->pushNotificationService->sendToAll(
'📊 Periode Gaji Ditutup',
"Periode gaji untuk {$period->period_label} telah ditutup.",
'/admin/finance/payrolls',
);
}
public function generatePayrollsForPeriod(PayrollPeriod $period): void
{
$employees = $this->payrollEligibleEmployees($period);
@ -220,7 +196,7 @@ public function generatePayrollsForPeriod(PayrollPeriod $period): void
*/
public function addAdjustment(Payroll $payroll, array $validated, User $user): void
{
$payroll->loadMissing('payrollPeriod');
$payroll->loadMissing(['payrollPeriod', 'employee.user']);
if (! $payroll->can_adjust) {
throw ValidationException::withMessages([
@ -240,6 +216,72 @@ public function addAdjustment(Payroll $payroll, array $validated, User $user): v
$payroll->recalculateAmounts();
$payroll->save();
});
if ($payroll->employee?->user_id) {
$typeLabel = PayrollAdjustmentType::from($validated['type'])->label();
$formattedAmount = 'Rp '.number_format($validated['amount'], 0, ',', '.');
$this->pushNotificationService->sendToUser(
"📊 Penyesuaian Gaji: {$typeLabel}",
"Gaji periode {$payroll->payrollPeriod->period_label} disesuaikan: {$typeLabel} sebesar {$formattedAmount} ({$validated['description']}).",
$payroll->employee->user_id,
'/admin/finance/payrolls',
);
}
}
public function updateAdjustment(PayrollAdjustment $adjustment, array $validated, User $user): void
{
$payroll = $adjustment->payroll;
$payroll->loadMissing(['payrollPeriod', 'employee.user']);
if (! $payroll->can_adjust) {
throw ValidationException::withMessages([
'payroll' => 'Penyesuaian hanya dapat diubah pada gaji yang belum dibayar di periode terbuka.',
]);
}
DB::transaction(function () use ($payroll, $adjustment, $validated): void {
$adjustment->update([
'type' => PayrollAdjustmentType::from($validated['type']),
'amount' => (int) $validated['amount'],
'description' => $validated['description'],
]);
$payroll->load('adjustments');
$payroll->recalculateAmounts();
$payroll->save();
});
if ($payroll->employee?->user_id) {
$typeLabel = PayrollAdjustmentType::from($validated['type'])->label();
$formattedAmount = 'Rp '.number_format($validated['amount'], 0, ',', '.');
$this->pushNotificationService->sendToUser(
"📊 Penyesuaian Gaji Diperbarui: {$typeLabel}",
"Penyesuaian gaji Anda untuk periode {$payroll->payrollPeriod->period_label} diperbarui: {$typeLabel} menjadi {$formattedAmount} ({$validated['description']}).",
$payroll->employee->user_id,
'/admin/finance/payrolls',
);
}
}
public function deleteAdjustment(PayrollAdjustment $adjustment): void
{
$payroll = $adjustment->payroll;
$payroll->loadMissing(['payrollPeriod', 'employee.user']);
if (! $payroll->can_adjust) {
throw ValidationException::withMessages([
'payroll' => 'Penyesuaian hanya dapat dihapus pada gaji yang belum dibayar di periode terbuka.',
]);
}
DB::transaction(function () use ($payroll, $adjustment): void {
$adjustment->delete();
$payroll->load('adjustments');
$payroll->recalculateAmounts();
$payroll->save();
});
}
public function pay(Payroll $payroll, User $user): void

190
resources/js/components/admin/finance/payroll/PayrollAdjustmentModal.vue
View File

@ -1,14 +1,13 @@
<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { watch } from 'vue';
import { useForm, router } from '@inertiajs/vue3';
import { Save, Pencil, Trash } from '@lucide/vue';
import { ref, watch } from 'vue';
import { toast } from 'vue-sonner';
import { RupiahInput } from '@/components/form/rupiah-input';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
@ -23,8 +22,9 @@ import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Textarea } from '@/components/ui/textarea';
import { FIELD_LIMITS } from '@/lib/field-limits';
import { formErrors } from '@/lib/form';
import { parseRupiah } from '@/lib/rupiah';
import type { PayrollAdjustmentFormData, PayrollListItem, SelectOption } from '@/types/payroll';
import type { PayrollAdjustmentFormData, PayrollAdjustmentItem, PayrollListItem, SelectOption } from '@/types/payroll';
const open = defineModel<boolean>('open', { default: false });
@ -39,6 +39,8 @@ const form = useForm<PayrollAdjustmentFormData>({
description: '',
});
const editingAdjustment = ref<PayrollAdjustmentItem | null>(null);
function resetForm() {
form.reset();
form.type = 'bonus';
@ -47,81 +49,155 @@ function resetForm() {
watch(open, (isOpen) => {
if (isOpen) {
editingAdjustment.value = null;
resetForm();
}
});
function startEdit(adjustment: PayrollAdjustmentItem) {
editingAdjustment.value = adjustment;
form.type = adjustment.type;
form.amount = String(adjustment.amount);
form.description = adjustment.description;
form.clearErrors();
}
function cancelEdit() {
editingAdjustment.value = null;
resetForm();
}
function deleteAdj(adjustment: PayrollAdjustmentItem) {
router.delete(`/admin/finance/payroll/adjustments/${adjustment.id}`, {
preserveScroll: true,
onSuccess: () => {
toast.success('Penyesuaian berhasil dihapus.');
},
onError: () => {
toast.error('Gagal menghapus penyesuaian.');
},
});
}
function submit() {
if (!props.payroll) {
return;
}
form.transform((data) => ({
const payload = form.transform((data) => ({
...data,
amount: parseRupiah(data.amount),
})).post(`/admin/finance/payroll/${props.payroll.id}/adjustments`, {
preserveScroll: true,
onSuccess: () => {
open.value = false;
},
onError: () => {
toast.error('Gagal menambahkan penyesuaian.');
},
});
}));
if (editingAdjustment.value) {
payload.put(`/admin/finance/payroll/adjustments/${editingAdjustment.value.id}`, {
preserveScroll: true,
onSuccess: () => {
cancelEdit();
toast.success('Penyesuaian berhasil diperbarui.');
},
onError: () => {
toast.error('Gagal memperbarui penyesuaian.');
},
});
} else {
payload.post(`/admin/finance/payroll/${props.payroll.id}/adjustments`, {
preserveScroll: true,
onSuccess: () => {
resetForm();
toast.success('Penyesuaian berhasil ditambahkan.');
},
onError: () => {
toast.error('Gagal menambahkan penyesuaian.');
},
});
}
}
</script>
<template>
<Dialog v-model:open="open">
<DialogContent class="sm:max-w-md">
<DialogContent class="sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Penyesuaian Gaji</DialogTitle>
<DialogTitle>Penyesuaian Gaji - {{ payroll?.employee_name }}</DialogTitle>
</DialogHeader>
<form @submit.prevent="submit">
<FieldSet>
<FieldGroup>
<Field v-if="payroll">
<FieldLabel>Pegawai</FieldLabel>
<p class="text-sm text-muted-foreground">{{ payroll.employee_name }}</p>
</Field>
<Field>
<FieldLabel>Jenis</FieldLabel>
<RadioGroup v-model="form.type" class="flex flex-wrap gap-4 pt-1">
<div v-for="option in adjustmentTypes" :key="option.value"
class="flex items-center gap-2">
<RadioGroupItem :id="`type-${option.value}`" :value="option.value" />
<Label :for="`type-${option.value}`" class="font-normal">
{{ option.label }}
</Label>
<div class="grid gap-6 md:grid-cols-2 mt-4">
<div class="space-y-4">
<h3 class="text-sm font-semibold">Daftar Penyesuaian Saat Ini</h3>
<div class="max-h-[300px] overflow-y-auto space-y-2 pr-1">
<div v-if="!payroll?.adjustments || payroll.adjustments.length === 0" class="text-sm text-muted-foreground py-4 text-center">
Belum ada penyesuaian.
</div>
<div v-else v-for="adj in payroll.adjustments" :key="adj.id" class="flex items-center justify-between p-3 rounded-lg border bg-muted/40">
<div class="space-y-1">
<div class="flex items-center gap-2">
<span class="text-[10px] font-bold uppercase px-1.5 py-0.5 rounded" :class="adj.type === 'bonus' ? 'bg-primary/10 text-primary' : 'bg-destructive/10 text-destructive'">
{{ adj.type_label }}
</span>
<span class="text-sm font-bold">{{ adj.amount_formatted }}</span>
</div>
</RadioGroup>
<FieldError :message="form.errors.type" />
</Field>
<p class="text-xs text-muted-foreground">{{ adj.description }}</p>
</div>
<div class="flex items-center gap-1">
<Button variant="ghost" size="icon" class="size-8 text-muted-foreground hover:text-foreground" @click="startEdit(adj)">
<Pencil class="size-4" />
</Button>
<Button variant="ghost" size="icon" class="size-8 text-destructive hover:bg-destructive/10" @click="deleteAdj(adj)">
<Trash class="size-4" />
</Button>
</div>
</div>
</div>
</div>
<Field>
<FieldLabel for="amount">Jumlah</FieldLabel>
<RupiahInput id="amount" v-model="form.amount" />
<FieldError :message="form.errors.amount" />
</Field>
<div class="space-y-4 border-t pt-4 md:border-t-0 md:pt-0 md:border-l md:pl-6">
<h3 class="text-sm font-semibold">
{{ editingAdjustment ? 'Ubah Penyesuaian' : 'Tambah Penyesuaian Baru' }}
</h3>
<form @submit.prevent="submit">
<FieldSet>
<FieldGroup>
<Field>
<FieldLabel required>Jenis</FieldLabel>
<RadioGroup v-model="form.type" class="flex gap-4 pt-1">
<div v-for="option in adjustmentTypes" :key="option.value" class="flex items-center gap-2">
<RadioGroupItem :id="`type-${option.value}`" :value="option.value" required/>
<Label :for="`type-${option.value}`" class="font-normal">
{{ option.label }}
</Label>
</div>
</RadioGroup>
<FieldError :errors="formErrors(form, 'type')" />
</Field>
<Field>
<FieldLabel for="description">Keterangan</FieldLabel>
<Textarea id="description" v-model="form.description" rows="3"
:maxlength="FIELD_LIMITS.description" />
<FieldError :message="form.errors.description" />
</Field>
</FieldGroup>
</FieldSet>
<Field>
<FieldLabel for="amount" required>Jumlah</FieldLabel>
<RupiahInput id="amount" v-model="form.amount" required/>
<FieldError :errors="formErrors(form, 'amount')" />
</Field>
<DialogFooter class="mt-4">
<Button type="submit" :disabled="form.processing">
<Save class="size-4" />
Simpan
</Button>
</DialogFooter>
</form>
<Field>
<FieldLabel for="description" required>Keterangan</FieldLabel>
<Textarea id="description" v-model="form.description" rows="3"
:maxlength="FIELD_LIMITS.description" placeholder="Contoh: Kinerja Bagus" required/>
<FieldError :errors="formErrors(form, 'description')" />
</Field>
</FieldGroup>
</FieldSet>
<div class="flex justify-end gap-2 mt-4">
<Button v-if="editingAdjustment" type="button" variant="outline" @click="cancelEdit">
Batal
</Button>
<Button type="submit" :disabled="form.processing">
<Save class="size-4" />
{{ editingAdjustment ? 'Perbarui' : 'Simpan' }}
</Button>
</div>
</form>
</div>
</div>
</DialogContent>
</Dialog>
</template>

40
resources/js/components/admin/finance/payroll/data-table-actions.vue
View File

@ -1,9 +1,5 @@
<script setup lang="ts">
import { router } from '@inertiajs/vue3';
import { Banknote, SlidersHorizontal } from '@lucide/vue';
import { ref } from 'vue';
import { toast } from 'vue-sonner';
import ConfirmDialog from '@/components/ConfirmDialog.vue';
import { SlidersHorizontal } from '@lucide/vue';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useCan } from '@/composables/useCan';
@ -18,26 +14,6 @@ const emit = defineEmits<{
}>();
const { can } = useCan();
const payConfirmOpen = ref(false);
const payProcessing = ref(false);
function payPayroll() {
payProcessing.value = true;
router.post(`/admin/finance/payroll/${props.payroll.id}/pay`, {}, {
preserveScroll: true,
onSuccess: () => {
payConfirmOpen.value = false;
},
onError: (errors) => {
toast.error(errors.amount || errors.payroll || 'Gagal membayar gaji.');
},
onFinish: () => {
payProcessing.value = false;
},
});
}
</script>
<template>
@ -51,19 +27,5 @@ function payPayroll() {
</TooltipTrigger>
<TooltipContent>Sesuaikan Gaji</TooltipContent>
</Tooltip>
<Tooltip v-if="payroll.can_pay && can('payroll.pay')">
<TooltipTrigger as-child>
<Button variant="ghost" size="icon" class="size-8" @click="payConfirmOpen = true">
<Banknote class="size-4" />
<span class="sr-only">Bayar</span>
</Button>
</TooltipTrigger>
<TooltipContent>Bayar Gaji</TooltipContent>
</Tooltip>
</div>
<ConfirmDialog v-if="can('payroll.pay')" v-model:open="payConfirmOpen" title="Bayar gaji?"
:description="`Gaji ${payroll.total_amount_formatted} untuk ${payroll.employee_name} akan dibayar dari kas.`"
confirm-label="Bayar" cancel-label="Batal" :loading="payProcessing" @confirm="payPayroll" />
</template>

192
resources/js/pages/admin/finance/payroll/Index.vue
View File

@ -1,15 +1,15 @@
<script setup lang="ts">
import { Head, router } from '@inertiajs/vue3';
import { Banknote, Lock } from '@lucide/vue';
import { computed, ref, watch } from 'vue';
import { toast } from 'vue-sonner';
import { createColumns } from '@/components/admin/finance/payroll/columns';
import PayrollAdjustmentModal from '@/components/admin/finance/payroll/PayrollAdjustmentModal.vue';
import ConfirmDialog from '@/components/ConfirmDialog.vue';
import PayrollAdjustmentModal from '@/components/admin/finance/payroll/PayrollAdjustmentModal.vue';
import { createColumns } from '@/components/admin/finance/payroll/columns';
import { DataTable } from '@/components/data-table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import Empty from '@/components/ui/empty/Empty.vue';
import EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
import EmptyHeader from '@/components/ui/empty/EmptyHeader.vue';
import EmptyTitle from '@/components/ui/empty/EmptyTitle.vue';
import {
Select,
SelectContent,
@ -18,27 +18,47 @@ import {
SelectValue,
} from '@/components/ui/select';
import { useCan } from '@/composables/useCan';
import { useDataTableQuery, useDataTableQuerySync } from '@/composables/useDataTableQuery';
import {
useDataTableQuery,
useDataTableQuerySync,
} from '@/composables/useDataTableQuery';
import AdminLayout from '@/layouts/AdminLayout.vue';
import type { DataTableSort } from '@/types/data-table';
import type { PayrollListItem, PayrollPageProps } from '@/types/payroll';
import { Head, router } from '@inertiajs/vue3';
import { Banknote } from '@lucide/vue';
import { computed, ref, watch } from 'vue';
import { toast } from 'vue-sonner';
const props = defineProps<PayrollPageProps>();
const { can } = useCan();
const search = ref(props.filters.search ?? '');
const selectedPeriodId = ref(props.filters.period_id ? String(props.filters.period_id) : '');
const selectedPeriodId = ref(
props.filters.period_id ? String(props.filters.period_id) : '',
);
const adjustmentModalOpen = ref(false);
const adjustingPayroll = ref<PayrollListItem | null>(null);
const closeConfirmOpen = ref(false);
const closeProcessing = ref(false);
const { query, setSearch, setSort, setFilter, resetFilters, syncFromServer } = useDataTableQuery({
url: '/admin/finance/payroll',
initial: { ...props.filters, period_id: props.filters.period_id ? String(props.filters.period_id) : '' },
filterKeys: ['period_id'],
const currentAdjustingPayroll = computed(() => {
const current = adjustingPayroll.value;
if (!current || !props.payrolls?.data) {
return current;
}
return props.payrolls.data.find((p) => p.id === current.id) ?? current;
});
const { query, setSearch, setSort, setFilter, resetFilters, syncFromServer } =
useDataTableQuery({
url: '/admin/finance/payroll',
initial: {
...props.filters,
period_id: props.filters.period_id
? String(props.filters.period_id)
: '',
},
filterKeys: ['period_id'],
});
useDataTableQuerySync(() => props.filters, syncFromServer);
const columns = computed(() => createColumns(openAdjustModal));
@ -67,37 +87,11 @@ const pagination = computed(() => {
};
});
const canClosePeriod = computed(() => (
props.currentPeriod?.status === 'open'
&& can('payroll.close')
));
function openAdjustModal(payroll: PayrollListItem) {
adjustingPayroll.value = payroll;
adjustmentModalOpen.value = true;
}
function closePeriod() {
if (!props.currentPeriod) {
return;
}
closeProcessing.value = true;
router.post(`/admin/finance/payroll/periods/${props.currentPeriod.id}/close`, {}, {
preserveScroll: true,
onSuccess: () => {
closeConfirmOpen.value = false;
},
onError: () => {
toast.error('Gagal menutup periode gaji.');
},
onFinish: () => {
closeProcessing.value = false;
},
});
}
watch(search, (value) => {
setSearch(value);
});
@ -122,72 +116,96 @@ watch(
</script>
<template>
<Head title="Gaji" />
<AdminLayout>
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div
class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
>
<div class="space-y-1">
<h2 class="text-2xl font-bold tracking-tight">
Gaji
</h2>
<h2 class="text-2xl font-bold tracking-tight">Gaji</h2>
<p v-if="currentPeriod" class="text-sm text-muted-foreground">
Periode {{ currentPeriod.period_label }}
<Badge class="ml-2" :variant="currentPeriod.status === 'open' ? 'default' : 'secondary'">
<Badge
class="ml-2"
:variant="
currentPeriod.status === 'open'
? 'default'
: 'secondary'
"
>
{{ currentPeriod.status_label }}
</Badge>
</p>
</div>
<div class="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center">
<div
class="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center"
>
<Select v-if="periods.length > 0" v-model="selectedPeriodId">
<SelectTrigger class="w-full sm:w-[200px]">
<SelectValue placeholder="Pilih periode" />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="period in periods" :key="period.id" :value="String(period.id)">
<SelectItem
v-for="period in periods"
:key="period.id"
:value="String(period.id)"
>
{{ period.period_label }}
</SelectItem>
</SelectContent>
</Select>
<Button v-if="canClosePeriod" variant="outline" class="shrink-0" @click="closeConfirmOpen = true">
<Lock class="size-4" />
Tutup Periode
</Button>
</div>
</div>
<div v-if="summary" class="grid gap-4 md:grid-cols-2">
<Card>
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle class="text-sm font-medium text-muted-foreground">
Total Belum Dibayar
<CardHeader
class="flex flex-row items-center justify-between space-y-0 pb-2"
>
<CardTitle
class="text-sm font-medium text-muted-foreground"
>
Total Gaji Periode
</CardTitle>
<Banknote class="size-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div class="text-3xl font-bold tracking-tight">
{{ summary.total_total_amount_formatted }}
{{ summary.total_amount_formatted }}
</div>
<p class="mt-1 text-sm text-muted-foreground">
{{ summary.unpaid_count }} slip belum dibayar
{{ summary.total_count }} slip gaji
</p>
</CardContent>
</Card>
<Card>
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle class="text-sm font-medium text-muted-foreground">
Sudah Dibayar
<CardHeader
class="flex flex-row items-center justify-between space-y-0 pb-2"
>
<CardTitle
class="text-sm font-medium text-muted-foreground"
>
Status Pembayaran
</CardTitle>
</CardHeader>
<CardContent>
<div class="text-3xl font-bold tracking-tight">
{{ summary.paid_count }}
<div class="flex items-center">
<Badge
class="text-sm px-2.5 py-0.5 font-semibold"
:variant="
summary.status === 'open'
? 'outline'
: 'default'
"
>
{{ summary.status === 'open' ? 'Belum Dibayar' : 'Sudah Dibayar' }}
</Badge>
</div>
<p class="mt-1 text-sm text-muted-foreground">
slip gaji lunas
<p class="mt-2 text-sm text-muted-foreground">
{{ summary.status === 'open' ? 'Akan dibayar otomatis saat periode ditutup' : 'Telah dibayarkan oleh sistem' }}
</p>
</CardContent>
</Card>
@ -195,23 +213,35 @@ watch(
<Card v-if="payrolls && pagination" class="min-w-0">
<CardContent class="min-w-0 pt-6">
<DataTable v-model:search="search" :columns="columns" :data="payrolls.data" :pagination="pagination"
:pagination-links="payrolls.links" :sort="currentSort" @sort-change="setSort"
@filters-reset="resetFilters" />
<DataTable
v-model:search="search"
:columns="columns"
:data="payrolls.data"
:pagination="pagination"
:pagination-links="payrolls.links"
:sort="currentSort"
@sort-change="setSort"
@filters-reset="resetFilters"
/>
</CardContent>
</Card>
<Card v-else>
<CardContent class="py-12 text-center text-muted-foreground">
Belum ada periode gaji. Periode akan dibuat otomatis setiap awal bulan.
</CardContent>
</Card>
<div v-else class="rounded-md border px-6 py-10">
<Empty>
<EmptyHeader>
<EmptyTitle>Data tidak ditemukan</EmptyTitle>
<EmptyDescription>
Silakan lakukan pencarian untuk menemukan data yang Anda
cari.
</EmptyDescription>
</EmptyHeader>
</Empty>
</div>
<PayrollAdjustmentModal v-if="can('payroll.adjust')" v-model:open="adjustmentModalOpen"
:payroll="adjustingPayroll" :adjustment-types="adjustmentTypes" />
<ConfirmDialog v-if="canClosePeriod" v-model:open="closeConfirmOpen" title="Tutup periode gaji?"
description="Pastikan semua gaji sudah dibayar sebelum menutup periode." confirm-label="Tutup Periode"
cancel-label="Batal" :loading="closeProcessing" @confirm="closePeriod" />
</AdminLayout>
<PayrollAdjustmentModal
v-if="can('payroll.adjust')"
v-model:open="adjustmentModalOpen"
:payroll="currentAdjustingPayroll"
:adjustment-types="adjustmentTypes"
/> </AdminLayout>
</template>

22
resources/js/types/payroll.ts
View File

@ -8,6 +8,18 @@ export type PayrollPeriodItem = {
closed_at_formatted: string | null;
};
export type PayrollAdjustmentItem = {
id: number;
payroll_id: number;
type: string;
type_label: string;
amount: number;
amount_formatted: string;
description: string;
created_at_formatted: string;
created_by_name: string;
};
export type PayrollListItem = {
id: number;
employee_id: number;
@ -25,13 +37,15 @@ export type PayrollListItem = {
paid_at_formatted: string | null;
can_pay: boolean;
can_adjust: boolean;
adjustments?: PayrollAdjustmentItem[];
};
export type PayrollSummary = {
total_total_amount: number;
total_total_amount_formatted: string;
unpaid_count: number;
paid_count: number;
total_amount: number;
total_amount_formatted: string;
total_count: number;
status: string;
status_label: string;
};
export type PayrollAdjustmentFormData = {

16
routes/web.php
View File

@ -403,17 +403,17 @@
->group(function () {
Route::get('/', [PayrollPeriodController::class, 'index'])->name('index');
Route::post('periods/{payrollPeriod}/close', [PayrollPeriodController::class, 'close'])
->middleware('permission:'.Permission::PAYROLL_CLOSE->value)
->name('periods.close');
Route::post('{payroll}/pay', [PayrollController::class, 'pay'])
->middleware('permission:'.Permission::PAYROLL_PAY->value)
->name('pay');
Route::post('{payroll}/adjustments', [PayrollController::class, 'storeAdjustment'])
->middleware('permission:'.Permission::PAYROLL_ADJUST->value)
->name('adjustments.store');
Route::put('adjustments/{payrollAdjustment}', [PayrollController::class, 'updateAdjustment'])
->middleware('permission:'.Permission::PAYROLL_ADJUST->value)
->name('adjustments.update');
Route::delete('adjustments/{payrollAdjustment}', [PayrollController::class, 'destroyAdjustment'])
->middleware('permission:'.Permission::PAYROLL_ADJUST->value)
->name('adjustments.destroy');
});
});