126 lines
4.0 KiB
Vue
126 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { Save } from '@lucide/vue';
|
|
import { watch } from 'vue';
|
|
import { toast } from 'vue-sonner';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
Field,
|
|
FieldError,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldSet,
|
|
} from '@/components/ui/field';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { RupiahInput } from '@/components/ui/rupiah-input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { parseRupiah } from '@/lib/rupiah';
|
|
import type { PayrollAdjustmentFormData, PayrollListItem, SelectOption } from '@/types/payroll';
|
|
|
|
const open = defineModel<boolean>('open', { default: false });
|
|
|
|
const props = defineProps<{
|
|
payroll: PayrollListItem | null;
|
|
adjustmentTypes: SelectOption[];
|
|
}>();
|
|
|
|
const form = useForm<PayrollAdjustmentFormData>({
|
|
type: 'bonus',
|
|
amount: '',
|
|
description: '',
|
|
});
|
|
|
|
function resetForm() {
|
|
form.reset();
|
|
form.type = 'bonus';
|
|
form.clearErrors();
|
|
}
|
|
|
|
watch(open, (isOpen) => {
|
|
if (isOpen) {
|
|
resetForm();
|
|
}
|
|
});
|
|
|
|
function submit() {
|
|
if (!props.payroll) {
|
|
return;
|
|
}
|
|
|
|
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.');
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="open">
|
|
<DialogContent class="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Penyesuaian Gaji</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>
|
|
</RadioGroup>
|
|
<FieldError :message="form.errors.type" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="amount">Jumlah</FieldLabel>
|
|
<RupiahInput id="amount" v-model="form.amount" />
|
|
<FieldError :message="form.errors.amount" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="description">Keterangan</FieldLabel>
|
|
<Textarea id="description" v-model="form.description" rows="3" />
|
|
<FieldError :message="form.errors.description" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
|
|
<DialogFooter class="mt-4">
|
|
<Button type="submit" :disabled="form.processing">
|
|
<Save class="size-4" />
|
|
Simpan
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|