[FEAT] 實作維修管理模組與 RBAC 權限整合、多語系支援及 UI 優化

app/Http/Controllers/Admin/BasicSettings/MachinePhotoController.php

@@ -4,6 +4,7 @@ namespace App\Http\Controllers\Admin\BasicSettings;
 
 use App\Http\Controllers\Controller;
 use App\Models\Machine\Machine;
+use App\Traits\ImageHandler;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Log;
@@ -11,6 +12,8 @@ use Illuminate\Support\Facades\Storage;
 
 class MachinePhotoController extends Controller
 {
+    use ImageHandler;
+
     /**
      * 更新機台照片
      */
@@ -64,50 +67,4 @@ class MachinePhotoController extends Controller
             return back()->with('error', __('Failed to update machine images: ') . $e->getMessage());
         }
     }
-
-    /**
-     * 將圖片轉換為 WebP 並儲存
-     */
-    protected function storeAsWebp($file, $directory): string
-    {
-        $extension = $file->getClientOriginalExtension();
-        $filename = uniqid() . '.webp';
-        $path = "{$directory}/{$filename}";
-
-        // 讀取原始圖片
-        $imageType = exif_imagetype($file->getRealPath());
-        switch ($imageType) {
-            case IMAGETYPE_JPEG:
-                $source = imagecreatefromjpeg($file->getRealPath());
-                break;
-            case IMAGETYPE_PNG:
-                $source = imagecreatefrompng($file->getRealPath());
-                break;
-            case IMAGETYPE_WEBP:
-                $source = imagecreatefromwebp($file->getRealPath());
-                break;
-            default:
-                // 如果格式不支援，直接存
-                return $file->storeAs($directory, $file->hashName(), 'public');
-        }
-
-        if (!$source) {
-            return $file->storeAs($directory, $file->hashName(), 'public');
-        }
-
-        // 確保支援真彩色（解決 palette image 問題）
-        if (!imageistruecolor($source)) {
-            imagepalettetotruecolor($source);
-        }
-
-        // 捕捉輸出
-        ob_start();
-        imagewebp($source, null, 80);
-        $content = ob_get_clean();
-        imagedestroy($source);
-
-        Storage::disk('public')->put($path, $content);
-
-        return $path;
-    }
 }

app/Http/Controllers/Admin/BasicSettings/MachineSettingController.php

@@ -6,6 +6,7 @@ use App\Http\Controllers\Admin\AdminController;
 use App\Models\Machine\Machine;
 use App\Models\Machine\MachineModel;
 use App\Models\System\PaymentConfig;
+use App\Traits\ImageHandler;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 use Illuminate\Http\RedirectResponse;
@@ -16,6 +17,8 @@ use Illuminate\Support\Facades\Log;
 
 class MachineSettingController extends AdminController
 {
+    use ImageHandler;
+
     /**
      * 顯示機台與型號設定列表 (採用標籤頁整合)
      */
@@ -75,7 +78,7 @@ class MachineSettingController extends AdminController
         $imagePaths = [];
         if ($request->hasFile('images')) {
             foreach (array_slice($request->file('images'), 0, 3) as $image) {
-                $imagePaths[] = $this->processAndStoreImage($image);
+                $imagePaths[] = $this->storeAsWebp($image, 'machines');
             }
         }
 
@@ -171,7 +174,7 @@ class MachineSettingController extends AdminController
                 }
 
                 // 處理並儲存新圖
-                $currentImages[$index] = $this->processAndStoreImage($file);
+                $currentImages[$index] = $this->storeAsWebp($file, 'machines');
                 $updated = true;
             }
 
@@ -184,49 +187,4 @@ class MachineSettingController extends AdminController
         return redirect()->route('admin.basic-settings.machines.index')
             ->with('success', __('Machine settings updated successfully.'));
     }
-
-    /**
-     * 處理並儲存圖片 (轉換為 WebP 並調整大小)
-     */
-    protected function processAndStoreImage($file)
-    {
-        $path = 'machines/' . \Illuminate\Support\Str::random(40) . '.webp';
-        
-        // 載入原圖
-        $imageInfo = getimagesize($file->getRealPath());
-        $mime = $imageInfo['mime'];
-        
-        switch ($mime) {
-            case 'image/jpeg':
-                $image = imagecreatefromjpeg($file->getRealPath());
-                break;
-            case 'image/png':
-                $image = imagecreatefrompng($file->getRealPath());
-                break;
-            case 'image/gif':
-                $image = imagecreatefromgif($file->getRealPath());
-                break;
-            default:
-                return $file->store('machines', 'public');
-        }
-
-        if ($image) {
-            // [修正] imagewebp(): Palette image not supported by webp
-            // 若為 Palette 圖片 (例如 GIF)，轉換為 Truecolor
-            if (!imageistruecolor($image)) {
-                imagepalettetotruecolor($image);
-            }
-
-            \Illuminate\Support\Facades\Storage::disk('public')->makeDirectory('machines');
-            $fullPath = \Illuminate\Support\Facades\Storage::disk('public')->path($path);
-            
-            // 轉換並儲存 (品質 80)
-            imagewebp($image, $fullPath, 80);
-            imagedestroy($image);
-            
-            return $path;
-        }
-
-        return $file->store('machines', 'public');
-    }
 }

app/Http/Controllers/Admin/MachineController.php

@@ -172,9 +172,20 @@ class MachineController extends AdminController
     {
         // 取得當前使用者有權限的所有機台 (已透過 Global Scope 過濾)
         $machines = Machine::all();
+        
+        $date = $request->get('date', now()->toDateString());
+        $service = app(\App\Services\Machine\MachineService::class);
+        $fleetStats = $service->getFleetStats($date);
 
         return view('admin.machines.utilization', [
-            'machines' => $machines
+            'machines' => $machines,
+            'fleetStats' => $fleetStats,
+            'compactMachines' => $machines->map(fn($m) => [
+                'id' => $m->id,
+                'name' => $m->name,
+                'serial_no' => $m->serial_no,
+                'status' => $m->status
+            ])->values()
         ]);
     }
 
