[V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.5% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom animations */ @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .bg-gradient-animate { background-size: 200% 200%; animation: gradient-shift 8s ease infinite; } /* Custom styles for inputs */ input:focus, textarea:focus { @apply ring-2 ring-blue-500/20 outline-none; } /* Improved mobile styles */ @media (max-width: 640px) { .table-container { @apply -mx-4; } .table-scroll { @apply overflow-x-auto pb-4; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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", }, boxShadow: { glow: "0 0 15px rgba(59, 130, 246, 0.5)", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isQuickEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export default Textarea
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Textarea from "@/components/ui/textarea"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Separator } from "@/components/ui/separator"
import {
  Plus,
  Trash2,
  Download,
  Building2,
  Upload,
  X,
  Edit,
  FileText,
  Calendar,
  ChevronUp,
  ChevronDown,
} from "lucide-react"
import jsPDF from "jspdf"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"

interface LineItem {
  id: string
  description: string
  quantity: number
  rate: number
  amount: number
}

interface InvoiceData {
  invoiceNumber: string
  date: string
  dueDate: string
  notes: string
  taxRate: number
  discount: number
}

interface ContractorDetails {
  id: string
  name: string
  address: string
  email: string
  phone: string
  invoice: InvoiceData
  lineItems: LineItem[]
}

interface CompanyDetails {
  name: string
  tagline: string
  logo: string | null
}

interface SavedInvoice {
  id: string
  invoiceNumber: string
  customerName: string
  date: string
  dueDate: string
  total: number
  status: "draft" | "sent" | "paid" | "overdue"
  pdfData: string // Base64 encoded PDF
  contractorData: ContractorDetails
  companyData: CompanyDetails
  createdAt: string
  updatedAt: string
  isPinned?: boolean
  isTemplate?: boolean
  templateName?: string
}

interface InvoiceTemplate {
  id: string
  name: string
  description: string
  contractorData: ContractorDetails
  companyData: CompanyDetails
  createdAt: string
}

const LOCAL_STORAGE_KEY = "invoiceGeneratorData"
const SAVED_INVOICES_KEY = "savedInvoices"
const TEMPLATES_KEY = "invoiceTemplates"

// Helper to create a new default contractor with initial invoice/line items
const createDefaultContractor = (): ContractorDetails => ({
  id: crypto.randomUUID(),
  name: "", // Changed from "New Customer" to empty string
  address: "",
  email: "",
  phone: "",
  invoice: {
    invoiceNumber: `INV-${crypto.randomUUID().slice(0, 8).toUpperCase()}`,
    date: new Date().toISOString().split("T")[0],
    dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
    notes: "",
    taxRate: 0,
    discount: 0,
  },
  lineItems: [
    {
      id: "1",
      description: "",
      quantity: 1,
      rate: 0,
      amount: 0,
    },
  ],
})

export default function InvoiceGenerator() {
  const [company, setCompany] = useState<CompanyDetails>({
    name: "",
    tagline: "",
    logo: null,
  })

const [contractors, setContractors] = useState<ContractorDetails[]>([])
  const [selectedContractorId, setSelectedContractorId] = useState<string | null>(null)
  const [savedInvoices, setSavedInvoices] = useState<SavedInvoice[]>([])
  const [templates, setTemplates] = useState<InvoiceTemplate[]>([])
  const [showInvoiceHistory, setShowInvoiceHistory] = useState(false)
  const [currentView, setCurrentView] = useState<"editor" | "history">("editor")
  const [historyPage, setHistoryPage] = useState(1)
  const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false)
  const [templateName, setTemplateName] = useState("")
  const [templateDescription, setTemplateDescription] = useState("")
  const ITEMS_PER_PAGE = 10
  const [searchQuery, setSearchQuery] = useState("")

// Derived state for the currently active contractor
  const selectedContractor = selectedContractorId ? contractors.find((c) => c.id === selectedContractorId) : null

const [isCustomerModalOpen, setIsCustomerModalOpen] = useState(false)
  const [editingCustomer, setEditingCustomer] = useState<ContractorDetails | null>(null)

const fileInputRef = useRef<HTMLInputElement>(null)

const [expandedSections, setExpandedSections] = useState({
    company: true,
    customer: true,
    invoice: true,
    lineItems: true,
    notes: true,
    summary: true,
  })

const formatDate = (dateString: string) => {
    const [year, month, day] = dateString.split("-").map(Number)
    const date = new Date(year, month - 1, day)
    return date.toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

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

const toggleSection = (section: keyof typeof expandedSections) => {
    setExpandedSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

// Load data from local storage on initial mount
  useEffect(() => {
    try {
      const savedData = localStorage.getItem(LOCAL_STORAGE_KEY)
      if (savedData) {
        const parsedData = JSON.parse(savedData)
        setCompany(parsedData.company || company)
        const loadedContractors = parsedData.contractors || []
        setContractors(loadedContractors)
        // Ensure a contractor is selected, or create a default one if none exist
        if (loadedContractors.length > 0) {
          setSelectedContractorId(parsedData.selectedContractorId || loadedContractors[0].id)
        } else {
          const defaultContractor = createDefaultContractor()
          setContractors([defaultContractor])
          setSelectedContractorId(defaultContractor.id)
        }
      } else {
        // If no data in local storage, create a fresh default contractor
        const defaultContractor = createDefaultContractor()
        setContractors([defaultContractor])
        setSelectedContractorId(defaultContractor.id)
      }

// Load saved invoices and templates
      const savedInvoicesData = localStorage.getItem(SAVED_INVOICES_KEY)
      if (savedInvoicesData) {
        setSavedInvoices(JSON.parse(savedInvoicesData))
      }

const templatesData = localStorage.getItem(TEMPLATES_KEY)
      if (templatesData) {
        setTemplates(JSON.parse(templatesData))
      }
    } catch (error) {
      console.error("Failed to load data from local storage:", error)
      localStorage.removeItem(LOCAL_STORAGE_KEY)
      localStorage.removeItem(SAVED_INVOICES_KEY)
      // Fallback to a fresh default contractor on error
      const defaultContractor = createDefaultContractor()
      setContractors([defaultContractor])
      setSelectedContractorId(defaultContractor.id)
    }
  }, [])

// Save data to local storage whenever relevant state changes
  useEffect(() => {
    const dataToSave = {
      company,
      contractors,
      selectedContractorId,
    }
    try {
      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(dataToSave))
    } catch (error) {
      console.error("Failed to save data to local storage:", error)
    }
  }, [company, contractors, selectedContractorId])

// Save invoices to local storage
  useEffect(() => {
    try {
      localStorage.setItem(SAVED_INVOICES_KEY, JSON.stringify(savedInvoices))
    } catch (error) {
      console.error("Failed to save invoices to local storage:", error)
    }
  }, [savedInvoices])

// Save templates to local storage
  useEffect(() => {
    try {
      localStorage.setItem(TEMPLATES_KEY, JSON.stringify(templates))
    } catch (error) {
      console.error("Failed to save templates to local storage:", error)
    }
  }, [templates])

// Helper to update the currently selected contractor's nested data
  const updateSelectedContractor = useCallback(
    (updater: (prev: ContractorDetails) => ContractorDetails) => {
      if (!selectedContractorId) return // Should not happen if initial state is handled correctly

setContractors((prevContractors) => prevContractors.map((c) => (c.id === selectedContractorId ? updater(c) : c)))
    },
    [selectedContractorId],
  )

const addLineItem = () => {
    updateSelectedContractor((prev) => ({
      ...prev,
      lineItems: [
        ...prev.lineItems,
        {
          id: Date.now().toString(),
          description: "",
          quantity: 1,
          rate: 0,
          amount: 0,
        },
      ],
    }))
  }

const removeLineItem = (id: string) => {
    updateSelectedContractor((prev) => {
      const updatedLineItems = prev.lineItems.filter((item) => item.id !== id)
      // Ensure there's always at least one line item
      if (updatedLineItems.length === 0) {
        return {
          ...prev,
          lineItems: [{ id: "1", description: "", quantity: 1, rate: 0, amount: 0 }],
        }
      }
      return { ...prev, lineItems: updatedLineItems }
    })
  }

const updateLineItem = (id: string, field: keyof LineItem, value: string | number) => {
    updateSelectedContractor((prev) => ({
      ...prev,
      lineItems: prev.lineItems.map((item) => {
        if (item.id === id) {
          const updatedItem = { ...item, [field]: value }
          if (field === "quantity" || field === "rate") {
            updatedItem.amount = updatedItem.quantity * updatedItem.rate
          }
          return updatedItem
        }
        return item
      }),
    }))
  }

const handleLogoUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        setCompany({ ...company, logo: e.target?.result as string })
      }
      reader.readAsDataURL(file)
    }
  }

