update forms

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

apps/dashboard/modules/appointments/appointment-actions.tsx

@@ -4,6 +4,8 @@ import { useAuthApi } from "@/shared/useApi"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 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,
@@ -15,6 +17,8 @@ import { Ellipsis, Pencil, Trash2, CheckCircle, Unlink } from "lucide-react"
 import { toast } from "sonner"
 import { useQueryClient } from "@tanstack/react-query"
 import { APPOINTMENT_ROUTES } from "@garage/api"
+import { useFormDialog } from "@/shared/components/form-dialog"
+import { AppointmentForm } from "./appointment-form"
 
 type AppointmentActionsProps = {
     appointmentId: string
@@ -27,10 +31,7 @@ export function AppointmentActions({ appointmentId, currentStatus, jobCardId }:
     const router = useRouter()
     const queryClient = useQueryClient()
     const [isLoading, setIsLoading] = useState(false)
-
-    const handleEdit = () => {
-        router.push(`/calendar/appointment/${appointmentId}/edit`)
-    }
+    const editDialog = useFormDialog("appointment-details-edit")
 
     const handleDelete = async () => {
         setIsLoading(true)
@@ -82,7 +83,7 @@ export function AppointmentActions({ appointmentId, currentStatus, jobCardId }:
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={handleEdit}>
+                <DropdownMenuItem onClick={() => editDialog.open(appointmentId)}>
                     <Pencil className="size-4" />
                     Edit
                 </DropdownMenuItem>
@@ -120,5 +121,21 @@ export function AppointmentActions({ appointmentId, currentStatus, jobCardId }:
                 </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 Appointment</DialogTitle>
+                    </DialogHeader>
+                    <ScrollArea className="max-h-[80vh] px-4">
+                        <AppointmentForm
+                            resourceId={editDialog.resourceId}
+                            onSuccess={() => {
+                                editDialog.close()
+                                router.refresh()
+                            }}
+                        />
+                    </ScrollArea>
+                </DialogContent>
+            </Dialog>
+        </>    )
 }