261 lines
14 KiB
TypeScript
261 lines
14 KiB
TypeScript
import { DatePicker } from '@/components/date-picker';
|
|
import InputError from '@/components/input-error';
|
|
import { PhoneNumberInput } from '@/components/phone-number-input';
|
|
import { RupiahInput } from '@/components/rupiah-input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { index as employeeIndex, update } from '@/routes/admin/hr/employees';
|
|
import { Form, Head } from '@inertiajs/react';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
|
|
type EmployeeData = {
|
|
id: number;
|
|
email: string;
|
|
username: string;
|
|
user_profile: {
|
|
full_name: string;
|
|
phone_number: string | null;
|
|
gender: string | null;
|
|
birth_date: string | null;
|
|
address: string | null;
|
|
} | null;
|
|
employee: {
|
|
join_date: string;
|
|
resign_date: string | null;
|
|
employment_status: string;
|
|
base_salary: number;
|
|
} | null;
|
|
};
|
|
|
|
type Props = {
|
|
employee: EmployeeData;
|
|
};
|
|
|
|
export default function EmployeeEdit({ employee }: Props) {
|
|
const [joinDate, setJoinDate] = useState<Date | undefined>(
|
|
employee.employee?.join_date ? new Date(employee.employee.join_date) : undefined
|
|
);
|
|
const [resignDate, setResignDate] = useState<Date | undefined>(
|
|
employee.employee?.resign_date ? new Date(employee.employee.resign_date) : undefined
|
|
);
|
|
const [birthDate, setBirthDate] = useState<Date | undefined>(
|
|
employee.user_profile?.birth_date ? new Date(employee.user_profile.birth_date) : undefined
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Head title="Edit Pegawai" />
|
|
|
|
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-semibold tracking-tight">
|
|
Edit Pegawai
|
|
</h2>
|
|
</div>
|
|
<Button asChild variant='outline'>
|
|
<a href={employeeIndex.url()}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Kembali
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
|
|
<Form
|
|
action={update(employee.id)}
|
|
resetOnSuccess={['password', 'password_confirmation']}
|
|
>
|
|
{({ errors, processing }) => (
|
|
<>
|
|
<div className="grid gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Akun</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">
|
|
Email <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="Masukkan email"
|
|
defaultValue={employee.email}
|
|
/>
|
|
<InputError message={errors.email} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="username">
|
|
Username <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
id="username"
|
|
name="username"
|
|
placeholder="Masukkan username"
|
|
defaultValue={employee.username}
|
|
/>
|
|
<InputError message={errors.username} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Profil</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="full_name">
|
|
Nama Lengkap <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
id="full_name"
|
|
name="full_name"
|
|
placeholder="Masukkan nama lengkap"
|
|
defaultValue={employee.user_profile?.full_name ?? ''}
|
|
/>
|
|
<InputError message={errors.full_name} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="phone_number">
|
|
Nomor HP
|
|
</Label>
|
|
<PhoneNumberInput name="phone_number"/>
|
|
<InputError message={errors.phone_number} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Jenis Kelamin</Label>
|
|
<RadioGroup name="gender" defaultValue={employee.user_profile?.gender ?? ''} className="flex gap-4">
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="male" id="gender-male" />
|
|
<Label htmlFor="gender-male" className="font-normal">Laki-laki</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="female" id="gender-female" />
|
|
<Label htmlFor="gender-female" className="font-normal">Perempuan</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
<InputError message={errors.gender} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Tanggal Lahir</Label>
|
|
<DatePicker
|
|
name="birth_date"
|
|
value={birthDate}
|
|
onChange={setBirthDate}
|
|
placeholder="Pilih tanggal lahir"
|
|
/>
|
|
<InputError message={errors.birth_date} />
|
|
</div>
|
|
<div className="grid gap-2 md:col-span-2">
|
|
<Label htmlFor="address">
|
|
Alamat
|
|
</Label>
|
|
<Textarea
|
|
id="address"
|
|
name="address"
|
|
placeholder="Masukkan alamat"
|
|
rows={3}
|
|
defaultValue={employee.user_profile?.address ?? ''}
|
|
/>
|
|
<InputError message={errors.address} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Pegawai</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div className="grid gap-2">
|
|
<Label>Tanggal Masuk <span className="text-destructive">*</span></Label>
|
|
<DatePicker
|
|
name="join_date"
|
|
value={joinDate}
|
|
onChange={setJoinDate}
|
|
placeholder="Pilih tanggal masuk"
|
|
/>
|
|
<InputError message={errors.join_date} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Tanggal Keluar</Label>
|
|
<DatePicker
|
|
name="resign_date"
|
|
value={resignDate}
|
|
onChange={setResignDate}
|
|
placeholder="Pilih tanggal keluar"
|
|
/>
|
|
<InputError message={errors.resign_date} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Status Kepegawaian <span className="text-destructive">*</span></Label>
|
|
<Select name="employment_status" defaultValue={employee.employee?.employment_status ?? 'full_time'}>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Pilih status kepegawaian" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="full_time">Full Time</SelectItem>
|
|
<SelectItem value="part_time">Part Time</SelectItem>
|
|
<SelectItem value="contract">Kontrak</SelectItem>
|
|
<SelectItem value="internship">Magang</SelectItem>
|
|
<SelectItem value="resigned">Keluar</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<InputError message={errors.employment_status} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="base_salary">
|
|
Gaji Pokok <span className="text-destructive">*</span>
|
|
</Label>
|
|
<RupiahInput name="base_salary" min={1} />
|
|
<InputError message={errors.base_salary} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 mt-6">
|
|
<Button type="submit" disabled={processing}>
|
|
{processing ? 'Menyimpan...' : 'Simpan'}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
EmployeeEdit.layout = {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'HR',
|
|
href: employeeIndex.url(),
|
|
},
|
|
{
|
|
title: 'Pegawai',
|
|
href: employeeIndex.url(),
|
|
},
|
|
{
|
|
title: 'Edit',
|
|
href: '#',
|
|
},
|
|
],
|
|
};
|