feat(生產/庫存): 實作生產管理模組與批號追溯功能
This commit is contained in:
254
resources/js/Pages/Production/Show.tsx
Normal file
254
resources/js/Pages/Production/Show.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
/**
|
||||
* 生產工單詳情頁面
|
||||
* 含追溯資訊：成品批號 → 原物料批號 → 來源採購單
|
||||
*/
|
||||
|
||||
import { Factory, ArrowLeft, Package, Calendar, User, Warehouse, FileText, Link2 } from 'lucide-react';
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
import { Head, router, Link } from "@inertiajs/react";
|
||||
import { getBreadcrumbs } from "@/utils/breadcrumb";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
|
||||
|
||||
interface ProductionOrderItem {
|
||||
id: number;
|
||||
quantity_used: number;
|
||||
unit?: { id: number; name: string } | null;
|
||||
inventory: {
|
||||
id: number;
|
||||
batch_number: string;
|
||||
box_number: string | null;
|
||||
arrival_date: string | null;
|
||||
origin_country: string | null;
|
||||
product: { id: number; name: string; code: string } | null;
|
||||
source_purchase_order?: {
|
||||
id: number;
|
||||
code: string;
|
||||
vendor?: { id: number; name: string } | null;
|
||||
} | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface ProductionOrder {
|
||||
id: number;
|
||||
code: string;
|
||||
product: { id: number; name: string; code: string; base_unit?: { name: string } | null } | null;
|
||||
warehouse: { id: number; name: string } | null;
|
||||
user: { id: number; name: string } | null;
|
||||
output_batch_number: string;
|
||||
output_box_count: string | null;
|
||||
output_quantity: number;
|
||||
production_date: string;
|
||||
expiry_date: string | null;
|
||||
status: 'draft' | 'completed' | 'cancelled';
|
||||
remark: string | null;
|
||||
created_at: string;
|
||||
items: ProductionOrderItem[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
productionOrder: ProductionOrder;
|
||||
}
|
||||
|
||||
const statusConfig: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
|
||||
draft: { label: "草稿", variant: "secondary" },
|
||||
completed: { label: "已完成", variant: "default" },
|
||||
cancelled: { label: "已取消", variant: "destructive" },
|
||||
};
|
||||
|
||||
export default function ProductionShow({ productionOrder }: Props) {
|
||||
return (
|
||||
<AuthenticatedLayout breadcrumbs={getBreadcrumbs("productionOrdersShow")}>
|
||||
<Head title={`生產單 ${productionOrder.code}`} />
|
||||
<div className="container mx-auto p-6 max-w-4xl">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.get(route('production-orders.index'))}
|
||||
className="p-2"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
||||
<Factory className="h-6 w-6 text-primary-main" />
|
||||
{productionOrder.code}
|
||||
</h1>
|
||||
<p className="text-gray-500 mt-1">
|
||||
生產工單詳情與追溯資訊
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={statusConfig[productionOrder.status]?.variant || "secondary"}>
|
||||
{statusConfig[productionOrder.status]?.label || productionOrder.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* 成品資訊 */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Package className="h-5 w-5 text-gray-500" />
|
||||
成品資訊
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-grey-2">成品商品</p>
|
||||
<p className="font-medium text-grey-0">
|
||||
{productionOrder.product?.name || '-'}
|
||||
<span className="text-gray-400 ml-2 text-sm font-normal">
|
||||
({productionOrder.product?.code || '-'})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-grey-2">成品批號</p>
|
||||
<p className="font-mono font-medium text-primary-main">
|
||||
{productionOrder.output_batch_number}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-grey-2">生產數量</p>
|
||||
<p className="font-medium text-grey-0">
|
||||
{productionOrder.output_quantity.toLocaleString()}
|
||||
{productionOrder.product?.base_unit?.name && (
|
||||
<span className="text-gray-400 ml-1 font-normal">{productionOrder.product.base_unit.name}</span>
|
||||
)}
|
||||
{productionOrder.output_box_count && (
|
||||
<span className="text-gray-400 ml-2 font-normal">({productionOrder.output_box_count} 箱)</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-grey-2">入庫倉庫</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Warehouse className="h-4 w-4 text-gray-400" />
|
||||
<p className="font-medium text-grey-0">{productionOrder.warehouse?.name || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-grey-2">生產日期</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-gray-400" />
|
||||
<p className="font-medium text-grey-0">{productionOrder.production_date}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-grey-2">成品效期</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-gray-400" />
|
||||
<p className="font-medium text-grey-0">{productionOrder.expiry_date || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-grey-2">操作人員</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="h-4 w-4 text-gray-400" />
|
||||
<p className="font-medium text-grey-0">{productionOrder.user?.name || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{productionOrder.remark && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<div className="flex items-start gap-2">
|
||||
<FileText className="h-4 w-4 text-gray-400 mt-1" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">備註</p>
|
||||
<p className="text-gray-700">{productionOrder.remark}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 原物料使用明細 (BOM) */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Link2 className="h-5 w-5 text-gray-500" />
|
||||
原物料使用明細 (BOM) - 追溯資訊
|
||||
</h2>
|
||||
|
||||
{productionOrder.items.length === 0 ? (
|
||||
<p className="text-center text-gray-500 py-8">無原物料記錄</p>
|
||||
) : (
|
||||
<div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader className="bg-gray-50">
|
||||
<TableRow>
|
||||
<TableHead className="px-4 py-3 text-left text-xs font-medium text-grey-2">
|
||||
原物料
|
||||
</TableHead>
|
||||
<TableHead className="px-4 py-3 text-left text-xs font-medium text-grey-2">
|
||||
批號
|
||||
</TableHead>
|
||||
<TableHead className="px-4 py-3 text-left text-xs font-medium text-grey-2">
|
||||
來源國家
|
||||
</TableHead>
|
||||
<TableHead className="px-4 py-3 text-left text-xs font-medium text-grey-2">
|
||||
入庫日期
|
||||
</TableHead>
|
||||
<TableHead className="px-4 py-3 text-left text-xs font-medium text-grey-2">
|
||||
使用量
|
||||
</TableHead>
|
||||
<TableHead className="px-4 py-3 text-left text-xs font-medium text-grey-2">
|
||||
來源採購單
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{productionOrder.items.map((item) => (
|
||||
<TableRow key={item.id} className="hover:bg-gray-50/50">
|
||||
<TableCell className="px-4 py-4 text-sm">
|
||||
<div className="font-medium text-grey-0">{item.inventory?.product?.name || '-'}</div>
|
||||
<div className="text-gray-400 text-xs">
|
||||
{item.inventory?.product?.code || '-'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4 text-sm font-mono text-primary-main">
|
||||
{item.inventory?.batch_number || '-'}
|
||||
{item.inventory?.box_number && (
|
||||
<span className="text-gray-300 ml-1">#{item.inventory.box_number}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4 text-sm text-grey-1">
|
||||
{item.inventory?.origin_country || '-'}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4 text-sm text-grey-1">
|
||||
{item.inventory?.arrival_date || '-'}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4 text-sm font-medium text-grey-0">
|
||||
{item.quantity_used.toLocaleString()}
|
||||
{item.unit?.name && (
|
||||
<span className="text-gray-400 ml-1 font-normal text-xs">{item.unit.name}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-4 text-sm">
|
||||
{item.inventory?.source_purchase_order ? (
|
||||
<div className="flex flex-col">
|
||||
<Link
|
||||
href={route('purchase-orders.show', item.inventory.source_purchase_order.id)}
|
||||
className="text-primary-main hover:underline font-medium"
|
||||
>
|
||||
{item.inventory.source_purchase_order.code}
|
||||
</Link>
|
||||
{item.inventory.source_purchase_order.vendor && (
|
||||
<span className="text-[11px] text-gray-400 mt-0.5">
|
||||
{item.inventory.source_purchase_order.vendor.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user