[FEAT] 優化通行碼與取貨碼模組、補齊多國語系系統及介面風格調整

1. 通行碼與取貨碼：新增代碼預覽、重新產生功能與到期時間預覽邏輯。
2. 通行碼：允許天數設為 0 (永久)，並改用搜尋式下拉選單選取機台。
3. 取貨碼：加強表單檢核並整合自訂 Toast 提示。
4. 語系優化：補齊繁中、英文鍵值，並完整建立日文語系目錄 (lang/ja) 與 JSON 檔案。
5. 組件優化：更新 PageHeader 與 TabNav 組件，提升 UI 互動性與一致性。
6. 訪客功能：新增通行碼訪客端查詢介面與控制器。
7. 其他模組：同步調整機台、遠端與倉庫模組視圖以符合極簡奢華風。

app/Http/Controllers/Admin/SalesController.php

@@ -33,9 +33,9 @@ class SalesController extends Controller
         $query = PickupCode::with(['machine.slots.product', 'creator'])->latest();
 
         if ($request->search) {
-            $query->where(function($q) use ($request) {
+            $query->where(function ($q) use ($request) {
                 $q->where('code', 'like', "%{$request->search}%")
-                  ->orWhereHas('machine', function($mq) use ($request) {
+                    ->orWhereHas('machine', function ($mq) use ($request) {
                         $mq->where('name', 'like', "%{$request->search}%")
                             ->orWhere('serial_no', 'like', "%{$request->search}%");
                     });
@@ -69,6 +69,7 @@ class SalesController extends Controller
             'machine_id' => 'required|exists:machines,id',
             'slot_no' => 'required|string',
             'expires_hours' => 'nullable|integer|min:1|max:720', // 最長一個月
+            'custom_code' => 'nullable|string|min:4|max:12',
         ]);
 
         $machine = Machine::findOrFail($validated['machine_id']);
@@ -77,7 +78,7 @@ class SalesController extends Controller
         $pickupCode = PickupCode::create([
             'machine_id' => $validated['machine_id'],
             'slot_no' => $validated['slot_no'],
-            'code' => PickupCode::generateUniqueCode($validated['machine_id']),
+            'code' => $request->custom_code ?? PickupCode::generateUniqueCode($validated['machine_id']),
             'expires_at' => $expiresAt,
             'status' => 'active',
             'company_id' => $machine->company_id,
@@ -136,16 +137,33 @@ class SalesController extends Controller
         $query = PassCode::with(['machine', 'creator'])->latest();
 
         if ($request->search) {
-            $query->where(function($q) use ($request) {
+            $query->where(function ($q) use ($request) {
                 $q->where('code', 'like', "%{$request->search}%")
                     ->orWhere('name', 'like', "%{$request->search}%")
-                  ->orWhereHas('machine', function($mq) use ($request) {
+                    ->orWhereHas('machine', function ($mq) use ($request) {
                         $mq->where('name', 'like', "%{$request->search}%")
                             ->orWhere('serial_no', 'like', "%{$request->search}%");
                     });
             });
         }
 
+        if ($request->status && trim($request->status) !== '') {
+            $status = trim($request->status);
+            if ($status === 'active') {
+                $query->where('status', 'active')
+                    ->where(function ($q) {
+                        $q->whereNull('expires_at')
+                            ->orWhere('expires_at', '>', now());
+                    });
+            } elseif ($status === 'expired') {
+                $query->where('status', 'active')
+                    ->whereNotNull('expires_at')
+                    ->where('expires_at', '<=', now());
+            } else {
+                $query->where('status', $status);
+            }
+        }
+
         $passCodes = $query->paginate(15)->withQueryString();
         $machines = Machine::all();
 
@@ -164,9 +182,9 @@ class SalesController extends Controller
     {
         $validated = $request->validate([
             'machine_id' => 'required|exists:machines,id',
-            'name' => 'nullable|string|max:50',
-            'expires_days' => 'nullable|integer|min:1',
-            'custom_code' => 'nullable|string|min:4|max:12',
+            'name' => 'required|string|max:50',
+            'expires_days' => 'nullable|integer|min:0',
+            'custom_code' => 'required|string|min:4|max:12',
         ]);
 
         $machine = Machine::findOrFail($validated['machine_id']);
@@ -202,12 +220,12 @@ class SalesController extends Controller
     }
 
     /**
-     * 刪除通行碼
+     * 刪除通行碼 (改為停用)
      */
     public function destroyPassCode(PassCode $passCode)
     {
-        $passCode->delete();
-        return back()->with('success', __('Pass code deleted.'));
+        $passCode->update(['status' => 'disabled']);
+        return back()->with('success', __('Pass code disabled.'));
     }
 
     // 來店禮設定

app/Http/Controllers/Guest/PassCodeController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Controllers\Guest;
+
+use App\Http\Controllers\Controller;
+use App\Models\Transaction\PassCode;
+use Illuminate\Http\Request;
+
+class PassCodeController extends Controller
+{
+    /**
+     * 顯示公開通行憑證頁面
+     */
+    public function show($slug)
+    {
+        $passCode = PassCode::with(['machine'])
+            ->where('slug', $slug)
+            ->where('status', 'active')
+            ->where(function($query) {
+                $query->whereNull('expires_at')
+                      ->orWhere('expires_at', '>', now());
+            })
+            ->firstOrFail();
+
+        return view('guest.pass-code.show', compact('passCode'));
+    }
+}

app/Models/Transaction/PassCode.php

@@ -17,6 +17,7 @@ class PassCode extends Model
         'machine_id',
         'name',
         'code',
+        'slug',
         'expires_at',
         'status',
         'created_by',
@@ -26,6 +27,26 @@ class PassCode extends Model
         'expires_at' => 'datetime',
     ];
 
+    /**
+     * 獲取公開通行連結
+     */
+    public function getTicketUrlAttribute()
+    {
+        return $this->slug ? route('pass-code.ticket', $this->slug) : null;
+    }
+
+    /**
+     * Boot the model.
+     */
+    protected static function booted()
+    {
+        static::creating(function ($passCode) {
+            if (!$passCode->slug) {
+                $passCode->slug = \Illuminate\Support\Str::random(16);
+            }
+        });
+    }
+
     /**
      * 關聯機台
      */

database/migrations/2026_04_29_160812_add_slug_to_pass_codes_table.php

@@ -0,0 +1,28 @@
+<?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::table('pass_codes', function (Blueprint $table) {
+            $table->string('slug')->nullable()->unique()->after('code');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('pass_codes', function (Blueprint $table) {
+            $table->dropColumn('slug');
+        });
+    }
+};

lang/ja/auth.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => '認証情報が一致しません。',
+    'password' => '入力されたパスワードが正しくありません。',
+    'throttle' => 'ログイン試行回数が多すぎます。:seconds 秒後に再試行してください。',
+
+];

lang/ja/pagination.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; 前へ',
+    'next' => '次へ &raquo;',
+
+];

lang/ja/passwords.php

@@ -0,0 +1,22 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | outcome such as failure due to an invalid password / reset token.
+    |
+    */
+
+    'reset' => 'パスワードがリセットされました。',
+    'sent' => 'パスワードリセットリンクをメールで送信しました。',
+    'throttled' => '再試行するまでしばらくお待ちください。',
+    'token' => 'このパスワードリセットトークンは無効です。',
+    'user' => 'そのメールアドレスのユーザーが見つかりません。',
+
+];

lang/ja/validation.php

@@ -0,0 +1,213 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages here.
+    |
+    */
+
+    'accepted' => ':attribute を承認する必要があります。',
+    'accepted_if' => ':other が :value の場合、:attribute を承認する必要があります。',
+    'active_url' => ':attribute は有効な URL である必要があります。',
+    'after' => ':attribute は :date より後の日付である必要があります。',
+    'after_or_equal' => ':attribute は :date 以降の日付である必要があります。',
+    'alpha' => ':attribute は英字のみで構成される必要があります。',
+    'alpha_dash' => ':attribute は英字、数字、ダッシュ、アンダースコアのみで構成される必要があります。',
+    'alpha_num' => ':attribute は英字と数字のみで構成される必要があります。',
+    'any_of' => ':attribute が無効です。',
+    'array' => ':attribute は配列である必要があります。',
+    'ascii' => ':attribute はシングルバイトの英数字と記号のみで構成される必要があります。',
+    'before' => ':attribute は :date より前の日付である必要があります。',
+    'before_or_equal' => ':attribute は :date 以前の日付である必要があります。',
+    'between' => [
+        'array' => ':attribute は :min 〜 :max 個の要素を含む必要があります。',
+        'file' => ':attribute は :min 〜 :max キロバイトの間である必要があります。',
+        'numeric' => ':attribute は :min 〜 :max の間である必要があります。',
+        'string' => ':attribute は :min 〜 :max 文字の間である必要があります。',
+    ],
+    'boolean' => ':attribute は true か false である必要があります。',
+    'can' => ':attribute に無効な値が含まれています。',
+    'confirmed' => ':attribute の確認が一致しません。',
+    'contains' => ':attribute に必要な値が含まれていません。',
+    'current_password' => 'パスワードが正しくありません。',
+    'date' => ':attribute は有効な日付である必要があります。',
+    'date_equals' => ':attribute は :date と同じ日付である必要があります。',
+    'date_format' => ':attribute は :format 形式と一致する必要があります。',
+    'decimal' => ':attribute は小数点以下 :decimal 桁である必要があります。',
+    'declined' => ':attribute を拒否する必要があります。',
+    'declined_if' => ':other が :value の場合、:attribute を拒否する必要があります。',
+    'different' => ':attribute と :other は異なる必要があります。',
+    'digits' => ':attribute は :digits 桁である必要があります。',
+    'digits_between' => ':attribute は :min 〜 :max 桁の間である必要があります。',
+    'dimensions' => ':attribute の画像サイズが無効です。',
+    'distinct' => ':attribute に重複する値が含まれています。',
+    'doesnt_contain' => ':attribute には次のいずれも含めることはできません: :values。',
+    'doesnt_end_with' => ':attribute は次のいずれかで終わることはできません: :values。',
+    'doesnt_start_with' => ':attribute は次のいずれかで始まることはできません: :values。',
+    'email' => ':attribute は有効なメールアドレスである必要があります。',
+    'encoding' => ':attribute は :encoding でエンコードされている必要があります。',
+    'ends_with' => ':attribute は次のいずれかで終わる必要があります: :values。',
+    'enum' => '選択された :attribute は無効です。',
+    'exists' => '選択された :attribute は無効です。',
+    'extensions' => ':attribute は次のいずれかの拡張子である必要があります: :values。',
+    'file' => ':attribute はファイルである必要があります。',
+    'filled' => ':attribute は値を持つ必要があります。',
+    'gt' => [
+        'array' => ':attribute は :value 個より多い要素を含む必要があります。',
+        'file' => ':attribute は :value キロバイトより大きい必要があります。',
+        'numeric' => ':attribute は :value より大きい必要があります。',
+        'string' => ':attribute は :value 文字より多い必要があります。',
+    ],
+    'gte' => [
+        'array' => ':attribute は :value 個以上の要素を含む必要があります。',
+        'file' => ':attribute は :value キロバイト以上である必要があります。',
+        'numeric' => ':attribute は :value 以上である必要があります。',
+        'string' => ':attribute は :value 文字以上である必要があります。',
+    ],
+    'hex_color' => ':attribute は有効な16進数カラーコードである必要があります。',
+    'image' => ':attribute は画像である必要があります。',
+    'in' => '選択された :attribute は無効です。',
+    'in_array' => ':attribute は :other に存在する必要があります。',
+    'in_array_keys' => ':attribute には次のキーのいずれかを含む必要があります: :values。',
+    'integer' => ':attribute は整数である必要があります。',
+    'ip' => ':attribute は有効な IP アドレスである必要があります。',
+    'ipv4' => ':attribute は有効な IPv4 アドレスである必要があります。',
+    'ipv6' => ':attribute は有効な IPv6 アドレスである必要があります。',
+    'json' => ':attribute は有効な JSON 文字列である必要があります。',
+    'list' => ':attribute はリストである必要があります。',
+    'lowercase' => ':attribute は小文字である必要があります。',
+    'lt' => [
+        'array' => ':attribute は :value 個未満の要素を含む必要があります。',
+        'file' => ':attribute は :value キロバイト未満である必要があります。',
+        'numeric' => ':attribute は :value 未満である必要があります。',
+        'string' => ':attribute は :value 文字未満である必要があります。',
+    ],
+    'lte' => [
+        'array' => ':attribute は :value 個以下の要素を含む必要があります。',
+        'file' => ':attribute は :value キロバイト以下である必要があります。',
+        'numeric' => ':attribute は :value 以下である必要があります。',
+        'string' => ':attribute は :value 文字以下である必要があります。',
+    ],
+    'mac_address' => ':attribute は有効な MAC アドレスである必要があります。',
+    'max' => [
+        'array' => ':attribute は :max 個を超える要素を含むことはできません。',
+        'file' => ':attribute は :max キロバイトを超えることはできません。',
+        'numeric' => ':attribute は :max を超えることはできません。',
+        'string' => ':attribute は :max 文字を超えることはできません。',
+    ],
+    'max_digits' => ':attribute は :max 桁を超えることはできません。',
+    'mimes' => ':attribute は次のいずれかのファイルタイプである必要があります: :values。',
+    'mimetypes' => ':attribute は次のいずれかのファイルタイプである必要があります: :values。',
+    'min' => [
+        'array' => ':attribute は少なくとも :min 個の要素を含む必要があります。',
+        'file' => ':attribute は少なくとも :min キロバイトである必要があります。',
+        'numeric' => ':attribute は少なくとも :min である必要があります。',
+        'string' => ':attribute は少なくとも :min 文字である必要があります。',
+    ],
+    'min_digits' => ':attribute は少なくとも :min 桁である必要があります。',
+    'missing' => ':attribute は存在してはいけません。',
+    'missing_if' => ':other が :value の場合、:attribute は存在してはいけません。',
+    'missing_unless' => ':other が :value でない限り、:attribute は存在してはいけません。',
+    'missing_with' => ':values が存在する場合、:attribute は存在してはいけません。',
+    'missing_with_all' => ':values がすべて存在する場合、:attribute は存在してはいけません。',
+    'multiple_of' => ':attribute は :value の倍数である必要があります。',
+    'not_in' => '選択された :attribute は無効です。',
+    'not_regex' => ':attribute の形式が無効です。',
+    'numeric' => ':attribute は数値である必要があります。',
+    'password' => [
+        'letters' => ':attribute には少なくとも1つの文字を含む必要があります。',
+        'mixed' => ':attribute には少なくとも1つの大文字と1つの小文字を含む必要があります。',
+        'numbers' => ':attribute には少なくとも1つの数字を含む必要があります。',
+        'symbols' => ':attribute には少なくとも1つの記号を含む必要があります。',
+        'uncompromised' => '指定された :attribute はデータ漏洩に含まれています。別の :attribute を選択してください。',
+    ],
+    'present' => ':attribute が存在する必要があります。',
+    'present_if' => ':other が :value の場合、:attribute が存在する必要があります。',
+    'present_unless' => ':other が :value でない限り、:attribute が存在する必要があります。',
+    'present_with' => ':values が存在する場合、:attribute が存在する必要があります。',
+    'present_with_all' => ':values がすべて存在する場合、:attribute が存在する必要があります。',
+    'prohibited' => ':attribute は禁止されています。',
+    'prohibited_if' => ':other が :value の場合、:attribute は禁止されています。',
+    'prohibited_if_accepted' => ':other が承認された場合、:attribute は禁止されています。',
+    'prohibited_if_declined' => ':other が拒否された場合、:attribute は禁止されています。',
+    'prohibited_unless' => ':other が :values にない限り、:attribute は禁止されています。',
+    'prohibits' => ':attribute は :other の存在を禁止します。',
+    'regex' => ':attribute の形式が無効です。',
+    'required' => ':attribute は必須です。',
+    'required_array_keys' => ':attribute には次のエントリが含まれる必要があります: :values。',
+    'required_if' => ':other が :value の場合、:attribute は必須です。',
+    'required_if_accepted' => ':other が承認された場合、:attribute は必須です。',
+    'required_if_declined' => ':other が拒否された場合、:attribute は必須です。',
+    'required_unless' => ':other が :values にない限り、:attribute は必須です。',
+    'required_with' => ':values が存在する場合、:attribute は必須です。',
+    'required_with_all' => ':values がすべて存在する場合、:attribute は必須です。',
+    'required_without' => ':values が存在しない場合、:attribute は必須です。',
+    'required_without_all' => ':values がすべて存在しない場合、:attribute は必須です。',
+    'same' => ':attribute は :other と一致する必要があります。',
+    'size' => [
+        'array' => ':attribute は :size 個の要素を含む必要があります。',
+        'file' => ':attribute は :size キロバイトである必要があります。',
+        'numeric' => ':attribute は :size である必要があります。',
+        'string' => ':attribute は :size 文字である必要があります。',
+    ],
+    'starts_with' => ':attribute は次のいずれかで始まる必要があります: :values。',
+    'string' => ':attribute は文字列である必要があります。',
+    'timezone' => ':attribute は有効なタイムゾーンである必要があります。',
+    'unique' => ':attribute は既に使用されています。',
+    'uploaded' => ':attribute のアップロードに失敗しました。',
+    'uppercase' => ':attribute は大文字である必要があります。',
+    'url' => ':attribute は有効な URL である必要があります。',
+    'ulid' => ':attribute は有効な ULID である必要があります。',
+    'uuid' => ':attribute は有効な UUID である必要があります。',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'is_confirmed' => [
+            'accepted' => '顧客への通知と署名取得を確認するチェックボックスにチェックを入れてください。',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap our attribute placeholder
+    | with something more reader friendly such as "E-Mail Address" instead
+    | of "email". This simply helps us make our message more expressive.
+    |
+    */
+
+    'attributes' => [
+        'username' => 'ユーザー名',
+        'name' => '名前',
+        'email' => 'メールアドレス',
+        'password' => 'パスワード',
+        'current_password' => '現在のパスワード',
+        'password_confirmation' => 'パスワード確認',
+        'phone' => '電話番号',
+        'machine_id' => '機台',
+        'category' => 'カテゴリ',
+        'maintenance_at' => 'メンテナンス日',
+        'content' => 'メンテナンス内容',
+        'is_confirmed' => '確認チェックボックス',
+    ],
+
+];

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

@@ -375,20 +375,16 @@
     }
 }" @execute-regenerate.window="executeRegeneration($event.detail)">
 
-<!-- Machine System Settings Modal -->
-<template x-teleport="body">
+    <!-- Machine System Settings Modal -->
+    <template x-teleport="body">
         <div x-show="showMachineSettingsModal" class="fixed inset-0 z-[200] flex items-center justify-center" x-cloak>
-        <div x-show="showMachineSettingsModal" 
-             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"
-             class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm" @click="showMachineSettingsModal = false"></div>
+            <div x-show="showMachineSettingsModal" 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" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm"
+                @click="showMachineSettingsModal = false"></div>
 
-        <div x-show="showMachineSettingsModal" 
-             x-transition:enter="ease-out duration-300" 
+            <div x-show="showMachineSettingsModal" x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave="ease-in duration-200"
@@ -396,14 +392,19 @@
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 class="relative bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-100 dark:border-slate-800 w-full max-w-2xl mx-4 overflow-hidden z-[201] flex flex-col max-h-[90vh]">
 
-            <div class="px-8 py-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center bg-slate-50/50 dark:bg-slate-900/50">
+                <div
+                    class="px-8 py-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center bg-slate-50/50 dark:bg-slate-900/50">
                     <div>
-                    <h3 class="text-lg font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Edit Machine System Settings') }}</h3>
-                    <p class="text-xs font-bold text-slate-400 mt-1 uppercase tracking-widest" x-text="currentMachine?.name + ' (' + currentMachine?.serial_no + ')'"></p>
+                        <h3 class="text-lg font-black text-slate-800 dark:text-white tracking-tight font-display">{{
+                            __('Edit Machine System Settings') }}</h3>
+                        <p class="text-xs font-bold text-slate-400 mt-1 uppercase tracking-widest"
+                            x-text="currentMachine?.name + ' (' + currentMachine?.serial_no + ')'"></p>
                     </div>
-                <button type="button" @click="showMachineSettingsModal = false" class="text-slate-400 hover:text-slate-500 bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-xl p-2 transition-colors">
+                    <button type="button" @click="showMachineSettingsModal = false"
+                        class="text-slate-400 hover:text-slate-500 bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-xl p-2 transition-colors">
                         <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </button>
                 </div>
@@ -415,141 +416,201 @@
 
                         <div class="space-y-3">
                             <!-- 稅務系統 -->
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                 <div class="md:col-span-1">
-                                <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Tax System') }}</h4>
+                                    <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Tax
+                                        System') }}</h4>
                                 </div>
                                 <div class="md:col-span-3 flex flex-wrap gap-x-8 gap-y-4">
                                     <label class="flex items-center gap-3 cursor-pointer group">
                                         <div class="relative inline-flex items-center">
                                             <input type="hidden" name="settings[tax_invoice_enabled]" value="0">
-                                        <input type="checkbox" name="settings[tax_invoice_enabled]" value="1" x-model="machineSettings.tax_invoice_enabled" class="peer sr-only">
-                                        <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                            <input type="checkbox" name="settings[tax_invoice_enabled]" value="1"
+                                                x-model="machineSettings.tax_invoice_enabled" class="peer sr-only">
+                                            <div
+                                                class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500">
                                             </div>
-                                    <span class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{ __('Electronic Invoice') }}</span>
+                                        </div>
+                                        <span
+                                            class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{
+                                            __('Electronic Invoice') }}</span>
                                     </label>
                                 </div>
                             </div>
 
                             <!-- 刷卡機系統 -->
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                 <div class="md:col-span-1">
-                                <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Card Machine System') }}</h4>
+                                    <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Card
+                                        Machine System') }}</h4>
                                 </div>
                                 <div class="md:col-span-3 flex flex-wrap gap-x-8 gap-y-4">
                                     <label class="flex items-center gap-3 cursor-pointer group">
                                         <div class="relative inline-flex items-center">
                                             <input type="hidden" name="settings[card_terminal_enabled]" value="0">
-                                        <input type="checkbox" name="settings[card_terminal_enabled]" value="1" x-model="machineSettings.card_terminal_enabled" class="peer sr-only">
-                                        <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                            <input type="checkbox" name="settings[card_terminal_enabled]" value="1"
+                                                x-model="machineSettings.card_terminal_enabled" class="peer sr-only">
+                                            <div
+                                                class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500">
                                             </div>
-                                    <span class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{ __('Includes Credit Card/Mobile Pay') }}</span>
+                                        </div>
+                                        <span
+                                            class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{
+                                            __('Includes Credit Card/Mobile Pay') }}</span>
                                     </label>
                                 </div>
                             </div>
 
                             <!-- 掃碼支付功能 -->
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                 <div class="md:col-span-1">
-                                <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Scan Pay') }}</h4>
+                                    <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('Scan Pay')
+                                        }}</h4>
                                 </div>
                                 <div class="md:col-span-3 flex flex-wrap gap-x-8 gap-y-4">
                                     <label class="flex items-center gap-3 cursor-pointer group">
                                         <div class="relative inline-flex items-center">
                                             <input type="hidden" name="settings[scan_pay_esun_enabled]" value="0">
-                                        <input type="checkbox" name="settings[scan_pay_esun_enabled]" value="1" x-model="machineSettings.scan_pay_esun_enabled" class="peer sr-only">
-                                        <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                            <input type="checkbox" name="settings[scan_pay_esun_enabled]" value="1"
+                                                x-model="machineSettings.scan_pay_esun_enabled" class="peer sr-only">
+                                            <div
+                                                class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500">
                                             </div>
-                                    <span class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{ __('E.SUN QR Pay') }}</span>
+                                        </div>
+                                        <span
+                                            class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{
+                                            __('E.SUN QR Pay') }}</span>
                                     </label>
                                     <label class="flex items-center gap-3 cursor-pointer group">
                                         <div class="relative inline-flex items-center">
                                             <input type="hidden" name="settings[scan_pay_linepay_enabled]" value="0">
-                                        <input type="checkbox" name="settings[scan_pay_linepay_enabled]" value="1" x-model="machineSettings.scan_pay_linepay_enabled" class="peer sr-only">
-                                        <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                            <input type="checkbox" name="settings[scan_pay_linepay_enabled]" value="1"
+                                                x-model="machineSettings.scan_pay_linepay_enabled" class="peer sr-only">
+                                            <div
+                                                class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500">
                                             </div>
-                                    <span class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{ __('LinePay Payment') }}</span>
+                                        </div>
+                                        <span
+                                            class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{
+                                            __('LinePay Payment') }}</span>
                                     </label>
                                 </div>
                             </div>
 
                             <!-- 購物車功能 -->
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                 <div class="md:col-span-1">
-                                <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('購物車功能') }}</h4>
+                                    <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('購物車功能') }}
+                                    </h4>
                                 </div>
                                 <div class="md:col-span-3 flex flex-wrap gap-x-8 gap-y-4">
                                     <label class="flex items-center gap-3 cursor-pointer group">
                                         <div class="relative inline-flex items-center">
                                             <input type="hidden" name="settings[shopping_cart_enabled]" value="0">