@@ -225,13 +236,17 @@ class MachineController extends AdminController
     /**
      * 取得機台統計數據 (AJAX)
      */
-    public function utilizationData(int $id, Request $request)
+    public function utilizationData(Request $request, $id = null)
     {
-        $machine = Machine::findOrFail($id);
         $date = $request->get('date', now()->toDateString());
-
         $service = app(\App\Services\Machine\MachineService::class);
-        $stats = $service->getUtilizationStats($machine, $date);
+
+        if ($id) {
+            $machine = Machine::findOrFail($id);
+            $stats = $service->getUtilizationStats($machine, $date);
+        } else {
+            $stats = $service->getFleetStats($date);
+        }
 
         return response()->json([
             'success' => true,

app/Http/Controllers/Admin/MaintenanceController.php

@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use App\Models\Machine\Machine;
+use App\Models\Machine\MaintenanceRecord;
+use App\Traits\ImageHandler;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Storage;
+
+class MaintenanceController extends Controller
+{
+    use ImageHandler;
+
+    /**
+     * 維修紀錄列表
+     */
+    public function index(Request $request)
+    {
+        $this->authorize('viewAny', MaintenanceRecord::class);
+
+        $query = MaintenanceRecord::with(['machine', 'user', 'company'])
+            ->latest('maintenance_at');
+
+        // 搜尋邏輯
+        if ($request->filled('search')) {
+            $search = $request->search;
+            $query->whereHas('machine', function($q) use ($search) {
+                $q->where('serial_no', 'like', "%{$search}%")
+                  ->orWhere('name', 'like', "%{$search}%");
+            });
+        }
+
+        if ($request->filled('category')) {
+            $query->where('category', $request->category);
+        }
+
+        $records = $query->paginate(15)->withQueryString();
+
+        return view('admin.maintenance.index', compact('records'));
+    }
+
+    /**
+     * 顯示新增維修單頁面
+     */
+    public function create(Request $request, $serial_no = null)
+    {
+        $this->authorize('create', MaintenanceRecord::class);
+
+        $machine = null;
+        if ($serial_no) {
+            $machine = Machine::where('serial_no', $serial_no)->firstOrFail();
+        }
+
+        // 供手動新增時選擇的機台清單 (僅限有權限存取的)
+        $machines = Machine::all();
+
+        return view('admin.maintenance.create', compact('machine', 'machines'));
+    }
+
+    /**
+     * 儲存維修單
+     */
+    public function store(Request $request)
+    {
+        $this->authorize('create', MaintenanceRecord::class);
+
+        $validated = $request->validate([
+            'machine_id' => 'required|exists:machines,id',
+            'category' => 'required|in:Repair,Installation,Removal,Maintenance',
+            'content' => 'nullable|string',
+            'maintenance_at' => 'required|date',
+            'photos.*' => 'nullable|image|max:5120', // 每張上限 5MB
+        ]);
+
+        $machine = Machine::findOrFail($validated['machine_id']);
+        
+        $photoPaths = [];
+        if ($request->hasFile('photos')) {
+            foreach ($request->file('photos') as $photo) {
+                if (!$photo) continue;
+                if (count($photoPaths) >= 3) break;
+                
+                // 轉為 WebP 格式與保存
+                $path = $this->storeAsWebp($photo, "maintenance/{$machine->id}");
+                $photoPaths[] = $path;
+            }
+        }
+
+        $record = MaintenanceRecord::create([
+            'company_id' => $machine->company_id, // 從機台帶入歸屬客戶
+            'machine_id' => $machine->id,
+            'user_id' => Auth::id(),
+            'category' => $validated['category'],
+            'content' => $validated['content'],
+            'photos' => $photoPaths,
+            'maintenance_at' => $validated['maintenance_at'],
+        ]);
+
+        return redirect()->route('admin.maintenance.index')
+            ->with('success', __('Maintenance record created successfully'));
+    }
+}

app/Models/Machine/MaintenanceRecord.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Models\Machine;
+
+use Illuminate\Database\Eloquent\Model;
+
+use App\Traits\TenantScoped;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use App\Models\System\User;
+use App\Models\Machine\Machine;
+
+class MaintenanceRecord extends Model
+{
+    use TenantScoped, SoftDeletes;
+
+    protected $fillable = [
+        'company_id',
+        'machine_id',
+        'user_id',
+        'category',
+        'content',
+        'photos',
+        'maintenance_at',
+    ];
+
+    protected $casts = [
+        'photos' => 'array',
+        'maintenance_at' => 'datetime',
+    ];
+
+    public function machine()
+    {
+        return $this->belongsTo(Machine::class);
+    }
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    public function company()
+    {
+        return $this->belongsTo(\App\Models\System\Company::class);
+    }
+}

app/Policies/Machine/MaintenanceRecordPolicy.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Policies\Machine;
+
+use App\Models\Machine\MaintenanceRecord;
+use App\Models\System\User;
+use Illuminate\Auth\Access\Response;
+
+class MaintenanceRecordPolicy
+{
+    /**
+     * Determine whether the user can view any models.
+     */
+    public function viewAny(User $user): bool
+    {
+        return $user->can('menu.machines.maintenance');
+    }
+
+    /**
+     * Determine whether the user can view the model.
+     */
+    public function view(User $user, MaintenanceRecord $maintenanceRecord): bool
+    {
+        return $user->can('menu.machines.maintenance');
+    }
+
+    /**
+     * Determine whether the user can create models.
+     */
+    public function create(User $user): bool
+    {
+        return $user->can('menu.machines.maintenance');
+    }
+
+    /**
+     * Determine whether the user can update the model.
+     */
+    public function update(User $user, MaintenanceRecord $maintenanceRecord): bool
+    {
+        return $user->can('menu.machines.maintenance');
+    }
+
+    /**
+     * Determine whether the user can delete the model.
+     */
+    public function delete(User $user, MaintenanceRecord $maintenanceRecord): bool
+    {
+        return $user->isSystemAdmin() && $user->can('menu.machines.maintenance');
+    }
+
+    /**
+     * Determine whether the user can restore the model.
+     */
+    public function restore(User $user, MaintenanceRecord $maintenanceRecord): bool
+    {
+        return false;
+    }
+
+    /**
+     * Determine whether the user can permanently delete the model.
+     */
+    public function forceDelete(User $user, MaintenanceRecord $maintenanceRecord): bool
+    {
+        return false;
+    }
+}

app/Providers/AuthServiceProvider.php

@@ -13,7 +13,7 @@ class AuthServiceProvider extends ServiceProvider
      * @var array<class-string, class-string>
      */
     protected $policies = [
-        //
+        \App\Models\Machine\MaintenanceRecord::class => \App\Policies\Machine\MaintenanceRecordPolicy::class,
     ];
 
     /**

app/Services/Machine/MachineService.php

@@ -106,6 +106,51 @@ class MachineService
         ]);
     }
 
+    /**
+     * Get machine utilization and OEE statistics for entire fleet.
+     */
+    public function getFleetStats(string $date): array
+    {
+        $start = Carbon::parse($date)->startOfDay();
+        $end = Carbon::parse($date)->endOfDay();
+
+        // 1. Online Count (Base on current status)
+        $machines = Machine::all(); // This is filtered by TenantScoped
+        $totalMachines = $machines->count();
+        $onlineCount = $machines->where('status', 'online')->count();
+
+        $machineIds = $machines->pluck('id')->toArray();
+
+        // 2. Total Daily Sales (Sum of B600 logs across all authorized machines)
+        $totalSales = MachineLog::whereIn('machine_id', $machineIds)
+            ->where('message', 'like', '%B600%')
+            ->whereBetween('created_at', [$start, $end])
+            ->count();
+
+        // 3. Average OEE (Simulated based on individual machine stats for performance)
+        $totalOee = 0;
+        $count = 0;
+        
+        foreach ($machines as $machine) {
+            $stats = $this->getUtilizationStats($machine, $date);
+            $totalOee += $stats['overview']['oee'];
+            $count++;
+        }
+
+        $avgOee = ($count > 0) ? ($totalOee / $count) : 0;
+
+        return [
+            'avgOee' => round($avgOee, 2),
+            'onlineCount' => $onlineCount,
+            'totalMachines' => $totalMachines,
+            'totalSales' => $totalSales,
+            'alertCount' => MachineLog::whereIn('machine_id', $machineIds)
+                ->where('level', 'error')
+                ->whereBetween('created_at', [$start, $end])
+                ->count()
+        ];
+    }
+
     /**
      * Get machine utilization and OEE statistics.
      */

app/Traits/ImageHandler.php

@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Traits;
+
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+trait ImageHandler
+{
+    /**
+     * 將圖片轉換為 WebP 並儲存
+     *
+     * @param UploadedFile $file 原始檔案
+     * @param string $directory 儲存目錄 (不含 disk 名稱)
+     * @param int $quality 壓縮品質 (0-100)
+     * @return string 儲存的路徑
+     */
+    protected function storeAsWebp(UploadedFile $file, string $directory, int $quality = 80): string
+    {
+        $filename = Str::random(40) . '.webp';
+        $path = "{$directory}/{$filename}";
+
+        // 讀取原始圖片資訊
+        $imageInfo = getimagesize($file->getRealPath());
+        if (!$imageInfo) {
+            return $file->store($directory, 'public');
+        }
+
+        $mime = $imageInfo['mime'];
+        $source = null;
+
+        switch ($mime) {
+            case 'image/jpeg':
+                $source = imagecreatefromjpeg($file->getRealPath());
+                break;
+            case 'image/png':
+                $source = imagecreatefrompng($file->getRealPath());
+                break;
+            case 'image/gif':
+                $source = imagecreatefromgif($file->getRealPath());
+                break;
+            case 'image/webp':
+                $source = imagecreatefromwebp($file->getRealPath());
+                break;
+            default:
+                // 不支援的格式直接存
+                return $file->store($directory, 'public');
+        }
+
+        if (!$source) {
+            return $file->store($directory, 'public');
+        }
+
+        // 確保支援真彩色 (解決 palette image 問題)
+        if (!imageistruecolor($source)) {
+            imagepalettetotruecolor($source);
+        }
+
+        // 確保目錄存在
+        Storage::disk('public')->makeDirectory($directory);
+        $fullPath = Storage::disk('public')->path($path);
+
+        // 轉換並儲存
+        imagewebp($source, $fullPath, $quality);
+        imagedestroy($source);
+
+        return $path;
+    }
+}

database/migrations/2026_03_25_112212_create_maintenance_records_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('maintenance_records', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('company_id')->constrained()->onDelete('cascade');
+            $table->foreignId('machine_id')->constrained()->onDelete('cascade');
+            $table->foreignId('user_id')->constrained()->onDelete('cascade');
+            $table->string('category')->comment('維修、裝機、撤機、保養');
+            $table->text('content')->nullable();
+            $table->json('photos')->nullable();
+            $table->timestamp('maintenance_at')->useCurrent();
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('maintenance_records');
+    }
+};

database/seeders/RoleSeeder.php

@@ -22,6 +22,8 @@ class RoleSeeder extends Seeder
             'menu.members',
             'menu.machines',
             'menu.machines.list',
+            'menu.machines.utilization',
+            'menu.machines.maintenance',
             'menu.app',
             'menu.warehouses',
             'menu.sales',
@@ -62,6 +64,8 @@ class RoleSeeder extends Seeder
             'menu.members',
             'menu.machines',
             'menu.machines.list',
+            'menu.machines.utilization',
+            'menu.machines.maintenance',
             'menu.app',
             'menu.warehouses',
             'menu.sales',

lang/en.json

@@ -25,6 +25,7 @@
     "Add Customer": "Add Customer",
     "Add Machine": "Add Machine",
     "Add Machine Model": "Add Machine Model",
+    "Add Maintenance Record": "Add Maintenance Record",
     "Add Role": "Add Role",
     "Admin": "Admin",
     "Admin Name": "Admin Name",
@@ -40,6 +41,7 @@
     "Alerts Pending": "Alerts Pending",
     "All": "All",
     "All Affiliations": "All Affiliations",
+    "All Categories": "All Categories",
     "All Companies": "All Companies",
     "All Levels": "All Levels",
     "All Machines": "All Machines",
@@ -83,6 +85,7 @@
     "Card Reader No": "Card Reader No",
     "Card Reader Restart": "Card Reader Restart",
     "Card Reader Seconds": "Card Reader Seconds",
+    "Category": "Category",
     "Change": "Change",
     "Change Stock": "Change Stock",
     "ChannelId": "ChannelId",
@@ -141,8 +144,10 @@
     "Delete Account": "Delete Account",
     "Delete Permanently": "Delete Permanently",
     "Deposit Bonus": "Deposit Bonus",
+    "Describe the repair or maintenance status...": "Describe the repair or maintenance status...",
     "Deselect All": "取消全選",
     "Detail": "Detail",
+    "Device Information": "Device Information",
     "Device Status Logs": "Device Status Logs",
     "Disabled": "Disabled",
     "Discord Notifications": "Discord Notifications",
@@ -168,6 +173,7 @@
     "Edit Sub Account Role": "編輯子帳號角色",
     "Email": "Email",
     "Enabled/Disabled": "Enabled/Disabled",
+    "Engineer": "Engineer",
     "Ensure your account is using a long, random password to stay secure.": "Ensure your account is using a long, random password to stay secure.",
     "Enter login ID": "Enter login ID",
     "Enter machine location": "Enter machine location",
@@ -178,6 +184,7 @@
     "Enter your password to confirm": "Enter your password to confirm",
     "Equipment efficiency and OEE metrics": "設備效能與 OEE 綜合指標",
     "Error": "Error",
+    "Execution Time": "Execution Time",
     "Expired": "Expired",
     "Expired / Disabled": "Expired / Disabled",
     "Expiry Date": "Expiry Date",
@@ -185,6 +192,7 @@
     "Failed to fetch machine data.": "Failed to fetch machine data.",
     "Failed to save permissions.": "Failed to save permissions.",
     "Failed to update machine images: ": "Failed to update machine images: ",
+    "Fill in the device repair or maintenance details": "Fill in the device repair or maintenance details",
     "Firmware Version": "Firmware Version",
     "Fleet Avg OEE": "全機隊平均 OEE",
     "Fleet Performance": "全機隊效能",
@@ -209,6 +217,7 @@
     "Info": "Info",
     "Initial Admin Account": "Initial Admin Account",
     "Initial Role": "Initial Role",
+    "Installation": "Installation",
     "Invoice Status": "Invoice Status",
     "Items": "Items",
     "JKO_MERCHANT_ID": "JKO_MERCHANT_ID",
@@ -269,7 +278,16 @@
     "Machine settings updated successfully.": "Machine settings updated successfully.",
     "Machines": "Machines",
     "Machines Online": "在線機台數",
+    "Maintenance": "Maintenance",
+    "Maintenance Content": "Maintenance Content",
+    "Maintenance Date": "Maintenance Date",
+    "Maintenance Details": "Maintenance Details",
+    "Maintenance Photos": "Maintenance Photos",
+    "Maintenance QR": "Maintenance QR",
+    "Maintenance QR Code": "Maintenance QR Code",
     "Maintenance Records": "Maintenance Records",
+    "Maintenance record created successfully": "Maintenance record created successfully",
+    "Scan this code to quickly access the maintenance form for this device.": "Scan this code to quickly access the maintenance form for this device.",
     "Manage Account Access": "管理帳號存取",
     "Manage Expiry": "Manage Expiry",
     "Manage administrative and tenant accounts": "Manage administrative and tenant accounts",
@@ -302,12 +320,14 @@
     "Never Connected": "Never Connected",
     "New Password": "New Password",
     "New Password (leave blank to keep current)": "New Password (leave blank to keep current)",
+    "New Record": "New Record",
     "New Sub Account Role": "新增子帳號角色",
     "Next": "Next",
     "No Invoice": "No Invoice",
     "No accounts found": "No accounts found",
     "No alert summary": "No alert summary",
     "No configurations found": "No configurations found",
+    "No content provided": "No content provided",
     "No customers found": "No customers found",
     "No data available": "No data available",
     "No file uploaded.": "No file uploaded.",
@@ -318,6 +338,7 @@
     "No machines assigned": "未分配機台",
     "No machines available": "No machines available",
     "No machines available in this company.": "此客戶目前沒有可供分配的機台。",
+    "No maintenance records found": "No maintenance records found",
     "No matching logs found": "No matching logs found",
     "No permissions": "No permissions",
     "No roles found.": "No roles found.",
@@ -414,6 +435,8 @@
     "Remote Lock": "Remote Lock",
     "Remote Management": "Remote Management",
     "Remote Permissions": "Remote Permissions",
+    "Removal": "Removal",
+    "Repair": "Repair",
     "Replenishment Audit": "Replenishment Audit",
     "Replenishment Page": "Replenishment Page",
     "Replenishment Records": "Replenishment Records",
@@ -457,6 +480,8 @@
     "Search machines...": "Search machines...",
     "Search models...": "Search models...",
     "Search roles...": "Search roles...",
+    "Search serial no or name...": "Search serial no or name...",
+    "Search serial or machine...": "Search serial or machine...",
     "Search users...": "Search users...",
     "Select All": "全選",
     "Select Company": "Select Company",
@@ -494,6 +519,7 @@
     "Sub Accounts": "Sub Accounts",
     "Sub-actions": "子項目",
     "Sub-machine Status Request": "Sub-machine Status",
+    "Submit Record": "Submit Record",
     "Success": "Success",
     "Super Admin": "Super Admin",
     "Super-admin role cannot be assigned to tenant accounts.": "Super-admin role cannot be assigned to tenant accounts.",
@@ -533,6 +559,7 @@
     "Total Selected": "已選擇總數",
     "Total Slots": "Total Slots",
     "Total items": "Total items: :count",
+    "Track device health and maintenance history": "Track device health and maintenance history",
     "Transfer Audit": "Transfer Audit",
     "Transfers": "Transfers",
     "Tutorial Page": "Tutorial Page",
@@ -569,6 +596,7 @@
     "Warning: You are editing your own role!": "Warning: You are editing your own role!",
     "Welcome Gift": "Welcome Gift",
     "Welcome Gift Status": "Welcome Gift Status",
+    "Work Content": "Work Content",
     "Yesterday": "Yesterday",
     "You cannot assign permissions you do not possess.": "You cannot assign permissions you do not possess.",
     "You cannot delete your own account.": "You cannot delete your own account.",
@@ -611,6 +639,8 @@
     "menu.line": "Line Management",
     "menu.machines": "Machine Management",
     "menu.machines.list": "Machine List",
+    "menu.machines.maintenance": "Maintenance Records",
+    "menu.machines.utilization": "Utilization Rate",
     "menu.members": "Member Management",
     "menu.permission": "Permission Settings",
     "menu.permissions": "權限管理",
@@ -638,4 +668,4 @@
     "vs Yesterday": "vs Yesterday",
     "warehouses": "Warehouse Management",
     "待填寫": "Pending"
-}
+}

