/** * 生產工單管理主頁面 */ import { useState, useEffect } from "react"; import { Plus, Factory, Search, Eye, Pencil, Trash2 } from 'lucide-react'; import { formatQuantity } from "@/lib/utils"; import { Button } from "@/Components/ui/button"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, router, Link } from "@inertiajs/react"; 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/Components/ui/select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table"; import ProductionOrderStatusBadge from "@/Components/ProductionOrder/ProductionOrderStatusBadge"; import { formatDate } from "@/lib/date"; interface ProductionOrder { id: number; code: string; product: { id: number; name: string; code: string } | null; warehouse: { id: number; name: string } | null; user: { id: number; name: string } | null; output_batch_number: string; output_quantity: number; production_date: string; status: 'draft' | 'pending' | 'approved' | 'in_progress' | 'completed' | 'cancelled'; created_at: string; } interface Props { productionOrders: { data: ProductionOrder[]; links: any[]; total: number; from: number; to: number; }; filters: { search?: string; status?: string; per_page?: string; }; } const statusOptions = [ { value: 'all', label: '全部狀態' }, { value: 'draft', label: '草稿' }, { value: 'pending', label: '審核中' }, { value: 'approved', label: '已核准' }, { value: 'in_progress', label: '製作中' }, { value: 'completed', label: '已完成' }, { value: 'cancelled', label: '已取消' }, ]; export default function ProductionIndex({ productionOrders, filters }: Props) { const [search, setSearch] = useState(filters.search || ""); const [status, setStatus] = useState(filters.status || "all"); const [perPage, setPerPage] = useState(filters.per_page || "10"); useEffect(() => { setSearch(filters.search || ""); setStatus(filters.status || "all"); setPerPage(filters.per_page || "10"); }, [filters]); const handleFilter = () => { router.get( route('production-orders.index'), { search, status: status === 'all' ? undefined : status, per_page: perPage, }, { preserveState: true, replace: true } ); }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route("production-orders.index"), { ...filters, per_page: value }, { preserveState: false, replace: true, preserveScroll: true } ); }; const handleNavigateToCreate = () => { router.get(route('production-orders.create')); }; return (

生產工單

記錄生產過程，追蹤原物料使用與成品入庫

{/* Toolbar */}

{/* Search */}

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

{/* Status Filter */} {/* Action Buttons */}

{/* 生產單列表 */}

生產單號成品成品批號數量入庫倉庫生產日期狀態操作 {productionOrders.data.length === 0 ? (

尚無生產工單

) : ( productionOrders.data.map((order) => ( {order.code}

{order.product?.name || '-'} {order.product?.code || '-'}


                                                {order.output_batch_number}

{formatQuantity(order.output_quantity)} {order.warehouse?.name || '-'} {formatDate(order.production_date)}

{order.status === 'draft' && ( )} {(order.status === 'draft' || order.status === 'cancelled') && ( )}

)) )}

{/* 分頁 */}

每頁顯示筆

); }