-                                        <input type="checkbox" name="settings[shopping_cart_enabled]" value="1" x-model="machineSettings.shopping_cart_enabled" class="peer sr-only">
-                                        <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                            <input type="checkbox" name="settings[shopping_cart_enabled]" value="1"
+                                                x-model="machineSettings.shopping_cart_enabled" class="peer sr-only">
+                                            <div
+                                                class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500">
                                             </div>
-                                    <span class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{ __('購物車') }}</span>
+                                        </div>
+                                        <span
+                                            class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{
+                                            __('購物車') }}</span>
                                     </label>
                                 </div>
                             </div>
 
                             <!-- 來店禮功能 -->
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                 <div class="md:col-span-1">
-                                <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('來店禮功能') }}</h4>
+                                    <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('來店禮功能') }}
+                                    </h4>
                                 </div>
                                 <div class="md:col-span-3 flex flex-wrap gap-x-8 gap-y-4">
                                     <label class="flex items-center gap-3 cursor-pointer group">
                                         <div class="relative inline-flex items-center">
                                             <input type="hidden" name="settings[welcome_gift_enabled]" value="0">
-                                        <input type="checkbox" name="settings[welcome_gift_enabled]" value="1" x-model="machineSettings.welcome_gift_enabled" class="peer sr-only">
-                                        <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                            <input type="checkbox" name="settings[welcome_gift_enabled]" value="1"
+                                                x-model="machineSettings.welcome_gift_enabled" class="peer sr-only">
+                                            <div
+                                                class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500">
                                             </div>
-                                    <span class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{ __('來店禮') }}</span>
+                                        </div>
+                                        <span
+                                            class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{
+                                            __('來店禮') }}</span>
                                     </label>
                                 </div>
                             </div>
 
                             <!-- 現金模組功能 -->
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                 <div class="md:col-span-1">
-                                <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('現金模組功能') }}</h4>
+                                    <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('現金模組功能') }}
+                                    </h4>
                                 </div>
                                 <div class="md:col-span-3 flex flex-wrap gap-x-8 gap-y-4">
                                     <label class="flex items-center gap-3 cursor-pointer group">
                                         <div class="relative inline-flex items-center">
                                             <input type="hidden" name="settings[cash_module_enabled]" value="0">
-                                        <input type="checkbox" name="settings[cash_module_enabled]" value="1" x-model="machineSettings.cash_module_enabled" class="peer sr-only">
-                                        <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                            <input type="checkbox" name="settings[cash_module_enabled]" value="1"
+                                                x-model="machineSettings.cash_module_enabled" class="peer sr-only">
+                                            <div
+                                                class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500">
                                             </div>
-                                    <span class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{ __('硬幣機/紙鈔機') }}</span>
+                                        </div>
+                                        <span
+                                            class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{
+                                            __('硬幣機/紙鈔機') }}</span>
                                     </label>
                                 </div>
                             </div>
 
                             <!-- 會員系統 -->
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center p-4 rounded-xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                 <div class="md:col-span-1">
-                                <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('會員系統功能') }}</h4>
+                                    <h4 class="text-sm font-black text-slate-700 dark:text-slate-200">{{ __('會員系統功能') }}
+                                    </h4>
                                 </div>
                                 <div class="md:col-span-3 flex flex-wrap gap-x-8 gap-y-4">
                                     <label class="flex items-center gap-3 cursor-pointer group">
                                         <div class="relative inline-flex items-center">
                                             <input type="hidden" name="settings[member_system_enabled]" value="0">
-                                        <input type="checkbox" name="settings[member_system_enabled]" value="1" x-model="machineSettings.member_system_enabled" class="peer sr-only">
-                                        <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                            <input type="checkbox" name="settings[member_system_enabled]" value="1"
+                                                x-model="machineSettings.member_system_enabled" class="peer sr-only">
+                                            <div
+                                                class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500">
                                             </div>
-                                    <span class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{ __('會員系統') }}</span>
+                                        </div>
+                                        <span
+                                            class="text-sm font-bold text-slate-600 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{{
+                                            __('會員系統') }}</span>
                                     </label>
                                 </div>
                             </div>
                         </div>
 
-                    <div class="flex justify-end gap-x-4 pt-8 mt-10 border-t border-slate-100 dark:border-slate-800">
-                        <button type="button" @click="showMachineSettingsModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
+                        <div
+                            class="flex justify-end gap-x-4 pt-8 mt-10 border-t border-slate-100 dark:border-slate-800">
+                            <button type="button" @click="showMachineSettingsModal = false"
+                                class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
                             <button type="submit" class="btn-luxury-primary px-12" :disabled="isUpdatingSetting">
                                 <span x-show="!isUpdatingSetting">{{ __('Update Settings') }}</span>
                                 <span x-show="isUpdatingSetting" class="flex items-center gap-2">
-                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                            stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor"
+                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                                        </path>
                                     </svg>
                                     {{ __('Updating...') }}
                                 </span>
@@ -559,87 +620,62 @@
                 </div>
             </div>
         </div>
-</template>
+    </template>
 
     <!-- 1. Header Area -->
-    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-        <div class="flex flex-col gap-1">
-            <div class="flex items-center gap-4">
-                <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Machine Settings') }}</h1>
-                <a href="{{ route('machines.distribution') }}" target="_blank" class="flex items-center gap-2 px-1 group transition-all pt-1">
-                    <svg class="w-5 h-5 text-slate-400 dark:text-white/40 group-hover:text-cyan-500 dark:group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 6.75V15m6-10.5v.106c0 .707-.555 1.296-1.244 1.333a5.232 5.232 0 0 0-4.834 4.834C8.889 11.418 8.299 12 7.591 12H7.5m0 0v7.5m0-7.5h.75m.75 0h.375c.49 0 .959.122 1.374.339a5.251 5.251 0 0 1 2.625 4.547v.105c0 .708.555 1.296 1.244 1.333a5.232 5.232 0 0 0 4.834-4.834c.038-.689.627-1.279 1.335-1.279h.75M15 6.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 18.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z" />
+    <div class="flex items-start justify-between gap-4 mb-2">
+        <div class="flex flex-col gap-1 min-w-0">
+            <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+                <h1
+                    class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display truncate">
+                    {{ __('Machine Settings') }}</h1>
+                <a href="{{ route('machines.distribution') }}" target="_blank"
+                    class="flex items-center gap-2 px-1 group transition-all pt-1">
+                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-slate-400 dark:text-white/40 group-hover:text-cyan-500 dark:group-hover:text-white transition-colors shrink-0"
+                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
+                            d="M9 6.75V15m6-10.5v.106c0 .707-.555 1.296-1.244 1.333a5.232 5.232 0 0 0-4.834 4.834C8.889 11.418 8.299 12 7.591 12H7.5m0 0v7.5m0-7.5h.75m.75 0h.375c.49 0 .959.122 1.374.339a5.251 5.251 0 0 1 2.625 4.547v.105c0 .708.555 1.296 1.244 1.333a5.232 5.232 0 0 0 4.834-4.834c.038-.689.627-1.279 1.335-1.279h.75M15 6.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 18.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z" />
                     </svg>
-                    <span class="text-base font-black text-slate-500 dark:text-white/60 group-hover:text-slate-700 dark:group-hover:text-white transition-colors">{{ __('Machine Distribution') }}</span>
+                    <span
+                        class="text-sm sm:text-base font-black text-slate-500 dark:text-white/60 group-hover:text-slate-700 dark:group-hover:text-white transition-colors truncate">{{
+                        __('Machine Distribution') }}</span>
                 </a>
             </div>
-            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">{{ __('Management of operational parameters and models') }}</p>
+            <p
+                class="text-[11px] sm:text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest truncate">
+                {{ __('Management of operational parameters and models') }}</p>
         </div>
-        <div class="flex items-center gap-3">
-
-            <button x-show="tab === 'machines'" x-cloak @click="showCreateMachineModal = true" class="btn-luxury-primary flex items-center gap-2">
+        <div class="flex items-center gap-3 shrink-0">
+            <button x-show="tab === 'machines'" x-cloak @click="showCreateMachineModal = true"
+                class="btn-luxury-primary flex items-center gap-2 px-4 sm:px-6 py-2.5 sm:py-3 h-10 sm:h-auto rounded-xl shadow-lg shadow-cyan-500/20 transition-all duration-300">
                 <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>{{ __('Add Machine') }}</span>
+                <span class="font-black text-sm sm:text-base tracking-tight">{{ __('Add Machine') }}</span>
             </button>
-            <button x-show="tab === 'models'" x-cloak @click="showCreateModelModal = true" class="btn-luxury-primary flex items-center gap-2">
+            <button x-show="tab === 'models'" x-cloak @click="showCreateModelModal = true"
+                class="btn-luxury-primary flex items-center gap-2 px-4 sm:px-6 py-2.5 sm:py-3 h-10 sm:h-auto rounded-xl shadow-lg shadow-cyan-500/20 transition-all duration-300">
                 <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>{{ __('Add Machine Model') }}</span>
+                <span class="font-black text-sm sm:text-base tracking-tight">{{ __('Add Model') }}</span>
             </button>
         </div>
     </div>
 
-    <div
-        class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50">
-        <button @click="tab = 'machines'"
-            :class="tab === 'machines' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all">
-            {{ __('Machines') }}
-        </button>
-        <button @click="tab = 'models'"
-            :class="tab === 'models' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all">
-            {{ __('Models') }}
-        </button>
-        <button @click="tab = 'permissions'"
-            :class="tab === 'permissions' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all">
-            {{ __('Machine Permissions') }}
-        </button>
-        <button @click="tab = 'system_settings'"
-            :class="tab === 'system_settings' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all">
-            {{ __('Machine System Settings') }}
-        </button>
-    </div>
+    <x-tab-nav model="tab">
+        <x-tab-nav-item value="machines" :label="__('Machines')" model="tab" />
+        <x-tab-nav-item value="models" :label="__('Models')" model="tab" />
+        <x-tab-nav-item value="permissions" :label="__('Machine Permissions')" model="tab" />
+        <x-tab-nav-item value="system_settings" :label="__('Machine System Settings')" model="tab" />
+    </x-tab-nav>
 
     <!-- 2. Main Content Card -->
-    <div class="luxury-card rounded-3xl p-8 animate-luxury-in mt-6 relative overflow-hidden">
-        <!-- Spinner Overlay -->
-        <div x-show="tabLoading" 
-            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"
-            class="absolute inset-0 z-20 bg-white/40 dark:bg-slate-900/40 backdrop-blur-[1px] flex flex-col items-center justify-center" x-cloak>
-            <div class="relative w-16 h-16 mb-4 flex items-center justify-center">
-                <div class="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-500 border-r-cyan-500/30 animate-spin"></div>
-                <div class="absolute inset-2 rounded-full border border-cyan-500/10 animate-spin" style="animation-duration: 3s; direction: reverse;"></div>
-                <div class="relative w-8 h-8 flex items-center justify-center">
-                    <svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-                    </svg>
-                </div>
-            </div>
-            <p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">{{ __('Loading Data') }}...</p>
-        </div>
+    <div class="luxury-card rounded-3xl p-6 sm:p-8 animate-luxury-in mt-6 relative overflow-hidden">
+        <x-luxury-spinner show="tabLoading" z-index="z-20" />
 
-        <div :class="tabLoading ? 'opacity-30 pointer-events-none transition-opacity duration-300' : 'transition-opacity duration-300'">
+        <div
+            :class="tabLoading ? 'opacity-30 pointer-events-none transition-opacity duration-300' : 'transition-opacity duration-300'">
             <!-- Machines Tab -->
             <div x-show="tab === 'machines'" x-cloak>
                 <div x-ref="machinesContent">
@@ -669,16 +705,17 @@
         </div>
     </div>
 
-<!-- Modals & Drawers -->
+    <!-- Modals & Drawers -->
 
-<!-- 1. Create Machine Modal -->
-<template x-teleport="body">
+    <!-- 1. Create Machine Modal -->
+    <template x-teleport="body">
         <div x-show="showCreateMachineModal" class="fixed inset-0 z-[100] 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 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 transition-opacity" aria-hidden="true" @click="showCreateMachineModal = false">
+                <div class="fixed inset-0 transition-opacity" aria-hidden="true"
+                    @click="showCreateMachineModal = false">
                     <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
                 </div>
                 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
@@ -686,7 +723,8 @@
                     class="inline-block align-bottom bg-white dark:bg-slate-900 rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full animate-luxury-in border border-slate-100 dark:border-slate-800">
                     <div
                         class="px-8 pt-8 pb-6 border-b border-slate-50 dark:border-slate-800/50 flex justify-between items-center">
-                    <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Add Machine') }}</h3>
+                        <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{
+                            __('Add Machine') }}</h3>
                         <button @click="showCreateMachineModal = false"
                             class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
                             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -696,8 +734,7 @@
                         </button>
                     </div>
                     <form action="{{ route('admin.basic-settings.machines.store') }}" method="POST"
-                    enctype="multipart/form-data"
-                    @submit.prevent="
+                        enctype="multipart/form-data" @submit.prevent="
                         if(!$el.name.value.trim()){ window.dispatchEvent(new CustomEvent('toast', { detail: { message: '{{ __('Enter machine name') }}', type: 'error' } })); return; }
                         if(!$el.serial_no.value.trim()){ window.dispatchEvent(new CustomEvent('toast', { detail: { message: '{{ __('Enter serial number') }}', type: 'error' } })); return; }
                         if(!$el.machine_model_id.value.trim()){ window.dispatchEvent(new CustomEvent('toast', { detail: { message: '{{ __('Please select a machine model') }}', type: 'error' } })); return; }
@@ -749,7 +786,8 @@
                                 </label>
                                 <x-searchable-select name="company_id" :placeholder="__('Select Owner')">
                                     @foreach($companies as $company)
-                                <option value="{{ $company->id }}" data-title="{{ $company->name }}{{ $company->code ? ' (' . $company->code . ')' : '' }}">
+                                    <option value="{{ $company->id }}"
+                                        data-title="{{ $company->name }}{{ $company->code ? ' (' . $company->code . ')' : '' }}">
                                         {{ $company->name }}{{ $company->code ? ' (' . $company->code . ')' : '' }}
                                     </option>
                                     @endforeach
@@ -783,9 +821,10 @@
                                         <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                             <div
                                                 class="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-500 mb-2">
-                                            <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="M5 13l4 4L19 7" />
+                                                <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="M5 13l4 4L19 7" />
                                                 </svg>
                                             </div>
                                             <p class="text-xs font-black text-emerald-500 uppercase tracking-widest"
@@ -799,17 +838,18 @@
                         </div>
                         <div
                             class="px-8 py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-end gap-3 rounded-b-3xl border-t border-slate-100 dark:border-slate-800">
-                        <button type="button" @click="showCreateMachineModal = false" class="btn-luxury-ghost">{{ __('Cancel') }}</button>
+                            <button type="button" @click="showCreateMachineModal = false" class="btn-luxury-ghost">{{
+                                __('Cancel') }}</button>
                             <button type="submit" class="btn-luxury-primary px-8">{{ __('Save') }}</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
-</template>
+    </template>
 
-<!-- 2. Create Model Modal -->
-<template x-teleport="body">
+    <!-- 2. Create Model Modal -->
+    <template x-teleport="body">
         <div x-show="showCreateModelModal" class="fixed inset-0 z-[100] 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"
@@ -823,7 +863,8 @@
                     class="inline-block align-bottom bg-white dark:bg-slate-900 rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full animate-luxury-in border border-slate-100 dark:border-slate-800">
                     <div
                         class="px-8 pt-8 pb-6 border-b border-slate-50 dark:border-slate-800/50 flex justify-between items-center">
-                    <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Add Machine Model') }}</h3>
+                        <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{
+                            __('Add Machine Model') }}</h3>
                         <button @click="showCreateModelModal = false"
                             class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
                             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -839,24 +880,26 @@
                         <div class="px-8 py-8 space-y-6">
                             <div>
                                 <label
-                                class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2">{{ __('Model Name') }}</label>
+                                    class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2">{{
+                                    __('Model Name') }}</label>
                                 <input type="text" name="name" required class="luxury-input w-full"
                                     placeholder="{{ __('Enter model name') }}">
                             </div>
                         </div>
                         <div
                             class="px-8 py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-end gap-3 rounded-b-3xl border-t border-slate-100 dark:border-slate-800">
-                        <button type="button" @click="showCreateModelModal = false" class="btn-luxury-ghost">{{ __('Cancel') }}</button>
+                            <button type="button" @click="showCreateModelModal = false" class="btn-luxury-ghost">{{
+                                __('Cancel') }}</button>
                             <button type="submit" class="btn-luxury-primary px-8">{{ __('Create') }}</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
-</template>
+    </template>
 
-<!-- 3. Edit Model Modal -->
-<template x-teleport="body">
+    <!-- 3. Edit Model Modal -->
+    <template x-teleport="body">
         <div x-show="showEditModelModal" class="fixed inset-0 z-[100] 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"
@@ -870,7 +913,8 @@
                     class="inline-block align-bottom bg-white dark:bg-slate-900 rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full animate-luxury-in border border-slate-100 dark:border-slate-800">
                     <div
                         class="px-8 pt-8 pb-6 border-b border-slate-50 dark:border-slate-800/50 flex justify-between items-center">
-                    <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Edit Machine Model') }}</h3>
+                        <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{
+                            __('Edit Machine Model') }}</h3>
                         <button @click="showEditModelModal = false"
                             class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
                             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -886,43 +930,47 @@
                         <div class="px-8 py-8 space-y-6">
                             <div>
                                 <label
-                                class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2">{{ __('Model Name') }}</label>
+                                    class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2">{{
+                                    __('Model Name') }}</label>
                                 <input type="text" name="name" x-model="currentModel.name" required
                                     class="luxury-input w-full" placeholder="{{ __('Enter model name') }}">
                             </div>
                         </div>
                         <div
                             class="px-8 py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-end gap-3 rounded-b-3xl border-t border-slate-100 dark:border-slate-800">
-                        <button type="button" @click="showEditModelModal = false" class="btn-luxury-ghost">{{ __('Cancel') }}</button>
+                            <button type="button" @click="showEditModelModal = false" class="btn-luxury-ghost">{{
+                                __('Cancel') }}</button>
                             <button type="submit" class="btn-luxury-primary px-8">{{ __('Save') }}</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
-</template>
+    </template>
 
-<!-- 4. Machine Photo Management Modal -->
-<template x-teleport="body">
+    <!-- 4. Machine Photo Management Modal -->
+    <template x-teleport="body">
         <div x-show="showPhotoModal" class="fixed inset-0 z-[150]" x-cloak>
             <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" x-show="showPhotoModal"
                 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="showPhotoModal = false">
+                x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
+                @click="showPhotoModal = false">
             </div>
 
             <div
-            class="fixed inset-0 z-[160] overflow-y-auto pointer-events-none p-4 md:p-8 flex items-center justify-center">
+                class="fixed inset-0 z-[160] overflow-y-auto pointer-events-none p-4 flex items-center justify-center min-h-screen">
                 <div
-                class="w-full max-w-2xl bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl border border-slate-100 dark:border-slate-800 pointer-events-auto overflow-hidden animate-luxury-in">
+                    class="w-full max-w-2xl max-h-[calc(100vh-2rem)] flex flex-col bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl border border-slate-100 dark:border-slate-800 pointer-events-auto overflow-hidden animate-luxury-in">
                     <div
-                    class="px-8 py-6 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between bg-white dark:bg-slate-900 sticky top-0 z-10">
+                        class="px-6 py-5 md:px-8 md:py-6 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between bg-white dark:bg-slate-900 shrink-0">
                         <div>
-                        <h2 class="text-xl font-black text-slate-800 dark:text-white">{{ __('Machine Images') }}</h2>
+                            <h2 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Machine
+                                Images') }}</h2>
                             <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1"
                                 x-text="currentMachine?.name"></p>
                         </div>
-                    <button @click="showPhotoModal = false"
+                        <button @click="showPhotoModal = false" type="button"
                             class="p-2 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 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"
@@ -933,12 +981,12 @@
 
                     <form
                         :action="'{{ route('admin.basic-settings.machines.photos.update', ':id') }}'.replace(':id', currentMachine?.id)"
-                    method="POST" enctype="multipart/form-data">
+                        method="POST" enctype="multipart/form-data" class="flex flex-col min-h-0">
                         @csrf
                         @method('PATCH')
 
-                    <div class="p-8 space-y-8">
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="p-6 md:p-8 space-y-6 md:space-y-8 overflow-y-auto custom-scrollbar">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                                 <template x-for="i in [0, 1, 2]" :key="i">
                                     <div class="space-y-3">
                                         <label
@@ -946,7 +994,9 @@
                                             x-text="'{{ __('Photo Slot') }} ' + (i + 1)"></label>
 
                                         <div class="relative group aspect-square rounded-[2rem] overflow-hidden border-2 border-dashed border-slate-200 dark:border-slate-800 hover:border-emerald-500/50 transition-all bg-slate-50/50 dark:bg-slate-900/50 flex flex-col items-center justify-center cursor-pointer"
-                                        @click="$el.querySelector('input').click()"> <template
+                                            @click="$el.querySelector('input').click()">
+
+                                            <template
                                                 x-if="(selectedFiles[i] || (currentMachine?.image_urls && currentMachine.image_urls[i])) && !deletedPhotos[i]">
                                                 <div class="absolute inset-0 w-full h-full">
                                                     <img :src="selectedFiles[i] || currentMachine.image_urls[i]"
@@ -979,13 +1029,13 @@
                                                         </svg>
                                                     </div>
                                                     <span
-                                                    class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest"
-                                                    x-text="'Slot ' + (i + 1)"></span>
+                                                        class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{
+                                                        __('Upload') }}</span>
                                                 </div>
                                             </template>
 
-                                        <input type="file" :name="'machine_image_' + i" class="hidden" accept="image/*"
-                                            @change="handlePhotoFileChange($event, i)">
+                                            <input type="file" :name="'machine_image_' + i" class="hidden"
+                                                accept="image/*" @change="handlePhotoFileChange($event, i)">
                                             <input type="hidden" :name="'delete_photo_' + i"
                                                 :value="deletedPhotos[i] ? '1' : '0'">
                                         </div>
@@ -995,7 +1045,8 @@
 
                             <div
                                 class="bg-amber-50 dark:bg-amber-900/10 border border-amber-100 dark:border-amber-900/30 rounded-2xl p-4 flex items-center gap-4">
-                            <div class="flex-shrink-0 p-2 rounded-xl bg-amber-100 dark:bg-amber-900/30 text-amber-600">
+                                <div
+                                    class="flex-shrink-0 p-2 rounded-xl bg-amber-100 dark:bg-amber-900/30 text-amber-600">
                                     <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"
                                             d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -1009,28 +1060,23 @@
                         </div>
 
                         <div
-                        class="px-8 py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-end gap-3 rounded-b-3xl border-t border-slate-100 dark:border-slate-800">
-                        <button type="button" @click="showPhotoModal = false" class="btn-luxury-ghost">{{ __('Cancel')
-                            }}</button>
+                            class="px-6 py-5 md:px-8 md:py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
+                            <button type="button" @click="showPhotoModal = false" class="btn-luxury-ghost">{{
+                                __('Cancel') }}</button>
                             <button type="submit" class="btn-luxury-primary px-8">{{ __('Save Changes') }}</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
-</template>
+    </template>
 
-<!-- 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 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>
+    <!-- 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 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>
@@ -1048,16 +1094,14 @@
                 @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">
+                    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 -->
             {{ __('Click anywhere to close') }}
         </div>
-    </div>
+</div>
 </template>
 
 
@@ -1072,15 +1116,21 @@
                 <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
+                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>
+                        <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">
+                    <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" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </button>
                 </div>
@@ -1093,14 +1143,18 @@
                         <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
+                            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
+                    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>
@@ -1150,9 +1204,13 @@
                                             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 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" />
+                                            <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>
@@ -1161,7 +1219,8 @@
                             </section>
                         </template>
                         <section class="space-y-6">
-                            <h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Hardware & Network') }}</h3>
+                            <h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Hardware &
+                                Network') }}</h3>
                             <div class="grid grid-cols-1 gap-4">
                                 <div
                                     class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
@@ -1205,36 +1264,70 @@
                                     <span class="text-sm font-black text-slate-700 dark:text-slate-300"
                                         x-text="currentMachine?.card_reader_no || '--'"></span>
                                 </div>
-                                <div class="flex flex-col gap-3 p-3 mt-1 bg-slate-50 dark:bg-slate-800/40 rounded-xl border border-slate-100 dark:border-slate-700/50 relative">
+                                <div
+                                    class="flex flex-col gap-3 p-3 mt-1 bg-slate-50 dark:bg-slate-800/40 rounded-xl border border-slate-100 dark:border-slate-700/50 relative">
                                     <div class="flex items-center justify-between">
