da30f12fc2
- Implemented employee columns for data table with sorting and action buttons. - Created employee creation form with validation and default password information. - Developed employee editing form pre-filled with existing data. - Added employee listing page with delete and reset password functionalities. - Introduced leave request management with columns for status and actions. - Created leave request form for adding and editing requests with date pickers. - Implemented confirmation dialogs for delete, approve, and reject actions.
118 lines
4.0 KiB
TypeScript
118 lines
4.0 KiB
TypeScript
import { ConfirmDialog } from '@/components/confirm-dialog';
|
|
import { DataTable } from '@/components/data-table';
|
|
import { Button } from '@/components/ui/button';
|
|
import { destroy, create as employeeCreate, edit as employeeEdit, index as employeeIndex, toggleActive, resetPassword as resetPasswordRoute } from '@/routes/admin/hr/employees';
|
|
import { Head, router } from '@inertiajs/react';
|
|
import { Plus } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import type { Employee } from './columns';
|
|
import { createEmployeeColumns } from './columns';
|
|
|
|
type Props = {
|
|
employees: Employee[];
|
|
};
|
|
|
|
export default function EmployeeIndex({ employees }: Props) {
|
|
const [deleting, setDeleting] = useState<Employee | null>(null);
|
|
const [resetPasswordTarget, setResetPasswordTarget] = useState<Employee | null>(null);
|
|
|
|
function handleDelete() {
|
|
if (!deleting) {
|
|
return;
|
|
}
|
|
|
|
router.delete(destroy.url(deleting.id), {
|
|
onSuccess: () => setDeleting(null),
|
|
});
|
|
}
|
|
|
|
function handleResetPassword() {
|
|
if (!resetPasswordTarget) {
|
|
return;
|
|
}
|
|
|
|
router.post(resetPasswordRoute.url(resetPasswordTarget.id), {}, {
|
|
onSuccess: () => setResetPasswordTarget(null),
|
|
});
|
|
}
|
|
|
|
const columns = createEmployeeColumns({
|
|
handleEdit: (employee) => {
|
|
window.location.href = employeeEdit.url(employee.id);
|
|
},
|
|
handleDeleteClick: (employee) => setDeleting(employee),
|
|
handleResetPassword: (employee) => setResetPasswordTarget(employee),
|
|
toggleActiveUrl: (id) => toggleActive.url(id),
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Head title="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">
|
|
Pegawai
|
|
</h2>
|
|
</div>
|
|
<Button asChild>
|
|
<a href={employeeCreate.url()}>
|
|
<Plus className="h-4 w-4" />
|
|
Tambah
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
|
|
<DataTable
|
|
columns={columns}
|
|
data={employees}
|
|
searchKey="full_name"
|
|
searchPlaceholder="Cari pegawai..."
|
|
emptyText="Belum ada data pegawai."
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={deleting !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setDeleting(null);
|
|
}
|
|
}}
|
|
title="Hapus Pegawai"
|
|
description={`Apakah Anda yakin ingin menghapus pegawai "${deleting?.user_profile?.full_name}"? Tindakan ini tidak dapat dibatalkan.`}
|
|
confirmLabel="Hapus"
|
|
onConfirm={handleDelete}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={resetPasswordTarget !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setResetPasswordTarget(null);
|
|
}
|
|
}}
|
|
title="Reset Kata Sandi"
|
|
description={`Apakah Anda yakin ingin mereset kata sandi pegawai "${resetPasswordTarget?.user_profile?.full_name}" ke kata sandi default?`}
|
|
confirmLabel="Reset"
|
|
variant="default"
|
|
onConfirm={handleResetPassword}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
EmployeeIndex.layout = {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'HR',
|
|
href: employeeIndex.url(),
|
|
},
|
|
{
|
|
title: 'Pegawai',
|
|
href: employeeIndex.url(),
|
|
},
|
|
],
|
|
};
|