import React from 'react'; import { Head, usePage, router } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import { PurchaseInvoice } from './types'; import AuthenticatedLayout from '@/layouts/authenticated-layout'; import { formatCurrency, formatDate, getImagePath, getCompanySetting } from '@/utils/helpers'; import { getStatusBadgeClasses } from './utils'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; import BadgeUI from '@/components/badge-ui'; import RandomBadgeUI from '@/components/random-badge-ui'; import UserColumn from '@/components/user-column'; import { CalendarDays, Building2, User, FileText, Calculator, Download, Clock, Package, Calendar } from 'lucide-react'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; import { usePageButtons } from '@/hooks/usePageButtons'; interface ViewProps { invoice: PurchaseInvoice; auth: any; [key: string]: any; } export default function View() { const { t } = useTranslation(); const { invoice, auth } = usePage().props; const signatureStatusButtons = usePageButtons('signatureViewBtn', { invoice: invoice, invoiceType: 'purchase' }); const downloadPDF = () => { const printUrl = route('purchase-invoices.print', invoice.id) + '?download=pdf'; window.open(printUrl, '_blank'); }; return (
{/* Left Column - Main Details, Items & Notes */}
{/* Invoice Address Details Card */}
{t('Billing & Addresses')}
{/* Left Side: Vendor Address (Billed From) */}

{t('Billed From')}

{invoice.vendor?.name}
{invoice.vendor?.email}
{invoice.vendor_details?.billing_address && (
{t('Billing Address')}
{invoice.vendor_details.billing_address.name}
{invoice.vendor_details.billing_address.address_line_1}
{invoice.vendor_details.billing_address.city}, {invoice.vendor_details.billing_address.state} {invoice.vendor_details.billing_address.zip_code}
)} {invoice.vendor_details?.shipping_address && (
{t('Shipping Address')}
{invoice.vendor_details.shipping_address.name}
{invoice.vendor_details.shipping_address.address_line_1}
{invoice.vendor_details.shipping_address.city}, {invoice.vendor_details.shipping_address.state} {invoice.vendor_details.shipping_address.zip_code}
)}
{/* Right Side: Company Details (Billed To) */}

{t('Billed To')}

{getCompanySetting('company_name') || t('Your Company')}
{getCompanySetting('company_address') && (
{getCompanySetting('company_address')}
)} {(getCompanySetting('company_city') || getCompanySetting('company_state') || getCompanySetting('company_zipcode')) && (
{getCompanySetting('company_city')}{getCompanySetting('company_state') && `, ${getCompanySetting('company_state')}`} {getCompanySetting('company_zipcode')}
)} {getCompanySetting('company_country') && (
{getCompanySetting('company_country')}
)} {getCompanySetting('company_telephone') && (
{t('Phone')}: {getCompanySetting('company_telephone')}
)} {getCompanySetting('company_email') && (
{t('Email')}: {getCompanySetting('company_email')}
)}
{/* Invoice Items Card */}
{t('Invoice Items')}
{invoice.items?.map((item, index) => ( ))}
{t('Product')} {t('Qty')} {t('Unit Price')} {t('Discount')} {t('Tax')} {t('Total')}
{item.product?.image ? ( {item.product.name} { const target = e.target as HTMLImageElement; target.style.display = 'none'; const fallback = target.nextElementSibling as HTMLElement; if (fallback) fallback.classList.remove('hidden'); }} /> ) : null}
{item.product?.name}
{item.product?.sku && (
SKU: {item.product.sku}
)} {item.product?.description && (

{item.product.description}

)}
{item.quantity} {formatCurrency(item.unit_price)} {item.discount_percentage > 0 ? (
{item.discount_percentage}%
-{formatCurrency(item.discount_amount)}
) : ( - )} 		{item.taxes && item.taxes.length > 0 ? (
{item.taxes.map((tax, taxIndex) => (
{tax.tax_name} ({tax.tax_rate}%)
))}
{formatCurrency(item.tax_amount)}
) : item.tax_percentage > 0 ? (
{item.tax_percentage}%
{formatCurrency(item.tax_amount)}
) : ( - )} 		{formatCurrency(item.total_amount)}
{t('Subtotal')} {formatCurrency(invoice.subtotal)}
{invoice.discount_amount > 0 && (
{t('Discount')} -{formatCurrency(invoice.discount_amount)}
)} {invoice.tax_amount > 0 && (
{t('Tax')} {formatCurrency(invoice.tax_amount)}
)}
{t('Total Amount')} {formatCurrency(invoice.total_amount)}
{invoice.paid_amount > 0 && (
{t('Paid Amount')} {formatCurrency(invoice.paid_amount)}
)}
{t('Balance Due')} {formatCurrency(invoice.balance_amount)}
{/* Notes Card */} {invoice.notes && (
{t('Additional Notes')}

{invoice.notes}

)}
{/* Right Column - Summary & Quick Actions sidebar */}
{/* Status & Quick Actions Card */}
{t('Summary & Actions')}
{t('Balance Due')}
{formatCurrency(invoice.balance_amount)}
{t(invoice.status)}
{auth.user?.permissions?.includes('print-purchase-invoices') && ( )} {invoice.status === 'draft' && auth.user?.permissions?.includes('post-purchase-invoices') && (

{t('Post invoice to finalize and create journal entries')}

 )}
{/* Vendor Information Card */}
{t('Vendor Info')}
{invoice.vendor ? ( ) : ( {t('Guest Vendor')} )} {/* Invoice Details Card */}
{t('Invoice Details')}
{t('Invoice Date')} {formatDate(invoice.invoice_date)}
{t('Due Date')} 0 ? 'text-rose-600 dark:text-rose-400 font-semibold' : 'text-foreground'}`}> {formatDate(invoice.due_date)} {new Date(invoice.due_date) < new Date() && invoice.balance_amount > 0 && ( {t('Overdue')} )}
{invoice.warehouse && (
{t('Warehouse')}
)} {invoice.payment_terms && (
{t('Terms')} {invoice.payment_terms}
)} {/* Signature Status Card */} {signatureStatusButtons.length > 0 && (
{t('Signature Status')}
{signatureStatusButtons.map((button) => (
{button.component}
))} )}
); }