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

73
resources/js/Pages/Integration/SalesOrders/Show.tsx
View File

@@ -1,4 +1,4 @@
import { ArrowLeft, TrendingUp, Package, CreditCard, Calendar, FileJson } from "lucide-react";
import { ArrowLeft, TrendingUp, FileJson } from "lucide-react";
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link } from "@inertiajs/react";
@@ -13,7 +13,6 @@ import {
import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
import { formatDate } from "@/lib/date";
import { formatNumber } from "@/utils/format";
import CopyButton from "@/Components/shared/CopyButton";
interface SalesOrderItem {
id: number;
@@ -91,62 +90,30 @@ export default function SalesOrderShow({ order }: Props) {
</Button>
</Link>
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<TrendingUp className="h-6 w-6 text-primary-main" />
查看銷售訂單
</h1>
<p className="text-gray-500 mt-1">外部單號：{order.external_order_id}</p>
<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">
<TrendingUp className="h-6 w-6 text-primary-main" />
銷售訂單: #{order.external_order_id}
</h1>
<StatusBadge variant={getStatusVariant(order.status)}>
{getStatusLabel(order.status)}
</StatusBadge>
</div>
<p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
銷售時間: {formatDate(order.sold_at)} <span className="mx-1">|</span>
付款方式: {order.payment_method || "—"} <span className="mx-1">|</span>
訂單來源: {getSourceDisplay(order.source, order.source_label)} <span className="mx-1">|</span>
同步時間: {formatDate(order.created_at as any)}
</p>
</div>
<StatusBadge variant={getStatusVariant(order.status)}>
{getStatusLabel(order.status)}
</StatusBadge>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* 左側：基本資訊與明細 */}
<div className="lg:col-span-2 space-y-6">
{/* 基本資訊卡片 */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
<h2 className="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
<Package className="h-5 w-5 text-primary-main" />
基本資訊
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-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.external_order_id}</span>
<CopyButton text={order.external_order_id} label="複製單號" />
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">銷售時間</span>
<div className="flex items-center gap-1.5 font-medium text-gray-900">
<Calendar className="h-4 w-4 text-gray-400" />
{formatDate(order.sold_at)}
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">付款方式</span>
<div className="flex items-center gap-1.5 font-medium text-gray-900">
<CreditCard className="h-4 w-4 text-gray-400" />
{order.payment_method || "—"}
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">同步時間</span>
<span className="font-medium text-gray-900">{formatDate(order.created_at as any)}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">訂單來源</span>
<span className="font-medium text-gray-900">{getSourceDisplay(order.source, order.source_label)}</span>
</div>
</div>
</div>
{/* 項目清單卡片 */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
<div className="p-6 border-b border-gray-100">
@@ -201,8 +168,8 @@ export default function SalesOrderShow({ order }: Props) {
<p className="text-sm text-gray-500 mb-4">
此區塊顯示同步時接收到的完整原始 JSON 內容，可用於排查資料問題。
</p>
<div className="bg-slate-900 rounded-lg p-4 overflow-auto max-h-[600px]">
<pre className="text-xs text-slate-300 font-mono">
<div className="bg-gray-50 border border-gray-100 rounded-lg p-4 overflow-auto max-h-[600px]">
<pre className="text-xs text-gray-700 font-mono">
{JSON.stringify(order.raw_payload, null, 2)}
</pre>
</div>