231 lines
8.8 KiB
TypeScript
231 lines
8.8 KiB
TypeScript
/**
|
|
* 倉庫卡片元件
|
|
* 顯示單個倉庫的資訊和統計
|
|
*/
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Package,
|
|
AlertTriangle,
|
|
MapPin,
|
|
Edit,
|
|
Info,
|
|
FileText,
|
|
CupSoda,
|
|
QrCode,
|
|
Milk,
|
|
} from "lucide-react";
|
|
import { Warehouse, WarehouseStats } from "@/types/warehouse";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import { Card, CardContent } from "@/Components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/Components/ui/dialog";
|
|
import { Can } from "@/Components/Permission/Can";
|
|
|
|
interface WarehouseCardProps {
|
|
warehouse: Warehouse;
|
|
stats: WarehouseStats;
|
|
hasWarning: boolean;
|
|
onViewInventory: (warehouseId: string) => void;
|
|
onEdit: (warehouse: Warehouse) => void;
|
|
}
|
|
|
|
const WAREHOUSE_TYPE_LABELS: Record<string, string> = {
|
|
standard: "標準倉",
|
|
production: "生產倉",
|
|
retail: "門市倉",
|
|
vending: "販賣機",
|
|
transit: "在途倉",
|
|
quarantine: "瑕疵倉",
|
|
};
|
|
|
|
export default function WarehouseCard({
|
|
warehouse,
|
|
stats,
|
|
hasWarning,
|
|
onViewInventory,
|
|
onEdit,
|
|
}: WarehouseCardProps) {
|
|
const [showInfoDialog, setShowInfoDialog] = useState(false);
|
|
const isVending = warehouse.type === 'vending';
|
|
|
|
return (
|
|
<Card
|
|
className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg flex flex-col group ${isVending
|
|
? "border-primary-400 border-2 bg-white min-h-[300px]"
|
|
: hasWarning
|
|
? "border-orange-400 border-2 bg-orange-50/50"
|
|
: "border-gray-200"
|
|
}`}
|
|
>
|
|
{/* 裝飾性背景元素 (僅限販賣機) */}
|
|
{isVending && (
|
|
<>
|
|
{/* LED 裝飾線條 - 保持主色調 */}
|
|
<div className="absolute top-0 bottom-0 left-0 w-1 bg-primary-500 shadow-[1px_0_5px_rgba(var(--primary-main-rgb),0.2)]" />
|
|
</>
|
|
)}
|
|
|
|
{/* 警告橫幅 */}
|
|
{hasWarning && (
|
|
<div className="absolute top-0 left-0 right-0 bg-orange-500 text-white px-4 py-1 flex items-center justify-between text-sm z-10">
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<span>低庫存警告</span>
|
|
</div>
|
|
<span className="font-bold">{stats.lowStockCount} 項</span>
|
|
</div>
|
|
)}
|
|
|
|
<CardContent className={`p-6 flex flex-col flex-1 ${hasWarning ? "pt-12" : "pt-6"}`}>
|
|
{/* 上半部：資訊區域 */}
|
|
<div className="flex-1 relative z-10">
|
|
{/* 標題區塊 */}
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="text-2xl font-bold text-gray-900">
|
|
{warehouse.name}
|
|
</h3>
|
|
<button
|
|
onClick={() => setShowInfoDialog(true)}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
<Info className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
<div className="flex gap-2 mt-1">
|
|
<Badge
|
|
variant={warehouse.type === 'quarantine' ? "secondary" : "outline"}
|
|
className={`text-xs font-normal ${warehouse.type === 'quarantine' ? 'bg-red-100 text-red-700 border-red-200' : ''}`}
|
|
>
|
|
{WAREHOUSE_TYPE_LABELS[warehouse.type || 'standard'] || '標準倉'}
|
|
{warehouse.type === 'quarantine' ? ' (不計入可用)' : ' (計入可用)'}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-gray-600 mb-4 line-clamp-2 min-h-[40px]">
|
|
{warehouse.description || (isVending ? "管理此機台的商品配貨與補貨狀況" : "無描述")}
|
|
</div>
|
|
|
|
{/* 統計區塊 */}
|
|
<div className="space-y-3">
|
|
<Can permission="inventory.view_cost">
|
|
{warehouse.type !== 'quarantine' && (
|
|
<div className="flex items-center justify-between p-3 rounded-lg bg-primary-50/50 border border-primary-100 text-primary-700">
|
|
<div className="flex items-center gap-2">
|
|
<Package className="h-4 w-4 opacity-80" />
|
|
<span className="text-sm font-medium">帳面庫存估值</span>
|
|
</div>
|
|
<div className="text-sm font-bold text-primary-main">
|
|
${Number(stats.totalValue || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Can>
|
|
|
|
<Can permission="inventory.view_cost">
|
|
{Number(stats.abnormalValue || 0) > 0 && (
|
|
<div className="flex items-center justify-between p-3 rounded-lg bg-red-50/50 border border-red-100 mt-3">
|
|
<div className="flex items-center gap-2 text-red-700">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<span className="text-sm font-medium">
|
|
{warehouse.type === 'quarantine' ? '瑕疵總計' : '過期統計'}
|
|
</span>
|
|
</div>
|
|
<div className="text-sm font-bold text-red-600">
|
|
${Number(stats.abnormalValue || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Can>
|
|
|
|
{/* 販賣機特色視覺：投幣、取物口裝飾 (移動至帳面庫存下方，顏色更顯眼) */}
|
|
{isVending && (
|
|
<div className="flex gap-4 mt-6 items-end">
|
|
<div className="flex-1 h-12 bg-gray-100 rounded-lg border-2 border-gray-300 shadow-inner flex items-center justify-center relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-gray-200/50 to-transparent pointer-events-none" />
|
|
<div className="flex gap-1 items-end opacity-30 pb-1">
|
|
<CupSoda className="h-5 w-5 text-gray-400 rotate-12 -translate-x-1" />
|
|
<Milk className="h-6 w-6 text-gray-500 -rotate-12 translate-y-1" />
|
|
<CupSoda className="h-5 w-5 text-gray-400 rotate-3" />
|
|
<Milk className="h-5 w-5 text-gray-400 -rotate-6 translate-x-1" />
|
|
<CupSoda className="h-6 w-6 text-gray-500 rotate-12 translate-y-1" />
|
|
</div>
|
|
</div>
|
|
<div className="w-10 h-10 bg-gray-200 rounded-sm border-2 border-gray-400 flex items-center justify-center p-1 shadow-sm self-center">
|
|
<div className="text-gray-600 opacity-60">
|
|
<QrCode className="h-6 w-6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 下半部：操作按鈕 */}
|
|
<div className="mt-5 pt-4 border-t border-gray-200">
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={() => onViewInventory(warehouse.id)}
|
|
className="flex-1 button-filled-primary"
|
|
size="sm"
|
|
>
|
|
<Package className="h-4 w-4 mr-2" />
|
|
查看庫存
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onEdit(warehouse)}
|
|
className="button-outlined-primary"
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* 倉庫資訊對話框 */}
|
|
<Dialog open={showInfoDialog} onOpenChange={setShowInfoDialog}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{warehouse.name}</DialogTitle>
|
|
<DialogDescription>
|
|
{warehouse.code}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-start gap-2 text-gray-600">
|
|
<MapPin className="h-5 w-5 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="text-sm text-gray-500 mb-1">地址</p>
|
|
<p className="text-gray-900">{warehouse.address || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-start gap-2 text-gray-600">
|
|
<FileText className="h-5 w-5 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="text-sm text-gray-500 mb-1">描述</p>
|
|
<p className="text-gray-900 whitespace-pre-wrap">{warehouse.description || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Card>
|
|
);
|
|
} |