siakad-itm/resources/js/pages/admin/users/administrators/index.tsx
Yoga Pangestu 9626181d46
Some checks failed
tests / ci (pull_request) Has been cancelled
feat: enhance UI components with icons and improve navigation links
2026-08-25 23:42:14 +07:00

146 lines
4.7 KiB
TypeScript

import { Head, router } from '@inertiajs/react';
import { Plus, RotateCcw } from 'lucide-react';
import { useState } from 'react';
import { ConfirmDialog } from '@/components/confirm-dialog';
import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { PageHeader } from '@/components/page-header';
import { Button } from '@/components/ui/button';
import { useServerTable } from '@/hooks/use-server-table';
import {
index as administratorsIndex,
create,
destroy,
edit,
reset_password
} from '@/routes/admin/users/administrators';
import type { Administrator } from './columns';
import { createAdministratorColumns } from './columns';
type Props = {
administrators: {
data: Administrator[];
current_page: number;
last_page: number;
per_page: number;
total: number;
};
};
export default function AdministratorIndex({ administrators }: Props) {
const [deleting, setDeleting] = useState<Administrator | null>(null);
const [resetting, setResetting] = useState<Administrator | null>(null);
const pagination: PaginationState = {
current_page: administrators.current_page,
last_page: administrators.last_page,
per_page: administrators.per_page,
total: administrators.total,
};
const {
search,
handlePageChange,
handlePerPageChange,
handleSearchChange,
} = useServerTable({
route: () => administratorsIndex.url(),
pagination,
});
function handleDelete() {
if (!deleting) {
return;
}
router.delete(destroy(deleting.id), {
onSuccess: () => setDeleting(null),
});
}
function handleResetPassword() {
if (!resetting) {
return;
}
router.patch(reset_password.url(resetting.id), {}, {
onSuccess: () => setResetting(null),
});
}
const columns = createAdministratorColumns({
handleEdit: (admin) => {
router.get(edit.url(admin.id));
},
handleDeleteClick: (admin) => setDeleting(admin),
handleResetPassword: (admin) => setResetting(admin),
});
return (
<>
<Head title="Administrator" />
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
<PageHeader
title="Administrator"
actions={
<Button asChild>
<a href={create.url()}>
<Plus className="h-4 w-4" />
Tambah
</a>
</Button>
}
/>
<DataTable
columns={columns}
data={administrators.data}
searchKey="name"
searchPlaceholder="Cari administrator..."
emptyText="Belum ada data administrator."
pagination={pagination}
onPageChange={handlePageChange}
onPerPageChange={handlePerPageChange}
onSearchChange={handleSearchChange}
searchValue={search}
/>
<DeleteConfirmDialog
target={deleting}
onOpenChange={(open) => {
if (!open) {
setDeleting(null);
}
}}
title="Hapus Administrator"
description={(admin) =>
`Apakah Anda yakin ingin menghapus administrator "${admin.profile?.full_name}"? Tindakan ini tidak dapat dibatalkan.`
}
onConfirm={handleDelete}
/>
<ConfirmDialog
open={resetting !== null}
onOpenChange={(open) => {
if (!open) {
setResetting(null);
}
}}
title="Reset Kata Sandi"
description={
resetting
? `Apakah Anda yakin ingin mereset kata sandi administrator "${resetting.profile?.full_name}" ke kata sandi default?`
: ''
}
confirmLabel="Reset"
confirmIcon={<RotateCcw className="h-4 w-4" />}
variant="default"
onConfirm={handleResetPassword}
/>
</div>
</>
);
}