From a684628dadfeba45110594d6f3135d98e6aa7e4a Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Thu, 14 May 2026 16:51:21 +0800
Subject: [PATCH] =?UTF-8?q?[STYLE]=20=E5=84=AA=E5=8C=96=E5=84=80=E8=A1=A8?=
 =?UTF-8?q?=E6=9D=BF=E6=A9=9F=E5=8F=B0=E5=88=97=E8=A1=A8=E4=BA=92=E5=8B=95?=
 =?UTF-8?q?=E9=AB=94=E9=A9=97=E8=88=87=E5=BA=AB=E5=AD=98=E5=B0=8E=E8=88=AA?=
 =?UTF-8?q?=E9=82=8F=E8=BC=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 移除儀表板機台狀態表格中不直觀的「操作」(眼睛圖標) 欄位，簡化介面。
2. 將「運行狀態」與「下位機狀態」文字區域改為可點擊連結，導向至機台列表並自動帶入序號篩選。
3. 將「目前庫存」進度條改為可點擊連結，並優化跳轉邏輯改用 machine_id 參數。
4. 優化行動版介面，移除冗餘的「Inventory Overview」按鈕，改為直接點擊庫存進度條即可跳轉。
---
 resources/views/admin/dashboard.blade.php | 235 +++++++++++-----------
 1 file changed, 113 insertions(+), 122 deletions(-)

diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index 909a60d..d9cfe5c 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -197,7 +197,6 @@
                         <th class="px-6 py-4 text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Today Cumulative Sales') }}</th>
                         <th class="px-6 py-4 text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Current Stock') }}</th>
                         <th class="px-6 py-4 text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Last Signal') }}</th>
-                        <th class="px-6 py-4 text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
                     </tr>
                 </thead>
                 <tbody class="divide-y divide-slate-50 dark:divide-slate-800/50">
@@ -217,98 +216,94 @@
                             </div>
                         </td>
                         <td class="px-6 py-6 text-center">
-                            @php $cStatus = $machine->calculated_status; @endphp
-                            <div class="flex flex-col items-center gap-0.5">
-                                @if($cStatus === 'online')
-                                <div class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 tooltip"
-                                    title="{{ $machine->is_unstable ? __('Connection is unstable (disconnected :count times in the last hour)', ['count' => $machine->recent_disconnection_count]) : __('Machine connection is normal') }}">
-                                    <div class="relative flex h-2 w-2">
-                                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                                        <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                            <a href="{{ route('admin.machines.index', ['search' => $machine->serial_no]) }}" class="block hover:scale-105 transition-transform">
+                                @php $cStatus = $machine->calculated_status; @endphp
+                                <div class="flex flex-col items-center gap-0.5">
+                                    @if($cStatus === 'online')
+                                    <div class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 tooltip"
+                                        title="{{ $machine->is_unstable ? __('Connection is unstable (disconnected :count times in the last hour)', ['count' => $machine->recent_disconnection_count]) : __('Machine connection is normal') }}">
+                                        <div class="relative flex h-2 w-2">
+                                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                                            <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                                        </div>
+                                        <span class="text-[10px] font-black text-emerald-600 dark:text-emerald-400 tracking-widest uppercase">{{ __('Online') }}</span>
+                                        @if($machine->is_unstable)
+                                        <div class="ml-1 text-amber-500 animate-pulse">
+                                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                                                <path d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                            </svg>
+                                        </div>
+                                        @endif
                                     </div>
