[FEAT] 整合員工識別紀錄與訂單關聯並優化 UI 顯示

1. [FEAT] 在 StaffCardLog 模型中新增 order 關聯，並在 StaffCardController 預載此關聯。
2. [STYLE] 優化員工識別使用紀錄的 UI 佈局，採用更具質感的顯示方式並使用 status-badge 組件。
3. [STYLE] 擴充 status-badge 組件，支援 verified 與 completed 狀態標籤。
4. [DOCS] 更新 zh_TW.json 語系檔，新增 Staff、Verified、Verified Only 等翻譯。

app/Http/Controllers/Admin/StaffCardController.php

@@ -32,7 +32,7 @@ class StaffCardController extends Controller
                 $q->where('company_id', $request->company_id);
             });
 
-        $logsQuery = StaffCardLog::with(['staffCard', 'machine'])
+        $logsQuery = StaffCardLog::with(['staffCard', 'machine', 'order'])
             ->when($request->log_search, function ($q) use ($request) {
                 $q->whereHas('staffCard', function ($sq) use ($request) {
                     $sq->where('name', 'like', "%{$request->log_search}%")

app/Models/StaffCardLog.php

@@ -45,4 +45,12 @@ class StaffCardLog extends Model
     {
         return $this->belongsTo(Machine::class);
     }
+
+    /**
+     * 取得關聯的訂單
+     */
+    public function order(): BelongsTo
+    {
+        return $this->belongsTo(\App\Models\Transaction\Order::class);
+    }
 }

lang/zh_TW.json

@@ -206,6 +206,7 @@
     "Cannot delete warehouse with existing stock": "無法刪除仍有庫存的倉庫",
     "Card Machine System": "刷卡機系統",
     "Card Reader": "刷卡機",
+    "Card UID": "卡片 UID",
     "Card Reader No": "刷卡機編號",
     "Card Reader Reboot": "刷卡機重啟",
     "Card Reader Restart": "卡機重啟",
@@ -302,6 +303,7 @@
     "Contract Start": "合約起始",
     "Contract Until (Optional)": "合約到期日 (選填)",
     "Contract information updated": "合約資訊已更新",
+    "Consumed": "核銷成功",
     "Control": "監控操作",
     "Copy": "複製",
     "Copy Code": "複製代碼",
@@ -665,6 +667,7 @@
     "Hrs": "小時",
     "IC Card UID": "IC 卡號",
     "ITEM": "ITEM",
+    "Identification": "識別資訊",
     "Identity & Codes": "識別與代碼",
     "Image": "圖片",
     "Image Downloaded": "圖片已下載",
@@ -759,6 +762,7 @@
     "Loyalty & Features": "行銷與點數",
     "Machine": "機台",
     "Machine / Date": "機台 / 日期",
+    "Machine / Employee": "機台 / 員工",
     "Machine / Pass Code": "機台 / 通行碼",
     "Machine / Slot": "機台 / 貨道",
     "Machine Advertisement Settings": "機台廣告設置",
@@ -1421,6 +1425,7 @@
     "Spring": "彈簧",
     "Spring Channel Limit": "彈簧貨道上限",
     "Spring Limit": "彈簧貨道上限",
+    "Staff": "員工",
     "Staff Identification Management": "員工識別管理",
     "Staff List": "員工列表",
     "Staff Name": "員工姓名",
@@ -1851,6 +1856,8 @@
     "used": "已使用",
     "user": "一般用戶",
     "vending": "販賣頁",
+    "Verified": "驗證成功",
+    "Verified Only": "僅限驗證",
     "verified": "驗證成功",
     "verify_success": "驗證成功",
     "video": "影片",

resources/views/admin/data-config/staff-cards/partials/tab-usage-logs.blade.php

@@ -62,81 +62,67 @@
             <thead>
                 <tr class="bg-slate-50/50 dark:bg-slate-900/10">
                     <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
-                        {{ __('Time') }}
+                        {{ __('Machine / Employee') }}
                     </th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
-                        {{ __('Employee') }}
-                    </th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
-                        {{ __('IC Card UID') }}
-                    </th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
-                        {{ __('Machine') }}
-                    </th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
                         {{ __('Action') }}
                     </th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
-                        {{ __('Status') }}
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
+                        {{ __('Identification') }}
+                    </th>
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
+                        {{ __('Sales Record') }}
+                    </th>
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">
+                        {{ __('Time') }}
                     </th>
                 </tr>
             </thead>
             <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
                 @forelse($logs as $log)
                     <tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
-                        <td class="px-6 py-6">
-                            <span class="text-xs font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest">{{ $log->created_at->format('Y-m-d H:i:s') }}</span>
-                        </td>
-                        <td class="px-6 py-6">
-                            <div class="flex flex-col">
-                                <span class="font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">{{ $log->staffCard?->name ?? __('Unknown') }}</span>
-                                <span class="text-xs font-bold text-slate-400 font-mono tracking-tight mt-0.5">{{ $log->staffCard?->employee_id ?? '-' }}</span>
-                            </div>
-                        </td>
-                        <td class="px-6 py-6">
-                            <code class="px-2.5 py-1 bg-slate-100 dark:bg-white/5 rounded-lg text-slate-600 dark:text-slate-400 text-xs font-black font-mono tracking-widest">{{ $log->staffCard?->card_uid ?? '-' }}</code>
-                        </td>
-                        <td class="px-6 py-6">
-                            <div class="flex items-center gap-3">
-                                <div class="w-10 h-10 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
+                        <td class="px-6 py-5">
+                            <div class="flex items-center gap-x-4">
+                                <div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
                                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                                     </svg>
                                 </div>
                                 <div class="flex flex-col">
-                                    <span class="font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">{{ $log->machine?->name ?? __('Unknown Machine') }}</span>
-                                    <span class="text-xs font-bold text-slate-400 font-mono tracking-tighter">{{ $log->machine?->serial_no ?? '-' }}</span>
+                                    <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">
+                                        {{ $log->machine?->name ?? $log->machine?->serial_no ?? __('Unknown Machine') }}
+                                    </span>
+                                    <span class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wide mt-0.5">
+                                        {{ __('Staff') }}: {{ $log->staffCard?->name ?? __('Unknown') }}
+                                    </span>
                                 </div>
                             </div>
                         </td>
-                        <td class="px-6 py-6">
+                        <td class="px-6 py-5 text-center whitespace-nowrap">
                             <x-status-badge :status="$log->action" size="sm" />
                         </td>
-                        <td class="px-6 py-6">
-                            <div class="flex items-center gap-2">
-                                @if($log->action === 'consume')
-                                    <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 shadow-sm shadow-emerald-500/5">
-                                        <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                                        </svg>
-                                        {{ __('Usage Completed') }}
-                                    </span>
-                                    @if($log->order_id)
-                                        <a href="{{ route('admin.sales.orders.show', $log->order_id) }}" 
-                                           class="p-1.5 rounded-lg bg-slate-100 dark:bg-white/5 text-slate-400 hover:text-cyan-500 transition-colors"
-                                           title="{{ __('View Order') }}">
-                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-                                            </svg>
-                                        </a>
-                                    @endif
-                                @else
-                                    <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest bg-slate-500/10 text-slate-500 border border-slate-500/10">
-                                        {{ __('Verified Only') }}
-                                    </span>
-                                @endif
+                        <td class="px-6 py-5 text-center">
+                            <div class="flex flex-col">
+                                <span class="text-sm font-black text-slate-800 dark:text-slate-200 tracking-tight">{{ $log->staffCard?->employee_id ?? '-' }}</span>
+                                <code class="text-[10px] font-bold text-slate-400 font-mono tracking-widest mt-0.5 uppercase">{{ $log->staffCard?->card_uid ?? '-' }}</code>
                             </div>
                         </td>
+                        <td class="px-6 py-5 text-center whitespace-nowrap">
+                            @if($log->order_id)
+                                <a href="{{ route('admin.sales.index', ['tab' => 'orders', 'search' => $log->order?->order_no ?? $log->order_id]) }}" 
+                                   class="text-xs font-black text-cyan-600 dark:text-cyan-400 hover:underline flex items-center justify-center gap-1">
+                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
+                                    {{ $log->order?->order_no ?? '#' . $log->order_id }}
+                                </a>
+                            @else
+                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest bg-slate-100 dark:bg-white/5 text-slate-400 dark:text-slate-500">
+                                    {{ __('Verified Only') }}
+                                </span>
+                            @endif
+                        </td>
+                        <td class="px-6 py-5 text-right whitespace-nowrap">
+                            <span class="text-xs font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest">{{ $log->created_at->format('Y-m-d H:i:s') }}</span>
+                        </td>
                     </tr>
                 @empty
                     <x-empty-state mode="table" :colspan="5" :message="__('No usage logs found')" />
@@ -154,15 +140,15 @@
                 <div class="flex items-center gap-4 min-w-0">
                     <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 shadow-sm shrink-0">
                         <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                         </svg>
                     </div>
                     <div class="min-w-0">
-                        <h3 class="text-xs font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest truncate">
-                            {{ $log->created_at->format('Y-m-d H:i:s') }}
+                        <h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate tracking-tight">
+                            {{ $log->machine?->name ?? $log->machine?->serial_no ?? __('Unknown Machine') }}
                         </h3>
-                        <p class="text-sm font-extrabold text-slate-800 dark:text-slate-100 truncate tracking-tight">
-                            {{ $log->staffCard?->name ?? __('Unknown') }}
+                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest truncate mt-1">
+                            {{ __('Staff') }}: {{ $log->staffCard?->name ?? __('Unknown') }}
                         </p>
                     </div>
                 </div>
@@ -170,29 +156,47 @@
                 <x-status-badge :status="$log->action" size="sm" />
             </div>
 
+            <!-- Card Body -->
+            <div class="grid grid-cols-2 gap-y-5 border-y border-slate-100 dark:border-white/5 py-6 mb-4">
                 <div>
-                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
-                        {{ __('Status') }}
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">
+                        {{ __('Employee ID') }}
+                    </p>
+                    <p class="text-sm font-bold text-slate-700 dark:text-slate-300">
+                        {{ $log->staffCard?->employee_id ?? '-' }}
+                    </p>
+                </div>
+                <div>
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">
+                        {{ __('Card UID') }}
+                    </p>
+                    <p class="text-xs font-mono font-bold text-slate-600 dark:text-slate-400 truncate">
+                        {{ $log->staffCard?->card_uid ?? '-' }}
+                    </p>
+                </div>
+                <div class="col-span-2">
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">
+                        {{ __('Sales Record') }}
+                    </p>
+                    @if($log->order_id)
+                        <a href="{{ route('admin.sales.index', ['tab' => 'orders', 'search' => $log->order?->order_no ?? $log->order_id]) }}" 
+                           class="text-sm font-black text-cyan-600 dark:text-cyan-400 hover:underline flex items-center gap-1.5">
+                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
+                            {{ $log->order?->order_no ?? '#' . $log->order_id }}
+                        </a>
+                    @else
+                        <span class="text-sm font-bold text-slate-300 dark:text-slate-700">
+                            {{ __('Verified Only') }}
+                        </span>
+                    @endif
+                </div>
+                <div class="col-span-2">
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">
+                        {{ __('Time') }}
+                    </p>
+                    <p class="text-sm font-mono font-black text-slate-700 dark:text-slate-200 tracking-tight">
+                        {{ $log->created_at->format('Y-m-d H:i:s') }}
                     </p>
-                    <div class="flex items-center gap-3">
-                        @if($log->action === 'consume')
-                            <span class="text-xs font-bold text-emerald-500 flex items-center">
-                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                                </svg>
-                                {{ __('Usage Completed') }}
-                            </span>
-                            @if($log->order_id)
-                                <a href="{{ route('admin.sales.orders.show', $log->order_id) }}" class="text-xs font-black text-cyan-500 hover:underline tracking-widest">
-                                    #{{ $log->order_id }}
-                                </a>
-                            @endif
-                        @else
-                            <span class="text-xs font-bold text-slate-500">
-                                {{ __('Verified Only') }}
-                            </span>
-                        @endif
-                    </div>
                 </div>
             </div>
         </div>

resources/views/components/status-badge.blade.php

@@ -57,7 +57,9 @@
         'expired'  => ['label' => __('Expired'),  'color' => 'rose'],
         'cancelled'=> ['label' => __('Cancelled'),'color' => 'slate'],
         'verify_success' => ['label' => __('Verified'), 'color' => 'emerald'],
-        'consume' => ['label' => __('Consumed'), 'color' => 'cyan'],
+        'verified'       => ['label' => __('Verified'), 'color' => 'emerald'],
+        'consume'        => ['label' => __('Consumed'), 'color' => 'cyan'],
+        'completed'      => ['label' => __('Completed'), 'color' => 'cyan'],
     ];
 
     $preset     = $presets[$status] ?? ['label' => $status, 'color' => 'slate'];