lang/ja.json

@@ -25,6 +25,7 @@
     "Add Customer": "顧客を追加",
     "Add Machine": "機台を追加",
     "Add Machine Model": "機台型號を追加",
+    "Add Maintenance Record": "メンテナンス記録を追加",
     "Add Role": "ロールを追加",
     "Admin": "管理者",
     "Admin Name": "管理者名",
@@ -40,6 +41,7 @@
     "Alerts Pending": "アラート待機中",
     "All": "すべて",
     "All Affiliations": "全ての所属",
+    "All Categories": "すべてのカテゴリ",
     "All Companies": "すべての会社",
     "All Levels": "すべてのレベル",
     "All Machines": "すべての機体",
@@ -83,6 +85,7 @@
     "Card Reader No": "カードリーダー番号",
     "Card Reader Restart": "カードリーダー再起動",
     "Card Reader Seconds": "カードリーダー秒数",
+    "Category": "カテゴリ",
     "Change": "変更",
     "Change Stock": "小銭在庫",
     "ChannelId": "チャンネルID",
@@ -141,8 +144,10 @@
     "Delete Account": "アカウントの削除",
     "Delete Permanently": "完全に削除",
     "Deposit Bonus": "入金ボーナス",
+    "Describe the repair or maintenance status...": "修理またはメンテナンスの状況を説明してください...",
     "Deselect All": "取消全選",
     "Detail": "詳細",
