{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invoice-page",
  "title": "Invoice Page",
  "description": "Invoice layout with from/to addresses, line items table, subtotal/tax/shipping/total, and print button.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-table.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-button.json"
  ],
  "files": [
    {
      "path": "registry/new-york/invoice-page/blocks/invoice-page.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ninterface InvoiceItem {\n  id: string\n  quantity: number\n  description: string\n  serialNumber?: string\n  unitPrice: number\n}\n\ninterface InvoicePageProps extends React.HTMLAttributes<HTMLDivElement> {\n  invoiceNumber: string\n  date: string\n  dueDate?: string\n  from: {\n    name: string\n    address: string\n    phone?: string\n    email?: string\n  }\n  to: {\n    name: string\n    address: string\n    phone?: string\n    email?: string\n  }\n  items: InvoiceItem[]\n  paymentMethod?: string\n  taxRate?: number\n  shippingCost?: number\n  onPrint?: () => void\n}\n\nfunction InvoicePage({\n  className,\n  invoiceNumber,\n  date,\n  dueDate,\n  from,\n  to,\n  items,\n  paymentMethod = \"Credit Card\",\n  taxRate = 0,\n  shippingCost = 0,\n  onPrint,\n  ...props\n}: InvoicePageProps) {\n  const subtotal = items.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0)\n  const tax = subtotal * (taxRate / 100)\n  const total = subtotal + tax + shippingCost\n\n  return (\n    <div\n      className={cn(\"bg-white shadow-[0_1px_1px_rgba(0,0,0,0.1)] rounded-[3px]\", className)}\n      {...props}\n    >\n      {/* Header */}\n      <section className=\"p-[20px]\">\n        <div className=\"flex justify-between items-start mb-[20px]\">\n          <div>\n            <h2 className=\"text-[20px] m-0 mb-[5px]\">{from.name}</h2>\n            <div className=\"text-[14px] text-[#666]\">\n              {from.address && <div>{from.address}</div>}\n              {from.phone && <div>Phone: {from.phone}</div>}\n              {from.email && <div>Email: {from.email}</div>}\n            </div>\n          </div>\n          <div className=\"text-right\">\n            <h4 className=\"text-[14px] text-[#666] m-0\">\n              Invoice #{invoiceNumber}\n            </h4>\n            <div className=\"text-[14px] text-[#666]\">\n              <div>Date: {date}</div>\n              {dueDate && <div>Due: {dueDate}</div>}\n              <div>Payment: {paymentMethod}</div>\n            </div>\n          </div>\n        </div>\n\n        {/* To */}\n        <div className=\"mb-[20px]\">\n          <h4 className=\"text-[14px] text-[#666] mb-[5px]\">To:</h4>\n          <div className=\"text-[14px]\">\n            <strong>{to.name}</strong>\n            {to.address && <div>{to.address}</div>}\n            {to.phone && <div>Phone: {to.phone}</div>}\n            {to.email && <div>Email: {to.email}</div>}\n          </div>\n        </div>\n      </section>\n\n      {/* Items */}\n      <div className=\"px-[20px]\">\n        <table className=\"w-full border-collapse mb-[20px]\">\n          <thead>\n            <tr className=\"bg-[#f4f4f4]\">\n              <th className=\"text-left p-[8px] text-[14px] font-semibold border-b-[2px] border-b-[#f4f4f4]\">Qty</th>\n              <th className=\"text-left p-[8px] text-[14px] font-semibold border-b-[2px] border-b-[#f4f4f4]\">Product</th>\n              <th className=\"text-left p-[8px] text-[14px] font-semibold border-b-[2px] border-b-[#f4f4f4]\">Serial #</th>\n              <th className=\"text-right p-[8px] text-[14px] font-semibold border-b-[2px] border-b-[#f4f4f4]\">Subtotal</th>\n            </tr>\n          </thead>\n          <tbody>\n            {items.map((item) => (\n              <tr key={item.id}>\n                <td className=\"p-[8px] text-[14px] border-t border-t-[#f4f4f4]\">{item.quantity}</td>\n                <td className=\"p-[8px] text-[14px] border-t border-t-[#f4f4f4]\">{item.description}</td>\n                <td className=\"p-[8px] text-[14px] border-t border-t-[#f4f4f4]\">{item.serialNumber || \"-\"}</td>\n                <td className=\"p-[8px] text-[14px] border-t border-t-[#f4f4f4] text-right\">\n                  ${(item.quantity * item.unitPrice).toFixed(2)}\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Totals */}\n      <div className=\"px-[20px] pb-[20px]\">\n        <div className=\"flex justify-end\">\n          <div className=\"w-[250px]\">\n            <div className=\"flex justify-between py-[5px] text-[14px]\">\n              <span>Subtotal:</span>\n              <span>${subtotal.toFixed(2)}</span>\n            </div>\n            {taxRate > 0 && (\n              <div className=\"flex justify-between py-[5px] text-[14px]\">\n                <span>Tax ({taxRate}%):</span>\n                <span>${tax.toFixed(2)}</span>\n              </div>\n            )}\n            {shippingCost > 0 && (\n              <div className=\"flex justify-between py-[5px] text-[14px]\">\n                <span>Shipping:</span>\n                <span>${shippingCost.toFixed(2)}</span>\n              </div>\n            )}\n            <div className=\"flex justify-between py-[5px] text-[16px] font-bold border-t border-t-[#f4f4f4] mt-[5px] pt-[10px]\">\n              <span>Total:</span>\n              <span>${total.toFixed(2)}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Footer */}\n      <div className=\"p-[20px] bg-[#f4f4f4] rounded-b-[3px] flex justify-end gap-[5px]\">\n        <button\n          type=\"button\"\n          className=\"px-[12px] py-[6px] bg-[#f4f4f4] border border-[#ddd] text-[#444] rounded-[3px] text-[14px] cursor-pointer hover:bg-[#e7e7e7]\"\n          onClick={() => window.print()}\n        >\n          &#128424; Print\n        </button>\n        <button\n          type=\"button\"\n          className=\"px-[12px] py-[6px] bg-[#00a65a] border border-[#008d4c] text-white rounded-[3px] text-[14px] cursor-pointer hover:bg-[#008d4c]\"\n        >\n          Submit Payment\n        </button>\n      </div>\n    </div>\n  )\n}\n\nexport { InvoicePage }\nexport type { InvoicePageProps, InvoiceItem }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}