import { ArrowLeft, TrendingUp, Package, CreditCard, Calendar, 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"; import CopyButton from "@/Components/shared/CopyButton"; 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 (

{/* Header */}

查看銷售訂單

外部單號：{order.external_order_id}

{getStatusLabel(order.status)}

{/* 左側：基本資訊與明細 */}

{/* 基本資訊卡片 */}

基本資訊

外部訂單編號

{order.external_order_id}

銷售時間

{formatDate(order.sold_at)}

付款方式

{order.payment_method || "—"}

同步時間 {formatDate(order.created_at as any)}

訂單來源 {getSourceDisplay(order.source, order.source_label)}

{/* 項目清單卡片 */}

銷售項目清單

# 商品名稱數量單價小計 {order.items.map((item, index) => ( {index + 1} {item.product_name} {formatNumber(parseFloat(item.quantity))} ${formatNumber(parseFloat(item.price))} ${formatNumber(parseFloat(item.total))} ))}

訂單總金額 ${formatNumber(parseFloat(order.total_amount))}

{/* 右側：原始資料 (Raw Payload) */}

API 原始資料

此區塊顯示同步時接收到的完整原始 JSON 內容，可用於排查資料問題。

                                    {JSON.stringify(order.raw_payload, null, 2)}

); }