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

131
resources/views/admin/basic-settings/machines/index.blade.php
View File

@@ -15,6 +15,15 @@
deletedPhotos: [false, false, false],
showImageLightbox: false,
lightboxImageUrl: '',
showMaintenanceQrModal: false,
maintenanceQrMachineName: '',
maintenanceQrUrl: '',
openMaintenanceQr(machine) {
this.maintenanceQrMachineName = machine.name;
const baseUrl = '{{ route('admin.maintenance.create', ['serial_no' => 'SERIAL_NO']) }}';
this.maintenanceQrUrl = baseUrl.replace('SERIAL_NO', machine.serial_no);
this.showMaintenanceQrModal = true;
},
openDetail(machine) {
this.currentMachine = machine;
this.showDetailDrawer = true;
@@ -207,6 +216,14 @@
</span>
</td>
<td class="px-6 py-6 text-right flex items-center justify-end gap-2">
<button @click="openMaintenanceQr(@js($machine->only(['name', 'serial_no'])))"
class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 dark:hover:bg-emerald-500/10 border border-transparent hover:border-emerald-500/20 transition-all inline-flex group/btn"
title="{{ __('Maintenance QR Code') }}">
<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="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" />
</svg>
</button>
<button @click="openPhotoModal(@js($machine->only(['id', 'name', 'image_urls'])))"
class="p-2 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 inline-flex group/btn"
title="{{ __('Machine Images') }}">
@@ -689,28 +706,90 @@
<!-- 4.1 Image Lightbox Modal -->
<template x-teleport="body">
<div x-show="showImageLightbox" class="fixed inset-0 z-[200] flex items-center justify-center p-4 sm:p-10" x-cloak>
<div x-show="showImageLightbox" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="showImageLightbox = false"
class="absolute inset-0 bg-slate-900/90 backdrop-blur-md transition-opacity">
<div x-show="showImageLightbox"
class="fixed inset-0 z-[200] flex items-center justify-center p-4 md:p-12"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak>
<!-- Backdrop -->
<div class="absolute inset-0 bg-slate-950/90 backdrop-blur-xl" @click="showImageLightbox = false"></div>
<!-- Close Button -->
<button @click="showImageLightbox = false"
class="absolute top-6 right-6 p-3 rounded-full bg-white/10 hover:bg-white/20 text-white backdrop-blur-md transition-all duration-300 z-10">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Image Container -->
<div class="relative max-w-5xl w-full max-h-full flex items-center justify-center p-4 animate-luxury-in"
@click.away="showImageLightbox = false">
<img :src="lightboxImageUrl"
class="max-w-full max-h-[85vh] rounded-3xl shadow-2xl border border-white/10 ring-1 ring-white/5 object-contain"
x-show="showImageLightbox"
x-transition:enter="transition ease-out duration-500 delay-100"
x-transition:enter-start="scale-95 opacity-0"
x-transition:enter-end="scale-100 opacity-100">
</div>
<!-- Helper text -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/40 text-[10px] font-bold uppercase tracking-[0.3em] pointer-events-none">
{{ __('Click anywhere to close') }}
</div>
</div>
</template>
<div x-show="showImageLightbox" x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="relative max-w-5xl w-full max-h-full flex items-center justify-center z-[210]">
<button @click="showImageLightbox = false"
class="absolute -top-12 right-0 p-2 text-white/50 hover:text-white transition-colors">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<img :src="lightboxImageUrl"
class="max-w-full max-h-[85vh] rounded-2xl shadow-2xl border border-white/10 object-contain">
<!-- 4.2 Maintenance QR Modal -->
<template x-teleport="body">
<div x-show="showMaintenanceQrModal" class="fixed inset-0 z-[200] overflow-y-auto" x-cloak
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<div class="flex items-center justify-center min-h-screen px-4">
<div class="fixed inset-0 transition-opacity" @click="showMaintenanceQrModal = false">
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
</div>
<div class="relative bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl border border-slate-100 dark:border-slate-800 w-full max-w-sm overflow-hidden animate-luxury-in">
<div class="px-8 py-6 border-b border-slate-50 dark:border-slate-800/50 flex justify-between items-center">
<div>
<h3 class="text-lg font-black text-slate-800 dark:text-white tracking-tight">{{ __('Maintenance QR') }}</h3>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1" x-text="maintenanceQrMachineName"></p>
</div>
<button @click="showMaintenanceQrModal = false" class="text-slate-400 hover:text-slate-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="p-10 flex flex-col items-center gap-6">
<div class="p-4 bg-white rounded-3xl shadow-xl border border-slate-100">
<img :src="'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(maintenanceQrUrl)"
class="w-48 h-48"
alt="{{ __('Maintenance QR Code') }}">
</div>
<div class="text-center space-y-2">
<p class="text-xs font-bold text-slate-500 dark:text-slate-400 leading-relaxed px-4">
{{ __('Scan this code to quickly access the maintenance form for this device.') }}
</p>
<div class="mt-4 p-3 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-100 dark:border-slate-700">
<code class="text-[10px] break-all text-cyan-600 dark:text-cyan-400 font-bold" x-text="maintenanceQrUrl"></code>
</div>
</div>
</div>
<div class="px-8 py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-center border-t border-slate-100 dark:border-slate-800">
<button @click="showMaintenanceQrModal = false" class="btn-luxury-primary w-full py-4 rounded-2xl">{{ __('Close') }}</button>
</div>
</div>
</div>
</div>
</template>
@@ -755,16 +834,12 @@
<div class="grid grid-cols-2 gap-3">
<template x-for="(url, index) in currentMachine.image_urls" :key="index">
<div @click="lightboxImageUrl = url; showImageLightbox = true"
class="relative group aspect-square rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm bg-slate-50 dark:bg-slate-800/50 cursor-pointer">
class="relative group aspect-square rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm bg-slate-50 dark:bg-slate-800/50 cursor-zoom-in hover:ring-2 hover:ring-cyan-500/50 transition-all duration-300 group/img">
<img :src="url"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div
class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
class="absolute inset-0 w-full h-full object-cover group-hover/img:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-slate-900/0 group-hover/img:bg-slate-900/20 flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-all duration-300">
<svg class="w-6 h-6 text-white drop-shadow-md" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
</svg>
</div>
</div>

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

168
resources/views/admin/maintenance/create.blade.php Normal file
View File

@@ -0,0 +1,168 @@
@extends('layouts.admin')
@section('content')
<div class="space-y-6 pb-20">
<!-- Header Area -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div class="flex items-center gap-4">
<!-- Return Button (Ref: Expiry Management) -->
<a href="{{ route('admin.maintenance.index') }}"
class="p-2 rounded-xl bg-white dark:bg-slate-800 text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all border border-slate-200 dark:border-slate-700 shadow-sm">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" />
</svg>
</a>
<div>
<h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Add Maintenance Record') }}</h1>
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Fill in the device repair or maintenance details') }}</p>
</div>
</div>
</div>
@if ($errors->any())
<div class="luxury-card bg-rose-500/10 border-rose-500/20 p-6 rounded-2xl animate-luxury-in">
<div class="flex items-center gap-3 text-rose-500 mb-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span class="font-black uppercase tracking-widest text-sm">{{ __('Please check the following errors:') }}</span>
</div>
<ul class="list-disc list-inside text-sm font-bold text-rose-600/80 dark:text-rose-400/80 space-y-1 ml-8">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('admin.maintenance.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
@csrf
<div class="luxury-card rounded-3xl p-8 animate-luxury-in space-y-8">
<!-- Machine Selection -->
<div class="space-y-4">
@if($machine)
<div class="flex items-center gap-4 p-5 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-800/80 shadow-sm shadow-slate-200/50 dark:shadow-none">
<div class="w-12 h-12 rounded-xl bg-cyan-500 flex items-center justify-center text-white shadow-lg shadow-cyan-500/20">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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>
<div>
<div class="text-base font-black text-slate-800 dark:text-white">{{ $machine->name }}</div>
<div class="text-xs font-mono font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">{{ $machine->serial_no }}</div>
<input type="hidden" name="machine_id" value="{{ $machine->id }}">
</div>
<div class="ml-auto">
<span class="px-2.5 py-1 rounded-lg text-xs font-black bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 border border-sky-100/50 dark:border-sky-900/30 tracking-widest">
{{ $machine->company->name ?? __('None') }}
</span>
</div>
</div>
@else
<div class="relative z-50">
<label class="block text-sm font-black text-slate-700 dark:text-slate-200 uppercase tracking-wider mb-3">{{ __('Select Machine') }}</label>
<x-searchable-select name="machine_id" required :placeholder="__('Search serial no or name...')">
@foreach($machines as $m)
<option value="{{ $m->id }}" data-title="{{ $m->serial_no }} - {{ $m->name }}">
{{ $m->serial_no }} - {{ $m->name }}
</option>
@endforeach
</x-searchable-select>
</div>
@endif
</div>
<!-- Record Details -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="space-y-4">
<label class="block text-sm font-black text-slate-700 dark:text-slate-200 uppercase tracking-wider">{{ __('Category') }}</label>
<div class="grid grid-cols-2 gap-3">
@foreach(['Repair', 'Installation', 'Removal', 'Maintenance'] as $cat)
<label class="relative flex items-center justify-center p-3 rounded-2xl border-2 border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 cursor-pointer hover:border-cyan-500/30 transition-all group">
<input type="radio" name="category" value="{{ $cat }}" class="hidden peer" required {{ old('category') === $cat ? 'checked' : '' }}>
<span class="text-sm font-black text-slate-600 dark:text-slate-400 peer-checked:text-cyan-500 transition-colors uppercase tracking-widest">{{ __($cat) }}</span>
<div class="absolute inset-0 rounded-2xl border-2 border-transparent peer-checked:border-cyan-500/50 peer-checked:bg-cyan-500/5 pointer-events-none transition-all"></div>
</label>
@endforeach
</div>
</div>
<div class="space-y-4">
<label class="block text-sm font-black text-slate-700 dark:text-slate-200 uppercase tracking-wider">{{ __('Maintenance Date') }}</label>
<input type="datetime-local" name="maintenance_at" value="{{ old('maintenance_at', now()->format('Y-m-d\TH:i')) }}" required class="luxury-input w-full">
</div>
</div>
<div class="space-y-4">
<label class="block text-sm font-black text-slate-700 dark:text-slate-200 uppercase tracking-wider">{{ __('Maintenance Content') }}</label>
<textarea name="content" rows="4" class="luxury-input w-full p-6 text-sm" placeholder="{{ __('Describe the repair or maintenance status...') }}">{{ old('content') }}</textarea>
</div>
<!-- Photos -->
<div class="space-y-4" x-data="{
selectedFiles: [null, null, null],
handleFileChange(e, index) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
this.selectedFiles[index] = e.target.result;
};
reader.readAsDataURL(file);
}
},
removeFile(index) {
this.selectedFiles[index] = null;
const input = document.getElementById('photo-input-' + index);
if (input) input.value = '';
}
}">
<h3 class="text-sm font-black text-indigo-500 uppercase tracking-wider">{{ __('Maintenance Photos') }} ({{ __('Max 3') }})</h3>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
<template x-for="i in [0, 1, 2]" :key="i">
<div class="relative group aspect-square rounded-3xl overflow-hidden border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 hover:border-cyan-500/50 transition-all flex flex-col items-center justify-center">
<input type="file" name="photos[]" :id="'photo-input-' + i" class="hidden" accept="image/*" @change="handleFileChange($event, i)">
<template x-if="!selectedFiles[i]">
<label :for="'photo-input-' + i" class="flex flex-col items-center gap-3 cursor-pointer w-full h-full justify-center">
<div class="w-10 h-10 rounded-full bg-white dark:bg-slate-800 flex items-center justify-center text-slate-400 shadow-sm border border-slate-100 dark:border-slate-700">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" />
</svg>
</div>
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest" x-text="'{{ __('Slot') }} ' + (i + 1)"></span>
</label>
</template>
<template x-if="selectedFiles[i]">
<div class="absolute inset-0 w-full h-full">
<img :src="selectedFiles[i]" class="absolute inset-0 w-full h-full object-cover">
<div class="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
<label :for="'photo-input-' + i" class="p-2.5 rounded-xl bg-white text-cyan-600 shadow-xl transform hover:scale-110 transition-all cursor-pointer">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</label>
<button type="button" @click="removeFile(i)" class="p-2.5 rounded-xl bg-rose-500 text-white shadow-xl transform hover:scale-110 transition-all">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
<div class="flex items-center justify-end gap-3 px-4">
<button type="button" onclick="history.back()" class="btn-luxury-ghost px-10">{{ __('Cancel') }}</button>
<button type="submit" class="btn-luxury-primary px-16 py-4 text-base">{{ __('Submit Record') }}</button>
</div>
</form>
</div>
@endsection

