From 5705cf6a39a8c4c0bde1b76993e709c9ba45888d Mon Sep 17 00:00:00 2001
From: "mihailo.vojinovic" <mihailonvojinovic@gmail.com>
Date: Wed, 11 Feb 2026 16:56:26 +0100
Subject: Make download button download an invoice

---
 package-lock.json                    | 37 ++++++++++++++++++++++++++++++++++++
 package.json                         |  3 +++
 src/components/invoice-generator.tsx | 15 +++++++++++++--
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 565f348..178c29f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@hookform/resolvers": "^3.3.4",
+        "blob-stream": "^0.1.3",
         "clsx": "^2.1.1",
         "next": "16.1.6",
         "pdfkit": "^0.17.2",
@@ -20,7 +21,9 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/blob-stream": "^0.1.33",
         "@types/node": "^20",
+        "@types/pdfkit": "^0.17.4",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9",
@@ -1541,6 +1544,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/blob-stream": {
+      "version": "0.1.33",
+      "resolved": "https://registry.npmjs.org/@types/blob-stream/-/blob-stream-0.1.33.tgz",
+      "integrity": "sha512-HNHZ1S6W7F8PhxdyAastunpUC8cAZim78UIfqbL79gLzylp8EZep68yxAh11hTRoEvsqHAg/MECgmKF8+V0HzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1572,6 +1585,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/pdfkit": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/pdfkit/-/pdfkit-0.17.4.tgz",
+      "integrity": "sha512-odAmVuuguRxKh1X4pbMrJMp8ecwNqHRw6lweupvzK+wuyNmi6wzlUlGVZ9EqMvp3Bs2+L9Ty0sRlrvKL+gsQZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.2.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.11.tgz",
@@ -2452,6 +2475,20 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/blob": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz",
+      "integrity": "sha512-YRc9zvVz4wNaxcXmiSgb9LAg7YYwqQ2xd0Sj6osfA7k/PKmIGVlnOYs3wOFdkRC9/JpQu8sGt/zHgJV7xzerfg=="
+    },
+    "node_modules/blob-stream": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/blob-stream/-/blob-stream-0.1.3.tgz",
+      "integrity": "sha512-xXwyhgVmPsFVFFvtM5P0syI17/oae+MIjLn5jGhuD86mmSJ61EWMWmbPrV/0+bdcH9jQ2CzIhmTQKNUJL7IPog==",
+      "license": "MIT",
+      "dependencies": {
+        "blob": "0.0.4"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
diff --git a/package.json b/package.json
index 74b60e9..854af41 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "blob-stream": "^0.1.3",
     "clsx": "^2.1.1",
     "next": "16.1.6",
     "pdfkit": "^0.17.2",
@@ -21,7 +22,9 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/blob-stream": "^0.1.33",
     "@types/node": "^20",
+    "@types/pdfkit": "^0.17.4",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
diff --git a/src/components/invoice-generator.tsx b/src/components/invoice-generator.tsx
index 3389c25..792dfbc 100644
--- a/src/components/invoice-generator.tsx
+++ b/src/components/invoice-generator.tsx
@@ -9,9 +9,11 @@ import {
   SubmitHandler,
 } from "react-hook-form";
 import { Input } from "./ui/input";
-import React from "react";
+import React, { useActionState } from "react";
 import { cn } from "@/utils/cn";
 import { Button } from "./ui/button";
+import { generateInvoiceAction } from "@/lib/actions";
+import { generateInvoice } from "@/lib/generate";
 
 const defaultItem = {
   description: "",
@@ -45,8 +47,17 @@ export const InvoiceGenerator = () => {
   const lineItems = useWatch({ control, name: "line_items" });
   const currency = watch("currency", "USD");
 
-  const onSubmit: SubmitHandler<Invoice> = (data) => {
+  const onSubmit: SubmitHandler<Invoice> = async (data) => {
     console.log(data);
+    const blob = await generateInvoice(data);
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = "invoice.pdf";
+    document.body.appendChild(a);
+    a.click();
+
+    document.body.removeChild(a);
+    a.remove();
   };
 
   return (
-- 
cgit v1.3.1