/** * 採購單管理主頁面 */ import { useState, useCallback } from "react"; import { Plus, ShoppingCart } from 'lucide-react'; import { Button } from "@/Components/ui/button"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, router } from "@inertiajs/react"; import PurchaseOrderTable from "@/Components/PurchaseOrder/PurchaseOrderTable"; import { PurchaseOrderFilters } from "@/Components/PurchaseOrder/PurchaseOrderFilters"; import { type DateRange } from "@/Components/PurchaseOrder/DateFilter"; import type { PurchaseOrder } from "@/types/purchase-order"; import { debounce } from "lodash"; import Pagination from "@/Components/shared/Pagination"; import { getBreadcrumbs } from "@/utils/breadcrumb"; import { Can } from "@/Components/Permission/Can"; import { SearchableSelect } from "@/Components/ui/searchable-select"; interface Props { orders: { data: PurchaseOrder[]; links: any[]; total: number; from: number; to: number; }; filters: { search?: string; status?: string; warehouse_id?: string; sort_field?: string; sort_direction?: string; per_page?: string; }; warehouses: { id: number; name: string }[]; } export default function PurchaseOrderIndex({ orders, filters, warehouses }: Props) { const [searchQuery, setSearchQuery] = useState(filters.search || ""); const [statusFilter, setStatusFilter] = useState(filters.status || "all"); const [requesterFilter, setRequesterFilter] = useState(filters.warehouse_id || "all"); const [perPage, setPerPage] = useState(filters.per_page || "10"); const [dateRange, setDateRange] = useState(null); const handleFilterChange = (newFilters: any) => { router.get("/purchase-orders", { ...filters, ...newFilters, page: 1, }, { preserveState: true, replace: true, }); }; const handleSearch = useCallback( debounce((value: string) => { handleFilterChange({ search: value }); }, 500), [filters] ); const onSearchChange = (value: string) => { setSearchQuery(value); handleSearch(value); }; const onStatusChange = (value: string) => { setStatusFilter(value); handleFilterChange({ status: value }); }; const onWarehouseChange = (value: string) => { setRequesterFilter(value); handleFilterChange({ warehouse_id: value }); }; const handleClearFilters = () => { setSearchQuery(""); setStatusFilter("all"); setRequesterFilter("all"); setDateRange(null); router.get("/purchase-orders"); }; const hasActiveFilters = searchQuery !== "" || statusFilter !== "all" || requesterFilter !== "all" || dateRange !== null; const handleNavigateToCreateOrder = () => { router.get("/purchase-orders/create"); }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get("/purchase-orders", { ...filters, per_page: value, page: 1, }, { preserveState: false, replace: true, }); }; return (

採購單管理

建立與管理採購訂單，追蹤入庫狀態

{/* 分頁元件 - 統一樣式 */}
每頁顯示 筆
); }