281
resources/views/admin/maintenance/index.blade.php Normal file
View File

@@ -0,0 +1,281 @@
@extends('layouts.admin')
@section('content')
<div class="space-y-4 pb-20" x-data="{
showDetailDrawer: false,
currentRecord: null,
translations: {
'Repair': '{{ __('Repair') }}',
'Installation': '{{ __('Installation') }}',
'Removal': '{{ __('Removal') }}',
'Maintenance': '{{ __('Maintenance') }}'
},
openDetail(record) {
this.currentRecord = record;
this.showDetailDrawer = true;
},
enlargedImage: null
}">
<!-- 1. Header Area -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Maintenance Records') }}</h1>
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Track device health and maintenance history') }}</p>
</div>
<div class="flex items-center gap-3">
<a href="{{ route('admin.maintenance.create') }}" class="btn-luxury-primary flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<span>{{ __('New Record') }}</span>
</a>
</div>
</div>
<!-- 2. Main Content Card -->
<div class="luxury-card rounded-3xl p-8 animate-luxury-in mt-6">
<!-- Toolbar & Filters -->
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-6">
<!-- Search -->
<form method="GET" action="{{ route('admin.maintenance.index') }}" class="flex items-center gap-4">
<div class="relative group">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
<svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</span>
<input type="text" name="search" value="{{ request('search') }}"
placeholder="{{ __('Search serial or machine...') }}"
class="luxury-input luxury-input-sm pl-12 pr-6 block w-72 font-bold">
</div>
<!-- Category Filter (Custom Select UI) -->
<div class="flex items-center gap-3 w-48">
<x-searchable-select name="category" :placeholder="__('All Categories')" :selected="request('category')"
onchange="this.form.submit()" :hasSearch="false" class="luxury-select-sm">
@foreach(['Repair', 'Installation', 'Removal', 'Maintenance'] as $cat)
<option value="{{ $cat }}" {{ request('category') == $cat ? 'selected' : '' }}>
{{ __($cat) }}
</option>
@endforeach
</x-searchable-select>
</div>
</form>
</div>
</div>
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full text-left border-separate border-spacing-y-0">
<thead>
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Time') }}</th>
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Machine') }}</th>
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Company') }}</th>
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Category') }}</th>
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Engineer') }}</th>
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
@forelse($records as $record)
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
<td class="px-6 py-6 font-mono text-xs font-bold text-slate-600 dark:text-slate-300">
{{ $record->maintenance_at->format('Y-m-d H:i') }}
</td>
<td class="px-6 py-6 cursor-pointer group/cell" @click="openDetail({{ $record->load('machine', 'user', 'company')->toJson() }})">
<div class="flex flex-col">
<span class="text-sm font-black text-slate-800 dark:text-slate-100 group-hover/cell:text-cyan-600 transition-colors">{{ $record->machine->name }}</span>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest group-hover/cell:text-cyan-500/60 transition-colors">{{ $record->machine->serial_no }}</span>
</div>
</td>
<td class="px-6 py-6">
<div class="flex flex-col">
<span class="text-sm font-bold text-slate-600 dark:text-slate-300">{{ $record->company->name ?? 'N/A' }}</span>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ $record->company->company_code ?? '' }}</span>
</div>
</td>
<td class="px-6 py-6">
@php
$color = match($record->category) {
'Repair' => 'rose',
'Installation' => 'emerald',
'Removal' => 'amber',
'Maintenance' => 'cyan',
default => 'slate'
};
@endphp
<div class="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-{{ $color }}-500/10 border border-{{ $color }}-500/20 w-fit">
<span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-{{ $color }}-500"></span>
<span class="text-[10px] font-black text-{{ $color }}-600 dark:text-{{ $color }}-400 tracking-widest uppercase">
{{ __($record->category) }}
</span>
</div>
</td>
<td class="px-6 py-6">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-[10px] font-bold text-slate-500 border border-slate-200 dark:border-slate-700">
{{ mb_substr($record->user->name, 0, 1) }}
</div>
<span class="text-sm font-bold text-slate-600 dark:text-slate-300">{{ $record->user->name }}</span>
</div>
</td>
<td class="px-6 py-6 text-right">
<button @click="openDetail({{ $record->load('machine', 'user', 'company')->toJson() }})"
class="text-slate-400 hover:text-cyan-500 transition-colors p-2 rounded-lg bg-slate-50 dark:bg-slate-800 border border-transparent hover:border-cyan-500/20">
<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 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
</td>
</tr>
@empty
<tr>
<td colspan="5" class="px-6 py-20 text-center text-slate-500 dark:text-slate-400 font-bold tracking-widest uppercase italic">
{{ __('No maintenance records found') }}
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
{{ $records->links('vendor.pagination.luxury') }}
</div>
</div>
<!-- 1. Maintenance Detail Drawer -->
<template x-teleport="body">
<div x-show="showDetailDrawer" class="fixed inset-0 z-[150]" x-cloak>
<div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" x-show="showDetailDrawer"
x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="showDetailDrawer = false">
</div>
<div class="fixed inset-y-0 right-0 max-w-full flex">
<div class="w-screen max-w-md" x-show="showDetailDrawer"
x-transition:enter="transform transition ease-in-out duration-500"
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500"
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
<div class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-100 dark:border-slate-800">
<div class="px-6 py-4 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
<div>
<h2 class="text-xl font-black text-slate-800 dark:text-white">{{ __('Maintenance Details') }}</h2>
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1" x-text="currentRecord?.machine?.name"></p>
</div>
<button @click="showDetailDrawer = false" class="p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-1 overflow-y-auto px-6 py-4 space-y-6 custom-scrollbar">
<!-- Basic Info -->
<section class="space-y-4">
<div class="grid grid-cols-2 gap-3">
<div class="bg-slate-50 dark:bg-slate-800/40 p-4 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">{{ __('Category') }}</span>
<div class="text-xs font-black text-slate-700 dark:text-slate-100" x-text="currentRecord ? (translations[currentRecord.category] || currentRecord.category) : ''"></div>
</div>
<div class="bg-slate-50 dark:bg-slate-800/40 p-4 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">{{ __('Engineer') }}</span>
<div class="text-xs font-black text-slate-700 dark:text-slate-100" x-text="currentRecord?.user?.name"></div>
</div>
</div>
<div class="bg-slate-50 dark:bg-slate-800/40 p-4 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">{{ __('Company') }}</span>
<div class="text-xs font-black text-slate-700 dark:text-slate-100" x-text="currentRecord?.company?.name || 'N/A'"></div>
</div>
<div class="bg-slate-50 dark:bg-slate-800/40 p-4 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">{{ __('Execution Time') }}</span>
<div class="text-xs font-black text-slate-700 dark:text-slate-100" x-text="currentRecord ? new Date(currentRecord.maintenance_at).toLocaleString() : ''"></div>
</div>
</section>
<!-- Content -->
<section class="space-y-3">
<h3 class="text-[11px] font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Work Content') }}</h3>
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<p class="text-sm font-medium text-slate-600 dark:text-slate-300 leading-relaxed whitespace-pre-wrap" x-text="currentRecord?.content || '{{ __('No content provided') }}'"></p>
</div>
</section>
<!-- Photos -->
<template x-if="currentRecord?.photos && currentRecord.photos.length > 0">
<section class="space-y-4">
<h3 class="text-[11px] font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Maintenance Photos') }}</h3>
<div class="grid grid-cols-2 gap-3">
<template x-for="(path, index) in currentRecord.photos" :key="index">
<div @click="enlargedImage = '/storage/' + path"
class="relative aspect-square rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm bg-slate-50 dark:bg-slate-800/50 cursor-zoom-in hover:ring-2 hover:ring-cyan-500/50 transition-all duration-300 group/img">
<img :src="'/storage/' + path" class="absolute inset-0 w-full h-full object-cover group-hover/img:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-slate-900/0 group-hover/img:bg-slate-900/20 flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-all duration-300">
<svg class="w-6 h-6 text-white drop-shadow-md" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
</svg>
</div>
</div>
</template>
</div>
</section>
</template>
</div>
<div class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
<button @click="showDetailDrawer = false" class="w-full btn-luxury-ghost">{{ __('Close Panel') }}</button>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
<!-- Image Lightbox Overlay -->
<template x-teleport="body">
<div x-show="enlargedImage"
class="fixed inset-0 z-[200] flex items-center justify-center p-4 md:p-12"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak>
<!-- Backdrop -->
<div class="absolute inset-0 bg-slate-950/90 backdrop-blur-xl" @click="enlargedImage = null"></div>
<!-- Close Button -->
<button @click="enlargedImage = null"
class="absolute top-6 right-6 p-3 rounded-full bg-white/10 hover:bg-white/20 text-white backdrop-blur-md transition-all duration-300 z-10">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Image Container -->
<div class="relative max-w-5xl w-full max-h-full flex items-center justify-center p-4 animate-luxury-in"
@click.away="enlargedImage = null">
<img :src="enlargedImage"
class="max-w-full max-h-[85vh] rounded-3xl shadow-2xl border border-white/10 ring-1 ring-white/5 object-contain"
x-show="enlargedImage"
x-transition:enter="transition ease-out duration-500 delay-100"
x-transition:enter-start="scale-95 opacity-0"
x-transition:enter-end="scale-100 opacity-100">
</div>
<!-- Helper text -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/40 text-[10px] font-bold uppercase tracking-[0.3em] pointer-events-none">
{{ __('Click anywhere to close') }}
</div>
</div>
</template>
</div>
@endsection

