TIFNJK_E41222887/resources/js/pages/admin/positions/create.tsx

94 lines
4.2 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';
export default function Create() {
const { data, setData, post, processing, errors } = useForm({
name: '',
basic_salary: '',
});
const submit = (e: React.FormEvent) => {
e.preventDefault();
post('/admin/positions');
};
return (
<AppLayout>
<Head title="Tambah Jabatan" />
<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">Tambah Jabatan</h2>
<p className="text-muted-foreground">Buat posisi atau level baru.</p>
</div>
<Button variant="outline" asChild>
<Link href="/admin/positions">Kembali</Link>
</Button>
</div>
<Card>
<CardHeader>
<CardTitle>Form Jabatan</CardTitle>
</CardHeader>
<Separator />
<CardContent className="pt-6">
<form onSubmit={submit} className="space-y-6">
<div className="max-w-xl space-y-4">
{/* Nama Jabatan */}
<div className="space-y-2">
<Label>
Nama Jabatan <span className="text-red-500">*</span>
</Label>
<Input
placeholder="Contoh: Senior Backend Developer"
value={data.name}
onChange={e => setData('name', e.target.value)}
/>
{errors.name && (
<p className="text-red-500 text-xs">{errors.name}</p>
)}
</div>
{/* Gaji Pokok */}
<div className="space-y-2">
<Label>Gaji Pokok (Rp)</Label>
<Input
type="number"
min={0}
placeholder="Contoh: 5000000"
value={data.basic_salary}
onChange={e => setData('basic_salary', e.target.value)}
/>
<p className="text-xs text-muted-foreground">
Nilai ini akan otomatis terisi saat membuat Payroll untuk karyawan dengan jabatan ini.
</p>
{errors.basic_salary && (
<p className="text-red-500 text-xs">{errors.basic_salary}</p>
)}
</div>
</div>
<div className="flex justify-start gap-4 pt-2">
<Button type="submit" disabled={processing}>
{processing ? 'Menyimpan...' : 'Simpan Jabatan'}
</Button>
<Button type="button" variant="ghost" asChild>
<Link href="/admin/positions">Batal</Link>
</Button>
</div>
</form>
</CardContent>
</Card>
</div>
</AppLayout>
);
}