2026-02-05 15:58:59 +08:00
|
|
|
/**
|
|
|
|
|
* 商品詳細資訊頁面
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
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 { Badge } from "@/Components/ui/badge";
|
|
|
|
|
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 (
|
|
|
|
|
<AuthenticatedLayout breadcrumbs={getShowBreadcrumbs("products", `商品詳情 (${product.name})`)}>
|
|
|
|
|
<Head title={`商品詳情 - ${product.name}`} />
|
|
|
|
|
|
|
|
|
|
<div className="container mx-auto p-6 max-w-7xl">
|
|
|
|
|
{/* 返回按鈕 */}
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
<Link href={route('products.index')}>
|
|
|
|
|
<Button
|
|
|
|
|
variant="outline"
|
|
|
|
|
className="gap-2 button-outlined-primary mb-6"
|
|
|
|
|
>
|
|
|
|
|
<ArrowLeft className="h-4 w-4" />
|
|
|
|
|
返回商品資料管理
|
|
|
|
|
</Button>
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
|
<div>
|
|
|
|
|
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
|
|
|
|
<Package className="h-6 w-6 text-primary-main" />
|
|
|
|
|
商品詳細資訊
|
|
|
|
|
</h1>
|
|
|
|
|
<p className="text-gray-500 mt-1">查看商品的完整規格、單位換算與價格資產</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex gap-2">
|
|
|
|
|
<Can permission="products.edit">
|
2026-02-05 16:01:29 +08:00
|
|
|
<Link href={route('products.edit', { product: product.id, from: 'show' })}>
|
2026-02-05 15:58:59 +08:00
|
|
|
<Button className="button-filled-primary">
|
|
|
|
|
編輯商品
|
|
|
|
|
</Button>
|
|
|
|
|
</Link>
|
|
|
|
|
</Can>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
|
{/* 左側：基本資料 */}
|
|
|
|
|
<div className="md:col-span-2 space-y-6">
|
|
|
|
|
<div className="bg-white rounded-lg border border-border p-6 shadow-sm">
|
|
|
|
|
<div className="flex items-center gap-2 mb-4 text-primary font-bold">
|
|
|
|
|
<Tag className="h-4 w-4" />
|
|
|
|
|
<h3>基本資料</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">商品名稱</Label>
|
|
|
|
|
<p className="mt-1 font-semibold text-lg">{product.name}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">商品代號</Label>
|
|
|
|
|
<p className="mt-1 font-mono text-gray-700">{product.code}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">條碼編號</Label>
|
|
|
|
|
<p className="mt-1 font-mono text-gray-700">{product.barcode || "-"}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">品牌</Label>
|
|
|
|
|
<p className="mt-1">{product.brand || "-"}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">所屬分類</Label>
|
|
|
|
|
<div className="mt-1">
|
|
|
|
|
<Badge variant="outline">{product.category?.name || "未分類"}</Badge>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">啟用狀態</Label>
|
|
|
|
|
<div className="mt-1">
|
|
|
|
|
<Badge className={product.is_active ? "bg-green-100 text-green-700 border-green-200" : "bg-gray-100 text-gray-500 border-gray-200"}>
|
|
|
|
|
{product.is_active ? "啟用中" : "已停用"}
|
|
|
|
|
</Badge>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 規格與儲位 */}
|
|
|
|
|
<div className="bg-white rounded-lg border border-border p-6 shadow-sm">
|
|
|
|
|
<div className="flex items-center gap-2 mb-4 text-primary font-bold">
|
|
|
|
|
<MapPin className="h-4 w-4" />
|
|
|
|
|
<h3>規格與儲位</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
|
<div className="md:col-span-2">
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">規格描述</Label>
|
|
|
|
|
<p className="mt-1 whitespace-pre-wrap text-gray-700">{product.specification || "-"}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">預設儲位</Label>
|
|
|
|
|
<p className="mt-1 font-medium">{product.location || "-"}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 右側：單位與價格 */}
|
|
|
|
|
<div className="space-y-6">
|
|
|
|
|
{/* 單位與換算 */}
|
|
|
|
|
<div className="bg-white rounded-lg border border-border p-6 shadow-sm">
|
|
|
|
|
<div className="flex items-center gap-2 mb-4 text-primary font-bold">
|
|
|
|
|
<Layers className="h-4 w-4" />
|
|
|
|
|
<h3>單位與換算</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="space-y-4">
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">基本單位 (計庫存)</Label>
|
|
|
|
|
<p className="mt-1 font-medium">{product.baseUnit?.name || "-"}</p>
|
|
|
|
|
</div>
|
|
|
|
|
{product.largeUnit && (
|
|
|
|
|
<>
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">大單位</Label>
|
|
|
|
|
<p className="mt-1 font-medium">{product.largeUnit?.name || "-"}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="p-3 bg-gray-50 rounded border border-dashed text-sm">
|
|
|
|
|
1 {product.largeUnit.name} = <span className="font-bold text-primary-main">{product.conversionRate}</span> {product.baseUnit?.name}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
<div>
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">預設採購單位</Label>
|
|
|
|
|
<p className="mt-1">{product.purchaseUnit?.name || product.baseUnit?.name || "-"}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 價格資訊 */}
|
|
|
|
|
<Can permission="inventory.view_cost">
|
|
|
|
|
<div className="bg-white rounded-lg border border-border p-6 shadow-sm">
|
|
|
|
|
<div className="flex items-center gap-2 mb-4 text-primary font-bold">
|
|
|
|
|
<DollarSign className="h-4 w-4" />
|
|
|
|
|
<h3>價格資產</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="space-y-4">
|
|
|
|
|
<div className="flex justify-between items-center border-b pb-2">
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">標準成本</Label>
|
|
|
|
|
<span className="font-mono font-bold text-red-600">${product.cost_price.toLocaleString(undefined, { minimumFractionDigits: 2 })}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex justify-between items-center border-b pb-2">
|
|
|
|
|
<Label className="text-muted-foreground text-xs text-secondary-text">零售售價</Label>
|
|
|
|
|
<span className="font-mono font-bold text-primary-main">${product.price.toLocaleString(undefined, { minimumFractionDigits: 2 })}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex justify-between items-center border-b pb-2 text-sm">
|
|
|
|
|
<Label className="text-muted-foreground text-xs">會員價</Label>
|
|
|
|
|
<span className="font-mono">${product.member_price.toLocaleString(undefined, { minimumFractionDigits: 2 })}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex justify-between items-center text-sm">
|
|
|
|
|
<Label className="text-muted-foreground text-xs">批發價</Label>
|
|
|
|
|
<span className="font-mono">${product.wholesale_price.toLocaleString(undefined, { minimumFractionDigits: 2 })}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Can>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</AuthenticatedLayout>
|
|
|
|
|
);
|
|
|
|
|
}
|
