import React, { useState } from 'react'; import { Transaction } from '../types'; import { Printer, X } from 'lucide-react'; interface PrintInvoiceProps { transaction: Transaction; className?: string; } const PrintInvoice: React.FC = ({ transaction, className }) => { const [showPreview, setShowPreview] = useState(false); const formatINR = (v: number) => `₹${v.toFixed(2)}`; const formatDate = (dateStr: string) => { const date = new Date(dateStr); return date.toLocaleDateString('en-IN', { day: '2-digit', month: '2-digit', year: 'numeric' }); }; // Calculate totals const subtotal = transaction.subtotal || 0; const packing = transaction.expenses?.poti_amount || 0; const cess = transaction.expenses?.cess_amount || 0; const adat = transaction.expenses?.adat_amount || 0; const hamali = (transaction.expenses?.hamali_amount || 0) + (transaction.expenses?.packaging_hamali_amount || 0); const gaadiBharni = transaction.expenses?.gaadi_bharni || 0; const otherExpenses = transaction.expenses?.other_expenses || 0; const grandTotal = transaction.total_amount || (subtotal + packing + cess + adat + hamali + gaadiBharni + otherExpenses); const paidAmount = transaction.paid_amount || 0; const balanceAmount = transaction.balance_amount || 0; const handlePrint = () => { const printContent = document.getElementById('invoice-content'); if (!printContent) return; const iframe = document.createElement('iframe'); iframe.style.position = 'absolute'; iframe.style.width = '0'; iframe.style.height = '0'; iframe.style.border = 'none'; document.body.appendChild(iframe); const doc = iframe.contentWindow?.document; if (doc) { doc.open(); doc.write(` Invoice-${transaction.bill_number} ${printContent.innerHTML} `); doc.close(); iframe.contentWindow?.focus(); setTimeout(() => { iframe.contentWindow?.print(); setTimeout(() => { document.body.removeChild(iframe); }, 1000); }, 500); } }; return ( <> {showPreview && (
{/* Header */}

Invoice Preview

{/* Scrollable Area */}
Scroll horizontally to view full invoice
{/* Wrapper for ID targeting */}
{/* Invoice Header */}

INVOICE

{/*
Bill No: {transaction.bill_number}
*/}
Date: {formatDate(transaction.bill_date)}
{/* Info Section */}
Billed To
{transaction.party_name}
Phone: {transaction.party_phone || '-'}
{/* Table */} {transaction.items.map((item, idx) => { const potiWeights = Array.isArray(item.poti_weights) ? item.poti_weights.join(', ') : (typeof item.poti_weights === 'string' ? item.poti_weights : '-'); const amount = item.net_weight * item.rate_per_kg; return ( ); })}
# Item Description Bags Net Weight Rate Amount
{idx + 1}
{item.mirchi_name}
Weights: {potiWeights}
{item.poti_count} {item.net_weight} kg {formatINR(item.rate_per_kg)} {formatINR(amount)}
{/* Totals Section */}
Payment Status
{transaction.payments && transaction.payments.length > 0 ? ( <> {transaction.payments.map((payment, idx) => (
{payment.mode === 'cash' ? 'Cash' : payment.mode === 'online' ? 'Online' : payment.mode}: {formatINR(payment.amount)}
))}
Total Paid: {formatINR(paidAmount)}
) : (
Total Paid: {formatINR(paidAmount)}
)} {balanceAmount > 0 && (
Due Amount: {formatINR(balanceAmount)}
)}
{/* Renamed Sub Total to Total */} {/* */} {/* New Row: Total + Packing Calculation */}
Total {formatINR(subtotal)}
Packing Expenses {formatINR(packing)}
Sub Total {formatINR(subtotal + packing)}
CESS {formatINR(cess)}
Adat {formatINR(adat)}
Hamali {formatINR(hamali)}
Gaadi Bharni {formatINR(gaadiBharni)}
Other Expenses {formatINR(otherExpenses)}
Grand Total {formatINR(grandTotal)}
{/* Signatures */}

Thank you for your business.

For Authorised Signatory
(Signature)
)} ); }; export default PrintInvoice;