-                                        <span class="text-xs font-black text-slate-500 uppercase tracking-widest">{{ __('API Token') }}</span>
+                                        <span class="text-xs font-black text-slate-500 uppercase tracking-widest">{{
+                                            __('API Token') }}</span>
                                         <div class="flex items-center gap-1">
                                             <template x-if="currentMachine?.api_token">
                                                 <div class="flex items-center gap-1">
                                                     <button @click="showApiToken = !showApiToken"
                                                         class="p-1.5 rounded-lg text-slate-400 hover:text-cyan-500 hover:bg-cyan-50 dark:hover:bg-cyan-900/40 transition-all font-bold"
                                                         :title="showApiToken ? '{{ __('Hide') }}' : '{{ __('Show') }}'">
-                                                        <svg x-show="!showApiToken" 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>
-                                                        <svg x-show="showApiToken" x-cloak 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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
+                                                        <svg x-show="!showApiToken" 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>
+                                                        <svg x-show="showApiToken" x-cloak 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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                                                        </svg>
                                                     </button>
                                                     <button @click="copyToken(currentMachine)"
                                                         class="p-1.5 rounded-lg text-slate-400 hover:text-emerald-500 hover:bg-emerald-50 dark:hover:bg-emerald-900/40 transition-all font-bold"
                                                         title="{{ __('Copy') }}">
-                                                        <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+                                                        <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                                                        </svg>
                                                     </button>
                                                 </div>
                                             </template>
                                             <button @click="regenerateToken()" :disabled="loadingRegenerate"
                                                 class="ml-2 px-2.5 py-1.5 rounded-lg bg-rose-50 dark:bg-rose-500/10 text-rose-500 hover:bg-rose-100 dark:hover:bg-rose-500/20 text-xs font-black uppercase tracking-widest transition-all disabled:opacity-50 flex items-center gap-1.5 border border-rose-100 dark:border-rose-500/20"
                                                 title="{{ __('Regenerate') }}">
-                                                <svg x-show="loadingRegenerate" class="animate-spin w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-                                                <svg x-show="!loadingRegenerate" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                                                <svg x-show="loadingRegenerate" class="animate-spin w-3 h-3"
+                                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                                    <circle class="opacity-25" cx="12" cy="12" r="10"
+                                                        stroke="currentColor" stroke-width="4"></circle>
+                                                    <path class="opacity-75" fill="currentColor"
+                                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                                                    </path>
+                                                </svg>
+                                                <svg x-show="!loadingRegenerate" class="w-3 h-3" fill="none"
+                                                    stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                                        stroke-width="2.5"
+                                                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                                                </svg>
                                                 <span>{{ __('Regenerate') }}</span>
                                             </button>
                                         </div>
                                     </div>
-                                    <div class="bg-white dark:bg-slate-900/50 rounded-lg border border-slate-200 dark:border-slate-700/50 p-2.5 overflow-x-auto custom-scrollbar">
-                                        <span class="text-sm font-mono font-bold tracking-[0.1em] text-cyan-600 dark:text-cyan-400 select-all block whitespace-nowrap min-w-full"
+                                    <div
+                                        class="bg-white dark:bg-slate-900/50 rounded-lg border border-slate-200 dark:border-slate-700/50 p-2.5 overflow-x-auto custom-scrollbar">
+                                        <span
+                                            class="text-sm font-mono font-bold tracking-[0.1em] text-cyan-600 dark:text-cyan-400 select-all block whitespace-nowrap min-w-full"
                                             x-text="currentMachine?.api_token ? (showApiToken ? currentMachine.api_token : '•'.repeat(16)) : '{{ __('None') }}'"></span>
                                     </div>
                                 </div>
@@ -1262,21 +1355,17 @@
         </div>
     </div>
 </template>
-    <!-- Global Delete Confirm Modal -->
-    <x-delete-confirm-modal />
+<!-- Global Delete Confirm Modal -->
+<x-delete-confirm-modal />
 
-    <x-confirm-modal 
-        alpine-var="isRegenerateConfirmOpen" 
+<x-confirm-modal alpine-var="isRegenerateConfirmOpen"
     confirm-action="isRegenerateConfirmOpen = false; window.dispatchEvent(new CustomEvent('execute-regenerate', { detail: window.activeMachineSerial || window.activeMachineId }))"
-        icon-type="warning"
-        confirm-color="sky"
-        :title="__('Are you sure?')"
+    icon-type="warning" confirm-color="sky" :title="__('Are you sure?')"
     :message="__('Regenerating the token will disconnect the physical machine until it is updated. Continue?')"
-        :confirm-text="__('Yes, regenerate')"
-    />
+    :confirm-text="__('Yes, regenerate')" />
 
-    <!-- Machine Permissions Modal -->
-    <template x-teleport='body'>
+<!-- Machine Permissions Modal -->
+<template x-teleport='body'>
     <div x-show='showPermissionModal' class='fixed inset-0 z-[160] overflow-y-auto' x-cloak>
         <div class='flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0'>
             <div x-show='showPermissionModal' @click='showPermissionModal = false'
@@ -1348,7 +1437,9 @@
                                 <div
                                     class='w-10 h-10 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin'>
                                 </div>
-                                    <span class='text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] animate-pulse'>{{ __('Syncing Permissions...') }}</span>
+                                <span
+                                    class='text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] animate-pulse'>{{
+                                    __('Syncing Permissions...') }}</span>
                             </div>
                         </div>
                     </template>
@@ -1381,8 +1472,7 @@
                                             d='M5 2h14c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2zm0 2v16h14V4H5zm3 3h8v6H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2z' />
                                     </svg>
                                 </div>
-                                    <div class='absolute top-4 right-4 animate-luxury-in'
-                                        x-show='permissions[machine.id]'>
+                                <div class='absolute top-4 right-4 animate-luxury-in' x-show='permissions[machine.id]'>
                                     <div
                                         class='w-5 h-5 rounded-full bg-cyan-500 flex items-center justify-center shadow-lg shadow-cyan-500/30'>
                                         <svg class='w-3 h-3 text-white' fill='none' stroke='currentColor'
@@ -1421,7 +1511,8 @@
                     <div class='flex gap-4 w-full sm:w-auto'>
                         <button @click='showPermissionModal = false'
                             class='flex-1 sm:flex-none btn-luxury-ghost px-8'>{{ __('Cancel') }}</button>
-                            <button @click='savePermissions()' class='flex-1 sm:flex-none btn-luxury-primary px-12 transition-all duration-300 shadow-lg shadow-cyan-500/20'
+                        <button @click='savePermissions()'
+                            class='flex-1 sm:flex-none btn-luxury-primary px-12 transition-all duration-300 shadow-lg shadow-cyan-500/20'
                             :disabled='isPermissionsLoading'>
                             <span>{{ __('Update Authorization') }}</span>
                         </button>
@@ -1430,7 +1521,7 @@
             </div>
         </div>
     </div>
-    </template>
+</template>
 
 
 

resources/views/admin/basic-settings/machines/partials/tab-machines.blade.php

@@ -1,10 +1,10 @@
 {{-- Machines Tab Content (Partial) --}}
 {{-- 此檔案被 index.blade.php 的 @include 和 AJAX 模式共用 --}}
 
-{{-- Toolbar 區：搜尋框 --}}
-<div class="flex items-center justify-between mb-8">
-    <div class="flex items-center gap-4">
-        <form @submit.prevent="searchInTab('machines')" class="relative group">
+{{-- Toolbar 區：搜尋框 + 按鈕 (同列) --}}
+<div class="flex flex-wrap items-center gap-3 sm:gap-4 mb-8">
+    {{-- 搜尋輸入框 --}}
+    <div class="relative group flex-1 sm:flex-none">
         <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"
@@ -14,112 +14,97 @@
             </svg>
         </span>
         <input type="text" x-model="machineSearch"
+            @keydown.enter.prevent="searchInTab('machines')"
             placeholder="{{ __('Search machines...') }}"
-                class="luxury-input py-2.5 pl-12 pr-6 block w-64">
-        </form>
+            class="luxury-input py-2.5 pl-11 pr-4 block w-full sm:w-72 text-sm font-bold">
+    </div>
+
+    <div class="flex items-center gap-2 ml-auto sm:ml-0">
+        {{-- 搜尋按鈕 --}}
+        <button type="button" @click="searchInTab('machines')"
+            class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+            title="{{ __('Search') }}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+        </button>
+
+        {{-- 重置按鈕 --}}
+        <button type="button"
+            @click="machineSearch = ''; searchInTab('machines')"
+            class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95"
+            title="{{ __('Reset') }}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+        </button>
     </div>
 </div>
 
-{{-- Machine Table --}}
-<div class="overflow-x-auto">
+{{-- ── 桌面表格 (xl+) ── --}}
+<div class="hidden xl:block 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">
+                <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 Info') }}</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">
+                <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 Model') }}</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">
+                <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">
                     {{ __('Status') }}</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">
+                <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">
                     {{ __('Card Reader') }}</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">
+                <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">
                     {{ __('Owner') }}</th>
-                <th
-                    class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800 text-right">
+                <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800 text-right">
                     {{ __('Action') }}</th>
             </tr>
         </thead>
         <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
             @forelse($machines as $machine)
-            <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+            @php $status = $machine->calculated_status; @endphp
+            <tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
                 <td class="px-6 py-6 cursor-pointer" @click='openDetail({{ $machine->toJson() }}, {{ $machine->id }}, "{{ $machine->serial_no }}")'>
                     <div class="flex items-center gap-4">
-                        <div
-                            class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300 overflow-hidden">
+                        <div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300 overflow-hidden">
                             @if(isset($machine->image_urls[0]))
                             <img src="{{ $machine->image_urls[0] }}" class="w-full h-full object-cover">
                             @else
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                                stroke-width="2.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="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 class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="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>
                             @endif
                         </div>
                         <div>
-                            <div
-                                class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
+                            <div class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">
                                 {{ $machine->name }}</div>
-                            <div class="flex items-center gap-2 mt-0.5">
-                                <span
-                                    class="text-xs font-mono font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">{{
-                                    $machine->serial_no }}</span>
-                            </div>
+                            <p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">{{ $machine->serial_no }}</p>
                         </div>
                     </div>
                 </td>
                 <td class="px-6 py-6 cursor-pointer" @click='openDetail({{ $machine->toJson() }}, {{ $machine->id }}, "{{ $machine->serial_no }}")'>
-                    <span
-                        class="text-xs font-bold text-slate-600 dark:text-slate-300 uppercase tracking-widest">
+                    <span class="text-xs font-bold text-slate-600 dark:text-slate-300 uppercase tracking-widest">
                         {{ $machine->machineModel->name ?? '--' }}
                     </span>
                 </td>
                 <td class="px-6 py-6">
-                    @php
-                        $status = $machine->calculated_status;
-                    @endphp
-                    <div class="flex items-center gap-2.5">
-                        <div class="relative flex h-2.5 w-2.5">
-                            @if($status === 'online')
-                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
-                            @elseif($status === 'error')
-                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
-                                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
-                            @else
-                                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-slate-300 dark:bg-slate-600"></span>
-                            @endif
-                        </div>
-                        <span class="text-xs font-bold uppercase tracking-wider {{ 
-                            $status === 'online' ? 'text-emerald-500' : ($status === 'error' ? 'text-amber-500' : 'text-slate-500 dark:text-slate-400') 
-                        }}">
-                            {{ __($status === 'online' ? 'Online' : ($status === 'error' ? 'Error' : 'Offline')) }}
-                        </span>
-                    </div>
+                    <x-status-badge :status="$status" size="sm" />
                 </td>
                 <td class="px-6 py-6">
                     <div class="text-sm font-bold text-slate-700 dark:text-slate-200">
-            {{ $machine->card_reader_seconds ?? 0 }}s <span
-                class="text-slate-300 dark:text-slate-700 mx-1.5">/</span> <span
-                class="text-xs text-slate-500 dark:text-slate-400 font-bold uppercase tracking-widest">No.{{
-                $machine->card_reader_no ?? '--' }}</span>
+                        {{ $machine->card_reader_seconds ?? 0 }}s <span class="text-slate-300 dark:text-slate-700 mx-1.5">/</span> <span class="text-xs text-slate-500 dark:text-slate-400 font-bold uppercase tracking-widest">No.{{ $machine->card_reader_no ?? '--' }}</span>
                     </div>
                 </td>
                 <td class="px-6 py-6">
-        <span
-            class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest">
+                    <span class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest">
                         {{ $machine->company->name ?? __('System') }}
                     </span>
                 </td>
-    <td class="px-6 py-6 text-right flex items-center justify-end gap-2">
+                <td class="px-6 py-6 text-right">
+                    <div class="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"
+                            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"
                             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" />
@@ -127,43 +112,129 @@
                             </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"
+                            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"
                             title="{{ __('Machine Images') }}">
                             <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                             </svg>
                         </button>
                         <a href="{{ route('admin.basic-settings.machines.edit', $machine) }}"
-            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"
+                            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"
                             title="{{ __('Edit Settings') }}">
                             <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                             </svg>
                         </a>
                         <button
                             @click="openDetail(@js($machine->only(['name', 'serial_no', 'status', 'location', 'last_heartbeat_at', 'card_reader_no', 'card_reader_seconds', 'firmware_version', 'api_token', 'heating_start_time', 'heating_end_time', '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"
+                            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"
                             title="{{ __('View Details') }}">
                             <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                             </svg>
                         </button>
+                    </div>
                 </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">
-            {{ __('No data available') }}
-        </td>
-    </tr>
+            <x-empty-state mode="table" :colspan="6" :message="__('No data available')" />
             @endforelse
         </tbody>
     </table>
 </div>
+
+{{-- ── Mobile / Tablet Card Grid (< xl) ── --}}
+<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-4">
+    @forelse($machines as $machine)
+    @php $status = $machine->calculated_status; @endphp
+    <div class="luxury-card p-5 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+
+        {{-- Card Header --}}
+        <div class="flex items-start justify-between gap-4 mb-5">
+            <div class="flex items-center gap-3 min-w-0">
+                <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0"
+                    @click='openDetail({{ $machine->toJson() }}, {{ $machine->id }}, "{{ $machine->serial_no }}")'>
+                    @if(isset($machine->image_urls[0]))
+                    <img src="{{ $machine->image_urls[0] }}" class="w-full h-full object-cover">
+                    @else
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" 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>
+                    @endif
+                </div>
+                <div class="min-w-0 cursor-pointer" @click='openDetail({{ $machine->toJson() }}, {{ $machine->id }}, "{{ $machine->serial_no }}")'>
+                    <h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors tracking-tight">
+                        {{ $machine->name }}
+                    </h3>
+                    <p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">
+                        {{ $machine->serial_no }}
+                    </p>
+                </div>
+            </div>
+            <x-status-badge :status="$status" size="sm" />
+        </div>
+
+        {{-- Info Grid --}}
+        <div class="grid grid-cols-2 gap-y-4 mb-5 border-y border-slate-100 dark:border-slate-800/50 py-4">
+            <div>
+                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Machine Model') }}</p>
+                <p class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ $machine->machineModel->name ?? '--' }}</p>
+            </div>
+            <div>
+                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Owner') }}</p>
+                <p class="text-sm font-bold text-sky-600 dark:text-sky-400">{{ $machine->company->name ?? __('System') }}</p>
+            </div>
+            <div>
+                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Card Reader') }}</p>
+                <p class="text-sm font-bold text-slate-700 dark:text-slate-300 font-mono">{{ $machine->card_reader_seconds ?? 0 }}s / No.{{ $machine->card_reader_no ?? '--' }}</p>
+            </div>
+        </div>
+
+        {{-- Action Buttons --}}
+        <div class="flex items-center gap-2">
+            <button @click="openMaintenanceQr(@js($machine->only(['name', 'serial_no'])))"
+                class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold hover:bg-emerald-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
+                title="{{ __('Maintenance QR Code') }}">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="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.5z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.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.5z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.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="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
+                title="{{ __('Machine Images') }}">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+                </svg>
+            </button>
+            <a href="{{ route('admin.basic-settings.machines.edit', $machine) }}"
+                class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
+                title="{{ __('Edit') }}">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                </svg>
+            </a>
+            <button
+                @click="openDetail(@js($machine->only(['name', 'serial_no', 'status', 'location', 'last_heartbeat_at', 'card_reader_no', 'card_reader_seconds', 'firmware_version', 'api_token', 'heating_start_time', 'heating_end_time', 'image_urls'])))"
+                class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
+                title="{{ __('Detail') }}">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    @empty
+    <div class="col-span-full">
+        <x-empty-state :message="__('No data available')" />
+    </div>
+    @endforelse
+</div>
+
 <div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
     {{ $machines->appends(['tab' => 'machines'])->links('vendor.pagination.luxury') }}
 </div>

resources/views/admin/basic-settings/machines/partials/tab-models.blade.php

@@ -1,10 +1,10 @@
 {{-- Models Tab Content (Partial) --}}
 {{-- 此檔案被 index.blade.php 的 @include 和 AJAX 模式共用 --}}
 
-{{-- Toolbar 區：搜尋框 --}}
-<div class="flex items-center justify-between mb-8">
-    <div class="flex items-center gap-4">
-        <form @submit.prevent="searchInTab('models')" class="relative group">
+{{-- Toolbar 區：搜尋框 + 按鈕 (同列) --}}
+<div class="flex flex-wrap items-center gap-3 sm:gap-4 mb-8">
+    {{-- 搜尋輸入框 --}}
+    <div class="relative group flex-1 sm:flex-none">
         <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"
@@ -14,72 +14,82 @@
             </svg>
         </span>
         <input type="text" x-model="modelSearch"
+            @keydown.enter.prevent="searchInTab('models')"
             placeholder="{{ __('Search models...') }}"
-                class="luxury-input py-2.5 pl-12 pr-6 block w-64">
-        </form>
+            class="luxury-input py-2.5 pl-11 pr-4 block w-full sm:w-72 text-sm font-bold">
+    </div>
+
+    <div class="flex items-center gap-2 ml-auto sm:ml-0">
+        {{-- 搜尋按鈕 --}}
+        <button type="button" @click="searchInTab('models')"
+            class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+            title="{{ __('Search') }}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+        </button>
+
+        {{-- 重置按鈕 --}}
+        <button type="button"
+            @click="modelSearch = ''; searchInTab('models')"
+            class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95"
+            title="{{ __('Reset') }}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+        </button>
     </div>
 </div>
 
-{{-- Model Table --}}
-<div class="overflow-x-auto">
+{{-- ── 桌面表格 (xl+) ── --}}
+<div class="hidden xl:block 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-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
+                <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
                     {{ __('Model Name') }}</th>
-                <th
-                    class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
+                <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
                     {{ __('Machine Count') }}</th>
-                <th
-                    class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
+                <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
                     {{ __('Last Updated') }}</th>
-                <th
-                    class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800 text-right">
+                <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800 text-right">
                     {{ __('Action') }}</th>
             </tr>
         </thead>
         <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
             @forelse($models_list as $model)
-            <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+            <tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
                 <td class="px-6 py-6">
                     <div class="flex items-center gap-x-3">
-                        <div
-                            class="flex-shrink-0 w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                                stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                        <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                             </svg>
                         </div>
-                        <div
-                            class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
+                        <div class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">
                             {{ $model->name }}</div>
                     </div>
                 </td>
                 <td class="px-6 py-6">
-                    <span
-                        class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest">
+                    <span class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest">
                         {{ $model->machines_count ?? 0 }} {{ __('Items') }}
                     </span>
                 </td>
                 <td class="px-6 py-6">
-                    <div
-                        class="text-xs font-black text-slate-400 dark:text-slate-400/80 uppercase tracking-widest leading-none">
+                    <div class="text-xs font-black text-slate-400 dark:text-slate-400/80 uppercase tracking-widest font-mono">
                         {{ $model->updated_at->format('Y/m/d H:i') }}
                     </div>
                 </td>
-                <td class="px-6 py-6 text-right space-x-2">
+                <td class="px-6 py-6 text-right">
                     <div class="flex items-center justify-end gap-2">
                         <button @click="currentModel = @js($model->only(['name'])); modelActionUrl = '{{ route('admin.basic-settings.machine-models.update', $model) }}'; showEditModelModal = true"
-                            class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 dark:hover:text-cyan-400 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-transparent hover:border-cyan-500/20 transition-all group/btn"
+                            class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 dark:hover:text-cyan-400 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-transparent hover:border-cyan-500/20 transition-all"
                             title="{{ __('Edit') }}">
                             <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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                             </svg>
                         </button>
-
                         <form :id="'delete-model-form-' + {{ $model->id }}"
                             action="{{ route('admin.basic-settings.machine-models.destroy', $model) }}"
                             method="POST" class="inline">
@@ -89,10 +99,8 @@
                                 @click="confirmDelete('{{ route('admin.basic-settings.machine-models.destroy', $model) }}')"
                                 class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 dark:hover:text-rose-400 hover:bg-rose-500/5 dark:hover:bg-rose-500/10 border border-transparent hover:border-rose-500/20 transition-all"
                                 title="{{ __('Delete') }}">
-                                <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                                <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                 </svg>
                             </button>
                         </form>
@@ -100,16 +108,63 @@
                 </td>
             </tr>
             @empty
-            <tr>
-                <td colspan="4"
-                    class="px-6 py-20 text-center text-slate-500 dark:text-slate-400 font-bold tracking-widest uppercase">
-                    {{ __('No data available') }}
-                </td>
-            </tr>
+            <x-empty-state mode="table" :colspan="4" :message="__('No data available')" />
             @endforelse
         </tbody>
     </table>
 </div>
+
+{{-- ── Mobile / Tablet Card Grid (< xl) ── --}}
+<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-4">
+    @forelse($models_list as $model)
+    <div class="luxury-card p-5 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+
+        {{-- Card Header --}}
+        <div class="flex items-center gap-3 mb-5">
+            <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 shadow-sm shrink-0">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                </svg>
+            </div>
+            <div class="min-w-0 flex-1">
+                <h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate tracking-tight">
+                    {{ $model->name }}
+                </h3>
+                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">
+                    {{ $model->updated_at->format('Y/m/d H:i') }}
+                </p>
+            </div>
+            <span class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest shrink-0">
+                {{ $model->machines_count ?? 0 }} {{ __('Items') }}
+            </span>
+        </div>
+
+        {{-- Action Buttons --}}
+        <div class="flex items-center gap-2">
+            <button @click="currentModel = @js($model->only(['name'])); modelActionUrl = '{{ route('admin.basic-settings.machine-models.update', $model) }}'; showEditModelModal = true"
+                class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931Z" />
+                </svg>
+                {{ __('Edit') }}
+            </button>
+            <button type="button"
+                @click="confirmDelete('{{ route('admin.basic-settings.machine-models.destroy', $model) }}')"
+                class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-rose-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                </svg>
+                {{ __('Delete') }}
+            </button>
+        </div>
+    </div>
+    @empty
+    <div class="col-span-full">
+        <x-empty-state :message="__('No data available')" />
+    </div>
+    @endforelse
+</div>
+
 <div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
     {{ $models_list->appends(['tab' => 'models'])->links('vendor.pagination.luxury') }}
 </div>

resources/views/admin/basic-settings/machines/partials/tab-permissions.blade.php

@@ -1,10 +1,10 @@
 {{-- Permissions Tab Content (Partial) --}}
 {{-- 此檔案被 index.blade.php 的 @include 和 AJAX 模式共用 --}}
 
-{{-- Toolbar 區：搜尋框 + 公司篩選 --}}
-<div class="flex items-center justify-between mb-8">
-    <div class="flex items-center gap-4">
-        <form @submit.prevent="searchInTab('permissions')" class="relative group">
+{{-- Toolbar 區：搜尋框 + 公司篩選 + 按鈕 (Scenario B: Stacked) --}}
+<div class="flex flex-wrap items-center gap-3 sm:gap-4 mb-8">
+    {{-- 搜尋輸入框 --}}
+    <div class="relative group flex-1 sm:flex-none">
         <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"
@@ -14,81 +14,87 @@
             </svg>
         </span>
         <input type="text" x-model="permissionSearch"
+            @keydown.enter.prevent="searchInTab('permissions')"
             placeholder="{{ __('Search accounts...') }}"
-                class="luxury-input py-2.5 pl-12 pr-6 block w-64">
-        </form>
+            class="luxury-input py-2.5 pl-11 pr-4 block w-full sm:w-64 text-sm font-bold">
+    </div>
 
     @if(auth()->user()->isSystemAdmin())
-        <div class="w-72">
+    <div class="w-full sm:w-72">
         <x-searchable-select name="company_filter" :options="$companies" :selected="request('company_id')"
             :placeholder="__('All Companies')"
             x-on:change="permissionCompanyId = $event.target.value; searchInTab('permissions')" />
     </div>
     @endif
+
+    <div class="flex items-center gap-2 ml-auto sm:ml-0">
+        {{-- 搜尋按鈕 --}}
+        <button type="button" @click="searchInTab('permissions')"
+            class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+            title="{{ __('Search') }}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+        </button>
+
+        {{-- 重置按鈕 --}}
+        <button type="button"
+            @click="permissionSearch = ''; permissionCompanyId = ''; searchInTab('permissions')"
+            class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95"
+            title="{{ __('Reset') }}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+        </button>
     </div>
 </div>
 