+    "Device Information": "デバイス情報",
     "Device Status Logs": "デバイス状態ログ",
     "Disabled": "停止中",
     "Discord Notifications": "Discord通知",
@@ -168,6 +173,7 @@
     "Edit Sub Account Role": "編輯子帳號角色",
     "Email": "メールアドレス",
     "Enabled/Disabled": "有効/無効",
+    "Engineer": "メンテナンス担当者",
     "Ensure your account is using a long, random password to stay secure.": "セキュリティを維持するため、アカウントには長くランダムなパスワードを使用してください。",
     "Enter login ID": "ログインIDを入力してください",
     "Enter machine location": "機台の場所を入力してください",
@@ -178,6 +184,7 @@
     "Enter your password to confirm": "確認のためパスワードを入力してください",
     "Equipment efficiency and OEE metrics": "設備效能與 OEE 綜合指標",
     "Error": "エラー",
+    "Execution Time": "実行時間",
     "Expired": "期限切れ",
     "Expired / Disabled": "期限切れ / 停止中",
     "Expiry Date": "有效日期",
@@ -185,6 +192,7 @@
     "Failed to fetch machine data.": "無法取得機台資料。",
     "Failed to save permissions.": "無法儲存權限設定。",
     "Failed to update machine images: ": "機台画像の更新に失敗しました：",
