import { 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 { formatDateTime } from '@/lib/format-date'; import { index as importsIndex, show as importsShow } from '@/routes/admin/supplier-product-imports'; type Import = { id: number; supplier_id: number; source: string; raw_file_path: string | null; raw_file_sha256: string | null; raw_file_size_bytes: number | null; total_rows: number; created_count: number; updated_count: number; archived_count: number; skipped_count: number; started_at: string | null; finished_at: string | null; error_message: string | null; meta: Record | null; supplier: { id: number; name: string }; }; type Operation = { id: number; supplier_product_import_id: number; supplier_product_id: number | null; product_external_id: string; operation: string; skip_reason: string | null; attribute_changes: Record | null; row_payload: Record | null; supplier_product: { id: number; external_id: string } | null; }; type PaginatedOperations = { data: Operation[]; current_page: number; last_page: number; per_page: number; total: number; links: { url: string | null; label: string; active: boolean }[]; }; type Props = { import: Import; operations: PaginatedOperations; }; function OperationBadge({ operation }: { operation: string }) { const colors: Record = { created: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300', updated: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300', skipped: '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 ( {operation} ); } function formatBytes(bytes: number | null): string { if (bytes === null) return '—'; if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } function duration(startedAt: string | null, finishedAt: string | null): string { if (!startedAt || !finishedAt) return '—'; const ms = new Date(finishedAt).getTime() - new Date(startedAt).getTime(); if (ms < 1000) return `${ms}ms`; return `${(ms / 1000).toFixed(1)}s`; } // Use a different name to avoid the reserved word conflict with Props export default function SupplierProductImportShow({ import: imp, operations }: Props) { const timezone = useUserTimezone(); const breadcrumbs = [ { title: 'Supplier Product Imports', href: importsIndex.url({ query: { supplier_id: imp.supplier_id } }), }, { title: `Import #${imp.id}`, href: importsShow.url(imp.id), }, ]; return (
{/* Summary Cards */}
{/* Details */}
{imp.error_message && (
Error

{imp.error_message}

)} {imp.meta && Object.keys(imp.meta).length > 0 && (
Meta 
                                    {JSON.stringify(imp.meta, null, 2)}
)}
{/* Operations Table */}

Operations ({operations.total})

{operations.data.map((op) => ( ))}
External ID Operation Changes Payload
{op.product_external_id} {op.skip_reason && (

{op.skip_reason}

)} 		{op.attribute_changes && Object.keys(op.attribute_changes).length > 0 ? (
{Object.keys(op.attribute_changes).length} field(s) 
                                                            {JSON.stringify(op.attribute_changes, null, 2)}
) : ( — )} 		{op.row_payload && Object.keys(op.row_payload).length > 0 ? (
View payload 
                                                            {JSON.stringify(op.row_payload, null, 2)}
) : ( — )}
{operations.data.length === 0 && (
No operations recorded for this import.
)}
{operations.last_page > 1 && (
Showing {(operations.current_page - 1) * operations.per_page + 1}– {Math.min(operations.current_page * operations.per_page, operations.total)} of{' '} {operations.total}
{operations.links.map((link) => ( ))}
)}
); } function SummaryCard({ label, value, className }: { label: string; value: string | number; className?: string }) { return (
{label}

{value}

); } function Detail({ label, value }: { label: string; value: string | null }) { return (
{label}

{value ?? '—'}

); }