18
resources/views/components/breadcrumbs.blade.php
View File

@@ -34,6 +34,7 @@
'admin.special-permission' => __('Special Permission'),
'admin.permission' => __('Permission Settings'),
'admin.basic-settings' => __('Basic Settings'),
'admin.maintenance' => __('Machine Management'),
];
// 1. 找出所屬大模組
@@ -67,18 +68,32 @@
'payment-configs' => __('Customer Payment Config'),
'warehouses' => __('Warehouse List'),
'sales' => __('Sales Records'),
'maintenance' => __('Maintenance Records'),
default => null,
};
if ($midLabel) {
$links[] = [
'label' => $midLabel,
'url' => '#', // 如果有需要可以導向 index 路由
'url' => match($midSegment) {
'maintenance' => route('admin.maintenance.index'),
'machines' => str_contains($routeName, 'basic-settings') ? route('admin.basic-settings.machines.index') : '#',
default => '#',
},
'active' => $lastSegment === 'index'
];
}
}
// 特殊處理：當只有三段且第二段是 maintenance 時，增加中間層級
if (count($segments) === 3 && $segments[1] === 'maintenance' && $lastSegment !== 'index') {
$links[] = [
'label' => __('Maintenance Records'),
'url' => route('admin.maintenance.index'),
'active' => false
];
}
// 3. 處理最後一個動作/頁面
$pageLabel = match($lastSegment) {
'index' => match($segments[1] ?? '') {
@@ -88,6 +103,7 @@
'sales' => __('Sales Records'),
'analysis' => __('Analysis Management'),
'audit' => __('Audit Management'),
'maintenance' => __('Maintenance Records'),
default => null,
},
'edit' => str_starts_with($routeName, 'profile') ? null : __('Edit'),

2
resources/views/components/loading-screen.blade.php
View File

@@ -1,6 +1,8 @@
<div x-data="{
loading: true
}"
x-on:show-global-loading.window="loading = true"
x-on:hide-global-loading.window="loading = false"
x-init="
const urlParams = new URLSearchParams(window.location.search);
const simulateDelay = urlParams.get('simulate_loading');

