terrylee/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[STYLE] 現代化機台稼動率儀表板與語系優化

Browse Source 
1. 更新機台稼動率頁面日期選擇器為專案標準 Luxury UI，並整合 Flatpickr 新增「今日」與「清除」按鈕。
2. 修正稼動率頁面中因字串換行與多餘空格導致的語系翻譯失效問題。
3. 更新稼動率副標題，移除過時的 OEE 描述並修正為「全機台即時狀態與營收監控」。
4. 同步更新 zh_TW, en, ja 語系 JSON 檔以包含最新的介面文字翻譯。
5. 重構 MachineService.php 移除冗餘的計算邏輯，提升稼動率數據查詢效能。
6. 更新 API 技術規格文件以反映最新的通訊協議規範。
This commit is contained in:
sky121113 2026-05-07 13:34:22 +08:00
parent c52cf2900f
commit bb955fa3de
6 changed files with 446 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.agents/skills/api-technical-specs/SKILL.md
View File

@ -81,15 +81,14 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
### 3.3 B009: 貨道庫存即時回報 (Supplementary Report) ### 3.3 B009: 貨道庫存即時回報 (Supplementary Report)
當維修或補貨人員在機台端完成操作後，將目前的貨道實體狀態同步回雲端。 當維修或補貨人員在機台端完成操作後，將目前的貨道實體狀態同步回雲端。
- **URL**: PUT /api/v1/app/products/supplementary/B009 - **URL**: PUT /api/v1/app/products/supplementary/B009
- **Authentication**: Bearer Token (Header) - **Authentication**: Bearer Token (Header)
- **Request Body:** 無 (由 Token 自動識別機台) - **Request Body:**
| 參數 | 類型 | 必填 | 說明 | 範例 | | 參數 | 類型 | 必填 | 說明 | 範例 |
| :--- | :--- | :--- | :--- | :--- | | :--- | :--- | :--- | :--- | :--- |
| data | Array | 是 | 貨道數據陣列 | [{"tid":"1", "t060v00":"1", "num":"10"}] | | account | String | 是 | 執行補貨的人員帳號 (Username 或 Email)，用於權限驗證 | admin |
| data | Array/Object | 是 | 貨道數據陣列 (若傳單一物件會自動相容為陣列) | [{"tid":"1", "t060v00":"1", "num":"10"}] |
- **data 陣列內部欄位：** - **data 陣列內部欄位：**
@ -113,6 +112,15 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
| message | String | 回應訊息 | Slot report synchronized success | | message | String | 回應訊息 | Slot report synchronized success |
| status | String | 固定回傳 49 代表同步完成 | "49" | | status | String | 固定回傳 49 代表同步完成 | "49" |
- **Response Body (Failed 403 - 權限不足):**
| 參數 | 類型 | 說明 | 範例 |
| :--- | :--- | :--- | :--- |
| success | Boolean | 請求是否成功 | false |
| code | Integer | HTTP 狀態碼 | 403 |
| message | String | 失敗原因 | Unauthorized: Account not found |
| status | String | 固定回傳空字串 | "" |
--- ---

191
app/Services/Machine/MachineService.php
View File

