import { useState } from 'react'; import { Head, useForm, router } from '@inertiajs/react'; import AppLayout from '@/layouts/AppLayout'; import { Plus, Edit2, Trash2, Search, Building2 } from 'lucide-react'; function DepartmentModal({ department, onClose }) { const isEdit = !!department; const { data, setData, post, put, processing, errors, reset } = useForm({ code: department?.code ?? '', name: department?.name ?? '', }); const submit = (e) => { e.preventDefault(); const onSuccess = () => { reset(); onClose(); }; isEdit ? put(route('master.departments.update', department.id), { onSuccess }) : post(route('master.departments.store'), { onSuccess }); }; return (

{isEdit ? 'Edit Departemen' : 'Tambah Departemen'}

setData('code', e.target.value.toUpperCase())} className={`form-input font-mono ${errors.code ? 'form-input-error' : ''}`} placeholder="e.g. IT, HRD" /> {errors.code &&

{errors.code}

}
setData('name', e.target.value)} className={`form-input ${errors.name ? 'form-input-error' : ''}`} placeholder="Nama departemen" /> {errors.name &&

{errors.name}

}
); } export default function DepartmentsIndex({ departments, filters }) { const [modal, setModal] = useState(null); const [search, setSearch] = useState(filters?.search ?? ''); const applySearch = () => router.get(route('master.departments.index'), { search }, { preserveState: true, replace: true }); const handleDelete = (id) => confirm('Hapus departemen ini?') && router.delete(route('master.departments.destroy', id)); return (

Departemen

Kelola daftar departemen perusahaan

setSearch(e.target.value)} onKeyDown={e => e.key === 'Enter' && applySearch()} className="form-input pl-9" placeholder="Cari departemen..." />
{departments?.data?.length > 0 ? departments.data.map(d => ( )) : ( )}
KodeNamaStatusAksi
{d.code} {d.name} {d.is_active !== false ? Aktif : Nonaktif}

Belum ada departemen
{modal && setModal(null)} />} ); }