-                                    <span class="text-[10px] font-black text-emerald-600 dark:text-emerald-400 tracking-widest uppercase">{{ __('Online') }}</span>
-                                    @if($machine->is_unstable)
-                                    <div class="ml-1 text-amber-500 animate-pulse">
-                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
-                                            <path d="M13 10V3L4 14h7v7l9-11h-7z" />
-                                        </svg>
+                                    @elseif($cStatus === 'warning')
+                                    <div class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20">
+                                        <div class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
+                                        <span class="text-[10px] font-black text-amber-600 dark:text-amber-400 tracking-widest uppercase">{{ __('Warning') }}</span>
+                                    </div>
+                                    @elseif($cStatus === 'error')
+                                    <div class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-rose-500/10 border border-rose-500/20">
+                                        <div class="h-2 w-2 rounded-full bg-rose-500 animate-pulse"></div>
+                                        <span class="text-[10px] font-black text-rose-600 dark:text-rose-400 tracking-widest uppercase">{{ __('Error') }}</span>
+                                    </div>
+                                    @else
+                                    <div class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-500/10 border border-slate-500/20">
+                                        <div class="h-2 w-2 rounded-full bg-slate-400"></div>
+                                        <span class="text-[10px] font-black text-slate-600 dark:text-slate-400 tracking-widest uppercase">{{ __('Offline') }}</span>
                                     </div>
                                     @endif
+                                    @if($machine->latest_status_log_time && in_array($cStatus, ['error', 'warning']))
+                                    <span class="text-[9px] font-bold text-slate-400">{{ $machine->latest_status_log_time->diffForHumans() }}</span>
+                                    @endif
                                 </div>
-                                @elseif($cStatus === 'warning')
-                                <div class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20">
-                                    <div class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
-                                    <span class="text-[10px] font-black text-amber-600 dark:text-amber-400 tracking-widest uppercase">{{ __('Warning') }}</span>
-                                </div>
-                                @elseif($cStatus === 'error')
-                                <div class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-rose-500/10 border border-rose-500/20">
-                                    <div class="h-2 w-2 rounded-full bg-rose-500 animate-pulse"></div>
-                                    <span class="text-[10px] font-black text-rose-600 dark:text-rose-400 tracking-widest uppercase">{{ __('Error') }}</span>
-                                </div>
-                                @else
-                                <div class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-500/10 border border-slate-500/20">
-                                    <div class="h-2 w-2 rounded-full bg-slate-400"></div>
-                                    <span class="text-[10px] font-black text-slate-600 dark:text-slate-400 tracking-widest uppercase">{{ __('Offline') }}</span>
-                                </div>
-                                @endif
-                                @if($machine->latest_status_log_time && in_array($cStatus, ['error', 'warning']))
-                                <span class="text-[9px] font-bold text-slate-400">{{ $machine->latest_status_log_time->diffForHumans() }}</span>
-                                @endif
-                            </div>
+                            </a>
                         </td>
                         <td class="px-6 py-6 text-center">
-                            @php $hStatus = $machine->hardware_status; @endphp
-                            <div class="flex flex-col items-center gap-0.5">
-                                <div class="flex items-center justify-center gap-1.5">
-                                    <span class="w-1.5 h-1.5 rounded-full {{ 
-                                        $hStatus === 'error' ? 'bg-rose-500 animate-pulse' : 
-                                        ($hStatus === 'warning' ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500/50') 
-                                    }}"></span>
-                                    <span class="text-[10px] font-black {{ 
-                                        $hStatus === 'error' ? 'text-rose-500' : 
-                                        ($hStatus === 'warning' ? 'text-amber-500' : 'text-slate-400') 
-                                    }} uppercase tracking-widest">
-                                        {{ $hStatus === 'error' ? __('Error') : ($hStatus === 'warning' ? __('Warning') : __('Normal')) }}
-                                    </span>
+                            <a href="{{ route('admin.machines.index', ['search' => $machine->serial_no]) }}" class="block hover:scale-105 transition-transform">
+                                @php $hStatus = $machine->hardware_status; @endphp
+                                <div class="flex flex-col items-center gap-0.5">
+                                    <div class="flex items-center justify-center gap-1.5">
+                                        <span class="w-1.5 h-1.5 rounded-full {{ 
+                                            $hStatus === 'error' ? 'bg-rose-500 animate-pulse' : 
+                                            ($hStatus === 'warning' ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500/50') 
+                                        }}"></span>
+                                        <span class="text-[10px] font-black {{ 
+                                            $hStatus === 'error' ? 'text-rose-500' : 
+                                            ($hStatus === 'warning' ? 'text-amber-500' : 'text-slate-400') 
+                                        }} uppercase tracking-widest">
+                                            {{ $hStatus === 'error' ? __('Error') : ($hStatus === 'warning' ? __('Warning') : __('Normal')) }}
+                                        </span>
+                                    </div>
+                                    @if($machine->latest_hardware_log_time && $hStatus !== 'normal')
+                                    <span class="text-[9px] font-bold text-slate-400">{{ $machine->latest_hardware_log_time->diffForHumans() }}</span>
+                                    @endif
                                 </div>