-{{-- Permissions Table --}}
-<div class="overflow-x-auto">
+{{-- ── 桌面表格 (xl+) ── --}}
+<div class="hidden xl:block 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">
+                <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">
                     {{ __('Account Info') }}</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-left">
+                <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-left">
                     {{ __('Company Name') }}</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-center">
+                <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-center">
                     {{ __('Authorized Machines') }}</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">
+                <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">
                     {{ __('Action') }}</th>
             </tr>
         </thead>
         <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
             @forelse($users_list ?? [] as $user)
-            <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+            <tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
                 <td class="px-6 py-6 font-display text-left">
                     <div class="flex items-center gap-4 text-left">
-                        <div
-                            class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300">
+                        <div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300">
                             <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.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                             </svg>
                         </div>
                         <div class="flex flex-col text-left">
-                            <span
-                                class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{
-                                $user->name }}</span>
-                            <span
-                                class="text-xs font-mono font-bold text-slate-500 tracking-widest uppercase">{{
-                                $user->username }}</span>
+                            <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">{{ $user->name }}</span>
+                            <span class="text-xs font-mono font-bold text-slate-500 tracking-widest uppercase">{{ $user->username }}</span>
                         </div>
                     </div>
                 </td>
                 <td class="px-6 py-6 text-left">
-                    <span
-                        class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest uppercase">
+                    <span class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest uppercase">
                         {{ $user->company->name ?? __('System') }}
                     </span>
                 </td>
                 <td class="px-6 py-4 text-center">
-                    <div
-                        class="flex flex-wrap gap-2 justify-center lg:justify-start max-w-[420px] mx-auto lg:mx-0 max-h-[140px] overflow-y-auto pr-2 custom-scrollbar py-1 text-left">
+                    <div class="flex flex-wrap gap-2 justify-center max-w-[420px] mx-auto max-h-[140px] overflow-y-auto pr-2 custom-scrollbar py-1 text-left">
                         @forelse($user->machines as $m)
-                        <div
-                            class="px-3 py-1.5 rounded-xl bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-white/5 hover:border-cyan-500/30 transition-all duration-300 text-left">
-                            <span class="text-xs font-black text-slate-700 dark:text-slate-200 leading-tight">{{
-                                $m->name }}</span>
+                        <div class="px-3 py-1.5 rounded-xl bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-white/5 hover:border-cyan-500/30 transition-all duration-300 text-left">
+                            <span class="text-xs font-black text-slate-700 dark:text-slate-200 leading-tight">{{ $m->name }}</span>
                         </div>
                         @empty
-                        <div class="w-full text-center lg:text-left">
-                            <span
-                                class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest opacity-40 italic">--
-                                {{ __('None') }} --</span>
+                        <div class="w-full text-center">
+                            <span class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest opacity-40">-- {{ __('None') }} --</span>
                         </div>
                         @endforelse
                     </div>
@@ -96,32 +102,82 @@
                 <td class="px-6 py-6 text-right">
                     <button
                         @click='openPermissionModal({{ json_encode(["id" => $user->id, "name" => $user->name]) }})'
-                        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500 hover:text-white transition-all duration-300 text-xs font-black uppercase tracking-widest shadow-sm shadow-cyan-500/5 group/auth">
+                        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500 hover:text-white transition-all duration-300 text-xs font-black uppercase tracking-widest shadow-sm shadow-cyan-500/5">
                         <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
-                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 00-2 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                         </svg>
                         <span>{{ __('Authorize') }}</span>
                     </button>
                 </td>
             </tr>
             @empty
-            <tr>
-                <td colspan="4" class="px-6 py-24 text-center">
-                    <div class="flex flex-col items-center gap-3 opacity-20">
-                        <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2m16-10a4 4 0 11-8 0 4 4 0 018 0zM23 21v-2a4 4 0 00-3-3.87m-4-12a4 4 0 010 7.75" />
-                        </svg>
-                        <p class="text-slate-400 font-extrabold tracking-widest uppercase text-xs">{{ __('No accounts found') }}</p>
-                    </div>
-                </td>
-            </tr>
+            <x-empty-state mode="table" :colspan="4" :message="__('No accounts found')" />
             @endforelse
         </tbody>
     </table>
 </div>
-<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6 text-left mb-6">
+
+{{-- ── Mobile / Tablet Card Grid (< xl) ── --}}
+<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-4">
+    @forelse($users_list ?? [] as $user)
+    <div class="luxury-card p-5 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+
+        {{-- Card Header --}}
+        <div class="flex items-start justify-between gap-4 mb-5">
+            <div class="flex items-center gap-3 min-w-0">
+                <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 shadow-sm shrink-0">
+                    <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="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                    </svg>
+                </div>
+                <div class="min-w-0">
+                    <h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate tracking-tight">{{ $user->name }}</h3>
+                    <p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">{{ $user->username }}</p>
+                </div>
+            </div>
+            <span class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest uppercase shrink-0">
+                {{ $user->company->name ?? __('System') }}
+            </span>
+        </div>
+
+        {{-- Machines Summary --}}
+        @if($user->machines->count() > 0)
+        <div class="mb-5 border-y border-slate-100 dark:border-slate-800/50 py-4">
+            <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2">{{ __('Authorized Machines') }}</p>
+            <div class="flex flex-wrap gap-1.5">
+                @foreach($user->machines->take(4) as $m)
+                <span class="px-2.5 py-1 rounded-xl bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-white/5 text-xs font-black text-slate-700 dark:text-slate-200">{{ $m->name }}</span>
+                @endforeach
+                @if($user->machines->count() > 4)
+                <span class="px-2.5 py-1 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 text-xs font-black">+{{ $user->machines->count() - 4 }}</span>
+                @endif
+            </div>
+        </div>
+        @else
+        <div class="mb-5 border-y border-slate-100 dark:border-slate-800/50 py-4">
+            <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Authorized Machines') }}</p>
+            <p class="text-xs font-bold text-slate-400 opacity-60">-- {{ __('None') }} --</p>
+        </div>
+        @endif
+
+        {{-- Action Buttons --}}
+        <button
+            @click='openPermissionModal({{ json_encode(["id" => $user->id, "name" => $user->name]) }})'
+            class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-cyan-500/20">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+            {{ __('Authorize') }}
+        </button>
+    </div>
+    @empty
+    <div class="col-span-full">
+        <x-empty-state :message="__('No accounts found')" />
+    </div>
+    @endforelse
+</div>
+
+<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6 mb-6">
     @if($users_list)
         {{ $users_list->appends(['tab' => 'permissions'])->links('vendor.pagination.luxury') }}
     @endif

resources/views/admin/basic-settings/machines/partials/tab-system-settings.blade.php

@@ -1,9 +1,8 @@
 <div class="space-y-0">
     <!-- 1. Header with Search and Filter -->
-    <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-6">
-        <div class="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
+    <div class="flex flex-wrap items-center gap-3 sm:gap-4 mb-8">
         <!-- Search Bar -->
-            <div class="relative group w-full md:w-64">
+        <div class="relative group flex-1 sm:flex-none">
             <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 stroke-[2.5]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                     <circle cx="11" cy="11" r="8"></circle>
@@ -11,12 +10,13 @@
                 </svg>
             </span>
             <input type="text" x-model="machineSearch" @input.debounce.500ms="searchInTab('system_settings')"
+                @keydown.enter.prevent="searchInTab('system_settings')"
                 placeholder="{{ __('搜尋機台名稱或代號...') }}"
-                    class="py-2.5 pl-12 pr-6 block w-full luxury-input">
+                class="luxury-input py-2.5 pl-11 pr-4 block w-full sm:w-72 text-sm font-bold">
         </div>
 
         <!-- Company Filter -->
-            <div class="w-full md:w-48">
+        <div class="w-full sm:w-72">
             <x-searchable-select
                 x-model="permissionCompanyId"
                 @change="searchInTab('system_settings')"
@@ -26,11 +26,33 @@
                 @endforeach
             </x-searchable-select>
         </div>
+
+        <div class="flex items-center gap-2 ml-auto sm:ml-0">
+            {{-- 搜尋按鈕 --}}
+            <button type="button" @click="searchInTab('system_settings')"
+                class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+                title="{{ __('Search') }}">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+            </button>
+
+            {{-- 重置按鈕 --}}
+            <button type="button"
+                @click="machineSearch = ''; permissionCompanyId = ''; searchInTab('system_settings')"
+                class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95"
+                title="{{ __('Reset') }}">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+            </button>
         </div>
     </div>
 
-    <!-- 2. Table Content -->
-    <div class="overflow-x-auto">
+
+    <!-- ── 桌面表格 (xl+) ── -->
+    <div class="hidden xl:block 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/30">
@@ -50,29 +72,6 @@
             </thead>
             <tbody class="divide-y divide-slate-50 dark:divide-slate-800/50">
                 @forelse($machines as $machine)
-                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
-                        <td class="px-6 py-6 w-1/4">
-                            <div class="flex items-center gap-x-4">
-                                <div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all">
-                                    <svg class="w-5 h-5 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" 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 class="flex flex-col">
-                                    <div class="flex items-center gap-2">
-                                        <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ $machine->name }}</span>
-                                    </div>
-                                    <div class="flex items-center gap-2 mt-0.5">
-                                        <span class="text-xs font-mono font-bold text-slate-500 dark:text-slate-400 tracking-widest uppercase">{{ $machine->serial_no }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                        <td class="px-6 py-6">
-                            <span class="text-sm font-bold text-slate-600 dark:text-slate-400 uppercase tracking-tight">{{ $machine->company?->name ?? __('System') }}</span>
-                        </td>
-                        <td class="px-6 py-6">
-                            <div class="flex flex-wrap gap-2">
                     @php
                         $activeFeatures = [];
                         if ($machine->tax_invoice_enabled)      $activeFeatures[] = __('Electronic Invoice');
@@ -84,11 +83,29 @@
                         if ($machine->cash_module_enabled)      $activeFeatures[] = __('Coin/Banknote Machine');
                         if ($machine->member_system_enabled)    $activeFeatures[] = __('Member System');
                     @endphp
-
+                    <tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
+                        <td class="px-6 py-6 w-1/4">
+                            <div class="flex items-center gap-x-4">
+                                <div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all">
+                                    <svg class="w-5 h-5 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" 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 class="flex flex-col">
+                                    <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">{{ $machine->name }}</span>
+                                    <span class="text-xs font-mono font-bold text-slate-500 dark:text-slate-400 tracking-widest uppercase">{{ $machine->serial_no }}</span>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-6">
+                            <span class="text-sm font-bold text-slate-600 dark:text-slate-400 uppercase tracking-tight">{{ $machine->company?->name ?? __('System') }}</span>
+                        </td>
+                        <td class="px-6 py-6">
+                            <div class="flex flex-wrap gap-2">
                                 @forelse($activeFeatures as $feature)
-                                    <span class="px-2.5 py-1 rounded-lg bg-cyan-500/10 text-cyan-500 dark:text-cyan-400 text-[13px] font-bold uppercase tracking-wider">{{ $feature }}</span>
+                                    <span class="px-2.5 py-1 rounded-lg bg-cyan-500/10 text-cyan-500 dark:text-cyan-400 text-[11px] font-bold uppercase tracking-wider">{{ $feature }}</span>
                                 @empty
-                                    <span class="px-2.5 py-1 rounded-lg bg-slate-500/10 text-slate-500 dark:text-slate-400 text-[13px] font-bold uppercase tracking-wider">{{ __('None') }}</span>
+                                    <span class="px-2.5 py-1 rounded-lg bg-slate-500/10 text-slate-500 dark:text-slate-400 text-[11px] font-bold uppercase tracking-wider">{{ __('None') }}</span>
                                 @endforelse
                             </div>
                         </td>
@@ -103,23 +120,70 @@
                         </td>
                     </tr>
                 @empty
-                    <tr>
-                        <td colspan="4" class="px-6 py-24 text-center">
-                            <div class="flex flex-col items-center">
-                                <div class="w-16 h-16 rounded-2xl bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-300 mb-4">
-                                    <svg class="w-8 h-8 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" 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>
-                                <p class="text-slate-400 font-bold">{{ __('No machines found') }}</p>
-                            </div>
-                        </td>
-                    </tr>
+                <x-empty-state mode="table" :colspan="4" :message="__('No machines found')" />
                 @endforelse
             </tbody>
         </table>
     </div>
 
+    <!-- ── Mobile / Tablet Card Grid (< xl) ── -->
+    <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-4">
+        @forelse($machines as $machine)
+        @php
+            $activeFeatures = [];
+            if ($machine->tax_invoice_enabled)      $activeFeatures[] = __('Electronic Invoice');
+            if ($machine->card_terminal_enabled)    $activeFeatures[] = __('Includes Credit Card/Mobile Pay');
+            if ($machine->scan_pay_esun_enabled)    $activeFeatures[] = __('E.SUN Bank Scan');
+            if ($machine->scan_pay_linepay_enabled) $activeFeatures[] = __('LinePay Payment');
+            if ($machine->shopping_cart_enabled)    $activeFeatures[] = __('Shopping Cart');
+            if ($machine->welcome_gift_enabled)     $activeFeatures[] = __('Welcome Gift');
+            if ($machine->cash_module_enabled)      $activeFeatures[] = __('Coin/Banknote Machine');
+            if ($machine->member_system_enabled)    $activeFeatures[] = __('Member System');
+        @endphp
+        <div class="luxury-card p-5 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+
+            {{-- Card Header --}}
+            <div class="flex items-center gap-3 mb-5">
+                <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 shadow-sm shrink-0">
+                    <svg class="w-6 h-6 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" 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 class="min-w-0 flex-1">
+                    <h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate tracking-tight">{{ $machine->name }}</h3>
+                    <p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">{{ $machine->serial_no }}</p>
+                </div>
+                <span class="text-xs font-bold text-slate-500 dark:text-slate-400 shrink-0">{{ $machine->company?->name ?? __('System') }}</span>
+            </div>
+
+            {{-- Active Features --}}
+            <div class="mb-5 border-y border-slate-100 dark:border-slate-800/50 py-4">
+                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2">{{ __('Enabled Features') }}</p>
+                <div class="flex flex-wrap gap-1.5">
+                    @forelse($activeFeatures as $feature)
+                    <span class="px-2.5 py-1 rounded-lg bg-cyan-500/10 text-cyan-500 dark:text-cyan-400 text-[10px] font-black uppercase tracking-wider">{{ $feature }}</span>
+                    @empty
+                    <span class="px-2.5 py-1 rounded-lg bg-slate-500/10 text-slate-500 dark:text-slate-400 text-[10px] font-black uppercase tracking-wider">{{ __('None') }}</span>
+                    @endforelse
+                </div>
+            </div>
+
+            {{-- Action Button --}}
+            <button type="button" @click="openMachineSettingsModal({{ json_encode($machine) }})"
+                class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" />
+                </svg>
+                {{ __('Edit Settings') }}
+            </button>
+        </div>
+        @empty
+        <div class="col-span-full">
+            <x-empty-state :message="__('No machines found')" />
+        </div>
+        @endforelse
+    </div>
+
     <!-- 3. Pagination -->
     <div class="mt-8 border-t border-slate-100 dark:border-slate-800 pt-6">
         {{ $machines->appends(['tab' => 'system_settings', 'search' => request('search'), 'company_id' => request('company_id')])->links('vendor.pagination.luxury') }}

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

@@ -507,41 +507,29 @@
 
 <div class="space-y-2 pb-20" x-data="remoteControlApp({{ Js::from($selectedMachine ? $selectedMachine->id : '') }})">
 
-    <div class="flex items-center gap-4">
-        <!-- Back Button for Detail/Control Mode -->
+    <!-- Header -->
+    <x-page-header 
+        :title="__($title ?? 'Remote Command Center')"
+        :subtitle="__($subtitle ?? 'Execute maintenance and operational commands remotely')"
+    >
+        <x-slot:back>
             <template x-if="viewMode === 'control'">
                 <button @click="backToList()"
-                class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all border border-slate-200/50 dark:border-slate-700/50 shadow-sm hover:shadow-md active:scale-95">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    class="p-2 sm:p-2.5 rounded-xl bg-white dark:bg-slate-800 text-slate-500 border border-slate-200/60 dark:border-slate-700/60 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-all active:scale-95 shrink-0">
+                    <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                     </svg>
                 </button>
             </template>
-        <div>
-            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">
-                {{ __($title ?? 'Remote Command Center') }}
-            </h1>
-            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
-                {{ __($subtitle ?? 'Execute maintenance and operational commands remotely') }}
-            </p>
-        </div>
-    </div>
+        </x-slot:back>
+    </x-page-header>
 
     <!-- Tab Navigation (Only visible when not in specific machine control) -->
     <template x-if="viewMode !== 'control'">
-        <div
-            class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50">
-            <button @click="viewMode = 'history'"
-                :class="viewMode === 'history' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-                class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
-                {{ __('Operation Records') }}
-            </button>
-            <button @click="viewMode = 'list'"
-                :class="viewMode === 'list' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-                class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
-                {{ __('New Command') }}
-            </button>
-        </div>
+        <x-tab-nav model="viewMode">
+            <x-tab-nav-item value="history" :label="__('Operation Records')" model="viewMode" />
+            <x-tab-nav-item value="list" :label="__('New Command')" model="viewMode" />
+        </x-tab-nav>
     </template>
 
     <div class="mt-6">

resources/views/admin/remote/partials/tab-history-index.blade.php

@@ -19,13 +19,13 @@
 </div>
 
         <!-- Filters Area -->
-        <div class="mb-8">
-            <form @submit.prevent="searchInTab('history')" class="flex flex-wrap items-center gap-4">
-                <!-- Search Box -->
-                <div class="relative group flex-[1.5] min-w-[200px]">
+        <div class="flex flex-wrap items-center gap-3 sm:gap-4 mb-6">
+            <form @submit.prevent="searchInTab('history')" class="contents">
+                {{-- 搜尋輸入框 --}}
+                <div class="relative group flex-1 sm:flex-none">
                     <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"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                             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>
@@ -33,11 +33,11 @@
                     </span>
                     <input type="text" name="search" value="{{ request('search') }}"
                         placeholder="{{ __('Search machines...') }}"
-                        class="luxury-input py-2.5 pl-12 pr-6 block w-full">
+                        class="luxury-input py-2.5 pl-12 pr-6 block w-full sm:w-72 text-sm font-bold">
                 </div>
 
-                <!-- Date Range -->
-                <div class="relative group flex-[2] min-w-[340px]" x-data="{ 
+                {{-- 日期範圍 --}}
+                <div class="relative group w-full sm:w-72 sm:flex-none" x-data="{ 
                     fp: null,
                     startDate: '{{ request('start_date') }}',
                     endDate: '{{ request('end_date') }}'
@@ -58,8 +58,7 @@
                         }
                     }
                  })">
-                    <span
-                        class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 text-slate-400 group-focus-within:text-cyan-500 transition-colors">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 text-slate-400 group-focus-within:text-cyan-500 transition-colors">
                         <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"
                                 d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
@@ -71,11 +70,11 @@
                     <input type="text" x-ref="dateRange"
                         value="{{ request('start_date') && request('end_date') ? request('start_date') . ' ' . __('to') . ' ' . request('end_date') : (request('start_date') ?: '') }}"
                         placeholder="{{ __('Select Date Range') }}"
-                        class="luxury-input py-2.5 pl-12 pr-6 block w-full cursor-pointer">
+                        class="luxury-input py-2.5 pl-12 pr-6 block w-full text-sm font-bold cursor-pointer">
                 </div>
 
-                <!-- Command Type -->
-                <div class="flex-[0.8] min-w-[160px]">
+                {{-- 指令類型 --}}
+                <div class="w-full sm:w-48">
                     <x-searchable-select name="command_type" :options="[
                         'reboot' => __('Machine Reboot'),
                         'reboot_card' => __('Card Reader Reboot'),
@@ -89,8 +88,8 @@
                      @change="searchInTab('history')" />
                 </div>
 
-                <!-- Status -->
-                <div class="flex-[0.8] min-w-[160px]">
+                {{-- 狀態 --}}
+                <div class="w-full sm:w-48">
                     <x-searchable-select name="status" :options="[
                         'pending' => __('Pending'),
                         'sent' => __('Sent'),
@@ -100,23 +99,23 @@
                     ]" :selected="request('status')" :placeholder="__('All Status')" :hasSearch="false" @change="searchInTab('history')" />
                 </div>
 
-                <!-- Actions -->
-                <div class="flex items-center gap-2">
-                    <button type="submit" class="p-2.5 rounded-xl bg-cyan-600 text-white hover:bg-cyan-500 shadow-lg shadow-cyan-500/20 transition-all active:scale-95">
-                        <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" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                {{-- 搜尋 + 重置按鈕 --}}
+                <div class="flex items-center gap-2 ml-auto sm:ml-0">
+                    <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95" title="{{ __('Search') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>
                     </button>
-                    <button type="button" @click="searchInTab('history', true)" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95">
-                        <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" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    <button type="button" @click="searchInTab('history', true)" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95" title="{{ __('Reset') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                         </svg>
                     </button>
                 </div>
             </form>
         </div>
         <div class="overflow-x-auto">
-            <table class="w-full text-left border-separate border-spacing-y-0 text-sm">
+            <table class="hidden xl:table w-full text-left border-separate border-spacing-y-0 text-sm">
                 <thead>
                     <tr class="bg-slate-50/50 dark:bg-slate-900/10">
                         <th
@@ -255,6 +254,96 @@
             </table>
         </div>
 
+        {{-- Mobile Card View --}}
+        <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
+            @forelse ($history as $item)
+            <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group"
+                 @click="selectMachine({{ Js::from($item->machine) }})">
+                <div class="flex items-start justify-between gap-4 mb-6">
+                    <div class="flex items-center gap-4 min-w-0">
+                        <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
+                            <template x-if="{{ Js::from(!empty($item->machine->image_urls) && isset($item->machine->image_urls[0])) }}">
+                                <img src="{{ !empty($item->machine->image_urls) ? $item->machine->image_urls[0] : '' }}" class="w-full h-full object-cover">
+                            </template>
+                            <template x-if="{{ Js::from(empty($item->machine->image_urls) || !isset($item->machine->image_urls[0])) }}">
+                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
+                                </svg>
+                            </template>
+                        </div>
+                        <div class="min-w-0 flex-1">
+                            <h3 class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 tracking-tight group-hover:text-cyan-600 transition-colors tracking-tight">{{ $item->machine->name }}</h3>
+                            <p class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">{{ $item->machine->serial_no }}</p>
+                        </div>
+                    </div>
+                    <div class="shrink-0">
+                        <div class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black border tracking-widest uppercase shadow-sm" :class="getCommandBadgeClass({{ Js::from($item->status) }})">
+                            <div class="w-1.5 h-1.5 rounded-full mr-1.5" :class="{
+                                      'bg-amber-500 animate-pulse': {{ Js::from($item->status) }} === 'pending',
+                                      'bg-cyan-500': {{ Js::from($item->status) }} === 'sent',
+                                      'bg-emerald-500': {{ Js::from($item->status) }} === 'success',
+                                      'bg-rose-500': {{ Js::from($item->status) }} === 'failed',
+                                      'bg-slate-400': {{ Js::from($item->status) }} === 'superseded'
+                                 }"></div>
+                            <span x-text="getCommandStatus({{ Js::from($item->status) }})"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
+                    <div>
+                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Command Type') }}</p>
+                        <div class="flex flex-col gap-1.5">
+                            <span class="text-sm font-bold text-slate-700 dark:text-slate-200" x-text="getCommandName({{ Js::from($item->command_type) }})"></span>
+                            <div class="flex flex-wrap gap-1">
+                                <span x-show="getPayloadDetails({{ Js::from($item) }})"
+                                    class="text-[10px] font-bold text-cyan-600 dark:text-cyan-400/80 bg-cyan-500/5 px-2 py-0.5 rounded-md border border-cyan-500/10 w-fit"
+                                    :class="{'line-through opacity-60': {{ Js::from($item->status) }} === 'failed'}"
+                                    x-text="getPayloadDetails({{ Js::from($item) }})"></span>
+                                @if($item->note)
+                                <span class="text-[10px] text-slate-400 italic" x-text="translateNote({{ Js::from($item->note) }})"></span>
+                                @endif
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Creation Time') }}</p>
+                            <div class="flex flex-col">
+                                <span class="text-sm font-bold text-slate-700 dark:text-slate-200">{{ $item->created_at->format('Y-m-d') }}</span>
+                                <span class="text-[10px] font-mono text-slate-400">{{ $item->created_at->format('H:i:s') }}</span>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Operator') }}</p>
+                            <div class="flex items-center gap-2">
+                                <div class="w-5 h-5 rounded-full bg-cyan-500/10 flex items-center justify-center text-[9px] font-black text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">
+                                    {{ mb_substr($item->user ? $item->user->name : __('System'), 0, 1) }}
+                                </div>
+                                <span class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ $item->user ? $item->user->name : __('System') }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-3">
+                    <button type="button" @click.stop="selectMachine({{ Js::from($item->machine) }})"
+                       class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-[10px] sm:text-xs tracking-widest hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
+                        <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+                        {{ __('New Command') }}
+                    </button>
+                </div>
+            </div>
+            @empty
+            <x-empty-state
+                icon="<path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'/>"
+                :title="__('No records found')"
+                :subtitle="''"
+                class="md:col-span-2"
+            />
+            @endforelse
+        </div>
+
         <!-- Pagination Area -->
         <div class="mt-8">
             {{ $history->appends(request()->query())->links('vendor.pagination.luxury') }}

resources/views/admin/remote/partials/tab-history.blade.php

@@ -1,6 +1,6 @@
 {{-- 庫存操作紀錄 Partial (AJAX 可替換) --}}
 <!-- Filters Area -->
-<div class="mb-8">
+<div class="mb-6">
     <form method="GET" action="{{ route('admin.remote.stock') }}" class="flex flex-wrap items-center gap-4" @submit.prevent="searchInTab()">
         <!-- Search Box -->
         <div class="relative group flex-[1.5] min-w-[200px]">
@@ -86,7 +86,7 @@
     </form>
 </div>
 <div class="overflow-x-auto">
-    <table class="w-full text-left border-separate border-spacing-y-0 text-sm">
+    <table class="hidden xl:table w-full text-left border-separate border-spacing-y-0 text-sm">
         <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">{{ __('Machine Information') }}</th>
@@ -185,6 +185,92 @@
             @endif
         </tbody>
     </table>
+    </table>
+</div>
+
+{{-- Mobile Card View --}}
+<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
+    @forelse ($history as $item)
+    <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group" 
+         @click="selectMachine(@js($item->machine))">
+        <div class="flex items-start justify-between gap-4 mb-6">
+            <div class="flex items-center gap-4 min-w-0">
+                <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
+                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
+                    </svg>
+                </div>
+                <div class="min-w-0 flex-1">
+                    <h3 class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 tracking-tight group-hover:text-cyan-600 transition-colors tracking-tight">{{ $item->machine->name }}</h3>
+                    <p class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">{{ $item->machine->serial_no }}</p>
+                </div>
+            </div>
+            <div class="shrink-0">
+                <div class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black border tracking-widest uppercase shadow-sm" :class="getCommandBadgeClass(@js($item->status))">
+                    <div class="w-1.5 h-1.5 rounded-full mr-1.5" :class="{
+                              'bg-amber-500 animate-pulse': @js($item->status) === 'pending',
+                              'bg-cyan-500': @js($item->status) === 'sent',
+                              'bg-emerald-500': @js($item->status) === 'success',
+                              'bg-rose-500': @js($item->status) === 'failed',
+                              'bg-slate-400': @js($item->status) === 'superseded'
+                         }"></div>
+                    <span x-text="getCommandStatus(@js($item->status))"></span>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
+            <div>
+                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Command Type') }}</p>
+                <div class="flex flex-col gap-1.5">
+                    <span class="text-sm font-bold text-slate-700 dark:text-slate-300 tracking-tight" x-text="getCommandName(@js($item->command_type))"></span>
+                    <div class="flex flex-wrap gap-1">
+                        <span x-show="getPayloadDetails(@js($item))" 
+                            class="text-[10px] font-bold text-cyan-600 dark:text-cyan-400/80 bg-cyan-500/5 px-2 py-0.5 rounded-md border border-cyan-500/10 w-fit" 
+                            :class="{'line-through opacity-60': @js($item->status) === 'failed'}"
+                            x-text="getPayloadDetails(@js($item))"></span>
+                        @if($item->note)
+                        <span class="text-[10px] text-slate-400 italic" x-text="translateNote(@js($item->note))"></span>
+                        @endif
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Creation Time') }}</p>
+                    <div class="flex flex-col">
+                        <span class="text-sm font-bold text-slate-700 dark:text-slate-200">{{ $item->created_at->format('Y-m-d') }}</span>
+                        <span class="text-[10px] font-mono text-slate-400">{{ $item->created_at->format('H:i:s') }}</span>
+                    </div>
+                </div>
+                <div>
+                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Operator') }}</p>
+                    <div class="flex items-center gap-2">
+                        <div class="w-5 h-5 rounded-full bg-cyan-500/10 flex items-center justify-center text-[9px] font-black text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">
+                            {{ mb_substr($item->user ? $item->user->name : __('System'), 0, 1) }}
+                        </div>
+                        <span class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ $item->user ? $item->user->name : __('System') }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex items-center gap-3">
+            <button type="button" @click.stop="selectMachine(@js($item->machine))"
+               class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-[10px] sm:text-xs tracking-widest hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
+                <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+                {{ __('Manage') }}
+            </button>
+        </div>
+    </div>
+    @empty
+    <x-empty-state
+        icon="<path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'/>"
+        :title="__('No records found')"
+        :subtitle="''"
+        class="md:col-span-2"
+    />
+    @endforelse
 </div>
 
 <!-- Pagination Area -->

resources/views/admin/remote/partials/tab-machines-index.blade.php

@@ -19,23 +19,44 @@
 </div>
 
         <!-- Filters Area -->
-        <div class="flex items-center justify-between mb-8">
-            <form @submit.prevent="searchInTab('list')" class="relative group">
+        <div class="flex flex-wrap items-center gap-3 sm:gap-4 mb-6">
+            {{-- 搜尋輸入框 --}}
+            <div class="relative group flex-1 sm:flex-none">
                 <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"
+                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                         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 machines...') }}"
-                    class="luxury-input py-2.5 pl-12 pr-6 block w-72">
-            </form>
+                    @keydown.enter.prevent="searchInTab('list')"
+                    class="luxury-input py-2.5 pl-12 pr-6 block w-full sm:w-72 text-sm font-bold">
+            </div>
+
+            {{-- 搜尋 + 重置按鈕 --}}
+            <div class="flex items-center gap-2 ml-auto sm:ml-0">
+                <button type="button" @click="searchInTab('list')"
+                    class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+                    title="{{ __('Search') }}">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                </button>
+
+                <button type="button" @click="searchInTab('list', true)"
+                    class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95"
+                    title="{{ __('Reset') }}">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                </button>
+            </div>
         </div>
 
         <div class="overflow-x-auto pb-4">
-            <table class="w-full text-left border-separate border-spacing-y-0 text-sm whitespace-nowrap">
+            <table class="hidden xl:table w-full text-left border-separate border-spacing-y-0 text-sm whitespace-nowrap">
                 <thead>
                     <tr class="bg-slate-50/50 dark:bg-slate-900/10">
                         <th
@@ -145,6 +166,76 @@
             </table>
         </div>
 
+        {{-- Mobile Card View --}}
+        <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
+            @foreach($machines as $machine)
+            <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group"
+                 @click="selectMachine({{ Js::from($machine) }})">
+                <div class="flex items-start justify-between gap-4 mb-6">
+                    <div class="flex items-center gap-4 min-w-0">
+                        <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
+                            @if(!empty($machine->image_urls) && isset($machine->image_urls[0]))
+                                <img src="{{ $machine->image_urls[0] }}" class="w-full h-full object-cover">
+                            @else
+                                <svg class="w-7 h-7 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
+                                </svg>
+                            @endif
+                        </div>
+                        <div class="min-w-0 flex-1">
+                            <h3 class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 tracking-tight group-hover:text-cyan-600 transition-colors tracking-tight">{{ $machine->name }}</h3>
+                            <p class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">{{ $machine->serial_no }}</p>
+                        </div>
+                    </div>
+                    <div class="shrink-0">
+                        @if($machine->status === 'online' || !$machine->status)
+                            <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
+                                <div class="relative flex h-1.5 w-1.5">
+                                    <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-1.5 w-1.5 bg-emerald-500"></span>
+                                </div>
+                                <span class="text-[9px] font-black text-emerald-600 dark:text-emerald-400 tracking-[0.1em] uppercase">{{ __('Online') }}</span>
+                            </div>
+                        @elseif($machine->status === 'offline')
+                            <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-500/10 border border-slate-500/20">
+                                <div class="h-1.5 w-1.5 rounded-full bg-slate-400"></div>
+                                <span class="text-[9px] font-black text-slate-500 dark:text-slate-400 tracking-[0.1em] uppercase">{{ __('Offline') }}</span>
+                            </div>
+                        @else
+                            <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-rose-500/10 border border-rose-500/20">
+                                <div class="relative flex h-1.5 w-1.5">
+                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
+                                    <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-rose-500"></span>
+                                </div>
+                                <span class="text-[9px] font-black text-rose-600 dark:text-rose-400 tracking-[0.1em] uppercase">{{ __('Abnormal') }}</span>
+                            </div>
+                        @endif
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-2 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
+                    <div class="col-span-2">
+                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Last Communication') }}</p>
+                        <div class="flex flex-col">
+                            <span class="text-sm font-bold text-slate-700 dark:text-slate-200 mt-0.5" x-text="formatTime({{ Js::from($machine->last_heartbeat_at) }})"></span>
+                            <span class="text-[10px] font-mono text-slate-400">
+                                {{ $machine->last_heartbeat_at ? \Illuminate\Support\Carbon::parse($machine->last_heartbeat_at)->format('Y-m-d') : '--' }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-3">
+                    <button type="button" @click.stop="selectMachine({{ Js::from($machine) }})"
+                       class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-[10px] sm:text-xs tracking-widest hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
+                        <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+                        {{ __('New Command') }}
+                    </button>
+                </div>
+            </div>
+            @endforeach
+        </div>
+
         <!-- Pagination Area -->
         <div class="mt-8">
             {{ $machines->appends(request()->query())->links('vendor.pagination.luxury') }}

resources/views/admin/remote/partials/tab-machines.blade.php

@@ -1,5 +1,5 @@
 <div class="overflow-x-auto pb-4">
-    <table class="w-full text-left border-separate border-spacing-y-0 text-sm whitespace-nowrap">
+    <table class="hidden xl:table w-full text-left border-separate border-spacing-y-0 text-sm whitespace-nowrap">
         <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">
@@ -92,16 +92,7 @@
                         </div>
                     </td>
                     <td class="px-6 py-6 text-right">
-                        <div class="flex justify-end gap-2">
-                            <a href="{{ route('admin.warehouses.machine-inventory', ['machine_id' => $machine->id]) }}"
-                                @click.stop
-                                class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all border border-transparent hover:border-emerald-500/20"
-                                title="{{ __('View Overview') }}">
-                                <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="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                                </svg>
-                            </a>
+                        <div class="flex justify-end">
                             <button @click.stop="selectMachine({{ Js::from($machine) }})"
                                 class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20"
                                 title="{{ __('Manage') }}">
@@ -130,6 +121,103 @@
     </table>
 </div>
 
+{{-- Mobile Card View --}}
+<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
+    @forelse($machines as $machine)
+    <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group" 
+         @click="selectMachine({{ Js::from($machine) }})">
+        <div class="flex items-start justify-between gap-4 mb-6">
+            <div class="flex items-center gap-4 min-w-0">
+                <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
+                    @if($machine->image_urls && isset($machine->image_urls[0]))
+                        <img src="{{ $machine->image_urls[0] }}" class="w-full h-full object-cover">
+                    @else
+                        <svg class="w-7 h-7 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
+                        </svg>
+                    @endif
+                </div>
+                <div class="min-w-0 flex-1">
+                    <h3 class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 tracking-tight group-hover:text-cyan-600 transition-colors tracking-tight">{{ $machine->name }}</h3>
+                    <p class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">{{ $machine->serial_no }}</p>
+                </div>
+            </div>
+            <div class="shrink-0">
+                @if($machine->status === 'online' || !$machine->status)
+                    <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
+                        <div class="relative flex h-1.5 w-1.5">
+                            <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-1.5 w-1.5 bg-emerald-500"></span>
+                        </div>
+                        <span class="text-[9px] font-black text-emerald-600 dark:text-emerald-400 tracking-[0.1em] uppercase">{{ __('Online') }}</span>
+                    </div>
+                @elseif($machine->status === 'offline')
+                    <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-500/10 border border-slate-500/20">
+                        <div class="h-1.5 w-1.5 rounded-full bg-slate-400"></div>
+                        <span class="text-[9px] font-black text-slate-500 dark:text-slate-400 tracking-[0.1em] uppercase">{{ __('Offline') }}</span>
+                    </div>
+                @else
+                    <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-rose-500/10 border border-rose-500/20">
+                        <div class="relative flex h-1.5 w-1.5">
+                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
+                            <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-rose-500"></span>
+                        </div>
+                        <span class="text-[9px] font-black text-rose-600 dark:text-rose-400 tracking-[0.1em] uppercase">{{ __('Abnormal') }}</span>
+                    </div>
+                @endif
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
+            <div>
+                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">{{ __('Inventory Status') }}</p>
+                <div class="flex flex-wrap gap-2">
+                    @if($machine->low_stock_count > 0)
+                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-rose-500/10 text-rose-500 text-[10px] font-black border border-rose-500/20 uppercase tracking-widest leading-none shadow-sm shadow-rose-500/5">
+                            <span class="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></span>
+                            {{ $machine->low_stock_count }}&nbsp;{{ __('Low') }}
+                        </span>
+                    @endif
+                    @if($machine->expiring_soon_count > 0)
+                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-amber-500/10 text-amber-500 text-[10px] font-black border border-amber-500/20 uppercase tracking-widest leading-none shadow-sm shadow-amber-500/5">
+                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
+                            {{ $machine->expiring_soon_count }}&nbsp;{{ __('Expiring') }}
+                        </span>
+                    @endif
+                    @if(!$machine->low_stock_count && !$machine->expiring_soon_count)
+                        <span class="text-[10px] font-bold text-slate-400 dark:text-slate-600 uppercase tracking-[0.1em] border border-slate-200/50 dark:border-slate-800 rounded-lg px-2.5 py-1">{{ __('Inventory Stable') }}</span>
+                    @endif
+                </div>
+            </div>
+            <div>
+                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Last Sync') }}</p>
+                <div class="flex flex-col">
+                    <span class="text-sm font-bold text-slate-700 dark:text-slate-200 mt-0.5" x-text="formatTime({{ Js::from($machine->last_heartbeat_at) }})"></span>
+                    <span class="text-[10px] font-mono text-slate-400">
+                        {{ $machine->last_heartbeat_at ? \Illuminate\Support\Carbon::parse($machine->last_heartbeat_at)->format('Y-m-d') : '--' }}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex items-center gap-3">
+            <button type="button" @click.stop="selectMachine({{ Js::from($machine) }})"
+               class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 font-black text-[10px] sm:text-xs tracking-widest hover:bg-cyan-500/20 transition-all duration-300 border border-cyan-500/20 shadow-sm">
+                <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+                {{ __('Manage') }}
+            </button>
+        </div>
+    </div>
+    @empty
+    <x-empty-state
+        icon="<path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'/>"
+        :title="__('No machines found')"
+        :subtitle="''"
+        class="md:col-span-2"
+    />
+    @endforelse
+</div>
+
 {{-- 標準化分頁底欄 --}}
 <div class="mt-8">
     {{ $machines->appends(request()->except('machine_page'))->links('vendor.pagination.luxury') }}

resources/views/admin/remote/stock.blade.php

@@ -351,41 +351,29 @@
 <div class="space-y-2 pb-20" x-data="stockApp('{{ $selectedMachine ? $selectedMachine->id : '' }}')"
     @keydown.escape.window="showEditModal = false">
 
-    <div class="flex items-center gap-4">
-        <!-- Back Button for Detail Mode -->
+    <!-- Header -->
+    <x-page-header 
+        :title="__($title ?? 'Stock & Expiry Management')"
+        :subtitle="__($subtitle ?? 'Manage inventory and monitor expiry dates across all machines')"
+    >
+        <x-slot:back>
             <template x-if="viewMode === 'detail'">
                 <button @click="backToList()"
-                class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all border border-slate-200/50 dark:border-slate-700/50 shadow-sm hover:shadow-md active:scale-95">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    class="p-2 sm:p-2.5 rounded-xl bg-white dark:bg-slate-800 text-slate-500 border border-slate-200/60 dark:border-slate-700/60 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-all active:scale-95 shrink-0">
+                    <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                     </svg>
                 </button>
             </template>
-        <div>
-            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">
-                {{ __($title ?? 'Stock & Expiry Management') }}
-            </h1>
-            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
-                {{ __($subtitle ?? 'Manage inventory and monitor expiry dates across all machines') }}
-            </p>
-        </div>
-    </div>
+        </x-slot:back>
+    </x-page-header>
 
     <!-- Tab Navigation (Only visible when not in specific machine detail) -->
     <template x-if="viewMode !== 'detail'">
-        <div
-            class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50">
-            <button @click="viewMode = 'history'"
-                :class="viewMode === 'history' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-                class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
-                {{ __('Operation Records') }}
-            </button>
-            <button @click="viewMode = 'list'"
-                :class="viewMode === 'list' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-                class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
-                {{ __('Adjust Stock & Expiry') }}
-            </button>
-        </div>
+        <x-tab-nav model="viewMode">
+            <x-tab-nav-item value="history" :label="__('Operation Records')" model="viewMode" />
+            <x-tab-nav-item value="list"    :label="__('Adjust Stock & Expiry')" model="viewMode" />
+        </x-tab-nav>
     </template>
 
     <div class="mt-6">

resources/views/admin/sales/pass-codes/index.blade.php

@@ -6,15 +6,36 @@
     showDeleteModal: false,
     deleteTargetForm: '',
     selectedMachine: '',
-    name: '',
+    passCodeName: '',
     expiresDays: 7,
     customCode: '',
     isLoadingTable: false,
+    status: '{{ request('status', '') }}',
+    showQrModal: false,
+    activeQrCode: '',
+    activeTicketUrl: '',
 
     generateRandomCode() {
         this.customCode = Math.floor(Math.random() * 90000000 + 10000000).toString();
     },
 
+    calculateExpiry() {
+        if (!this.expiresDays || parseInt(this.expiresDays) <= 0) {
+            return '{{ __('Permanent') }}';
+        }
+        const date = new Date();
+        const days = parseInt(this.expiresDays) || 0;
+        date.setDate(date.getDate() + days);
+        return date.toLocaleString('zh-TW', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+        }).replace(/\//g, '-');
+    },
+
     async fetchPage(url) {
         if (!url || this.isLoadingTable) return;
         this.isLoadingTable = true;
@@ -46,13 +67,80 @@
             if (form) form.submit();
         }
         this.showDeleteModal = false;
+    },
+
+    syncSelect(id, value) {
+        this.$nextTick(() => {
+            const el = document.getElementById(id);
+            if (el) {
+                const valStr = (value !== undefined && value !== null && value.toString().trim() !== '') ? value.toString() : ' ';
+                el.value = valStr;
+                if (window.HSSelect) {
+                    const inst = window.HSSelect.getInstance(el);
+                    if (inst) inst.setValue(valStr);
                 }
-}">
+            }
+        });
+    },
+
+    validateAndSubmit(e) {
+        if (!this.selectedMachine) {
+            window.showToast('{{ __('Please select a machine') }}', 'error');
+            return;
+        }
+        if (!this.passCodeName.trim()) {
+            window.showToast('{{ __('Please enter a description') }}', 'error');
+            return;
+        }
+        if (!this.customCode.trim()) {
+            window.showToast('{{ __('Please enter or generate a pass code') }}', 'error');
+            return;
+        }
+        e.target.submit();
+    },
+
+    copyQrCode() {
+        if (!this.activeQrCode) return;
+        navigator.clipboard.writeText(this.activeQrCode).then(() => {
+            window.showToast('{{ __('Code Copied') }}', 'success');
+        });
+    },
+
+    copyQrLink() {
+        if (!this.activeTicketUrl) return;
+        navigator.clipboard.writeText(this.activeTicketUrl).then(() => {
+            window.showToast('{{ __('Link Copied') }}', 'success');
+        });
+    },
+
+    async downloadQrCode() {
+        const url = '{{ route('admin.basic-settings.qr-code') }}?size=500&data=' + encodeURIComponent(this.activeQrCode);
+        fetch(url)
+            .then(response => response.blob())
+            .then(blob => {
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = `pass-code-${this.activeQrCode}.png`;
+                link.click();
+                URL.revokeObjectURL(link.href);
+            });
+    },
+
+    init() {
+        this.$watch('showCreateModal', (val) => {
+            if (val) {
+                this.selectedMachine = '';
+                this.passCodeName = '';
+                this.expiresDays = 7;
+                this.generateRandomCode();
+                this.syncSelect('modal-pass-machine', '');
+            }
+        });
+    }
+} ">
     {{-- Page Header --}}
-    <x-page-header
-        :title="__('Pass Codes')"
-        :subtitle="__('Manage multi-use authorization codes for testing and maintenance')"
-    >
+    <x-page-header :title="__('Pass Codes')"
+        :subtitle="__('Manage multi-use authorization codes for testing and maintenance')">
         <button @click="showCreateModal = true; generateRandomCode()" class="btn-luxury-primary">
             <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" />
@@ -73,21 +161,47 @@
 
                 <div class="relative group flex-1 md:flex-none">
                     <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"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                        <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">
+                            <circle cx="11" cy="11" r="8" />
+                            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                        </svg>
                     </span>
                     <input type="text" name="search" value="{{ request('search') }}"
                         class="py-2.5 pl-12 pr-6 block w-full md:w-80 luxury-input"
                         placeholder="{{ __('Search by code, name or machine...') }}">
                 </div>
 
+                <div class="w-full md:w-48">
+                    <x-searchable-select name="status" id="filter-status" :placeholder="__('All Status')"
+                        x-model="status"
+                        @change="$el.closest('form').dispatchEvent(new Event('submit'))">
+                        <option value="active" {{ request('status')==='active' ? 'selected' : '' }}
+                            data-title="{{ __('Active') }}">{{ __('Active') }}</option>
+                        <option value="expired" {{ request('status')==='expired' ? 'selected' : '' }}
+                            data-title="{{ __('Expired') }}">{{ __('Expired') }}</option>
+                        <option value="disabled" {{ request('status')==='disabled' ? 'selected' : '' }}
+                            data-title="{{ __('Cancelled') }}">{{ __('Cancelled') }}</option>
+                    </x-searchable-select>
+                </div>
+
                 <div class="flex items-center gap-2 ml-auto md:ml-0 shrink-0">
-                    <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all" title="{{ __('Search') }}">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                    <button type="submit"
+                        class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all"
+                        title="{{ __('Search') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
                     </button>
                     <button type="button"
-                        @click="$el.closest('form').querySelector('input[name=search]').value=''; $el.closest('form').dispatchEvent(new Event('submit'))"
-                        class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all" title="{{ __('Reset') }}">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                        @click="$el.closest('form').querySelector('input[name=search]').value=''; status = ''; syncSelect('filter-status', ''); $el.closest('form').dispatchEvent(new Event('submit'))"
+                        class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all"
+                        title="{{ __('Reset') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
                     </button>
                 </div>
             </form>
@@ -97,59 +211,104 @@
                 <table class="w-full text-left border-separate border-spacing-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">
+                            <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">
                                 {{ __('Pass Code') }}
                             </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">
+                            <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">
                                 {{ __('Name / 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">
+                            <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">
                                 {{ __('Expires At') }}
                             </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">
+                            <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">
                                 {{ __('Status') }}
                             </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">
+                            <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-100 dark:divide-slate-800/80">
                         @forelse ($passCodes as $code)
-                            <tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
+                        <tr
+                            class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
                             <td class="px-6 py-6 whitespace-nowrap">
-                                    <span class="text-lg font-black font-mono text-slate-700 dark:text-slate-200 tracking-widest bg-white dark:bg-slate-900 px-4 py-1.5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm group-hover:border-cyan-500/50 transition-colors">
+                                @if($code->status === 'active' && (!$code->expires_at || $code->expires_at->isFuture()))
+                                <span
+                                    @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true"
+                                    class="text-lg font-black font-mono text-cyan-600 dark:text-cyan-400 tracking-widest bg-cyan-50 dark:bg-cyan-500/10 px-4 py-1.5 rounded-xl border border-cyan-100 dark:border-cyan-500/20 shadow-sm cursor-pointer hover:bg-cyan-100 dark:hover:bg-cyan-500/20 transition-all">
                                     {{ $code->code }}
                                 </span>
+                                @else
+                                <span
+                                    class="text-lg font-black font-mono text-slate-400 dark:text-slate-600 tracking-widest bg-slate-50 dark:bg-slate-900/50 px-4 py-1.5 rounded-xl border border-slate-100 dark:border-slate-800/50 shadow-sm">
+                                    {{ $code->code }}
+                                </span>
+                                @endif
                             </td>
                             <td class="px-6 py-6">
-                                    <div class="text-base font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">{{ $code->name }}</div>
-                                    <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ $code->machine->name }}</div>
+                                <div class="text-base font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">
+                                    {{ $code->name }}</div>
+                                <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{
+                                    $code->machine->name }}</div>
                             </td>
                             <td class="px-6 py-6 whitespace-nowrap">
                                 @if($code->expires_at)