+    "Fill in the device repair or maintenance details": "デバイスの修理またはメンテナンスの詳細を入力してください",
     "Firmware Version": "ファームウェアバージョン",
     "Fleet Avg OEE": "全機隊平均 OEE",
     "Fleet Performance": "全機隊效能",
@@ -209,6 +217,7 @@
     "Info": "情報",
     "Initial Admin Account": "初期管理者アカウント",
     "Initial Role": "初期ロール",
+    "Installation": "設置",
     "Invoice Status": "発票発行状態",
     "Items": "個の項目",
     "JKO_MERCHANT_ID": "街口支付 加盟店ID",
@@ -269,7 +278,16 @@
     "Machine settings updated successfully.": "機台設定が正常に更新されました。",
     "Machines": "機台リスト",
     "Machines Online": "在線機台數",
+    "Maintenance": "保守",
+    "Maintenance Content": "メンテナンス内容",
+    "Maintenance Date": "メンテナンス日",
+    "Maintenance Details": "メンテナンス詳細",
+    "Maintenance Photos": "メンテナンス写真",
+    "Maintenance QR": "メンテナンス QR",
+    "Maintenance QR Code": "メンテナンス QR コード",
     "Maintenance Records": "メンテナンス記録",
+    "Maintenance record created successfully": "メンテナンス記録が正常に作成されました",
+    "Scan this code to quickly access the maintenance form for this device.": "このコードをスキャンして、このデバイスのメンテナンスフォームに素早くアクセスしてください。",
     "Manage Account Access": "管理帳號存取",
     "Manage Expiry": "進入效期管理",
     "Manage administrative and tenant accounts": "管理者およびテナントアカウントを管理します",