8
resources/views/layouts/partials/sidebar-menu.blade.php
View File

@@ -49,7 +49,7 @@
@can('menu.machines')
{{-- 4. 機台管理 --}}
<li x-data="{ open: localStorage.getItem('menu_machines') === 'true' || {{ request()->routeIs('admin.machines.*') ? 'true' : 'false' }} }">
<li x-data="{ open: localStorage.getItem('menu_machines') === 'true' || {{ request()->routeIs('admin.machines.*') || request()->routeIs('admin.maintenance.*') ? 'true' : 'false' }} }">
<button type="button" @click="open = !open; localStorage.setItem('menu_machines', open)" class="luxury-nav-item w-full text-start group">
<svg class="w-4 h-4 shrink-0 transition-colors {{ request()->routeIs('admin.machines.*') ? 'text-cyan-500' : 'text-slate-600 group-hover:text-cyan-500 dark:text-slate-300 dark:group-hover:text-cyan-400' }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 01-2 2v4a2 2 0 012 2h14a2 2 0 012-2v-4a2 2 0 01-2-2m-2-4h.01M17 16h.01" /></svg>
{{ __('Machine Management') }}
@@ -64,14 +64,18 @@
</a></li>
@endcan
@can('menu.machines.utilization')
<li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.machines.utilization') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.machines.utilization') }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
{{ __('Utilization Rate') }}
</a></li>
<li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.machines.maintenance') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.machines.maintenance') }}">
@endcan
@can('menu.machines.maintenance')
<li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.maintenance.*') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.maintenance.index') }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01m-.01 4h.01" /></svg>
{{ __('Maintenance Records') }}
</a></li>
@endcan
</ul>
</div>
</li>