@ -7,6 +7,7 @@ use App\Models\Machine\MachineLog;
use App\Models\Machine\MachineSlot; use App\Models\Machine\MachineSlot;
use App\Models\Machine\MachineStockMovement; use App\Models\Machine\MachineStockMovement;
use App\Models\Machine\RemoteCommand; use App\Models\Machine\RemoteCommand;
use App\Models\Transaction\Order;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\DB;
use Carbon\Carbon; use Carbon\Carbon;
@ -451,169 +452,89 @@ class MachineService
} }
/** /**
* Get machine utilization and OEE statistics for entire fleet. * 取得艦隊整體統計（批次查詢，無 N+1）
*/ */
public function getFleetStats(string $date): array public function getFleetStats(string $date): array
{ {
$start = Carbon::parse($date)->startOfDay(); $start = Carbon::parse($date)->startOfDay();
$end = Carbon::parse($date)->endOfDay(); $end = Carbon::parse($date)->endOfDay();
// 1. Online Count (Base on new heartbeat logic)
$machines = Machine::all(); // This is filtered by TenantScoped
$totalMachines = $machines->count();
$onlineCount = Machine::online()->count();
$machines = Machine::all(); // TenantScoped 已過濾
$machineIds = $machines->pluck('id')->toArray(); $machineIds = $machines->pluck('id')->toArray();
$totalMachines = $machines->count();
$onlineCount = Machine::online()->count();
// 2. Total Daily Sales (Sum of B600 logs across all authorized machines) // 今日成功訂單：批次查詢，非逐台
$totalSales = MachineLog::whereIn('machine_id', $machineIds) $ordersData = Order::whereIn('machine_id', $machineIds)
->where('message', 'like', '%B600%') ->where('payment_status', 1)
->whereBetween('created_at', [$start, $end])
->selectRaw('COUNT(*) as total_count, COALESCE(SUM(pay_amount), 0) as total_revenue')
->first();
// 今日異常次數
$alertCount = MachineLog::whereIn('machine_id', $machineIds)
->where('level', 'error')
->whereBetween('created_at', [$start, $end]) ->whereBetween('created_at', [$start, $end])
->count(); ->count();
// 3. Average OEE (Simulated based on individual machine stats for performance)
$totalOee = 0;
$count = 0;
foreach ($machines as $machine) {
$stats = $this->getUtilizationStats($machine, $date);
$totalOee += $stats['overview']['oee'];
$count++;
}
$avgOee = ($count > 0) ? ($totalOee / $count) : 0;
return [ return [
'avgOee' => round($avgOee, 2), 'onlineCount' => $onlineCount,
'onlineCount' => $onlineCount,
'totalMachines' => $totalMachines, 'totalMachines' => $totalMachines,
'totalSales' => $totalSales, 'totalOrders' => (int)($ordersData->total_count ?? 0),
'alertCount' => MachineLog::whereIn('machine_id', $machineIds) 'totalRevenue' => (float)($ordersData->total_revenue ?? 0),
->where('level', 'error') 'alertCount' => $alertCount,
->whereBetween('created_at', [$start, $end]) // OEE / avgUptime 已移除，online/offline 直接從 status 讀取
->count()
]; ];
} }
/** /**
* Get machine utilization and OEE statistics. * 取得單台機台詳細統計（接入真實 orders 資料）
*/ */
public function getUtilizationStats(Machine $machine, string $date): array public function getUtilizationStats(Machine $machine, string $date): array
{ {
$start = Carbon::parse($date)->startOfDay(); $start = Carbon::parse($date)->startOfDay();
$end = Carbon::parse($date)->endOfDay(); $end = Carbon::parse($date)->endOfDay();
// 1. Availability: Based on heartbeat logs (status type) // 1. 今日成功訂單：筆數 + 金額
// Assume online if heartbeat within 6 minutes $ordersAgg = $machine->orders()
$logs = $machine->logs() ->where('payment_status', 1)
->where('type', 'status')
->whereBetween('created_at', [$start, $end]) ->whereBetween('created_at', [$start, $end])
->orderBy('created_at') ->selectRaw('COUNT(*) as cnt, COALESCE(SUM(pay_amount), 0) as rev')
->get(); ->first();
$onlineMinutes = 0; $salesCount = (int)($ordersAgg->cnt ?? 0);
$lastLogTime = null; $revenue = (float)($ordersAgg->rev ?? 0);
foreach ($logs as $log) { // 2. 今日異常次數（dispense_records 失敗 或 machine_logs error）
$currentTime = Carbon::parse($log->created_at); $errorCount = $machine->logs()
if ($lastLogTime) { ->where('level', 'error')
$diff = $currentTime->diffInMinutes($lastLogTime); ->whereBetween('created_at', [$start, $end])
if ($diff <= 6) { ->count();
$onlineMinutes += $diff;
} // 3. 逐小時銷售量（Bar Chart 用）
} $hourlySales = $machine->orders()
$lastLogTime = $currentTime; ->where('payment_status', 1)
->whereBetween('created_at', [$start, $end])
->selectRaw('HOUR(created_at) as hour, COUNT(*) as count')
->groupBy('hour')
->pluck('count', 'hour');
$labels = [];
$values = [];
for ($h = 0; $h < 24; $h++) {
$labels[] = sprintf('%02d:00', $h);
$values[] = (int)($hourlySales[$h] ?? 0);
} }
$totalMinutes = 24 * 60; // Flatten 格式，前端直接 spread 使用
$availability = ($totalMinutes > 0) ? min(100, ($onlineMinutes / $totalMinutes) * 100) : 0;
// 2. Performance: Sales Count (B600)
// Target: 2 sales per hour (48/day)
$salesCount = $machine->logs()
->where('message', 'like', '%B600%')
->whereBetween('created_at', [$start, $end])
->count();
$targetSales = 48;
$performance = ($targetSales > 0) ? min(100, ($salesCount / $targetSales) * 100) : 0;
// 3. Quality: Success Rate
// Exclude failed dispense (B130)
$errorCount = $machine->logs()
->where('message', 'like', '%B130%')
->whereBetween('created_at', [$start, $end])
->count();
$totalAttempts = $salesCount + $errorCount;
$quality = ($totalAttempts > 0) ? (($salesCount / $totalAttempts) * 100) : 100;
// Combined OEE
$oee = ($availability / 100) * ($performance / 100) * ($quality / 100) * 100;
return [ return [
'overview' => [ 'output_count' => $salesCount,
'availability' => round($availability, 2), 'revenue' => round($revenue, 0),
'performance' => round($performance, 2), 'error_count' => $errorCount,
'quality' => round($quality, 2), 'chart_data' => [
'oee' => round($oee, 2), 'labels' => $labels,
'onlineHours' => round($onlineMinutes / 60, 2), 'values' => $values,
'salesCount' => $salesCount,
'errorCount' => $errorCount,
], ],
'chart' => [
'uptime' => $this->formatUptimeTimeline($logs, $start, $end),
'sales' => $this->formatSalesTimeline($machine, $start, $end)
]
]; ];
} }
private function formatUptimeTimeline($logs, $start, $end)
{
$data = [];
if ($logs->isEmpty()) return $data;
$lastLog = null;
$currentRangeStart = null;
foreach ($logs as $log) {
$logTime = Carbon::parse($log->created_at);
if (!$currentRangeStart) {
$currentRangeStart = $logTime;
} else {
$diff = $logTime->diffInMinutes(Carbon::parse($lastLog->created_at));
if ($diff > 10) { // Interruption > 10 mins
$data[] = [
'x' => 'Uptime',
'y' => [$currentRangeStart->getTimestamp() * 1000, Carbon::parse($lastLog->created_at)->getTimestamp() * 1000],
'fillColor' => '#06b6d4'
];
$currentRangeStart = $logTime;
}
}
$lastLog = $log;
}
if ($currentRangeStart && $lastLog) {
$data[] = [
'x' => 'Uptime',
'y' => [$currentRangeStart->getTimestamp() * 1000, Carbon::parse($lastLog->created_at)->getTimestamp() * 1000],
'fillColor' => '#06b6d4'
];
}
return $data;
}
private function formatSalesTimeline($machine, $start, $end)
{
return $machine->logs()
->where('message', 'like', '%B600%')
->whereBetween('created_at', [$start, $end])
->get()
->map(function($log) {
return [Carbon::parse($log->created_at)->getTimestamp() * 1000, 1];
})
->toArray();
}
} }

3
lang/en.json
View File