const removeLogo = () => {
    setCompany({ ...company, logo: null })
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const generateNewInvoiceNumber = () => {
    updateSelectedContractor((prev) => ({
      ...prev,
      invoice: {
        ...prev.invoice,
        invoiceNumber: `INV-${crypto.randomUUID().slice(0, 8).toUpperCase()}`,
      },
    }))
  }

const currentSubtotal = selectedContractor?.lineItems.reduce((sum, item) => sum + item.amount, 0) || 0
  const currentDiscountAmount = currentSubtotal * ((selectedContractor?.invoice.discount || 0) / 100)
  const currentDiscountedSubtotal = currentSubtotal - currentDiscountAmount
  const currentTaxAmount = currentDiscountedSubtotal * ((selectedContractor?.invoice.taxRate || 0) / 100)
  const currentTotal = currentDiscountedSubtotal + currentTaxAmount

const handleAddCustomer = () => {
    setEditingCustomer(createDefaultContractor()) // Start with a fresh default customer
    setIsCustomerModalOpen(true)
  }

const handleEditCustomer = () => {
    if (selectedContractor) {
      setEditingCustomer({ ...selectedContractor }) // Clone for editing
      setIsCustomerModalOpen(true)
    }
  }

const handleDeleteCustomer = () => {
    if (selectedContractorId) {
      const updatedContractors = contractors.filter((c) => c.id !== selectedContractorId)
      setContractors(updatedContractors)
      // Select a new contractor or create a default one if none left
      if (updatedContractors.length > 0) {
        setSelectedContractorId(updatedContractors[0].id)
      } else {
        const defaultContractor = createDefaultContractor()
        setContractors([defaultContractor])
        setSelectedContractorId(defaultContractor.id)
      }
    }
  }

const handleSaveCustomer = (customer: ContractorDetails) => {
    if (contractors.some((c) => c.id === customer.id)) {
      // Editing existing customer
      setContractors(contractors.map((c) => (c.id === customer.id ? customer : c)))
    } else {
      // Adding new customer
      setContractors([...contractors, customer])
      setSelectedContractorId(customer.id) // Select the newly added customer
    }
    setIsCustomerModalOpen(false)
    setEditingCustomer(null)
  }

const saveForLater = useCallback(() => {
    if (!selectedContractor) return

const now = new Date().toISOString()
    const savedInvoice: SavedInvoice = {
      id: crypto.randomUUID(),
      invoiceNumber: selectedContractor.invoice.invoiceNumber,
      customerName: selectedContractor.name || "Unnamed Customer",
      date: selectedContractor.invoice.date,
      dueDate: selectedContractor.invoice.dueDate,
      total: currentTotal,
      status: "draft",
      pdfData: "", // No PDF data for save for later
      contractorData: { ...selectedContractor },
      companyData: { ...company },
      createdAt: now,
      updatedAt: now,
      isPinned: false,
      isTemplate: false,
    }

setSavedInvoices((prev) => {
      const filtered = prev.filter((inv) => inv.invoiceNumber !== selectedContractor.invoice.invoiceNumber)
      return [savedInvoice, ...filtered]
    })
  }, [selectedContractor, company, currentTotal])

const togglePinInvoice = (invoiceId: string) => {
    setSavedInvoices((prev) => prev.map((inv) => (inv.id === invoiceId ? { ...inv, isPinned: !inv.isPinned } : inv)))
  }

const saveAsTemplate = () => {
    if (!selectedContractor || !templateName.trim()) return

const template: InvoiceTemplate = {
      id: crypto.randomUUID(),
      name: templateName.trim(),
      description: templateDescription.trim(),
      contractorData: { ...selectedContractor },
      companyData: { ...company },
      createdAt: new Date().toISOString(),
    }

setTemplates((prev) => [template, ...prev])
    setIsTemplateModalOpen(false)
    setTemplateName("")
    setTemplateDescription("")
  }

const loadTemplate = (template: InvoiceTemplate) => {
    // Create a new contractor with template data but new ID and invoice number
    const newContractor = {
      ...template.contractorData,
      id: crypto.randomUUID(),
      invoice: {
        ...template.contractorData.invoice,
        invoiceNumber: `INV-${crypto.randomUUID().slice(0, 8).toUpperCase()}`,
        date: new Date().toISOString().split("T")[0],
        dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
      },
    }

setContractors((prev) => [newContractor, ...prev])
    setSelectedContractorId(newContractor.id)
    setCompany(template.companyData)
    setCurrentView("editor")
  }

const deleteTemplate = (templateId: string) => {
    setTemplates((prev) => prev.filter((template) => template.id !== templateId))
  }

// Pagination logic with search
  const filteredInvoices = savedInvoices.filter((invoice) => {
    if (!searchQuery.trim()) return true
    const query = searchQuery.toLowerCase()
    return invoice.invoiceNumber.toLowerCase().includes(query) || invoice.customerName.toLowerCase().includes(query)
  })

const sortedInvoices = [...filteredInvoices].sort((a, b) => {
    if (a.isPinned && !b.isPinned) return -1
    if (!a.isPinned && b.isPinned) return 1
    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  })

const totalPages = Math.ceil(sortedInvoices.length / ITEMS_PER_PAGE)
  const paginatedInvoices = sortedInvoices.slice((historyPage - 1) * ITEMS_PER_PAGE, historyPage * ITEMS_PER_PAGE)

const saveInvoiceToHistory = useCallback(
    (pdfData: string) => {
      if (!selectedContractor) return

const now = new Date().toISOString()
      const savedInvoice: SavedInvoice = {
        id: crypto.randomUUID(),
        invoiceNumber: selectedContractor.invoice.invoiceNumber,
        customerName: selectedContractor.name || "Unnamed Customer",
        date: selectedContractor.invoice.date,
        dueDate: selectedContractor.invoice.dueDate,
        total: currentTotal,
        status: "draft",
        pdfData,
        contractorData: { ...selectedContractor },
        companyData: { ...company },
        createdAt: now,
        updatedAt: now,
        isPinned: false,
        isTemplate: false,
      }

setSavedInvoices((prev) => {
        const filtered = prev.filter((inv) => inv.invoiceNumber !== selectedContractor.invoice.invoiceNumber)
        return [savedInvoice, ...filtered]
      })
    },
    [selectedContractor, company, currentTotal],
  )

const generatePDF = useCallback(
    (saveToHistory = true) => {
      if (!selectedContractor) return // Cannot generate PDF without a selected contractor

const doc = new jsPDF()
      const pageHeight = doc.internal.pageSize.getHeight()
      const pageWidth = doc.internal.pageSize.getWidth()
      const rightMargin = 20
      const topMargin = 20

doc.setFont("helvetica")

// Invoice details (left side)
      doc.setFontSize(24)
      doc.setTextColor(40, 40, 40)
      doc.text("INVOICE", 20, 30)

doc.setFontSize(12)
      doc.setTextColor(100, 100, 100)
      doc.text(`Invoice #${selectedContractor.invoice.invoiceNumber}`, 20, 40)

doc.setFontSize(10)
      doc.setTextColor(100, 100, 100)
      doc.text("Invoice Date:", 20, 55)
      doc.text("Due Date:", 20, 63)

doc.setTextColor(40, 40, 40)
      doc.text(formatDate(selectedContractor.invoice.date), 50, 55)
      doc.text(formatDate(selectedContractor.invoice.dueDate), 50, 63)

const finalizePdfContent = () => {
        // Bill To section
        doc.setFontSize(12)
        doc.setTextColor(40, 40, 40)
        doc.text("Bill To:", 20, 90)

doc.setFontSize(10)
        let yPos = 100
        if (selectedContractorId === "quick-invoice") {
          doc.text("Customer Name", 20, yPos)
          yPos += 8
          doc.text("Customer Address", 20, yPos)
          yPos += 8
          doc.text("customer@email.com", 20, yPos)
          yPos += 8
          doc.text("(555) 123-4567", 20, yPos)
          yPos += 8
        } else {
          if (selectedContractor.name) {
            doc.text(selectedContractor.name, 20, yPos)
            yPos += 8
          } else {
            doc.text("Customer Name", 20, yPos)
            yPos += 8
          }
          if (selectedContractor.address) {
            const addressLines = selectedContractor.address.split("\n")
            addressLines.forEach((line) => {
              doc.text(line, 20, yPos)
              yPos += 6
            })
            yPos += 2
          }
          if (selectedContractor.email) {
            doc.text(selectedContractor.email, 20, yPos)
            yPos += 8
          }
          if (selectedContractor.phone) {
            doc.text(selectedContractor.phone, 20, yPos)
            yPos += 8
          }
        }

// Line items table
        yPos += 10
        doc.setFontSize(10)
        doc.setTextColor(100, 100, 100)

// Table headers
        doc.text("Description", 20, yPos)
        doc.text("Qty", 120, yPos)
        doc.text("Rate", 140, yPos)
        doc.text("Amount", 170, yPos)

// Table header line
        yPos += 2
        doc.setDrawColor(200, 200, 200)
        doc.line(20, yPos, 190, yPos)
        yPos += 8

// Table rows
        doc.setTextColor(40, 40, 40)
        selectedContractor.lineItems.forEach((item) => {
          if (item.description || item.quantity > 0 || item.rate > 0) {
            const description = item.description || "No description"
            const splitDescription = doc.splitTextToSize(description, 90)

doc.text(splitDescription, 20, yPos)
            doc.text(item.quantity.toString(), 120, yPos)
            doc.text(`$${item.rate.toFixed(2)}`, 140, yPos)
            doc.text(formatCurrency(item.amount), 170, yPos)

yPos += Math.max(8, splitDescription.length * 6)
          }
        })

// Totals section
        yPos += 10
        doc.setDrawColor(200, 200, 200)
        doc.line(120, yPos, 190, yPos)
        yPos += 8

doc.setFontSize(10)
        doc.setTextColor(100, 100, 100)
        doc.text("Subtotal:", 140, yPos)
        doc.setTextColor(40, 40, 40)
        doc.text(formatCurrency(currentSubtotal), 170, yPos)
        yPos += 8

if (selectedContractor.invoice.discount > 0) {
          doc.setTextColor(100, 100, 100)
          doc.text(`Discount (${selectedContractor.invoice.discount}%):`, 140, yPos)
          doc.setTextColor(220, 38, 127) // Red color for discount
          doc.text(`-${formatCurrency(currentDiscountAmount)}`, 170, yPos)
          doc.setTextColor(40, 40, 40) // Reset color
          yPos += 8
        }

if (selectedContractor.invoice.taxRate > 0) {
          doc.setTextColor(100, 100, 100)
          doc.text(`Tax (${selectedContractor.invoice.taxRate}%):`, 140, yPos)
          doc.setTextColor(40, 40, 40)
          doc.text(formatCurrency(currentTaxAmount), 170, yPos)
          yPos += 8
        }

// Total line
        doc.setDrawColor(200, 200, 200)
        doc.line(120, yPos, 190, yPos)
        yPos += 8

doc.setFontSize(12)
        doc.setTextColor(40, 40, 40)
        doc.text("Total:", 140, yPos)
        doc.setFont("helvetica", "bold")
        doc.text(formatCurrency(currentTotal), 170, yPos)

// Notes section
        if (selectedContractor.invoice.notes) {
          yPos += 20
          doc.setFont("helvetica", "normal")
          doc.setFontSize(10)
          doc.setTextColor(100, 100, 100)
          doc.text("Notes:", 20, yPos)
          yPos += 8

doc.setTextColor(40, 40, 40)
          const noteLines = doc.splitTextToSize(selectedContractor.invoice.notes, 170)
          doc.text(noteLines, 20, yPos)
        }

// Save to history if requested
        if (saveToHistory) {
          const pdfData = doc.output("datauristring")
          saveInvoiceToHistory(pdfData)
        }

doc.save(`invoice-${selectedContractor.invoice.invoiceNumber}.pdf`)
      }

const logoWidth = 15 // mm
      const logoHeight = 15 // mm
      const logoX = pageWidth - rightMargin - logoWidth
      const logoY = topMargin

if (company.logo) {
        const img = new Image()
        img.crossOrigin = "anonymous"
        img.onload = () => {
          try {
            const canvas = document.createElement("canvas")
            const ctx = canvas.getContext("2d")

const MAX_LOGO_DIMENSION = 150

let width = img.width
            let height = img.height

if (width > height) {
              if (width > MAX_LOGO_DIMENSION) {
                height *= MAX_LOGO_DIMENSION / width
                width = MAX_LOGO_DIMENSION
              }
            } else {
              if (height > MAX_LOGO_DIMENSION) {
                width *= MAX_LOGO_DIMENSION / height
                height = MAX_LOGO_DIMENSION
              }
            }

canvas.width = width
            canvas.height = height
            ctx?.drawImage(img, 0, 0, width, height)

const imgData = canvas.toDataURL("image/png")

doc.addImage(imgData, "PNG", logoX, logoY, logoWidth, logoHeight)

doc.setFontSize(12)
            doc.setTextColor(40, 40, 40)
            doc.text(company.name, pageWidth - rightMargin, logoY + logoHeight + 5, {
              align: "right",
            })

doc.setFontSize(9)
            doc.setTextColor(100, 100, 100)
            doc.text(company.tagline, pageWidth - rightMargin, logoY + logoHeight + 10, {
              align: "right",
            })

finalizePdfContent()
          } catch (error) {
            console.error("Error drawing logo to canvas or PDF:", error)
            doc.setFontSize(12)
            doc.setTextColor(40, 40, 40)
            doc.text(company.name, pageWidth - rightMargin, logoY + logoHeight + 5, {
              align: "right",
            })
            doc.setFontSize(9)
            doc.setTextColor(100, 100, 100)
            doc.text(company.tagline, pageWidth - rightMargin, logoY + logoHeight + 10, {
              align: "right",
            })
            finalizePdfContent()
          }
        }
        img.onerror = (error) => {
          console.error("Error loading logo image:", error)
          doc.setFontSize(12)
          doc.setTextColor(40, 40, 40)
          doc.text(company.name, pageWidth - rightMargin, logoY + logoHeight + 5, {
            align: "right",
          })
          doc.setFontSize(9)
          doc.setTextColor(100, 100, 100)
          doc.text(company.tagline, pageWidth - rightMargin, logoY + logoHeight + 10, {
            align: "right",
          })
          finalizePdfContent()
        }
        img.src = company.logo
      } else {
        doc.setFontSize(16)
        doc.setTextColor(40, 40, 40)
        doc.text(company.name, pageWidth - rightMargin, topMargin + 10, { align: "right" })
        doc.setFontSize(10)
        doc.setTextColor(100, 100, 100)
        doc.text(company.tagline, pageWidth - rightMargin, topMargin + 18, {
          align: "right",
        })
        finalizePdfContent()
      }
    },
    [
      company,
      selectedContractor,
      currentSubtotal,
      currentDiscountAmount,
      currentTaxAmount,
      currentTotal,
      saveInvoiceToHistory,
      selectedContractorId,
    ],
  )

const loadInvoiceFromHistory = (savedInvoice: SavedInvoice) => {
    // Find or create the contractor
    let contractor = contractors.find((c) => c.id === savedInvoice.contractorData.id)
    if (!contractor) {
      setContractors((prev) => [...prev, savedInvoice.contractorData])
      contractor = savedInvoice.contractorData
    } else {
      // Update existing contractor with saved data
      setContractors((prev) => prev.map((c) => (c.id === contractor!.id ? savedInvoice.contractorData : c)))
    }

setSelectedContractorId(contractor.id)
    setCompany(savedInvoice.companyData)
    setShowInvoiceHistory(false)
  }

const deleteInvoiceFromHistory = (invoiceId: string) => {
    setSavedInvoices((prev) => prev.filter((inv) => inv.id !== invoiceId))
  }

const downloadSavedPDF = (savedInvoice: SavedInvoice) => {
    // Convert data URI to blob and download
    const link = document.createElement("a")
    link.href = savedInvoice.pdfData
    link.download = `invoice-${savedInvoice.invoiceNumber}.pdf`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

const getStatusColor = (status: SavedInvoice["status"]) => {
    switch (status) {
      case "draft":
        return "bg-gray-100 text-gray-800"
      case "sent":
        return "bg-blue-100 text-blue-800"
      case "paid":
        return "bg-green-100 text-green-800"
      case "overdue":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const updateInvoiceStatus = (invoiceId: string, status: SavedInvoice["status"]) => {
    setSavedInvoices((prev) =>
      prev.map((inv) => (inv.id === invoiceId ? { ...inv, status, updatedAt: new Date().toISOString() } : inv)),
    )
  }

// Check if we have any customers with actual data (not just empty defaults)
  const hasValidCustomers = contractors.some(
    (contractor) =>
      contractor.name.trim() !== "" ||
      contractor.email.trim() !== "" ||
      contractor.phone.trim() !== "" ||
      contractor.address.trim() !== "",
  )

return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
        {/* Navigation Header */}
        <Card className="border-0 shadow-md mb-8">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <h1 className="text-2xl font-bold text-gray-900">Invoicely </h1>
                <div className="flex gap-2">
                  <Button
                    className=""
                    variant={currentView === "editor" ? "default" : "outline"}
                    onClick={() => setCurrentView("editor")}
                    size="sm"
                  >
                    Editor
                  </Button>
                  <Button
                    variant={currentView === "history" ? "default" : "outline"}
                    onClick={() => setCurrentView("history")}
                    size="sm"
                  >
                    History
                    {savedInvoices.length > 0 && (
                      <Badge variant="secondary" className="ml-2">
                        {savedInvoices.length}
                      </Badge>
                    )}
                  </Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{currentView === "editor" ? (
          <div className="space-y-8">
            {/* Header */}
            <Card className="border-0 shadow-md overflow-hidden">
              <CardContent className="p-6 sm:p-8 relative">
                <div className="flex flex-col-reverse sm:flex-row sm:items-start justify-between gap-6">
                  {/* Invoice Title and Number (Left) */}
                  <div className="text-left">
                    <h2 className="text-3xl font-bold text-gray-900">INVOICE</h2>
                    <p className="text-gray-600 mt-1">#{selectedContractor?.invoice.invoiceNumber}</p>
                  </div>

{/* Company Details (Right) */}
                  <div className="flex flex-col items-start sm:items-end">
                    <div className="flex items-center gap-4 sm:flex-row-reverse">
                      {company.logo ? (
                        <div className="w-12 h-12 rounded-xl overflow-hidden shadow-lg flex-shrink-0">
                          <img
                            src={company.logo || "/placeholder.svg"}
                            alt="Company Logo"
                            className="w-full h-full object-cover"
                          />
                        </div>
                      ) : (
                        <div className="w-12 h-12 rounded-xl flex items-center justify-center bg-gradient-to-b from-blue-400 to-blue-600 shadow-lg transform transition-all duration-200 hover:scale-105 flex-shrink-0">
                          <Building2 className="w-6 h-6 text-white" />
                        </div>
                      )}
                      <div className="text-left sm:text-right">
                        <h1 className="text-2xl font-semibold text-gray-900 leading-tight">{company.name}</h1>
                        <p className="text-gray-600 mt-1">{company.tagline}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Templates Section */}
            {templates.length > 0 && (
              <Card className="border-0 shadow-md">
                <CardHeader className="pb-4">
                  <CardTitle className="text-lg font-medium text-gray-900">Quick Start Templates</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    {templates.slice(0, 6).map((template) => (
                      <div
                        key={template.id}
                        className="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"
                        onClick={() => loadTemplate(template)}
                      >
                        <div className="flex items-center justify-between">
                          <div>
                            <h3 className="font-medium text-gray-900">{template.name}</h3>
                            <p className="text-sm text-gray-600 mt-1">{template.description}</p>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={(e) => {
                              e.stopPropagation()
                              deleteTemplate(template.id)
                            }}
                            className="text-red-600 hover:text-red-700"
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

{/* Company Details */}
            <Card className="border-0 shadow-md">
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg font-medium text-gray-900">Company Information</CardTitle>
                  <Button variant="ghost" size="sm" onClick={() => toggleSection("company")} className="h-8 w-8 p-0">
                    {expandedSections.company ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                  </Button>
                </div>
              </CardHeader>
              {expandedSections.company && (
                <CardContent className="space-y-4 animate-in slide-in-from-top-2 duration-200">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="company-name" className="text-sm font-medium text-gray-700">
                        Company Name
                      </Label>
                      <Input
                        id="company-name"
                        value={company.name}
                        onChange={(e) => setCompany({ ...company, name: e.target.value })}
                        placeholder="Enter your company name"
                        className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                      />
                    </div>
                    <div>
                      <Label htmlFor="company-tagline" className="text-sm font-medium text-gray-700">
                        Tagline
                      </Label>
                      <Input
                        id="company-tagline"
                        value={company.tagline}
                        onChange={(e) => setCompany({ ...company, tagline: e.target.value })}
                        placeholder="Enter your company tagline"
                        className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                      />
                    </div>
                  </div>
                  <div>
                    <Label className="text-sm font-medium text-gray-700">Company Logo</Label>
                    <div className="mt-1 flex items-center gap-4">
                      {company.logo ? (
                        <div className="flex items-center gap-4">
                          <div className="w-16 h-16 rounded-lg overflow-hidden border border-gray-200">
                            <img
                              src={company.logo || "/placeholder.svg"}
                              alt="Company Logo"
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div className="flex gap-2">
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => fileInputRef.current?.click()}
                              className="border-gray-300"
                            >
                              <Upload className="w-4 h-4 mr-2" />
                              Change Logo
                            </Button>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={removeLogo}
                              className="border-gray-300 text-red-600 hover:text-red-700 bg-transparent"
                            >
                              <X className="w-4 h-4 mr-2" />
                              Remove
                            </Button>
                          </div>
                        </div>
                      ) : (
                        <Button
                          variant="outline"
                          onClick={() => fileInputRef.current?.click()}
                          className="border-gray-300 border-dashed h-16 px-6"
                        >
                          <Upload className="w-4 h-4 mr-2" />
                          Upload Logo
                        </Button>
                      )}
                      <input
                        ref={fileInputRef}
                        type="file"
                        accept="image/*"
                        onChange={handleLogoUpload}
                        className="hidden"
                      />
                    </div>
                    <p className="text-xs text-gray-500 mt-2">Recommended: Square image, max 2MB (PNG, JPG, SVG)</p>
                  </div>
                </CardContent>
              )}
            </Card>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
              {/* Contractor Details */}
              <Card className="border-0 shadow-md">
                <CardHeader className="pb-4">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg font-medium text-gray-900">Bill To</CardTitle>
                    <Button variant="ghost" size="sm" onClick={() => toggleSection("customer")} className="h-8 w-8 p-0">
                      {expandedSections.customer ? (
                        <ChevronUp className="w-4 h-4" />
                      ) : (
                        <ChevronDown className="w-4 h-4" />
                      )}
                    </Button>
                  </div>
                </CardHeader>
                {expandedSections.customer && (
                  <CardContent className="space-y-4 animate-in slide-in-from-top-2 duration-200">
                    <div>
                      <Label htmlFor="select-contractor" className="text-sm font-medium text-gray-700">
                        Select Customer
                      </Label>
                      <div className="flex gap-2 mt-1">
                        {hasValidCustomers ? (
                          <>
                            <Select onValueChange={setSelectedContractorId} value={selectedContractorId || ""}>
                              <SelectTrigger id="select-contractor" className="flex-1">
                                <SelectValue placeholder="Select a customer or create quick invoice" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="quick-invoice">Quick Invoice (No Customer)</SelectItem>
                                {contractors
                                  .filter(
                                    (c) =>
                                      c.name.trim() !== "" ||
                                      c.email.trim() !== "" ||
                                      c.phone.trim() !== "" ||
                                      c.address.trim() !== "",
                                  )
                                  .map((contractor) => (
                                    <SelectItem key={contractor.id} value={contractor.id}>
                                      {contractor.name || contractor.email || "Unnamed Customer"}
                                    </SelectItem>
                                  ))}
                              </SelectContent>
                            </Select>
                            <Button variant="outline" size="icon" onClick={handleAddCustomer} title="Add New Customer">
                              <Plus className="w-4 h-4" />
                            </Button>
                            <Button
                              variant="outline"
                              size="icon"
                              onClick={handleEditCustomer}
                              disabled={!selectedContractorId || selectedContractorId === "quick-invoice"}
                              title="Edit Selected Customer"
                            >
                              <Edit className="w-4 h-4" />
                            </Button>
                            <Button
                              variant="outline"
                              size="icon"
                              onClick={handleDeleteCustomer}
                              disabled={
                                !selectedContractorId ||
                                selectedContractorId === "quick-invoice" ||
                                contractors.filter(
                                  (c) =>
                                    c.name.trim() !== "" ||
                                    c.email.trim() !== "" ||
                                    c.phone.trim() !== "" ||
                                    c.address.trim() !== "",
                                ).length === 0
                              }
                              title="Delete Selected Customer"
                            >
                              <Trash2 className="w-4 h-4 text-red-500" />
                            </Button>
                          </>
                        ) : (
                          <div className="flex gap-2 w-full">
                            <Button
                              variant="outline"
                              onClick={() => setSelectedContractorId("quick-invoice")}
                              className="flex-1 border-gray-300 border-dashed h-12 bg-transparent"
                            >
                              <FileText className="w-4 h-4 mr-2" />
                              Create Quick Invoice
                            </Button>
                            <Button
                              variant="outline"
                              onClick={handleAddCustomer}
                              className="flex-1 border-gray-300 border-dashed h-12 bg-transparent"
                            >
                              <Plus className="w-4 h-4 mr-2" />
                              Add Your First Customer
                            </Button>
                          </div>
                        )}
                      </div>
                    </div>

{selectedContractorId === "quick-invoice" ? (
                      <div className="text-center py-8">
                        <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-4">
                          <FileText className="w-8 h-8 text-blue-600" />
                        </div>
                        <p className="text-gray-700 font-medium">Quick Invoice Mode</p>
                        <p className="text-gray-500 text-sm mt-1">Creating invoice without customer details</p>
                        <Button variant="outline" size="sm" onClick={handleAddCustomer} className="mt-3 bg-transparent">
                          <Plus className="w-4 h-4 mr-2" />
                          Add Customer Details
                        </Button>
                      </div>
                    ) : selectedContractor && hasValidCustomers ? (
                      <>
                        <div>
                          <Label className="text-sm font-medium text-gray-700">Name</Label>
                          <Input value={selectedContractor.name} disabled className="mt-1" />
                        </div>
                        <div>
                          <Label className="text-sm font-medium text-gray-700">Address</Label>
                          <Textarea value={selectedContractor.address} disabled className="mt-1 resize-none" rows={3} />
                        </div>
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                          <div>
                            <Label className="text-sm font-medium text-gray-700">Email</Label>
                            <Input value={selectedContractor.email} disabled className="mt-1" />
                          </div>
                          <div>
                            <Label className="text-sm font-medium text-gray-700">Phone</Label>
                            <Input value={selectedContractor.phone} disabled className="mt-1" />
                          </div>
                        </div>
                      </>
                    ) : (
                      <div className="text-center py-8">
                        <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
                          <Building2 className="w-8 h-8 text-gray-400" />
                        </div>
                        <p className="text-gray-500 text-sm">No customers added yet.</p>
                        <p className="text-gray-400 text-xs mt-1">Add your first customer or create a quick invoice.</p>
                      </div>
                    )}
                  </CardContent>
                )}
              </Card>

{/* Invoice Details */}
              <Card className="border-0 shadow-md">
                <CardHeader className="pb-4">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg font-medium text-gray-900">Invoice Details</CardTitle>
                    <Button variant="ghost" size="sm" onClick={() => toggleSection("invoice")} className="h-8 w-8 p-0">
                      {expandedSections.invoice ? (
                        <ChevronUp className="w-4 h-4" />
                      ) : (
                        <ChevronDown className="w-4 h-4" />
                      )}
                    </Button>
                  </div>
                </CardHeader>
                {expandedSections.invoice && (
                  <CardContent className="space-y-4 animate-in slide-in-from-top-2 duration-200">
                    <div className="flex gap-2">
                      <div className="flex-1">
                        <Label htmlFor="invoice-number" className="text-sm font-medium text-gray-700">
                          Invoice Number
                        </Label>
                        <Input
                          id="invoice-number"
                          value={selectedContractor?.invoice.invoiceNumber || ""}
                          onChange={(e) =>
                            updateSelectedContractor((prev) => ({
                              ...prev,
                              invoice: { ...prev.invoice, invoiceNumber: e.target.value },
                            }))
                          }
                          className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                        />
                      </div>
                      <div className="flex items-end">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={generateNewInvoiceNumber}
                          className="border-gray-300 hover:bg-gray-50 bg-transparent"
                          title="Generate new invoice number"
                        >
                          <Plus className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="invoice-date" className="text-sm font-medium text-gray-700">
                          Invoice Date
                        </Label>
                        <Input
                          id="invoice-date"
                          type="date"
                          value={selectedContractor?.invoice.date || ""}
                          onChange={(e) =>
                            updateSelectedContractor((prev) => ({
                              ...prev,
                              invoice: { ...prev.invoice, date: e.target.value },
                            }))
                          }
                          className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <Label htmlFor="due-date" className="text-sm font-medium text-gray-700">
                          Due Date
                        </Label>
                        <Input
                          id="due-date"
                          type="date"
                          value={selectedContractor?.invoice.dueDate || ""}
                          onChange={(e) =>
                            updateSelectedContractor((prev) => ({
                              ...prev,
                              invoice: { ...prev.invoice, dueDate: e.target.value },
                            }))
                          }
                          className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                        />
                      </div>
                    </div>
                    <div>
                      <Label htmlFor="tax-rate" className="text-sm font-medium text-gray-700">
                        Tax Rate (%)
                      </Label>
                      <Input
                        id="tax-rate"
                        type="number"
                        value={selectedContractor?.invoice.taxRate || 0}
                        onChange={(e) =>
                          updateSelectedContractor((prev) => ({
                            ...prev,
                            invoice: { ...prev.invoice, taxRate: Number(e.target.value) },
                          }))
                        }
                        placeholder="0"
                        className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                        min="0"
                        max="100"
                        step="0.01"
                      />
                    </div>
                    <div>
                      <Label htmlFor="discount" className="text-sm font-medium text-gray-700">
                        Discount (%)
                      </Label>
                      <Input
                        id="discount"
                        type="number"
                        value={selectedContractor?.invoice.discount || 0}
                        onChange={(e) =>
                          updateSelectedContractor((prev) => ({
                            ...prev,
                            invoice: { ...prev.invoice, discount: Number(e.target.value) },
                          }))
                        }
                        placeholder="0"
                        className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                        min="0"
                        max="100"
                        step="0.01"
                      />
                    </div>
                  </CardContent>
                )}
              </Card>
            </div>

{/* Line Items */}
            <Card className="border-0 shadow-md">
              <CardHeader className="pb-4">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                  <div className="flex items-center gap-2">
                    <CardTitle className="text-lg font-medium text-gray-900">Line Items</CardTitle>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => toggleSection("lineItems")}
                      className="h-8 w-8 p-0"
                    >
                      {expandedSections.lineItems ? (
                        <ChevronUp className="w-4 h-4" />
                      ) : (
                        <ChevronDown className="w-4 h-4" />
                      )}
                    </Button>
                  </div>
                  {expandedSections.lineItems && (
                    <Button
                      onClick={addLineItem}
                      size="sm"
                      className="bg-gradient-to-b from-blue-400 to-blue-600 hover:from-blue-500 hover:to-blue-700 text-white shadow-md transition-all duration-200"
                    >
                      <Plus className="w-4 h-4 mr-2" />
                      Add Item
                    </Button>
                  )}
                </div>
              </CardHeader>
              {expandedSections.lineItems && (
                <CardContent className="animate-in slide-in-from-top-2 duration-200">
                  <div className="overflow-x-auto -mx-4 sm:-mx-6">
                    <div className="inline-block min-w-full align-middle px-4 sm:px-6">
                      <Table>
                        <TableHeader>
                          <TableRow className="border-gray-200">
                            <TableHead className="text-gray-700 font-medium">Description</TableHead>
                            <TableHead className="text-gray-700 font-medium w-20 sm:w-24">Qty</TableHead>
                            <TableHead className="text-gray-700 font-medium w-28 sm:w-32">Price/Rate</TableHead>
                            <TableHead className="text-gray-700 font-medium w-28 sm:w-32">Amount</TableHead>
                            <TableHead className="w-10 sm:w-12"></TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {selectedContractor?.lineItems.map((item) => (
                            <TableRow key={item.id} className="border-gray-200">
                              <TableCell className="py-3">
                                <Input
                                  value={item.description}
                                  onChange={(e) => updateLineItem(item.id, "description", e.target.value)}
                                  placeholder="Description of work performed"
                                  className="border-0 p-0 h-auto focus-visible:ring-0 focus:border-0"
                                />
                              </TableCell>
                              <TableCell className="py-3">
                                <Input
                                  type="number"
                                  value={item.quantity}
                                  onChange={(e) => updateLineItem(item.id, "quantity", Number(e.target.value))}
                                  className="border-0 p-0 h-auto focus-visible:ring-0 focus:border-0"
                                  min="0"
                                  step="0.01"
                                />
                              </TableCell>
                              <TableCell className="py-3">
                                <Input
                                  type="number"
                                  value={item.rate}
                                  onChange={(e) => updateLineItem(item.id, "rate", Number(e.target.value))}
                                  className="border-0 p-0 h-auto focus-visible:ring-0 focus:border-0"
                                  placeholder="0.00"
                                  min="0"
                                  step="0.01"
                                />
                              </TableCell>
                              <TableCell className="font-medium py-3">{formatCurrency(item.amount)}</TableCell>
                              <TableCell className="py-3">
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => removeLineItem(item.id)}
                                  disabled={selectedContractor.lineItems.length === 1}
                                  className="h-8 w-8 p-0 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-full"
                                >
                                  <Trash2 className="w-4 h-4" />
                                </Button>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                  </div>
                </CardContent>
              )}
            </Card>

{/* Notes */}
            <Card className="border-0 shadow-md">
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg font-medium text-gray-900">Notes & Terms</CardTitle>
                  <Button variant="ghost" size="sm" onClick={() => toggleSection("notes")} className="h-8 w-8 p-0">
                    {expandedSections.notes ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                  </Button>
                </div>
              </CardHeader>
              {expandedSections.notes && (
                <CardContent className="animate-in slide-in-from-top-2 duration-200">
                  <Textarea
                    value={selectedContractor?.invoice.notes || ""}
                    onChange={(e) =>
                      updateSelectedContractor((prev) => ({
                        ...prev,
                        invoice: { ...prev.invoice, notes: e.target.value },
                      }))
                    }
                    placeholder="Payment terms, additional notes, or special instructions..."
                    rows={6}
                    className="resize-none border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  />
                </CardContent>
              )}
            </Card>

{/* Totals */}
            <Card className="border-0 shadow-md">
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg font-medium text-gray-900">Summary</CardTitle>
                  <Button variant="ghost" size="sm" onClick={() => toggleSection("summary")} className="h-8 w-8 p-0">
                    {expandedSections.summary ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                  </Button>
                </div>
              </CardHeader>
              {expandedSections.summary && (
                <CardContent className="space-y-4 animate-in slide-in-from-top-2 duration-200">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Subtotal</span>
                    <span className="font-medium">{formatCurrency(currentSubtotal)}</span>
                  </div>
                  {selectedContractor?.invoice.discount > 0 && (
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Discount ({selectedContractor.invoice.discount}%)</span>
                      <span className="font-medium text-red-600">-{formatCurrency(currentDiscountAmount)}</span>
                    </div>
                  )}
                  {selectedContractor?.invoice.taxRate > 0 && (
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Tax ({selectedContractor.invoice.taxRate}%)</span>
                      <span className="font-medium">{formatCurrency(currentTaxAmount)}</span>
                    </div>
                  )}
                  <Separator className="bg-gray-200" />
                  <div className="flex justify-between items-center">
                    <span className="text-lg font-semibold text-gray-900">Total</span>
                    <span className="text-lg font-bold text-gray-900">{formatCurrency(currentTotal)}</span>
                  </div>
                </CardContent>
              )}
            </Card>

{/* Action Buttons */}
            <Card className="border-0 shadow-md">
              <CardContent className="p-6">
                <div className="flex flex-col sm:flex-row gap-4 justify-end">
                  <Button
                    variant="outline"
                    onClick={saveForLater}
                    disabled={!selectedContractor && selectedContractorId !== "quick-invoice"}
                    className="border-gray-300 hover:bg-gray-50 bg-transparent"
                  >
                    Save for Later
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() => setIsTemplateModalOpen(true)}
                    disabled={!selectedContractor && selectedContractorId !== "quick-invoice"}
                    className="border-gray-300 hover:bg-gray-50 bg-transparent"
                  >
                    Save as Template
                  </Button>
                  <Button
                    variant="outline"
                    className="flex items-center border-gray-300 hover:bg-gray-50 transition-colors duration-200 text-slate-50 bg-blue-600"
                    onClick={() => generatePDF(true)}
                    disabled={!selectedContractor && selectedContractorId !== "quick-invoice"}
                  >
                    <Download className="w-4 h-4 mr-2" />
                    Download & Save PDF
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        ) : (
          /* History View */
          <div className="space-y-6">
            <Card className="border-0 shadow-md">
              <CardHeader className="pb-4">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                  <CardTitle className="text-lg font-medium text-gray-900">Invoice History</CardTitle>
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <Input
                        placeholder="Search by invoice # or customer name..."
                        value={searchQuery}
                        onChange={(e) => {
                          setSearchQuery(e.target.value)
                          setHistoryPage(1) // Reset to first page when searching
                        }}
                        className="w-64 pl-8"
                      />
                      <svg
                        className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                        />
                      </svg>
                    </div>
                    <div className="text-sm text-gray-600">
                      {searchQuery ? `${sortedInvoices.length} of ${savedInvoices.length}` : `${savedInvoices.length}`}{" "}
                      invoice{savedInvoices.length !== 1 ? "s" : ""}
                    </div>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                {savedInvoices.length === 0 ? (
                  <div className="text-center py-12">
                    <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-500">No saved invoices yet.</p>
                    <p className="text-gray-400 text-sm">Create your first invoice to see it here.</p>
                  </div>
                ) : (
                  <>
                    <div className="space-y-4">
                      {paginatedInvoices.map((invoice) => (
                        <div
                          key={invoice.id}
                          className={`flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 ${
                            invoice.isPinned ? "border-blue-200 bg-blue-50" : "border-gray-200"
                          }`}
                        >
                          <div className="flex items-center gap-4">
                            <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                              <FileText className="w-5 h-5 text-blue-600" />
                            </div>
                            <div>
                              <div className="flex items-center gap-2">
                                <h3 className="font-medium text-gray-900">#{invoice.invoiceNumber}</h3>
                                <Badge className={getStatusColor(invoice.status)}>{invoice.status}</Badge>
                                {invoice.isPinned && (
                                  <Badge variant="outline" className="text-blue-600 border-blue-200">
                                    Pinned
                                  </Badge>
                                )}
                                {invoice.isTemplate && (
                                  <Badge variant="outline" className="text-green-600 border-green-200">
                                    Template
                                  </Badge>
                                )}
                              </div>
                              <p className="text-sm text-gray-600">{invoice.customerName}</p>
                              <div className="flex items-center gap-4 text-xs text-gray-500 mt-1">
                                <span className="flex items-center gap-1">
                                  <Calendar className="w-3 h-3" />
                                  {formatDate(invoice.date)}
                                </span>
                                <span>{formatCurrency(invoice.total)}</span>
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => togglePinInvoice(invoice.id)}
                              title={invoice.isPinned ? "Unpin invoice" : "Pin invoice"}
                              className={invoice.isPinned ? "text-blue-600" : "text-gray-400"}
                            >
                              📌
                            </Button>
                            <Select
                              value={invoice.status}
                              onValueChange={(status) =>
                                updateInvoiceStatus(invoice.id, status as SavedInvoice["status"])
                              }
                            >
                              <SelectTrigger className="w-24 h-8 text-xs">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="draft">Draft</SelectItem>
                                <SelectItem value="sent">Sent</SelectItem>
                                <SelectItem value="paid">Paid</SelectItem>
                                <SelectItem value="overdue">Overdue</SelectItem>
                              </SelectContent>
                            </Select>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => loadInvoiceFromHistory(invoice)}
                              title="Load this invoice for editing"
                            >
                              <Edit className="w-4 h-4" />
                            </Button>
                            {invoice.pdfData && (
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => downloadSavedPDF(invoice)}
                                title="Download PDF"
                              >
                                <Download className="w-4 h-4" />
                              </Button>
                            )}
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => deleteInvoiceFromHistory(invoice.id)}
                              title="Delete invoice"
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>

{/* Pagination */}
                    {totalPages > 1 && (
                      <div className="flex items-center justify-between mt-6 pt-4 border-t border-gray-200">
                        <div className="text-sm text-gray-600">
                          Showing {(historyPage - 1) * ITEMS_PER_PAGE + 1} to{" "}
                          {Math.min(historyPage * ITEMS_PER_PAGE, sortedInvoices.length)} of {sortedInvoices.length}{" "}
                          {searchQuery ? "filtered " : ""}invoices
                        </div>
                        <div className="flex gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => setHistoryPage(historyPage - 1)}
                            disabled={historyPage === 1}
                          >
                            Previous
                          </Button>
                          <div className="flex gap-1">
                            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                              <Button
                                key={page}
                                variant={page === historyPage ? "default" : "outline"}
                                size="sm"
                                onClick={() => setHistoryPage(page)}
                                className="w-8 h-8 p-0"
                              >
                                {page}
                              </Button>
                            ))}
                          </div>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => setHistoryPage(historyPage + 1)}
                            disabled={historyPage === totalPages}
                          >
                            Next
                          </Button>
                        </div>
                      </div>
                    )}
                  </>
                )}
              </CardContent>
            </Card>
          </div>
        )}

{/* Template Modal */}
        <Dialog open={isTemplateModalOpen} onOpenChange={setIsTemplateModalOpen}>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Save as Template</DialogTitle>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="template-name" className="text-right">
                  Name
                </Label>
                <Input
                  id="template-name"
                  value={templateName}
                  onChange={(e) => setTemplateName(e.target.value)}
                  placeholder="Template name"
                  className="col-span-3"
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="template-description" className="text-right">
                  Description
                </Label>
                <Textarea
                  id="template-description"
                  value={templateDescription}
                  onChange={(e) => setTemplateDescription(e.target.value)}
                  placeholder="Optional description"
                  className="col-span-3 resize-none"
                  rows={3}
                />
              </div>
            </div>
            <DialogFooter>
              <Button onClick={saveAsTemplate} disabled={!templateName.trim()}>
                Save Template
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

{/* Customer Add/Edit Dialog */}
        <Dialog open={isCustomerModalOpen} onOpenChange={setIsCustomerModalOpen}>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>
                {editingCustomer?.id && contractors.some((c) => c.id === editingCustomer.id)
                  ? "Edit Customer"
                  : "Add New Customer"}
              </DialogTitle>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="customer-name" className="text-right">
                  Name
                </Label>
                <Input
                  id="customer-name"
                  value={editingCustomer?.name || ""}
                  onChange={(e) => setEditingCustomer((prev) => ({ ...prev!, name: e.target.value }))}
                  className="col-span-3"
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="customer-address" className="text-right">
                  Address
                </Label>
                <Textarea
                  id="customer-address"
                  value={editingCustomer?.address || ""}
                  onChange={(e) => setEditingCustomer((prev) => ({ ...prev!, address: e.target.value }))}
                  className="col-span-3 resize-none"
                  rows={3}
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="customer-email" className="text-right">
                  Email
                </Label>
                <Input
                  id="customer-email"
                  type="email"
                  value={editingCustomer?.email || ""}
                  onChange={(e) => setEditingCustomer((prev) => ({ ...prev!, email: e.target.value }))}
                  className="col-span-3"
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="customer-phone" className="text-right">
                  Phone
                </Label>
                <Input
                  id="customer-phone"
                  value={editingCustomer?.phone || ""}
                  onChange={(e) => setEditingCustomer((prev) => ({ ...prev!, phone: e.target.value }))}
                  className="col-span-3"
                />
              </div>
            </div>
            <DialogFooter>
              <Button onClick={() => handleSaveCustomer(editingCustomer!)} disabled={!editingCustomer?.name}>
                Save Customer
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from lightdev1

More Templates Like This

About

Tags

Share

About

Tags

Share

More from lightdev1

More Templates Like This