import { useState, useCallback } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Search, Wallet, Eye, X, } from "lucide-react"; import { StatusBadge } from '@/Components/shared/StatusBadge'; import { formatDate } from '@/lib/date'; import Pagination from '@/Components/shared/Pagination'; import { Can } from '@/Components/Permission/Can'; import { Button } from '@/Components/ui/button'; import { Input } from '@/Components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table'; import { SearchableSelect } from '@/Components/ui/searchable-select'; import { debounce } from "lodash"; const STATUS_OPTIONS = [ { value: 'all', label: '所有狀態' }, { value: 'pending', label: '待處理' }, { value: 'posted', label: '已入帳' }, { value: 'paid', label: '已支付' }, { value: 'voided', label: '已作廢' }, ]; const getStatusBadgeVariant = (status: string) => { switch (status) { case 'pending': return 'warning'; case 'posted': return 'info'; case 'paid': return 'success'; case 'voided': return 'destructive'; default: return 'neutral'; } }; const getStatusLabel = (status: string) => { const found = STATUS_OPTIONS.find(opt => opt.value === status); return found ? found.label : status; }; export default function AccountPayableIndex({ payables, filters, vendors }: any) { const [searchTerm, setSearchTerm] = useState(filters.search || ""); const [statusFilter, setStatusFilter] = useState(filters.status || "all"); const [vendorFilter, setVendorFilter] = useState(filters.vendor_id || "all"); const [perPage, setPerPage] = useState(filters.per_page || "10"); // 穩定的防抖過濾函式 const debouncedFilter = useCallback( debounce((params: any) => { router.get(route('account-payables.index'), params, { preserveState: true, replace: true, preserveScroll: true, }); }, 500), [] ); const handleSearchChange = (term: string) => { setSearchTerm(term); debouncedFilter({ ...filters, search: term, status: statusFilter === "all" ? "" : statusFilter, vendor_id: vendorFilter === "all" ? "" : vendorFilter, page: 1 }); }; const handleClearSearch = () => { setSearchTerm(""); debouncedFilter({ ...filters, search: "", status: statusFilter === "all" ? "" : statusFilter, vendor_id: vendorFilter === "all" ? "" : vendorFilter, page: 1 }); }; const handleStatusChange = (value: string) => { setStatusFilter(value); debouncedFilter({ ...filters, search: searchTerm, status: value === "all" ? "" : value, vendor_id: vendorFilter === "all" ? "" : vendorFilter, page: 1 }); }; const handleVendorChange = (value: string) => { setVendorFilter(value); debouncedFilter({ ...filters, search: searchTerm, status: statusFilter === "all" ? "" : statusFilter, vendor_id: value === "all" ? "" : value, page: 1 }); }; const handlePerPageChange = (value: string) => { setPerPage(value); debouncedFilter({ ...filters, per_page: value, page: 1 }); }; return (

{/* 頁面標題 */}

應付帳款管理

追蹤與供應商的應付帳項，管理採購入庫後的結算與付款狀態。

{/* 篩選工具列 */}

{/* 搜尋 */}

handleSearchChange(e.target.value)} className="pl-10 pr-10 h-9" /> {searchTerm && ( )}

{/* 狀態篩選 */} {/* 供應商篩選 */} ({ label: v.name, value: v.id.toString() })) ]} placeholder="選擇供應商" className="w-full md:w-[200px] h-9" />

# 應付單號供應商金額到期日狀態操作 {payables.data.length === 0 ? ( 尚無應付帳款資料 ) : ( payables.data.map((payable: any, index: number) => ( router.visit(route('account-payables.show', [payable.id]))} > {(payables.current_page - 1) * payables.per_page + index + 1} {payable.document_number} {payable.vendor?.name} {new Intl.NumberFormat().format(payable.total_amount)} {formatDate(payable.due_date)} {/* @ts-ignore */} {getStatusLabel(payable.status)}

e.stopPropagation()} >

)) )}

每頁顯示筆

共 {payables.total} 筆紀錄

); }