garage-erp/apps/dashboard/modules/customers/customer-actions.tsx
Mohammad Khyata 38565298fc update forms
Co-authored-by: Copilot <copilot@github.com>
2026-05-07 21:02:15 +03:00

86 lines
3.1 KiB
TypeScript

"use client"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { Button } from "@/shared/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Pencil, Trash2 } from "lucide-react"
import { confirm } from "@/shared/components/confirm-dialog"
import { toast } from "sonner"
import { useFormDialog } from "@/shared/components/form-dialog"
import { CustomerForm } from "./customer-form"
type CustomerActionsProps = {
customerId: string
}
export function CustomerActions({ customerId }: CustomerActionsProps) {
const api = useAuthApi()
const router = useRouter()
const editDialog = useFormDialog("customer-details-edit")
const handleDelete = async () => {
const confirmed = await confirm({
title: "Delete Customer",
description: "Are you sure you want to delete this customer? This action cannot be undone.",
confirmLabel: "Delete",
variant: "destructive",
})
if (!confirmed) return
try {
await api.customers.destroy(customerId)
toast.success("Customer deleted successfully.")
router.push("/sales/customers")
} catch {
toast.error("Failed to delete customer.")
}
}
return (
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Ellipsis className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => editDialog.open(customerId)}>
<Pencil className="size-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Dialog open={editDialog.isOpen} onOpenChange={(v) => { if (!v) editDialog.close() }}>
<DialogContent className="min-w-xl lg:min-w-4xl">
<DialogHeader>
<DialogTitle className="text-2xl font-bold">Edit Customer</DialogTitle>
</DialogHeader>
<ScrollArea className="max-h-[80vh] px-4">
<CustomerForm
resourceId={editDialog.resourceId}
onSuccess={() => {
editDialog.close()
router.refresh()
}}
/>
</ScrollArea>
</DialogContent>
</Dialog>
</>
)
}