@@ -302,12 +320,14 @@
     "Never Connected": "未接続",
     "New Password": "新しいパスワード",
     "New Password (leave blank to keep current)": "新しいパスワード (変更しない場合は空欄)",
+    "New Record": "新規記録",
     "New Sub Account Role": "新增子帳號角色",
     "Next": "次へ",
     "No Invoice": "発票を発行しない",
     "No accounts found": "アカウントが見つかりません",
     "No alert summary": "アラートなし",
     "No configurations found": "設定が見つかりません",
+    "No content provided": "内容がありません",
     "No customers found": "顧客が見つかりません",
     "No data available": "データなし",
     "No file uploaded.": "ファイルがアップロードされていません。",
@@ -318,6 +338,7 @@
     "No machines assigned": "未分配機台",
     "No machines available": "目前沒有可供分配的機台",
     "No machines available in this company.": "此客戶目前沒有可供分配的機台。",
+    "No maintenance records found": "メンテナンス記録が見つかりません",
     "No matching logs found": "一致するログが見つかりません",
     "No permissions": "権限項目なし",
     "No roles found.": "ロールが見つかりませんでした。",
@@ -414,6 +435,8 @@
     "Remote Lock": "リモートロック",
     "Remote Management": "リモート管理",
     "Remote Permissions": "リモート管理權限",
+    "Removal": "撤去",
+    "Repair": "修理",
     "Replenishment Audit": "補充監査",
     "Replenishment Page": "補充画面",
     "Replenishment Records": "補充記録",
@@ -457,6 +480,8 @@
     "Search machines...": "機台を検索...",
     "Search models...": "型番を検索...",
     "Search roles...": "ロールを検索...",
+    "Search serial no or name...": "シリアル番号または名前を検索...",
+    "Search serial or machine...": "シリアルまたはマシンを検索...",
     "Search users...": "ユーザーを検索...",
     "Select All": "全選",
     "Select Company": "会社を選択",
@@ -475,7 +500,7 @@
     "Showing :from to :to of :total items": ":total 件中 :from から :to 件を表示",
     "Sign in to your account": "アカウントにサインイン",
     "Signed in as": "ログイン中",
-    "Slot": "貨道",
+    "Slot": "スロット",
     "Slot Mechanism (default: Conveyor, check for Spring)": "貨道メカニズム (デフォルト：コンベア、チェックでスプリング)",
     "Slot Status": "貨道效期",
     "Slot Test": "テスト中",
@@ -494,6 +519,7 @@
     "Sub Accounts": "サブアカウント",
     "Sub-actions": "子項目",
     "Sub-machine Status Request": "下位機状態リクエスト",
+    "Submit Record": "記録を送信",
     "Success": "成功",
     "Super Admin": "スーパー管理者",
     "Super-admin role cannot be assigned to tenant accounts.": "スーパー管理者ロールはテナントアカウントに割り当てることはできません。",
@@ -533,6 +559,7 @@
     "Total Selected": "已選擇總數",
     "Total Slots": "合計スロット数",
     "Total items": "合計 :count 件",
+    "Track device health and maintenance history": "デバイスの健全性とメンテナンス履歴を追跡します",
     "Transfer Audit": "転送監査",
     "Transfers": "転送",
     "Tutorial Page": "チュートリアル画面",
@@ -569,6 +596,7 @@
     "Warning: You are editing your own role!": "警告：現在使用中のロールを編集しています！",
     "Welcome Gift": "会員登録特典",
     "Welcome Gift Status": "来店特典",
+    "Work Content": "作業内容",
     "Yesterday": "昨日",
     "You cannot assign permissions you do not possess.": "ご自身が所有していない権限を割り當てることはできません。",
     "You cannot delete your own account.": "ご自身のアカウントは削除できません。",
@@ -611,6 +639,8 @@
     "menu.line": "LINE 設定",
     "menu.machines": "機台管理",
     "menu.machines.list": "機台リスト",
+    "menu.machines.maintenance": "メンテナンス記録",
+    "menu.machines.utilization": "稼働率",
     "menu.members": "会員管理",
     "menu.permission": "權限設定",
     "menu.permissions": "權限管理",
@@ -638,4 +668,4 @@
     "vs Yesterday": "前日比",
     "warehouses": "倉庫管理",
     "待填寫": "待填寫"
-}
+}

lang/zh_TW.json

@@ -25,6 +25,7 @@
     "Add Customer": "新增客戶",
     "Add Machine": "新增機台",
     "Add Machine Model": "新增機台型號",
+    "Add Maintenance Record": "新增維修管理單",
     "Add Role": "新增角色",
     "Admin": "管理員",
     "Admin Name": "管理員姓名",
@@ -40,6 +41,7 @@
     "Alerts Pending": "待處理告警",
     "All": "全部",
     "All Affiliations": "全部單位",
