update forms

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

apps/dashboard/modules/credit-notes/credit-note-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,
@@ -10,6 +12,8 @@ import {
     DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu"
 import { Ellipsis, Pencil, Trash2 } from "lucide-react"
+import { useFormDialog } from "@/shared/components/form-dialog"
+import { CreditNoteForm } from "./credit-note-form"
 
 type CreditNoteActionsProps = {
     creditNoteId: string
@@ -18,10 +22,7 @@ type CreditNoteActionsProps = {
 export function CreditNoteActions({ creditNoteId }: CreditNoteActionsProps) {
     const api = useAuthApi()
     const router = useRouter()
-
-    const handleEdit = () => {
-        router.push(`/sales/credit-notes/${creditNoteId}/edit`)
-    }
+    const editDialog = useFormDialog("credit-note-details-edit")
 
     const handleDelete = async () => {
         await api.creditNotes.destroy(creditNoteId)
@@ -29,22 +30,41 @@ export function CreditNoteActions({ creditNoteId }: CreditNoteActionsProps) {
     }
 
     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>
-                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
-                    <Trash2 className="size-4" />
-                    Delete
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
+        <>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                        <Ellipsis className="size-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => editDialog.open(creditNoteId)}>
+                        <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 Credit Note</DialogTitle>
+                    </DialogHeader>
+                    <ScrollArea className="max-h-[80vh] px-4">
+                        <CreditNoteForm
+                            resourceId={editDialog.resourceId}
+                            onSuccess={() => {
+                                editDialog.close()
+                                router.refresh()
+                            }}
+                        />
+                    </ScrollArea>
+                </DialogContent>
+            </Dialog>
+        </>
     )
 }

apps/dashboard/modules/credit-notes/credit-note-form.tsx

@@ -11,6 +11,7 @@ import {
     RhfSelectField,
     RhfTextareaField,
     RhfAsyncSelectField,
+    RhfDateField,
 } from "@/shared/components/form"
 import { toast } from "sonner"
 import { useAuthApi } from "@/shared/useApi"
@@ -150,7 +151,7 @@ export function CreditNoteForm({ resourceId, initialData, onSuccess }: CreditNot
                 </div>
 
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                    <RhfTextField name="date" label="Date" type="date" />
+                    <RhfDateField name="date" label="Date" required />
 
                     <RhfSelectField
                         name="status"

apps/dashboard/modules/credit-notes/credit-note.schema.ts

@@ -1,21 +1,28 @@
 import { z } from "zod"
+import { CreditNoteStatus } from "@garage/api"
 
 const relationFieldSchema = z
     .object({ value: z.string(), label: z.string() })
     .nullable()
 
+const optionalStringMax255Schema = z.preprocess(
+    (value) => (value === "" || value == null ? undefined : value),
+    z.string().max(255, "Must be at most 255 characters").optional(),
+)
+
 const creditNoteFormSchema = z.object({
     // ── Required fields ──
-    subject: z.string().min(1, "Subject is required"),
+    subject: z.string().trim().min(1, "Subject is required").max(255, "Subject must be at most 255 characters"),
 
     // ── Relations ──
     customer: relationFieldSchema,
     department: relationFieldSchema,
 
     // ── Optional fields ──
-    date: z.string().optional(),
-    status: z.string().optional(),
+    date: z.string().min(1, "Date is required").date("Enter a valid date"),
+    status: z.enum(CreditNoteStatus).optional(),
     notes: z.string().optional(),
+    credit_invoice: optionalStringMax255Schema,
 })
 
 type CreditNoteFormValues = z.infer<typeof creditNoteFormSchema>