-                                        <div class="text-sm font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest">{{ $code->expires_at->format('Y-m-d H:i') }}</div>
-                                        <div class="text-xs font-bold {{ $code->expires_at->isPast() ? 'text-rose-500' : 'text-slate-400' }} mt-0.5">
-                                            {{ $code->expires_at->isPast() ? __('Expired') : $code->expires_at->diffForHumans() }}
+                                <div
+                                    class="text-sm font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest">
+                                    {{ $code->expires_at->format('Y-m-d H:i') }}</div>
+                                <div
+                                    class="text-xs font-bold {{ $code->expires_at->isPast() ? 'text-rose-500' : 'text-slate-400' }} mt-0.5">
+                                    {{ $code->expires_at->isPast() ? __('Expired') : $code->expires_at->diffForHumans()
+                                    }}
                                 </div>
                                 @else
-                                        <span class="text-xs font-black uppercase tracking-widest text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded-lg border border-emerald-500/20">{{ __('Permanent') }}</span>
+                                <span
+                                    class="text-xs font-black uppercase tracking-widest text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded-lg border border-emerald-500/20">{{
+                                    __('Permanent') }}</span>
                                 @endif
                             </td>
                             <td class="px-6 py-6 whitespace-nowrap">
-                                    <x-status-badge :status="$code->isValid() ? 'active' : 'disabled'" />
+                                @php
+                                $displayStatus = $code->status === 'active' && $code->expires_at?->isPast() ? 'expired' : $code->status;
+                                @endphp
+                                <x-status-badge :status="$displayStatus" />
                             </td>
                             <td class="px-6 py-6 whitespace-nowrap text-right">
                                 <div class="flex items-center justify-end gap-2">
-                                        <form id="delete-form-desktop-{{ $code->id }}" action="{{ route('admin.sales.pass-codes.destroy', $code) }}" method="POST">
+                                    @if($code->status === 'active' && (!$code->expires_at || $code->expires_at->isFuture()))
+                                    <button type="button"
+                                        @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true"
+                                        class="p-2.5 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all duration-300 border border-slate-100 dark:border-slate-800"
+                                        title="{{ __('View QR') }}">
+                                        <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>
+                                    @endif
+
+                                    @if($code->status === 'active')
+                                    <form id="delete-form-desktop-{{ $code->id }}"
+                                        action="{{ route('admin.sales.pass-codes.destroy', $code) }}" method="POST">
                                         @csrf
                                         @method('DELETE')
-                                            <button type="button" @click="confirmDelete('delete-form-desktop-{{ $code->id }}')" class="p-2 text-rose-500 hover:bg-rose-500/10 rounded-xl transition-all duration-200" title="{{ __('Delete Code') }}">
-                                                <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" 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 1v2m3 4h.01" />
+                                        <button type="button"
+                                            @click="confirmDelete('delete-form-desktop-{{ $code->id }}')"
+                                            class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20"
+                                            title="{{ __('Cancel 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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-3.38a2.25 2.25 0 00-2.25-2.25h-3.51a2.25 2.25 0 00-2.25 2.25v3.38" />
                                             </svg>
                                         </button>
                                     </form>
+                                    @endif
                                 </div>
                             </td>
                         </tr>
@@ -163,35 +322,57 @@
             {{-- Card Grid (Mobile) --}}
             <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
                 @forelse ($passCodes as $code)
-                    <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+                <div
+                    class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
                     {{-- Card Header --}}
                     <div class="flex items-start justify-between gap-4 mb-6">
                         <div class="flex items-center gap-4 min-w-0">
-                                <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
+                            <div
+                                class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
                                 <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                                 </svg>
                             </div>
                             <div class="min-w-0">
-                                    <h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors tracking-tight">
+                                @if($code->status === 'active' && (!$code->expires_at || $code->expires_at->isFuture()))
+                                <h3 @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true"
+                                    class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors tracking-tight cursor-pointer">
                                     {{ $code->code }}
                                 </h3>
-                                    <p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">
+                                @else
+                                <h3
+                                    class="text-base font-extrabold text-slate-400 dark:text-slate-600 truncate tracking-tight">
+                                    {{ $code->code }}
+                                </h3>
+                                @endif
+                                <p
+                                    class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">
                                     {{ $code->name }}
                                 </p>
                             </div>
                         </div>
-                            <x-status-badge :status="$code->isValid() ? 'active' : 'disabled'" size="sm" />
+                        <div class="min-w-0">
+                                @php
+                                $displayStatusMobile = $code->status === 'active' && $code->expires_at?->isPast() ? 'expired' : $code->status;
+                                @endphp
+                                <x-status-badge :status="$displayStatusMobile" size="sm" />
+                            </div>
                     </div>
 
                     {{-- Info Grid --}}
                     <div class="grid grid-cols-2 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
                         <div>
-                                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Machine') }}</p>
-                                <p class="text-sm font-bold text-slate-700 dark:text-slate-300 truncate">{{ $code->machine->name }}</p>
+                            <p
+                                class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                                {{ __('Machine') }}</p>
+                            <p class="text-sm font-bold text-slate-700 dark:text-slate-300 truncate">{{
+                                $code->machine->name }}</p>
                         </div>
                         <div>
-                                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Expires At') }}</p>
+                            <p
+                                class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                                {{ __('Expires At') }}</p>
                             <p class="text-sm font-bold text-slate-700 dark:text-slate-300 font-mono tracking-tighter">
                                 {{ $code->expires_at ? $code->expires_at->format('Y-m-d H:i') : __('Permanent') }}
                             </p>
@@ -199,17 +380,35 @@
                     </div>
 
                     {{-- Action Buttons --}}
-                        <div class="flex items-center gap-3">
-                            <form id="delete-form-mobile-{{ $code->id }}" action="{{ route('admin.sales.pass-codes.destroy', $code) }}" method="POST" class="flex-1">
+                    <div class="mt-6 pt-6 border-t border-slate-100 dark:border-slate-800 flex gap-3">
+                        @if($code->status === 'active' && (!$code->expires_at || $code->expires_at->isFuture()))
+                        <button type="button"
+                            @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true"
+                            class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-xs uppercase tracking-widest border border-slate-100 dark:border-slate-800 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all duration-300">
+                            <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>
+                            {{ __('QR Code') }}
+                        </button>
+                        @endif
+
+                        @if($code->status === 'active')
+                        <form id="delete-form-mobile-{{ $code->id }}"
+                            action="{{ route('admin.sales.pass-codes.destroy', $code) }}" method="POST"
+                            class="flex-1">
                             @csrf
                             @method('DELETE')
-                                <button type="button" @click="confirmDelete('delete-form-mobile-{{ $code->id }}')" class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-rose-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
-                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 1v2m3 4h.01" />
+                            <button type="button" @click="confirmDelete('delete-form-mobile-{{ $code->id }}')"
+                                class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-rose-500/5 text-rose-500 text-xs font-black uppercase tracking-widest border border-rose-500/20 hover:bg-rose-500 hover:text-white transition-all duration-300">
+                                <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-3.38a2.25 2.25 0 00-2.25-2.25h-3.51a2.25 2.25 0 00-2.25 2.25v3.38" />
                                 </svg>
-                                    {{ __('Delete') }}
+                                {{ __('Cancel') }}
                             </button>
                         </form>
+                        @endif
                     </div>
                 </div>
                 @empty
@@ -227,67 +426,123 @@
     </div>
 
     {{-- Create Modal --}}
-    <div x-show="showCreateModal" 
-        class="fixed inset-0 z-50 overflow-y-auto" 
-        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>
+    <div x-show="showCreateModal" class="fixed inset-0 z-50 overflow-y-auto"
+        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>
         <div class="flex items-center justify-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showCreateModal = false"></div>
+            <div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm"
+                @click="showCreateModal = false"></div>
 
-            <div x-show="showCreateModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
+            <div x-show="showCreateModal" x-transition:enter="ease-out duration-300"
+                x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95"
+                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 sm:scale-100"
+                x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
                 class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-3xl dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full overflow-visible">
                 <div class="flex justify-between items-center mb-8">
-                    <h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Add Pass Code') }}</h3>
-                    <button @click="showCreateModal = false" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 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.5" d="M6 18L18 6M6 6l12 12"/></svg>
+                    <h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{
+                        __('Add Pass Code') }}</h3>
+                    <button @click="showCreateModal = false"
+                        class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 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.5"
+                                d="M6 18L18 6M6 6l12 12" />
+                        </svg>
                     </button>
                 </div>
 
-                <form action="{{ route('admin.sales.pass-codes.store') }}" method="POST" class="space-y-6">
+                <form action="{{ route('admin.sales.pass-codes.store') }}" method="POST" class="space-y-6" @submit.prevent="validateAndSubmit">
                     @csrf
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="space-y-2">
-                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Target Machine') }}</label>
-                            <select name="machine_id" x-model="selectedMachine" class="luxury-input w-full" required>
-                                <option value="">{{ __('Please select a machine') }}</option>
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
+                                {{ __('Target Machine') }} <span class="text-rose-500">*</span>
+                            </label>
+                            <x-searchable-select name="machine_id" id="modal-pass-machine"
+                                :placeholder="__('Please select a machine')" x-model="selectedMachine"
+                                @change="selectedMachine = $event.target.value">
                                 @foreach($machines as $machine)
-                                    <option value="{{ $machine->id }}">{{ $machine->name }} ({{ $machine->serial_no }})</option>
+                                <option value="{{ $machine->id }}"
+                                    data-title="{{ $machine->name }} ({{ $machine->serial_no }})">{{ $machine->name }}
+                                    ({{ $machine->serial_no }})</option>
                                 @endforeach
-                            </select>
+                            </x-searchable-select>
                         </div>
                         <div class="space-y-2">
-                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Description / Name') }}</label>
-                            <input type="text" name="name" x-model="name" class="luxury-input w-full" placeholder="{{ __('e.g. Test Code for Maintenance') }}" required>
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
+                                {{ __('Description / Name') }} <span class="text-rose-500">*</span>
+                            </label>
+                            <input type="text" name="name" x-model="passCodeName" class="luxury-input w-full"
+                                placeholder="{{ __('e.g. Test Code for Maintenance') }}">
                         </div>
                     </div>
 
                     <div class="space-y-2">
                         <div class="flex items-center justify-between mb-1">
-                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Pass Code (8 Digits)') }}</label>
-                            <button type="button" @click="generateRandomCode()" class="text-[10px] font-black text-cyan-500 hover:text-cyan-600 uppercase tracking-widest flex items-center gap-1 transition-colors">
-                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
+                                {{ __('Pass Code (8 Digits)') }} <span class="text-rose-500">*</span>
+                            </label>
+                            <button type="button" @click="generateRandomCode()"
+                                class="text-[10px] font-black text-cyan-500 hover:text-cyan-600 uppercase tracking-widest flex items-center gap-1 transition-colors">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
+                                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                                </svg>
                                 {{ __('Regenerate') }}
                             </button>
                         </div>
-                        <input type="text" name="custom_code" x-model="customCode" class="luxury-input w-full py-4 font-mono text-2xl tracking-[0.3em] text-center text-cyan-600 dark:text-cyan-400 bg-cyan-50/30 dark:bg-cyan-500/5" maxlength="12" required>
+                        <input type="text" name="custom_code" x-model="customCode"
+                            class="luxury-input w-full py-4 font-mono text-2xl tracking-[0.3em] text-center text-cyan-600 dark:text-cyan-400 bg-cyan-50/30 dark:bg-cyan-500/5"
+                            maxlength="12" required>
                     </div>
 
-                    <div class="space-y-2">
+                    <div class="space-y-4">
                         <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Validity Period (Days)') }}</label>
-                        <div class="relative">
-                            <input type="number" name="expires_days" x-model="expiresDays" class="luxury-input w-full pr-16" min="1" placeholder="{{ __('Permanent') }}">
-                            <div class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400 uppercase tracking-widest pointer-events-none">{{ __('Days') }}</div>
+                        
+                        <div class="bg-slate-50 dark:bg-slate-800/40 rounded-[2rem] p-6 border border-slate-100 dark:border-slate-800/50 shadow-sm">
+                            <div class="flex items-center gap-6 mb-6">
+                                <button type="button" @click="expiresDays = Math.max(0, parseInt(expiresDays || 0) - 1)"
+                                    class="shrink-0 w-12 h-12 rounded-xl bg-white dark:bg-slate-800 flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:shadow-lg active:scale-90 transition-all border border-slate-100 dark:border-slate-800">
+                                    <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="M20 12H4" />
+                                    </svg>
+                                </button>
+                                <div class="flex-1 relative">
+                                    <input type="number" name="expires_days" x-model="expiresDays"
+                                        class="w-full bg-transparent border-none text-center font-black text-3xl text-slate-800 dark:text-white focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                                        placeholder="{{ __('Permanent') }}">
+                                    <div class="text-center mt-1 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">{{ __('Days') }}</div>
+                                </div>
+                                <button type="button" @click="expiresDays = parseInt(expiresDays || 0) + 1"
+                                    class="shrink-0 w-12 h-12 rounded-xl bg-white dark:bg-slate-800 flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:shadow-lg active:scale-90 transition-all border border-slate-100 dark:border-slate-800">
+                                    <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="M12 4v16m8-8H4" />
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <div class="pt-6 border-t border-slate-100 dark:border-slate-800/50">
+                                <div class="flex items-center justify-between mb-3 px-1">
+                                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('Estimated Expiry') }}</span>
+                                    <template x-if="!expiresDays || expiresDays <= 0">
+                                        <span class="text-[10px] font-black text-emerald-500 uppercase tracking-widest px-2 py-0.5 bg-emerald-500/10 rounded-lg border border-emerald-500/20">{{ __('Permanent Code') }}</span>
+                                    </template>
+                                </div>
+                                <div class="bg-white dark:bg-slate-900/50 rounded-2xl p-4 border border-slate-100 dark:border-slate-700/50 flex items-center justify-center gap-3">
+                                    <svg class="w-5 h-5 text-cyan-500/50 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                    <span class="text-xl font-mono font-black text-slate-700 dark:text-slate-200 tracking-wider" x-text="calculateExpiry()"></span>
+                                </div>
+                                <p class="text-center mt-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Leave empty or 0 for permanent code') }}</p>
+                            </div>
                         </div>
-                        <p class="text-[10px] font-bold text-slate-400 mt-1 uppercase tracking-widest">{{ __('Leave empty for permanent code') }}</p>
                     </div>
 
                     <div class="flex justify-end gap-x-4 pt-8">
-                        <button type="button" @click="showCreateModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
+                        <button type="button" @click="showCreateModal = false" class="btn-luxury-ghost px-8">{{
+                            __('Cancel') }}</button>
                         <button type="submit" class="btn-luxury-primary px-12">
                             {{ __('Create') }}
                         </button>
@@ -297,15 +552,109 @@
         </div>
     </div>
 
-    {{-- Confirm Delete Modal --}}
-    <x-confirm-modal
-        alpineVar="showDeleteModal"
-        :title="__('Delete Pass Code')"
-        :message="__('Are you sure you want to delete this pass code?')"
-        :confirmText="__('Yes, Delete')"
-        confirmAction="submitDelete()"
-        confirmColor="rose"
-        iconType="danger"
-    />
+    {{-- Confirm Cancel Modal --}}
+    <x-confirm-modal alpineVar="showDeleteModal" :title="__('Cancel Pass Code')"
+        :message="__('Are you sure you want to cancel this pass code? This action cannot be undone.')" :confirmText="__('Yes, Cancel')"
+        confirmAction="submitDelete()" confirmColor="rose" iconType="danger" />
+
+    {{-- QR Code Modal --}}
+    <div x-show="showQrModal" class="fixed inset-0 z-[60] overflow-y-auto"
+        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>
+        <div class="flex items-center justify-center min-h-screen px-4">
+            <div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showQrModal = false">
+            </div>
+
+            <div x-show="showQrModal" x-transition:enter="ease-out duration-300"
+                x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95"
+                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
+                x-transition:leave-start="opacity-100 sm:scale-100"
+                x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
+                class="inline-block w-full max-w-sm transition-all transform luxury-card rounded-[2.5rem] bg-white dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl overflow-hidden">
+                
+                <div class="p-8 pb-0 flex justify-between items-start">
+                    <div>
+                        <h3 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Pass Code QR') }}</h3>
+                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mt-1" x-text="activeQrCode"></p>
+                    </div>
+                    <button @click="showQrModal = false"
+                        class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 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.5"
+                                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">
+                        <x-qr-code data="activeQrCode" size="200" class="w-48 h-48" />
+                    </div>
+
+                    <div class="text-center w-full space-y-4">
+                        <p class="text-xs font-bold text-slate-500 dark:text-slate-400 leading-relaxed px-4">
+                            {{ __('Scan this code at the machine to authorize testing or maintenance.') }}
+                        </p>
+
+                        <div class="flex items-center justify-center gap-3">
+                            {{-- Copy Link Button --}}
+                            <button @click="copyQrLink()"
+                                class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-slate-100 dark:border-slate-700 hover:border-cyan-500/20 transition-all flex items-center justify-center gap-2 group"
+                                title="{{ __('Copy Link') }}">
+                                <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="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+                                </svg>
+                                <span class="text-xs font-black uppercase tracking-widest">{{ __('Link') }}</span>
+                            </button>
+
+                            {{-- Copy Code Button --}}
+                            <button @click="copyQrCode()"
+                                class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-slate-100 dark:border-slate-700 hover:border-cyan-500/20 transition-all flex items-center justify-center gap-2 group"
+                                title="{{ __('Copy 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                                </svg>
+                                <span class="text-xs font-black uppercase tracking-widest">{{ __('Copy') }}</span>
+                            </button>
+
+                            {{-- Download Image Button --}}
+                            <button @click="downloadQrCode()"
+                                class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-emerald-500 hover:bg-emerald-500/5 dark:hover:bg-emerald-500/10 border border-slate-100 dark:border-slate-700 hover:border-emerald-500/20 transition-all flex items-center justify-center gap-2 group"
+                                title="{{ __('Download Image') }}">
+                                <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 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M7.5 12l4.5 4.5m0 0l4.5-4.5M12 3v13.5" />
+                                </svg>
+                                <span class="text-xs font-black uppercase tracking-widest">{{ __('Save') }}</span>
+                            </button>
+                        </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="showQrModal = false" class="btn-luxury-primary w-full py-4 rounded-2xl">{{ __('Close') }}</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 @endsection
+
+@push('styles')
+<style>
+    /* 移除 Chrome, Safari, Edge, Opera 的原生加減按鈕 */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        appearance: none;
+        margin: 0;
+    }
+
+    /* 移除 Firefox 的原生加減按鈕 */
+    input[type=number] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+</style>
+@endpush

resources/views/admin/sales/pickup-codes/index.blade.php

@@ -1,19 +1,31 @@
 @extends('layouts.admin')
 
 @php
-    $slotSelectConfig = [
-        "placeholder" => __("Select Slot"),
-        "hasSearch" => true,
-        "searchPlaceholder" => __("Search Slot..."),
-        "isHidePlaceholder" => false,
+$slotSelectConfig = [
+"placeholder" => __("Select Slot"),
+"hasSearch" => true,
+"searchPlaceholder" => __("Search Slot..."),
+"isHidePlaceholder" => false,
     "searchClasses" => "block w-[calc(100%-16px)] mx-2 py-2 px-3 text-sm border-slate-200 dark:border-white/10 rounded-lg focus:border-cyan-500 focus:ring-cyan-500 bg-slate-50 dark:bg-slate-900/50 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-500",
     "searchWrapperClasses" => "sticky top-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md p-2 z-10",
-        "toggleClasses" => "hs-select-toggle luxury-select-toggle",
-        "toggleTemplate" => '<button type="button" aria-expanded="false"><span class="me-2" data-icon></span><span class="text-slate-800 dark:text-slate-200" data-title></span><div class="ms-auto"><svg class="size-4 text-slate-400 transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></div></button>',
+"toggleClasses" => "hs-select-toggle luxury-select-toggle",
+"toggleTemplate" => '<button type="button" aria-expanded="false"><span class="me-2" data-icon></span><span
+        class="text-slate-800 dark:text-slate-200" data-title></span>
+    <div class="ms-auto"><svg class="size-4 text-slate-400 transition-transform duration-300"
+            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m6 9 6 6 6-6" />
+        </svg></div>
+</button>',
     "dropdownClasses" => "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[150] animate-luxury-in",
     "optionClasses" => "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
-        "optionTemplate" => '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
-    ];
+"optionTemplate" => '<div class="flex items-center justify-between w-full"><span data-title></span><span
+        class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+            stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12"></polyline>
+        </svg></span></div>'
+];
 @endphp
 
 @section('content')
@@ -22,11 +34,10 @@
 
 
     {{-- Page Header --}}
-    <x-page-header
-        :title="__('Pickup Codes')"
-        :subtitle="__('Generate and manage one-time pickup codes for customers')"
-    >
-        <button @click="showCreateModal = true" class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
+    <x-page-header :title="__('Pickup Codes')"
+        :subtitle="__('Generate and manage one-time pickup codes for customers')">
+        <button @click="showCreateModal = true"
+            class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
             <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="M12 5v14M5 12h14" />
             </svg>
@@ -62,25 +73,36 @@
                 </div>
 
                 <div class="w-full md:w-48">
-                    <x-searchable-select name="status" id="filter-status" :placeholder="__('All Status')" :selected="request('status')" :hasSearch="false" @change="$el.closest('form').dispatchEvent(new Event('submit'))">
-                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }} data-title="{{ __('Active') }}">{{ __('Active') }}</option>
-                        <option value="used" {{ request('status') === 'used' ? 'selected' : '' }} data-title="{{ __('Used') }}">{{ __('Used') }}</option>
-                        <option value="expired" {{ request('status') === 'expired' ? 'selected' : '' }} data-title="{{ __('Expired') }}">{{ __('Expired') }}</option>
-                        <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }} data-title="{{ __('Cancelled') }}">{{ __('Cancelled') }}</option>
+                    <x-searchable-select name="status" id="filter-status" :placeholder="__('All Status')"
+                        :selected="request('status')" :hasSearch="false"
+                        @change="$el.closest('form').dispatchEvent(new Event('submit'))">
+                        <option value="active" {{ request('status')==='active' ? 'selected' : '' }}
+                            data-title="{{ __('Active') }}">{{ __('Active') }}</option>
+                        <option value="used" {{ request('status')==='used' ? 'selected' : '' }}
+                            data-title="{{ __('Used') }}">{{ __('Used') }}</option>
+                        <option value="expired" {{ request('status')==='expired' ? 'selected' : '' }}
+                            data-title="{{ __('Expired') }}">{{ __('Expired') }}</option>
+                        <option value="cancelled" {{ request('status')==='cancelled' ? 'selected' : '' }}
+                            data-title="{{ __('Cancelled') }}">{{ __('Cancelled') }}</option>
                     </x-searchable-select>
                 </div>
 
                 <div class="flex items-center gap-2 ml-auto md:ml-0 shrink-0">
-                    <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95" title="{{ __('Search') }}">
+                    <button type="submit"
+                        class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+                        title="{{ __('Search') }}">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>
                     </button>
                     <button type="button"
                         @click="$el.closest('form').querySelector('input[name=search]').value=''; syncSelect('filter-status', ''); $el.closest('form').dispatchEvent(new Event('submit'))"
-                        class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95 border border-slate-200 dark:border-slate-700" title="{{ __('Reset') }}">
+                        class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95 border border-slate-200 dark:border-slate-700"
+                        title="{{ __('Reset') }}">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                         </svg>
                     </button>
                 </div>
@@ -91,60 +113,77 @@
                 <table class="w-full text-left border-separate border-spacing-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">
+                            <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">
                                 {{ __('Code') }}
                             </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">
+                            <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">
+                            <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">
                                 {{ __('Product / Slot') }}
                             </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">
+                            <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">
                                 {{ __('Expires At') }}
                             </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">
+                            <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">
                                 {{ __('Status') }}
                             </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">
+                            <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-100 dark:divide-slate-800/80">
                         @forelse ($pickupCodes as $code)
-                            <tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
+                        <tr
+                            class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
                             <td class="px-6 py-6 whitespace-nowrap">
                                 @if($code->status === 'active' && $code->expires_at->isFuture())
-                                        <span @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true" 
-                                            class="text-lg font-black font-mono text-cyan-600 dark:text-cyan-400 tracking-tighter bg-cyan-50 dark:bg-cyan-500/10 px-3 py-1 rounded-lg border border-cyan-100 dark:border-cyan-500/20 shadow-sm cursor-pointer hover:bg-cyan-100 dark:hover:bg-cyan-500/20 transition-all">
+                                <span
+                                    @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true"
+                                    class="text-lg font-black font-mono text-cyan-600 dark:text-cyan-400 tracking-widest bg-cyan-50 dark:bg-cyan-500/10 px-4 py-1.5 rounded-xl border border-cyan-100 dark:border-cyan-500/20 shadow-sm cursor-pointer hover:bg-cyan-100 dark:hover:bg-cyan-500/20 transition-all">
                                     {{ $code->code }}
                                 </span>
                                 @else
