Created Save as Draft Button Component

src/app/invoice-tools/invoice-tools-client.tsx

@@ -37,7 +37,12 @@ export function InvoiceToolsClient() {
     <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
       <section className="space-y-3">
         <h2 className="text-lg font-semibold">Create invoice (with validation)</h2>
-        <InvoiceCreateForm />
+        <InvoiceCreateForm
+          onDraft={(draft) => {
+            console.log("Draft saved:", draft);
+            alert(`Draft saved for: ${draft.description || "unnamed invoice"}`);
+          }}
+        />
       </section>
 
       <section className="space-y-3">

src/components/invoice/invoice-create-form.tsx

@@ -30,12 +30,14 @@ function todayIso(): string {
 
 export type InvoiceCreateFormProps = {
   onSubmit?: (invoice: InvoiceCreateInput) => Promise<void> | void;
+  onDraft?: (draft: typeof initialDraft) => void;
 };
 
-export function InvoiceCreateForm({ onSubmit }: InvoiceCreateFormProps) {
+export function InvoiceCreateForm({ onSubmit, onDraft }: InvoiceCreateFormProps) {
   const [draft, setDraft] = useState(initialDraft);
   const [errors, setErrors] = useState<FieldErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isDrafting, setIsDrafting] = useState(false);
 
   function updateField<K extends keyof typeof initialDraft>(
     field: K,
@@ -49,7 +51,7 @@ export function InvoiceCreateForm({ onSubmit }: InvoiceCreateFormProps) {
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    if (isSubmitting) return;
+    if (isSubmitting || isDrafting) return;
 
     const result = validateInvoiceCreate({
       amount: draft.amount,
@@ -73,6 +75,16 @@ export function InvoiceCreateForm({ onSubmit }: InvoiceCreateFormProps) {
     }
   }
 
+  function handleSaveDraft() {
+    setIsDrafting(true);
+    setErrors({});
+    try {
+      onDraft?.(draft);
+    } finally {
+      setIsDrafting(false);
+    }
+  }
+
   return (
     <form
       onSubmit={handleSubmit}
@@ -185,6 +197,22 @@ export function InvoiceCreateForm({ onSubmit }: InvoiceCreateFormProps) {
           "Create invoice"
         )}
       </Button>
+      <Button
+          type="button"
+          variant="secondary"
+          disabled={isSubmitting || isDrafting}
+          onClick={handleSaveDraft}
+          className="self-start"
+        >
+          {isDrafting ? (
+            <>
+              <Loader2 className="animate-spin" aria-hidden />
+              <span>Saving draft…</span>
+            </>
+          ) : (
+            "Save as draft"
+          )}
+        </Button>
     </form>
   );
 }