101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useForm } from "@inertiajs/react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableRow,
|
|
TableHead,
|
|
TableBody,
|
|
TableCell,
|
|
} from "@/components/ui/table";
|
|
import {
|
|
Dialog,
|
|
DialogTrigger,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Plus, Pencil, Trash2 } from "lucide-react";
|
|
import AuthenticatedLayout from "@/layouts/authenticated-layout";
|
|
import { Head } from "@inertiajs/react";
|
|
import { Toaster } from "@/components/ui/toaster";
|
|
|
|
interface Menu {
|
|
id: number | null;
|
|
name: string;
|
|
is_active: boolean;
|
|
}
|
|
|
|
export default function Index({ menus }: { menus: Menu[] }) {
|
|
const {
|
|
data,
|
|
setData,
|
|
post,
|
|
put,
|
|
delete: destroy,
|
|
reset,
|
|
} = useForm<Menu>({
|
|
id: null,
|
|
name: "",
|
|
is_active: true,
|
|
});
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editing, setEditing] = useState(false);
|
|
|
|
return (
|
|
<AuthenticatedLayout header="Manajemen Menu">
|
|
<Head title="Manajemen Menu" />
|
|
<div className="container mx-auto p-4">
|
|
<Button
|
|
onClick={() => {
|
|
setEditing(false);
|
|
reset();
|
|
setIsModalOpen(true);
|
|
}}
|
|
>
|
|
<Plus className="h-4 w-4" /> Tambah Menu
|
|
</Button>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Nama Menu</TableHead>
|
|
<TableHead>Aksi</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{menus.map((menu) => (
|
|
<TableRow key={menu.id}>
|
|
<TableCell>{menu.name}</TableCell>
|
|
<TableCell>
|
|
<Button
|
|
onClick={() => {
|
|
setEditing(true);
|
|
setIsModalOpen(true);
|
|
setData(menu);
|
|
}}
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
onClick={() =>
|
|
destroy(`/menus/${menu.id}`)
|
|
}
|
|
variant="destructive"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<Toaster />
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|