/** * 採購單管理主頁面 */ import { useState, useEffect } from "react"; import { Plus, ShoppingCart, Search, RotateCcw, Calendar } 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 type { PurchaseOrder } from "@/types/purchase-order"; import Pagination from "@/Components/shared/Pagination"; import { getBreadcrumbs } from "@/utils/breadcrumb"; import { Can } from "@/Components/Permission/Can"; import { SearchableSelect } from "@/Components/ui/searchable-select"; import { Input } from "@/Components/ui/input"; import { Label } from "@/Components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/Components/ui/select"; interface Props { orders: { data: PurchaseOrder[]; links: any[]; total: number; from: number; to: number; }; filters: { search?: string; status?: string; warehouse_id?: string; date_start?: string; date_end?: string; sort_field?: string; sort_direction?: string; per_page?: string; }; warehouses: { id: number; name: string }[]; } export default function PurchaseOrderIndex({ orders, filters, warehouses }: Props) { // 篩選狀態 const [search, setSearch] = useState(filters.search || ""); const [status, setStatus] = useState(filters.status || "all"); const [warehouseId, setWarehouseId] = useState(filters.warehouse_id || "all"); const [dateStart, setDateStart] = useState(filters.date_start || ""); const [dateEnd, setDateEnd] = useState(filters.date_end || ""); const [perPage, setPerPage] = useState(filters.per_page || "10"); // 同步 URL 參數到 State (雖有初始值，但若由外部連結進入可確保同步) useEffect(() => { setSearch(filters.search || ""); setStatus(filters.status || "all"); setWarehouseId(filters.warehouse_id || "all"); setDateStart(filters.date_start || ""); setDateEnd(filters.date_end || ""); setPerPage(filters.per_page || "10"); }, [filters]); const handleFilter = () => { router.get( route('purchase-orders.index'), { search, status: status === 'all' ? undefined : status, warehouse_id: warehouseId === 'all' ? undefined : warehouseId, date_start: dateStart, date_end: dateEnd, per_page: perPage, sort_field: filters.sort_field, sort_direction: filters.sort_direction, }, { preserveState: true, replace: true } ); }; const handleReset = () => { setSearch(""); setStatus("all"); setWarehouseId("all"); setDateStart(""); setDateEnd(""); router.get(route('purchase-orders.index')); }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route("purchase-orders.index"), { ...filters, per_page: value, }, { preserveState: false, replace: true, preserveScroll: true } ); }; const handleNavigateToCreateOrder = () => { router.get(route('purchase-orders.create')); }; return (

採購單管理

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

{/* 篩選區塊 */}

{/* 關鍵字搜尋 */}

關鍵字搜尋

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

{/* 狀態篩選 */}

訂單狀態

{/* 倉庫篩選 */}

入庫倉庫 ({ label: w.name, value: String(w.id) })) ]} placeholder="選擇倉庫" className="w-full" />

{/* 日期範圍 - 開始 */}

開始日期

setDateStart(e.target.value)} className="pl-9 block w-full" />

{/* 日期範圍 - 結束 */}

結束日期

setDateEnd(e.target.value)} className="pl-9 block w-full text-left" />

{/* 分頁元件 - 統一樣式 */}

每頁顯示筆

); }