garage-erp/apps/dashboard/modules/credit-notes/credit-note-document-form.tsx

71 lines
2.4 KiB
TypeScript

"use client"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform } from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
const schema = z.object({
attachments: z.instanceof(FileList).refine((files) => files.length > 0, "At least one file is required"),
})
type FormValues = z.infer<typeof schema>
type CreditNoteDocumentFormProps = {
creditNoteId: string
onSuccess?: () => void
}
export function CreditNoteDocumentForm({ creditNoteId, onSuccess }: CreditNoteDocumentFormProps) {
const api = useAuthApi()
const form = useForm<FormValues>({
resolver: zodResolver(schema),
})
const handleSubmit = async (values: FormValues) => {
try {
const formData = new FormData()
Array.from(values.attachments).forEach((file) => {
formData.append("attachments[]", file)
})
await api.creditNotes.addAttachment(creditNoteId, formData)
toast.success("Attachment uploaded")
form.reset()
onSuccess?.()
} catch {
toast.error("Failed to upload attachment")
}
}
return (
<Rhform form={form} onSubmit={handleSubmit}>
<FieldGroup>
<div className="flex flex-col gap-1.5">
<label className="text-sm font-medium">Attachments</label>
<input
type="file"
multiple
className="text-sm"
{...form.register("attachments")}
/>
{form.formState.errors.attachments && (
<p className="text-xs text-destructive">
{form.formState.errors.attachments.message as string}
</p>
)}
</div>
<Button type="submit" disabled={form.formState.isSubmitting}>
<Plus />
{form.formState.isSubmitting ? "Uploading..." : "Upload Attachment"}
</Button>
</FieldGroup>
</Rhform>
)
}