[FIX] 整合機台效期管理功能並優化 UI 比例

- 修正 Alpine.js 作用域問題，恢復效期編輯彈窗功能
- 整合機台日誌與效期管理至主列表頁 (Index)
- 優化大螢幕貨道格線佈局，解決日期折行問題
- 縮小彈窗字體與內距，調整為極簡奢華風 UI
- 新增貨道效期與批號欄位之 Migration 與模型關聯
- 補齊中、英、日三語系翻譯檔

resources/views/admin/machines/logs.blade.php

@@ -1,129 +0,0 @@
-@extends('layouts.admin')
-
-@section('title', __('Machine Logs'))
-
-@section('content')
-<div class="space-y-10 pb-20">
-    <!-- Header -->
-    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
-        <div>
-            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Machine Logs') }}</h1>
-            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Monitor events and system activity across your vending fleet.') }}</p>
-        </div>
-    </div>
-
-    <!-- Machine Logs Content (Integrated Card - Same as Roles) -->
-    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
-        <!-- Toolbar (Integrated Filters) -->
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
-            <form method="GET" action="{{ route('admin.machines.logs') }}" class="flex flex-wrap items-center gap-4 group">
-                <div class="space-y-1">
-                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{{ __('Machine') }}</label>
-                    <select name="machine_id" class="luxury-select text-xs h-9 py-0" onchange="this.form.submit()">
-                        <option value="">{{ __('All Machines') }}</option>
-                        @foreach($machines as $machine)
-                            <option value="{{ $machine->id }}" {{ request('machine_id') == $machine->id ? 'selected' : '' }}>
-                                {{ $machine->name }}
-                            </option>
-                        @endforeach
-                    </select>
-                </div>
-                
-                <div class="space-y-1">
-                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{{ __('Level') }}</label>
-                    <select name="level" class="luxury-select text-xs h-9 py-0" onchange="this.form.submit()">
-                        <option value="">{{ __('All Levels') }}</option>
-                        <option value="info" {{ request('level') == 'info' ? 'selected' : '' }}>{{ __('Info') }}</option>
-                        <option value="warning" {{ request('level') == 'warning' ? 'selected' : '' }}>{{ __('Warning') }}</option>
-                        <option value="error" {{ request('level') == 'error' ? 'selected' : '' }}>{{ __('Error') }}</option>
-                    </select>
-                </div>
-
-                <div class="flex items-end gap-2 mt-5">
-                    <button type="submit" class="p-2 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 transition-colors border border-slate-200 dark:border-slate-700">
-                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-                    </button>
-                    <a href="{{ route('admin.machines.logs') }}" class="p-2 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 transition-colors border border-slate-200 dark:border-slate-700">
-                         <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
-                    </a>
-                </div>
-                <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
-            </form>
-        </div>
-
-        <div class="overflow-x-auto">
-            <table class="w-full text-left border-separate border-spacing-y-0">
-                <thead>
-                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
-                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Timestamp') }}</th>
-                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Machine') }}</th>
-                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Level') }}</th>
-                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Message Content') }}</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/80 dark:hover:bg-slate-800/40 transition-all duration-300">
-                        <td class="px-6 py-6 transition-colors">
-                            <div class="text-[13px] font-bold font-display tracking-widest text-slate-600 dark:text-slate-300">
-                                {{ $log->created_at->format('Y-m-d') }}
-                            </div>
-                            <div class="text-[11px] font-bold text-slate-400 dark:text-slate-500 tracking-wider mt-0.5 uppercase">
-                                {{ $log->created_at->format('H:i:s') }}
-                            </div>
-                        </td>
-                        <td class="px-6 py-6 transition-colors">
-                            <a href="{{ route('admin.machines.show', $log->machine_id) }}" class="inline-flex items-center gap-2 group/link">
-                                <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover/link:text-cyan-500 transition-colors">
-                                    {{ $log->machine->name ?? __('Unknown') }}
-                                </span>
-                                <svg class="w-3.5 h-3.5 text-slate-300 dark:text-slate-600 opacity-0 group-hover/link:opacity-100 transition-all -translate-x-2 group-hover/link:translate-x-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
-                            </a>
-                        </td>
-                        <td class="px-6 py-6 transition-colors">
-                            @php
-                                $badgeStyles = [
-                                    'info' => 'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border-cyan-500/20',
-                                    'warning' => 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
-                                    'error' => 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20',
-                                ];
-                                $currentStyle = $badgeStyles[$log->level] ?? 'bg-slate-500/10 text-slate-600 border-slate-500/20';
-                            @endphp
-                            <span class="inline-flex items-center px-3 py-1 rounded-lg border text-[11px] font-black uppercase tracking-wider {{ $currentStyle }}">
-                                <span class="w-1.5 h-1.5 rounded-full bg-current mr-2 animate-pulse"></span>
-                                {{ __(ucfirst($log->level)) }}
-                            </span>
-                        </td>
-                        <td class="px-6 py-6 transition-colors">
-                            <p class="text-[14px] font-medium text-slate-700 dark:text-slate-200 leading-relaxed max-w-xl">
-                                {{ $log->message }}
-                            </p>
-                            @if($log->context)
-                                <div class="mt-3 p-4 rounded-xl bg-slate-50/50 dark:bg-[#0f172a]/50 border border-slate-100 dark:border-slate-800/50 group-hover:bg-white dark:group-hover:bg-[#0f172a] transition-colors">
-                                    <pre class="text-[10px] font-bold text-slate-400 dark:text-slate-500 whitespace-pre-wrap break-all">{{ json_encode($log->context, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) }}</pre>
-                                </div>
-                            @endif
-                        </td>
-                    </tr>
-                    @empty
-                    <tr>
-                        <td colspan="4" class="px-6 py-24 text-center">
-                            <div class="flex flex-col items-center">
-                                <div class="p-4 rounded-full bg-slate-50 dark:bg-slate-800/50 mb-4 border border-slate-100 dark:border-slate-800/50">
-                                    <svg class="w-8 h-8 text-slate-300 dark:text-slate-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 7v10c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2z"/><path d="M12 11l4-4"/><path d="M8 15l4-4"/></svg>
-                                </div>
-                                <span class="text-sm font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{ __('No matching logs found') }}</span>
-                            </div>
-                        </td>
-                    </tr>
-                    @endforelse
-                </tbody>
-            </table>
-        </div>
-
-        <div class="mt-8 border-t border-slate-100 dark:border-slate-800 pt-6">
-            {{ $logs->links('vendor.pagination.luxury') }}
-        </div>
-    </div>
-</div>
-@endsection

