/** * 商品詳細資訊頁面 */ import { Head, Link } from "@inertiajs/react"; import { ArrowLeft, Package, Tag, Layers, MapPin, DollarSign } from "lucide-react"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Button } from "@/Components/ui/button"; import { StatusBadge } from "@/Components/shared/StatusBadge"; import { Label } from "@/Components/ui/label"; import { getShowBreadcrumbs } from "@/utils/breadcrumb"; import { Can } from "@/Components/Permission/Can"; interface Product { id: string; code: string; barcode: string; name: string; categoryId: number; category?: { id: number; name: string }; brand?: string; specification?: string; baseUnitId: number; baseUnit?: { id: number; name: string }; largeUnitId?: number; largeUnit?: { id: number; name: string }; purchaseUnitId?: number; purchaseUnit?: { id: number; name: string }; conversionRate: number; location?: string; cost_price: number; price: number; member_price: number; wholesale_price: number; is_active: boolean; } interface Props { product: Product; } export default function ProductShow({ product }: Props) { return (
{/* 返回按鈕 */}

商品詳細資訊

查看商品的完整規格、單位換算與價格資產

{/* 左側：基本資料 */}

基本資料

{product.name}

{product.code}

{product.barcode || "-"}

{product.brand || "-"}

{product.category?.name || "未分類"}
{product.is_active ? "啟用中" : "已停用"}
{/* 規格與儲位 */}

規格與儲位

{product.specification || "-"}

{product.location || "-"}

{/* 右側：單位與價格 */}
{/* 單位與換算 */}

單位與換算

{product.baseUnit?.name || "-"}

{product.largeUnit && ( <>

{product.largeUnit?.name || "-"}

1 {product.largeUnit.name} = {product.conversionRate} {product.baseUnit?.name}
)}

{product.purchaseUnit?.name || product.baseUnit?.name || "-"}

{/* 價格資訊 */}

價格資產

${product.cost_price.toLocaleString(undefined, { minimumFractionDigits: 2 })}
${product.price.toLocaleString(undefined, { minimumFractionDigits: 2 })}
${product.member_price.toLocaleString(undefined, { minimumFractionDigits: 2 })}
${product.wholesale_price.toLocaleString(undefined, { minimumFractionDigits: 2 })}
); }