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

[FEAT] 實作維修管理模組與 RBAC 權限整合、多語系支援及 UI 優化
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
sky121113
2026-03-25 14:25:42 +08:00
parent 3d24ddff5a
commit 37ef6f1c10
23 changed files with 1446 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,351 +1,386 @@
@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>
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
@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() {
/**
* Machine Utilization Dashboard Alpine Component
* Robust Pattern: Defined as a global function to ensure availability before Alpine initialization.
*/
window.utilizationDashboard = function(initialMachines, initialStats) {
return {
selectedMachineId: '',
selectedMachineSn: '',
selectedMachineName: '',
startDate: new Date().toISOString().split('T')[0],
machines: initialMachines || [],
fleetStats: initialStats || { avgOee: 0, onlineCount: 0, totalSales: 0, totalMachines: 0 },
searchQuery: '',
selectedMachineId: null,
selectedMachine: null,
loading: false,
fleetStats: { avgOee: 0, onlineCount: 0, totalSales: 0, alertCount: 0 },
charts: {},
chart: null,
miniChart: null,
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();
get filteredMachines() {
if (!this.searchQuery) return this.machines;
const q = this.searchQuery.toLowerCase();
return this.machines.filter(m =>
m.name.toLowerCase().includes(q) ||
m.serial_no.toLowerCase().includes(q)
);
},
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);
});
// Ensure ApexCharts and DOM are ready
this.$nextTick(() => {
this.initMiniChart();
if (this.machines.length > 0) {
this.selectMachine(this.machines[0]);
}
} catch (error) {
console.error('Failed to fetch utilization data:', error);
} finally {
this.loading = false;
});
},
initMiniChart() {
const options = {
chart: { type: 'radialBar', height: '100%', sparkline: { enabled: true } },
series: [this.fleetStats.avgOee || 0],
colors: ['#06b6d4'],
plotOptions: {
radialBar: {
hollow: { size: '40%' },
dataLabels: { show: false }
}
},
stroke: { lineCap: 'round' }
};
if (this.miniChart) this.miniChart.destroy();
const el = document.querySelector("#oee-mini-chart");
if (el) {
this.miniChart = new ApexCharts(el, options);
this.miniChart.render();
}
},
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');
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'));
}
},
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 || []
async fetchData() {
this.loading = true;
window.dispatchEvent(new CustomEvent('show-global-loading'));
try {
// Fleet-wide data: no ID provided
const res = await fetch(`/admin/machines/utilization-ajax?date=${this.startDate}`);
const data = await res.json();
if (data.success) {
this.fleetStats = data.data; // Server returns getFleetStats output
this.initMiniChart();
if (this.selectedMachineId) {
const m = this.machines.find(x => x.id === this.selectedMachineId);
if (m) this.selectMachine(m);
}
],
chart: {
height: 350,
toolbar: { show: false },
background: 'transparent',
fontFamily: 'Outfit'
}
} 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'
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '40%',
rangeBarGroupRows: true
}
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 }
]
}
},
xaxis: {
type: 'datetime',
labels: { style: { colors: isDark ? '#94a3b8' : '#64748b', fontWeight: 700 } }
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: {
labels: { style: { colors: isDark ? '#94a3b8' : '#64748b', fontWeight: 700 } }
min: 0,
max: 100,
labels: {
style: { colors: '#94a3b8', fontWeight: 700, fontSize: '10px' }
}
},
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' }
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>';
}
}
};
this.charts['timeline'] = new ApexCharts(el, options);
this.charts['timeline'].render();
const chartEl = document.querySelector("#utilization-chart");
if (chartEl) {
if (this.chart) this.chart.destroy();
this.chart = new ApexCharts(chartEl, options);
this.chart.render();
}
}
}
};
}
</script>
@endpush
<div class="space-y-6" x-data="utilizationDashboard(@js($compactMachines), @js($fleetStats))">
<!-- Page Header -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div>
<h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Machine Utilization') }}</h1>
<p class="text-sm font-bold text-slate-400 uppercase tracking-widest mt-1">{{ __('Real-time fleet efficiency and OEE metrics') }}</p>
</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">
<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>
</div>
</div>
<!-- Top Stats Bar -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- OEE Metric Card -->
<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="flex items-center justify-between relative z-10">
<div>
<p class="text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-1">{{ __('Fleet Avg OEE') }}</p>
<h3 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight" x-text="(fleetStats.avgOee || 0) + '%'"></h3>
</div>
<div class="w-14 h-14" id="oee-mini-chart"></div>
</div>
<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="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{{ __('Optimized Performance') }}</span>
</div>
</div>
<!-- Online Pulse Card -->
<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="flex items-center justify-between relative z-10">
<div>
<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">
<span class="text-3xl font-black text-slate-800 dark:text-white tracking-tight" 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 class="w-12 h-12 rounded-2xl bg-emerald-500/10 flex items-center justify-center">
<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="relative inline-flex rounded-full h-4 w-4 bg-emerald-500"></span>
</div>
</div>
</div>
<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-full bg-emerald-500 transition-all duration-1000" :style="'width: ' + ((fleetStats.onlineCount / fleetStats.totalMachines) * 100 || 0) + '%'"></div>
</div>
</div>
</div>
<!-- Revenue Insights Card -->
<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="flex items-center justify-between relative z-10">
<div>
<p 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="'$' + (fleetStats.totalSales || 0).toLocaleString()"></h3>
</div>
<div class="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-500">
<svg class="size-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>
<p class="mt-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Total Gross Value') }}</p>
</div>
<!-- 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">
<p class="text-[11px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] mb-3">{{ __('Reporting Period') }}</p>
<div class="relative group">
<input type="date" x-model="startDate" @change="fetchData"
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>
<p class="mt-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Select date to sync data') }}</p>
</div>
</div>
<!-- Master-Detail Interaction Area -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
<!-- Master: Machine List -->
<div class="lg:col-span-4 space-y-4">
<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>
<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>
<!-- Search -->
<div class="relative group">
<span class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="size-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</span>
<input type="text" x-model="searchQuery" placeholder="{{ __('Search serial or name...') }}"
class="luxury-input pl-11 py-3 w-full text-sm">
</div>
<!-- List Container -->
<div class="space-y-3 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
<template x-for="machine in filteredMachines" :key="machine.id">
<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="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="machine.status === 'online' ? 'bg-emerald-500' : 'bg-slate-300'"
class="w-1.5 h-10 rounded-full transition-colors duration-500"></div>
<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>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5" x-text="machine.serial_no"></p>
</div>
<svg :class="selectedMachineId === machine.id ? 'text-cyan-500 translate-x-0 opacity-100' : 'text-slate-300 -translate-x-2 opacity-0'"
class="size-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>
</button>
</template>
<!-- Empty State -->
<template x-if="filteredMachines.length === 0">
<div class="py-12 text-center">
<div class="size-16 mx-auto bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-300 mb-4">
<svg class="size-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>
<p class="text-xs font-bold text-slate-500 uppercase tracking-widest">{{ __('No matching machines') }}</p>
</div>
</template>
</div>
</div>
<!-- Detail: Performance Analysis -->
<div class="lg:col-span-8">
<template x-if="selectedMachine">
<div class="space-y-6 animate-fade-in">
<!-- 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="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/5 backdrop-blur-md">
<div :class="selectedMachine.status === 'online' ? 'bg-emerald-500' : 'bg-slate-400'" class="size-2 rounded-full"></div>
<span class="text-[10px] font-black uppercase tracking-widest" x-text="selectedMachine.status"></span>
</div>
</div>
<div class="flex items-center gap-6">
<div class="size-20 rounded-3xl bg-luxury-gradient flex items-center justify-center text-white shadow-lg shadow-cyan-500/20">
<svg class="size-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>
</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>
<!-- 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>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ __('OEE Score') }}</p>
<p class="text-xl font-black text-cyan-600 dark:text-cyan-400" x-text="(selectedMachine.oee || 0) + '%'"></p>
</div>
<div>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ __('Utilized Time') }}</p>
<p class="text-xl font-black text-slate-800 dark:text-slate-200" x-text="(selectedMachine.utilized_minutes || 0) + ' min'"></p>
</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 -->
<div class="luxury-card rounded-[2.5rem] p-8">
<div class="flex items-center justify-between mb-8">
<div>
<h4 class="text-lg font-black text-slate-800 dark:text-white tracking-tight">{{ __('OEE Efficiency Trend') }}</h4>
<p class="text-xs font-bold text-slate-500 uppercase tracking-widest mt-1">{{ __('Real-time performance analytics') }}</p>
</div>
<div class="flex items-center gap-2">
<span class="size-3 rounded-full bg-cyan-500"></span>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Cycle Efficiency') }}</span>
</div>
</div>
<div id="utilization-chart" class="w-full h-[350px]"></div>
</div>
</div>
</template>
<!-- Detail Placeholder -->
<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 class="size-24 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-300 mb-6 scale-animation">
<svg class="size-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>
<h3 class="text-xl font-black text-slate-800 dark:text-slate-200 tracking-tight">{{ __('No Machine 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>
</template>
</div>
</div>
</div>
@endsection