163 lines
7.7 KiB
TypeScript
163 lines
7.7 KiB
TypeScript
import { Head, useForm, Link } from '@inertiajs/react';
|
|
import { Separator } from '@radix-ui/react-separator';
|
|
import React from 'react';
|
|
import type { FormEvent } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
|
|
// Definisi tipe data props untuk TypeScript
|
|
interface EmployeeProps {
|
|
employee: {
|
|
id: number;
|
|
nip: string;
|
|
position: string;
|
|
status: string;
|
|
join_date: string;
|
|
user: {
|
|
name: string;
|
|
email: string;
|
|
} | null;
|
|
};
|
|
}
|
|
|
|
export default function Edit({ employee }: EmployeeProps) {
|
|
// Inisialisasi form dengan data dari database
|
|
const { data, setData, put, processing, errors } = useForm({
|
|
name: employee.user?.name || '',
|
|
email: employee.user?.email || '',
|
|
password: '', // Kosongkan untuk keamanan
|
|
nip: employee.nip || '',
|
|
position: employee.position || '',
|
|
status: employee.status || 'PKWT',
|
|
join_date: employee.join_date || '',
|
|
});
|
|
|
|
const submit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
put(`/admin/employees/${employee.id}`);
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title={`Edit Karyawan - ${employee.user?.name}`} />
|
|
<div className="p-8 max-w-2xl mx-auto">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Edit Karyawan</CardTitle>
|
|
<CardDescription>
|
|
Perbarui informasi data diri dan kepegawaian karyawan.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={submit} className="space-y-4">
|
|
{/* Data Profil */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Nama Lengkap</Label>
|
|
<Input
|
|
id="name"
|
|
value={data.name}
|
|
onChange={e => setData('name', e.target.value)}
|
|
/>
|
|
{errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={data.email}
|
|
onChange={e => setData('email', e.target.value)}
|
|
/>
|
|
{errors.email && <p className="text-xs text-red-500">{errors.email}</p>}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Password Baru (Kosongkan jika tidak diganti)</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
value={data.password}
|
|
onChange={e => setData('password', e.target.value)}
|
|
/>
|
|
{errors.password && <p className="text-xs text-red-500">{errors.password}</p>}
|
|
</div>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
{/* Data Kepegawaian */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="nip">NIP</Label>
|
|
<Input
|
|
id="nip"
|
|
value={data.nip}
|
|
onChange={e => setData('nip', e.target.value)}
|
|
/>
|
|
{errors.nip && <p className="text-xs text-red-500">{errors.nip}</p>}
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="join_date">Tanggal Masuk</Label>
|
|
<Input
|
|
id="join_date"
|
|
type="date"
|
|
value={data.join_date}
|
|
onChange={e => setData('join_date', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label>Jabatan</Label>
|
|
<Select
|
|
value={data.position}
|
|
onValueChange={(val) => setData('position', val)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Pilih Jabatan" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="Staff">Staff</SelectItem>
|
|
<SelectItem value="Supervisor">Supervisor</SelectItem>
|
|
<SelectItem value="Manager">Manager</SelectItem>
|
|
<SelectItem value="HRD">HRD</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Status Kerja</Label>
|
|
<Select
|
|
value={data.status}
|
|
onValueChange={(val) => setData('status', val)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Pilih Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="PKWT">PKWT</SelectItem>
|
|
<SelectItem value="PKWTT">PKWTT</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<Button variant="outline" asChild>
|
|
<Link href="/admin/employees">Batal</Link>
|
|
</Button>
|
|
<Button type="submit" disabled={processing}>
|
|
Simpan Perubahan
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |