mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(inventory): 販賣機視覺優化、修復匯入日期缺失與倉庫刪除權限錯誤

Browse Source
This commit is contained in:
sky121113
2026-02-09 10:19:46 +08:00
parent f22df90e01
commit 5e542752ba
14 changed files with 255 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
resources/js/Components/Warehouse/WarehouseCard.tsx
View File

@@ -11,6 +11,9 @@ import {
Edit,
Info,
FileText,
CupSoda,
QrCode,
Milk,
} from "lucide-react";
import { Warehouse, WarehouseStats } from "@/types/warehouse";
import { Button } from "@/Components/ui/button";
@@ -50,17 +53,28 @@ export default function WarehouseCard({
onEdit,
}: WarehouseCardProps) {
const [showInfoDialog, setShowInfoDialog] = useState(false);
const isVending = warehouse.type === 'vending';
return (
<Card
className={`relative overflow-hidden transition-all hover:shadow-lg flex flex-col ${hasWarning
? "border-orange-400 border-2 bg-orange-50/50"
: "border-gray-200"
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">
<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>
@@ -71,12 +85,14 @@ export default function WarehouseCard({
<CardContent className={`p-6 flex flex-col flex-1 ${hasWarning ? "pt-12" : "pt-6"}`}>
{/* 上半部：資訊區域 */}
<div className="flex-1">
<div className="flex-1 relative z-10">
{/* 標題區塊 */}
<div className="flex items-start justify-between mb-4">
<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">{warehouse.name}</h3>
<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"
@@ -92,30 +108,22 @@ export default function WarehouseCard({
{WAREHOUSE_TYPE_LABELS[warehouse.type || 'standard'] || '標準倉'}
{warehouse.type === 'quarantine' ? ' (不計入可用)' : ' (計入可用)'}
</Badge>
{warehouse.type === 'transit' && warehouse.license_plate && (
<Badge variant="secondary" className="text-xs font-normal bg-yellow-100 text-yellow-800 border-yellow-200">
{warehouse.license_plate} {warehouse.driver_name && `(${warehouse.driver_name})`}
</Badge>
)}
</div>
</div>
</div>
<div className="text-sm text-gray-600 mb-4 line-clamp-2 min-h-[40px]">
{warehouse.description || "無描述"}
{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">
<div className="flex items-center gap-2 text-primary-700">
<Package className="h-4 w-4" />
<span className="text-sm font-medium">帳面庫存總計</span>
<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 })}
@@ -124,7 +132,6 @@ export default function WarehouseCard({
)}
</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">
@@ -141,12 +148,31 @@ export default function WarehouseCard({
)}
</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-3 border-t border-gray-200">
<div className="mt-5 pt-4 border-t border-gray-200">
<div className="flex gap-2">
<Button
onClick={() => onViewInventory(warehouse.id)}