feat: 優化操作紀錄顯示與邏輯 (恢復描述欄位、支援來源標記、改進快照)

app/Http/Controllers/Admin/ActivityLogController.php

@@ -33,6 +33,8 @@ class ActivityLogController extends Controller
                     'App\Models\Category' => '商品分類',
                     'App\Models\Unit' => '單位',
                     'App\Models\PurchaseOrder' => '採購單',
+                    'App\Models\Warehouse' => '倉庫',
+                    'App\Models\Inventory' => '庫存',
                 ];
 
                 $eventMap = [

app/Http/Controllers/InventoryController.php

@@ -103,7 +103,8 @@ class InventoryController extends Controller
         return \Illuminate\Support\Facades\DB::transaction(function () use ($validated, $warehouse) {
             foreach ($validated['items'] as $item) {
                 // 取得或建立庫存紀錄
-                $inventory = $warehouse->inventories()->firstOrCreate(
+                // 取得或初始化庫存紀錄
+                $inventory = $warehouse->inventories()->firstOrNew(
                     ['product_id' => $item['productId']],
                     ['quantity' => 0, 'safety_stock' => null]
                 );
@@ -111,8 +112,9 @@ class InventoryController extends Controller
                 $currentQty = $inventory->quantity;
                 $newQty = $currentQty + $item['quantity'];
 
-                // 更新庫存
-                $inventory->update(['quantity' => $newQty]);
+                // 更新庫存並儲存 (新紀錄: Created, 舊紀錄: Updated)
+                $inventory->quantity = $newQty;
+                $inventory->save();
 
                 // 寫入異動紀錄
                 $inventory->transactions()->create([

app/Http/Controllers/TransferOrderController.php

@@ -56,6 +56,9 @@ class TransferOrderController extends Controller
             // 3. 執行庫存轉移 (扣除來源)
             $oldSourceQty = $sourceInventory->quantity;
             $newSourceQty = $oldSourceQty - $validated['quantity'];
+            
+            // 設定活動紀錄原因
+            $sourceInventory->activityLogReason = "撥補出庫 至 {$targetWarehouse->name}";
             $sourceInventory->update(['quantity' => $newSourceQty]);
 
             // 記錄來源異動
@@ -72,6 +75,9 @@ class TransferOrderController extends Controller
             // 4. 執行庫存轉移 (增加目標)
             $oldTargetQty = $targetInventory->quantity;
             $newTargetQty = $oldTargetQty + $validated['quantity'];
+
+            // 設定活動紀錄原因
+            $targetInventory->activityLogReason = "撥補入庫 來自 {$sourceWarehouse->name}";
             $targetInventory->update(['quantity' => $newTargetQty]);
 
             // 記錄目標異動

app/Models/Category.php

@@ -36,4 +36,13 @@ class Category extends Model
             ->logOnlyDirty()
             ->dontSubmitEmptyLogs();
     }
+
+    public function tapActivity(\Spatie\Activitylog\Contracts\Activity $activity, string $eventName)
+    {
+        $properties = $activity->properties;
+        $attributes = $properties['attributes'] ?? [];
+        $attributes['name'] = $this->name;
+        $properties['attributes'] = $attributes;
+        $activity->properties = $properties;
+    }
 }

app/Models/Inventory.php

@@ -9,6 +9,7 @@ class Inventory extends Model
 {
     /** @use HasFactory<\Database\Factories\InventoryFactory> */
     use HasFactory;
+    use \Spatie\Activitylog\Traits\LogsActivity;
 
     protected $fillable = [
         'warehouse_id',
@@ -18,6 +19,40 @@ class Inventory extends Model
         'location',
     ];
 
+    /**
+     * Transient property to store the reason for the activity log (e.g., "Replenishment #123").
+     * This is not stored in the database column but used for logging context.
+     * @var string|null
+     */
+    public $activityLogReason;
+
+    public function getActivitylogOptions(): \Spatie\Activitylog\LogOptions
+    {
+        return \Spatie\Activitylog\LogOptions::defaults()
+            ->logAll()
+            ->logOnlyDirty()
+            ->dontSubmitEmptyLogs();
+    }
+
+    public function tapActivity(\Spatie\Activitylog\Contracts\Activity $activity, string $eventName)
+    {
+        $properties = $activity->properties;
+        $attributes = $properties['attributes'] ?? [];
+
+        // Always snapshot names for context, even if IDs didn't change
+        // $this refers to the Inventory model instance
+        $attributes['warehouse_name'] = $this->warehouse ? $this->warehouse->name : ($attributes['warehouse_name'] ?? null);
+        $attributes['product_name'] = $this->product ? $this->product->name : ($attributes['product_name'] ?? null);
+
+        // Capture the reason if set
+        if ($this->activityLogReason) {
+            $attributes['_reason'] = $this->activityLogReason;
+        }
+
+        $properties['attributes'] = $attributes;
+        $activity->properties = $properties;
+    }
+
     public function warehouse(): \Illuminate\Database\Eloquent\Relations\BelongsTo
     {
         return $this->belongsTo(Warehouse::class);

app/Models/Product.php

@@ -76,6 +76,34 @@ class Product extends Model
             ->dontSubmitEmptyLogs();
     }
 
+    public function tapActivity(\Spatie\Activitylog\Contracts\Activity $activity, string $eventName)
+    {
+        $properties = $activity->properties;
+        $attributes = $properties['attributes'] ?? [];
+        
+        // Handle Category Name Snapshot
+        if (isset($attributes['category_id'])) {
+            $category = Category::find($attributes['category_id']);
+            $attributes['category_name'] = $category ? $category->name : null;
+        }
+        
+        // Handle Unit Name Snapshots
+        $unitFields = ['base_unit_id', 'large_unit_id', 'purchase_unit_id'];
+        foreach ($unitFields as $field) {
+            if (isset($attributes[$field])) {
+                $unit = Unit::find($attributes[$field]);
+                $nameKey = str_replace('_id', '_name', $field);
+                $attributes[$nameKey] = $unit ? $unit->name : null;
+            }
+        }
+        
+        // Always snapshot self name for context (so logs always show "Cola")
+        $attributes['name'] = $this->name;
+
+        $properties['attributes'] = $attributes;
+        $activity->properties = $properties;
+    }
+
     public function warehouses(): \Illuminate\Database\Eloquent\Relations\BelongsToMany
     {
         return $this->belongsToMany(Warehouse::class, 'inventories')

app/Models/Unit.php

@@ -23,4 +23,13 @@ class Unit extends Model
             ->logOnlyDirty()
             ->dontSubmitEmptyLogs();
     }
+
+    public function tapActivity(\Spatie\Activitylog\Contracts\Activity $activity, string $eventName)
+    {
+        $properties = $activity->properties;
+        $attributes = $properties['attributes'] ?? [];
+        $attributes['name'] = $this->name;
+        $properties['attributes'] = $attributes;
+        $activity->properties = $properties;
+    }
 }

app/Models/Warehouse.php

@@ -9,6 +9,7 @@ class Warehouse extends Model
 {
     /** @use HasFactory<\Database\Factories\WarehouseFactory> */
     use HasFactory;
+    use \Spatie\Activitylog\Traits\LogsActivity;
 
     protected $fillable = [
         'code',
@@ -17,6 +18,26 @@ class Warehouse extends Model
         'description',
     ];
 
+    public function getActivitylogOptions(): \Spatie\Activitylog\LogOptions
+    {
+        return \Spatie\Activitylog\LogOptions::defaults()
+            ->logAll()
+            ->logOnlyDirty()
+            ->dontSubmitEmptyLogs();
+    }
+
+    public function tapActivity(\Spatie\Activitylog\Contracts\Activity $activity, string $eventName)
+    {
+        $properties = $activity->properties;
+        $attributes = $properties['attributes'] ?? [];
+
+        // Always snapshot name
+        $attributes['name'] = $this->name;
+
+        $properties['attributes'] = $attributes;
+        $activity->properties = $properties;
+    }
+
     public function inventories(): \Illuminate\Database\Eloquent\Relations\HasMany
     {
         return $this->hasMany(Inventory::class);

resources/js/Pages/Admin/ActivityLog/ActivityDetailDialog.tsx

@@ -1,12 +1,12 @@
 import {
     Dialog,
     DialogContent,
-    DialogDescription,
     DialogHeader,
     DialogTitle,
 } from "@/Components/ui/dialog";
 import { Badge } from "@/Components/ui/badge";
 import { ScrollArea } from "@/Components/ui/scroll-area";
+import { User, Clock, Package, Activity as ActivityIcon } from "lucide-react";
 
 interface Activity {
     id: number;
@@ -27,6 +27,43 @@ interface Props {
     activity: Activity | null;
 }
 
+// Field translation map
+const fieldLabels: Record<string, string> = {
+    name: '名稱',
+    code: '代碼',
+    description: '描述',
+    price: '價格',
+    cost: '成本',
+    stock: '庫存',
+    category_id: '分類',
+    unit_id: '單位',
+    is_active: '啟用狀態',
+    conversion_rate: '換算率',
+    specification: '規格',
+    brand: '品牌',
+    base_unit_id: '基本單位',
+    large_unit_id: '大單位',
+    purchase_unit_id: '採購單位',
+    email: 'Email',
+    password: '密碼',
+    phone: '電話',
+    address: '地址',
+    role_id: '角色',
+    // Snapshot fields
+    category_name: '分類名稱',
+    base_unit_name: '基本單位名稱',
+    large_unit_name: '大單位名稱',
+    purchase_unit_name: '採購單位名稱',
+    // Warehouse & Inventory fields
+    warehouse_name: '倉庫名稱',
+    product_name: '商品名稱',
+    warehouse_id: '倉庫',
+    product_id: '商品',
+    quantity: '數量',
+    safety_stock: '安全庫存',
+    location: '儲位',
+};
+
 export default function ActivityDetailDialog({ open, onOpenChange, activity }: Props) {
     if (!activity) return null;
 
@@ -41,12 +78,12 @@ export default function ActivityDetailDialog({ open, onOpenChange, activity }: P
         !['created_at', 'updated_at', 'deleted_at', 'id'].includes(key)
     );
 
-    const getEventBadgeColor = (event: string) => {
+    const getEventBadgeClass = (event: string) => {
         switch (event) {
-            case 'created': return 'bg-green-500';
-            case 'updated': return 'bg-blue-500';
-            case 'deleted': return 'bg-red-500';
-            default: return 'bg-gray-500';
+            case 'created': return 'bg-green-100 text-green-700 hover:bg-green-200 border-green-200';
+            case 'updated': return 'bg-blue-100 text-blue-700 hover:bg-blue-200 border-blue-200';
+            case 'deleted': return 'bg-red-100 text-red-700 hover:bg-red-200 border-red-200';
+            default: return 'bg-gray-100 text-gray-700 hover:bg-gray-200 border-gray-200';
         }
     };
 
@@ -59,69 +96,129 @@ export default function ActivityDetailDialog({ open, onOpenChange, activity }: P
         }
     };
 
-    const formatValue = (value: any) => {
+    const formatValue = (key: string, value: any) => {
         if (value === null || value === undefined) return <span className="text-gray-400">-</span>;
-        if (typeof value === 'boolean') return value ? '是' : '否';
+
+        // Special handling for boolean values based on key
+        if (typeof value === 'boolean') {
+            if (key === 'is_active') return value ? '啟用' : '停用';
+            return value ? '是' : '否';
+        }
+
         if (typeof value === 'object') return JSON.stringify(value);
         return String(value);
     };
 
+    const getFieldName = (key: string) => {
+        return fieldLabels[key] || key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
+    };
+
+    // Helper to check if a key is a snapshot name field
+    const isSnapshotField = (key: string) => {
+        return ['category_name', 'base_unit_name', 'large_unit_name', 'purchase_unit_name', 'warehouse_name', 'product_name'].includes(key);
+    };
+
+    // Helper to get formatted value (merging ID and Name if available)
+    const getFormattedValue = (key: string, value: any, allData: Record<string, any>) => {
+        // If it's an ID field, check if we have a corresponding name snapshot
+        if (key.endsWith('_id')) {
+            const nameKey = key.replace('_id', '_name');
+            const nameValue = allData[nameKey];
+            if (nameValue) {
+                return `${nameValue}`;
+            }
+        }
+        return formatValue(key, value);
+    };
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="max-w-2xl">
-                <DialogHeader>
-                    <DialogTitle className="flex items-center gap-2">
-                        操作詳情
-                        <Badge className={getEventBadgeColor(activity.event)}>
+                <DialogHeader className="border-b pb-4">
+                    <DialogTitle className="flex items-center gap-3">
+                        <span className="text-xl font-bold text-gray-900">操作詳情</span>
+                        <Badge variant="outline" className={`text-sm px-3 py-1 ${getEventBadgeClass(activity.event)}`}>
                             {getEventLabel(activity.event)}
                         </Badge>
                     </DialogTitle>
-                    <DialogDescription>
-                        {activity.created_at} 由 {activity.causer} 執行的操作
-                    </DialogDescription>
+
+                    {/* Modern Metadata Strip */}
+                    <div className="flex flex-wrap items-center gap-6 pt-4 text-sm text-gray-500">
+                        <div className="flex items-center gap-2">
+                            <User className="w-4 h-4 text-gray-400" />
+                            <span className="font-medium text-gray-700">{activity.causer}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Clock className="w-4 h-4 text-gray-400" />
+                            <span>{activity.created_at}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Package className="w-4 h-4 text-gray-400" />
+                            <span>{activity.subject_type}</span>
+                        </div>
+                        {/* Only show 'description' if it differs from event name (unlikely but safe) */}
+                        {activity.description !== getEventLabel(activity.event) &&
+                            activity.description !== 'created' && activity.description !== 'updated' && (
+                                <div className="flex items-center gap-2">
+                                    <ActivityIcon className="w-4 h-4 text-gray-400" />
+                                    <span>{activity.description}</span>
+                                </div>
+                            )}
+                    </div>
                 </DialogHeader>
 
-                <div className="mt-4 space-y-4">
-                    <div className="grid grid-cols-2 gap-4 text-sm">
-                        <div>
-                            <span className="text-gray-500">操作對象：</span>
-                            <span className="font-medium ml-2">{activity.subject_type}</span>
-                        </div>
-                        <div>
-                            <span className="text-gray-500">描述：</span>
-                            <span className="font-medium ml-2">{activity.description}</span>
-                        </div>
-                    </div>
-
+                <div className="py-4">
                     {activity.event === 'created' ? (
-                        <div className="bg-gray-50 p-4 rounded-md text-center text-gray-500 text-sm">
-                            已新增資料 (初始建立)
+                        <div className="border rounded-md overflow-hidden bg-white">
+                            <div className="grid grid-cols-2 bg-gray-50/80 px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider border-b">
+                                <div>欄位</div>
+                                <div>初始內容</div>
+                            </div>
+                            <ScrollArea className="h-[300px]">
+                                <div className="divide-y divide-gray-100">
+                                    {filteredKeys
+                                        .filter(key => attributes[key] !== null && attributes[key] !== '' && !isSnapshotField(key))
+                                        .map((key) => (
+                                            <div key={key} className="grid grid-cols-2 px-4 py-3 text-sm hover:bg-gray-50/50 transition-colors">
+                                                <div className="font-medium text-gray-700">{getFieldName(key)}</div>
+                                                <div className="text-gray-900 font-medium">
+                                                    {getFormattedValue(key, attributes[key], attributes)}
+                                                </div>
+                                            </div>
+                                        ))}
+                                    {filteredKeys.filter(key => attributes[key] !== null && attributes[key] !== '' && !isSnapshotField(key)).length === 0 && (
+                                        <div className="p-8 text-center text-gray-500 text-sm">
+                                            無初始資料
+                                        </div>
+                                    )}
+                                </div>
+                            </ScrollArea>
                         </div>
                     ) : (
-                        <div className="border rounded-md">
-                            <div className="grid grid-cols-3 bg-gray-50 p-2 text-sm font-medium text-gray-500">
+                        <div className="border rounded-md overflow-hidden bg-white">
+                            <div className="grid grid-cols-3 bg-gray-50/80 px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider border-b">
                                 <div>欄位</div>
                                 <div>異動前</div>
                                 <div>異動後</div>
                             </div>
                             <ScrollArea className="h-[300px]">
-                                {filteredKeys.length > 0 ? (
-                                    <div className="divide-y">
-                                        {filteredKeys.map((key) => {
+                                {filteredKeys.some(key => !isSnapshotField(key)) ? (
+                                    <div className="divide-y divide-gray-100">
+                                        {filteredKeys
+                                            .filter(key => !isSnapshotField(key))
+                                            .map((key) => {
                                                 const oldValue = old[key];
                                                 const newValue = attributes[key];
-                                            // Ensure we catch changes even if one value is missing/null
-                                            // For deleted events, newValue might be empty, so we just show oldValue
                                                 const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue);
 
                                                 return (
-                                                <div key={key} className={`grid grid-cols-3 p-2 text-sm ${isChanged ? 'bg-yellow-50/30' : ''}`}>
-                                                    <div className="font-medium text-gray-700">{key}</div>
-                                                    <div className="text-gray-600 break-words pr-2">
-                                                        {formatValue(oldValue)}
+                                                    <div key={key} className={`grid grid-cols-3 px-4 py-3 text-sm transition-colors ${isChanged ? 'bg-amber-50/50' : 'hover:bg-gray-50/50'}`}>
+                                                        <div className="font-medium text-gray-700 flex items-center">{getFieldName(key)}</div>
+                                                        <div className="text-gray-500 break-words pr-4">
+                                                            {getFormattedValue(key, oldValue, old)}
                                                         </div>
-                                                    <div className="text-gray-900 break-words font-medium">
-                                                        {activity.event === 'deleted' ? '-' : formatValue(newValue)}
+                                                        <div className="text-gray-900 font-medium break-words">
+                                                            {activity.event === 'deleted' ? '-' : getFormattedValue(key, newValue, attributes)}
                                                         </div>
                                                     </div>
                                                 );

resources/js/Pages/Admin/ActivityLog/Index.tsx

@@ -14,7 +14,6 @@ import { Badge } from "@/Components/ui/badge";
 import Pagination from '@/Components/shared/Pagination';
 import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { FileText, Eye, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
-import { format } from 'date-fns';
 import { Button } from '@/Components/ui/button';
 import ActivityDetailDialog from './ActivityDetailDialog';
 
@@ -55,12 +54,12 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
     const [selectedActivity, setSelectedActivity] = useState<Activity | null>(null);
     const [detailOpen, setDetailOpen] = useState(false);
 
-    const getEventBadgeColor = (event: string) => {
+    const getEventBadgeClass = (event: string) => {
         switch (event) {
-            case 'created': return 'bg-green-500 hover:bg-green-600';
-            case 'updated': return 'bg-blue-500 hover:bg-blue-600';
-            case 'deleted': return 'bg-red-500 hover:bg-red-600';
-            default: return 'bg-gray-500 hover:bg-gray-600';
+            case 'created': return 'bg-green-50 text-green-700 border-green-200 hover:bg-green-100';
+            case 'updated': return 'bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100';
+            case 'deleted': return 'bg-red-50 text-red-700 border-red-200 hover:bg-red-100';
+            default: return 'bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100';
         }
     };
 
@@ -73,13 +72,69 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
         }
     };
 
+    const getDescription = (activity: Activity) => {
+        const props = activity.properties || {};
+        const attrs = props.attributes || {};
+        const old = props.old || {};
+
+        // Try to find a name in attributes or old values
+        // Priority: specific name fields > generic name > code > ID
+        const nameParams = ['product_name', 'warehouse_name', 'category_name', 'base_unit_name', 'name', 'code', 'title'];
+        let subjectName = '';
+
+        // Special handling for Inventory: show "Warehouse - Product"
+        if (attrs.warehouse_name && attrs.product_name) {
+            subjectName = `${attrs.warehouse_name} - ${attrs.product_name}`;
+        } else if (old.warehouse_name && old.product_name) {
+            subjectName = `${old.warehouse_name} - ${old.product_name}`;
+        } else {
+            // Default fallback
+            for (const param of nameParams) {
+                if (attrs[param]) {
+                    subjectName = attrs[param];
+                    break;
+                }
+                if (old[param]) {
+                    subjectName = old[param];
+                    break;
+                }
+            }
+        }
+
+        // If no name found, try ID but format it nicely if possible, or just don't show it if it's redundant with subject_type
+        if (!subjectName && (attrs.id || old.id)) {
+            subjectName = `#${attrs.id || old.id}`;
+        }
+
+        // Combine parts: [Causer] [Action] [Name] [Subject]
+        // Example: Admin 新增 可樂 商品
+        // Example: Admin 更新 台北倉 - 可樂 庫存
+        return (
+            <span className="flex items-center gap-1.5 flex-wrap">
+                <span className="font-medium text-gray-900">{activity.causer}</span>
+                <span className="text-gray-500">{getEventLabel(activity.event)}</span>
+                {subjectName && (
+                    <span className="font-medium text-primary-600 bg-primary-50 px-1.5 py-0.5 rounded text-xs">
+                        {subjectName}
+                    </span>
+                )}
+                <span className="text-gray-700">{activity.subject_type}</span>
+
+                {/* Display reason/source if available (e.g., from Replenishment) */}
+                {(attrs._reason || old._reason) && (
+                    <span className="text-gray-500 text-xs">
+                        (來自 {attrs._reason || old._reason})
+                    </span>
+                )}
+            </span>
+        );
+    };
+
     const handleViewDetail = (activity: Activity) => {
         setSelectedActivity(activity);
         setDetailOpen(true);
     };
 
-
-
     const handlePerPageChange = (value: string) => {
         setPerPage(value);
         router.get(
@@ -155,9 +210,9 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
                                     </button>
                                 </TableHead>
                                 <TableHead className="w-[150px]">操作人員</TableHead>
-                                <TableHead className="w-[100px] text-center">動作</TableHead>
-                                <TableHead className="w-[150px]">對象</TableHead>
                                 <TableHead>描述</TableHead>
+                                <TableHead className="w-[100px] text-center">動作</TableHead>
+                                <TableHead>對象</TableHead>
                                 <TableHead className="w-[100px] text-center">操作</TableHead>
                             </TableRow>
                         </TableHeader>
@@ -174,24 +229,19 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
                                         <TableCell>
                                             <span className="font-medium text-gray-900">{activity.causer}</span>
                                         </TableCell>
+                                        <TableCell>
+                                            {getDescription(activity)}
+                                        </TableCell>
                                         <TableCell className="text-center">
-                                            <Badge className={getEventBadgeColor(activity.event)}>
+                                            <Badge variant="outline" className={getEventBadgeClass(activity.event)}>
                                                 {getEventLabel(activity.event)}
                                             </Badge>
                                         </TableCell>
                                         <TableCell>
-                                            <Badge variant="outline" className="bg-slate-50">
+                                            <Badge variant="outline" className="bg-slate-50 text-slate-600 border-slate-200">
                                                 {activity.subject_type}
                                             </Badge>
                                         </TableCell>
-                                        <TableCell className="text-gray-600" title={activity.description}>
-                                            <div className="flex items-center gap-2">
-                                                <span>{activity.causer}</span>
-                                                <span className="text-gray-400">執行了</span>
-                                                <span className="font-medium text-gray-700">{activity.description}</span>
-                                                <span className="text-gray-400">動作</span>
-                                            </div>
-                                        </TableCell>
                                         <TableCell className="text-center">
                                             <Button
                                                 variant="outline"
@@ -207,7 +257,7 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
                                 ))
                             ) : (
                                 <TableRow>
-                                    <TableCell colSpan={7} className="text-center py-8 text-gray-500">
+                                    <TableCell colSpan={6} className="text-center py-8 text-gray-500">
                                         尚無操作紀錄
                                     </TableCell>
                                 </TableRow>