import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, useForm, router } from '@inertiajs/react'; // Add router import import { useState, useEffect } from "react"; import { SearchableSelect } from "@/Components/ui/searchable-select"; import { Button } from '@/Components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/Components/ui/alert-dialog"; import { Badge } from "@/Components/ui/badge"; import { ArrowLeft, CheckCircle, Trash2, Printer } from 'lucide-react'; import { format } from 'date-fns'; import Pagination from "@/Components/shared/Pagination"; import { usePermission } from "@/hooks/usePermission"; interface ImportItem { id: number; transaction_serial: string; machine_id: string; slot: string | null; product_code: string; product_id: number | null; product?: { name: string; }; quantity: number; amount: number; transaction_at: string; original_status: string; warehouse?: { name: string; }; } interface ImportBatch { id: number; import_date: string; status: 'pending' | 'confirmed'; total_quantity: number; total_amount: number; items: ImportItem[]; // Note: items might be paginated in props, handled below created_at: string; confirmed_at?: string; } interface Props { import: ImportBatch; items: { data: ImportItem[]; links: any[]; current_page: number; per_page: number; total: number; }; filters?: { per_page?: string; }; flash?: { success?: string; error?: string; }; } export default function SalesImportShow({ import: batch, items, filters = {} }: Props) { const { can } = usePermission(); const { post, processing } = useForm({}); const [perPage, setPerPage] = useState(filters?.per_page?.toString() || "10"); // Sync state with prop if it changes via navigation useEffect(() => { if (filters?.per_page) { setPerPage(filters.per_page.toString()); } }, [filters?.per_page]); const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route("sales-imports.show", batch.id), { per_page: value }, { preserveState: true, preserveScroll: true, replace: true } ); }; const handleConfirm = () => { post(route('sales-imports.confirm', batch.id)); }; const handleDelete = () => { router.delete(route('sales-imports.destroy', batch.id)); }; return (

{/* Header */}

銷售匯入詳情

批次編號：#{batch.id} | 匯入時間：{format(new Date(batch.created_at), 'yyyy/MM/dd HH:mm')}

{batch.status === 'confirmed' ? '已確認' : '待確認'} {batch.status === 'pending' && (

{can('sales_imports.delete') && ( 確認刪除匯入紀錄確定要刪除此筆匯入紀錄嗎？此操作將會移除所有明細資料且無法復原。取消確認刪除 )} {can('sales_imports.confirm') && ( 確認匯入並扣減庫存按下「確認」後，系統將依據此匯入清冊進行庫存扣點。

注意：此操作無法復原，請確保匯入資料正確無誤。

我再看看確認並執行 )}

)} {batch.status === 'confirmed' && ( )}

{/* 統計資訊卡片 */}

統計資訊

總筆數 {Math.floor(batch.total_quantity || 0).toLocaleString()}

總金額 NT$ {Number(batch.total_amount || 0).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}

確認時間 {batch.confirmed_at ? format(new Date(batch.confirmed_at), 'yyyy/MM/dd HH:mm') : '--'}

{/* 匯入明細清單 */}

匯入明細清單

# 交易序號 / 時間倉庫 (機台編號) 商品代碼商品名稱機台 / 貨道原始狀態數量金額 {items.data.length === 0 ? ( 無匯入明細資料 ) : ( items.data.map((item, index) => ( {(items.current_page - 1) * items.per_page + index + 1}

{item.transaction_serial} {format(new Date(item.transaction_at), 'yyyy/MM/dd HH:mm:ss')}

{item.warehouse?.name || '--'} {item.machine_id}

{item.product_code}

{item.product?.name || '--'}

{item.slot || '--'} {item.original_status} {Math.floor(item.quantity)} NT$ {Number(item.amount).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} )) )}

{/* Pagination */}

每頁顯示筆

); }