141 lines
5.1 KiB
TypeScript
141 lines
5.1 KiB
TypeScript
import { Head, Link } from '@inertiajs/react';
|
|
import { Plus, Trash2 } from 'lucide-react';
|
|
import { DataTable } from '@/components/data-table';
|
|
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
|
|
import * as orderRoutes from '@/routes/order';
|
|
import type { Order } from '@/types/order';
|
|
import { useOrderIndex } from './hooks/use-order-index';
|
|
import { useOrderPrint } from './hooks/use-order-print';
|
|
import { getColumns } from './partials/columns';
|
|
import { PrinterSettings } from './partials/printer-settings';
|
|
import { usePermission } from '@/hooks/use-permission';
|
|
|
|
export default function OrderIndex({ orders }: { orders: Order[] }) {
|
|
const { hasPermission } = usePermission();
|
|
const {
|
|
isDeleteDialogOpen,
|
|
isBulkDeleteDialogOpen,
|
|
orderToDelete,
|
|
rowsToDelete,
|
|
rowSelection,
|
|
setRowSelection,
|
|
setRowsToDelete,
|
|
setIsDeleteDialogOpen,
|
|
setIsBulkDeleteDialogOpen,
|
|
onDelete,
|
|
confirmDelete,
|
|
confirmBulkDelete,
|
|
} = useOrderIndex();
|
|
|
|
const {
|
|
isConnected,
|
|
name,
|
|
paperSize,
|
|
connectBluetooth,
|
|
connectUsb,
|
|
disconnect,
|
|
setPaperSize,
|
|
handlePrint
|
|
} = useOrderPrint();
|
|
|
|
const columns = getColumns({ onDelete, onPrint: handlePrint }).filter(
|
|
(col) => col.id !== 'actions' || hasPermission('Edit:Order') || hasPermission('Delete:Order')
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 p-6">
|
|
<Head title="Pesanan" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight text-foreground">Pesanan</h1>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<PrinterSettings
|
|
isConnected={isConnected}
|
|
name={name}
|
|
paperSize={paperSize}
|
|
onConnectBluetooth={connectBluetooth}
|
|
onConnectUsb={connectUsb}
|
|
onDisconnect={disconnect}
|
|
onPaperSizeChange={setPaperSize}
|
|
/>
|
|
|
|
{hasPermission('Create:Order') && (
|
|
<Link href={orderRoutes.create().url}>
|
|
<Button className="gap-2">
|
|
<Plus className="size-4" />
|
|
Tambah
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
|
|
<CardContent className="p-0">
|
|
<DataTable
|
|
columns={columns}
|
|
data={orders}
|
|
showSelection={hasPermission('DeleteAny:Order')}
|
|
rowSelection={rowSelection}
|
|
onRowSelectionChange={setRowSelection}
|
|
bulkActions={
|
|
hasPermission('DeleteAny:Order')
|
|
? [
|
|
{
|
|
label: 'Hapus Terpilih',
|
|
onClick: (rows) => {
|
|
setRowsToDelete(rows);
|
|
setIsBulkDeleteDialogOpen(true);
|
|
},
|
|
icon: Trash2,
|
|
variant: 'destructive',
|
|
},
|
|
]
|
|
: []
|
|
}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Single Delete Confirmation */}
|
|
<DeleteConfirmation
|
|
isOpen={isDeleteDialogOpen}
|
|
onOpenChange={setIsDeleteDialogOpen}
|
|
title="Hapus pesanan?"
|
|
description={
|
|
<>
|
|
Tindakan ini tidak dapat dibatalkan. Pesanan <strong>{orderToDelete?.invoice_number}</strong> akan dihapus secara permanen dan stok akan dikembalikan.
|
|
</>
|
|
}
|
|
onDelete={confirmDelete}
|
|
/>
|
|
|
|
{/* Bulk Delete Confirmation */}
|
|
<DeleteConfirmation
|
|
isOpen={isBulkDeleteDialogOpen}
|
|
onOpenChange={setIsBulkDeleteDialogOpen}
|
|
title={`Hapus ${rowsToDelete.length} pesanan?`}
|
|
description={
|
|
<>
|
|
Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
|
|
</>
|
|
}
|
|
onDelete={confirmBulkDelete}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
OrderIndex.layout = {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Kelola',
|
|
}
|
|
],
|
|
};
|