[V0_FILE]typescriptreact:file="components/invoice-generator.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { jsPDF } from "jspdf" import html2canvas from "html2canvas" import { v4 as uuidv4 } from "uuid" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import InvoiceForm from "@/components/invoice-form" import InvoicePreview from "@/components/invoice-preview" import type { InvoiceData } from "@/types/invoice" export default function InvoiceGenerator() { const [activeTab, setActiveTab] = useState("edit") const invoiceRef = useRef(null) const [invoiceData, setInvoiceData] = useState({ invoiceNumber: `INV-${Math.floor(Math.random() * 10000)}`, date: new Date().toISOString().split("T")[0], dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], companyName: "", companyLogo: "", companyDetails: "", fromName: "", fromEmail: "", fromAddress: "", toName: "", toEmail: "", toAddress: "", items: [{ id: uuidv4(), description: "", quantity: 1, price: 0 }], notes: "", taxRate: 0, currency: "USD", }) const handleInvoiceChange = (field: string, value: string | number) => { setInvoiceData({ ...invoiceData, [field]: value }) } const handleItemChange = (id: string, field: string, value: string | number) => { const updatedItems = invoiceData.items.map((item) => { if (item.id === id) { return { ...item, [field]: field === "quantity" || field === "price" ? Number(value) : value } } return item }) setInvoiceData({ ...invoiceData, items: updatedItems }) } const addItem = () => { setInvoiceData({ ...invoiceData, items: [...invoiceData.items, { id: uuidv4(), description: "", quantity: 1, price: 0 }], }) } const removeItem = (id: string) => { if (invoiceData.items.length > 1) { setInvoiceData({ ...invoiceData, items: invoiceData.items.filter((item) => item.id !== id), }) } } const calculateSubtotal = () => { return invoiceData.items.reduce((sum, item) => sum + item.quantity * item.price, 0) } const calculateTax = () => { return calculateSubtotal() * (invoiceData.taxRate / 100) } const calculateTotal = () => { return calculateSubtotal() + calculateTax() } const downloadPdf = async () => { if (invoiceRef.current) { const canvas = await html2canvas(invoiceRef.current, { scale: 2, useCORS: true, logging: false, }) const imgData = canvas.toDataURL("image/png") const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4", }) const imgWidth = 210 const imgHeight = (canvas.height * imgWidth) / canvas.width pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight) pdf.save(`invoice-${invoiceData.invoiceNumber}.pdf`) } } const handleLogoUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onloadend = () => { setInvoiceData({ ...invoiceData, companyLogo: reader.result as string, }) } reader.readAsDataURL(file) } } return (

Edit Invoice Preview

) } [V0_FILE]typescriptreact:file="components/invoice-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Trash2, Plus } from "lucide-react" import type { InvoiceData } from "@/types/invoice" import { formatCurrency, currencies } from "@/lib/utils" interface InvoiceFormProps { invoiceData: InvoiceData handleInvoiceChange: (field: string, value: string | number) => void handleItemChange: (id: string, field: string, value: string | number) => void handleLogoUpload: (e: React.ChangeEvent) => void addItem: () => void removeItem: (id: string) => void calculateSubtotal: () => number calculateTax: () => number calculateTotal: () => number } export default function InvoiceForm({ invoiceData, handleInvoiceChange, handleItemChange, handleLogoUpload, addItem, removeItem, calculateSubtotal, calculateTax, calculateTotal, }: InvoiceFormProps) { return (

Invoice Details

Invoice Number handleInvoiceChange("invoiceNumber", e.target.value)} />

Date handleInvoiceChange("date", e.target.value)} />

Due Date handleInvoiceChange("dueDate", e.target.value)} />

Currency

Tax Rate (%) handleInvoiceChange("taxRate", Number.parseFloat(e.target.value) || 0)} />

Company Information

Company Name handleInvoiceChange("companyName", e.target.value)} />

Company Logo

{invoiceData.companyLogo && (

)}

Company Details

handleInvoiceChange("companyDetails", e.target.value)}
                    placeholder="Registration number, VAT ID, etc."
                  />
                </div>
              </div>
            </div>

<div>
              <h2 className="text-xl font-semibold mb-4">From</h2>
              <div className="space-y-4">
                <div>
                  <Label htmlFor="fromName">Name</Label>
                  <Input
                    id="fromName"
                    value={invoiceData.fromName}
                    onChange={(e) => handleInvoiceChange("fromName", e.target.value)}
                  />
                </div>
                <div>
                  <Label htmlFor="fromEmail">Email</Label>
                  <Input
                    id="fromEmail"
                    type="email"
                    value={invoiceData.fromEmail}
                    onChange={(e) => handleInvoiceChange("fromEmail", e.target.value)}
                  />
                </div>
                <div>
                  <Label htmlFor="fromAddress">Address</Label>
                  <Textarea
                    id="fromAddress"
                    value={invoiceData.fromAddress}
                    onChange={(e) => handleInvoiceChange("fromAddress", e.target.value)}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

<div className="mb-6">
          <h2 className="text-xl font-semibold mb-4">To</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="toName">Name</Label>
              <Input
                id="toName"
                value={invoiceData.toName}
                onChange={(e) => handleInvoiceChange("toName", e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="toEmail">Email</Label>
              <Input
                id="toEmail"
                type="email"
                value={invoiceData.toEmail}
                onChange={(e) => handleInvoiceChange("toEmail", e.target.value)}
              />
            </div>
            <div className="md:col-span-2">
              <Label htmlFor="toAddress">Address</Label>
              <Textarea
                id="toAddress"
                value={invoiceData.toAddress}
                onChange={(e) => handleInvoiceChange("toAddress", e.target.value)}
              />
            </div>
          </div>
        </div>

<h2 className="text-xl font-semibold mb-4">Items</h2>
        <div className="space-y-4">
          {invoiceData.items.map((item) => (
            <div key={item.id} className="grid grid-cols-12 gap-2 items-end">
              <div className="col-span-5">
                <Label htmlFor={`description-${item.id}`}>Description</Label>
                <Input
                  id={`description-${item.id}`}
                  value={item.description}
                  onChange={(e) => handleItemChange(item.id, "description", e.target.value)}
                />
              </div>
              <div className="col-span-2">
                <Label htmlFor={`quantity-${item.id}`}>Quantity</Label>
                <Input
                  id={`quantity-${item.id}`}
                  type="number"
                  min="1"
                  value={item.quantity}
                  onChange={(e) => handleItemChange(item.id, "quantity", Number.parseInt(e.target.value) || 0)}
                />
              </div>
              <div className="col-span-3">
                <Label htmlFor={`price-${item.id}`}>Price</Label>
                <Input
                  id={`price-${item.id}`}
                  type="number"
                  min="0"
                  step="0.01"
                  value={item.price}
                  onChange={(e) => handleItemChange(item.id, "price", Number.parseFloat(e.target.value) || 0)}
                />
              </div>
              <div className="col-span-1 flex items-center justify-center">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => removeItem(item.id)}
                  disabled={invoiceData.items.length <= 1}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
              <div className="col-span-1 text-right">
                {formatCurrency(item.quantity * item.price, invoiceData.currency)}
              </div>
            </div>
          ))}

<div className="mt-6 space-y-2">
            <div className="flex justify-between">
              <span>Subtotal:</span>
              <span>{formatCurrency(calculateSubtotal(), invoiceData.currency)}</span>
            </div>
            <div className="flex justify-between">
              <span>Tax ({invoiceData.taxRate}%):</span>
              <span>{formatCurrency(calculateTax(), invoiceData.currency)}</span>
            </div>
            <div className="flex justify-between font-bold">
              <span>Total:</span>
              <span>{formatCurrency(calculateTotal(), invoiceData.currency)}</span>
            </div>
          </div>
        </div>

<div className="mt-6">
          <Label htmlFor="notes">Notes</Label>
          <Textarea
            id="notes"
            value={invoiceData.notes}
            onChange={(e) => handleInvoiceChange("notes", e.target.value)}
            placeholder="Payment terms, bank details, etc."
          />
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="types/invoice.ts" isEdit="true" isMerged="true"
export interface LineItem {
  id: string
  description: string
  quantity: number
  price: number
}

export interface InvoiceData {
  invoiceNumber: string
  date: string
  dueDate: string
  companyName: string
  companyLogo: string
  companyDetails: string
  fromName: string
  fromEmail: string
  fromAddress: string
  toName: string
  toEmail: string
  toAddress: string
  items: LineItem[]
  notes: string
  taxRate: number
  currency: string
}

[V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatCurrency(amount: number, currency = "USD"): string {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: currency,
  }).format(amount)
}

export function formatDate(dateString: string): string {
  if (!dateString) return ""

const date = new Date(dateString)
  return new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date)
}

export const currencies = [
  { code: "USD", name: "US Dollar" },
  { code: "EUR", name: "Euro" },
  { code: "GBP", name: "British Pound" },
  { code: "JPY", name: "Japanese Yen" },
  { code: "CAD", name: "Canadian Dollar" },
  { code: "AUD", name: "Australian Dollar" },
  { code: "CHF", name: "Swiss Franc" },
  { code: "CNY", name: "Chinese Yuan" },
  { code: "INR", name: "Indian Rupee" },
  { code: "BRL", name: "Brazilian Real" },
  { code: "LKR", name: "Sri Lankan Rupee" },
]

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/invoice-preview.tsx" isEdit="true"
import type { InvoiceData } from "@/types/invoice"
import { formatCurrency, formatDate } from "@/lib/utils"

interface InvoicePreviewProps {
  invoiceData: InvoiceData
  calculateSubtotal: () => number
  calculateTax: () => number
  calculateTotal: () => number
}

export default function InvoicePreview({
  invoiceData,
  calculateSubtotal,
  calculateTax,
  calculateTotal,
}: InvoicePreviewProps) {
  return (
    <div className="bg-white p-8 min-h-[29.7cm] w-full">
      <div className="flex justify-between items-start mb-8">
        <div className="flex items-start gap-4">
          {invoiceData.companyLogo && (
            <div className="h-16 w-16 relative">
              <img
                src={invoiceData.companyLogo || "/placeholder.svg"}
                alt="Company Logo"
                className="h-full w-full object-contain"
              />
            </div>
          )}
          <div>
            {invoiceData.companyName && <h1 className="text-2xl font-bold text-gray-800">{invoiceData.companyName}</h1>}
            <h2 className="text-xl font-bold text-gray-800 mt-1">INVOICE</h2>
            <p className="text-gray-600">#{invoiceData.invoiceNumber}</p>
            {invoiceData.companyDetails && (
              <p className="text-sm text-gray-600 mt-2 whitespace-pre-line">{invoiceData.companyDetails}</p>
            )}
          </div>
        </div>
        <div className="text-right">
          <p className="font-semibold">Date: {formatDate(invoiceData.date)}</p>
          <p className="font-semibold">Due Date: {formatDate(invoiceData.dueDate)}</p>
        </div>
      </div>

<div className="grid grid-cols-2 gap-8 mb-8">
        <div>
          <h2 className="text-lg font-semibold text-gray-700 mb-2">From:</h2>
          <div className="text-gray-600">
            <p className="font-semibold">{invoiceData.fromName}</p>
            <p>{invoiceData.fromEmail}</p>
            <p className="whitespace-pre-line">{invoiceData.fromAddress}</p>
          </div>
        </div>
        <div>
          <h2 className="text-lg font-semibold text-gray-700 mb-2">To:</h2>
          <div className="text-gray-600">
            <p className="font-semibold">{invoiceData.toName}</p>
            <p>{invoiceData.toEmail}</p>
            <p className="whitespace-pre-line">{invoiceData.toAddress}</p>
          </div>
        </div>
      </div>

<table className="w-full mb-8 border-collapse">
        <thead>
          <tr className="border-b-2 border-gray-300">
            <th className="py-2 text-left">Description</th>
            <th className="py-2 text-right">Quantity</th>
            <th className="py-2 text-right">Price</th>
            <th className="py-2 text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          {invoiceData.items.map((item) => (
            <tr key={item.id} className="border-b border-gray-200">
              <td className="py-3">{item.description}</td>
              <td className="py-3 text-right">{item.quantity}</td>
              <td className="py-3 text-right">{formatCurrency(item.price, invoiceData.currency)}</td>
              <td className="py-3 text-right">{formatCurrency(item.quantity * item.price, invoiceData.currency)}</td>
            </tr>
          ))}
        </tbody>
      </table>

<div className="flex justify-end mb-8">
        <div className="w-64">
          <div className="flex justify-between py-2">
            <span>Subtotal:</span>
            <span>{formatCurrency(calculateSubtotal(), invoiceData.currency)}</span>
          </div>
          <div className="flex justify-between py-2 border-b border-gray-200">
            <span>Tax ({invoiceData.taxRate}%):</span>
            <span>{formatCurrency(calculateTax(), invoiceData.currency)}</span>
          </div>
          <div className="flex justify-between py-2 font-bold text-lg">
            <span>Total:</span>
            <span>{formatCurrency(calculateTotal(), invoiceData.currency)}</span>
          </div>
        </div>
      </div>

{invoiceData.notes && (
        <div className="mb-8">
          <h2 className="text-lg font-semibold text-gray-700 mb-2">Notes:</h2>
          <p className="text-gray-600 whitespace-pre-line">{invoiceData.notes}</p>
        </div>
      )}

<div className="text-center text-gray-500 text-sm mt-16 border-t pt-4">
        <p className="font-semibold mb-1">SYIGEN LTD</p>
        <p className="mb-1">www.syigen.com</p>
        <p>Thank you for your business!</p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Link from "next/link"
import InvoiceGenerator from "@/components/invoice-generator"

export default function Home() {
  return (
    <main className="container mx-auto py-10 px-4">
      <h1 className="text-3xl font-bold mb-6 text-center">Invoice Generator</h1>
      <InvoiceGenerator />
      <footer className="mt-10 text-center text-gray-500 text-sm pb-4">
        <p>
          © {new Date().getFullYear()}{" "}
          <Link
            href="https://syigen.com"
            target="_blank"
            rel="noopener noreferrer"
            className="font-semibold hover:text-gray-700 transition-colors"
          >
            SYIGEN LTD
          </Link>
          . All rights reserved.
        </p>
      </footer>
    </main>
  )
}
</article></body></html>

About

Tags

Share

More from dewmal

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dewmal

More Templates Like This