dstpabuaran.com/resources/js/pages/admin/hr/employee/create.tsx
Yoga Pangestu e7aa582572 feat: add cutting management functionality with CRUD operations
- Implemented CuttingIndex component for listing and managing cuttings.
- Added routes for cutting management in web.php.
- Created CuttingTest for testing cutting-related features including authorization, validation, and stock management.
- Updated roles create and edit pages to include necessary imports.
- Refactored settings and profile pages to streamline imports.
- Enhanced permissions checks for cutting management actions.
2026-08-04 02:24:11 +07:00

296 lines
16 KiB
TypeScript

import { Form, Head } from '@inertiajs/react';
import { AlertCircle, ArrowLeft } from 'lucide-react';
import { useState } from 'react';
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 { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
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, store } from '@/routes/admin/hr/employees';
export default function EmployeeCreate() {
const [joinDate, setJoinDate] = useState<Date | undefined>(undefined);
const [resignDate, setResignDate] = useState<Date | undefined>(undefined);
return (
<>
<Head title="Tambah 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">
Tambah Pegawai
</h2>
</div>
<Button asChild variant="outline">
<a href={employeeIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
</div>
<Alert>
<AlertCircle className="h-4 w-4" />
<AlertTitle>Informasi Kata Sandi</AlertTitle>
<AlertDescription>
Kata sandi default untuk akun baru adalah Minimal8@
</AlertDescription>
</Alert>
<Form action={store()}>
{({ 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"
/>
<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"
/>
<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"
/>
<InputError
message={errors.full_name}
/>
</div>
<div className="grid gap-2">
<Label htmlFor="phone_number">
No. Telepon
</Label>
<PhoneNumberInput name="phone_number" />
<InputError
message={errors.phone_number}
/>
</div>
<div className="grid gap-2">
<Label>Jenis Kelamin</Label>
<RadioGroup
name="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={undefined}
onChange={() => {}}
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}
/>
<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="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"
/>
<InputError
message={errors.base_salary}
/>
</div>
</CardContent>
</Card>
</div>
<div className="mt-6 flex items-center gap-4">
<Button type="submit" disabled={processing}>
{processing ? 'Menyimpan...' : 'Simpan'}
</Button>
</div>
</>
)}
</Form>
</div>
</>
);
}