165 lines
8.0 KiB
TypeScript
165 lines
8.0 KiB
TypeScript
import { Head, Link, useForm } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{ title: 'Manajemen Pengguna', href: '/admin/users' },
|
|
{ title: 'Tambah User', href: '/admin/users/create' },
|
|
];
|
|
|
|
export default function Create() {
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
password_confirmation: '',
|
|
role: '',
|
|
});
|
|
|
|
const submit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
post('/admin/users');
|
|
};
|
|
|
|
return (
|
|
<AppLayout breadcrumbs={breadcrumbs}>
|
|
<Head title="Tambah User Baru" />
|
|
|
|
<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 User Baru</h2>
|
|
<p className="text-muted-foreground">Buat akun pengguna baru beserta hak aksesnya.</p>
|
|
</div>
|
|
<Button variant="outline" asChild>
|
|
<Link href="/admin/users">Kembali</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Form User</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">
|
|
{/* Nama */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">
|
|
Nama Lengkap <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="name"
|
|
placeholder="Contoh: Budi Santoso"
|
|
value={data.name}
|
|
onChange={(e) => setData('name', e.target.value)}
|
|
autoComplete="off"
|
|
/>
|
|
{errors.name && (
|
|
<p className="text-red-500 text-xs">{errors.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">
|
|
Email <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Contoh: budi@hris.com"
|
|
value={data.email}
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
autoComplete="off"
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-red-500 text-xs">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Password */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">
|
|
Password <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Minimal 8 karakter"
|
|
value={data.password}
|
|
onChange={(e) => setData('password', e.target.value)}
|
|
autoComplete="new-password"
|
|
/>
|
|
{errors.password && (
|
|
<p className="text-red-500 text-xs">{errors.password}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Konfirmasi Password */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password_confirmation">
|
|
Konfirmasi Password <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="password_confirmation"
|
|
type="password"
|
|
placeholder="Ulangi password di atas"
|
|
value={data.password_confirmation}
|
|
onChange={(e) => setData('password_confirmation', e.target.value)}
|
|
autoComplete="new-password"
|
|
/>
|
|
{errors.password_confirmation && (
|
|
<p className="text-red-500 text-xs">{errors.password_confirmation}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Role */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="role">
|
|
Role / Hak Akses <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Select
|
|
value={data.role}
|
|
onValueChange={(val) => setData('role', val)}
|
|
>
|
|
<SelectTrigger id="role" className="w-full">
|
|
<SelectValue placeholder="Pilih role..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="admin">Admin</SelectItem>
|
|
<SelectItem value="employee">Employee</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.role && (
|
|
<p className="text-red-500 text-xs">{errors.role}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-4 pt-4">
|
|
<Button type="button" variant="ghost" asChild>
|
|
<Link href="/admin/users">Batal</Link>
|
|
</Button>
|
|
<Button type="submit" disabled={processing}>
|
|
{processing ? 'Menyimpan...' : 'Simpan User'}
|
|
</Button>
|
|
</div>
|
|
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|