+    "All Categories": "所有類別",
     "All Companies": "所有公司",
     "All Levels": "所有層級",
     "All Machines": "所有機台",
@@ -83,6 +85,7 @@
     "Card Reader No": "刷卡機編號",
     "Card Reader Restart": "卡機重啟",
     "Card Reader Seconds": "刷卡機秒數",
+    "Category": "類別",
     "Change": "更換",
     "Change Stock": "零錢庫存",
     "ChannelId": "ChannelId",
@@ -93,7 +96,7 @@
     "Clear Stock": "庫存清空",
     "Click here to re-send the verification email.": "點擊此處重新發送驗證郵件。",
     "Click to upload": "點擊上傳",
-    "Close Panel": "關閉面板",
+    "Close Panel": "關閉控制面板",
     "Company": "所屬客戶",
     "Company Code": "公司代碼",
     "Company Information": "公司資訊",
@@ -141,8 +144,10 @@
     "Delete Account": "刪除帳號",
     "Delete Permanently": "確認永久刪除資料",
     "Deposit Bonus": "儲值回饋",
+    "Describe the repair or maintenance status...": "請描述維修或保養狀況...",
     "Deselect All": "取消全選",
     "Detail": "詳細",
+    "Device Information": "設備資訊",
     "Device Status Logs": "設備狀態紀錄",
     "Disabled": "已停用",
     "Discord Notifications": "Discord通知",
@@ -168,6 +173,7 @@
     "Edit Sub Account Role": "編輯子帳號角色",
     "Email": "電子郵件",
     "Enabled/Disabled": "啟用/停用",
+    "Engineer": "維修人員",
     "Ensure your account is using a long, random password to stay secure.": "確保您的帳號使用了足夠強度的隨機密碼以維持安全。",
     "Enter login ID": "請輸入登入帳號",
     "Enter machine location": "請輸入機台地點",
@@ -178,6 +184,7 @@
     "Enter your password to confirm": "請輸入您的密碼以確認",
     "Equipment efficiency and OEE metrics": "設備效能與 OEE 綜合指標",
     "Error": "異常",
+    "Execution Time": "執行時間",
     "Expired": "已過期",
     "Expired / Disabled": "已過期 / 停用",
     "Expiry Date": "有效日期",
@@ -185,9 +192,10 @@
     "Failed to fetch machine data.": "無法取得機台資料。",
     "Failed to save permissions.": "無法儲存權限設定。",
     "Failed to update machine images: ": "更新機台圖片失敗：",
+    "Fill in the device repair or maintenance details": "填寫設備維修或保養詳情",
     "Firmware Version": "韌體版本",
-    "Fleet Avg OEE": "全機隊平均 OEE",
-    "Fleet Performance": "全機隊效能",
+    "Fleet Avg OEE": "全機台平均 OEE",
+    "Fleet Performance": "全機台效能",
     "From": "從",
     "Full Access": "全機台授權",
     "Full Name": "全名",
@@ -209,6 +217,7 @@
     "Info": "一般",
     "Initial Admin Account": "初始管理帳號",
     "Initial Role": "初始角色",
+    "Installation": "裝機",
     "Invoice Status": "發票開立狀態",
     "Items": "個項目",
     "JKO_MERCHANT_ID": "街口支付 商店代號",
@@ -269,7 +278,16 @@
     "Machine settings updated successfully.": "機台設定已成功更新。",
     "Machines": "機台列表",
     "Machines Online": "在線機台數",
+    "Maintenance": "保養",
+    "Maintenance Content": "維修內容",
+    "Maintenance Date": "維修日期",
+    "Maintenance Details": "維修詳情",
+    "Maintenance Photos": "維修照片",
+    "Maintenance QR": "維修掃描碼",
+    "Maintenance QR Code": "維修掃描碼",
     "Maintenance Records": "維修管理單",
+    "Maintenance record created successfully": "維修紀錄已成功建立",
+    "Scan this code to quickly access the maintenance form for this device.": "掃描此 QR Code 即可快速進入此設備的維修單填寫頁面。",
     "Manage Account Access": "管理帳號存取",
     "Manage Expiry": "進入效期管理",
     "Manage administrative and tenant accounts": "管理系統管理者與租戶帳號",
@@ -302,12 +320,14 @@
     "Never Connected": "從未連線",
     "New Password": "新密碼",
     "New Password (leave blank to keep current)": "新密碼 (若不修改請留空)",
+    "New Record": "新增單據",
     "New Sub Account Role": "新增子帳號角色",
     "Next": "下一頁",
     "No Invoice": "不開立發票",
     "No accounts found": "找不到帳號資料",
     "No alert summary": "暫無告警記錄",
     "No configurations found": "暫無相關配置",
+    "No content provided": "未提供內容",
     "No customers found": "找不到客戶資料",
     "No data available": "暫無資料",
     "No file uploaded.": "未上傳任何檔案。",
@@ -318,6 +338,7 @@
     "No machines assigned": "未分配機台",
     "No machines available": "目前沒有可供分配的機台",
     "No machines available in this company.": "此客戶目前沒有可供分配的機台。",
+    "No maintenance records found": "找不到維修紀錄",
     "No matching logs found": "找不到符合條件的日誌",
     "No permissions": "無權限項目",
     "No roles found.": "找不到角色資料。",
@@ -414,6 +435,8 @@
     "Remote Lock": "遠端鎖定",
     "Remote Management": "遠端管理",
     "Remote Permissions": "遠端管理權限",
+    "Removal": "撤機",
+    "Repair": "維修",
     "Replenishment Audit": "補貨單",
     "Replenishment Page": "補貨頁",
     "Replenishment Records": "機台補貨紀錄",
@@ -457,6 +480,8 @@
     "Search machines...": "搜尋機台...",
     "Search models...": "搜尋型號...",
     "Search roles...": "搜尋角色...",