-                                        <span class="text-lg font-black font-mono text-slate-400 dark:text-slate-600 tracking-tighter bg-slate-50 dark:bg-slate-900/50 px-3 py-1 rounded-lg border border-slate-100 dark:border-slate-800/50 shadow-sm">
+                                <span
+                                    class="text-lg font-black font-mono text-slate-400 dark:text-slate-600 tracking-widest bg-slate-50 dark:bg-slate-900/50 px-4 py-1.5 rounded-xl border border-slate-100 dark:border-slate-800/50 shadow-sm">
                                     {{ $code->code }}
                                 </span>
                                 @endif
                             </td>
                             <td class="px-6 py-6">
-                                    <div class="text-base font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">{{ $code->machine->name }}</div>
-                                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">{{ $code->machine->serial_no }}</div>
+                                <div class="text-base font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">
+                                    {{ $code->machine->name }}</div>
+                                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">{{
+                                    $code->machine->serial_no }}</div>
                             </td>
                             <td class="px-6 py-6">
                                 @php
                                 $slot = $code->machine->slots->where('slot_no', $code->slot_no)->first();
                                 $productName = $slot ? ($slot->product?->name ?? __('Empty')) : __('Empty');
                                 @endphp
-                                    <div class="text-sm font-black text-cyan-600 dark:text-cyan-400 mb-0.5">{{ $productName }}</div>
-                                    <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Slot') }}: {{ $code->slot_no }}</div>
+                                <div class="text-sm font-black text-cyan-600 dark:text-cyan-400 mb-0.5">{{ $productName
+                                    }}</div>
+                                <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Slot')
+                                    }}: {{ $code->slot_no }}</div>
                             </td>
                             <td class="px-6 py-6 whitespace-nowrap">
-                                    <div class="text-sm font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest">{{ $code->expires_at->format('Y-m-d H:i') }}</div>
-                                    <div class="text-xs font-bold text-slate-400 mt-0.5">{{ $code->expires_at->diffForHumans() }}</div>
+                                <div
+                                    class="text-sm font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest">
+                                    {{ $code->expires_at->format('Y-m-d H:i') }}</div>
+                                <div class="text-xs font-bold text-slate-400 mt-0.5">{{
+                                    $code->expires_at->diffForHumans() }}</div>
                             </td>
                             <td class="px-6 py-6 whitespace-nowrap">
                                 @php
-                                        $displayStatus = $code->status === 'active' && $code->expires_at->isPast() ? 'expired' : $code->status;
+                                $displayStatus = $code->status === 'active' && $code->expires_at->isPast() ? 'expired' :
+                                $code->status;
                                 @endphp
                                 <x-status-badge :status="$displayStatus" />
                             </td>
@@ -152,23 +191,33 @@
                                 <div class="flex items-center justify-end gap-2">
                                     @if($code->status === 'active' && $code->expires_at->isFuture())
                                     {{-- View QR Code Button --}}
-                                            <button @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true" 
+                                    <button
+                                        @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true"
                                         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="{{ __('View 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 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>
                                     @endif
 
                                     @if($code->status === 'active' && $code->expires_at->isFuture())
-                                            <form id="cancel-form-desktop-{{ $code->id }}" action="{{ route('admin.sales.pickup-codes.destroy', $code) }}" method="POST">
+                                    <form id="cancel-form-desktop-{{ $code->id }}"
+                                        action="{{ route('admin.sales.pickup-codes.destroy', $code) }}" method="POST">
                                         @csrf
                                         @method('DELETE')
-                                                <button type="button" @click="confirmCancel('cancel-form-desktop-{{ $code->id }}')" class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20" title="{{ __('Cancel 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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-3.38a2.25 2.25 0 00-2.25-2.25h-3.51a2.25 2.25 0 00-2.25 2.25v3.38" />
+                                        <button type="button"
+                                            @click="confirmCancel('cancel-form-desktop-{{ $code->id }}')"
+                                            class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20"
+                                            title="{{ __('Cancel 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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-3.38a2.25 2.25 0 00-2.25-2.25h-3.51a2.25 2.25 0 00-2.25 2.25v3.38" />
                                             </svg>
                                         </button>
                                     </form>
@@ -186,13 +235,16 @@
             {{-- Card Grid (Mobile) --}}
             <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
                 @forelse ($pickupCodes as $code)
-                    <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+                <div
+                    class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
                     {{-- Card Header --}}
                     <div class="flex items-start justify-between gap-4 mb-6">
                         <div class="flex items-center gap-4 min-w-0">
-                                <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
+                            <div
+                                class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
                                 <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                                 </svg>
                             </div>
                             <div class="min-w-0">
@@ -202,17 +254,20 @@
                                     {{ $code->code }}
                                 </h3>
                                 @else
-                                        <h3 class="text-base font-extrabold text-slate-400 dark:text-slate-600 truncate tracking-tight">
+                                <h3
+                                    class="text-base font-extrabold text-slate-400 dark:text-slate-600 truncate tracking-tight">
                                     {{ $code->code }}
                                 </h3>
                                 @endif
-                                    <p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">
+                                <p
+                                    class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">
                                     {{ $code->machine->name }}
                                 </p>
                             </div>
                         </div>
                         @php
-                                $displayStatus = $code->status === 'active' && $code->expires_at->isPast() ? 'expired' : $code->status;
+                        $displayStatus = $code->status === 'active' && $code->expires_at->isPast() ? 'expired' :
+                        $code->status;
                         @endphp
                         <x-status-badge :status="$displayStatus" size="sm" />
                     </div>
@@ -220,7 +275,9 @@
                     {{-- Info Grid --}}
                     <div class="grid grid-cols-2 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
                         <div>
-                                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Slot') }}</p>
+                            <p
+                                class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                                {{ __('Slot') }}</p>
                             <p class="text-sm font-bold text-slate-700 dark:text-slate-300">
                                 {{ $code->slot_no }}
                                 @php
@@ -231,8 +288,11 @@
                             </p>
                         </div>
                         <div>
-                                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Expires At') }}</p>
-                                <p class="text-sm font-bold text-slate-700 dark:text-slate-300 font-mono tracking-tighter">{{ $code->expires_at->format('Y-m-d H:i') }}</p>
+                            <p
+                                class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                                {{ __('Expires At') }}</p>
+                            <p class="text-sm font-bold text-slate-700 dark:text-slate-300 font-mono tracking-tighter">
+                                {{ $code->expires_at->format('Y-m-d H:i') }}</p>
                         </div>
                     </div>
 
@@ -240,23 +300,30 @@
                     <div class="flex items-center gap-3">
                         @if($code->status === 'active' && $code->expires_at->isFuture())
                         {{-- QR Button (Mobile) --}}
-                                <button @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true" 
+                        <button
+                            @click="activeQrCode = '{{ $code->code }}'; activeTicketUrl = '{{ $code->ticket_url }}'; showQrModal = true"
                             class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-xs uppercase tracking-widest border border-slate-100 dark:border-slate-800 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all duration-300">
                             <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" />
+                                <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>
                             {{ __('QR Code') }}
                         </button>
                         @endif
 
                         @if($code->status === 'active' && $code->expires_at->isFuture())
-                                <form id="cancel-form-mobile-{{ $code->id }}" action="{{ route('admin.sales.pickup-codes.destroy', $code) }}" method="POST" class="flex-1">
+                        <form id="cancel-form-mobile-{{ $code->id }}"
+                            action="{{ route('admin.sales.pickup-codes.destroy', $code) }}" method="POST"
+                            class="flex-1">
                             @csrf
                             @method('DELETE')
-                                    <button type="button" @click="confirmCancel('cancel-form-mobile-{{ $code->id }}')" class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-rose-500/5 text-rose-500 text-xs font-black uppercase tracking-widest border border-rose-500/20 hover:bg-rose-500 hover:text-white transition-all duration-300">
+                            <button type="button" @click="confirmCancel('cancel-form-mobile-{{ $code->id }}')"
+                                class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-rose-500/5 text-rose-500 text-xs font-black uppercase tracking-widest border border-rose-500/20 hover:bg-rose-500 hover:text-white transition-all duration-300">
                                 <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-3.38a2.25 2.25 0 00-2.25-2.25h-3.51a2.25 2.25 0 00-2.25 2.25v3.38" />
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-3.38a2.25 2.25 0 00-2.25-2.25h-3.51a2.25 2.25 0 00-2.25 2.25v3.38" />
                                 </svg>
                                 {{ __('Cancel') }}
                             </button>
@@ -279,43 +346,51 @@
     </div>
 
     {{-- Create Modal --}}
-    <div x-show="showCreateModal" 
-        class="fixed inset-0 z-50 overflow-y-auto" 
-        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>
+    <div x-show="showCreateModal" class="fixed inset-0 z-50 overflow-y-auto"
+        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>
         <div class="flex items-center justify-center min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showCreateModal = false"></div>
+            <div class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm"
+                @click="showCreateModal = false"></div>
 
-            <div x-show="showCreateModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
+            <div x-show="showCreateModal" x-transition:enter="ease-out duration-300"
+                x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95"
+                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 sm:scale-100"
+                x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
                 class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-3xl dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full overflow-visible">
                 <div class="flex justify-between items-center mb-8">
-                    <h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Add Pickup Code') }}</h3>
-                    <button @click="showCreateModal = false" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 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.5" d="M6 18L18 6M6 6l12 12"/></svg>
+                    <h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{
+                        __('Add Pickup Code') }}</h3>
+                    <button @click="showCreateModal = false"
+                        class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 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.5"
+                                d="M6 18L18 6M6 6l12 12" />
+                        </svg>
                     </button>
                 </div>
 
-                <form action="{{ route('admin.sales.pickup-codes.store') }}" method="POST" class="space-y-6">
+                <form action="{{ route('admin.sales.pickup-codes.store') }}" method="POST" class="space-y-6" @submit.prevent="validateAndSubmit">
                     @csrf
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="space-y-2">
-                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Target Machine') }}</label>
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
+                                __('Target Machine') }} <span class="text-rose-500">*</span></label>
                             <x-searchable-select name="machine_id" id="modal-pickup-machine"
-                                placeholder="{{ __('Please select a machine') }}" 
-                                x-model="selectedMachine"
+                                placeholder="{{ __('Please select a machine') }}" x-model="selectedMachine"
                                 @change="selectedMachine = $event.target.value; fetchSlots()">
                                 @foreach($machines as $machine)
-                                    <option value="{{ $machine->id }}" data-title="{{ $machine->name }} ({{ $machine->serial_no }})">{{ $machine->name }} ({{ $machine->serial_no }})</option>
+                                <option value="{{ $machine->id }}"
+                                    data-title="{{ $machine->name }} ({{ $machine->serial_no }})">{{ $machine->name }}
+                                    ({{ $machine->serial_no }})</option>
                                 @endforeach
                             </x-searchable-select>
                         </div>
                         <div class="space-y-2">
-                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Select Slot') }}</label>
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
+                                __('Select Slot') }} <span class="text-rose-500">*</span></label>
                             <div class="relative">
                                 <div id="slot-select-wrapper" class="relative">
                                     {{-- Rebuilt by Alpine --}}
@@ -327,13 +402,36 @@
                         </div>
                     </div>
 
+                    {{-- Pickup Code Preview Section --}}
+                    <div class="space-y-2">
+                        <div class="flex items-center justify-between mb-1">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
+                                {{ __('Pickup Code (8 Digits)') }} <span class="text-rose-500">*</span>
+                            </label>
+                            <button type="button" @click="generateRandomCode()"
+                                class="text-[10px] font-black text-cyan-500 hover:text-cyan-600 uppercase tracking-widest flex items-center gap-1 transition-colors">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
+                                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                                </svg>
+                                {{ __('Regenerate') }}
+                            </button>
+                        </div>
+                        <input type="text" name="custom_code" x-model="customCode"
+                            class="luxury-input w-full py-4 font-mono text-2xl tracking-[0.3em] text-center text-cyan-600 dark:text-cyan-400 bg-cyan-50/30 dark:bg-cyan-500/5"
+                            maxlength="12" required>
+                    </div>
+
                     {{-- Validity Period Section --}}
                     <div class="max-w-2xl mx-auto w-full">
-                        <div class="bg-slate-50 dark:bg-slate-800/40 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800/50 shadow-sm">
+                        <div
+                            class="bg-slate-50 dark:bg-slate-800/40 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800/50 shadow-sm">
                             <div class="flex items-center justify-between mb-8 px-2">
                                 <div class="flex items-center gap-2">
                                     <div class="w-1.5 h-1.5 rounded-full bg-cyan-500/50"></div>
-                                    <label class="text-[13px] font-black text-slate-500 dark:text-slate-400 tracking-wider">{{ __('Validity Period') }}</label>
+                                    <label
+                                        class="text-[13px] font-black text-slate-500 dark:text-slate-400 tracking-wider">{{
+                                        __('Validity Period') }}</label>
                                 </div>
                                 <span class="text-[11px] font-bold text-slate-400/70 tracking-wide">{{ __('Max 24 Hours') }}</span>
                             </div>
@@ -342,24 +440,37 @@
                                 {{-- Slider and Value --}}
                                 <div class="flex items-center gap-8">
                                     <div class="flex-1 relative">
-                                        <input type="range" name="expires_hours" x-model="expiresHours" min="1" :max="maxHours" 
+                                        <input type="range" name="expires_hours" x-model="expiresHours" min="1"
+                                            :max="maxHours"
                                             class="w-full h-1 bg-slate-200 dark:bg-slate-700/50 rounded-lg appearance-none cursor-pointer accent-cyan-500 transition-all hover:accent-cyan-400">
                                     </div>
-                                    <div class="shrink-0 w-24 py-4 bg-white dark:bg-slate-900 rounded-[1.5rem] border border-slate-200 dark:border-slate-700 shadow-sm text-center ring-4 ring-slate-50 dark:ring-slate-800/50">
-                                        <span class="text-2xl font-black text-slate-800 dark:text-white leading-none" x-text="expiresHours"></span>
-                                        <span class="block text-[10px] font-black text-slate-400 uppercase mt-1 tracking-widest">{{ __('Hrs') }}</span>
+                                    <div
+                                        class="shrink-0 w-24 py-4 bg-white dark:bg-slate-900 rounded-[1.5rem] border border-slate-200 dark:border-slate-700 shadow-sm text-center ring-4 ring-slate-50 dark:ring-slate-800/50">
+                                        <span class="text-2xl font-black text-slate-800 dark:text-white leading-none"
+                                            x-text="expiresHours"></span>
+                                        <span
+                                            class="block text-[10px] font-black text-slate-400 uppercase mt-1 tracking-widest">{{
+                                            __('Hrs') }}</span>
                                     </div>
                                 </div>
 
                                 {{-- Result Display --}}
                                 <div class="relative">
-                                    <div class="flex flex-col items-center justify-center py-8 px-8 bg-white dark:bg-slate-900/50 rounded-[2rem] border border-slate-200/60 dark:border-slate-700/50 shadow-inner">
-                                        <span class="text-base font-bold text-slate-600 dark:text-slate-400 mb-5 tracking-wide">{{ __('Expected Expiry Date & Time') }}</span>
-                                        <div class="flex items-center gap-3 py-3 px-6 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700/50 shadow-sm">
-                                            <svg class="w-5 h-5 text-cyan-500/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    <div
+                                        class="flex flex-col items-center justify-center py-8 px-8 bg-white dark:bg-slate-900/50 rounded-[2rem] border border-slate-200/60 dark:border-slate-700/50 shadow-inner">
+                                        <span
+                                            class="text-base font-bold text-slate-600 dark:text-slate-400 mb-5 tracking-wide">{{
+                                            __('Expected Expiry Date & Time') }}</span>
+                                        <div
+                                            class="flex items-center gap-3 py-3 px-6 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700/50 shadow-sm">
+                                            <svg class="w-5 h-5 text-cyan-500/50" fill="none" stroke="currentColor"
+                                                viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                             </svg>
-                                            <span class="text-xl sm:text-2xl font-black text-slate-700 dark:text-cyan-100 font-mono tracking-tight" x-text="calculateExpiry()"></span>
+                                            <span
+                                                class="text-xl sm:text-2xl font-black text-slate-700 dark:text-cyan-100 font-mono tracking-tight"
+                                                x-text="calculateExpiry()"></span>
                                         </div>
                                     </div>
                                 </div>
@@ -368,8 +479,9 @@
                     </div>
 
                     <div class="flex justify-end gap-x-4 pt-8">
-                        <button type="button" @click="showCreateModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
-                        <button type="submit" class="btn-luxury-primary px-12" :disabled="!selectedSlot">
+                        <button type="button" @click="showCreateModal = false" class="btn-luxury-ghost px-8">{{
+                            __('Cancel') }}</button>
+                        <button type="submit" class="btn-luxury-primary px-12">
                             {{ __('Generate') }}
                         </button>
                     </div>
@@ -388,17 +500,21 @@
                 <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
+                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-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('QR Code') }}</h3>
+                        <h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('QR Code') }}
+                        </h3>
                         <p class="text-xs font-bold text-cyan-600 dark:text-cyan-400 mt-1 uppercase tracking-widest">
                             {{ __('Pickup Code') }}: <span class="font-mono" x-text="activeQrCode"></span>
                         </p>
                     </div>
                     <button @click="showQrModal = 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" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </button>
                 </div>
@@ -419,7 +535,18 @@
                                 class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-slate-100 dark:border-slate-700 hover:border-cyan-500/20 transition-all flex items-center justify-center gap-2 group"
                                 title="{{ __('Copy Link') }}">
                                 <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="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+                                </svg>
+                                <span class="text-xs font-black uppercase tracking-widest">{{ __('Link') }}</span>
+                            </button>
+
+                            {{-- Copy Code Button --}}
+                            <button @click="copyQrCode()"
+                                class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-slate-100 dark:border-slate-700 hover:border-cyan-500/20 transition-all flex items-center justify-center gap-2 group"
+                                title="{{ __('Copy 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                 </svg>
                                 <span class="text-xs font-black uppercase tracking-widest">{{ __('Copy') }}</span>
                             </button>
@@ -429,7 +556,8 @@
                                 class="flex-1 py-3 px-4 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-emerald-500 hover:bg-emerald-500/5 dark:hover:bg-emerald-500/10 border border-slate-100 dark:border-slate-700 hover:border-emerald-500/20 transition-all flex items-center justify-center gap-2 group"
                                 title="{{ __('Download Image') }}">
                                 <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 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M7.5 12l4.5 4.5m0 0l4.5-4.5M12 3v13.5" />
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M7.5 12l4.5 4.5m0 0l4.5-4.5M12 3v13.5" />
                                 </svg>
                                 <span class="text-xs font-black uppercase tracking-widest">{{ __('Save') }}</span>
                             </button>
@@ -437,26 +565,22 @@
                     </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="showQrModal = false" class="btn-luxury-primary w-full py-4 rounded-2xl">{{ __('Close') }}</button>
+                <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="showQrModal = false" class="btn-luxury-primary w-full py-4 rounded-2xl">{{
+                        __('Close') }}</button>
                 </div>
             </div>
         </div>
     </div>
 
     {{-- Confirm Cancel Modal --}}
-    <x-confirm-modal
-        alpineVar="showCancelModal"
-        :title="__('Cancel Pickup Code')"
+    <x-confirm-modal alpineVar="showCancelModal" :title="__('Cancel Pickup Code')"
         :message="__('Are you sure you want to cancel this pickup code? This action cannot be undone.')"
-        :confirmText="__('Yes, Cancel')"
-        confirmAction="submitCancel()"
-        confirmColor="rose"
-        iconType="danger"
-    />
+        :confirmText="__('Yes, Cancel')" confirmAction="submitCancel()" confirmColor="rose" iconType="danger" />
 </div>
 <script>
