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

resources/js/Components/Warehouse/Inventory/InventoryImportDialog.tsx

@@ -20,9 +20,10 @@ interface Props {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     warehouseId: string;
+    warehouseName: string;
 }
 
-export default function InventoryImportDialog({ open, onOpenChange, warehouseId }: Props) {
+export default function InventoryImportDialog({ open, onOpenChange, warehouseId, warehouseName }: Props) {
     const { data, setData, post, processing, errors, reset, clearErrors } = useForm({
         file: null as File | null,
         inboundDate: new Date().toISOString().split('T')[0],
@@ -63,6 +64,9 @@ export default function InventoryImportDialog({ open, onOpenChange, warehouseId
                     <DialogTitle>匯入庫存資料</DialogTitle>
                     <DialogDescription>
                         請先下載範本，填寫完畢後上傳檔案進行批次入庫。
+                        <div className="mt-2 p-2 bg-primary-main/5 border border-primary-main/20 rounded text-primary-main font-medium">
+                            目標倉庫：{warehouseName}
+                        </div>
                     </DialogDescription>
                 </DialogHeader>
 

resources/js/Components/Warehouse/Inventory/InventoryTable.tsx

@@ -135,9 +135,19 @@ export default function InventoryTable({
                                             ) : (
                                                 <ChevronRight className="h-5 w-5 text-gray-600" />
                                             )}
-                                            <h3 className="font-semibold text-gray-900">{group.productName}</h3>
+                                            <h3 className="font-semibold text-gray-900">
+                                                {group.productName}
+                                                {isVending && group.batches.length > 0 && (() => {
+                                                    const locations = Array.from(new Set(group.batches.map(b => b.location).filter(Boolean)));
+                                                    return locations.length > 0 ? (
+                                                        <span className="ml-2 text-primary-main font-bold">
+                                                            {locations.map(loc => `[${loc}]`).join('')}
+                                                        </span>
+                                                    ) : null;
+                                                })()}
+                                            </h3>
                                             <span className="text-sm text-gray-500">
-                                                {hasInventory ? `${group.batches.length} 個批號` : '無庫存'}
+                                                {isVending ? '' : (hasInventory ? `${group.batches.length} 個批號` : '無庫存')}
                                             </span>
                                             {group.batches.some(b => b.expiryDate && new Date(b.expiryDate) < new Date()) && (
                                                 <Badge className="bg-red-50 text-red-600 border-red-200">
@@ -220,7 +230,7 @@ export default function InventoryTable({
                                                             <TableRow key={batch.id}>
                                                                 <TableCell className="text-grey-2">{index + 1}</TableCell>
                                                                 <TableCell>{batch.batchNumber || "-"}</TableCell>
-                                                                <TableCell>{batch.location || "-"}</TableCell>
+                                                                <TableCell className="font-medium text-primary-main">{batch.location || "-"}</TableCell>
                                                                 <TableCell>
                                                                     <span>{batch.quantity} {batch.unit}</span>
                                                                 </TableCell>

resources/js/Components/Warehouse/SafetyStock/SafetyStockList.tsx

@@ -53,7 +53,16 @@ export default function SafetyStockList({
     });
 
     // 獲取狀態徽章 (與 InventoryTable 保持一致)
-    const getStatusBadge = (quantity: number, safetyStock: number) => {
+    const getStatusBadge = (quantity: number, safetyStock: number, isNew?: boolean) => {
+        // 如果是自動帶入的品項且尚未存檔，顯示「未設定」
+        if (isNew) {
+            return (
+                <Badge variant="outline" className="text-gray-400 border-gray-200 font-normal">
+                    未設定
+                </Badge>
+            );
+        }
+
         const status = getSafetyStockStatus(quantity, safetyStock);
         switch (status) {
             case "正常":
@@ -122,7 +131,7 @@ export default function SafetyStockList({
                                     </span>
                                 </TableCell>
                                 <TableCell>
-                                    {getStatusBadge(currentStock, setting.safetyStock)}
+                                    {getStatusBadge(currentStock, setting.safetyStock, setting.isNew)}
                                 </TableCell>
                                 <TableCell className="text-right">
                                     <div className="flex justify-end gap-2">

resources/js/Components/Warehouse/WarehouseCard.tsx

@@ -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)}