import { useState, useRef, useCallback } from “react”;
// ─── Constants ────────────────────────────────────────────────────────────────
const TEMPLATES = {
modern: { name: “Modern”, accent: “#6366f1”, headerBg: “#6366f1”, headerText: “#fff”, labelColor: “#6366f1”, borderRadius: “12px”, fontFamily: “‘Inter’, sans-serif” },
corporate: { name: “Corporate”, accent: “#1e40af”, headerBg: “#1e3a8a”, headerText: “#fff”, labelColor: “#1e40af”, borderRadius: “4px”, fontFamily: “‘Georgia’, serif” },
minimal: { name: “Minimal”, accent: “#374151”, headerBg: “#fff”, headerText: “#111827”, labelColor: “#6b7280”, borderRadius: “0px”, fontFamily: “‘Helvetica Neue’, sans-serif” },
professional: { name: “Professional”, accent: “#0f766e”, headerBg: “#134e4a”, headerText: “#fff”, labelColor: “#0f766e”, borderRadius: “8px”, fontFamily: “‘system-ui’, sans-serif” },
creative: { name: “Creative”, accent: “#7c3aed”, headerBg: “linear-gradient(135deg,#7c3aed 0%,#db2777 100%)”, headerText: “#fff”, labelColor: “#7c3aed”, borderRadius: “16px”, fontFamily: “‘system-ui’, sans-serif” },
};
const CURRENCIES = [
{ code: “USD”, symbol: “$”, name: “US Dollar” },
{ code: “EUR”, symbol: “€”, name: “Euro” },
{ code: “GBP”, symbol: “£”, name: “British Pound” },
{ code: “PKR”, symbol: “₨”, name: “Pakistani Rupee” },
{ code: “AED”, symbol: “د.إ”, name: “UAE Dirham” },
{ code: “SAR”, symbol: “﷼”, name: “Saudi Riyal” },
{ code: “INR”, symbol: “₹”, name: “Indian Rupee” },
{ code: “CAD”, symbol: “CA$”, name: “Canadian Dollar” },
];
const FAQ_DATA = [
{ q: “How do I create my first invoice?”, a: “Click ‘New Invoice’ in the sidebar. Fill in your business info, client details, add line items, then hit Save. Switch to Preview to see the final result and use Print/PDF to export.” },
{ q: “How do I download the invoice as PDF?”, a: “Go to the Preview tab and click ‘Print / Save as PDF’. Your browser’s print dialog will open — choose ‘Save as PDF’ as the destination to get a PDF file.” },
{ q: “Can I add my company logo?”, a: “Yes! In the Editor under ‘Your Business’, click the logo upload box. Supported formats are PNG, JPG, and SVG. The logo will appear on all invoice templates.” },
{ q: “What currencies are supported?”, a: “InvoicePro supports USD, EUR, GBP, PKR, AED, SAR, INR, and CAD. Select your currency in the Invoice Details section of the editor.” },
{ q: “How does per-item tax work?”, a: “Each line item has its own Tax % column. Enter the applicable tax rate for each item — the tax is calculated on that item’s subtotal and included in its Total column.” },
{ q: “Can I apply a discount to the whole invoice?”, a: “Yes. In Invoice Details, enter a Discount amount and choose between Percent (%) or Fixed amount. The discount is applied to the overall subtotal.” },
{ q: “How do I duplicate a line item?”, a: “In the line items table, each row has a copy icon on the right. Click it to instantly duplicate that item below the current row.” },
{ q: “Where are my invoices saved?”, a: “Invoices are saved in your browser’s memory for this session. Click the ‘Saved’ tab to view, load, or delete them. Note: they reset if you refresh the page.” },
{ q: “Can I switch templates after creating an invoice?”, a: “Absolutely. The Template picker at the top of the Editor lets you switch between Modern, Corporate, Minimal, Professional, and Creative — the live preview updates instantly.” },
{ q: “How do I mark an invoice as paid?”, a: “In the Preview tab, click ‘Mark as Paid’. You can also change the status directly in the Invoice Details section of the Editor using the Status dropdown.” },
];
const GUIDE_STEPS = [
{ icon: “🏢”, title: “Set up your business”, desc: “Fill in your business name, logo, email, phone, and address in the ‘Your Business’ section. This info appears on every invoice you create.”, tip: “Upload a high-resolution PNG or SVG logo for the sharpest print quality.” },
{ icon: “👤”, title: “Add client details”, desc: “Enter your client’s name, company, email, and address in the ‘Bill To’ section. These details identify who the invoice is for.”, tip: “Keep client names consistent across invoices for easier searching later.” },
{ icon: “📋”, title: “Configure invoice details”, desc: “Set the invoice number (auto-generated), date, due date, currency, and any discount. The due date is pre-set to 30 days from today.”, tip: “Use a consistent prefix like ‘INV-2024-‘ to keep invoices organised by year.” },
{ icon: “➕”, title: “Add line items”, desc: “Click ‘Add Item’ to add products or services. Each row has Name, Description, Quantity, Unit Price, and Tax %. Totals calculate automatically.”, tip: “Use the duplicate button (copy icon) to quickly clone a similar item row.” },
{ icon: “🎨”, title: “Pick a template”, desc: “Choose from 5 professional templates: Modern, Corporate, Minimal, Professional, and Creative. The live preview on the right updates instantly.”, tip: “The ‘Minimal’ template works best for simple freelance invoices.” },
{ icon: “💾”, title: “Save and export”, desc: “Click Save to store the invoice in this session. Switch to the Preview tab to see the final invoice, then use Print / Save as PDF to export.”, tip: “Use Ctrl+P (or Cmd+P on Mac) from the Preview tab for quick printing.” },
];
const genId = () => Math.random().toString(36).slice(2, 9);
const genInvNum = () => `INV-${new Date().getFullYear()}-${String(Math.floor(Math.random() * 9000) + 1000)}`;
const defaultItem = () => ({ id: genId(), name: “”, description: “”, qty: 1, price: 0, tax: 0 });
const defaultInvoice = () => ({
number: genInvNum(),
date: new Date().toISOString().split(“T”)[0],
dueDate: new Date(Date.now() + 30 * 86400000).toISOString().split(“T”)[0],
currency: “USD”, taxRate: 0, discount: 0, discountType: “percent”,
notes: “Thank you for your business!”, terms: “Payment is due within 30 days.”,
from: { name: “”, email: “”, phone: “”, address: “”, city: “”, country: “”, website: “” },
to: { name: “”, company: “”, email: “”, phone: “”, address: “”, city: “”, country: “” },
items: [defaultItem()], template: “modern”, status: “draft”, logo: null,
});
function formatCurrency(amount, currencyCode) {
const cur = CURRENCIES.find((c) => c.code === currencyCode) || CURRENCIES[0];
return `${cur.symbol}${Number(amount).toLocaleString(“en-US”, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}
function calcTotals(invoice) {
const subtotal = invoice.items.reduce((sum, item) => {
const lineTotal = Number(item.qty) * Number(item.price);
return sum + lineTotal + lineTotal * (Number(item.tax) / 100);
}, 0);
const discountAmt = invoice.discountType === “percent” ? subtotal * (Number(invoice.discount) / 100) : Number(invoice.discount);
return { subtotal, discountAmt, total: Math.max(0, subtotal – discountAmt) };
}
// ─── Form primitives ──────────────────────────────────────────────────────────
function Input({ label, value, onChange, type = “text”, placeholder, class= “”, dark }) {
const base = dark
? “border border-gray-600 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-gray-700 text-gray-100 placeholder-gray-400”
: “border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 placeholder-gray-400”;
return (
{label}}