-                                @if($machine->latest_hardware_log_time && $hStatus !== 'normal')
-                                <span class="text-[9px] font-bold text-slate-400">{{ $machine->latest_hardware_log_time->diffForHumans() }}</span>
-                                @endif
-                            </div>
+                            </a>
                         </td>
                         <td class="px-6 py-6 text-center">
                             <span class="text-base font-extrabold text-slate-900 dark:text-slate-100">$ {{ number_format($machine->today_sales_sum ?? 0, 0) }}</span>
                         </td>
                         <td class="px-6 py-6">
-                            @php
-                            $stockSum = (float)($machine->slots_sum_stock ?? 0);
-                            $maxStockSum = (float)($machine->slots_sum_max_stock ?? 0);
-                            $stockPercentage = $maxStockSum > 0 ? round(($stockSum / $maxStockSum) * 100, 1) : 0;
-                            $barColor = $stockPercentage < 20 ? 'bg-rose-500' : ($stockPercentage < 50 ? 'bg-amber-500' : 'bg-emerald-500');
-                            $textColor = str_replace('bg-', 'text-', $barColor);
-                            @endphp
-                            <div class="flex flex-col items-center gap-y-2.5">
-                                <div class="w-32 h-2 bg-slate-100 dark:bg-white/10 border border-slate-200/60 dark:border-slate-700/30 rounded-full overflow-hidden shadow-inner">
-                                    <div class="h-full {{ $barColor }} rounded-full" style="width: {{ $stockPercentage }}%"></div>
+                            <a href="{{ route('admin.warehouses.machine-inventory', ['machine_id' => $machine->id]) }}" class="block group/stock hover:scale-105 transition-transform">
+                                @php
+                                $stockSum = (float)($machine->slots_sum_stock ?? 0);
+                                $maxStockSum = (float)($machine->slots_sum_max_stock ?? 0);
+                                $stockPercentage = $maxStockSum > 0 ? round(($stockSum / $maxStockSum) * 100, 1) : 0;
+                                $barColor = $stockPercentage < 20 ? 'bg-rose-500' : ($stockPercentage < 50 ? 'bg-amber-500' : 'bg-emerald-500');
+                                $textColor = str_replace('bg-', 'text-', $barColor);
+                                @endphp
+                                <div class="flex flex-col items-center gap-y-2.5">
+                                    <div class="w-32 h-2 bg-slate-100 dark:bg-white/10 border border-slate-200/60 dark:border-slate-700/30 rounded-full overflow-hidden shadow-inner group-hover/stock:ring-2 group-hover/stock:ring-cyan-500/30 transition-all">
+                                        <div class="h-full {{ $barColor }} rounded-full" style="width: {{ $stockPercentage }}%"></div>
+                                    </div>
+                                    <span class="text-sm font-black {{ $textColor }} uppercase tracking-[0.2em] group-hover/stock:text-cyan-500 transition-colors">{{ $stockPercentage }}%</span>
                                 </div>
-                                <span class="text-sm font-black {{ $textColor }} uppercase tracking-[0.2em]">{{ $stockPercentage }}%</span>
-                            </div>
+                            </a>
                         </td>
                         <td class="px-6 py-6 text-center">
                             <div class="text-xs font-black text-slate-400 dark:text-slate-400/80 uppercase tracking-widest leading-none">
                                 {{ $machine->last_heartbeat_at ? $machine->last_heartbeat_at->format('Y-m-d H:i:s') : '---' }}
                             </div>
                         </td>
