diff --git a/resources/js/pages/admin/finance/payroll/partials/payroll-form-modal.tsx b/resources/js/pages/admin/finance/payroll/partials/payroll-form-modal.tsx
index 5484dbd..fb86997 100644
--- a/resources/js/pages/admin/finance/payroll/partials/payroll-form-modal.tsx
+++ b/resources/js/pages/admin/finance/payroll/partials/payroll-form-modal.tsx
@@ -1,9 +1,3 @@
-import { useForm } from '@inertiajs/react';
-import { Loader, Plus, Trash2 } from 'lucide-react';
-import { X, Save } from 'lucide-react';
-import { useEffect } from 'react';
-import { NumericFormat } from 'react-number-format';
-import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -11,14 +5,24 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from "@/components/ui/dialog"
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '@/components/ui/empty';
-import { FieldGroup } from "@/components/ui/field"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from '@/components/ui/dialog';
+import {
+    Empty,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyTitle,
+} from '@/components/ui/empty';
+import { FieldGroup } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import payrollRoutes from '@/routes/payroll';
 import type { Payroll } from '@/types';
+import { useForm } from '@inertiajs/react';
+import { Loader, Plus, Save, Trash2, X } from 'lucide-react';
+import { useEffect } from 'react';
+import { NumericFormat } from 'react-number-format';
+import { toast } from 'sonner';
 
 interface PayrollFormModalProps {
     isOpen: boolean;
@@ -26,19 +30,29 @@ interface PayrollFormModalProps {
     payroll: Payroll | null;
 }
 
-export function PayrollFormModal({ isOpen, onClose, payroll }: PayrollFormModalProps) {
-    const { data, setData, patch, processing, errors, reset, clearErrors } = useForm({
-        adjustments: [] as { type: 'bonus' | 'deduction', amount: number, description: string }[],
-    });
+export function PayrollFormModal({
+    isOpen,
+    onClose,
+    payroll,
+}: PayrollFormModalProps) {
+    const { data, setData, patch, processing, errors, reset, clearErrors } =
+        useForm({
+            adjustments: [] as {
+                type: 'bonus' | 'deduction';
+                amount: number;
+                description: string;
+            }[],
+        });
 
     useEffect(() => {
         if (payroll) {
             setData({
-                adjustments: payroll.adjustments?.map(adj => ({
-                    type: adj.type,
-                    amount: adj.amount,
-                    description: adj.description
-                })) || [],
+                adjustments:
+                    payroll.adjustments?.map((adj) => ({
+                        type: adj.type,
+                        amount: adj.amount,
+                        description: adj.description,
+                    })) || [],
             });
         } else {
             reset();
@@ -56,7 +70,7 @@ export function PayrollFormModal({ isOpen, onClose, payroll }: PayrollFormModalP
     const addAdjustment = () => {
         setData('adjustments', [
             ...data.adjustments,
-            { type: 'bonus', amount: 0, description: '' }
+            { type: 'bonus', amount: 0, description: '' },
         ]);
     };
 
@@ -89,14 +103,24 @@ export function PayrollFormModal({ isOpen, onClose, payroll }: PayrollFormModalP
         <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
             <DialogContent className="max-w-2xl">
                 <DialogHeader>
-                    <DialogTitle>Penyesuaian Penggajian - {payroll?.user?.name}</DialogTitle>
+                    <DialogTitle>
+                        Penyesuaian Penggajian - {payroll?.user?.name}
+                    </DialogTitle>
                 </DialogHeader>
                 <form onSubmit={onSubmit}>
                     <div className="max-h-[60vh] overflow-y-auto px-1 py-2">
                         <FieldGroup>
-                            <div className="flex items-center justify-between border-b pb-2 mb-4">
-                                <h3 className="text-sm font-medium">Bonus & Potongan</h3>
-                                <Button type="button" variant="outline" size="sm" onClick={addAdjustment} className="gap-2">
+                            <div className="mb-4 flex items-center justify-between border-b pb-2">
+                                <h3 className="text-sm font-medium">
+                                    Bonus & Potongan
+                                </h3>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={addAdjustment}
+                                    className="gap-2"
+                                >
                                     <Plus className="size-4" />
                                     Tambah
                                 </Button>
@@ -114,30 +138,61 @@ export function PayrollFormModal({ isOpen, onClose, payroll }: PayrollFormModalP
                             )}
 
                             {data.adjustments.map((adj, index) => (
-                                <div key={index} className="flex gap-3 items-start border-l-2 border-primary/20 pl-4 py-2 mb-4 group relative">
-                                    <div className="flex flex-col gap-3 flex-1">
+                                <div
+                                    key={index}
+                                    className="group relative mb-4 flex items-start gap-3 border-l-2 border-primary/20 py-2 pl-4"
+                                >
+                                    <div className="flex flex-1 flex-col gap-3">
                                         <div className="grid grid-cols-2 gap-3">
                                             <div>
-                                                <Label className="text-[10px] uppercase mb-1">Jenis</Label>
+                                                <Label className="mb-1 text-[10px] uppercase">
+                                                    Jenis
+                                                </Label>
                                                 <RadioGroup
                                                     value={adj.type}
-                                                    onValueChange={(val) => updateAdjustment(index, 'type', val)}
-                                                    className="flex items-center gap-6 w-fit"
+                                                    onValueChange={(val) =>
+                                                        updateAdjustment(
+                                                            index,
+                                                            'type',
+                                                            val,
+                                                        )
+                                                    }
+                                                    className="flex w-fit items-center gap-6"
                                                 >
                                                     <div className="flex items-center gap-2">
-                                                        <RadioGroupItem value="bonus" id={`bonus-${index}`} />
-                                                        <Label htmlFor={`bonus-${index}`}>Bonus</Label>
+                                                        <RadioGroupItem
+                                                            value="bonus"
+                                                            id={`bonus-${index}`}
+                                                        />
+                                                        <Label
+                                                            htmlFor={`bonus-${index}`}
+                                                        >
+                                                            Bonus
+                                                        </Label>
                                                     </div>
 
                                                     <div className="flex items-center gap-2">
-                                                        <RadioGroupItem value="deduction" id={`deduction-${index}`} />
-                                                        <Label htmlFor={`deduction-${index}`}>Potongan</Label>
+                                                        <RadioGroupItem
+                                                            value="deduction"
+                                                            id={`deduction-${index}`}
+                                                        />
+                                                        <Label
+                                                            htmlFor={`deduction-${index}`}
+                                                        >
+                                                            Potongan
+                                                        </Label>
                                                     </div>
                                                 </RadioGroup>
                                             </div>
 
                                             <div>
-                                                <Label className="text-[10px] uppercase mb-1" htmlFor={`amount-${index}`} required>Jumlah</Label>
+                                                <Label
+                                                    className="mb-1 text-[10px] uppercase"
+                                                    htmlFor={`amount-${index}`}
+                                                    required
+                                                >
+                                                    Jumlah
+                                                </Label>
                                                 <NumericFormat
                                                     id={`amount-${index}`}
                                                     customInput={Input}
@@ -146,23 +201,38 @@ export function PayrollFormModal({ isOpen, onClose, payroll }: PayrollFormModalP
                                                     prefix="Rp "
                                                     value={adj.amount}
                                                     onValueChange={(values) => {
-                                                        updateAdjustment(index, 'amount', values.value)
+                                                        updateAdjustment(
+                                                            index,
+                                                            'amount',
+                                                            values.value,
+                                                        );
                                                     }}
                                                     placeholder="Rp 0"
-                                                    autoComplete='off'
+                                                    autoComplete="off"
                                                 />
                                             </div>
                                         </div>
 
                                         <div>
-                                            <Label className="text-[10px] uppercase mb-1" htmlFor={`description-${index}`} required>Keterangan</Label>
+                                            <Label
+                                                className="mb-1 text-[10px] uppercase"
+                                                htmlFor={`description-${index}`}
+                                                required
+                                            >
+                                                Keterangan
+                                            </Label>
                                             <Input
                                                 id={`description-${index}`}
                                                 value={adj.description}
-                                                onChange={e =>
-                                                    updateAdjustment(index, 'description', e.target.value)
+                                                onChange={(e) =>
+                                                    updateAdjustment(
+                                                        index,
+                                                        'description',
+                                                        e.target.value,
+                                                    )
                                                 }
                                                 placeholder="Contoh: Lembur"
+                                                autoComplete="off"
                                             />
                                         </div>
                                     </div>
@@ -170,7 +240,7 @@ export function PayrollFormModal({ isOpen, onClose, payroll }: PayrollFormModalP
                                         type="button"
                                         variant="ghost"
                                         size="icon"
-                                        className="text-red-500 mt-6"
+                                        className="mt-6 text-red-500"
                                         onClick={() => removeAdjustment(index)}
                                     >
                                         <Trash2 className="size-4" />
@@ -181,12 +251,25 @@ export function PayrollFormModal({ isOpen, onClose, payroll }: PayrollFormModalP
                     </div>
 
                     <DialogFooter className="mt-6">
-                        <Button type="button" variant="outline" className="gap-2" onClick={handleClose}>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            className="gap-2"
+                            onClick={handleClose}
+                        >
                             <X className="size-4" />
                             Batal
                         </Button>
-                        <Button type="submit" className="gap-2" disabled={processing}>
-                            {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
+                        <Button
+                            type="submit"
+                            className="gap-2"
+                            disabled={processing}
+                        >
+                            {processing ? (
+                                <Loader className="size-4 animate-spin" />
+                            ) : (
+                                <Save className="size-4" />
+                            )}
                             {processing ? 'Menyimpan...' : 'Simpan'}
                         </Button>
                     </DialogFooter>