import { useMemo, useRef, useState } from "react";
import html2canvas from "html2canvas";
import { Download, CalendarDays, CircleDollarSign, BadgeCheck } from "lucide-react";
export default function ModernTechInvoice() {
const invoiceRef = useRef(null);
const [month, setMonth] = useState("March 2026");
const [amount, setAmount] = useState(900);
const [status, setStatus] = useState("Awaiting Payment");
const statusOptions = [
"Awaiting Payment",
"Paid",
"Partially Paid",
"Overdue",
"Processing",
];
const formattedAmount = useMemo(() => {
const safeAmount = Number.isFinite(amount) ? amount : 0;
return safeAmount;
}, [amount]);
const statusStyles = {
"Awaiting Payment": "border-amber-400/30 bg-amber-400/10 text-amber-300",
Paid: "border-emerald-400/30 bg-emerald-400/10 text-emerald-300",
"Partially Paid": "border-cyan-400/30 bg-cyan-400/10 text-cyan-300",
Overdue: "border-rose-400/30 bg-rose-400/10 text-rose-300",
Processing: "border-fuchsia-400/30 bg-fuchsia-400/10 text-fuchsia-300",
};
const generateAndDownloadImage = async () => {
if (!invoiceRef.current) return;
const canvas = await html2canvas(invoiceRef.current, {
backgroundColor: "#050816",
scale: 2,
useCORS: true,
});
const link = document.createElement("a");
link.download = `invoice-${month.toLowerCase().replace(/\s+/g, "-")}.png`;
link.href = canvas.toDataURL("image/png");
link.click();
};
return (
);
}
function InfoCard({ label, value }) {
return (
);
}
Invoice
Jerome Libao
CRM Builds
{status}
Billing Period
Invoice for {month}
Date
Amount
Status
03/31/2026
${formattedAmount.toFixed(2)}
{status}
Total Due
${formattedAmount.toFixed(0)}
Thank you for your business.
{label}
{value}