"use client" /** * @name Table View 07 * @description Invoice and billing table with line items and totals row. * Professional invoice layout with subtotals, tax, and grand total. * * @slots table-view, table-view-container, table-view-card, table-view-header, * table-view-invoice-info, table-view-invoice-number, table-view-invoice-date, * table-view-client-info, table-view-client-name, table-view-client-address, * table-view-table-wrapper, table-view-table, table-view-thead, table-view-th, * table-view-tbody, table-view-row, table-view-cell, table-view-item-name, * table-view-item-description, table-view-tfoot, table-view-subtotal-row, * table-view-tax-row, table-view-total-row, table-view-total-label, * table-view-total-value * @variant invoice * * @dependencies lucide-react * @registryDependencies card button badge */ import * as React from "react" import { Printer, Download } from "lucide-react" import { Card, CardContent, CardHeader } from "@/registry/ui/card" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type InvoiceStatus = "paid" | "pending" | "overdue" interface InvoiceLineItem { id: string name: string description?: string quantity: number unitPrice: number total: number } interface InvoiceData { invoiceNumber: string date: string dueDate: string status: InvoiceStatus clientName: string clientAddress: string items: InvoiceLineItem[] subtotal: number taxRate: number taxAmount: number total: number } interface TableView07Props { invoice?: InvoiceData onPrint?: () => void onDownload?: () => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultInvoice: InvoiceData = { invoiceNumber: "INV-2024-001", date: "January 15, 2024", dueDate: "February 15, 2024", status: "pending", clientName: "Acme Corporation", clientAddress: "123 Business Ave, Suite 100\nNew York, NY 10001", items: [ { id: "item-1", name: "Web Development Services", description: "Custom website development and design", quantity: 40, unitPrice: 150, total: 6000 }, { id: "item-2", name: "UI/UX Design", description: "User interface design and prototyping", quantity: 20, unitPrice: 125, total: 2500 }, { id: "item-3", name: "SEO Optimization", description: "Search engine optimization package", quantity: 1, unitPrice: 800, total: 800 }, { id: "item-4", name: "Hosting Setup", description: "Cloud hosting configuration and deployment", quantity: 1, unitPrice: 350, total: 350 }, ], subtotal: 9650, taxRate: 8.5, taxAmount: 820.25, total: 10470.25, } const statusStyles: Record = { paid: "bg-muted text-foreground font-semibold", pending: "bg-primary/80 text-primary-foreground", overdue: "bg-muted text-muted-foreground font-semibold", } // ============================================================================ // COMPONENT // ============================================================================ function TableView07({ invoice = defaultInvoice, onPrint, onDownload, className, idBase = "table-view-07", }: TableView07Props) { const titleId = `${idBase}-title` const formatCurrency = (amount: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format(amount) } return (

{/* Top row with invoice info and actions */}

{invoice.invoiceNumber}

{invoice.status}

Issued: {invoice.date}

Due: {invoice.dueDate}

{/* Client info */}

Bill To

{invoice.clientName}

{invoice.clientAddress}

{invoice.items.map((item) => ( ))} {/* Subtotal */} {/* Tax */} {/* Total */}

Description	Qty	Unit Price	Amount
{item.name} {item.description && ( {item.description} )}	{item.quantity}	{formatCurrency(item.unitPrice)}	{formatCurrency(item.total)}
	Subtotal	Subtotal	{formatCurrency(invoice.subtotal)}	{formatCurrency(invoice.subtotal)}
	Tax ({invoice.taxRate}%)	Tax ({invoice.taxRate}%)	{formatCurrency(invoice.taxAmount)}	{formatCurrency(invoice.taxAmount)}
	Total Due	Total Due	{formatCurrency(invoice.total)}	{formatCurrency(invoice.total)}

) } export default TableView07 export { TableView07, type TableView07Props }