update forms

Co-authored-by: Copilot <copilot@github.com>

apps/dashboard/modules/inspections/inspection-actions.tsx

@@ -3,6 +3,8 @@
 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,
@@ -12,6 +14,8 @@ import {
 } from "@/shared/components/ui/dropdown-menu"
 import { Ellipsis, Pencil, Trash2, Play, CheckCircle2 } from "lucide-react"
 import { toast } from "sonner"
+import { useFormDialog } from "@/shared/components/form-dialog"
+import { InspectionForm } from "./inspection-form"
 
 type InspectionActionsProps = {
     inspectionId: string
@@ -27,10 +31,7 @@ const STATUS_TRANSITIONS: Record<string, { next: string; label: string; icon: ty
 export function InspectionActions({ inspectionId, status, onStatusChange }: InspectionActionsProps) {
     const api = useAuthApi()
     const router = useRouter()
-
-    const handleEdit = () => {
-        router.push(`/sales/inspections/${inspectionId}/edit`)
-    }
+    const editDialog = useFormDialog("inspection-details-edit")
 
     const handleDelete = async () => {
         const promise = api.inspections.destroy(inspectionId)
@@ -60,29 +61,48 @@ export function InspectionActions({ inspectionId, status, onStatusChange }: Insp
     const transition = status ? STATUS_TRANSITIONS[status] : undefined
 
     return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon">
-                    <Ellipsis className="size-4" />
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={handleEdit}>
-                    <Pencil className="size-4" />
-                    Edit
-                </DropdownMenuItem>
-                {transition && (
-                    <DropdownMenuItem onClick={() => handleStatusChange(transition.next)}>
-                        <transition.icon className="size-4" />
-                        {transition.label}
+        <>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                        <Ellipsis className="size-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => editDialog.open(inspectionId)}>
+                        <Pencil className="size-4" />
+                        Edit
                     </DropdownMenuItem>
-                )}
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
-                    <Trash2 className="size-4" />
-                    Delete
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
+                    {transition && (
+                        <DropdownMenuItem onClick={() => handleStatusChange(transition.next)}>
+                            <transition.icon className="size-4" />
+                            {transition.label}
+                        </DropdownMenuItem>
+                    )}
+                    <DropdownMenuSeparator />
+                    <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 Inspection</DialogTitle>
+                    </DialogHeader>
+                    <ScrollArea className="max-h-[80vh] px-4">
+                        <InspectionForm
+                            resourceId={editDialog.resourceId}
+                            onSuccess={() => {
+                                editDialog.close()
+                                router.refresh()
+                            }}
+                        />
+                    </ScrollArea>
+                </DialogContent>
+            </Dialog>
+        </>
     )
 }