From 6618838972246be01105ccad5956cd640c168d67 Mon Sep 17 00:00:00 2001 From: kleap-admin Date: Fri, 16 Jan 2026 10:54:26 +0000 Subject: [PATCH] Update components/invoice-generator.tsx --- components/invoice-generator.tsx | 250 +++++++++++++++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 components/invoice-generator.tsx diff --git a/components/invoice-generator.tsx b/components/invoice-generator.tsx new file mode 100644 index 0000000..b5a4e9e --- /dev/null +++ b/components/invoice-generator.tsx @@ -0,0 +1,250 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { Container } from "@/components/container"; +import { Heading } from "@/components/heading"; +import { Subheading } from "@/components/subheading"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Textarea } from "@/components/ui/textarea"; +import { Plus, Trash2, Download, Printer } from "lucide-react"; + +interface Item { + id: string; + description: string; + quantity: number; + price: number; +} + +export function InvoiceGenerator() { + const [clientName, setClientName] = useState(""); + const [clientEmail, setClientEmail] = useState(""); + const [clientAddress, setClientAddress] = useState(""); + const [invoiceNumber, setInvoiceNumber] = useState("INV-001"); + const [invoiceDate, setInvoiceDate] = useState(new Date().toISOString().split('T')[0]); + const [items, setItems] = useState([{ id: "1", description: "", quantity: 1, price: 0 }]); + const [taxRate, setTaxRate] = useState(0); + const [paymentTerms, setPaymentTerms] = useState("Net 30"); + + const addItem = () => { + setItems([...items, { id: Math.random().toString(36).substr(2, 9), description: "", quantity: 1, price: 0 }]); + }; + + const removeItem = (id: string) => { + if (items.length > 1) { + setItems(items.filter(item => item.id !== id)); + } + }; + + const updateItem = (id: string, field: keyof Item, value: string | number) => { + setItems(items.map(item => item.id === id ? { ...item, [field]: value } : item)); + }; + + const subtotal = items.reduce((acc, item) => acc + (item.quantity * item.price), 0); + const taxAmount = subtotal * (taxRate / 100); + const total = subtotal + taxAmount; + + const handlePrint = () => { + window.print(); + }; + + return ( +
+ +
+
+ Invoice Generator + Create professional invoices for your clients in seconds. +
+
+ +
+
+ +
+ {/* Editor Side */} +
+ + + Client Information + + +
+
+ + setClientName(e.target.value)} placeholder="Acme Corp" /> +
+
+ + setClientEmail(e.target.value)} placeholder="billing@acme.com" /> +
+
+
+ +