InvoicePro

• Status timeline
• Line items and totals
• Copy bank details
• Pay in place

• Customer portals and billing pages.

• Lists of invoices: use a data table.

Import it from @/components/blocks/invoice after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { Invoice } from "@/components/blocks/invoice";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <Invoice />
    </main>
  );
}

• The amount due is text; status is a badge with words.
• Copy and pay results are announced.

• Status steps fill; line items fade up; the badge flips to Paid.

• Parties stack on phones; the line-item table scrolls horizontally.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Generate PDFs on the server; wire the PDF button to that route.