88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
import { Head, useForm, Link } from '@inertiajs/react';
|
|
import React from 'react';
|
|
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 { Separator } from '@/components/ui/separator';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
|
|
interface Department {
|
|
id: number;
|
|
name: string;
|
|
description: string;
|
|
}
|
|
|
|
interface PageProps {
|
|
department: Department;
|
|
}
|
|
|
|
export default function Edit({ department }: PageProps) {
|
|
const { data, setData, put, processing, errors } = useForm({
|
|
name: department.name,
|
|
description: department.description || '',
|
|
});
|
|
|
|
const submit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
put(`/admin/departments/${department.id}`);
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Edit Departemen" />
|
|
|
|
<div className="p-4 md:p-8 w-full">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight">Edit Departemen</h2>
|
|
<p className="text-muted-foreground">Perbarui informasi divisi.</p>
|
|
</div>
|
|
<Button variant="outline" asChild>
|
|
<Link href="/admin/departments">Kembali</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Form Edit Departemen</CardTitle>
|
|
</CardHeader>
|
|
<Separator />
|
|
<CardContent className="pt-6">
|
|
<form onSubmit={submit} className="space-y-6">
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label>Nama Departemen</Label>
|
|
<Input
|
|
value={data.name}
|
|
onChange={e => setData('name', e.target.value)}
|
|
/>
|
|
{errors.name && <div className="text-red-500 text-xs">{errors.name}</div>}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Deskripsi Singkat</Label>
|
|
<Input
|
|
value={data.description}
|
|
onChange={e => setData('description', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-4 pt-4">
|
|
<Button type="button" variant="ghost" asChild>
|
|
<Link href="/admin/departments">Batal</Link>
|
|
</Button>
|
|
<Button type="submit" disabled={processing}>
|
|
{processing ? 'Menyimpan...' : 'Simpan Perubahan'}
|
|
</Button>
|
|
</div>
|
|
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |