[V0_FILE]typescriptreact:file="types/invoice.ts" isEdit="true" isMerged="true" export interface LineItem { id: string description: string quantity: number price: number currency: string exchangeRate: number discountType: "percentage" | "amount" discountValue: 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 footer: string discountType: "percentage" | "amount" discountValue: number applyInvoiceDiscountToDiscountedItems: boolean } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" isEdit="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" isFixed="true" isEdit="true" isQuickEdit="true" 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-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, currency: "USD", exchangeRate: 1, discountType: "percentage", discountValue: 0, }, ], notes: "", taxRate: 0, currency: "USD", footer: "Thank you for your business!", discountType: "percentage", discountValue: 0, applyInvoiceDiscountToDiscountedItems: true, }) const handleInvoiceChange = (field: string, value: string | number | boolean) => { if (field === "currency") { // When invoice currency changes, update all items with the same currency to have exchange rate 1 const updatedItems = invoiceData.items.map((item) => { if (item.currency === invoiceData.currency) { return { ...item, currency: value as string, exchangeRate: 1 } } return item }) setInvoiceData({ ...invoiceData, [field]: value, items: updatedItems }) } else { setInvoiceData({ ...invoiceData, [field]: value }) } } const handleItemChange = (id: string, field: string, value: string | number) => { const updatedItems = invoiceData.items.map((item) => { if (item.id === id) { if (field === "currency") { // If currency is changed to match invoice currency, reset exchange rate to 1 const exchangeRate = value === invoiceData.currency ? 1 : item.exchangeRate return { ...item, [field]: value, exchangeRate } } if (field === "quantity" || field === "price" || field === "exchangeRate" || field === "discountValue") { return { ...item, [field]: Number(value) || 0 } } return { ...item, [field]: value } } return item }) setInvoiceData({ ...invoiceData, items: updatedItems }) } const addItem = () => { setInvoiceData({ ...invoiceData, items: [ ...invoiceData.items, { id: uuidv4(), description: "", quantity: 1, price: 0, currency: invoiceData.currency, exchangeRate: 1, discountType: "percentage", discountValue: 0, }, ], }) } const removeItem = (id: string) => { if (invoiceData.items.length > 1) { setInvoiceData({ ...invoiceData, items: invoiceData.items.filter((item) => item.id !== id), }) } } const calculateItemDiscount = (item: (typeof invoiceData.items)[0]) => { const itemSubtotal = item.quantity * item.price if (item.discountValue <= 0) return 0 if (item.discountType === "percentage") { return itemSubtotal * (item.discountValue / 100) } else { return Math.min(item.discountValue, itemSubtotal) // Ensure discount doesn't exceed item subtotal } } const calculateItemTotal = (item: (typeof invoiceData.items)[0]) => { const itemSubtotal = item.quantity * item.price const itemDiscount = calculateItemDiscount(item) const itemNetTotal = itemSubtotal - itemDiscount return item.currency === invoiceData.currency ? itemNetTotal : itemNetTotal * item.exchangeRate } const calculateSubtotal = () => { return invoiceData.items.reduce((sum, item) => sum + calculateItemTotal(item), 0) } const calculateTotalItemDiscounts = () => { return invoiceData.items.reduce((sum, item) => { const itemDiscount = calculateItemDiscount(item) // Convert to invoice currency if needed return sum + (item.currency === invoiceData.currency ? itemDiscount : itemDiscount * item.exchangeRate) }, 0) } const calculateDiscount = () => { if (invoiceData.discountValue <= 0) return 0 let discountableAmount = 0 if (invoiceData.applyInvoiceDiscountToDiscountedItems) { // Apply discount to all items discountableAmount = calculateSubtotal() } else { // Apply discount only to items without their own discount discountableAmount = invoiceData.items.reduce((sum, item) => { if (item.discountValue > 0) return sum // Skip items with discount const itemTotal = item.quantity * item.price return sum + (item.currency === invoiceData.currency ? itemTotal : itemTotal * item.exchangeRate) }, 0) } if (invoiceData.discountType === "percentage") { return discountableAmount * (invoiceData.discountValue / 100) } else { return Math.min(invoiceData.discountValue, discountableAmount) // Ensure discount doesn't exceed subtotal } } const calculateTaxableAmount = () => { return calculateSubtotal() - calculateDiscount() } const calculateTax = () => { return calculateTaxableAmount() * (invoiceData.taxRate / 100) } const calculateTotal = () => { return calculateTaxableAmount() + 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" isFixed="true" isEdit="true" isQuickEdit="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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" 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 | boolean) => void handleItemChange: (id: string, field: string, value: string | number) => void handleLogoUpload: (e: React.ChangeEvent) => void addItem: () => void removeItem: (id: string) => void calculateItemDiscount: (item: (typeof invoiceData.items)[0]) => number calculateItemTotal: (item: (typeof invoiceData.items)[0]) => number calculateTotalItemDiscounts: () => number calculateSubtotal: () => number calculateDiscount: () => number calculateTaxableAmount: () => number calculateTax: () => number calculateTotal: () => number } export default function InvoiceForm({ invoiceData, handleInvoiceChange, handleItemChange, handleLogoUpload, addItem, removeItem, calculateItemDiscount, calculateItemTotal, calculateTotalItemDiscounts, calculateSubtotal, calculateDiscount, calculateTax, calculateTaxableAmount, 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)} />

Invoice Currency

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

Invoice Discount

handleInvoiceChange("discountType", value as "percentage" | "amount")} className="flex items-center gap-6" >

Percentage (%)

Amount

handleInvoiceChange("discountValue", Number.parseFloat(e.target.value) || 0)} placeholder={invoiceData.discountType === "percentage" ? "%" : invoiceData.currency} className="w-full" />

handleInvoiceChange("applyInvoiceDiscountToDiscountedItems", checked === true) } /> Apply invoice discount to already discounted items

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-6">
          {invoiceData.items.map((item) => (
            <div key={item.id} className="border rounded-md p-4">
              <div className="mb-4">
                <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="grid grid-cols-1 sm:grid-cols-12 gap-4 items-end">
                <div className="sm: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="sm: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="sm:col-span-3">
                  <Label htmlFor={`currency-${item.id}`}>Currency</Label>
                  <Select value={item.currency} onValueChange={(value) => handleItemChange(item.id, "currency", value)}>
                    <SelectTrigger id={`currency-${item.id}`}>
                      <SelectValue placeholder="Select currency" />
                    </SelectTrigger>
                    <SelectContent>
                      {currencies.map((currency) => (
                        <SelectItem key={currency.code} value={currency.code}>
                          {currency.code} - {currency.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                {item.currency !== invoiceData.currency && (
                  <div className="sm:col-span-3">
                    <Label htmlFor={`exchangeRate-${item.id}`} className="flex items-center gap-1">
                      Exchange Rate
                      <span className="text-xs text-muted-foreground whitespace-nowrap">
                        (1 {item.currency} = ? {invoiceData.currency})
                      </span>
                    </Label>
                    <Input
                      id={`exchangeRate-${item.id}`}
                      type="number"
                      min="0.000001"
                      step="0.000001"
                      value={item.exchangeRate}
                      onChange={(e) =>
                        handleItemChange(item.id, "exchangeRate", Number.parseFloat(e.target.value) || 0)
                      }
                    />
                  </div>
                )}
                <div className="sm:col-span-1 flex items-center justify-end">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => removeItem(item.id)}
                    disabled={invoiceData.items.length <= 1}
                    className="h-10 w-10"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>

<div className="mt-4">
                <Label>Item Discount</Label>
                <div className="mt-2">
                  <RadioGroup
                    value={item.discountType}
                    onValueChange={(value) =>
                      handleItemChange(item.id, "discountType", value as "percentage" | "amount")
                    }
                    className="flex items-center gap-4 mb-2"
                  >
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="percentage" id={`percentage-${item.id}`} />
                      <Label htmlFor={`percentage-${item.id}`} className="cursor-pointer">
                        Percentage (%)
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="amount" id={`amount-${item.id}`} />
                      <Label htmlFor={`amount-${item.id}`} className="cursor-pointer">
                        Amount
                      </Label>
                    </div>
                  </RadioGroup>
                  <Input
                    type="number"
                    min="0"
                    step={item.discountType === "percentage" ? "0.01" : "0.01"}
                    value={item.discountValue}
                    onChange={(e) => handleItemChange(item.id, "discountValue", Number.parseFloat(e.target.value) || 0)}
                    placeholder={item.discountType === "percentage" ? "%" : item.currency}
                    className="w-full"
                  />
                </div>
              </div>

<div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="text-right text-sm text-muted-foreground self-end">
                  {item.currency !== invoiceData.currency ? (
                    <>
                      {item.quantity} × {formatCurrency(item.price, item.currency)} ={" "}
                      {formatCurrency(item.quantity * item.price, item.currency)}
                      {item.discountValue > 0 && (
                        <>
                          <br />
                          <span className="text-black font-medium">
                            Discount: -{formatCurrency(calculateItemDiscount(item), item.currency)}
                          </span>
                        </>
                      )}
                      <br />
                      <span className="font-medium text-foreground">
                        {formatCurrency(calculateItemTotal(item), invoiceData.currency)}
                      </span>
                    </>
                  ) : (
                    <>
                      {item.quantity} × {formatCurrency(item.price, item.currency)} ={" "}
                      {formatCurrency(item.quantity * item.price, item.currency)}
                      {item.discountValue > 0 && (
                        <>
                          <br />
                          <span className="text-black font-medium">
                            Discount: -{formatCurrency(calculateItemDiscount(item), item.currency)}
                          </span>
                        </>
                      )}
                      <br />
                      <span className="font-medium text-foreground">
                        {formatCurrency(calculateItemTotal(item), invoiceData.currency)}
                      </span>
                    </>
                  )}
                </div>
              </div>
            </div>
          ))}

<div className="mt-6 border-t pt-4">
            <div className="flex flex-col gap-2 sm:w-72 ml-auto">
              <div className="flex justify-between">
                <span>Subtotal:</span>
                <span className="min-w-[100px] text-right">
                  {formatCurrency(calculateSubtotal(), invoiceData.currency)}
                </span>
              </div>

{calculateTotalItemDiscounts() > 0 && (
                <div className="flex justify-between text-black font-medium">
                  <span>Item Discounts:</span>
                  <span className="min-w-[100px] text-right">
                    -{formatCurrency(calculateTotalItemDiscounts(), invoiceData.currency)}
                  </span>
                </div>
              )}

{invoiceData.discountValue > 0 && (
                <div className="flex justify-between text-black font-medium">
                  <span>
                    Invoice Discount{" "}
                    {invoiceData.discountType === "percentage" ? `(${invoiceData.discountValue}%)` : ""}:
                    {!invoiceData.applyInvoiceDiscountToDiscountedItems && (
                      <span className="text-xs block text-muted-foreground">
                        (Applied only to non-discounted items)
                      </span>
                    )}
                  </span>
                  <span className="min-w-[100px] text-right">
                    -{formatCurrency(calculateDiscount(), invoiceData.currency)}
                  </span>
                </div>
              )}

<div className="flex justify-between">
                <span>Tax ({invoiceData.taxRate}%):</span>
                <span className="min-w-[100px] text-right">{formatCurrency(calculateTax(), invoiceData.currency)}</span>
              </div>
              <div className="flex justify-between font-bold border-t pt-2 mt-2">
                <span>Total:</span>
                <span className="min-w-[100px] text-right">
                  {formatCurrency(calculateTotal(), invoiceData.currency)}
                </span>
              </div>
            </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>

<div className="mt-6">
          <Label htmlFor="footer">Invoice Footer</Label>
          <Textarea
            id="footer"
            value={invoiceData.footer}
            onChange={(e) => handleInvoiceChange("footer", e.target.value)}
            placeholder="Company information, website, thank you message, etc."
          />
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Invoice Generator",
  description: "Generate professional invoices easily",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

--card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

--popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

--primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

--secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

--muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

--accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

--card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

--popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

--primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

--secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

--muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

--accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

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

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

[V0_FILE]typescriptreact:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true"
{
  "name": "invoice-generator",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "clsx": "^2.0.0",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "lucide-react": "^0.294.0",
    "next": "14.0.4",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.1.0",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/uuid": "^9.0.7",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

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

interface InvoicePreviewProps {
  invoiceData: InvoiceData
  calculateItemDiscount: (item: (typeof invoiceData.items)[0]) => number
  calculateItemTotal: (item: (typeof invoiceData.items)[0]) => number
  calculateTotalItemDiscounts: () => number
  calculateSubtotal: () => number
  calculateDiscount: () => number
  calculateTaxableAmount: () => number
  calculateTax: () => number
  calculateTotal: () => number
}

export default function InvoicePreview({
  invoiceData,
  calculateItemDiscount,
  calculateItemTotal,
  calculateTotalItemDiscounts,
  calculateSubtotal,
  calculateDiscount,
  calculateTaxableAmount,
  calculateTax,
  calculateTotal,
}: InvoicePreviewProps) {
  return (
    <div className="bg-white text-black p-8 min-h-[29.7cm] w-full">
      <div className="mb-8">
        {/* First row: Logo and Company Details */}
        <div className="flex justify-between items-start mb-6">
          <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>
          <div className="text-right">
            {invoiceData.companyName && <p className="font-bold">{invoiceData.companyName}</p>}
            {invoiceData.companyDetails && (
              <p className="text-sm text-black/70 whitespace-pre-line">{invoiceData.companyDetails}</p>
            )}
          </div>
        </div>

{/* Separator line */}
        <div className="w-full h-px bg-gray-200 my-6"></div>

{/* Second row: Invoice and Dates */}
        <div className="flex justify-between items-start">
          <div>
            <h1 className="text-2xl font-bold mb-1">INVOICE</h1>
            <p className="text-black/70">#{invoiceData.invoiceNumber}</p>
          </div>
          <div className="text-right">
            <p>Date: {formatDate(invoiceData.date)}</p>
            <p>Due Date: {formatDate(invoiceData.dueDate)}</p>
          </div>
        </div>

{/* Separator line */}
        {/* <div className="w-full h-px bg-gray-200 my-6"></div> */}
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-8 mb-8">
        <div>
          <h2 className="text-lg font-semibold mb-2">From:</h2>
          <div className="text-black/70">
            <p className="font-semibold">{invoiceData.fromName}</p>
            <p>{invoiceData.fromEmail}</p>
            <p className="whitespace-pre-line">{invoiceData.fromAddress}</p>
          </div>
        </div>
        <div className="mt-4 sm:mt-0">
          <h2 className="text-lg font-semibold mb-2">To:</h2>
          <div className="text-black/70">
            <p className="font-semibold">{invoiceData.toName}</p>
            <p>{invoiceData.toEmail}</p>
            <p className="whitespace-pre-line">{invoiceData.toAddress}</p>
          </div>
        </div>
      </div>

<div className="overflow-x-auto mb-8">
        <table className="w-full 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>
              {invoiceData.items.some((item) => item.currency !== invoiceData.currency) && (
                <th className="py-2 text-right">Currency</th>
              )}
              <th className="py-2 text-right">Discount</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, item.currency)}</td>
                {invoiceData.items.some((item) => item.currency !== invoiceData.currency) && (
                  <td className="py-3 text-right">
                    {item.currency}
                    {item.currency !== invoiceData.currency && (
                      <span className="text-xs text-black/50 block">Rate: {item.exchangeRate}</span>
                    )}
                  </td>
                )}
                <td className="py-3 text-right">
                  {item.discountValue > 0 ? (
                    <span className="text-black font-medium">
                      {item.discountType === "percentage"
                        ? `${item.discountValue}%`
                        : formatCurrency(item.discountValue, item.currency)}
                    </span>
                  ) : (
                    "-"
                  )}
                </td>
                <td className="py-3 text-right">
                  {item.currency !== invoiceData.currency ? (
                    <>
                      <span className="text-xs text-black/50 block">
                        {formatCurrency(item.quantity * item.price - calculateItemDiscount(item), item.currency)}
                      </span>
                      {formatCurrency(calculateItemTotal(item), invoiceData.currency)}
                    </>
                  ) : (
                    formatCurrency(calculateItemTotal(item), invoiceData.currency)
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

<div className="flex justify-end mb-8">
        <div className="w-full sm:w-64">
          <div className="flex justify-between py-2">
            <span>Subtotal:</span>
            <span>{formatCurrency(calculateSubtotal(), invoiceData.currency)}</span>
          </div>

{calculateTotalItemDiscounts() > 0 && (
            <div className="flex justify-between py-2 text-black font-medium">
              <span>Item Discounts:</span>
              <span>-{formatCurrency(calculateTotalItemDiscounts(), invoiceData.currency)}</span>
            </div>
          )}

{invoiceData.discountValue > 0 && (
            <div className="flex justify-between py-2 text-black font-medium">
              <span>
                Invoice Discount {invoiceData.discountType === "percentage" ? `(${invoiceData.discountValue}%)` : ""}:
                {!invoiceData.applyInvoiceDiscountToDiscountedItems && (
                  <span className="text-xs block text-black/50">(Applied only to non-discounted items)</span>
                )}
              </span>
              <span>-{formatCurrency(calculateDiscount(), 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 mb-2">Notes:</h2>
          <p className="text-black/70 whitespace-pre-line">{invoiceData.notes}</p>
        </div>
      )}

<div className="text-center text-black/50 text-sm mt-16 border-t border-gray-200 pt-4">
        <p className="whitespace-pre-line">{invoiceData.footer}</p>
      </div>
    </div>
  )
}
</article></body></html>

About

About