import React from 'react'; import { Head, usePage, router } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import { PurchaseReturn } 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 { FileText, Download, CheckCircle, CalendarDays, Building2, User, Calculator, Package, Check, HelpCircle } from 'lucide-react'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; interface ViewProps { return: PurchaseReturn; auth: any; [key: string]: any; } function View() { const { t } = useTranslation(); const { props: pageProps } = usePage(); const { return: purchaseReturn, auth } = pageProps; const downloadPDF = () => { const printUrl = route('purchase-returns.print', purchaseReturn.id) + '?download=pdf'; window.open(printUrl, '_blank'); }; return (
{/* Left Column - Main Details, Items & Notes */}
{/* Billing & Addresses Card */}
{t('Billing & Shipping Addresses')}
{/* Company Address (From Company Setting) */}

{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')}
)}
{/* Vendor Details */}

{t('Billed From')}

{purchaseReturn.vendor?.name}
{purchaseReturn.vendor?.email}
{/* Vendor Billing */} {purchaseReturn.vendor_details?.billing_address && (
{t('Billing Address')}
{purchaseReturn.vendor_details.billing_address.name}
{purchaseReturn.vendor_details.billing_address.address_line_1}
{purchaseReturn.vendor_details.billing_address.city}, {purchaseReturn.vendor_details.billing_address.state} {purchaseReturn.vendor_details.billing_address.zip_code}
)} {/* Vendor Shipping */} {purchaseReturn.vendor_details?.shipping_address && (
{t('Shipping Address')}
{purchaseReturn.vendor_details.shipping_address.name}
{purchaseReturn.vendor_details.shipping_address.address_line_1}
{purchaseReturn.vendor_details.shipping_address.city}, {purchaseReturn.vendor_details.shipping_address.state} {purchaseReturn.vendor_details.shipping_address.zip_code}
)}
{/* Return Items Card */}
{t('Return Items')}
{purchaseReturn.items?.map((item, index) => { const imageUrl = item.product?.image ? getImagePath(item.product.image, pageProps) : ''; return ( ); })}
{t('Product')} {t('Qty')} {t('Unit Price')} {t('Discount')} {t('Tax')} {t('Total')}
{item.product?.image ? ( {item.product.name} window.open(imageUrl, '_blank')} onError={(e) => { 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.return_quantity || 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)}
{/* Return Summary */}
{t('Subtotal')} {formatCurrency(purchaseReturn.subtotal)}
{purchaseReturn.discount_amount > 0 && (
{t('Discount')} -{formatCurrency(purchaseReturn.discount_amount)}
)} {purchaseReturn.tax_amount > 0 && (
{t('Tax')} {formatCurrency(purchaseReturn.tax_amount)}
)}
{t('Total Return Amount')} {formatCurrency(purchaseReturn.total_amount)}
{/* Notes Card */} {purchaseReturn.notes && (
{t('Notes')}

{purchaseReturn.notes}

 )}
{/* Right Column - Actions, Vendor & Return Info */}
{/* Summary & Actions Card */}
{t('Summary & Actions')}
{t('Total Return Amount')}
{formatCurrency(purchaseReturn.total_amount)}
{t(purchaseReturn.status?.charAt(0).toUpperCase() + purchaseReturn.status?.slice(1))}
{auth.user?.permissions?.includes('print-purchase-returns') && ( )} {purchaseReturn.status === 'draft' && auth.user?.permissions?.includes('approve-purchase-returns-invoices') && ( )} {purchaseReturn.status === 'approved' && auth.user?.permissions?.includes('complete-purchase-returns-invoices') && ( )}
{/* Vendor Information Card */}
{t('Vendor Info')}
{purchaseReturn.vendor ? ( ) : ( {t('Guest Vendor')} )} {/* Return Details Card */}
{t('Return Details')}
{t('Return Date')} {formatDate(purchaseReturn.return_date)}
{purchaseReturn.warehouse?.name && (
{t('Warehouse')}
)} {purchaseReturn.originalInvoice?.invoice_number && (
{t('Original Invoice')} {auth.user?.permissions?.includes('view-purchase-invoices') ? ( router.get(route('purchase-invoices.show', purchaseReturn.originalInvoice?.id))} className="text-sm font-semibold text-primary hover:underline cursor-pointer" > #{purchaseReturn.originalInvoice.invoice_number} ) : ( #{purchaseReturn.originalInvoice.invoice_number} )}
)} {purchaseReturn.reason && (
{t('Reason')} {t(purchaseReturn.reason.replace('_', ' '))}
)}
); } export default View;