+    "Search serial no or name...": "搜尋序號或機台名稱...",
+    "Search serial or machine...": "搜尋序號或機台名稱...",
     "Search users...": "搜尋用戶...",
     "Select All": "全選",
     "Select Company": "選擇所屬公司",
@@ -475,7 +500,7 @@
     "Showing :from to :to of :total items": "顯示第 :from 到 :to 項，共 :total 項",
     "Sign in to your account": "隨時隨地掌控您的業務。",
     "Signed in as": "登入身份",
-    "Slot": "貨道",
+    "Slot": "照片格",
     "Slot Mechanism (default: Conveyor, check for Spring)": "貨道機制 (預設履帶，勾選為彈簧)",
     "Slot Status": "貨道效期",
     "Slot Test": "貨道測試",
@@ -494,6 +519,7 @@
     "Sub Accounts": "子帳號",
     "Sub-actions": "子項目",
     "Sub-machine Status Request": "下位機狀態回傳",
+    "Submit Record": "提交紀錄",
     "Success": "成功",
     "Super Admin": "超級管理員",
     "Super-admin role cannot be assigned to tenant accounts.": "超級管理員角色無法指派給租戶帳號。",
@@ -533,6 +559,7 @@
     "Total Selected": "已選擇總數",
     "Total Slots": "總貨道數",
     "Total items": "總計 :count 項",
+    "Track device health and maintenance history": "追蹤設備健康與維修歷史",
     "Transfer Audit": "調撥單",
     "Transfers": "調撥單",
     "Tutorial Page": "教學頁",
@@ -569,6 +596,7 @@
     "Warning: You are editing your own role!": "警告：您正在編輯目前使用的角色！",
     "Welcome Gift": "註冊成效禮",
     "Welcome Gift Status": "來店禮",
+    "Work Content": "工作內容",
     "Yesterday": "昨日",
     "You cannot assign permissions you do not possess.": "您無法指派您自身不具備的權限。",
     "You cannot delete your own account.": "您無法刪除自己的帳號。",
@@ -611,6 +639,8 @@
     "menu.line": "LINE 配置",
     "menu.machines": "機台管理",
     "menu.machines.list": "機台列表",
+    "menu.machines.maintenance": "維修管理單",
+    "menu.machines.utilization": "機台嫁動率",
     "menu.members": "會員管理",
     "menu.permission": "權限設定",
     "menu.permissions": "權限管理",
@@ -638,4 +668,4 @@
     "vs Yesterday": "較昨日",
     "warehouses": "倉庫管理",
     "待填寫": "待填寫"
-}
+}

resources/css/app.css

@@ -309,4 +309,13 @@
     .hs-select-search-input {
         @apply luxury-input py-2 px-3 text-xs border-slate-100 dark:border-slate-800;
     }
+
+    /* Small variants for filter bars */
+    .luxury-input-sm {
+        @apply py-2.5 text-sm !important;
+    }
+
+    .luxury-select-sm .hs-select-toggle {
+        @apply py-2.5 text-sm !important;
+    }
 }

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

@@ -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>

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

@@ -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

resources/views/admin/maintenance/create.blade.php

@@ -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

resources/views/admin/maintenance/index.blade.php

@@ -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

resources/views/components/breadcrumbs.blade.php

@@ -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'),

resources/views/components/loading-screen.blade.php

@@ -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');

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

@@ -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>

routes/web.php

@@ -41,14 +41,20 @@ Route::middleware(['auth', 'verified', 'tenant.access'])->prefix('admin')->name(
             Route::get('/permissions/accounts/{user}', [App\Http\Controllers\Admin\MachineController::class, 'getAccountMachines'])->name('permissions.accounts.get');
             Route::post('/permissions/accounts/{user}', [App\Http\Controllers\Admin\MachineController::class, 'syncAccountMachines'])->name('permissions.accounts.sync');
             Route::get('/utilization', [App\Http\Controllers\Admin\MachineController::class , 'utilization'])->name('utilization');
-            Route::get('/{id}/utilization-ajax', [App\Http\Controllers\Admin\MachineController::class, 'utilizationData'])->name('utilization-ajax');
+            Route::get('/utilization-ajax/{id?}', [App\Http\Controllers\Admin\MachineController::class, 'utilizationData'])->name('utilization-ajax');
             Route::get('/{machine}/slots-ajax', [App\Http\Controllers\Admin\MachineController::class, 'slotsAjax'])->name('slots-ajax');
             Route::post('/{machine}/slots/expiry', [App\Http\Controllers\Admin\MachineController::class, 'updateSlotExpiry'])->name('slots.expiry.update');
             Route::get('/{machine}/logs-ajax', [App\Http\Controllers\Admin\MachineController::class, 'logsAjax'])->name('logs-ajax');
-            Route::get('/maintenance', [App\Http\Controllers\Admin\MachineController::class , 'maintenance'])->name('maintenance');
         });
         Route::resource('machines', App\Http\Controllers\Admin\MachineController::class);
 
+        // 維修管理
+        Route::prefix('maintenance')->name('maintenance.')->middleware('can:menu.machines.maintenance')->group(function () {
+            Route::get('/', [App\Http\Controllers\Admin\MaintenanceController::class, 'index'])->name('index');
+            Route::get('/create/{serial_no?}', [App\Http\Controllers\Admin\MaintenanceController::class, 'create'])->name('create');
+            Route::post('/', [App\Http\Controllers\Admin\MaintenanceController::class, 'store'])->name('store');
+        });
+
         // 4. APP管理
         Route::prefix('app')->name('app.')->group(function () {
             Route::get('/ui-elements', [App\Http\Controllers\Admin\AppConfigController::class , 'uiElements'])->name('ui-elements');