garage-erp/apps/dashboard/modules/job-cards/job-card-dropdown.tsx
2026-04-15 04:59:05 +03:00

68 lines
2.5 KiB
TypeScript

"use client"
import { confirm } from '@/shared/components/confirm-dialog';
import { api } from '@garage/api';
import { useRouter } from 'next/dist/client/components/navigation';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/shared/components/ui/dropdown-menu'
import { Button } from '@/shared/components/ui/button'
import { toast } from 'sonner'
import { Ellipsis, Pencil, Printer, Trash2 } from 'lucide-react';
import { useDocumentPrint } from '@/shared/hooks/use-document-print';
export default function JobCardDropdown({ id }: { id: string }) {
const router = useRouter();
const { print, isPrinting } = useDocumentPrint()
const handleEdit = () => {
router.push(`/sales/job-cards/${id}/edit`)
}
const handlePrint = () => {
print("job_card", id, "print")
}
const handleDelete = async () => {
const confirmed = await confirm({
title: "Delete Job Card",
description: "Are you sure you want to delete this job card? This action cannot be undone.",
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) {
const promise = api.jobCards.destroy(id)
toast.promise(promise, {
loading: "Deleting job card...",
success: "Job card deleted successfully",
error: "Failed to delete job card",
})
await promise
router.push("/sales/job-cards")
}
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="self-stretch h-auto aspect-square">
<Ellipsis className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={handleEdit}>
<Pencil className="size-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem onClick={handlePrint} disabled={isPrinting}>
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}