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

UI: 統一各單據詳情頁面標題與基本資訊排版

Browse Source
This commit is contained in:
sky121113
2026-02-25 14:56:15 +08:00
parent 299cf37054
commit 878b90e2ad
7 changed files with 173 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
View File

@@ -8,7 +8,7 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, usePage, useForm } from "@inertiajs/react";
import { useState } from "react";
import GoodsReceiptStatusBadge from "@/Components/Inventory/GoodsReceiptStatusBadge";
import CopyButton from "@/Components/shared/CopyButton";
import {
Table,
TableBody,
@@ -70,82 +70,83 @@ interface GoodsReceipt {
interface Props {
receipt: GoodsReceipt;
navigation?: {
from?: string;
from_id?: string;
from_label?: string;
};
}
export default function ViewGoodsReceiptPage({ receipt }: Props) {
export default function ViewGoodsReceiptPage({ receipt, navigation }: Props) {
const typeMap: Record<string, string> = {
standard: "標準採購進貨",
miscellaneous: "雜項入庫",
other: "其他入庫",
};
const breadcrumbs = [
const breadcrumbs: any[] = [
{ label: "庫存管理", href: "#" },
{ label: "進貨單管理", href: route("goods-receipts.index") },
{ label: `單據詳情 (#${receipt.code})` },
];
let backUrl = route("goods-receipts.index");
let backLabel = "返回進貨單列表";
if (navigation?.from === 'account-payables' && navigation.from_id) {
breadcrumbs.push({
label: `應付帳款: ${navigation.from_label || navigation.from_id}`,
href: route('account-payables.show', [navigation.from_id])
});
backUrl = route('account-payables.show', [navigation.from_id]);
backLabel = `返回應付帳款 (${navigation.from_label || navigation.from_id})`;
}
breadcrumbs.push({ label: `單據詳情 (#${receipt.code})`, isPage: true });
return (
<AuthenticatedLayout breadcrumbs={breadcrumbs}>
<Head title={`進貨單詳情 - ${receipt.code}`} />
<div className="container mx-auto p-6 max-w-7xl">
{/* Header */}
<div className="mb-6">
<Link href={route("goods-receipts.index")}>
<Link href={backUrl}>
<Button
variant="outline"
className="gap-2 button-outlined-primary"
>
<ArrowLeft className="h-4 w-4" />
返回進貨單列表
{backLabel}
</Button>
</Link>
</div>
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<Package className="h-6 w-6 text-primary-main" />
查看進貨單
</h1>
<div className="flex items-center gap-2 mt-1">
{/* 頁面標題與操作 */}
<div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div className="space-y-2">
<div className="flex items-center gap-2">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<Package className="h-6 w-6 text-primary-main" />
進貨單: {receipt.code}
</h1>
<GoodsReceiptStatusBadge status={receipt.status} />
<span className="text-gray-500 text-sm">單號：{receipt.code}</span>
</div>
<p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
入庫類型: {typeMap[receipt.type] || receipt.type} <span className="mx-1">|</span>
倉庫: {receipt.warehouse?.name || "-"} <span className="mx-1">|</span>
供應商: {receipt.vendor?.name || "-"} <span className="mx-1">|</span>
進貨日期: {formatDate(receipt.received_date)}
</p>
</div>
<div className="flex items-center gap-3">
<div className="flex flex-wrap items-center gap-2">
<GoodsReceiptActions receipt={receipt} />
</div>
</div>
<div className="grid grid-cols-1 gap-8">
{/* 基本資訊卡片 */}
{/* 進階資訊卡片 */}
<div className="bg-white rounded-lg border shadow-sm p-6">
<h2 className="text-lg font-bold text-gray-900 mb-6 border-b pb-4">基本資訊</h2>
<h2 className="text-lg font-bold text-gray-900 mb-6 border-b pb-4">進階資訊</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
<div>
<span className="text-sm text-gray-500 block mb-1">進貨單編號</span>
<div className="flex items-center gap-1.5">
<span className="font-mono font-medium text-gray-900">{receipt.code}</span>
<CopyButton text={receipt.code} label="複製單號" />
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">入庫類型</span>
<span className="font-medium text-gray-900">{typeMap[receipt.type] || receipt.type}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">倉庫</span>
<span className="font-medium text-gray-900">{receipt.warehouse?.name || "-"}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">供應商</span>
<span className="font-medium text-gray-900">{receipt.vendor?.name || "-"}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">進貨日期</span>
<span className="font-medium text-gray-900">{formatDate(receipt.received_date)}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">建立時間</span>
<span className="font-medium text-gray-900">{formatDateTime(receipt.created_at)}</span>