-                        <td class="px-6 py-6 text-right">
-                            <a href="{{ route('admin.warehouses.machine-inventory', ['machine_id' => $machine->id]) }}"
-                                class="p-2.5 inline-flex items-center justify-center rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-transparent hover:border-cyan-500/20 transition-all shadow-sm"
-                                title="{{ __('View Inventory Overview') }}">
-                                <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.644C3.67 8.5 7.652 6 12 6c4.348 0 8.332 2.5 9.964 5.678a1.012 1.012 0 0 1 0 .644C20.33 15.5 16.348 18 12 18c-4.348 0-8.332-2.5-9.964-5.678z" />
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
-                                </svg>
-                            </a>
-                        </td>
                     </tr>
                     @empty
                     <tr>
@@ -376,38 +371,42 @@
                     <div>
                         <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Status') }}</p>
                         <div class="flex flex-col">
-                            <p class="text-sm font-bold text-slate-700 dark:text-slate-300 capitalize">
-                                @if($cStatus === 'online')
-                                    <span class="text-emerald-500">{{ __('Online') }}</span>
-                                @elseif($cStatus === 'warning')
-                                    <span class="text-amber-500">{{ __('Warning') }}</span>
-                                @elseif($cStatus === 'error')
-                                    <span class="text-rose-500">{{ __('Error') }}</span>
-                                @else
-                                    <span class="text-slate-400">{{ __('Offline') }}</span>
+                            <a href="{{ route('admin.machines.index', ['search' => $machine->serial_no]) }}" class="block hover:scale-105 transition-transform origin-left">
+                                <p class="text-sm font-bold text-slate-700 dark:text-slate-300 capitalize">
+                                    @if($cStatus === 'online')
+                                        <span class="text-emerald-500">{{ __('Online') }}</span>
+                                    @elseif($cStatus === 'warning')
+                                        <span class="text-amber-500">{{ __('Warning') }}</span>
+                                    @elseif($cStatus === 'error')
+                                        <span class="text-rose-500">{{ __('Error') }}</span>
+                                    @else
+                                        <span class="text-slate-400">{{ __('Offline') }}</span>
+                                    @endif
+                                </p>
+                                @if($machine->latest_status_log_time && in_array($cStatus, ['error', 'warning']))
+                                <span class="text-[9px] font-bold text-slate-400">{{ $machine->latest_status_log_time->diffForHumans() }}</span>
                                 @endif
-                            </p>
-                            @if($machine->latest_status_log_time && in_array($cStatus, ['error', 'warning']))
-                            <span class="text-[9px] font-bold text-slate-400">{{ $machine->latest_status_log_time->diffForHumans() }}</span>
-                            @endif
+                            </a>
                         </div>
                     </div>
                     <div>
                         <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Sub-machine Status') }}</p>
                         @php $hStatus = $machine->hardware_status; @endphp
                         <div class="flex flex-col">
-                            <p class="text-sm font-bold text-slate-700 dark:text-slate-300 capitalize">
-                                @if($hStatus === 'error')
-                                    <span class="text-rose-500">{{ __('Error') }}</span>
-                                @elseif($hStatus === 'warning')
-                                    <span class="text-amber-500">{{ __('Warning') }}</span>
-                                @else
-                                    <span class="text-emerald-500">{{ __('Normal') }}</span>
+                            <a href="{{ route('admin.machines.index', ['search' => $machine->serial_no]) }}" class="block hover:scale-105 transition-transform origin-left">
+                                <p class="text-sm font-bold text-slate-700 dark:text-slate-300 capitalize">
+                                    @if($hStatus === 'error')
+                                        <span class="text-rose-500">{{ __('Error') }}</span>
+                                    @elseif($hStatus === 'warning')
+                                        <span class="text-amber-500">{{ __('Warning') }}</span>
+                                    @else
+                                        <span class="text-emerald-500">{{ __('Normal') }}</span>
+                                    @endif
+                                </p>
+                                @if($machine->latest_hardware_log_time && $hStatus !== 'normal')
+                                <span class="text-[9px] font-bold text-slate-400">{{ $machine->latest_hardware_log_time->diffForHumans() }}</span>
                                 @endif
