import { Form, Head, Link } from '@inertiajs/react'; import HeadingSmall from '@/components/heading-small'; import { useUserTimezone } from '@/hooks/use-user-timezone'; import AppLayout from '@/layouts/app-layout'; import { formatDate } from '@/lib/format-date'; import { productProperName } from '@/lib/utils'; import { index as productsIndex, refreshDocuments as refreshProductDocuments, show as productsShow } from '@/routes/admin/products'; import { show as supplierProductsShow } from '@/routes/admin/supplier-products'; type SupplierProduct = { id: number; external_id: string; supplier: { id: number; name: string; slug: string } | null; }; type Product = { id: number; name: string; account_type: string | null; energy_type: string | null; rate: string | null; rate_type: string | null; base_rate: string | null; term_months: number | null; term_text: string | null; etf_amount: number | null; status: string | null; rate_caption: string | null; reward_type: string | null; reward_amount: string | null; renewal_text: string | null; notes: string | null; starts_at: string | null; ends_at: string | null; updated_at: string; utility: { id: number; name: string } | null; state: { id: number; code: string; name: string } | null; supplier_product: SupplierProduct | null; }; type ProductDocument = { id: number; type: string | null; title: string | null; language: string; file_type: string | null; external_id: string | null; url: string | null; local_file_path: string | null; view_url: string | null; }; type PaginatedDocuments = { data: ProductDocument[]; current_page: number; last_page: number; per_page: number; total: number; links: { url: string | null; label: string; active: boolean }[]; }; type Props = { product: Product; documents: PaginatedDocuments; }; function StatusBadge({ status }: { status: string | null }) { if (!status) return —; const colors: Record = { active: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300', inactive: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400', archived: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300', }; return ( {status} ); } function LanguageBadge({ language }: { language: string }) { return ( {language} ); } function formatRate(rate: string | null): string { if (!rate) return '—'; return parseFloat(rate).toFixed(4); } export default function ProductShow({ product, documents }: Props) { const timezone = useUserTimezone(); const name = productProperName(product.name); const breadcrumbs = [ { title: 'Products', href: productsIndex.url() }, { title: name, href: productsShow.url(product.id) }, ]; return (
{/* Product details */}
Supplier product

{product.supplier_product ? ( {product.supplier_product.supplier?.name ?? 'Unknown'} / {product.supplier_product.external_id} ) : ( '—' )}

{(product.renewal_text || product.notes) && (
{product.renewal_text && (
Renewal terms

{product.renewal_text}

)} {product.notes && (
Notes

{product.notes}

)}
)}
{/* Documents table */}

Documents ({documents.total})

{product.supplier_product?.supplier?.slug === 'apge' && (
{({ processing }) => ( )}
)}
{documents.data.map((doc) => ( ))}
Type Title Language Format External ID Link
{doc.type ?? '—'} {doc.title ?? '—'} {doc.file_type ?? '—'} {doc.external_id ?? '—'} {doc.view_url ? ( {doc.local_file_path ? 'View PDF' : doc.view_url} ) : ( — )}
{documents.data.length === 0 && (
No documents found for this product.
)}
{documents.last_page > 1 && (
Showing {(documents.current_page - 1) * documents.per_page + 1}– {Math.min(documents.current_page * documents.per_page, documents.total)} of{' '} {documents.total}
{documents.links.map((link) => ( ))}
)}
); } function Detail({ label, value }: { label: string; value: string | null | undefined }) { return (
{label}

{value ?? '—'}

); }