-document.addEventListener('alpine:init', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.data('pickupCodeManager', (config) => ({
             showCreateModal: false,
             selectedMachine: '',
@@ -472,6 +596,11 @@ document.addEventListener('alpine:init', () => {
             showCancelModal: false,
             cancelTargetForm: null,
             slotSelectConfig: config,
+            customCode: '',
+
+            generateRandomCode() {
+                this.customCode = Math.floor(Math.random() * 90000000 + 10000000).toString();
+            },
 
             calculateExpiry() {
                 const date = new Date();
@@ -500,6 +629,22 @@ document.addEventListener('alpine:init', () => {
                 }
             },
 
+            validateAndSubmit() {
+                if (!this.selectedMachine || this.selectedMachine.toString().trim() === '') {
+                    window.showToast('{{ __("Please select a machine") }}', 'error');
+                    return;
+                }
+                if (!this.selectedSlot || this.selectedSlot.toString().trim() === '') {
+                    window.showToast('{{ __("Please select a slot") }}', 'error');
+                    return;
+                }
+                if (!this.customCode || this.customCode.toString().trim() === '') {
+                    window.showToast('{{ __("Please enter or generate a pickup code") }}', 'error');
+                    return;
+                }
+                this.$el.submit();
+            },
+
             async fetchPage(url) {
                 if (!url || this.isLoadingTable) return;
                 this.isLoadingTable = true;
@@ -523,7 +668,14 @@ document.addEventListener('alpine:init', () => {
             copyQrLink() {
                 if (!this.activeTicketUrl) return;
                 navigator.clipboard.writeText(this.activeTicketUrl).then(() => {
-                window.showToast("{{ __('Link Copied') }}", 'success');
+                    window.showToast('{{ __('Link Copied') }}', 'success');
+                });
+            },
+
+            copyQrCode() {
+                if (!this.activeQrCode) return;
+                navigator.clipboard.writeText(this.activeQrCode).then(() => {
+                    window.showToast('{{ __('Code Copied') }}', 'success');
                 });
             },
 
@@ -559,7 +711,7 @@ document.addEventListener('alpine:init', () => {
                     if (!wrapper) return;
 
                     wrapper.querySelectorAll('select').forEach(s => {
-                    try { window.HSSelect?.getInstance(s)?.destroy(); } catch(e){}
+                        try { window.HSSelect?.getInstance(s)?.destroy(); } catch (e) { }
                     });
                     wrapper.innerHTML = '';
 
@@ -573,9 +725,15 @@ document.addEventListener('alpine:init', () => {
 
                     const selectEl = document.createElement('select');
                     selectEl.name = 'slot_no';
-                selectEl.required = true;
+                    // Remove required to allow our custom validation toast to trigger
+                    selectEl.id = 'modal-pickup-slot-' + Date.now();
                     selectEl.className = 'hidden';
-                selectEl.setAttribute('data-hs-select', JSON.stringify(this.slotSelectConfig));
+
+                    // 清理配置字串中的換行符
+                    const cleanConfig = JSON.parse(JSON.stringify(this.slotSelectConfig), (key, value) => {
+                        return typeof value === 'string' ? value.replace(/\r?\n|\r/g, ' ').trim() : value;
+                    });
+                    selectEl.setAttribute('data-hs-select', JSON.stringify(cleanConfig));
 
                     const placeholderOpt = document.createElement('option');
                     placeholderOpt.value = "";
@@ -598,8 +756,6 @@ document.addEventListener('alpine:init', () => {
 
                     if (window.HSStaticMethods?.autoInit) {
                         window.HSStaticMethods.autoInit(['select']);
-                    const inst = window.HSSelect?.getInstance(selectEl);
-                    if (inst && this.selectedSlot) inst.setValue(this.selectedSlot);
                     }
                 });
             },
@@ -616,21 +772,27 @@ document.addEventListener('alpine:init', () => {
             },
 
             init() {
+                this.generateRandomCode();
                 this.$watch('slots', () => this.updateSlotSelect());
                 this.$watch('selectedMachine', (val) => {
                     this.syncSelect('modal-pickup-machine', val);
-                this.updateSlotSelect();
+                    this.selectedSlot = ''; // Reset slot when machine changes
+                    this.fetchSlots();
+                });
+                this.$watch('selectedSlot', (val) => {
+                    // Selection toast removed per user request
                 });
                 this.$watch('showCreateModal', (val) => {
                     if (val) {
                         this.selectedMachine = '';
                         this.selectedSlot = '';
                         this.slots = [];
+                        this.generateRandomCode();
                         this.updateSlotSelect();
                     }
                 });
             }
         }));
-});
+    });
 </script>
 @endsection

resources/views/admin/warehouses/inventory.blade.php

@@ -270,31 +270,24 @@
 
 
     <!-- Header -->
-    <div class="flex items-center justify-between gap-4">
-        <div>
-            <h1 class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{
-                __('Inventory Management') }}</h1>
-            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
-                {{ __('Track stock-in orders and movement history') }}
-            </p>
-        </div>
-        <div class="flex items-center gap-3">
+    <x-page-header 
+        :title="__('Inventory Management')"
+        :subtitle="__('Track stock-in orders and movement history')"
+    >
         <template x-if="activeTab === 'stock'">
-                <button type="button" @click="openStockInModal()"
-                    class="btn-luxury-primary transition-all duration-300">
+            <button type="button" @click="openStockInModal()" 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 Stock-In Order') }}</span>
+                <span class="text-sm sm:text-base">{{ __('Stock-In Order') }}</span>
             </button>
         </template>
-        </div>
-    </div>
+    </x-page-header>
 
-    <x-tab-nav>
-        <x-tab-nav-item value="stock"     :label="__('Current Stocks')" />
-        <x-tab-nav-item value="stock-in"  :label="__('Stock-In Orders')" />
-        <x-tab-nav-item value="movements" :label="__('Movement History')" />
+    <x-tab-nav model="activeTab">
+        <x-tab-nav-item value="stock"     :label="__('Adjust Inventory')" model="activeTab" />
+        <x-tab-nav-item value="stock-in"  :label="__('Stock-In Orders')" model="activeTab" />
+        <x-tab-nav-item value="movements" :label="__('Operation Records')" model="activeTab" />
     </x-tab-nav>
 
     <!-- Tab Contents -->

resources/views/admin/warehouses/partials/tab-movements.blade.php

@@ -1,10 +1,10 @@
 <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
-    <form action="{{ route('admin.warehouses.inventory') }}" method="GET" class="flex flex-wrap items-center justify-between mb-8 gap-4"
+    <form action="{{ route('admin.warehouses.inventory') }}" method="GET" class="flex flex-wrap items-center gap-3 sm:gap-4 mb-8"
           @submit.prevent="handleFilterSubmit('movements')">
         <input type="hidden" name="tab" value="movements">
 
-        <div class="flex flex-wrap gap-4 items-center flex-1">
-            <div class="w-full sm:w-64">
+        {{-- 倉庫篩選 --}}
+        <div class="w-full sm:w-72">
             <x-searchable-select 
                 name="warehouse_id" 
                 :options="$warehouses" 
@@ -13,7 +13,8 @@
             />
         </div>
 
-            <div class="w-full sm:w-64">
+        {{-- 類型篩選 --}}
+        <div class="w-full sm:w-72">
             <x-searchable-select 
                 name="type" 
                 :selected="request('type')"
@@ -27,8 +28,8 @@
             </x-searchable-select>
         </div>
 
-            {{-- Date Range --}}
-            <div class="relative group w-full sm:w-72" 
+        {{-- 日期範圍 --}}
+        <div class="relative group w-full sm:w-72 sm:flex-none" 
              x-data="{ fp: null }" 
              x-init="fp = flatpickr($refs.dateRange, { 
                 mode: 'range',
@@ -56,11 +57,12 @@
             <input type="hidden" name="end_date" x-ref="endDate" value="{{ request('end_date') }}">
             <input type="text" x-ref="dateRange" 
                 value="{{ request('start_date') && request('end_date') ? request('start_date') . ' 至 ' . request('end_date') : (request('start_date') ?: '') }}"
-                    placeholder="{{ __('Select Date Range') }}" class="luxury-input py-2.5 pl-12 pr-6 block w-full cursor-pointer">
+                placeholder="{{ __('Select Date Range') }}" class="luxury-input py-2.5 pl-12 pr-6 block w-full text-sm font-bold cursor-pointer">
         </div>
 
+        {{-- 搜尋 + 重置按鈕 --}}
         <div class="flex items-center gap-2 ml-auto sm:ml-0">
-                <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 group transition-all active:scale-95" title="{{ __('Search') }}">
+            <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95" title="{{ __('Search') }}">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
@@ -77,13 +79,12 @@
                     $el.closest('form').dispatchEvent(new CustomEvent('multi-select-reset', { bubbles: true }));
                     handleFilterSubmit('movements');
                 "
-                    class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 group transition-all active:scale-95" title="{{ __('Reset') }}">
+                class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95" title="{{ __('Reset') }}">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                 </svg>
             </button>
         </div>
-        </div>
     </form>
 
     {{-- Table Mode (Desktop) --}}
@@ -166,18 +167,18 @@
     </div>
 
     {{-- Card Mode (Mobile & Tablet) --}}
-    <div class="grid grid-cols-1 md:grid-cols-2 xl:hidden gap-6 mt-8">
+    <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
         @forelse($movements as $mv)
-        <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
-            <div class="flex items-start justify-between gap-4 mb-6">
-                <div class="flex items-center gap-4 min-w-0">
+        <div class="luxury-card p-5 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+            <div class="flex items-start justify-between gap-4 mb-5">
+                <div class="flex items-center gap-3 min-w-0">
                     <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
-                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
                         </svg>
                     </div>
                     <div class="min-w-0 flex-1">
-                        <h3 class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 break-all group-hover:text-cyan-600 transition-colors tracking-tight">{{ $mv->product?->localized_name }}</h3>
+                        <h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 break-all group-hover:text-cyan-600 transition-colors tracking-tight">{{ $mv->product?->localized_name }}</h3>
                         <p class="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-widest truncate mt-0.5">ID: {{ $mv->product_id }}</p>
                     </div>
                 </div>
@@ -213,8 +214,8 @@
 
         </div>
         @empty
-        <div class="col-span-full py-20 text-center flex flex-col items-center gap-4 bg-white/50 dark:bg-slate-900/50 rounded-3xl border border-slate-100 dark:border-slate-800/50 luxury-card">
-            <p class="text-slate-400 font-extrabold tracking-widest uppercase text-xs">{{ __('No movement records found') }}</p>
+        <div class="col-span-full">
+            <x-empty-state :message="__('No movement records found')" />
         </div>
         @endforelse
     </div>

resources/views/admin/warehouses/partials/tab-stock-in.blade.php

@@ -1,11 +1,11 @@
 <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
     {{-- Filters --}}
-    <form action="{{ route('admin.warehouses.inventory') }}" method="GET" class="flex flex-wrap items-center justify-between mb-8 gap-4"
+    <form action="{{ route('admin.warehouses.inventory') }}" method="GET" class="flex flex-wrap items-center gap-3 sm:gap-4 mb-8"
         @submit.prevent="handleFilterSubmit('stock-in')">
         <input type="hidden" name="tab" value="stock-in">
 
-        <div class="flex flex-wrap gap-4 items-center flex-1">
-            <div class="relative group w-full sm:w-72">
+        {{-- 搜尋輸入框 --}}
+        <div class="relative group flex-1 sm:flex-none">
                 <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.5">
@@ -15,11 +15,11 @@
                 </span>
             <input type="text" name="search_order" value="{{ request('search_order') }}"
                 @keydown.enter.prevent="handleFilterSubmit('stock-in')"
-                    class="py-2.5 pl-12 pr-6 block w-full luxury-input" placeholder="{{ __('Search order number...') }}">
+                class="luxury-input py-2.5 pl-12 pr-6 block w-full sm:w-72 text-sm font-bold" placeholder="{{ __('Search order number...') }}">
         </div>
 
-            {{-- Date Range --}}
-            <div class="relative group w-full sm:w-72" 
+        {{-- 日期範圍 --}}
+        <div class="relative group w-full sm:w-72 sm:flex-none" 
                  x-data="{ fp: null }" 
                  x-init="fp = flatpickr($refs.dateRange, { 
                     mode: 'range',
@@ -47,11 +47,28 @@
                 <input type="hidden" name="end_date" x-ref="endDate" value="{{ request('end_date') }}">
             <input type="text" x-ref="dateRange" 
                 value="{{ request('start_date') && request('end_date') ? request('start_date') . ' 至 ' . request('end_date') : (request('start_date') ?: '') }}"
-                    placeholder="{{ __('Select Date Range') }}" class="luxury-input py-2.5 pl-12 pr-6 block w-full cursor-pointer">
+                placeholder="{{ __('Select Date Range') }}" class="luxury-input py-2.5 pl-12 pr-6 block w-full text-sm font-bold cursor-pointer">
         </div>
 
+        {{-- 狀態篩選 --}}
+        @if(isset($stock_in_status_options))
+        <div class="w-full sm:w-48">
+            <x-searchable-select 
+                name="status" 
+                :selected="request('status')" 
+                :placeholder="__('All Status')"
+                x-on:change="handleFilterSubmit('stock-in')"
+            >
+                @foreach($stock_in_status_options as $key => $label)
+                    <option value="{{ $key }}" {{ request('status') === $key ? 'selected' : '' }}>{{ $label }}</option>
+                @endforeach
+            </x-searchable-select>
+        </div>
+        @endif
+
+        {{-- 搜尋 + 重置按鈕 --}}
         <div class="flex items-center gap-2 ml-auto sm:ml-0">
-                <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 group transition-all active:scale-95" title="{{ __('Search') }}">
+            <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95" title="{{ __('Search') }}">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
@@ -67,28 +84,12 @@
                     });
                     handleFilterSubmit('stock-in');
                 "
-                    class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 group transition-all active:scale-95" title="{{ __('Reset') }}">
+                class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95" title="{{ __('Reset') }}">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                 </svg>
             </button>
         </div>
-        </div>
-
-        @if(isset($stock_in_status_options))
-        <div class="w-full sm:w-48">
-            <x-searchable-select 
-                name="status" 
-                :selected="request('status')" 
-                :placeholder="__('All Status')"
-                x-on:change="handleFilterSubmit('stock-in')"
-            >
-                @foreach($stock_in_status_options as $key => $label)
-                    <option value="{{ $key }}" {{ request('status') === $key ? 'selected' : '' }}>{{ $label }}</option>
-                @endforeach
-            </x-searchable-select>
-        </div>
-        @endif
     </form>
 
     {{-- Table Mode (Desktop) --}}
@@ -223,19 +224,19 @@
     </div>
 
     {{-- Card Mode (Mobile & Tablet) --}}
-    <div class="grid grid-cols-1 md:grid-cols-2 xl:hidden gap-6 mt-8">
+    <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
         @forelse($orders as $order)
-        <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group"
+        <div class="luxury-card p-5 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group cursor-pointer"
              @click="openOrderDetails('{{ $order->id }}')">
-            <div class="flex items-start justify-between gap-4 mb-6">
-                <div class="flex items-center gap-4 min-w-0">
+            <div class="flex items-start justify-between gap-4 mb-5">
+                <div class="flex items-center gap-3 min-w-0">
                     <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
-                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                         </svg>
                     </div>
                     <div class="min-w-0 flex-1">
-                        <h3 class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 break-all group-hover:text-cyan-600 transition-colors tracking-tight">{{ $order->order_no }}</h3>
+                        <h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 break-all group-hover:text-cyan-600 transition-colors tracking-tight">{{ $order->order_no }}</h3>
                         <p class="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-widest truncate mt-0.5">{{ $order->created_at->format('Y-m-d H:i:s') }}</p>
                     </div>
                 </div>
@@ -256,7 +257,7 @@
                 </div>
             </div>
             
-            <div class="grid grid-cols-2 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
+            <div class="grid grid-cols-2 gap-y-4 mb-5 border-y border-slate-100 dark:border-slate-800/50 py-4">
                 <div>
                     <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Warehouse') }}</p>
                     <p class="text-sm font-bold text-slate-700 dark:text-slate-300 truncate">{{ $order->warehouse?->name }}</p>
@@ -292,8 +293,8 @@
             </div>
         </div>
         @empty
-        <div class="col-span-full py-20 text-center flex flex-col items-center gap-4 bg-white/50 dark:bg-slate-900/50 rounded-3xl border border-slate-100 dark:border-slate-800/50 luxury-card">
-            <p class="text-slate-400 font-extrabold tracking-widest uppercase text-xs">{{ __('No stock-in orders found') }}</p>
+        <div class="col-span-full">
+            <x-empty-state :message="__('No stock-in orders found')" />
         </div>
         @endforelse
     </div>

resources/views/admin/warehouses/partials/tab-stock.blade.php

@@ -3,7 +3,8 @@
         @submit.prevent="handleFilterSubmit('stock')">
         <input type="hidden" name="tab" value="stock">
 
-        <div class="relative group w-full sm:w-72">
+        {{-- 搜尋輸入框 --}}
+        <div class="relative group flex-1 sm:flex-none">
             <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.5">
@@ -11,7 +12,7 @@
                     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                 </svg></span>
             <input type="text" name="search" value="{{ request('search') }}"
-                class="py-2.5 pl-12 pr-6 block w-full luxury-input" placeholder="{{ __('Search products...') }}"
+                class="py-2.5 pl-12 pr-6 block w-full sm:w-72 luxury-input text-sm font-bold" placeholder="{{ __('Search products...') }}"
                 @keydown.enter.prevent="handleFilterSubmit('stock')">
         </div>
 
@@ -163,26 +164,26 @@
     </div>
 
     {{-- Mobile Card View --}}
-    <div class="grid grid-cols-1 md:grid-cols-2 xl:hidden gap-6 mt-8 items-start">
+    <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 items-start">
         @forelse($products as $product)
         @php
         $viewableWarehouseIds = $inventory_warehouses->pluck('id')->toArray();
         $totalQuantity = $product->stocks->whereIn('warehouse_id', $viewableWarehouseIds)->sum('quantity');
         @endphp
         <div x-data="{ localCardOpen: false }"
-            class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+            class="luxury-card p-5 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
 
             {{-- Card Header --}}
             <div class="flex items-center justify-between gap-4 cursor-pointer" @click.stop="localCardOpen = !localCardOpen">
-                <div class="flex items-center gap-4 min-w-0">
+                <div class="flex items-center gap-3 min-w-0">
                     <div
                         class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center overflow-hidden border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 transition-all duration-300 shadow-sm shrink-0">
                         @if($product->image_url)
                         <img src="{{ $product->image_url }}"
                             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                         @else
-                        <svg class="w-7 h-7 text-slate-400 group-hover:text-white transition-colors" fill="none"
-                            stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                        <svg class="w-6 h-6 text-slate-400 group-hover:text-white transition-colors" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                             <path stroke-linecap="round" stroke-linejoin="round"
                                 d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
                         </svg>
@@ -190,7 +191,7 @@
                     </div>
                     <div class="min-w-0">
                         <h3
-                            class="text-lg font-black text-slate-800 dark:text-slate-100 truncate group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">
+                            class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">
                             {{ $product->localized_name }}
                         </h3>
                         @if($product->barcode)
@@ -252,17 +253,8 @@
             </div>
         </div>
         @empty
-        <div class="px-6 py-20 text-center luxury-card rounded-[2rem]">
-            <div class="flex flex-col items-center">
-                <div
-                    class="w-16 h-16 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-4">
-                    <svg class="w-8 h-8 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" stroke-width="1.5"
-                            stroke-linecap="round" stroke-linejoin="round" />
-                    </svg>
-                </div>
-                <p class="text-slate-400 font-bold tracking-widest uppercase">{{ __('No products found') }}</p>
-            </div>
+        <div class="col-span-full">
+            <x-empty-state :message="__('No products found')" />
         </div>
         @endforelse
     </div>

resources/views/components/page-header.blade.php

@@ -44,6 +44,12 @@
 
 <div class="flex items-center justify-between gap-4">
     {{-- 左側：標題 + 副標題 --}}
+    <div class="flex items-center gap-4 min-w-0">
+        @if(isset($back))
+            <div class="shrink-0">
+                {{ $back }}
+            </div>
+        @endif
         <div class="min-w-0">
             <h1 class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300 truncate">
                 {{ $title }}
@@ -54,6 +60,7 @@
                 </p>
             @endif
         </div>
+    </div>
 
     {{-- 右側：Action 按鈕（透過 slot 傳入，無傳入則不渲染） --}}
     @if($slot->isNotEmpty())

resources/views/components/tab-nav.blade.php

@@ -25,9 +25,36 @@
     'model' => 'activeTab',
 ])
 
-<div
-    class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-full sm:w-fit border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto whitespace-nowrap custom-scrollbar"
+<div x-data="{ 
+        isScrollable: false, 
+        isScrolledToRight: true,
+        checkScroll() {
+            if (!this.$refs.tabContainer) return;
+            const el = this.$refs.tabContainer;
+            this.isScrollable = el.scrollWidth > el.clientWidth;
+            this.isScrolledToRight = Math.abs(el.scrollWidth - el.clientWidth - el.scrollLeft) < 5;
+        }
+    }" 
+    x-init="checkScroll(); window.addEventListener('resize', () => checkScroll())"
+    class="relative w-full sm:w-fit group">
+    
+    <div
+        x-ref="tabContainer"
+        @scroll="checkScroll"
+        class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-full sm:w-fit border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto whitespace-nowrap custom-scrollbar [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
         aria-label="Tabs"
->
+    >
         {{ $slot }}
+    </div>
+
+    <!-- Right Fade & Arrow Indicator -->
+    <div x-show="isScrollable && !isScrolledToRight" 
+         x-transition.opacity
+         class="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-slate-100 dark:from-slate-900/90 to-transparent pointer-events-none rounded-r-2xl flex items-center justify-end pr-2 z-10">
+         <div class="w-6 h-6 flex items-center justify-center bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-full shadow-sm text-slate-400 dark:text-slate-500 animate-pulse border border-slate-200/50 dark:border-slate-700/50">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" />
+            </svg>
+         </div>
+    </div>
 </div>

resources/views/guest/pass-code/show.blade.php

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>{{ __('Pass Code Ticket') }} - {{ config('app.name') }}</title>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;900&display=swap" rel="stylesheet">
+    <style>
+        [x-cloak] { display: none !important; }
+        body { font-family: 'Outfit', sans-serif; }
+    </style>
+</head>
+<body class="h-full bg-slate-50 dark:bg-slate-950 flex flex-col items-center justify-center p-6 antialiased">
+    <div class="w-full max-w-sm animate-luxury-in">
+        {{-- Header Area --}}
+        <div class="text-center mb-8">
+            <div class="inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-white/5 rounded-full shadow-sm border border-slate-100 dark:border-slate-800 mb-6">
+                <div class="w-2 h-2 rounded-full bg-cyan-500 animate-pulse"></div>
+                <span class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">{{ __('Valid Authorization') }}</span>
+            </div>
+            <h1 class="text-4xl font-black text-slate-800 dark:text-white tracking-tight mb-2 font-display uppercase italic">{{ __('Pass') }} <span class="text-cyan-500">{{ __('Code') }}</span></h1>
+            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Scan to authorize testing or maintenance') }}</p>
+        </div>
+
+        {{-- Ticket Card --}}
+        <div class="relative group">
+            {{-- Background Glow --}}
+            <div class="absolute -inset-4 bg-gradient-to-tr from-cyan-500/20 to-emerald-500/20 blur-3xl opacity-50 transition-opacity duration-500 group-hover:opacity-100"></div>
+            
+            <div class="relative luxury-card rounded-[3rem] overflow-hidden border-slate-200/50 dark:border-slate-700/50 shadow-2xl bg-white dark:bg-slate-900">
+                {{-- Machine Section --}}
+                <div class="px-8 pt-10 pb-6 border-b border-dashed border-slate-100 dark:border-slate-800 relative">
+                    {{-- Notch cutouts for ticket look --}}
+                    <div class="absolute -left-3 -bottom-3 w-6 h-6 bg-slate-50 dark:bg-slate-950 rounded-full border-r border-slate-100 dark:border-slate-800"></div>
+                    <div class="absolute -right-3 -bottom-3 w-6 h-6 bg-slate-50 dark:bg-slate-950 rounded-full border-l border-slate-100 dark:border-slate-800"></div>
+
+                    <div class="flex items-center gap-4 mb-6">
+                        <div class="w-12 h-12 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-2 flex items-center justify-center overflow-hidden">
+                            <svg class="w-6 h-6 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                            </svg>
+                        </div>
+                        <div class="flex-1">
+                            <h2 class="text-xl font-black text-slate-800 dark:text-white tracking-tight leading-tight mb-1">
+                                {{ $passCode->machine->name }}
+                            </h2>
+                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ $passCode->machine->serial_no }}</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center justify-between">
+                        <div class="text-center flex-1">
+                            <span class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Purpose') }}</span>
+                            <span class="text-sm font-black text-slate-800 dark:text-white">{{ $passCode->name ?? __('Testing') }}</span>
+                        </div>
+                        <div class="w-px h-8 bg-slate-100 dark:bg-slate-800"></div>
+                        <div class="text-center flex-1">
+                            <span class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Status') }}</span>
+                            <span class="text-xs font-black px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-500 uppercase tracking-tighter">{{ __('Active') }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                {{-- QR Section --}}
+                <div class="p-10 flex flex-col items-center">
+                    <div class="p-6 bg-white rounded-[2.5rem] shadow-xl border border-slate-100 mb-8 transform transition-transform duration-500 group-hover:scale-[1.02]">
+                        <x-qr-code :data="$passCode->code" :dynamic="false" size="300" class="w-48 h-48 sm:w-64 sm:h-64" />
+                    </div>
+
+                    <div class="text-center space-y-2 mb-2">
+                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em]">{{ __('Pass Code') }}</p>
+                        <p class="text-5xl font-black text-slate-800 dark:text-white tracking-tighter font-display italic leading-none">{{ $passCode->code }}</p>
+                    </div>
+                </div>
+
+                {{-- Expiry Area --}}
+                <div class="px-8 py-6 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-100 dark:border-slate-800 text-center">
+                    <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">{{ __('Expiry Time') }}</p>
+                    <p class="text-sm font-black text-slate-600 dark:text-slate-300">
+                        {{ $passCode->expires_at ? $passCode->expires_at->format('Y/m/d H:i') : __('Permanent') }}
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {{-- Footer Branding --}}
+        <div class="mt-12 text-center">
+            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.4em] opacity-50">{{ config('app.name') }} &copy; {{ date('Y') }}</p>
+        </div>
+    </div>
+</body>
+</html>

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

@@ -172,12 +172,30 @@
     </button>
     <div x-show="open && !sidebarCollapsed" x-collapse>
         <ul class="luxury-submenu" data-sidebar-sub>
-            <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.sales.index') ? '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.sales.index') }}"><span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Sales Records') }}</span></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.sales.pickup-codes') ? '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.sales.pickup-codes') }}"><span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Pickup Codes') }}</span></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.sales.orders') ? '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.sales.orders') }}"><span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Orders') }}</span></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.sales.promotions') ? '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.sales.promotions') }}"><span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Promotions') }}</span></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.sales.pass-codes') ? '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.sales.pass-codes') }}"><span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Pass Codes') }}</span></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.sales.store-gifts') ? '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.sales.store-gifts') }}"><span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Store Gifts') }}</span></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.sales.index') ? '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.sales.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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+                <span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Sales Records') }}</span>
+            </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.sales.pickup-codes') ? '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.sales.pickup-codes') }}">
+                <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="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h.008v.008H7.5V12.75zm3 0h.008v.008H10.5V12.75zm3 0h.008v.008H13.5V12.75zm-6 3h.008v.008H7.5v-.008zm3 0h.008v.008H10.5v-.008zm3 0h.008v.008H13.5v-.008zm-6 3h.008v.008H7.5v-.008zm3 0h.008v.008H10.5v-.008zm3 0h.008v.008H13.5v-.008zM9 6.75h.008v.008H9V6.75zm3 0h.008v.008H12V6.75zm3 0h.008v.008H15V6.75zm-6 3h.008v.008H9V9.75zm3 0h.008v.008H12V9.75zm3 0h.008v.008H15V9.75zM3.75 3h16.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V4.25C2.5 3.56 3.06 3 3.75 3z" /></svg>
+                <span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Pickup Codes') }}</span>
+            </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.sales.orders') ? '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.sales.orders') }}">
+                <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="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>
+                <span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Orders') }}</span>
+            </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.sales.promotions') ? '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.sales.promotions') }}">
+                <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.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581a1.125 1.125 0 001.591 0l4.318-4.318a1.125 1.125 0 000-1.591l-9.581-9.581c-.422-.422-.994-.659-1.591-.659zM7.5 9a1.5 1.5 0 110-3 1.5 1.5 0 010 3z" /></svg>
+                <span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Promotions') }}</span>
+            </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.sales.pass-codes') ? '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.sales.pass-codes') }}">
+                <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="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" /></svg>
+                <span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Pass Codes') }}</span>
+            </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.sales.store-gifts') ? '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.sales.store-gifts') }}">
+                <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="M20.25 7.5l-.625 12c-.07.665-.45 1.243-1.119 1.243H5.494c-.669 0-1.189-.578-1.119-1.243l-.625-12m16.5 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 7.5m17.25 0h-17.25m6 0v12m6-12v12m-9-12h12" /></svg>
+                <span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Store Gifts') }}</span>
+            </a></li>
         </ul>
     </div>
 </li>

routes/web.php

@@ -26,6 +26,7 @@ Route::get('/machines/distribution', [App\Http\Controllers\Admin\BasicSettings\M
 
 // 公開取貨憑證頁面 (無需登入)
 Route::get('/p/{slug}', [App\Http\Controllers\Guest\PickupController::class, 'show'])->name('pickup.ticket')->middleware('throttle:60,1');
+Route::get('/t/{slug}', [App\Http\Controllers\Guest\PassCodeController::class, 'show'])->name('pass-code.ticket')->middleware('throttle:60,1');
 
 Route::get('/dashboard', function () {
     return redirect()->route('admin.dashboard');