-                            </p>
-                            @if($machine->latest_hardware_log_time && $hStatus !== 'normal')
-                            <span class="text-[9px] font-bold text-slate-400">{{ $machine->latest_hardware_log_time->diffForHumans() }}</span>
-                            @endif
+                            </a>
                         </div>
                     </div>
                     <div class="col-span-2">
@@ -419,31 +418,23 @@
                 </div>
 
                 <!-- Stock Bar Section (Essential for Dashboard) -->
-                <div class="mb-6">
-                    @php
-                        $stockSum = (float)($machine->slots_sum_stock ?? 0);
-                        $maxStockSum = (float)($machine->slots_sum_max_stock ?? 0);
-                        $stockPercentage = $maxStockSum > 0 ? round(($stockSum / $maxStockSum) * 100, 1) : 0;
-                        $barColor = $stockPercentage < 20 ? 'bg-rose-500' : ($stockPercentage < 50 ? 'bg-amber-500' : 'bg-emerald-500');
-                    @endphp
-                    <div class="flex justify-between items-end mb-2">
-                        <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{ __('Current Stock') }}</p>
-                        <span class="text-xs font-black {{ str_replace('bg-', 'text-', $barColor) }}">{{ $stockPercentage }}%</span>
-                    </div>
-                    <div class="w-full h-2 bg-slate-100 dark:bg-white/10 rounded-full overflow-hidden shadow-inner">
-                        <div class="h-full {{ $barColor }} transition-all duration-500" style="width: {{ $stockPercentage }}%"></div>
-                    </div>
+                <div class="mb-2">
+                    <a href="{{ route('admin.warehouses.machine-inventory', ['machine_id' => $machine->id]) }}" class="block group/stock-mobile">
+                        @php
+                            $stockSum = (float)($machine->slots_sum_stock ?? 0);
+                            $maxStockSum = (float)($machine->slots_sum_max_stock ?? 0);
+                            $stockPercentage = $maxStockSum > 0 ? round(($stockSum / $maxStockSum) * 100, 1) : 0;
+                            $barColor = $stockPercentage < 20 ? 'bg-rose-500' : ($stockPercentage < 50 ? 'bg-amber-500' : 'bg-emerald-500');
+                        @endphp
+                        <div class="flex justify-between items-end mb-2">
+                            <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest group-hover/stock-mobile:text-cyan-500 transition-colors">{{ __('Current Stock') }}</p>
+                            <span class="text-xs font-black {{ str_replace('bg-', 'text-', $barColor) }} group-hover/stock-mobile:scale-110 transition-transform">{{ $stockPercentage }}%</span>
+                        </div>
+                        <div class="w-full h-2 bg-slate-100 dark:bg-white/10 rounded-full overflow-hidden shadow-inner group-hover/stock-mobile:ring-2 group-hover/stock-mobile:ring-cyan-500/30 transition-all">
+                            <div class="h-full {{ $barColor }} transition-all duration-500" style="width: {{ $stockPercentage }}%"></div>
+                        </div>
+                    </a>
                 </div>
-
-                <!-- Action Button -->
-                <a href="{{ route('admin.warehouses.machine-inventory', ['machine_id' => $machine->id]) }}" 
-                   class="flex items-center justify-center gap-2 w-full py-3.5 rounded-2xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50 group/btn">
-                    <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.644C3.67 8.5 7.652 6 12 6c4.348 0 8.332 2.5 9.964 5.678a1.012 1.012 0 0 1 0 .644C20.33 15.5 16.348 18 12 18c-4.348 0-8.332-2.5-9.964-5.678z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
-                    </svg>
-                    {{ __('Inventory Overview') }}
-                </a>
             </div>
             @empty
             <div class="col-span-full py-20 text-center text-slate-400 font-bold border-2 border-dashed border-slate-100 dark:border-slate-800 rounded-3xl">