mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修正 BOM 單位顯示與完工入庫彈窗 UI 統一規範

Browse Source
This commit is contained in:
sky121113
2026-02-12 16:30:34 +08:00
parent eb5ab58093
commit 5be4d49679
20 changed files with 1186 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

463
resources/js/Pages/Production/Show.tsx
View File

@@ -3,15 +3,28 @@
* 含追溯資訊：成品批號 → 原物料批號 → 來源採購單
*/
import { Factory, ArrowLeft, Package, Calendar, User, Warehouse, FileText, Link2 } from 'lucide-react';
import { Factory, ArrowLeft, Package, Calendar, User, Warehouse, FileText, Link2, Send, CheckCircle2, PlayCircle, Ban, ArrowRightCircle } from 'lucide-react';
import { formatQuantity } from "@/lib/utils";
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link } from "@inertiajs/react";
import { Head, Link, useForm, router } 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";
import { Badge } from "@/Components/ui/badge";
import ProductionOrderStatusBadge from '@/Components/ProductionOrder/ProductionOrderStatusBadge';
import { ProductionStatusProgressBar } from '@/Components/ProductionOrder/ProductionStatusProgressBar';
import { PRODUCTION_ORDER_STATUS, ProductionOrderStatus } from '@/constants/production-order';
import WarehouseSelectionModal from '@/Components/ProductionOrder/WarehouseSelectionModal';
import { useState } from 'react';
import { formatDate } from '@/lib/date';
interface Warehouse {
id: number;
name: string;
}
interface ProductionOrderItem {
// ... (後面保持不變)
id: number;
quantity_used: number;
unit?: { id: number; name: string } | null;
@@ -22,6 +35,7 @@ interface ProductionOrderItem {
arrival_date: string | null;
origin_country: string | null;
product: { id: number; name: string; code: string } | null;
warehouse?: { id: number; name: string } | null;
source_purchase_order?: {
id: number;
code: string;
@@ -34,14 +48,16 @@ interface ProductionOrder {
id: number;
code: string;
product: { id: number; name: string; code: string; base_unit?: { name: string } | null } | null;
product_id: number;
warehouse: { id: number; name: string } | null;
warehouse_id: number | 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';
status: ProductionOrderStatus;
remark: string | null;
created_at: string;
items: ProductionOrderItem[];
@@ -49,200 +65,363 @@ interface ProductionOrder {
interface Props {
productionOrder: ProductionOrder;
warehouses: Warehouse[];
auth: {
user: {
id: number;
name: string;
roles: string[];
permissions: string[];
} | null;
};
}
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, warehouses, auth }: Props) {
const [isWarehouseModalOpen, setIsWarehouseModalOpen] = useState(false);
const { processing } = useForm({
status: '' as ProductionOrderStatus,
warehouse_id: null as number | null,
});
const handleStatusUpdate = (newStatus: string, extraData?: {
warehouseId?: number;
batchNumber?: string;
expiryDate?: string;
}) => {
router.patch(route('production-orders.update-status', productionOrder.id), {
status: newStatus,
warehouse_id: extraData?.warehouseId,
output_batch_number: extraData?.batchNumber,
expiry_date: extraData?.expiryDate,
}, {
onSuccess: () => {
setIsWarehouseModalOpen(false);
},
preserveScroll: true,
});
};
const userPermissions = auth.user?.permissions || [];
const hasPermission = (permission: string) => auth.user?.roles?.includes('super-admin') || userPermissions.includes(permission);
// 權限判斷
const canApprove = hasPermission('production_orders.approve');
const canCancel = hasPermission('production_orders.cancel');
const canEdit = hasPermission('production_orders.edit');
export default function ProductionShow({ productionOrder }: Props) {
return (
<AuthenticatedLayout breadcrumbs={getBreadcrumbs("productionOrdersShow")}>
<Head title={`生產單 ${productionOrder.code}`} />
<div className="container mx-auto p-6 max-w-7xl">
<WarehouseSelectionModal
isOpen={isWarehouseModalOpen}
onClose={() => setIsWarehouseModalOpen(false)}
onConfirm={(data) => handleStatusUpdate(PRODUCTION_ORDER_STATUS.COMPLETED, data)}
warehouses={warehouses}
processing={processing}
productCode={productionOrder.product?.code}
productId={productionOrder.product?.id}
/>
<div className="container mx-auto p-6 max-w-7xl animate-in fade-in duration-500">
{/* Header 區塊 */}
<div className="mb-6">
{/* 返回按鈕 (統一規範：標題上方，mb-4) */}
<Link href={route('production-orders.index')}>
<Button
variant="outline"
className="gap-2 button-outlined-primary mb-6"
className="gap-2 button-outlined-primary mb-4"
>
<ArrowLeft className="h-4 w-4" />
返回生產單
返回列表
</Button>
</Link>
<div className="flex items-center justify-between">
<div className="flex flex-wrap items-center justify-between gap-4">
<div>
<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">
生產工單詳情與追溯資訊
<div className="flex items-center gap-3">
<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>
<ProductionOrderStatusBadge status={productionOrder.status} />
</div>
<p className="text-gray-500 text-sm mt-1">
建立人員：{productionOrder.user?.name || '-'} | 建立時間：{formatDate(productionOrder.created_at)}
</p>
</div>
<Badge variant={statusConfig[productionOrder.status]?.variant || "secondary"} className="text-sm">
{statusConfig[productionOrder.status]?.label || productionOrder.status}
</Badge>
{/* 操作按鈕區 (統一規範樣式類別) */}
<div className="flex items-center gap-2">
{/* 草稿 -> 提交審核 */}
{productionOrder.status === PRODUCTION_ORDER_STATUS.DRAFT && (
<>
{canEdit && (
<Link href={route('production-orders.edit', productionOrder.id)}>
<Button variant="outline" className="gap-2 button-outlined-primary">
<FileText className="h-4 w-4" />
編輯工單
</Button>
</Link>
)}
<Button
onClick={() => handleStatusUpdate(PRODUCTION_ORDER_STATUS.PENDING)}
className="gap-2 button-filled-primary"
>
<Send className="h-4 w-4" />
送審工單
</Button>
</>
)}
{/* 待審核 -> 核准 / 駁回 */}
{productionOrder.status === PRODUCTION_ORDER_STATUS.PENDING && canApprove && (
<>
<Button
variant="outline"
onClick={() => handleStatusUpdate(PRODUCTION_ORDER_STATUS.DRAFT)}
className="gap-2 button-outlined-error"
>
<ArrowLeft className="h-4 w-4" />
退回草稿
</Button>
<Button
onClick={() => handleStatusUpdate(PRODUCTION_ORDER_STATUS.APPROVED)}
className="gap-2 button-filled-success"
>
<CheckCircle2 className="h-4 w-4" />
核准工單
</Button>
</>
)}
{/* 已核准 -> 開始製作 */}
{productionOrder.status === PRODUCTION_ORDER_STATUS.APPROVED && (
<Button
onClick={() => handleStatusUpdate(PRODUCTION_ORDER_STATUS.IN_PROGRESS)}
className="gap-2 button-filled-primary"
>
<PlayCircle className="h-4 w-4" />
開始製作 (扣除原料庫存)
</Button>
)}
{/* 製作中 -> 完成製作 */}
{productionOrder.status === PRODUCTION_ORDER_STATUS.IN_PROGRESS && (
<Button
onClick={() => setIsWarehouseModalOpen(true)}
className="gap-2 button-filled-primary"
>
<ArrowRightCircle className="h-4 w-4" />
製作完成 (成品入庫)
</Button>
)}
{/* 可作廢狀態 (非已完成/已作廢/草稿之外) */}
{!([PRODUCTION_ORDER_STATUS.COMPLETED, PRODUCTION_ORDER_STATUS.CANCELLED, PRODUCTION_ORDER_STATUS.DRAFT] as ProductionOrderStatus[]).includes(productionOrder.status) && canCancel && (
<Button
variant="outline"
onClick={() => {
if (confirm('確定要作廢此生產工單嗎？此動作無法復原。')) {
handleStatusUpdate(PRODUCTION_ORDER_STATUS.CANCELLED);
}
}}
className="gap-2 button-outlined-error"
>
<Ban className="h-4 w-4" />
作廢工單
</Button>
)}
</div>
</div>
</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 className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
{/* 狀態進度條 */}
<div className="lg:col-span-3">
<ProductionStatusProgressBar currentStatus={productionOrder.status} />
</div>
{/* 成品資訊 (統一規範：bg-white rounded-xl border border-gray-200 shadow-sm p-6) */}
<div className="lg:col-span-2 space-y-6">
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 h-full">
<h2 className="text-lg font-semibold mb-6 flex items-center gap-2 text-grey-0">
<Package className="h-5 w-5 text-primary-main" />
成品資訊
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-8">
<div className="space-y-1.5">
<p className="text-xs font-semibold text-grey-2 uppercase tracking-wider">成品商品</p>
<div>
<p className="font-bold text-grey-0 text-lg">
{productionOrder.product?.name || '-'}
</p>
<p className="text-gray-400 text-sm font-mono mt-0.5">
{productionOrder.product?.code || '-'}
</p>
</div>
</div>
<div className="space-y-1.5">
<p className="text-xs font-semibold text-grey-2 uppercase tracking-wider">生產批號</p>
<p className="font-mono font-bold text-primary-main text-lg py-1 px-2 bg-primary-lightest rounded-md inline-block">
{productionOrder.output_batch_number}
</p>
</div>
<div className="space-y-1.5">
<p className="text-xs font-semibold text-grey-2 uppercase tracking-wider">預計/實際產量</p>
<div className="flex items-baseline gap-1.5">
<p className="font-bold text-grey-0 text-xl">
{formatQuantity(productionOrder.output_quantity)}
</p>
{productionOrder.product?.base_unit?.name && (
<span className="text-grey-2 font-medium">{productionOrder.product.base_unit.name}</span>
)}
{productionOrder.output_box_count && (
<span className="text-grey-3 ml-2 text-sm">({productionOrder.output_box_count} 箱)</span>
)}
</div>
</div>
<div className="space-y-1.5">
<p className="text-xs font-semibold text-grey-2 uppercase tracking-wider">入庫倉庫</p>
<div className="flex items-center gap-2 bg-grey-5 p-2 rounded-lg border border-grey-4">
<Warehouse className="h-4 w-4 text-grey-3" />
<p className="font-semibold text-grey-0">{productionOrder.warehouse?.name || (productionOrder.status === PRODUCTION_ORDER_STATUS.COMPLETED ? '系統錯誤' : '待選取')}</p>
</div>
</div>
</div>
{productionOrder.remark && (
<div className="mt-8 pt-6 border-t border-grey-4 transition-all hover:bg-grey-5 p-2 rounded-lg">
<div className="flex items-start gap-3">
<FileText className="h-5 w-5 text-grey-3 mt-0.5" />
<div>
<p className="text-xs font-semibold text-grey-2 uppercase tracking-wider mb-1">備註資訊</p>
<p className="text-grey-1 leading-relaxed">{productionOrder.remark}</p>
</div>
</div>
</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 className="lg:col-span-1">
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 h-full space-y-8">
<h2 className="text-lg font-semibold flex items-center gap-2 text-grey-0">
<Calendar className="h-5 w-5 text-primary-main" />
時間與人員
</h2>
<div className="space-y-6">
<div className="flex items-start gap-4 p-3 rounded-lg bg-primary-lightest border border-primary-light/20">
<Calendar className="h-5 w-5 text-primary-main mt-1" />
<div>
<p className="text-xs font-bold text-primary-main/60 uppercase">生產日期</p>
<p className="font-bold text-grey-0 text-lg">{formatDate(productionOrder.production_date)}</p>
</div>
</div>
<div className="flex items-start gap-4 p-3 rounded-lg bg-orange-50 border border-orange-100">
<Calendar className="h-5 w-5 text-orange-600 mt-1" />
<div>
<p className="text-xs font-bold text-orange-900/50 uppercase">成品效期</p>
<p className="font-bold text-orange-900 text-lg">{formatDate(productionOrder.expiry_date)}</p>
</div>
</div>
<div className="flex items-start gap-4 p-3 rounded-lg bg-grey-5 border border-grey-4">
<User className="h-5 w-5 text-grey-2 mt-1" />
<div>
<p className="text-xs font-bold text-grey-3 uppercase">執行人員</p>
<p className="font-bold text-grey-1 text-lg">{productionOrder.user?.name || '-'}</p>
</div>
</div>
</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>
{/* 原物料使用明細 (BOM) (統一規範：bg-white rounded-xl border border-gray-200 shadow-sm p-6) */}
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg font-semibold flex items-center gap-2 text-grey-0">
<Link2 className="h-5 w-5 text-primary-main" />
原料耗用與追溯
</h2>
<Badge variant="outline" className="text-grey-3 font-medium">
共 {productionOrder.items.length} 項物料
</Badge>
</div>
{productionOrder.items.length === 0 ? (
<p className="text-center text-gray-500 py-8">無原物料記錄</p>
<div className="flex flex-col items-center justify-center py-16 text-grey-3 bg-grey-5 rounded-xl border-2 border-dashed border-grey-4">
<Package className="h-10 w-10 mb-4 opacity-20 text-grey-2" />
<p>無原物料消耗記錄</p>
</div>
) : (
<div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
<div className="rounded-xl border border-grey-4 overflow-hidden shadow-sm">
<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>
<TableHeader className="bg-grey-5/80 backdrop-blur-sm transition-colors">
<TableRow className="hover:bg-transparent border-b-grey-4">
<TableHead className="px-6 py-4 text-xs font-bold text-grey-2 uppercase tracking-widest leading-none">原物料</TableHead>
<TableHead className="px-6 py-4 text-xs font-bold text-grey-2 uppercase tracking-widest leading-none">來源倉庫</TableHead>
<TableHead className="px-6 py-4 text-xs font-bold text-grey-2 uppercase tracking-widest leading-none">使用批號</TableHead>
<TableHead className="px-6 py-4 text-xs font-bold text-grey-2 uppercase tracking-widest leading-none text-center">來源國家</TableHead>
<TableHead className="px-6 py-4 text-xs font-bold text-grey-2 uppercase tracking-widest leading-none">使用數量</TableHead>
<TableHead className="px-6 py-4 text-xs font-bold text-grey-2 uppercase tracking-widest leading-none">來源單據</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">
<TableRow key={item.id} className="hover:bg-grey-5/80 transition-colors border-b-grey-4 last:border-0">
<TableCell className="px-6 py-5">
<div className="font-bold text-grey-0">{item.inventory?.product?.name || '-'}</div>
<div className="text-grey-3 text-xs font-mono mt-1 px-1.5 py-0.5 bg-grey-5 border border-grey-4 rounded inline-block">
{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 className="px-6 py-5">
<div className="text-grey-0 font-medium">{item.inventory?.warehouse?.name || '-'}</div>
</TableCell>
<TableCell className="px-4 py-4 text-sm text-grey-1">
{item.inventory?.origin_country || '-'}
<TableCell className="px-6 py-5">
<div className="font-mono font-bold text-primary-main bg-primary-lightest border border-primary-light/10 px-2 py-1 rounded inline-flex items-center gap-2">
{item.inventory?.batch_number || '-'}
{item.inventory?.box_number && (
<span className="text-primary-main/60 text-[10px] bg-white px-1 rounded shadow-sm">#{item.inventory.box_number}</span>
)}
</div>
</TableCell>
<TableCell className="px-4 py-4 text-sm text-grey-1">
{item.inventory?.arrival_date || '-'}
<TableCell className="px-6 py-5 text-center">
<span className="px-3 py-1 bg-grey-5 border border-grey-4 rounded-full text-xs font-bold text-grey-2">
{item.inventory?.origin_country || '-'}
</span>
</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 className="px-6 py-5">
<div className="flex items-baseline gap-1">
<span className="font-bold text-grey-0 text-base">{formatQuantity(item.quantity_used)}</span>
{item.unit?.name && (
<span className="text-grey-3 text-xs font-medium uppercase">{item.unit.name}</span>
)}
</div>
</TableCell>
<TableCell className="px-4 py-4 text-sm">
<TableCell className="px-6 py-5">
{item.inventory?.source_purchase_order ? (
<div className="flex flex-col">
<div className="group flex flex-col">
<Link
href={route('purchase-orders.show', item.inventory.source_purchase_order.id)}
className="text-primary-main hover:underline font-medium"
className="text-primary-main hover:text-primary-dark font-bold inline-flex items-center gap-1 group-hover:underline transition-all"
>
{item.inventory.source_purchase_order.code}
<ArrowLeft className="h-3 w-3 rotate-180 opacity-0 group-hover:opacity-100 transition-opacity" />
</Link>
{item.inventory.source_purchase_order.vendor && (
<span className="text-[11px] text-gray-400 mt-0.5">
<span className="text-[10px] text-grey-3 font-bold uppercase tracking-tight mt-0.5 whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px]">
{item.inventory.source_purchase_order.vendor.name}
</span>
)}
</div>
) : (
<span className="text-gray-400">-</span>
<span className="text-grey-4">—</span>
)}
</TableCell>
</TableRow>