85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import product from '@/routes/product';
|
|
import { BreadcrumbItem } from '@/types';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import { PackagePlus, Pencil, Trash2 } from 'lucide-react';
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Products',
|
|
href: product.index().url,
|
|
},
|
|
];
|
|
|
|
export default function index({
|
|
products,
|
|
}: {
|
|
products: [{ id: number; name: string; display_status: string }];
|
|
}) {
|
|
return (
|
|
<AppLayout breadcrumbs={breadcrumbs}>
|
|
<Head title="Products" />
|
|
|
|
<div className="flex flex-col gap-8 px-12 py-8">
|
|
<div className="flex w-full items-center justify-between">
|
|
<h1 className="font-bold">Products</h1>
|
|
<Link href={product.add()}>
|
|
<Button className="cursor-pointer">
|
|
<PackagePlus /> Add Product
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<Table>
|
|
{/* <TableCaption>A list of your recent invoices.</TableCaption> */}
|
|
<TableHeader>
|
|
<TableRow className="w-full">
|
|
<TableHead className="!w-24">S.N.</TableHead>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead className="text-right">Action</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{products.map((prod, index) => (
|
|
<TableRow key={index}>
|
|
<TableCell className="font-medium">
|
|
{index + 1}
|
|
</TableCell>
|
|
<TableCell>{prod.name}</TableCell>
|
|
<TableCell>{prod.display_status}</TableCell>
|
|
<TableCell className="flex items-end justify-end gap-1 text-right">
|
|
<Button
|
|
variant={'ghost'}
|
|
className="cursor-pointer"
|
|
>
|
|
<Pencil />
|
|
</Button>
|
|
<Button
|
|
className="cursor-pointer bg-red-800 hover:bg-red-900"
|
|
onClick={() => {
|
|
router.delete(
|
|
product.delete(prod.id).url,
|
|
);
|
|
}}
|
|
>
|
|
<Trash2 />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|