183 lines
8.9 KiB
TypeScript
183 lines
8.9 KiB
TypeScript
import { ArrowLeft, TrendingUp, FileJson } from "lucide-react";
|
||
import { Button } from "@/Components/ui/button";
|
||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||
import { Head, Link } from "@inertiajs/react";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/Components/ui/table";
|
||
import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
|
||
import { formatDate } from "@/lib/date";
|
||
import { formatNumber } from "@/utils/format";
|
||
|
||
interface SalesOrderItem {
|
||
id: number;
|
||
product_name: string;
|
||
quantity: string;
|
||
price: string;
|
||
total: string;
|
||
}
|
||
|
||
interface SalesOrder {
|
||
id: number;
|
||
external_order_id: string;
|
||
status: string;
|
||
payment_method: string;
|
||
total_amount: string;
|
||
sold_at: string;
|
||
created_at: string;
|
||
raw_payload: any;
|
||
items: SalesOrderItem[];
|
||
source: string;
|
||
source_label: string | null;
|
||
}
|
||
|
||
const getSourceDisplay = (source: string, sourceLabel: string | null): string => {
|
||
const base = source === 'pos' ? 'POS 收銀機'
|
||
: source === 'vending' ? '販賣機'
|
||
: source === 'manual_import' ? '手動匯入'
|
||
: source;
|
||
return sourceLabel ? `${base} (${sourceLabel})` : base;
|
||
};
|
||
|
||
interface Props {
|
||
order: SalesOrder;
|
||
}
|
||
|
||
const getStatusVariant = (status: string): StatusVariant => {
|
||
switch (status) {
|
||
case 'completed': return 'success';
|
||
case 'pending': return 'warning';
|
||
case 'cancelled': return 'destructive';
|
||
default: return 'neutral';
|
||
}
|
||
};
|
||
|
||
const getStatusLabel = (status: string): string => {
|
||
switch (status) {
|
||
case 'completed': return "已完成";
|
||
case 'pending': return "待處理";
|
||
case 'cancelled': return "已取消";
|
||
default: return status;
|
||
}
|
||
};
|
||
|
||
export default function SalesOrderShow({ order }: Props) {
|
||
return (
|
||
<AuthenticatedLayout
|
||
breadcrumbs={[
|
||
{ label: "銷售管理", href: "#" },
|
||
{ label: "銷售訂單管理", href: route("integration.sales-orders.index") },
|
||
{ label: `訂單詳情 (#${order.external_order_id})`, href: "#", isPage: true },
|
||
]}
|
||
>
|
||
<Head title={`銷售訂單詳情 - ${order.external_order_id}`} />
|
||
|
||
<div className="container mx-auto p-6 max-w-7xl">
|
||
{/* Header */}
|
||
<div className="mb-6">
|
||
<Link href={route("integration.sales-orders.index")}>
|
||
<Button
|
||
variant="outline"
|
||
className="gap-2 button-outlined-primary mb-6"
|
||
>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
返回銷售訂單列表
|
||
</Button>
|
||
</Link>
|
||
|
||
<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>
|
||
</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 overflow-hidden">
|
||
<div className="p-6 border-b border-gray-100">
|
||
<h2 className="text-lg font-bold text-gray-900 mb-0">銷售項目清單</h2>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="border rounded-lg overflow-hidden">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow className="bg-gray-50 hover:bg-gray-50">
|
||
<TableHead className="w-[50px] text-center">#</TableHead>
|
||
<TableHead>商品名稱</TableHead>
|
||
<TableHead className="text-right">數量</TableHead>
|
||
<TableHead className="text-right">單價</TableHead>
|
||
<TableHead className="text-right">小計</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{order.items.map((item, index) => (
|
||
<TableRow key={item.id}>
|
||
<TableCell className="text-gray-500 text-center">{index + 1}</TableCell>
|
||
<TableCell className="font-medium">{item.product_name}</TableCell>
|
||
<TableCell className="text-right font-medium">{formatNumber(parseFloat(item.quantity))}</TableCell>
|
||
<TableCell className="text-right text-gray-600">${formatNumber(parseFloat(item.price))}</TableCell>
|
||
<TableCell className="text-right font-bold text-primary-main">${formatNumber(parseFloat(item.total))}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
<div className="mt-6 flex justify-end">
|
||
<div className="w-full max-w-sm bg-primary-lightest/30 px-6 py-4 rounded-xl border border-primary-light/20 flex flex-col gap-3">
|
||
<div className="flex justify-between items-end w-full">
|
||
<span className="text-sm text-gray-500 font-medium mb-1">訂單總金額</span>
|
||
<span className="text-2xl font-black text-primary-main">
|
||
${formatNumber(parseFloat(order.total_amount))}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右側：原始資料 (Raw Payload) */}
|
||
<div className="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-4 flex items-center gap-2">
|
||
<FileJson className="h-5 w-5 text-primary-main" />
|
||
API 原始資料
|
||
</h2>
|
||
<p className="text-sm text-gray-500 mb-4">
|
||
此區塊顯示同步時接收到的完整原始 JSON 內容，可用於排查資料問題。
|
||
</p>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AuthenticatedLayout>
|
||
);
|
||
}
|