import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link } from '@inertiajs/react'; 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 { StatusBadge } from "@/Components/shared/StatusBadge"; import { Plus, FileUp, Eye, Trash2, Search, X } from 'lucide-react'; import { useState, useEffect } from "react"; import { format } from 'date-fns'; import Pagination from "@/Components/shared/Pagination"; import { SearchableSelect } from "@/Components/ui/searchable-select"; import { Input } from "@/Components/ui/input"; import { router } from "@inertiajs/react"; import { usePermission } from "@/hooks/usePermission"; import SalesImportDialog from "@/Components/Sales/SalesImportDialog"; interface ImportBatch { id: number; import_date: string; status: 'pending' | 'confirmed'; total_quantity: number; total_amount: number; importer?: { name: string; }; created_at: string; } interface Props { batches: { data: ImportBatch[]; links: any[]; // Pagination links }; filters?: { per_page?: string; search?: string; } } export default function SalesImportIndex({ batches, filters = {} }: Props) { const { can } = usePermission(); const [perPage, setPerPage] = useState(filters?.per_page?.toString() || "10"); const [search, setSearch] = useState(filters?.search || ""); const [isImportDialogOpen, setIsImportDialogOpen] = useState(false); useEffect(() => { if (filters?.per_page) { setPerPage(filters.per_page.toString()); } setSearch(filters?.search || ""); }, [filters]); const handleFilter = () => { router.get( route("sales-imports.index"), { per_page: perPage, search: search }, { preserveState: true, replace: true } ); }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route("sales-imports.index"), { ...filters, per_page: value }, { preserveState: true, preserveScroll: true, replace: true } ); }; return (

銷售單匯入管理

匯入並管理銷售出貨紀錄

{/* Toolbar (Aligned with Recipe Management) */}

{/* Search */}

setSearch(e.target.value)} className="pl-10 pr-10 h-9" onKeyDown={(e) => e.key === 'Enter' && handleFilter()} /> {search && ( )}

{/* Action Buttons */}

{can('sales_imports.create') && ( )}

# 匯入日期匯入人員總數量總金額狀態操作 {batches.data.length === 0 ? ( 尚無匯入紀錄 ) : ( batches.data.map((batch, index) => ( {(batches as any).from + index} {format(new Date(batch.created_at), 'yyyy/MM/dd HH:mm')} {batch.importer?.name || '--'} {Math.floor(batch.total_quantity || 0).toLocaleString()} NT$ {Number(batch.total_amount || 0).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} {batch.status === 'confirmed' ? ( 已確認 ) : ( 待確認 )}

{batch.status === 'pending' && can('sales_imports.delete') && ( 確認刪除匯入紀錄確定要刪除此筆匯入紀錄（#{batch.id}）嗎？此操作將會移除所有相關的明細資料且無法復原。取消 router.delete(route('sales-imports.destroy', batch.id), { preserveScroll: true })} > 確認刪除 )}

)) )}

{/* Pagination */}

每頁顯示筆

); }