@ -1726,5 +1726,6 @@
"visit_gift": "visit_gift", "visit_gift": "visit_gift",
"vs Yesterday": "vs Yesterday", "vs Yesterday": "vs Yesterday",
"warehouses": "warehouses", "warehouses": "warehouses",
"待填寫": "待填寫" "待填寫": "待填寫",
"Real-time fleet status and revenue monitoring": "Real-time fleet status and revenue monitoring"
} }

3
lang/ja.json
View File

@ -1710,5 +1710,6 @@
"visit_gift": "visit_gift", "visit_gift": "visit_gift",
"vs Yesterday": "vs Yesterday", "vs Yesterday": "vs Yesterday",
"warehouses": "warehouses", "warehouses": "warehouses",
"待填寫": "待填寫" "待填寫": "待填寫",
"Real-time fleet status and revenue monitoring": "全自動販売機のリアルタイム状態と収益監視"
} }

14
lang/zh_TW.json
View File

@ -1875,5 +1875,17 @@
"visit_gift": "來店禮", "visit_gift": "來店禮",
"vs Yesterday": "較昨日", "vs Yesterday": "較昨日",
"warehouses": "倉庫管理", "warehouses": "倉庫管理",
"待填寫": "待填寫" "待填寫": "待填寫",
"Sales Today": "今日銷售",
"Revenue": "今日營收",
"Errors": "異常次數",
"times": "次",
"orders": "筆",
"Hourly Sales": "逐小時銷售量",
"Orders per hour for selected date": "當日各小時訂單筆數",
"Alerts Today": "今日異常",
"All Normal": "運作正常",
"Needs Attention": "需要注意",
"Total Orders": "今日訂單",
"Real-time fleet status and revenue monitoring": "全機台即時狀態與營收監控"
} }

620
resources/views/admin/machines/utilization.blade.php
View File