resources/views/admin/machines/show.blade.php

@@ -30,6 +30,12 @@
                     <p class="text-xs text-gray-500 uppercase">{{ __('Last Heartbeat') }}</p>
                     <p class="text-sm">{{ $machine->last_heartbeat_at ?? __('N/A') }}</p>
                 </div>
+                <div>
+                    <p class="text-xs text-gray-500 uppercase">{{ __('Current Page') }}</p>
+                    <p class="text-sm font-bold shadow-sm inline-block px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
+                        {{ $machine->current_page_label ?: '-' }}
+                    </p>
+                </div>
             </div>
         </div>
 

resources/views/admin/machines/utilization.blade.php

@@ -0,0 +1,351 @@
+@extends('layouts.admin')
+
+@section('header')
+    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight font-display tracking-tight">
+        {{ __('Machine Management') }} > {{ __('Utilization Rate') }}
+    </h2>
+@endsection
+
+@section('content')
+<div class="space-y-8" x-data="utilizationDashboard()">
+    <!-- Page Header & Global Discovery -->
+    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
+        <div>
+            <h1 class="text-4xl font-black text-slate-800 dark:text-white tracking-tighter font-display">{{ __('Fleet Performance') }}</h1>
+            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-[0.2em]">{{ __('Utilization, OEE and Operational Intelligence') }}</p>
+        </div>
+        
+        <!-- Global Date Filter -->
+        <div class="flex items-center bg-white dark:bg-slate-900 rounded-2xl p-1.5 shadow-sm border border-slate-200 dark:border-slate-800 animate-luxury-in">
+            <button @click="prevDay()" class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors text-slate-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" /></svg></button>
+            <div class="px-4 text-sm font-black text-slate-700 dark:text-slate-200 font-mono tracking-tight" x-text="startDate"></div>
+            <button @click="nextDay()" class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors text-slate-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg></button>
+        </div>
+    </div>
+
+    <!-- Fleet Summary Cards (Always visible) -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 animate-luxury-in">
+        <!-- Avg OEE Card -->
+        <div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
+            <p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
+                <span class="w-2 h-2 rounded-full bg-cyan-500"></span>
+                {{ __('Fleet Avg OEE') }}
+            </p>
+            <div class="flex items-baseline gap-2">
+                <span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.avgOee">0</span>
+                <span class="text-2xl font-black text-cyan-500/80">%</span>
+            </div>
+            <div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
+                <span>{{ __('Target Performance') }}</span>
+                <span class="text-emerald-500 text-xs">85%</span>
+            </div>
+        </div>
+
+        <!-- Online Count Card -->
+        <div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
+            <p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
+                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
+                {{ __('Machines Online') }}
+            </p>
+            <div class="flex items-baseline gap-2">
+                <span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.onlineCount">0</span>
+                <span class="text-2xl font-black text-emerald-500/80">/ {{ count($machines) }}</span>
+            </div>
+            <div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
+                <span>{{ __('Current Operational State') }}</span>
+                <span class="text-emerald-500 text-xs">LIVE</span>
+            </div>
+        </div>
+
+        <!-- Total Sales Card -->
+        <div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
+            <p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
+                <span class="w-2 h-2 rounded-full bg-amber-500"></span>
+                {{ __('Total Daily Sales') }}
+            </p>
+            <div class="flex items-baseline gap-2">
+                <span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.totalSales">0</span>
+                <span class="text-2xl font-black text-amber-500/80">{{ __('Orders') }}</span>
+            </div>
+            <div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
+                <span>{{ __('System Health') }}</span>
+                <div class="flex items-center gap-1.5 text-rose-500">
+                    <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
+                    <span x-text="fleetStats.alertCount">0</span> Alerts
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Workspace -->
+    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
+        
+        <!-- Navigation: Machine Sidebar -->
+        <div class="lg:col-span-1">
+            <div class="luxury-card p-0 rounded-3xl overflow-hidden shadow-xl sticky top-24 border border-slate-100 dark:border-slate-800">
+                <div class="p-6 border-b border-slate-50 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
+                    <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">{{ __('Select Machine') }}</h3>
+                </div>
+                <div class="max-h-[500px] overflow-y-auto custom-scrollbar divide-y divide-slate-50 dark:divide-slate-800">
+                    @foreach($machines as $machine)
+                    <button @click="selectMachine('{{ $machine->id }}', '{{ $machine->serial_no }}', '{{ addslashes($machine->name) }}')"
+                            :class="selectedMachineId == '{{ $machine->id }}' ? 'bg-cyan-500/5 dark:bg-cyan-500/10' : 'hover:bg-slate-50/80 dark:hover:bg-slate-800/40'"
+                            class="w-full text-left p-6 transition-all duration-300 relative group">
+                        <div x-show="selectedMachineId == '{{ $machine->id }}'" class="absolute inset-y-0 left-0 w-1 bg-cyan-500 rounded-r-full"></div>
+                        <div class="flex items-center gap-4">
+                            <div class="flex-shrink-0 relative">
+                                <div :class="selectedMachineId == '{{ $machine->id }}' ? 'bg-cyan-500 shadow-cyan-500/20' : 'bg-slate-100 dark:bg-slate-800'"
+                                     class="w-12 h-12 rounded-2xl flex items-center justify-center transition-all duration-500 shadow-lg group-hover:scale-110">
+                                    <svg class="w-6 h-6" :class="selectedMachineId == '{{ $machine->id }}' ? 'text-white' : 'text-slate-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+                                </div>
+                                <span class="absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-white dark:border-slate-900" 
+                                      :class="'{{ $machine->status }}' === 'online' ? 'bg-emerald-500' : 'bg-slate-400'"></span>
+                            </div>
+                            <div class="min-w-0">
+                                <div class="text-sm font-black text-slate-800 dark:text-slate-100 truncate tracking-tight" :class="selectedMachineId == '{{ $machine->id }}' ? 'text-cyan-600 dark:text-cyan-400' : ''">{{ $machine->name }}</div>
+                                <div class="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-[0.2em] mt-0.5">{{ $machine->serial_no }}</div>
+                            </div>
+                        </div>
+                    </button>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+
+        <!-- Detail: Metrics & Insights -->
+        <div class="lg:col-span-3 space-y-8">
+            
+            <template x-if="selectedMachineId">
+                <div class="animate-luxury-in space-y-8">
+                    <!-- OEE Triple Gauges -->
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="luxury-card p-6 rounded-3xl text-center">
+                            <div id="gauge-availability" class="mx-auto h-40"></div>
+                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Availability') }}</h4>
+                        </div>
+                        <div class="luxury-card p-6 rounded-3xl text-center">
+                            <div id="gauge-performance" class="mx-auto h-40"></div>
+                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Performance') }}</h4>
+                        </div>
+                        <div class="luxury-card p-6 rounded-3xl text-center">
+                            <div id="gauge-quality" class="mx-auto h-40"></div>
+                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Quality') }}</h4>
+                        </div>
+                    </div>
+
+                    <!-- Unified Timeline Chart -->
+                    <div class="luxury-card p-8 rounded-3xl relative overflow-hidden">
+                        <div class="flex items-center justify-between mb-8">
+                            <div>
+                                <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Unified Operational Timeline') }}</h3>
+                                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1">{{ __('Connectivity vs Sales Correlation') }}</p>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div class="flex items-center gap-2">
+                                    <span class="w-3 h-1 rounded-full bg-cyan-500"></span>
+                                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">連線狀態</span>
+                                </div>
+                                <div class="flex items-center gap-2">
+                                    <span class="w-3 h-3 rounded-full bg-amber-500"></span>
+                                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">銷售事件</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div id="unified-timeline" class="w-full min-h-[350px]"></div>
+                        
+                        <div x-show="loading" class="absolute inset-0 bg-white/60 dark:bg-slate-900/60 backdrop-blur-[2px] z-20 flex items-center justify-center">
+                            <div class="flex flex-col items-center gap-3">
+                                <div class="w-8 h-8 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin"></div>
+                                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Aggregating intelligence...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <!-- Initial State -->
+            <template x-if="!selectedMachineId">
+                <div class="luxury-card p-24 rounded-3xl flex flex-col items-center justify-center text-center opacity-80 border-dashed border-2 border-slate-200 dark:border-slate-800">
+                    <div class="w-24 h-24 rounded-full bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center mb-8">
+                        <svg class="w-12 h-12 text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-2.123-7.947c-2.333 0-4.66.307-6.877.914m-1.5-3.619l1.125-1.125m0 0l1.125 1.125m-1.125-1.125V3h-.75m-6.75 4.5V3h-.75m2.25 13.5v3.25a2.25 2.25 0 01-2.25 2.25h-5.25a2.25 2.25 0 01-2.25-2.25V5.25A2.25 2.25 0 015.25 3H12m1.5 12l1.125-1.125m0 0l1.125 1.125m-1.125-1.125V18" /></svg>
+                    </div>
+                    <h3 class="text-2xl font-black text-slate-400 dark:text-slate-600 tracking-tighter">{{ __('Select a machine to deep dive') }}</h3>
+                    <p class="text-sm font-bold text-slate-400 mt-2 uppercase tracking-widest">{{ __('Real-time OEE analysis awaits') }}</p>
+                </div>
+            </template>
+
+        </div>
+    </div>
+</div>
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script>
+function utilizationDashboard() {
+    return {
+        selectedMachineId: '',
+        selectedMachineSn: '',
+        selectedMachineName: '',
+        startDate: new Date().toISOString().split('T')[0],
+        loading: false,
+        fleetStats: { avgOee: 0, onlineCount: 0, totalSales: 0, alertCount: 0 },
+        charts: {},
+
+        prevDay() {
+            let d = new Date(this.startDate);
+            d.setDate(d.getDate() - 1);
+            this.startDate = d.toISOString().split('T')[0];
+            this.fetchData();
+        },
+        nextDay() {
+            let d = new Date(this.startDate);
+            d.setDate(d.getDate() + 1);
+            this.startDate = d.toISOString().split('T')[0];
+            this.fetchData();
+        },
+
+        init() {
+            // Fleet stats from server/mock
+            this.fleetStats = {
+                avgOee: 72.4,
+                onlineCount: Number("{{ count($machines->where('status', 'online')) }}") || 0,
+                totalSales: 128,
+                alertCount: 3
+            };
+        },
+
+        selectMachine(id, sn, name) {
+            this.selectedMachineId = id;
+            this.selectedMachineSn = sn;
+            this.selectedMachineName = name;
+            this.fetchData();
+        },
+
+        async fetchData() {
+            if (!this.selectedMachineId) return;
+            this.loading = true;
+            
+            try {
+                const response = await fetch(`/admin/machines/${this.selectedMachineId}/utilization-ajax?date=${this.startDate}`);
+                const result = await response.json();
+                
+                if (result.success) {
+                    const stats = result.data.overview;
+                    const chartData = result.data.chart;
+
+                    this.$nextTick(() => {
+                        this.renderGauges(stats);
+                        this.renderTimeline(chartData);
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to fetch utilization data:', error);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        renderGauges({availability, performance, quality}) {
+            const isDark = document.documentElement.classList.contains('dark');
+            const trackColor = isDark ? '#1e293b' : '#f1f5f9';
+            
+            const createGauge = (id, value, color) => {
+                const el = document.querySelector(`#${id}`);
+                if (!el) return;
+                if (this.charts[id]) this.charts[id].destroy();
+                
+                const options = {
+                    series: [value],
+                    chart: { height: 200, type: 'radialBar', sparkline: { enabled: true } },
+                    plotOptions: {
+                        radialBar: {
+                            hollow: { size: '65%' },
+                            dataLabels: {
+                                name: { show: false },
+                                value: { 
+                                    offsetY: 10, 
+                                    fontSize: '22px', 
+                                    fontWeight: 900, 
+                                    fontFamily: 'Outfit',
+                                    color: isDark ? '#fff' : '#1e293b',
+                                    formatter: (v) => v + '%'
+                                }
+                            },
+                            track: { background: trackColor }
+                        }
+                    },
+                    colors: [color],
+                    stroke: { lineCap: 'round' }
+                };
+                this.charts[id] = new ApexCharts(el, options);
+                this.charts[id].render();
+            };
+
+            createGauge('gauge-availability', availability, '#06b6d4');
+            createGauge('gauge-performance', performance, '#f59e0b');
+            createGauge('gauge-quality', quality, '#10b981');
+        },
+
+        renderTimeline(chartData) {
+            const el = document.querySelector("#unified-timeline");
+            if (!el) return;
+            if (this.charts['timeline']) this.charts['timeline'].destroy();
+            
+            const isDark = document.documentElement.classList.contains('dark');
+            
+            const options = {
+                series: [
+                    {
+                        name: '{{ __("OEE.Activity") }}',
+                        type: 'rangeBar',
+                        data: chartData.uptime || []
+                    },
+                    {
+                        name: '{{ __("OEE.Sales") }}',
+                        type: 'scatter',
+                        data: chartData.sales || []
+                    }
+                ],
+                chart: { 
+                    height: 350, 
+                    toolbar: { show: false }, 
+                    background: 'transparent',
+                    fontFamily: 'Outfit'
+                },
+                plotOptions: { 
+                    bar: { 
+                        horizontal: true, 
+                        barHeight: '40%',
+                        rangeBarGroupRows: true
+                    } 
+                },
+                xaxis: { 
+                    type: 'datetime', 
+                    labels: { style: { colors: isDark ? '#94a3b8' : '#64748b', fontWeight: 700 } } 
+                },
+                yaxis: {
+                    labels: { style: { colors: isDark ? '#94a3b8' : '#64748b', fontWeight: 700 } }
+                },
+                markers: { size: 6, colors: ['#f59e0b'], strokeColors: '#fff', strokeWidth: 2 },
+                grid: { borderColor: isDark ? '#1e293b' : '#f1f5f9', strokeDashArray: 4 },
+                legend: { show: false },
+                tooltip: { 
+                    theme: isDark ? 'dark' : 'light',
+                    x: { format: 'HH:mm' }
+                },
+                noData: {
+                    text: '{{ __("No machines available") }}',
+                    align: 'center',
+                    verticalAlign: 'middle',
+                    style: { color: isDark ? '#475569' : '#94a3b8', fontSize: '14px', fontFamily: 'Outfit' }
+                }
+            };
+            this.charts['timeline'] = new ApexCharts(el, options);
+            this.charts['timeline'].render();
+        }
+    }
+}
+</script>
+@endpush
+@endsection

resources/views/components/breadcrumbs.blade.php

@@ -80,83 +80,91 @@
             }
 
             // 3. 處理最後一個動作/頁面
-            if ($lastSegment !== 'index') {
-                $pageLabel = match($lastSegment) {
-                    'edit' => str_starts_with($routeName, 'profile') ? null : __('Edit'),
-                    'create' => __('Create'),
-                    'show' => __('Detail'),
-                    'logs' => __('Machine Logs'),
-                    'permissions' => __('Machine Permissions'),
-                    'utilization' => __('Utilization Rate'),
-                    'expiry' => __('Expiry Management'),
-                    'maintenance' => __('Maintenance Records'),
-                    'ui-elements' => __('UI Elements'),
-                    'helper' => __('Helper'),
-                    'questionnaire' => __('Questionnaire'),
-                    'games' => __('Games'),
-                    'timer' => __('Timer'),
-                    'personal' => __('Warehouse List (Individual)'),
-                    'stock-management' => __('Stock Management'),
-                    'transfers' => __('Transfers'),
-                    'purchases' => __('Purchases'),
-                    'replenishments' => __('Replenishments'),
-                    'replenishment-records' => __('Replenishment Records'),
-                    'machine-stock' => __('Machine Stock'),
-                    'staff-stock' => __('Staff Stock'),
-                    'returns' => __('Returns'),
-                    'pickup-codes' => __('Pickup Codes'),
-                    'orders' => __('Orders'),
-                    'promotions' => __('Promotions'),
-                    'pass-codes' => __('Pass Codes'),
-                    'store-gifts' => __('Store Gifts'),
-                    'change-stock' => __('Change Stock'),
-                    'machine-reports' => __('Machine Reports'),
-                    'product-reports' => __('Product Reports'),
-                    'survey-analysis' => __('Survey Analysis'),
-                    'products' => __('Product Management'),
-                    'advertisements' => __('Advertisement Management'),
-                    'admin-products' => __('Admin Sellable Products'),
-                    'accounts' => __('Account Management'),
-                    'sub-accounts' => __('Sub Accounts'),
-                    'sub-account-roles' => __('Sub Account Roles'),
-                    'points' => __('Point Settings'),
-                    'badges' => __('Badge Settings'),
-                    'restart' => __('Machine Restart'),
-                    'restart-card-reader' => __('Card Reader Restart'),
-                    'checkout' => __('Remote Checkout'),
-                    'lock' => __('Remote Lock'),
-                    'change' => __('Remote Change'),
-                    'dispense' => __('Remote Dispense'),
-                    'official-account' => __('Line Official Account'),
-                    'coupons' => __('Line Coupons'),
-                    'stores' => __('Store Management'),
-                    'time-slots' => __('Time Slots'),
-                    'venues' => __('Venue Management'),
-                    'reservations' => __('Reservations'),
-                    'clear-stock' => __('Clear Stock'),
-                    'apk-versions' => __('APK Versions'),
-                    'discord-notifications' => __('Discord Notifications'),
-                    'app-features' => __('APP Features'),
-                    'roles' => __('Roles'),
-                    'others' => __('Others'),
-                    'ai-prediction' => __('AI Prediction'),
-                    'data-config' => __('Data Configuration Permissions'),
-                    'sales' => __('Sales Permissions'),
-                    'machines' => __('Machine Management Permissions'),
-                    'warehouses' => __('Warehouse Permissions'),
-                    'analysis' => __('Analysis Permissions'),
-                    'audit' => __('Audit Permissions'),
-                    'remote' => __('Remote Permissions'),
-                    'line' => __('Line Permissions'),
+            $pageLabel = match($lastSegment) {
+                'index' => match($segments[1] ?? '') {
+                    'members' => __('Member List'),
+                    'machines' => request()->input('tab') === 'expiry' ? __('Expiry Management') : __('Machine List'),
+                    'warehouses' => __('Warehouse List (All)'),
+                    'sales' => __('Sales Records'),
+                    'analysis' => __('Analysis Management'),
+                    'audit' => __('Audit Management'),
+                    'permission' => __('Permission Settings'),
                     default => null,
-                };
+                },
+                'edit' => str_starts_with($routeName, 'profile') ? null : __('Edit'),
+                'create' => __('Create'),
+                'show' => __('Detail'),
+                'logs' => __('Machine Logs'),
+                'permissions' => __('Machine Permissions'),
+                'utilization' => __('Utilization Rate'),
+                'expiry' => __('Expiry Management'),
+                'maintenance' => __('Maintenance Records'),
+                'ui-elements' => __('UI Elements'),
+                'helper' => __('Helper'),
+                'questionnaire' => __('Questionnaire'),
+                'games' => __('Games'),
+                'timer' => __('Timer'),
+                'personal' => __('Warehouse List (Individual)'),
+                'stock-management' => __('Stock Management'),
+                'transfers' => __('Transfers'),
+                'purchases' => __('Purchases'),
+                'replenishments' => __('Replenishments'),
+                'replenishment-records' => __('Replenishment Records'),
+                'machine-stock' => __('Machine Stock'),
+                'staff-stock' => __('Staff Stock'),
+                'returns' => __('Returns'),
+                'pickup-codes' => __('Pickup Codes'),
+                'orders' => __('Orders'),
+                'promotions' => __('Promotions'),
+                'pass-codes' => __('Pass Codes'),
+                'store-gifts' => __('Store Gifts'),
+                'change-stock' => __('Change Stock'),
+                'machine-reports' => __('Machine Reports'),
+                'product-reports' => __('Product Reports'),
+                'survey-analysis' => __('Survey Analysis'),
+                'products' => __('Product Management'),
+                'advertisements' => __('Advertisement Management'),
+                'admin-products' => __('Admin Sellable Products'),
+                'accounts' => __('Account Management'),
+                'sub-accounts' => __('Sub Accounts'),
+                'sub-account-roles' => __('Sub Account Roles'),
+                'points' => __('Point Settings'),
+                'badges' => __('Badge Settings'),
+                'restart' => __('Machine Restart'),
+                'restart-card-reader' => __('Card Reader Restart'),
+                'checkout' => __('Remote Checkout'),
+                'lock' => __('Remote Lock'),
+                'change' => __('Remote Change'),
+                'dispense' => __('Remote Dispense'),
+                'official-account' => __('Line Official Account'),
+                'coupons' => __('Line Coupons'),
+                'stores' => __('Store Management'),
+                'time-slots' => __('Time Slots'),
+                'venues' => __('Venue Management'),
+                'reservations' => __('Reservations'),
+                'clear-stock' => __('Clear Stock'),
+                'apk-versions' => __('APK Versions'),
+                'discord-notifications' => __('Discord Notifications'),
+                'app-features' => __('APP Features'),
+                'roles' => __('Roles'),
+                'others' => __('Others'),
+                'ai-prediction' => __('AI Prediction'),
+                'data-config' => __('Data Configuration Permissions'),
+                'sales' => __('Sales Permissions'),
+                'machines' => __('Machine Management Permissions'),
+                'warehouses' => __('Warehouse Permissions'),
+                'analysis' => __('Analysis Permissions'),
+                'audit' => __('Audit Permissions'),
+                'remote' => __('Remote Permissions'),
+                'line' => __('Line Permissions'),
+                default => null,
+            };
 
-                if ($pageLabel) {
-                    $links[] = [
-                        'label' => $pageLabel,
-                        'active' => true
-                    ];
-                }
+            if ($pageLabel) {
+                $links[] = [
+                    'label' => $pageLabel,
+                    'active' => true
+                ];
             }
 
             // 確保最後一個 link 是 active 的

resources/views/layouts/partials/sidebar-menu.blade.php

@@ -56,11 +56,11 @@
     </button>
     <div x-show="open" x-collapse>
         <ul class="luxury-submenu" data-sidebar-sub>
-            <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.machines.logs') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.machines.logs') }}">{{ __('Machine Logs') }}</a></li>
+            @can('menu.machines.list')
             <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.machines.index') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.machines.index') }}">{{ __('Machine List') }}</a></li>
+            @endcan
 
             <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.machines.utilization') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.machines.utilization') }}">{{ __('Utilization Rate') }}</a></li>
-            <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.machines.expiry') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.machines.expiry') }}">{{ __('Expiry Management') }}</a></li>
             <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.machines.maintenance') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.machines.maintenance') }}">{{ __('Maintenance Records') }}</a></li>
         </ul>
     </div>