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

56
resources/js/Pages/PurchaseOrder/Show.tsx
View File

@@ -12,6 +12,7 @@ import CopyButton from "@/Components/shared/CopyButton";
import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable";
import type { PurchaseOrder } from "@/types/purchase-order";
import { formatCurrency, formatDateTime } from "@/utils/format";
import { formatDate } from "@/lib/date";
import { getShowBreadcrumbs } from "@/utils/breadcrumb";
import { toast } from "sonner";
import { PageProps } from "@/types/global";
@@ -40,18 +41,23 @@ export default function ViewPurchaseOrderPage({ order }: Props) {
</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">
<ShoppingCart 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">
<ShoppingCart className="h-6 w-6 text-primary-main" />
採購單: {order.poNumber}
</h1>
<PurchaseOrderStatusBadge status={order.status} />
<span className="text-gray-500 text-sm">單號：{order.poNumber}</span>
</div>
<p className="text-sm text-gray-500 font-medium flex items-center gap-2">
供應商: {order.supplierName} <span className="mx-1">|</span>
{/* 此處將申請單位及申請人一起顯示 */}
建立者: {order.warehouse_name} ({order.createdBy}) <span className="mx-1">|</span>
時間: {formatDateTime(order.createdAt)}
</p>
</div>
<div className="flex items-center gap-3">
<div className="flex flex-wrap items-center gap-2">
<PurchaseOrderActions order={order} />
</div>
</div>
@@ -64,39 +70,17 @@ export default function ViewPurchaseOrderPage({ order }: Props) {
{/* 基本資訊與品項 */}
<div className="space-y-8">
{/* 基本資訊卡片 */}
{/* 基本資訊卡片 (省略已在標題顯示的欄位) */}
<div className="bg-white rounded-lg border shadow-sm p-6">
<h2 className="text-lg font-bold text-gray-900 mb-6">基本資訊</h2>
<div className="grid grid-cols-1 md:grid-cols-2 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">{order.poNumber}</span>
<CopyButton text={order.poNumber} label="複製單號" />
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">供應商</span>
<span className="font-medium text-gray-900">{order.supplierName}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">申請單位 (申請人)</span>
<span className="font-medium text-gray-900">
{order.warehouse_name} ({order.createdBy})
</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">建立日期</span>
<span className="font-medium text-gray-900">{formatDateTime(order.createdAt)}</span>
</div>
<h2 className="text-lg font-bold text-gray-900 mb-6">進階資訊</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>
<span className="font-medium text-gray-900">{order.orderDate || "-"}</span>
<span className="font-medium text-gray-900">{order.orderDate ? formatDate(order.orderDate) : "-"}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">預計到貨日期</span>
<span className="font-medium text-gray-900">{order.expectedDate || "-"}</span>
<span className="font-medium text-gray-900">{order.expectedDate ? formatDate(order.expectedDate) : "-"}</span>
</div>
</div>
{order.remark && (