@ -6,289 +6,339 @@
@section('content') @section('content')
<script> <script>
/** /**
* Machine Utilization Dashboard Alpine Component * Machine Utilization Dashboard Alpine Component
* Robust Pattern: Defined as a global function to ensure availability before Alpine initialization. * Robust Pattern: Defined as a global function to ensure availability before Alpine initialization.
*/ */
window.utilizationDashboard = function(initialMachines, initialStats) { window.utilizationDashboard = function (initialMachines, initialStats) {
return { return {
startDate: new Date().toISOString().split('T')[0], startDate: new Date().toISOString().split('T')[0],
machines: initialMachines || [], machines: initialMachines || [],
fleetStats: initialStats || { avgOee: 0, onlineCount: 0, totalSales: 0, totalMachines: 0 }, fleetStats: initialStats || { onlineCount: 0, totalMachines: 0, totalOrders: 0, totalRevenue: 0, alertCount: 0 },
searchQuery: '', searchQuery: '',
selectedMachineId: null, selectedMachineId: null,
selectedMachine: null, selectedMachine: null,
loading: false, loading: false,
chart: null, chart: null,
miniChart: null, miniChart: null,
get filteredMachines() { get filteredMachines() {
if (!this.searchQuery) return this.machines; if (!this.searchQuery) return this.machines;
const q = this.searchQuery.toLowerCase(); const q = this.searchQuery.toLowerCase();
return this.machines.filter(m => return this.machines.filter(m =>
m.name.toLowerCase().includes(q) || m.name.toLowerCase().includes(q) ||
m.serial_no.toLowerCase().includes(q) m.serial_no.toLowerCase().includes(q)
); );
}, },
init() { init() {
// Ensure ApexCharts and DOM are ready this.$nextTick(() => {
this.$nextTick(() => { if (this.machines.length > 0) {
this.initMiniChart(); this.selectMachine(this.machines[0]);
if (this.machines.length > 0) { }
this.selectMachine(this.machines[0]); });
},
async selectMachine(machine) {
this.selectedMachineId = machine.id;
this.loading = true;
window.dispatchEvent(new CustomEvent('show-global-loading'));
try {
// Correct route as defined in web.php: /admin/machines/utilization-ajax/{id}
const res = await fetch(`/admin/machines/utilization-ajax/${machine.id}?date=${this.startDate}`);
const data = await res.json();
if (data.success) {
this.selectedMachine = { ...machine, ...data.data };
this.$nextTick(() => this.updateChart(data.data.chart_data));
}
} catch (e) {
console.error('Failed to fetch machine data:', e);
} finally {
this.loading = false;
window.dispatchEvent(new CustomEvent('hide-global-loading'));
} }
}); },
},
initMiniChart() { async fetchData() {
const options = { this.loading = true;
chart: { type: 'radialBar', height: '100%', sparkline: { enabled: true } }, window.dispatchEvent(new CustomEvent('show-global-loading'));
series: [this.fleetStats.avgOee || 0], try {
colors: ['#06b6d4'], const res = await fetch(`/admin/machines/utilization-ajax?date=${this.startDate}`);
plotOptions: { const data = await res.json();
radialBar: { if (data.success) {
hollow: { size: '40%' }, this.fleetStats = data.data;
dataLabels: { show: false } if (this.selectedMachineId) {
const m = this.machines.find(x => x.id === this.selectedMachineId);
if (m) this.selectMachine(m);
}
} }
}, } catch (e) {
stroke: { lineCap: 'round' } console.error('Failed to fetch fleet data:', e);
}; } finally {
this.loading = false;
if (this.miniChart) this.miniChart.destroy(); window.dispatchEvent(new CustomEvent('hide-global-loading'));
const el = document.querySelector("#oee-mini-chart");
if (el) {
this.miniChart = new ApexCharts(el, options);
this.miniChart.render();
}
},
async selectMachine(machine) {
this.selectedMachineId = machine.id;
this.loading = true;
window.dispatchEvent(new CustomEvent('show-global-loading'));
try {
// Correct route as defined in web.php: /admin/machines/utilization-ajax/{id}
const res = await fetch(`/admin/machines/utilization-ajax/${machine.id}?date=${this.startDate}`);
const data = await res.json();
if (data.success) {
this.selectedMachine = { ...machine, ...data.data };
this.$nextTick(() => this.updateChart(data.data.chart_data));
} }
} catch (e) { },
console.error('Failed to fetch machine data:', e);
} finally {
this.loading = false;
window.dispatchEvent(new CustomEvent('hide-global-loading'));
}
},
async fetchData() { updateChart(chartData) {
this.loading = true; const labels = chartData ? chartData.labels : [];
window.dispatchEvent(new CustomEvent('show-global-loading')); const values = chartData ? chartData.values : [];
try { const options = {
// Fleet-wide data: no ID provided series: [{ name: '{{ __("Sales") }}', data: values }],
const res = await fetch(`/admin/machines/utilization-ajax?date=${this.startDate}`); chart: {
const data = await res.json(); type: 'bar',
if (data.success) { height: 350,
this.fleetStats = data.data; // Server returns getFleetStats output toolbar: { show: false },
this.initMiniChart(); fontFamily: 'Plus Jakarta Sans, sans-serif'
if (this.selectedMachineId) { },
const m = this.machines.find(x => x.id === this.selectedMachineId); plotOptions: {
if (m) this.selectMachine(m); bar: { borderRadius: 6, columnWidth: '60%' }
},
dataLabels: { enabled: false },
colors: ['#06b6d4'],
grid: {
borderColor: '#f1f5f9',
strokeDashArray: 4,
padding: { left: 20 }
},
xaxis: {
categories: labels,
axisBorder: { show: false },
axisTicks: { show: false },
labels: {
rotate: -45,
style: { colors: '#94a3b8', fontWeight: 700, fontSize: '9px' }
}
},
yaxis: {
min: 0,
tickAmount: 4,
labels: {
formatter: (v) => Math.round(v),
style: { colors: '#94a3b8', fontWeight: 700, fontSize: '10px' }
}
},
tooltip: {
theme: 'dark',
custom: function ({ series, seriesIndex, dataPointIndex, w }) {
const hour = w.globals.categoryLabels[dataPointIndex];
const count = series[seriesIndex][dataPointIndex];
return '<div class="px-3 py-2 bg-slate-900 text-white rounded-lg border border-slate-700 shadow-xl">' +
'<span class="text-[10px] font-black uppercase tracking-widest block opacity-50 mb-1">' + hour + '</span>' +
'<span class="text-sm font-black">' + count + ' {{ __("orders") }}</span>' +
'</div>';
}
} }
};
const chartEl = document.querySelector("#utilization-chart");
if (chartEl) {
if (this.chart) this.chart.destroy();
this.chart = new ApexCharts(chartEl, options);
this.chart.render();
} }
} catch (e) {
console.error('Failed to fetch fleet data:', e);
} finally {
this.loading = false;
window.dispatchEvent(new CustomEvent('hide-global-loading'));
} }
}, };
}
updateChart(chartData) {
const options = {
series: [{
name: '{{ __("OEE Score") }}',
data: chartData ? chartData.values : []
}],
chart: {
type: 'area',
height: 350,
toolbar: { show: false },
zoom: { enabled: false },
fontFamily: 'Plus Jakarta Sans, sans-serif'
},
dataLabels: { enabled: false },
stroke: { curve: 'smooth', width: 4, colors: ['#06b6d4'] },
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 90, 100],
colorStops: [
{ offset: 0, color: '#06b6d4', opacity: 0.4 },
{ offset: 100, color: '#06b6d4', opacity: 0 }
]
}
},
grid: {
borderColor: '#f1f5f9',
strokeDashArray: 4,
padding: { left: 20 }
},
xaxis: {
categories: chartData ? chartData.labels : [],
axisBorder: { show: false },
axisTicks: { show: false },
labels: {
style: { colors: '#94a3b8', fontWeight: 700, fontSize: '10px' }
}
},
yaxis: {
min: 0,
max: 100,
labels: {
style: { colors: '#94a3b8', fontWeight: 700, fontSize: '10px' }
}
},
tooltip: {
theme: 'dark',
custom: function({ series, seriesIndex, dataPointIndex, w }) {
return '<div class="px-3 py-2 bg-slate-900 text-white rounded-lg border border-slate-700 shadow-xl">' +
'<span class="text-[10px] font-black uppercase tracking-widest block opacity-50 mb-1">' + w.globals.categoryLabels[dataPointIndex] + '</span>' +
'<span class="text-sm font-black">' + series[seriesIndex][dataPointIndex] + '% {{ __("OEE") }}</span>' +
'</div>';
}
}
};
const chartEl = document.querySelector("#utilization-chart");
if (chartEl) {
if (this.chart) this.chart.destroy();
this.chart = new ApexCharts(chartEl, options);
this.chart.render();
}
}
};
}
</script> </script>
<div class="space-y-4" x-data="utilizationDashboard(@js($compactMachines), @js($fleetStats))"> <div class="space-y-4" x-data="utilizationDashboard(@js($compactMachines), @js($fleetStats))">
<!-- Page Header --> <!-- Page Header -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4"> <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div> <div>
<h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Machine Utilization') }}</h1> <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Machine Utilization')
<p class="text-sm font-bold text-slate-400 uppercase tracking-widest mt-1">{{ __('Real-time fleet efficiency and OEE metrics') }}</p> }}</h1>
<p class="text-sm font-bold text-slate-400 uppercase tracking-widest mt-1">{{ __('Real-time fleet status and revenue monitoring') }}</p>
</div> </div>
<div class="flex items-center gap-3 px-4 py-2 rounded-2xl bg-slate-100/50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-700/60 backdrop-blur-sm"> <div
class="flex items-center gap-3 px-4 py-2 rounded-2xl bg-slate-100/50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-700/60 backdrop-blur-sm">
<span class="flex h-2 w-2 rounded-full bg-cyan-500 animate-pulse"></span> <span class="flex h-2 w-2 rounded-full bg-cyan-500 animate-pulse"></span>
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Live Fleet Updates') }}</span> <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Live Fleet Updates')
}}</span>
</div> </div>
</div> </div>
<!-- Top Stats Bar --> <!-- Top Stats Bar -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
<!-- OEE Metric Card --> <!-- Alert Count Card -->
<div class="luxury-card rounded-3xl p-6 relative overflow-hidden group"> <div class="luxury-card rounded-3xl p-6 relative overflow-hidden group">
<div class="absolute -right-4 -top-4 w-24 h-24 bg-cyan-500/5 rounded-full blur-2xl group-hover:bg-cyan-500/10 transition-all duration-500"></div> <div
class="absolute -right-4 -top-4 w-24 h-24 bg-rose-500/5 rounded-full blur-2xl group-hover:bg-rose-500/10 transition-all duration-500">
</div>
<div class="flex items-center justify-between relative z-10"> <div class="flex items-center justify-between relative z-10">
<div> <div>
<p class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-1">{{ __('Fleet Avg OEE') }}</p> <p
<h3 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight" x-text="(fleetStats.avgOee || 0) + '%'"></h3> class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-1">
{{ __('Alerts Today') }}</p>
<h3 class="text-3xl font-black tracking-tight"
:class="(fleetStats.alertCount || 0) > 0 ? 'text-rose-500' : 'text-slate-800 dark:text-white'"
x-text="fleetStats.alertCount || 0"></h3>
</div>
<div class="w-12 h-12 rounded-2xl flex items-center justify-center"
:class="(fleetStats.alertCount || 0) > 0 ? 'bg-rose-500/10 text-rose-500' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path
d="M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
</svg>
</div> </div>
<div class="w-14 h-14" id="oee-mini-chart"></div>
</div> </div>
<div class="mt-4 flex items-center gap-2"> <div class="mt-4 flex items-center gap-2">
<span class="flex h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]"></span> <span class="flex h-2 w-2 rounded-full"
<span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{{ __('Optimized Performance') }}</span> :class="(fleetStats.alertCount || 0) > 0 ? 'bg-rose-500' : 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]'"></span>
<span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest"
x-text="(fleetStats.alertCount || 0) > 0 ? '{{ __('Needs Attention') }}' : '{{ __('All Normal') }}'"></span>
</div> </div>
</div> </div>
<!-- Online Pulse Card --> <!-- Online Pulse Card -->
<div class="luxury-card rounded-3xl p-6 relative overflow-hidden group"> <div class="luxury-card rounded-3xl p-6 relative overflow-hidden group">
<div class="absolute -right-4 -top-4 w-24 h-24 bg-emerald-500/5 rounded-full blur-2xl group-hover:bg-emerald-500/10 transition-all duration-500"></div> <div
class="absolute -right-4 -top-4 w-24 h-24 bg-emerald-500/5 rounded-full blur-2xl group-hover:bg-emerald-500/10 transition-all duration-500">
</div>
<div class="flex items-center justify-between relative z-10"> <div class="flex items-center justify-between relative z-10">
<div> <div>
<p class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-1">{{ __('Online Status') }}</p> <p
class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-1">
{{ __('Online Status') }}</p>
<div class="flex items-baseline gap-2"> <div class="flex items-baseline gap-2">
<span class="text-3xl font-black text-slate-800 dark:text-white tracking-tight" x-text="fleetStats.onlineCount || 0"></span> <span class="text-3xl font-black text-slate-800 dark:text-white tracking-tight"
<span class="text-sm font-bold text-slate-400">/ <span x-text="fleetStats.totalMachines || 0"></span></span> x-text="fleetStats.onlineCount || 0"></span>
<span class="text-sm font-bold text-slate-400">/ <span
x-text="fleetStats.totalMachines || 0"></span></span>
</div> </div>
</div> </div>
<div class="w-12 h-12 rounded-2xl bg-emerald-500/10 flex items-center justify-center"> <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 flex items-center justify-center">
<div class="relative flex h-4 w-4"> <div class="relative flex h-4 w-4">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span> <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-4 w-4 bg-emerald-500"></span> <span class="relative inline-flex rounded-full h-4 w-4 bg-emerald-500"></span>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<div class="h-1.5 flex-1 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden"> <div class="h-1.5 flex-1 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-emerald-500 transition-all duration-1000" :style="'width: ' + ((fleetStats.onlineCount / fleetStats.totalMachines) * 100 || 0) + '%'"></div> <div class="h-full bg-emerald-500 transition-all duration-1000"
:style="'width: ' + ((fleetStats.onlineCount / fleetStats.totalMachines) * 100 || 0) + '%'">
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Revenue Insights Card --> <!-- Revenue Insights Card -->
<div class="luxury-card rounded-3xl p-6 relative overflow-hidden group"> <div class="luxury-card rounded-3xl p-6 relative overflow-hidden group">
<div class="absolute -right-4 -top-4 w-24 h-24 bg-amber-500/5 rounded-full blur-2xl group-hover:bg-amber-500/10 transition-all duration-500"></div> <div
class="absolute -right-4 -top-4 w-24 h-24 bg-amber-500/5 rounded-full blur-2xl group-hover:bg-amber-500/10 transition-all duration-500">
</div>
<div class="flex items-center justify-between relative z-10"> <div class="flex items-center justify-between relative z-10">
<div> <div>
<p class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-1">{{ __('Daily Revenue') }}</p> <p
<h3 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight" x-text="'$' + (fleetStats.totalSales || 0).toLocaleString()"></h3> class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-1">
{{ __('Daily Revenue') }}</p>
<h3 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight"
x-text="'NT$ ' + Number(fleetStats.totalRevenue || 0).toLocaleString()"></h3>
</div> </div>
<div class="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-500"> <div class="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-500">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
</div> </div>
</div> </div>
<p class="mt-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Total Gross Value') }}</p> <p class="mt-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest"
x-text="'{{ __('Total Orders') }}: ' + (fleetStats.totalOrders || 0) + ' {{ __('orders') }}'"></p>
</div> </div>
<!-- Date Control Card --> <!-- Date Control Card -->
<div class="luxury-card rounded-3xl p-6 border-cyan-500/20 bg-gradient-to-br from-white to-cyan-50/30 dark:from-slate-900 dark:to-cyan-950/20"> <div class="luxury-card rounded-3xl p-6 border-cyan-500/20 bg-gradient-to-br from-white to-cyan-50/30 dark:from-slate-900 dark:to-cyan-950/20"
<p class="text-[11px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] mb-3">{{ __('Reporting Period') }}</p> x-data="{
<div class="relative group"> fp: null,
<input type="date" x-model="startDate" @change="fetchData" init() {
class="w-full bg-transparent border-none p-0 text-xl font-black text-slate-800 dark:text-white focus:ring-0 cursor-pointer dark:[&::-webkit-calendar-picker-indicator]:invert"> this.fp = flatpickr(this.$refs.dateInput, {
<div class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-500"></div> dateFormat: 'Y-m-d',
defaultDate: this.startDate,
locale: window.flatpickrLocale || 'default',
disableMobile: true,
onChange: (selectedDates, dateStr) => {
this.startDate = dateStr;
this.fetchData();
}
});
this.$watch('startDate', (val) => {
if (this.fp && val !== this.fp.input.value) {
this.fp.setDate(val || new Date().toISOString().split('T')[0], false);
}
});
}
}">
<p class="text-[11px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] mb-4">{{ __('Reporting Period') }}</p>
<div class="flex items-center gap-4">
<div class="relative group flex-1">
<input type="text" x-ref="dateInput" readonly
class="w-full bg-transparent border-none p-0 text-xl font-black text-slate-800 dark:text-white focus:ring-0 cursor-pointer">
<div class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-500"></div>
</div>
<div class="flex items-center gap-1.5 shrink-0">
<button type="button" @click="startDate = new Date().toISOString().split('T')[0]; fetchData();"
class="p-2.5 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500 hover:text-white transition-all shadow-sm active:scale-95"
title="{{ __('Today') }}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
</svg>
</button>
<button type="button" @click="startDate = ''; fetchData();"
class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/10 transition-all active:scale-95"
title="{{ __('Clear Filter') }}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div> </div>
<p class="mt-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Select date to sync data') }}</p> <p class="mt-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Select date to sync data') }}</p>
</div> </div>
</div> </div>
<!-- Master-Detail Interaction Area --> <!-- Master-Detail Interaction Area -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start relative"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start relative">
<!-- Premium Loading Overlay --> <!-- Premium Loading Overlay -->
<div x-show="loading" <div x-show="loading" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
x-transition:enter="transition ease-out duration-300" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300"
x-transition:enter-start="opacity-0" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
x-transition:enter-end="opacity-100" class="absolute inset-0 z-[60] flex flex-col items-center justify-center bg-white/40 dark:bg-slate-900/40 backdrop-blur-[1px] rounded-3xl"
x-transition:leave="transition ease-in duration-300" x-cloak>
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="absolute inset-0 z-[60] flex flex-col items-center justify-center bg-white/40 dark:bg-slate-900/40 backdrop-blur-[1px] rounded-3xl" x-cloak>
<div class="relative w-16 h-16 mb-4 flex items-center justify-center"> <div class="relative w-16 h-16 mb-4 flex items-center justify-center">
<div class="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-500 border-r-cyan-500/30 animate-spin"></div> <div
<div class="absolute inset-2 rounded-full border border-cyan-500/10 animate-spin" style="animation-duration: 3s; direction: reverse;"></div> class="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-500 border-r-cyan-500/30 animate-spin">
</div>
<div class="absolute inset-2 rounded-full border border-cyan-500/10 animate-spin"
style="animation-duration: 3s; direction: reverse;"></div>
<div class="relative w-8 h-8 flex items-center justify-center"> <div class="relative w-8 h-8 flex items-center justify-center">
<svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /> viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg> </svg>
</div> </div>
</div> </div>
<p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">{{ __('Loading Data') }}...</p> <p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">
{{ __('Loading Data') }}...</p>
</div> </div>
<div class="lg:col-span-4 space-y-4" :class="{ 'opacity-40 pointer-events-none transition-opacity duration-500': loading }"> <div class="lg:col-span-4 space-y-4"
:class="{ 'opacity-40 pointer-events-none transition-opacity duration-500': loading }">
<div class="flex items-center justify-between mb-2 px-1"> <div class="flex items-center justify-between mb-2 px-1">
<h4 class="text-sm font-black text-slate-800 dark:text-slate-200 uppercase tracking-widest">{{ __('Machine Registry') }}</h4> <h4 class="text-sm font-black text-slate-800 dark:text-slate-200 uppercase tracking-widest">{{
<span class="text-[10px] font-bold px-2 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-500 uppercase" x-text="(filteredMachines.length) + ' {{ __('Units') }}'"></span> __('Machine Registry') }}</h4>
<span
class="text-[10px] font-bold px-2 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-500 uppercase"
x-text="(filteredMachines.length) + ' {{ __('Units') }}'"></span>
</div> </div>
<!-- Search --> <!-- Search -->
<div class="relative group"> <div class="relative group">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10"> <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
@ -299,8 +349,7 @@ window.utilizationDashboard = function(initialMachines, initialStats) {
<line x1="21" y1="21" x2="16.65" y2="16.65"></line> <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg> </svg>
</span> </span>
<input type="text" x-model="searchQuery" <input type="text" x-model="searchQuery" placeholder="{{ __('Search serial or name...') }}"
placeholder="{{ __('Search serial or name...') }}"
class="luxury-input py-2.5 pl-12 pr-6 block w-full text-sm"> class="luxury-input py-2.5 pl-12 pr-6 block w-full text-sm">
</div> </div>
@ -308,17 +357,22 @@ window.utilizationDashboard = function(initialMachines, initialStats) {
<div class="space-y-3 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar"> <div class="space-y-3 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
<template x-for="machine in filteredMachines" :key="machine.id"> <template x-for="machine in filteredMachines" :key="machine.id">
<button @click="selectMachine(machine)" <button @click="selectMachine(machine)"
:class="selectedMachineId === machine.id ? 'border-cyan-500 ring-4 ring-cyan-500/10 bg-cyan-50/30 dark:bg-cyan-950/20' : 'border-slate-200/60 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'" :class="selectedMachineId === machine.id ? 'border-cyan-500 ring-4 ring-cyan-500/10 bg-cyan-50/30 dark:bg-cyan-950/20' : 'border-slate-200/60 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'"
class="w-full text-left p-4 rounded-2xl border bg-white dark:bg-slate-900 transition-all duration-300 group"> class="w-full text-left p-4 rounded-2xl border bg-white dark:bg-slate-900 transition-all duration-300 group">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div :class="machine.status === 'online' ? 'bg-emerald-500' : 'bg-slate-300'" <div :class="machine.status === 'online' ? 'bg-emerald-500' : 'bg-slate-300'"
class="w-1.5 h-10 rounded-full transition-colors duration-500"></div> class="w-1.5 h-10 rounded-full transition-colors duration-500"></div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<h5 class="text-sm font-black text-slate-800 dark:text-slate-200 truncate" x-text="machine.name"></h5> <h5 class="text-sm font-black text-slate-800 dark:text-slate-200 truncate"
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5" x-text="machine.serial_no"></p> x-text="machine.name"></h5>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5"
x-text="machine.serial_no"></p>
</div> </div>
<svg :class="selectedMachineId === machine.id ? 'text-cyan-500 translate-x-0 opacity-100' : 'text-slate-300 -translate-x-2 opacity-0'" <svg :class="selectedMachineId === machine.id ? 'text-cyan-500 translate-x-0 opacity-100' : 'text-slate-300 -translate-x-2 opacity-0'"
class="w-5 h-5 transition-all duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m9 18 6-6-6-6"/></svg> class="w-5 h-5 transition-all duration-300" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="3">
<path d="m9 18 6-6-6-6" />
</svg>
</div> </div>
</button> </button>
</template> </template>
@ -326,10 +380,15 @@ window.utilizationDashboard = function(initialMachines, initialStats) {
<!-- Empty State --> <!-- Empty State -->
<template x-if="filteredMachines.length === 0"> <template x-if="filteredMachines.length === 0">
<div class="py-12 text-center"> <div class="py-12 text-center">
<div class="w-16 h-16 mx-auto bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-300 mb-4"> <div
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 15l6 6m-6-6l-6-6m6 6l6-6m-6 6l-6 6"/></svg> class="w-16 h-16 mx-auto bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-300 mb-4">
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5">
<path d="M15 15l6 6m-6-6l-6-6m6 6l6-6m-6 6l-6 6" />
</svg>
</div> </div>
<p class="text-xs font-bold text-slate-500 uppercase tracking-widest">{{ __('No matching machines') }}</p> <p class="text-xs font-bold text-slate-500 uppercase tracking-widest">{{ __('No matching
machines') }}</p>
</div> </div>
</template> </template>
</div> </div>
@ -340,74 +399,117 @@ window.utilizationDashboard = function(initialMachines, initialStats) {
<template x-if="selectedMachine"> <template x-if="selectedMachine">
<div class="space-y-6 animate-fade-in"> <div class="space-y-6 animate-fade-in">
<!-- Machine Header --> <!-- Machine Header -->
<div class="luxury-card rounded-[2.5rem] p-8 border-b-4 border-b-cyan-500 shadow-xl shadow-cyan-500/5 relative overflow-hidden"> <div
class="luxury-card rounded-[2.5rem] p-8 border-b-4 border-b-cyan-500 shadow-xl shadow-cyan-500/5 relative overflow-hidden">
<div class="absolute top-0 right-0 p-8"> <div class="absolute top-0 right-0 p-8">
<div class="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-900/5 dark:bg-white/10 backdrop-blur-md"> <div
<div :class="selectedMachine.status === 'online' ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]' : 'bg-slate-400'" class="w-2 h-2 rounded-full"></div> class="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-900/5 dark:bg-white/10 backdrop-blur-md">
<span class="text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-200" x-text="selectedMachine.status === 'online' ? '{{ __("Online") }}' : '{{ __("Offline") }}'"></span> <div :class="selectedMachine.status === 'online' ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]' : 'bg-slate-400'"
class="w-2 h-2 rounded-full"></div>
<span
class="text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-200"
x-text="selectedMachine.status === 'online' ? '{{ __('Online') }}' : '{{ __('Offline') }}'"></span>
</div> </div>
</div> </div>
<div class="flex items-center gap-6"> <div class=" flex items-center gap-6">
<div class="w-20 h-20 rounded-3xl bg-luxury-gradient flex items-center justify-center text-white shadow-lg shadow-cyan-500/20"> <div
<svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> class="w-20 h-20 rounded-3xl bg-luxury-gradient flex items-center justify-center text-white shadow-lg shadow-cyan-500/20">
</div> <svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
<div> stroke-width="2">
<h2 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight" x-text="selectedMachine.name"></h2> <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
<p class="text-sm font-bold text-slate-500 uppercase tracking-[0.2em] mt-1" x-text="'{{ __("Serial NO") }}: ' + selectedMachine.serial_no"></p> </svg>
</div>
<div>
<h2 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight"
x-text="selectedMachine.name"></h2>
<p class="text-sm font-bold text-slate-500 uppercase tracking-[0.2em] mt-1"
x-text="'{{ __('Serial NO') }}: ' + selectedMachine.serial_no"></p>
</div> </div>
</div> </div>
<!-- Highlights --> <!-- Highlights -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-10 p-6 bg-slate-50 dark:bg-slate-900/50 rounded-3xl border border-slate-100 dark:border-slate-800"> <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-10 p-6 bg-slate-50 dark:bg-slate-900/50 rounded-3xl border border-slate-100 dark:border-slate-800">
<!-- 目前狀態 -->
<div> <div>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ __('OEE Score') }}</p> <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">{{ __('Status') }}</p>
<p class="text-xl font-black text-cyan-600 dark:text-cyan-400" x-text="(selectedMachine.oee || 0) + '%'"></p> <div class="flex items-center gap-2">
<span
:class="selectedMachine.status === 'online' ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]' : 'bg-slate-400'"
class="w-2.5 h-2.5 rounded-full flex-shrink-0"></span>
<span
:class="selectedMachine.status === 'online' ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-500'"
class="text-base font-black tracking-tight"
x-text="selectedMachine.status === 'online' ? '{{ __('Online') }}' : '{{ __('Offline') }}'"></span>
</div>
</div> </div>
<!-- 今日銷售 -->
<div> <div>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ __('Utilized Time') }}</p> <p class=" text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{
<p class="text-xl font-black text-slate-800 dark:text-slate-200" x-text="(selectedMachine.utilized_minutes || 0) + ' {{ __("min") }}'"></p> __('Sales Today') }}</p>
<p class="text-xl font-black text-slate-800 dark:text-slate-200"
x-text="(selectedMachine.output_count || 0) + ' {{ __('orders') }}'"></p>
</div>
<!-- 今日營收 -->
<div>
<p
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">
{{ __('Revenue') }}</p>
<p class="text-xl font-black text-cyan-600 dark:text-cyan-400"
x-text="'NT$ ' + Number(selectedMachine.revenue || 0).toLocaleString()">
</p>
</div>
<!-- 異常次數 -->
<div>
<p
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">
{{ __('Errors') }}</p>
<p :class="(selectedMachine.error_count || 0) > 0 ? 'text-rose-500' : 'text-slate-800 dark:text-slate-200'"
class="text-xl font-black"
x-text="(selectedMachine.error_count || 0) + ' {{ __('times') }}'"></p>
</div>
</div>
</div> </div>
<div>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ __('Output Count') }}</p>
<p class="text-xl font-black text-slate-800 dark:text-slate-200" x-text="selectedMachine.output_count || 0"></p>
</div>
<div>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ __('Avg Cycle') }}</p>
<p class="text-xl font-black text-slate-800 dark:text-slate-200" x-text="(selectedMachine.avg_cycle || 0) + '{{ __("s") }}'"></p>
</div>
</div>
</div>
<!-- Utilization Chart --> <!-- Utilization Chart -->
<div class="luxury-card rounded-[2.5rem] p-8"> <div class="luxury-card rounded-[2.5rem] p-8">
<div class="flex items-center justify-between mb-8"> <div class="flex items-center justify-between mb-8">
<div> <div>
<h4 class="text-lg font-black text-slate-800 dark:text-white tracking-tight">{{ __('OEE Efficiency Trend') }}</h4> <h4 class="text-lg font-black text-slate-800 dark:text-white tracking-tight">{{
<p class="text-xs font-bold text-slate-500 uppercase tracking-widest mt-1">{{ __('Real-time performance analytics') }}</p> __('Hourly Sales') }}</h4>
</div> <p class="text-xs font-bold text-slate-500 uppercase tracking-widest mt-1">{{
<div class="flex items-center gap-2"> __('Orders per hour for selected date') }}</p>
<span class="w-3 h-3 rounded-full bg-cyan-500"></span> </div>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Cycle Efficiency') }}</span> <div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-cyan-500"></span>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{
__('Orders') }}</span>
</div>
</div>
<div id="utilization-chart" class="w-full h-[350px]"></div>
</div> </div>
</div> </div>
<div id="utilization-chart" class="w-full h-[350px]"></div>
</div>
</div>
</template> </template>
<!-- Detail Placeholder --> <!-- Detail Placeholder -->
<template x-if="!selectedMachine"> <template x-if="!selectedMachine">
<div class="h-full min-h-[500px] flex flex-col items-center justify-center luxury-card rounded-[2.5rem] border-dashed border-2 border-slate-200 dark:border-slate-800 bg-slate-50/20"> <div
<div class="w-24 h-24 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-300 mb-6 scale-animation"> class="h-full min-h-[500px] flex flex-col items-center justify-center luxury-card rounded-[2.5rem] border-dashed border-2 border-slate-200 dark:border-slate-800 bg-slate-50/20">
<svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.5l7 7V19a2 2 0 01-2 2z"/></svg> <div
class="w-24 h-24 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-300 mb-6 scale-animation">
<svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.5l7 7V19a2 2 0 01-2 2z" />
</svg>
</div> </div>
<h3 class="text-xl font-black text-slate-800 dark:text-slate-200 tracking-tight">{{ __('No Machine Selected') }}</h3> <h3 class="text-xl font-black text-slate-800 dark:text-slate-200 tracking-tight">{{ __('No Machine
<p class="text-sm font-bold text-slate-400 uppercase tracking-widest mt-2">{{ __('Select an asset from the left to start analysis') }}</p> Selected') }}</h3>
<p class="text-sm font-bold text-slate-400 uppercase tracking-widest mt-2">{{ __('Select an asset
from the left to start analysis') }}</p>
</div> </div>
</template> </template>
</div> </div>
</div> </div>
</div> </div>
@endsection @endsection