import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import AppLayout from '@/layouts/app-layout'; import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowLeft, BadgeDollarSign, CalendarDays, Copy, CreditCard, Package, Receipt, User, Wallet, } from 'lucide-react'; import { ReactNode, useState } from 'react'; declare const route: (...args: any[]) => string; interface ApplicationData { id: number; uid: string; order_id: number; order_number?: string | null; applied_amount: number; applied_at?: string | null; } interface ReturnItemData { id: number; product_name?: string | null; product_sku?: string | null; variant_title?: string | null; return_qty: number; unit_price: number; discount_amount: number; subtotal: number; reason?: string | null; } interface CreditNoteData { id: number; uid: string; credit_note_number: string; sales_return_id: number; reference_no?: string | null; customer_id: number; customer_name?: string | null; type: string; type_label: string; amount: number; used_amount: number; balance: number; status: string; status_label: string; expire_at?: string | null; currency: string; notes?: string | null; created_at: string; updated_at?: string | null; applications?: ApplicationData[]; return_items?: ReturnItemData[]; } interface ShowProps { creditNote: CreditNoteData; } const statusStyle: Record = { open: { badge: 'border-green-300 bg-green-100 text-green-800', dot: 'bg-green-600' }, closed: { badge: 'border-gray-300 bg-gray-100 text-gray-700', dot: 'bg-gray-500' }, cancelled: { badge: 'border-red-300 bg-red-100 text-red-800', dot: 'bg-red-600' }, }; const typeStyle: Record = { money_back: 'border-blue-300 bg-blue-100 text-blue-800', voucher: 'border-purple-300 bg-purple-100 text-purple-800', exchange_difference: 'border-amber-300 bg-amber-100 text-amber-800', }; function money(n: number) { return `৳ ${Number(n || 0).toLocaleString('en-IN', { minimumFractionDigits: 2 })}`; } function fmtDate(d?: string | null) { if (!d) return '—'; return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); } function fmtDateTime(d?: string | null) { if (!d) return '—'; return new Date(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); } function Show() { const { creditNote: cn } = usePage().props; const [copied, setCopied] = useState(false); const copyNumber = () => { navigator.clipboard.writeText(cn.credit_note_number); setCopied(true); setTimeout(() => setCopied(false), 1500); }; const statusKey = cn.status ?? 'open'; const st = statusStyle[statusKey] ?? statusStyle.open; const usedPct = cn.amount > 0 ? Math.round((cn.used_amount / cn.amount) * 100) : 0; return ( <>
{/* Gradient header banner */}

{cn.credit_note_number}

{copied && Copied!}

{cn.reference_no ? <>Return: {cn.reference_no} · : ''} {fmtDate(cn.created_at)}

{cn.status_label} {cn.type_label}
{/* 4 summary stat cards */}

Issued Amount

{money(cn.amount)}

Used Amount

{money(cn.used_amount)}

{usedPct}% consumed

Balance

0 ? 'text-green-700' : 'text-gray-400'}`}> {money(cn.balance)}

{cn.balance > 0 ? 'Available' : 'Exhausted'}

Expires

{cn.expire_at ? fmtDate(cn.expire_at) : 'No expiry'}

{/* Left column */}
{/* Credit usage progress */} Credit Usage
Used: {money(cn.used_amount)} Total: {money(cn.amount)}

{usedPct}% of credit has been applied to orders

{/* Return Items table */} {(cn.return_items ?? []).length > 0 && ( Returned Items ({(cn.return_items ?? []).length} item{(cn.return_items ?? []).length !== 1 ? 's' : ''})
{(cn.return_items ?? []).map((item) => ( ))}
Product Qty Unit Price Discount Subtotal

{item.product_name ?? '—'}

{item.product_sku ? `SKU: ${item.product_sku}` : ''} {item.variant_title ? ` · ${item.variant_title}` : ''}

{item.reason && (

Reason: {item.reason}

)} 		{item.return_qty} {money(item.unit_price)} {item.discount_amount > 0 ? `-${money(item.discount_amount)}` : '—'} {money(item.subtotal)}
Total Return Value {money((cn.return_items ?? []).reduce((s, i) => s + i.subtotal, 0))}
)} {/* Applications table */} Applied To Orders ({(cn.applications ?? []).length} application{(cn.applications ?? []).length !== 1 ? 's' : ''}) {(cn.applications ?? []).length === 0 ? (
This credit note has not been applied to any order yet.
) : (
{(cn.applications ?? []).map((app) => ( ))}
Order Applied Amount Applied At
{app.order_number ?? `#${app.order_id}`} {money(app.applied_amount)} {fmtDateTime(app.applied_at)}
)}
{/* Right column */}
{/* Credit Note Info */} Credit Note Info
Status {cn.status_label}
Type {cn.type_label}
Currency {cn.currency}
Expires {cn.expire_at ? fmtDate(cn.expire_at) : 'No expiry'}
{/* Customer */} Customer

{cn.customer_name || '—'}

{cn.reference_no && (

From return: {cn.reference_no}

)} {/* Financial Summary */} Financial Summary
Issued Amount {money(cn.amount)}
Used Amount -{money(cn.used_amount)}
Remaining Balance 0 ? 'text-green-700' : 'text-gray-400'}`}> {money(cn.balance)}
{/* Metadata */} Metadata

Credit Note #

{cn.credit_note_number}

Created

{fmtDateTime(cn.created_at)}

{cn.updated_at && cn.updated_at !== cn.created_at && (

Last Updated

{fmtDateTime(cn.updated_at)}

)} {cn.notes && (

Notes

{cn.notes}

)}
); } Show.layout = (page: ReactNode) => ( {page} ); export default Show;