[FIX] 徹底修復商品管理分頁參數洩漏與 UI 狀態不一致問題

1. 隔離商品列表與分類管理的搜尋參數（product_search / category_search）。
2. 隔離商品列表與分類管理的公司篩選參數（product_company_id / category_company_id）。
3. 優化分頁切換邏輯，切換 Tab 時自動清理 URL 參數，解決標籤殘留問題。
4. 修復 searchable-select 組件因屬性傳遞錯誤導致的 500 Internal Server Error。
5. 統一各分頁「公司篩選」Placeholder 為「所有公司」。
6. 完成分類管理搜尋框的多語系支援（新增 Search categories... 翻譯鍵值）。
7. 優化分頁器 (Pagination) 樣式以符合極簡奢華風規範。

.agents/rules/api-rules.md

@@ -56,25 +56,32 @@ trigger: always_on
 ### 4.2 終端類 (IoT / Machine) — 須嚴格遵守 PDF 規格
 *   **API 識別碼 (workid)**: URL 中的 `{workid}` 參數固定為該 API 的功能代碼 (如 `B010`, `B017`, `B600`)，不隨機台改變。
 *   **機台識別方式**: 
-    1.  **Header**: 透過 `Authorization: Bearer <api_token>` 識別。
+    1.  **Header (推薦)**: 透過 `Authorization: Bearer <api_token>` 識別。針對 B017 等端點，雲端將自動關聯對應機台，**不需**額外帶入機台識別參數。
-    2.  **Request Body**: 透過 `machine` 或 `serial_no` 等欄位識別具體機台。
+    2.  **Request Body (相容/特定模式)**: 透過 `machine` 或 `serial_no` 等欄位識別。主要用於 B000 登入或尚未取得 Token 的引導階段 (如 B014)。
 *   **主要 Endpoint 範例**:
     *   **心跳上報 (B010)**: `POST /api/app/machine/status/B010`
     *   **交易回傳 (B600)**: `POST /api/app/B600` (Body 欄位 `req2` 為機台編號)
-    *   **貨道庫存 (B017)**: `POST /api/app/machine/reload_msg/B017`
+    *   **貨道庫存 (B017)**: `GET /api/app/machine/reload_msg/B017`
     *   **遠端出貨 (B055)**: `POST /api/app/machine/dispense/B055`
 
 ---
 
-## ⚡ 5. 高併發處理與隊列
+## ⚡ 5. IoT 高併發流向與 MQTT Gateway 整合
 
-為了系統穩定性，以下 API **嚴禁直寫資料庫**，必須進入 **Redis Queue** 異步處理：
+為了系統穩定性與高吞吐量，機台通訊的架構依循以下規範，**嚴禁直寫資料庫**：
-1.  **B010**: 心跳上傳（每 5-10 秒一次）。
-2.  **B600 / B602**: 交易與出貨紀錄。
-3.  **B220**: 零錢機庫存變動。
-4.  **B710**: 計時器狀態同步。
 
-後端應立即回傳 `202 Accepted` 或業務定義的成功碼，由 Job 背景完成數據持久化。
+### 5.1 MQTT 通訊端點 (高頻與事件驅動)
+以下高頻或即時事件，未來將**全面改採 MQTT 協議**，透過 EMQX 與 Go Gateway 橋接：
+1.  **B010 (心跳)**：機台發布至 `machine/{serial_no}/heartbeat`。
+2.  **B013 (錯誤與狀態)**：機台發布至 `machine/{serial_no}/error`。
+3.  **B600 / B602 (交易紀錄)**：機台發布至 `machine/{serial_no}/transaction`。
+
+處理管線：
+`機台 ➜ EMQX ➜ Go Gateway ➜ Redis List (mqtt_incoming_jobs) ➜ Laravel daemon (mqtt:listen) ➜ Job 異步寫入 DB`
+
+### 5.2 HTTP 通訊端點 (資料拉取與特殊事件)
+基於歷史相容、大檔傳輸（如 `B012 商品同步`）或高度安全性（如 `B014 金鑰下載`）的端點，維持使用 HTTP REST API。
+若此類 API 產生寫入行為，後端應盡可能立即回傳 `202 Accepted`，並透過 Laravel Job 在背景完成數據持久化。
 
 ---
 

.agents/rules/framework.md

@@ -6,19 +6,28 @@ trigger: always_on
 
 ## 1. 專案概述
 *   **目標**：打造一個強大且穩定的智能販賣機後台管理系統（Cloud 平台），負責管理機台、商品、銷售數據以及提供給端點機台串接的 API。
-*   **核心架構**：採用 **傳統單體式架構 (Monolithic Architecture)** 配 Laravel Blade 模板引擎進行伺服器端渲染 (SSR)。
+*   **核心架構**：採用 **Monorepo 單體式架構**，以 Laravel 為核心進行伺服器端渲染 (SSR) 與 API 服務，並搭配 **Go MQTT Gateway** 作為高併發 IoT 通訊的前置接收層。兩者透過 **Redis** 進行異步橋接，確保職責分離與系統穩定性。
 *   **工作流程**：後端處理業務邏輯與資料庫存取，並透過 Blade 引擎渲染包含 Tailwind CSS 類別的 HTML。前端互動行為由輕量級 Alpine.js 負責，UI 元件以 Preline UI 為主體。
 
 ## 2. 技術棧 (Tech Stack)
+
+### 2.1 後端核心 (Laravel)
 *   **後端框架**：PHP 8.5 / Laravel 12
-*   **核心組件**：Redis (用於高併發 IoT 隊列與快取，為系統穩定之必要條件)
+*   **核心組件**：Redis (用於高併發 IoT 隊列、MQTT 橋接與快取，為系統穩定之必要條件)
+*   **資料庫**：MySQL 8.0
+*   **開發環境**：Laravel Sail (Docker / WSL2)
+
+### 2.2 IoT 通訊層 (MQTT Gateway)
+*   **MQTT Broker**：EMQX 5 (負責維持機台長連線與訊息路由)
+*   **Gateway 語言**：Go (負責訂閱 MQTT Topic、預處理訊息、轉發至 Redis)
+*   **橋接機制**：Redis List (`mqtt_incoming_jobs`)，由 Laravel 常駐指令 (`mqtt:listen`) 消費
+
+### 2.3 前端
 *   **前端視圖 (View)**：Laravel Blade
 *   **前端互動 (JS)**：Alpine.js (專注於行為，不負責渲染)
 *   **介面與樣式 (CSS)**：Tailwind CSS + Preline UI (直接寫作於 Blade 模板中)。
     *   **重要規範**：Preline UI 僅作為「原子組件」與「JS 互動邏輯」的參考庫。整體的「佈局」與「美學」必須嚴格遵守「極簡奢華風 UI 實作規範 (SKILL.md)」。
 *   **前端建置工具**：Vite
-*   **資料庫**：MySQL 8.0
-*   **開發環境**：Laravel Sail (Docker / WSL2)
 
 ## 3. 目錄結構與慣例
 
@@ -29,31 +38,111 @@ trigger: always_on
 *   **Routes**：`routes/web.php` 用於後台管理介面；`routes/api.php` 提供外部或機台調用介面 (需 V1 版本化)。
 *   **Services** (建議)：`app/Services/{Domain}/`，將商業邏輯與資料異動封裝於 Service 中。
 *   **Traits**：`app/Traits/ApiResponse.php` 用於統一 API JSON 回傳格式。
-*   **Jobs**：`app/Jobs/{Domain}/`，**高併發 IoT 場景之必要實作**。所有日誌、心跳上報必須進入 Redis Queue 進行背景異步處理，嚴禁在 API 直連 DB 寫入日誌。
+*   **Jobs**：`app/Jobs/{Domain}/`，用於異步處理 IoT 資料寫入、通知發送等背景任務。
+*   **Console Commands**：`app/Console/Commands/`，包含 MQTT 橋接守護進程 (`mqtt:listen`) 等常駐指令。
 
 ### 3.2 前端 (Blade / Tailwind / Alpine)
 *   **Views (頁面)**：位於 `resources/views/`。通常依功能建立資料夾（如 `resources/views/admin/machines/index.blade.php`）。
 *   **Layouts (版面)**：位於 `resources/views/layouts/`。定義全站的共用版面結構（如 header, sidebar, footer）。
 *   **Components (組件)**：位於 `resources/views/components/`。封裝可重用的 Blade 元件（如 Button, Modal, Table），支援透過 `<x-button>` 語法呼叫。
 
-## 4. 開發標準 (Coding Standards)
+### 3.3 MQTT Gateway (Go)
+Go 專案以 Monorepo 形式置於專案根目錄下的 `mqtt-gateway/` 資料夾，獨立於 Laravel 程式碼：
+*   **進入點**：`mqtt-gateway/main.go`
+*   **模組管理**：`mqtt-gateway/go.mod` / `go.sum`
+*   **內部分層**：
+    *   `mqtt-gateway/internal/handler/` — 各 Topic 的訊息處理邏輯（如 heartbeat、transaction、error）。
+    *   `mqtt-gateway/internal/bridge/` — Redis 橋接層，負責將處理後的 JSON 推入 `mqtt_incoming_jobs` List。
+    *   `mqtt-gateway/config/` — 環境變數與 EMQX / Redis 連線設定。
+
+> [!CAUTION]
+> Go Gateway 的職責僅限於「接收、驗證、轉發」。**嚴禁**在 Go 中實作任何商業邏輯（如庫存扣減、通知發送），所有業務處理必須統一在 Laravel Service 層完成。
+
+## 4. IoT 通訊架構 (MQTT + HTTP 雙軌制)
+
+本系統的機台通訊採用 **MQTT 與 HTTP 雙軌並行** 的策略，依據通訊特性選擇最適合的協議。
+
+### 4.1 整體資料流向
+
+```
+機台 (Android APP)
+     │
+     ├─ [高頻/即時] MQTT 長連線 ──→ EMQX Broker ──→ Go Gateway ──→ Redis List ──→ Laravel mqtt:listen ──→ Job ──→ MySQL
+     │
+     └─ [低頻/大檔] HTTP REST ──→ Laravel API Controller ──→ (必要時) Job ──→ MySQL
+```
+
+### 4.2 MQTT 通訊端點 (高頻與事件驅動)
+以下端點因高頻率或即時性需求，採用 MQTT 協議通訊：
+
+| API 代碼 | Topic 格式 | 用途 | QoS |
+| :--- | :--- | :--- | :--- |
+| B010 | `machine/{serial_no}/heartbeat` | 心跳上報 (每 10 秒) | 0 |
+| B013 | `machine/{serial_no}/error` | 故障與異常狀態上報 | 1 |
+| B600 | `machine/{serial_no}/transaction` | 交易紀錄回傳 | 1 |
+
+**雲端→機台指令下發**：透過 `machine/{serial_no}/command` Topic 推送，取代原本 B010 Response 中的 `status` 欄位輪詢機制，實現毫秒級即時指令。
+
+### 4.3 HTTP 通訊端點 (資料拉取與敏感操作)
+以下端點因資料量大、安全性要求高或為 Request/Response 模式，維持使用 HTTP REST API：
+
+| API 代碼 | 用途 | 維持 HTTP 的原因 |
+| :--- | :--- | :--- |
+| B000 | 維運人員登入 | 無狀態認證，HTTP 更自然 |
+| B012 | 商品配置同步 | 大量資料的 GET 拉取 |
+| B014 | 金鑰與參數下載 | 高安全性敏感操作，需嚴格 RBAC |
+| B009 | 貨道庫存回報 | 低頻操作，由維運人員觸發 |
+
+### 4.4 Redis 橋接機制 (Go ↔ Laravel)
+Go Gateway 與 Laravel 之間透過 Redis List 進行單向異步橋接：
+
+*   **Redis Key**：`mqtt_incoming_jobs`
+*   **Go 端 (生產者)**：將 MQTT 收到的 Payload 包裝成標準 JSON 後，執行 `RPUSH mqtt_incoming_jobs {json}`。
+*   **Laravel 端 (消費者)**：常駐指令 `php artisan mqtt:listen` 持續執行 `BLPOP mqtt_incoming_jobs`，取得 JSON 後解碼並分派至對應的 Laravel Job (如 `ProcessHeartbeat`, `ProcessTransaction`)。
+
+**JSON 橋接格式規範**：
+```json
+{
+  "type": "heartbeat",
+  "serial_no": "M-001",
+  "received_at": "2026-04-14T09:00:00+08:00",
+  "payload": {
+    "current_page": 1,
+    "firmware_version": "1.0.5",
+    "temperature": 25.5
+  }
+}
+```
+
+> [!IMPORTANT]
+> **為何不讓 Go 直接寫入 Laravel Queue？** 因為 Laravel Queue 的 Payload 包含 PHP 序列化物件字串 (`serialize()`)，Go 無法安全產生此格式。透過獨立的 Redis List + 純 JSON，可徹底解耦兩端的技術依賴。
+
+### 4.5 MQTT 連線認證
+機台連線 EMQX 時，使用 `serial_no` 作為 Username、`api_token` 作為 Password。驗證流程：
+
+1.  **Laravel 端 (Token 派發時)**：B014 下發 `api_token` 時，同步執行 `Redis::set("machine_auth:{serial_no}", hash(api_token))`。
+2.  **EMQX 端 (連線驗證時)**：配置 Redis Auth Plugin，直接查詢 Redis 進行極速驗證 (毫秒級)，不經過 MySQL。
+3.  **Token 更新/撤銷時**：Laravel 更新或刪除機台 Token 時，必須同步更新或刪除 Redis 中的對應快取。
+
+## 5. 開發標準 (Coding Standards)
 *   **命名規範**：
     *   Controllers: `PascalCaseController.php` (例如 `MachineController.php`)
     *   Models: `PascalCase.php` (例如 `Machine.php`)
     *   Blade Views: `kebab-case.blade.php` 或按資源名稱 (例如 `index.blade.php`, `create.blade.php`)
     *   Routes uri: `kebab-case` (例如 `/machine-logs`)
+    *   Go 檔案: `snake_case.go` (例如 `heartbeat_handler.go`)
 *   **回傳格式**：
     *   Web 路由：回傳 `view()`，表單驗證失敗時直接使用 Laravel 內建的 redirect with errors。
     *   API 路由：回傳標準 JSON 格式的 `JsonResponse`。
 
-## 5. UI 與前端開發指南
+## 6. UI 與前端開發指南
 *   **樣式撰寫**：全面使用 Tailwind CSS utility classes，**避免撰寫自訂 CSS**（除非少數特定動畫或覆寫）。
 *   **UI 元件庫**：遵循 **Preline UI** 的類別與 HTML 結構進行開發。
 *   **前端腳本**：
     *   優先使用 **Alpine.js** (`x-data`, `x-show`, `@click` 等) 在 HTML 標籤內完成簡單的 DOM 狀態切換與互動邏輯。
     *   避免在 Blade 內撰寫冗長的 `<script>` Vanilla JS；若邏輯過於複雜，可將 Alpine state 獨立成 js 檔案再於 Vite 引入，但原則上保持輕量。
 
-## 6. 多語系 I18n 規範 (Multi-language Standards)
+## 7. 多語系 I18n 規範 (Multi-language Standards)
 *   **視圖開發**：所有使用者可見的文字、按鈕、提示訊息，必須使用 Laravel 的 `@lang('key')` 或 `__('key')` 函式包裹。
 *   **語系 Key 命名**：語系 Key 必須採用 **英文原始詞彙 (English phrases)** 作為 Key 名稱為原則，以提高代碼可讀性並作為預設回退（除非該字串過長，才建議使用點號分隔的 key）。
     *   範例：使用 `__('Account Settings')`。
@@ -61,7 +150,7 @@ trigger: always_on
     *   主語系檔案位於 `lang/` 目錄。
     *   開發新功能時，必須同步更新以下三個 JSON 翻譯檔：`zh_TW.json` (主要)、`en.json` (預設)、`ja.json` (日文)。
 
-## 7. AI 協作規則 (給 Antigravity AI)
+## 8. AI 協作規則 (給 Antigravity AI)
 *   **角色設定**：你是一位專業的全端開發工程師助手。
 *   **代碼生成指令**：
     *   所有的解釋說明請使用 **繁體中文**。
@@ -70,23 +159,24 @@ trigger: always_on
     *   **【多語系強制要求】** 任何新增的 Blade UI 區塊，禁止硬編碼 (Hard-coded) 中文或英文。必須使用 `__('...')` 並同步在 `lang/*.json` 補上翻譯。
     *   生成 UI 區塊時，必須優先參考與產生 **Preline UI** 風格與結構的標記語法。
     *   開發新功能時，請建立標準的 Controller 搭配對應的 `resources/views/.../` 目錄。
+    *   **【Go Gateway 開發】** 修改 `mqtt-gateway/` 內的 Go 程式碼時，嚴禁加入商業邏輯。Go 僅負責訊息接收、格式轉換與 Redis 轉發。
 
-## 8. 運行機制 (Docker / Sail)
+## 9. 運行機制 (Docker / Sail)
 由於專案運行在 Docker 容器環境中，請勿直接在宿主機 (Host) 執行 php 或 composer 指令。請使用專案內建的 `sail` 指令：
 
-*   **啟動環境**：`./vendor/bin/sail up -d`
+*   **啟動環境**：`./vendor/bin/sail up -d`（將同時啟動 Laravel、MySQL、Redis、EMQX、Go Gateway）
 *   **執行 PHP 指令**：`./vendor/bin/sail php -v`
 *   **執行 Artisan 指令**：`./vendor/bin/sail artisan route:list`
 *   **執行 Composer**：`./vendor/bin/sail composer install`
 *   **執行 Node/NPM**：`./vendor/bin/sail npm run dev`
 
-## 8. 部署與查修環境 (CI/CD)
+## 10. 部署與查修環境 (CI/CD)
 *   **自動化部署**：專案具備基於 Gitea Actions 的 CI/CD 自動化部署流程 (`.gitea/workflows/`)。
 *   **Demo 環境 (對應 `demo` 分支)**：
     *   透過 `deploy-demo.yaml`，合併或推送到 `demo` 分支會自動部署至 `demo-cloud.taiwan-star.com.tw`。
     *   登入伺服器查修：`ssh gitea_work`，路徑為 `/var/www/star-cloud-demo`。
 
-## 9. 瀏覽器測試規範 (Browser Testing)
+## 11. 瀏覽器測試規範 (Browser Testing)
 當需要進行瀏覽器自動化測試或手動驗證時，必須遵守以下連線資訊：
 
 *   **本地測試網址**：`http://localhost:8090/` (注意：非 8000 或 8080)

.agents/rules/skill-trigger.md

@@ -14,7 +14,7 @@ Skills 位於 `.agents/skills/`，採漸進式揭露以節省 Token。
 
 | 觸發詞 / 情境 | 對應 Skill | 路徑 |
 |---|---|---|
-| 機台通訊, IoT, 日誌上報, Log Ingestion, 異步隊列, Queue, Heartbeat, 心跳發報 | **IoT 通訊與高併發處理規範** | `.agents/skills/iot-communication/SKILL.md` |
+| 機台通訊, IoT, 日誌上報, Log Ingestion, 異步隊列, Queue, Heartbeat, 心跳發報, MQTT, Topic, Broker, EMQX | **IoT 通訊與高併發處理規範 / MQTT 通訊規範** | `.agents/skills/iot-communication/SKILL.md` <br> `.agents/skills/mqtt-communication-specs/SKILL.md` |
 | B010, B017, B600, B055, API 規格, 通訊協議, 狀態碼, 頁面碼, 範例, JSON | **API 技術規格與通訊協議規範** | `.agents/skills/api-technical-specs/SKILL.md` |
 | 介面, UI, 設計, 佈局, CSS, Tailwind, 奢華, 深色模式, Light Mode, Dark Mode, Blade, 樣式, 間距, 陰影, 動畫, 畫面, 頁面 | **極簡奢華風 UI 實作規範** | `.agents/skills/ui-minimal-luxury/SKILL.md` |
 | 查詢、撈資料、Query、Controller、下拉選單、Eloquent、N+1、`->get()`、select、交易、Transaction、Bulk、分頁、索引 | **資料庫與 ORM 最佳實踐規範** | `/home/mama/.gemini/antigravity/global_skills/database-best-practices/SKILL.md` |

.agents/skills/api-technical-specs/SKILL.md

@@ -12,8 +12,18 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 - **類型嚴格**：文件定義的類型 (Integer, Float, String) 必須在後端 Model 與前端文件中心嚴格遵守。
 
 ## 2. 身份認證 (Authentication)
-- **Bearer Token**：所有 API 必須在 Header 帶入 Authorization: Bearer <api_token>。
+本系統採用兩階段認證模式：
-- **身分綁定**：後端透過 Token 自動識別 machine_id，禁止在 Body 帶入 machine 或 key 欄位。
+
+### 2.1 維運人員認證 (User Authentication)
+- **核發端點**：B000 (登入)。
+- **使用端點**：B014 (參數下載)。
+- **方式**：使用 Laravel Sanctum 核發之 **User Token**。
+- **Header**：`Authorization: Bearer <user_token>`。
+
+### 2.2 機台通訊認證 (Machine Authentication)
+- **適用 API**：B010, B012, B013, B600 等後續通訊。
+- **方式**：使用機台專屬之 **api_token**。
+- **Header**：`Authorization: Bearer <api_token>`。
 
 ---
 
@@ -24,6 +34,7 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 
 - **URL**: POST /api/v1/app/admin/login/B000
 - **Request Body:**
+
 | 參數 | 類型 | 必填 | 說明 | 範例 |
 | :--- | :--- | :--- | :--- | :--- |
 | machine | String | 是 | 機台編號 (serial_no) | M-001 |
@@ -35,9 +46,11 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 - **Response Body:**
 > [!IMPORTANT]
 > 為了相容 Java APP 現有邏輯，這裡嚴格規定成功必須回傳字串 Success。
+
 | 參數 | 類型 | 說明 | 範例 |
 | :--- | :--- | :--- | :--- |
 | message | String | 驗證結果 (Success 或 Failed) | Success |
+| token | String | **臨時身份認證 Token** (用於 B014) | 1|abcdefg... |
 
 ---
 
@@ -48,6 +61,7 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 - **Request Body:** 無 (GET 請求)
 
 - **Response Body:**
+
 | 參數 | 類型 | 說明 | 範例 |
 | :--- | :--- | :--- | :--- |
 | success | Boolean | 請求是否成功 | true |
@@ -74,12 +88,14 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 
 - **URL**: PUT /api/v1/app/products/supplementary/B009
 - **Request Body:**
+
 | 參數 | 類型 | 必填 | 說明 | 範例 |
 | :--- | :--- | :--- | :--- | :--- |
 | account | String | 是 | 操作人員帳號 | 0999123456 |
 | data | Array | 是 | 貨道數據陣列 | [{"tid":"1", "t060v00":"1", "num":"10"}] |
 
 - **data 陣列內部欄位：**
+
 | 欄位 | 類型 | 說明 | 範例 |
 | :--- | :--- | :--- | :--- |
 | tid | Integer | 貨道編號 (Slot No) | 1 |
@@ -92,6 +108,7 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 > 當後端收到 B009 時，會根據 type 自動從該商品的配置中選取 spring_limit 或 track_limit 並自動更新該貨道的 max_stock 欄位。機台端無需手動計算上限。
 
 - **Response Body (Success 200):**
+
 | 參數 | 類型 | 說明 | 範例 |
 | :--- | :--- | :--- | :--- |
 | success | Boolean | 同步是否成功 | true |
@@ -107,6 +124,7 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 - **URL**: POST /api/v1/app/machine/status/B010
 - **Authentication**: Bearer Token (Header)
 - **Request Body:**
+
 | 參數 | 類型 | 必填 | 說明 | 範例 |
 | :--- | :--- | :--- | :--- | :--- |
 | current_page | Integer | 是 | 當前頁面代碼 (見下表) | 1 |
@@ -119,6 +137,7 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 | log_payload | Object | 否 | 額外日誌 JSON 對象 | {"code":500} |
 
 - **Response Body:**
+
 | 參數 | 類型 | 說明 | 範例 |
 | :--- | :--- | :--- | :--- |
 | success | Boolean | 請求是否處理成功 | true |
@@ -175,3 +194,169 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
 | t060v41 | String | 物料編碼 (Material Code) | SKU-001 |
 | spring_limit | Integer | **彈簧貨道上限** (建議使用此欄位) | 10 |
 | track_limit | Integer | **履帶貨道上限** (建議使用此欄位) | 15 |
+
+---
+
+### 3.6 B013: 機台故障與異常狀態上報 (Error/Status Report)
+用於接收機台發出的即時硬體狀態代碼（如卡貨、門未關），並自動由雲端後端翻譯為易讀日誌。
+
+- **URL**: POST /api/v1/app/machine/error/B013
+- **Authentication**: Bearer Token (Header)
+- **Request Body:**
+
+| 參數 | 類型 | 必填 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- | :--- |
+| tid | Integer | 否 | 涉及之貨道編號 (Slot No) | 12 |
+| error_code | String | 是 | 硬體狀態代碼 (4 位 16 進位) | "0403" |
+
+- **回應 (Success 202):**
+
+| 參數 | 類型 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- |
+| success | Boolean | 請求已接收 | true |
+| code | Integer | 200 | 200 |
+
+#### B013 硬體代碼對照表 (由 MachineService 自動翻譯)
+
+| 代碼 | 英文 Key (i18n) | 級別 | 範例繁中翻譯 |
+| :--- | :--- | :--- | :--- |
+| **0402** | Dispense successful | info | 出貨成功 |
+| **0403** | Slot jammed | error | **貨道卡貨** (重大異常) |
+| **0202** | Product empty | warning | 貨道缺貨 |
+| **0412** | Elevator rise error | error | 昇降機上升異常 |
+| **0415** | Pickup door error | error | 取貨門異常 |
+| **5402** | Pickup door not closed | warning | **取貨門未關** (警告) |
+| **5403** | Elevator failure | error | 昇降系統故障 |
+
+---
+
+### 3.7 B014: 機台參數與金鑰下載 (Config Download)
+用於機台引導階段 (Provisioning)，向雲端請求支付金鑰、發票設定及機台正式 API Token。
+
+- **URL**: GET /api/v1/app/machine/setting/B014
+- **Authentication**: **User Token** (Sanctum Header)
+- **Request Body:** 無 (由 Query String 帶入 `machine` 參數)
+
+| 參數 | 類型 | 必填 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- | :--- |
+| machine | String | 是 | 機台編號 (serial_no) | M-001 |
+
+- **Response Body (Success 200):**
+
+| 欄位 (Key) | 說明 | 備註 |
+| :--- | :--- | :--- |
+| **t050v01** | 機台序號 | 即 machine_id |
+| **api_token** | **機台正式 Token** | 初始化後應存於本地，後續 API 認證用 |
+| **t050v41** | 玉山特店編號 | ESUN Merchant ID |
+| **t050v42** | 玉山終端編號 | ESUN Terminal ID |
+| **t050v43** | 玉山 Hash Key | ESUN Hash |
+| **t050v34** | 發票特店 ID | Invoice Merchant ID |
+| **t050v35** | 發票 Hash Key | Invoice Key |
+| **t050v36** | 發票 Hash IV | Invoice IV |
+| **TP_APP_ID** | 趨勢支付 AppID | TrendPay ID |
+| **TP_APP_KEY** | 趨勢支付 Key | TrendPay Key |
+
+> [!CAUTION]
+> **安全性規範**：B014 會回傳敏感金鑰與正式 Token，背景必須強制進行 RBAC 校驗。只有當前登入的人員具備該機台管理權限時，後端才允許發放資料。
+
+---
+
+### 3.8 B017: 貨道庫存同步 (Slot Synchronization)
+用於機台端獲取目前所有貨道的最新庫存、效期與狀態。通常由 B010 回應 `status: 49` 觸發。
+
+- **URL**: GET /api/v1/app/machine/reload_msg/B017
+- **Authentication**: Bearer Token (Header)
+- **Request Body:** 無 (由 Token 自動識別機台)
+
+- **Response Body:**
+
+| 參數 | 類型 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- |
+| success | Boolean | 請求是否成功 | true |
+| code | Integer | 200 | 200 |
+| data | Array | 貨道數據陣列 (依 slot_no 排序) | 見下表 |
+
+**data 陣列內部欄位：**
+
+| 欄位 | 類型 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- |
+| tid | String | 貨道編號 | "1" |
+| num | Integer | 當前庫存數量 | 10 |
+| expiry_date | String | 商品效期 | "2026-12-31" |
+| batch_no | String | 批號 | "B202604" |
+| product_id | Integer | 商品 ID | 1 |
+| capacity | Integer | 貨道容量上限 | 15 |
+| status | String | 貨道狀態 ("1": 啟用, "0": 停用) | "1" |
+
+> [!IMPORTANT]
+> **同步機制**：B017 為全量同步。App 收到回應後應更新本地資料庫對應貨道的數值。成功請求後，雲端會自動將相關的 `reload_stock` 指令標記為 `success`。
+
+---
+
+### 3.9 B024: 取貨碼/通行碼驗證與消耗回報 (Access Code Verify & Report)
+用於處理機台端的代碼取貨流程。包含驗證代碼有效性（驗證階段）與確認出貨完成後的狀態消耗（回報階段）。
+
+- **URL**: POST|PUT /api/v1/app/sell/access-code/B024
+- **Authentication**: Bearer Token (Header)
+- **Request Body (POST - 驗證階段):**
+
+| 參數 | 類型 | 必填 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- | :--- |
+| passCode | String | 是 | 使用者輸入的取貨碼/通行碼 | "12345678" |
+
+- **Response Body (POST - 驗證成功 200):**
+雲端將回傳該碼對應的權限或待出貨商品資訊。
+
+| 參數 | 類型 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- |
+| res1 | String | 該代碼在雲端的關聯 ID | "99" |
+| res2 | String | 操作模式 (1: 出貨, 2: 僅驗證) | "1" |
+| res3 | String | 預計出貨商品 ID | "5" |
+| res4 | String | 折扣金額或活動標籤 | "0.0" |
+
+- **Request Body (PUT - 回報階段):**
+當機台端確認實體出貨成功後，必須發送此請求以耗刷該代碼。
+
+| 參數 | 類型 | 必填 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- | :--- |
+| accessCodeId | String | 是 | 驗證階段取得的 res1 (ID) | "99" |
+| status | String | 是 | 出貨結果 (1: 成功, 0: 失敗) | "1" |
+
+---
+
+### 3.10 B027: 贈品碼/優惠券驗證與消耗回報 (Free Gift Verify & Report)
+用於處理行銷贈品券、0 元購活動或特定的優惠券核銷流程。
+
+- **URL**: POST|PUT /api/v1/app/sell/free-gift/B027
+- **Authentication**: Bearer Token (Header)
+- **運作模式**:
+    - **POST**: 提交 `passCode` 驗證該贈品券是否有效。成功後雲端會回傳對應活動 ID 與商品配置。
+    - **PUT**: 當該贈品（0 元商品）出貨完成後，向雲端回報消耗，確保優惠券不會重複核銷。
+
+> [!NOTE]
+> B027 與 B024 的邏輯具備高度對稱性，區別在於 B027 通常綁定的是特定的行銷活動 (Campaign) 與 0 元出貨邏輯。
+
+---
+
+### 3.11 B055: 遠端指令出貨控制 (Remote Dispense / Force Open)
+用於遠端手動驅動機台出貨。通常用於補償使用者、測試機台或客服協助開門的情景。
+
+- **URL**: GET|PUT /api/v1/app/machine/dispense/B055
+- **Authentication**: Bearer Token (Header)
+- **運作模式**:
+    - **GET (查詢)**：當 B010 收到 `status: 85` 時呼叫。雲端會回傳待執行的貨道編號與指令 ID。
+    - **PUT (回報)**：實體出貨完成後回饋結果，以便雲端將該指令標記為「已執行」。
+
+- **Response Body (GET - 查詢階段):**
+
+| 參數 | 類型 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- |
+| data | Array | 指令物件陣列 | [{"res1": "ID", "res2": "SlotNo"}] |
+
+- **Request Body (PUT - 回報階段):**
+
+| 參數 | 類型 | 必填 | 說明 | 範例 |
+| :--- | :--- | :--- | :--- | :--- |
+| id | String | 是 | 雲端下發的指令 ID | "99" |
+| type | String | 是 | 出貨類型代碼 (0: 成功, 其他: 失敗) | "0" |
+| stock | String | 是 | 出貨後的貨道剩餘數量 | "9" |

.agents/skills/iot-communication/SKILL.md

@@ -9,13 +9,25 @@ description: 規範智能販賣機與 Cloud 平台間的高頻通訊處理流程
 
 ## 1. 處理管線 (Processing Pipeline)
 
-所有來自機台的非即時性資料（日誌、心跳、狀態上報）必須遵循以下 pipeline：
+所有來自機台的非即時性資料（日誌、心跳、狀態上報）必須遵循以下 pipeline。依據通訊協議不同，進入點有兩條路徑：
 
+### 1.1 HTTP 管線 (低頻/大檔操作)
+適用於 B000, B009, B012, B014, B017 等低頻、同步需求或大資料量的端點：
 1.  **API Controller (接收層)**：驗證 Request 合法性，隨即分派 (Dispatch) 任務至 Queue，並回傳 `202 Accepted`。
 2.  **Job (異步層)**：由背景 Worker 讀取隊列任務，呼叫對應 Service 處理。
 3.  **Service (邏輯層)**：封裝商業邏輯，更新資料庫。
 4.  **Model (儲存層)**：執行資料存取。
 
+### 1.2 MQTT 管線 (高頻/即時操作)
+適用於 B010 (心跳), B013 (異常), B600 (交易) 等高頻或即時性端點：
+1.  **Go Gateway (接收層)**：訂閱 EMQX Topic，提取 `serial_no`，包裝成標準 JSON。
+2.  **Redis List (橋接層)**：Go 執行 `RPUSH mqtt_incoming_jobs {json}`。
+3.  **Laravel `mqtt:listen` (消費層)**：常駐指令 `BLPOP` 取出 JSON，根據 `type` 分派至對應 Job。
+4.  **Job ➜ Service ➜ Model**：與 HTTP 管線後半段相同。
+
+> [!TIP]
+> 兩條管線的 **Job / Service / Model 層完全共用**，差異僅在「進入點」。這確保了業務邏輯不會因為通訊協議不同而分裂。
+
 > [!IMPORTANT]
 > **嚴禁**在 API Controller 直接進行資料庫寫入操作（針對機台發訊端點）。
 
@@ -53,9 +65,14 @@ public function handle(MachineService $service): void
 
 ## 4. 速率限制 (Rate Limiting)
 
-- 所有的 IoT API 必須在 `routes/api.php` 中使用 `throttle:api` 或自定義 Middleware。
+### 4.1 HTTP 端點
+- 所有的 IoT HTTP API 必須在 `routes/api.php` 中使用 `throttle:api` 或自定義 Middleware。
 - 針對單一機台 ID 應限制其每一分鐘的最高連線數，防止遭受攻擊或機台 Bug 導致的連線暴衝。
 
+### 4.2 MQTT 端點
+- 限速由 **EMQX Broker** 的 Rate Limiting 功能負責（非 Laravel Middleware）。
+- Go Gateway 層可額外實作簡易的 Token Bucket，當某台機台每秒超過閾值時丟棄訊息並記錄 Warning Log。
+
 ## 5. 檢核項目 (Checklist)
 - [ ] 是否使用了 `ApiResponse` Trait？
 - [ ] 業務邏輯是否已封裝至 `App\Services`？
@@ -64,13 +81,16 @@ public function handle(MachineService $service): void
 ## 6. API 規格定義 (API Specifications)
 
 > [!IMPORTANT]
-> **規格分離原則**：本技能僅規範「通訊處理邏輯」。關於具體的 API 欄位、參數命名、狀態代碼對照與範例，請務必參閱專屬技能規範：
+> **規格分離原則**：本技能僅規範「通訊處理邏輯」。關於具體的欄位定義與資料格式，請參閱對應的專屬技能規範：
-> - **[API 技術規格與通訊協議規範](file:///home/mama/projects/star-cloud/.agents/skills/api-technical-specs/SKILL.md)**
+> - **HTTP 端點**：[API 技術規格與通訊協議規範](file:///home/mama/projects/star-cloud/.agents/skills/api-technical-specs/SKILL.md)
+> - **MQTT 端點**：[MQTT 即時通訊與 Topic 規範](file:///home/mama/projects/star-cloud/.agents/skills/mqtt-communication-specs/SKILL.md)
 
 ### 常見端點處理模式
-1.  **B010 (心跳)**：高頻點，必須進入 Redis Queue。更新 `last_heartbeat_at` 與感測器快照。
+1.  **B010 (心跳)**：高頻點，走 **MQTT 管線** (`machine/+/heartbeat`)。更新 `last_heard_at` 與感測器快照。
-2.  **B600 (交易)**：高價值點，必須進入任務隊列並支援重試。建立 `Transaction` 紀錄。
+2.  **B013 (異常)**：事件驅動點，走 **MQTT 管線** (`machine/+/error`)。寫入 `machine_logs` 並觸發告警。
-3.  **B017 (貨道)**：回覆較大資料量，應確保 Service 層具備緩存 (Cache) 機制。
+3.  **B600 (交易)**：高價值點，走 **MQTT 管線** (`machine/+/transaction`)。建立 `Transaction` 紀錄並支援重試。
+4.  **B012 (商品同步)**：大資料量，走 **HTTP 管線**。應確保 Service 層具備緩存 (Cache) 機制。
+5.  **B055 (遠端出貨)**：雲端下發指令，走 **MQTT 下行管線** (`machine/{id}/command`)。
 
 ---
 

.agents/skills/mqtt-communication-specs/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: MQTT 即時通訊與 Topic 規範
+description: 定義 Star Cloud 與終端機台 (IoT) 之間的 MQTT 全域通訊拓撲、主題 (Topic) 結構、資料載體 (Payload) 格式與安全性認證機制。
+---
+
+# MQTT 即時通訊與 Topic 規範 (MQTT Protocol Specs)
+
+本文件定義機台與 Star Cloud 之間的高併發即時通訊標準。MQTT 主要用於處理高頻率且對即時性要求高的訊息（如心跳、遠端指令），與 HTTP REST API 形成雙軌互補架構。
+
+## 1. 連線基礎設定 (Connection Basics)
+
+### 1.1 Broker 資訊
+- **協議版本**：MQTT v3.1.1 (相容性最高)
+- **預設埠號**：1883 (TCP / 測試用), 8883 (SSL/TLS / 正式用)
+- **Keep-Alive**：建議設定為 30 ~ 60 秒。
+
+### 1.2 身份認證 (Authentication)
+機台連線時必須提供以下憑據：
+- **Username**：機台編號 (`serial_no`)，例如 `M-001`。
+- **Password**：機台正式 Token (`api_token`)，由 B014 API 取得。
+- **Client ID**：建議格式為 `SC_{serial_no}_{random_suffix}`，確保唯一性。
+
+---
+
+## 2. 主題架構 (Topic Topology)
+
+我們採用目錄式的層級結構，方便未來進行萬台設備的管理與 ACL 權限切分。
+
+| 主題名稱 (Topic) | 方向 | QoS | 用途說明 |
+| :--- | :--- | :--- | :--- |
+| `machine/{serial_no}/heartbeat` | 設備 ➜ 雲端 | 0 | 每 10 秒上報心跳、溫度、目前的頁面碼。 |
+| `machine/{serial_no}/error` | 設備 ➜ 雲端 | 1 | 發生硬體故障、卡貨或門未關時立即上報。 |
+| `machine/{serial_no}/transaction` | 設備 ➜ 雲端 | 1 | 交易完成、出貨結果的回報。 |
+| `machine/{serial_no}/command` | 雲端 ➜ 設備 | 1 | 雲端下發的即時指令（出貨、更新、重啟）。 |
+
+---
+
+## 3. 資料載體規範 (Payload Definitions)
+
+所有 Payload 統一採用 **JSON** 格式，字母一律為 **snake_case**。
+
+### 3.1 心跳上報 (Heartbeat) - `machine/{id}/heartbeat`
+比照原 B010 邏輯，但去除不必要的 HTTP Header 開銷。
+
+```json
+{
+  "current_page": 1,
+  "firmware_version": "1.0.5",
+  "temperature": 25.5,
+  "door_status": 0,
+  "timestamp": "2026-04-14T09:00:00+08:00"
+}
+```
+
+### 3.2 異常上報 (Error/Event) - `machine/{id}/error`
+比照原 B013 邏輯。
+
+```json
+{
+  "tid": 12,
+  "error_code": "0403",
+  "log": "Slot jammed at slot 12",
+  "timestamp": "2026-04-14T09:05:00+08:00"
+}
+```
+
+### 3.3 雲端指令 (Downstream Commands) - `machine/{id}/command`
+這是雲端主動下發給機台的訊息，取代原本 B010 Response 的輪詢等待。
+
+```json
+{
+  "command": "dispense",
+  "payload": {
+    "slot_no": 5,
+    "transaction_id": "T202604140001"
+  },
+  "message_id": "MSG_123456789"
+}
+```
+**常用指令集：**
+- `reboot`: 機台重啟。
+- `reload_config`: 重新下載參數 (B014)。
+- `reload_products`: 重新同步商品 (B012)。
+- `dispense`: 遠端出貨指令 (B055)。
+
+---
+
+## 4. 安全與 QOS 規範
+
+1. **存取控制 (ACL)**：EMQX Broker 必須設定 ACL，禁止機台 A 訂閱機台 B 的 Topic。機台僅能訂閱與發布包含自身 `serial_no` 的路徑。
+2. **QoS 策略**：
+   - **QoS 0**：適用於高頻率心跳，即使掉一兩次包也不影響系統判斷。
+   - **QoS 1**：適用於交易與指令，確保「至少送達一次」。App 端收到指令後應回覆回執。
+3. **遺囑訊息 (Last Will and Testament)**：
+   機台 Connect 時應設定 Last Will 於 `machine/{serial_no}/heartbeat`，Payload 為 `{"status": "offline"}`。當連線異常中斷時，雲端能立刻得知。
+
+---
+
+## 5. 與 REST API 的同步關係
+當 MQTT 通訊正常時，機台應停止定時呼叫 B010 HTTP API。若 MQTT 斷線超過 3 分鐘，則退回 (Fallback) 使用 HTTP 輪詢模式以維持基礎通訊。

.gitignore

@@ -19,5 +19,6 @@ yarn-error.log
 /.vscode
 /docs/API
 /docs/*.xlsx
+/docs/pptx
 
 

app/Http/Controllers/Admin/AdvertisementController.php

@@ -21,7 +21,9 @@ class AdvertisementController extends AdminController
 
         // Tab 1: 廣告列表
         $advertisements = Advertisement::with('company')->latest()->paginate(10);
-        $allAds = Advertisement::active()->get();
+        
+        // Tab 2: 機台廣告設置 (所需資料) - 隱藏已過期的廣告
+        $allAds = Advertisement::playing()->get();
 
         // Tab 2: 機台廣告設置 (所需資料)
         // 取得使用者有權限的機台列表 (已透過 Global Scope 過濾)
@@ -54,6 +56,8 @@ class AdvertisementController extends AdminController
                 $request->type === 'image' ? 'max:10240' : 'max:51200', // Image 10MB, Video 50MB
             ],
             'company_id' => 'nullable|exists:companies,id',
+            'start_at' => 'nullable|date',
+            'end_at' => 'nullable|date|after_or_equal:start_at',
         ]);
 
         $user = auth()->user();
@@ -71,13 +75,15 @@ class AdvertisementController extends AdminController
             $companyId = $user->company_id;
         }
 
-        Advertisement::create([
+        $advertisement = Advertisement::create([
             'company_id' => $companyId,
             'name' => $request->name,
             'type' => $request->type,
             'duration' => (int) $request->duration,
             'url' => Storage::disk('public')->url($path),
             'is_active' => true,
+            'start_at' => $request->start_at,
+            'end_at' => $request->end_at,
         ]);
 
         if ($request->wantsJson()) {
@@ -99,6 +105,8 @@ class AdvertisementController extends AdminController
             'duration' => 'required|in:15,30,60',
             'is_active' => 'boolean',
             'company_id' => 'nullable|exists:companies,id',
+            'start_at' => 'nullable|date',
+            'end_at' => 'nullable|date|after_or_equal:start_at',
         ];
 
         if ($request->hasFile('file')) {
@@ -111,7 +119,7 @@ class AdvertisementController extends AdminController
 
         $request->validate($rules);
 
-        $data = $request->only(['name', 'type', 'duration']);
+        $data = $request->only(['name', 'type', 'duration', 'start_at', 'end_at']);
         $data['is_active'] = $request->has('is_active');
         
         $user = auth()->user();
@@ -150,7 +158,7 @@ class AdvertisementController extends AdminController
         return redirect()->back()->with('success', __('Advertisement updated successfully.'));
     }
 
-    public function destroy(Advertisement $advertisement)
+    public function destroy(Request $request, Advertisement $advertisement)
     {
         // 檢查是否有機台正投放中
         if ($advertisement->machineAdvertisements()->exists()) {

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

@@ -22,51 +22,83 @@ class MachineSettingController extends AdminController
     /**
      * 顯示機台與型號設定列表 (採用標籤頁整合)
      */
-    public function index(Request $request): View
+    public function index(Request $request): View|\Illuminate\Http\Response
     {
         $tab = $request->input('tab', 'machines');
         $per_page = $request->input('per_page', 10);
         $search = $request->input('search');
+        $isAjax = $request->boolean('_ajax');
 
-        // 1. 處理機台清單 (Machines Tab)
+        // AJAX 模式：只查當前 Tab 的搜尋/分頁結果
-        $machineQuery = Machine::query()->with(['machineModel', 'paymentConfig', 'company']);
+        if ($isAjax) {
-        if ($tab === 'machines' && $search) {
+            $machines = null;
-            $machineQuery->where(function ($q) use ($search) {
+            $models_list = null;
-                $q->where('name', 'like', "%{$search}%")
+            $users_list = null;
-                  ->orWhere('serial_no', 'like', "%{$search}%");
-            });
-        }
-        $machines = $machineQuery->latest()->paginate($per_page)->withQueryString();
 
-        // 2. 處理型號清單 (Models Tab)
+            switch ($tab) {
-        $modelQuery = MachineModel::query()->withCount('machines');
+                case 'machines':
-        if ($tab === 'models' && $search) {
+                    $machineQuery = Machine::query()->with(['machineModel', 'paymentConfig', 'company']);
-            $modelQuery->where('name', 'like', "%{$search}%");
+                    if ($search) {
-        }
+                        $machineQuery->where(function ($q) use ($search) {
-        $models_list = $modelQuery->latest()->paginate($per_page)->withQueryString();
+                            $q->where('name', 'like', "%{$search}%")
+                              ->orWhere('serial_no', 'like', "%{$search}%");
+                        });
+                    }
+                    $machines = $machineQuery->latest()->paginate($per_page)->withQueryString();
+                    break;
 
-        // 3. 處理機台權限 (Permissions Tab) - 僅顯示 is_admin 帳號
+                case 'models':
-        $users_list = null;
+                    $modelQuery = MachineModel::query()->withCount('machines');
-        if ($tab === 'permissions') {
+                    if ($search) {
-            $userQuery = \App\Models\System\User::query()
+                        $modelQuery->where('name', 'like', "%{$search}%");
-                ->where('is_admin', true)
+                    }
-                ->with(['company', 'machines']);
+                    $models_list = $modelQuery->latest()->paginate($per_page)->withQueryString();
+                    break;
 
-            if ($search) {
+                case 'permissions':
-                $userQuery->where(function($q) use ($search) {
+                    $userQuery = \App\Models\System\User::query()
-                    $q->where('name', 'like', "%{$search}%")
+                        ->where('is_admin', true)
-                      ->orWhere('username', 'like', "%{$search}%");
+                        ->with(['company', 'machines']);
-                });
+                    if ($search) {
+                        $userQuery->where(function($q) use ($search) {
+                            $q->where('name', 'like', "%{$search}%")
+                              ->orWhere('username', 'like', "%{$search}%");
+                        });
+                    }
+                    if ($request->filled('company_id')) {
+                        $userQuery->where('company_id', $request->company_id);
+                    }
+                    $users_list = $userQuery->latest()->paginate($per_page)->withQueryString();
+                    break;
             }
 
-            if ($request->filled('company_id')) {
+            $companies = \App\Models\System\Company::select('id', 'name', 'code')->get();
-                $userQuery->where('company_id', $request->company_id);
-            }
 
-            $users_list = $userQuery->latest()->paginate($per_page)->withQueryString();
+            $tabView = match($tab) {
+                'models'      => 'admin.basic-settings.machines.partials.tab-models',
+                'permissions' => 'admin.basic-settings.machines.partials.tab-permissions',
+                default       => 'admin.basic-settings.machines.partials.tab-machines',
+            };
+            return response()->view($tabView, compact(
+                'machines', 'models_list', 'users_list', 'companies', 'tab'
+            ));
         }
 
-        // 4. 基礎下拉資料 (用於新增/編輯機台的彈窗)
+        // SSR 模式：一次查好全部三個 Tab 的首頁資料（供 x-show 即時切換）
+        $machines = Machine::query()
+            ->with(['machineModel', 'paymentConfig', 'company'])
+            ->latest()->paginate($per_page)->withQueryString();
+
+        $models_list = MachineModel::query()
+            ->withCount('machines')
+            ->latest()->paginate($per_page)->withQueryString();
+
+        $userQuery = \App\Models\System\User::query()
+            ->where('is_admin', true)
+            ->with(['company', 'machines']);
+        $users_list = $userQuery->latest()->paginate($per_page)->withQueryString();
+
+        // 基礎下拉資料 (用於新增/編輯機台的彈窗)
         $models = MachineModel::select('id', 'name')->get();
         $paymentConfigs = PaymentConfig::select('id', 'name')->get();
         $companies = \App\Models\System\Company::select('id', 'name', 'code')->get();

app/Http/Controllers/Admin/CompanyController.php

@@ -14,7 +14,8 @@ class CompanyController extends Controller
      */
     public function index(Request $request)
     {
-        $query = Company::query()->withCount(['users', 'machines']);
+        $query = Company::query()->withCount(['users', 'machines'])
+            ->with(['contracts.creator:id,name']);
 
         // 搜尋
         if ($search = $request->input('search')) {
@@ -55,6 +56,10 @@ class CompanyController extends Controller
             'contact_email' => 'nullable|email|max:255',
             'start_date' => 'required|date',
             'end_date' => 'nullable|date',
+            'warranty_start_date' => 'nullable|date',
+            'warranty_end_date' => 'nullable|date',
+            'software_start_date' => 'nullable|date',
+            'software_end_date' => 'nullable|date',
             'status' => 'required|boolean',
             'note' => 'nullable|string',
             'settings' => 'nullable|array',
@@ -83,11 +88,28 @@ class CompanyController extends Controller
                 'contact_email' => $validated['contact_email'] ?? null,
                 'start_date' => $validated['start_date'] ?? null,
                 'end_date' => $validated['end_date'] ?? null,
+                'warranty_start_date' => $validated['warranty_start_date'] ?? null,
+                'warranty_end_date' => $validated['warranty_end_date'] ?? null,
+                'software_start_date' => $validated['software_start_date'] ?? null,
+                'software_end_date' => $validated['software_end_date'] ?? null,
                 'status' => $validated['status'],
                 'note' => $validated['note'] ?? null,
                 'settings' => $validated['settings'] ?? [],
             ]);
 
+            // 記錄合約歷程
+            $company->contracts()->create([
+                'type' => $company->original_type,
+                'start_date' => $company->start_date,
+                'end_date' => $company->end_date,
+                'warranty_start_date' => $company->warranty_start_date,
+                'warranty_end_date' => $company->warranty_end_date,
+                'software_start_date' => $company->software_start_date,
+                'software_end_date' => $company->software_end_date,
+                'note' => __('Initial contract registration'),
+                'creator_id' => auth()->id(),
+            ]);
+
             // 如果有填寫帳號資訊，則建立管理員帳號
             if (!empty($validated['admin_username']) && !empty($validated['admin_password'])) {
                 $user = \App\Models\System\User::create([
@@ -143,6 +165,10 @@ class CompanyController extends Controller
             'contact_email' => 'nullable|email|max:255',
             'start_date' => 'required|date',
             'end_date' => 'nullable|date',
+            'warranty_start_date' => 'nullable|date',
+            'warranty_end_date' => 'nullable|date',
+            'software_start_date' => 'nullable|date',
+            'software_end_date' => 'nullable|date',
             'status' => 'required|boolean',
             'note' => 'nullable|string',
             'settings' => 'nullable|array',
@@ -154,7 +180,22 @@ class CompanyController extends Controller
             $validated['settings']['enable_points'] = filter_var($validated['settings']['enable_points'] ?? false, FILTER_VALIDATE_BOOLEAN);
         }
 
-        $company->update($validated);
+        DB::transaction(function () use ($validated, $company) {
+            $company->update($validated);
+
+            // 記錄合約歷程
+            $company->contracts()->create([
+                'type' => $company->current_type,
+                'start_date' => $company->start_date,
+                'end_date' => $company->end_date,
+                'warranty_start_date' => $company->warranty_start_date,
+                'warranty_end_date' => $company->warranty_end_date,
+                'software_start_date' => $company->software_start_date,
+                'software_end_date' => $company->software_end_date,
+                'note' => $validated['note'] ?? __('Contract information updated'),
+                'creator_id' => auth()->id(),
+            ]);
+        });
         
         // 分支邏輯：若停用客戶，連帶停用其所有帳號
         if ($validated['status'] == 0) {

app/Http/Controllers/Admin/MachineController.php

@@ -71,17 +71,21 @@ class MachineController extends AdminController
      */
     public function logsAjax(Request $request, Machine $machine)
     {
-        $per_page = $request->input('per_page', 10);
+        $per_page = $request->input('per_page', 20);
 
-        $startDate = $request->get('start_date', now()->format('Y-m-d'));
+        $startDate = $request->get('start_date');
-        $endDate = $request->get('end_date', now()->format('Y-m-d'));
+        $endDate = $request->get('end_date');
 
         $logs = $machine->logs()
             ->when($request->level, function ($query, $level) {
                 return $query->where('level', $level);
             })
-            ->whereDate('created_at', '>=', $startDate)
+            ->when($startDate, function ($query, $start) {
-            ->whereDate('created_at', '<=', $endDate)
+                return $query->where('created_at', '>=', str_replace('T', ' ', $start));
+            })
+            ->when($endDate, function ($query, $end) {
+                return $query->where('created_at', '<=', str_replace('T', ' ', $end));
+            })
             ->when($request->type, function ($query, $type) {
                 return $query->where('type', $type);
             })

app/Http/Controllers/Admin/PermissionController.php

@@ -318,7 +318,11 @@ class PermissionController extends Controller
             }
 
             if ($user->isSystemAdmin() && $request->filled('company_id')) {
-                $query->where('company_id', $request->company_id);
+                if ($request->company_id === 'system') {
+                    $query->whereNull('company_id');
+                } else {
+                    $query->where('company_id', $request->company_id);
+                }
             }
 
             $per_page = $request->input('per_page', 10);

app/Http/Controllers/Admin/ProductCategoryController.php

@@ -150,7 +150,11 @@ class ProductCategoryController extends Controller
 
             // 檢查是否已有商品使用此分類
             if ($category->products()->count() > 0) {
-                return redirect()->back()->with('error', __('Cannot delete category that has products. Please move products first.'));
+                $errorMsg = __('Cannot delete category that has products. Please move products first.');
+                if (request()->ajax()) {
+                    return response()->json(['success' => false, 'message' => $errorMsg], 422);
+                }
+                return redirect()->back()->with('error', $errorMsg);
             }
 
             if ($category->name_dictionary_key) {
@@ -159,8 +163,18 @@ class ProductCategoryController extends Controller
 
             $category->delete();
 
+            if (request()->ajax()) {
+                return response()->json([
+                    'success' => true,
+                    'message' => __('Category deleted successfully')
+                ]);
+            }
+
             return redirect()->back()->with('success', __('Category deleted successfully'));
         } catch (\Exception $e) {
+            if (request()->ajax()) {
+                return response()->json(['success' => false, 'message' => $e->getMessage()], 500);
+            }
             return redirect()->back()->with('error', $e->getMessage());
         }
     }

app/Http/Controllers/Admin/ProductController.php

@@ -19,12 +19,16 @@ class ProductController extends Controller
     public function index(Request $request)
     {
         $user = auth()->user();
-        $query = Product::with(['category.translations', 'translations', 'company']);
+        $tab = $request->input('tab', 'products');
+        $per_page = $request->input('per_page', 10);
+        
+        // Products Query
+        $productQuery = Product::with(['category.translations', 'translations', 'company']);
         
         // 搜尋
-        if ($request->filled('search')) {
+        if ($request->filled('product_search')) {
-            $search = $request->search;
+            $search = $request->product_search;
-            $query->where(function($q) use ($search) {
+            $productQuery->where(function($q) use ($search) {
                 $q->where('name', 'like', "%{$search}%")
                   ->orWhere('barcode', 'like', "%{$search}%")
                   ->orWhere('spec', 'like', "%{$search}%");
@@ -33,29 +37,66 @@ class ProductController extends Controller
 
         // 分類篩選
         if ($request->filled('category_id')) {
-            $query->where('category_id', $request->category_id);
+            $productQuery->where('category_id', $request->category_id);
         }
 
-        $per_page = $request->input('per_page', 10);
-        
-        $companyId = $user->company_id;
         if ($user->isSystemAdmin()) {
-            if ($request->filled('company_id')) {
+            if ($request->filled('product_company_id')) {
-                $companyId = $request->company_id;
+                $productQuery->where('company_id', $request->product_company_id);
-                $query->where('company_id', $companyId);
             }
         }
 
-        $products = $query->latest()->paginate($per_page)->withQueryString();
+        $products = $productQuery->latest()->paginate($per_page, ['*'], 'product_page')->withQueryString();
-        $categories = ProductCategory::with('translations')->get();
+
+        // Categories Query
+        $categoryQuery = ProductCategory::with(['translations', 'company']);
+        
+        if ($user->isSystemAdmin() && $request->filled('category_company_id')) {
+            $categoryQuery->where('company_id', $request->category_company_id);
+        }
+
+        if ($request->filled('category_search')) {
+            $search = $request->category_search;
+            $categoryQuery->where(function($q) use ($search) {
+                $q->where('name', 'like', "%{$search}%");
+            });
+        }
+
+        $categories = $categoryQuery->latest()->paginate($per_page, ['*'], 'category_page')->withQueryString();
         $companies = $user->isSystemAdmin() ? Company::all() : collect();
         
-        // 系統管理員在過濾特定公司時，應顯示該公司的功能開關 (如物料代碼、點數規則)
+        // Settings for Modal (use current user company or fallback)
-        $selectedCompany = $companyId ? Company::find($companyId) : $user->company;
+        $selectedCompanyId = $user->isSystemAdmin() 
+            ? ($request->input('product_company_id') ?: $request->input('category_company_id')) 
+            : $user->company_id;
+        $selectedCompany = $selectedCompanyId ? Company::find($selectedCompanyId) : $user->company;
         $companySettings = $selectedCompany ? ($selectedCompany->settings ?? []) : [];
         
         $routeName = 'admin.data-config.products.index';
 
+        if ($request->ajax() || $request->wantsJson()) {
+            if ($tab === 'products') {
+                return response()->json([
+                    'success' => true,
+                    'html' => view('admin.products.partials.tab-products', [
+                        'products' => $products,
+                        'companySettings' => $companySettings,
+                        'companies' => $companies,
+                        'routeName' => $routeName
+                    ])->render()
+                ]);
+            } else {
+                return response()->json([
+                    'success' => true,
+                    'html' => view('admin.products.partials.tab-categories', [
+                        'categories' => $categories,
+                        'companies' => $companies,
+                        'routeName' => $routeName
+                    ])->render()
+                ]);
+            }
+        }
+
         return view('admin.products.index', [
             'products' => $products,
             'categories' => $categories,
@@ -313,8 +354,23 @@ class ProductController extends Controller
             $product->save();
 
             $status = $product->is_active ? __('Enabled') : __('Disabled');
+            
+            if (request()->ajax()) {
+                return response()->json([
+                    'success' => true,
+                    'message' => __('Product status updated to :status', ['status' => $status]),
+                    'is_active' => $product->is_active
+                ]);
+            }
+
             return redirect()->back()->with('success', __('Product status updated to :status', ['status' => $status]));
         } catch (\Exception $e) {
+            if (request()->ajax()) {
+                return response()->json([
+                    'success' => false,
+                    'message' => $e->getMessage()
+                ], 500);
+            }
             return redirect()->back()->with('error', $e->getMessage());
         }
     }
@@ -337,8 +393,21 @@ class ProductController extends Controller
 
             $product->delete();
 
+            if (request()->ajax()) {
+                return response()->json([
+                    'success' => true,
+                    'message' => __('Product deleted successfully')
+                ]);
+            }
+
             return redirect()->back()->with('success', __('Product deleted successfully'));
         } catch (\Exception $e) {
+            if (request()->ajax()) {
+                return response()->json([
+                    'success' => false,
+                    'message' => $e->getMessage()
+                ], 500);
+            }
             return redirect()->back()->with('error', $e->getMessage());
         }
     }

app/Http/Controllers/Admin/RemoteController.php

@@ -15,19 +15,92 @@ class RemoteController extends Controller
      */
     public function index(Request $request)
     {
-        $machines = Machine::withCount(['slots'])->orderBy('last_heartbeat_at', 'desc')->orderBy('id', 'desc')->get();
         $selectedMachine = null;
-        $history = RemoteCommand::where('command_type', '!=', 'reload_stock')->with(['machine', 'user'])->latest()->limit(50)->get();
 
-        if ($request->has('machine_id')) {
+        // --- 1. 機台列表處理 (New Command Tab) ---
-            $selectedMachine = Machine::with(['slots.product', 'commands' => function($query) {
+        $machineQuery = Machine::withCount(['slots'])->orderBy('last_heartbeat_at', 'desc')->orderBy('id', 'desc');
-                $query->where('command_type', '!=', 'reload_stock')
+        
-                      ->latest()
+        if ($request->filled('search') && $request->input('tab') === 'list') {
-                      ->limit(5);
+            $search = $request->input('search');
-            }])->find($request->machine_id);
+            $machineQuery->where(function ($q) use ($search) {
+                $q->where('name', 'like', "%{$search}%")
+                  ->orWhere('serial_no', 'like', "%{$search}%");
+            });
         }
         
+        $machines = $machineQuery->paginate($request->input('per_page', 10), ['*'], 'machine_page');
+
+        // --- 2. 歷史紀錄處理 (Operation Records Tab) ---
+        $historyQuery = RemoteCommand::where('command_type', '!=', 'reload_stock')
+            ->with(['machine', 'user']);
+
+        if ($request->filled('search') && ($request->input('tab') === 'history' || !$request->has('tab'))) {
+            $search = $request->input('search');
+            $historyQuery->where(function ($q) use ($search) {
+                $q->whereHas('machine', function ($mq) use ($search) {
+                    $mq->where('name', 'like', "%{$search}%")
+                        ->orWhere('serial_no', 'like', "%{$search}%");
+                })->orWhereHas('user', function ($uq) use ($search) {
+                    $uq->where('name', 'like', "%{$search}%");
+                });
+            });
+        }
+
+        // 時間區間過濾 (created_at)
+        if ($request->filled('start_date') || $request->filled('end_date')) {
+            try {
+                if ($request->filled('start_date')) {
+                    $start = \Illuminate\Support\Carbon::parse($request->input('start_date'));
+                    $historyQuery->where('created_at', '>=', $start);
+                }
+                if ($request->filled('end_date')) {
+                    $end = \Illuminate\Support\Carbon::parse($request->input('end_date'));
+                    $historyQuery->where('created_at', '<=', $end);
+                }
+            } catch (\Exception $e) {
+                // 忽略解析錯誤
+            }
+        }
+
+        // 指令類型過濾
+        if ($request->filled('command_type')) {
+            $historyQuery->where('command_type', $request->input('command_type'));
+        }
+
+        // 狀態過濾
+        if ($request->filled('status')) {
+            $historyQuery->where('status', $request->input('status'));
+        }
+
+        $history = $historyQuery->latest()->paginate($request->input('per_page', 10), ['*'], 'history_page');
+
+        // --- 3. 特定機台詳情處理 ---
+        if ($request->has('machine_id')) {
+            $selectedMachine = Machine::with([
+                'slots.product',
+                'commands' => function ($query) {
+                    $query->where('command_type', '!=', 'reload_stock')
+                        ->latest()
+                        ->limit(5);
+                }
+            ])->find($request->machine_id);
+        }
+
+        // --- 4. AJAX 回應處理 ---
         if ($request->ajax()) {
+            if ($request->has('tab')) {
+                $tab = $request->input('tab');
+                $viewPath = $tab === 'list' ? 'admin.remote.partials.tab-machines-index' : 'admin.remote.partials.tab-history-index';
+                
+                return response()->json([
+                    'success' => true,
+                    'html' => view($viewPath, [
+                        'machines' => $machines,
+                        'history' => $history,
+                    ])->render()
+                ]);
+            }
+
             return response()->json([
                 'success' => true,
                 'machine' => $selectedMachine,
@@ -100,27 +173,93 @@ class RemoteController extends Controller
      */
     public function stock(Request $request)
     {
-        $machines = Machine::withCount([
+        // 1. 機台查詢與分頁
+        $machineQuery = Machine::withCount([
             'slots as slots_count',
             'slots as low_stock_count' => function ($query) {
                 $query->where('stock', '<=', 5);
             },
             'slots as expiring_soon_count' => function ($query) {
                 $query->whereNotNull('expiry_date')
-                      ->where('expiry_date', '<=', now()->addDays(7))
+                    ->where('expiry_date', '<=', now()->addDays(7))
-                      ->where('expiry_date', '>=', now()->startOfDay());
+                    ->where('expiry_date', '>=', now()->startOfDay());
             }
-        ])->orderBy('last_heartbeat_at', 'desc')->orderBy('id', 'desc')->get();
+        ]);
 
-        $history = RemoteCommand::where('command_type', 'reload_stock')->with(['machine', 'user'])->latest()->limit(50)->get();
+        if ($request->filled('machine_search')) {
+            $ms = $request->input('machine_search');
+            $machineQuery->where(function ($q) use ($ms) {
+                $q->where('name', 'like', "%{$ms}%")
+                    ->orWhere('serial_no', 'like', "%{$ms}%");
+            });
+        }
+
+        $machines = $machineQuery->orderBy('last_heartbeat_at', 'desc')
+            ->orderBy('id', 'desc')
+            ->paginate($request->input('per_page', 10), ['*'], 'machine_page');
+
+        // 2. 歷史紀錄查詢與分頁
+        $historyQuery = RemoteCommand::with(['machine', 'user']);
+        $historyQuery->where('command_type', 'reload_stock');
+
+        if ($request->filled('search')) {
+            $search = $request->input('search');
+            $historyQuery->where(function ($q) use ($search) {
+                $q->whereHas('machine', function ($mq) use ($search) {
+                    $mq->where('name', 'like', "%{$search}%")
+                        ->orWhere('serial_no', 'like', "%{$search}%");
+                })->orWhereHas('user', function ($uq) use ($search) {
+                    $uq->where('name', 'like', "%{$search}%");
+                });
+            });
+        }
+
+        // 時間區間過濾 (created_at)
+        if ($request->filled('start_date') || $request->filled('end_date')) {
+            try {
+                if ($request->filled('start_date')) {
+                    $start = \Illuminate\Support\Carbon::parse($request->input('start_date'));
+                    $historyQuery->where('created_at', '>=', $start);
+                }
+                if ($request->filled('end_date')) {
+                    $end = \Illuminate\Support\Carbon::parse($request->input('end_date'));
+                    $historyQuery->where('created_at', '<=', $end);
+                }
+            } catch (\Exception $e) {
+                // 忽略解析錯誤
+            }
+        }
+
+        // 狀態過濾
+        if ($request->filled('status')) {
+            $historyQuery->where('status', $request->input('status'));
+        }
+
+        $history = $historyQuery->latest()->paginate($request->input('per_page', 10), ['*'], 'history_page');
+
+        // 3. AJAX 回傳處理
+        if ($request->boolean('_ajax')) {
+            $tab = $request->input('tab', 'history');
+            if ($tab === 'machines') {
+                return response()->view('admin.remote.partials.tab-machines', [
+                    'machines' => $machines,
+                ]);
+            }
+            return response()->view('admin.remote.partials.tab-history', [
+                'history' => $history,
+            ]);
+        }
 
         $selectedMachine = null;
         if ($request->has('machine_id')) {
-            $selectedMachine = Machine::with(['slots.product', 'commands' => function($query) {
+            $selectedMachine = Machine::with([
-                $query->where('command_type', 'reload_stock')
+                'slots.product',
-                      ->latest()
+                'commands' => function ($query) {
-                      ->limit(50);
+                    $query->where('command_type', 'reload_stock')
-            }])->find($request->machine_id);
+                        ->latest()
+                        ->limit(50);
+                }
+            ])->find($request->machine_id);
         }
 
         return view('admin.remote.stock', [

app/Http/Controllers/Api/V1/App/MachineAuthController.php

@@ -9,6 +9,7 @@ use App\Models\System\User;
 use App\Models\Machine\Machine;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Log;
+use App\Jobs\Machine\ProcessStateLog;
 
 class MachineAuthController extends Controller
 {
@@ -20,30 +21,14 @@ class MachineAuthController extends Controller
     {
         // 1. 驗證欄位 (相容舊版 Java App 發送的 JSON 格式)
         $validated = $request->validate([
-            'machine'     => 'required|string',
+            'machine' => 'required|string',
-            'Su_Account'  => 'required|string',
+            'Su_Account' => 'required|string',
             'Su_Password' => 'required|string',
-            'ip'          => 'nullable|string',
+            'ip' => 'nullable|string',
-            'type'        => 'nullable|string',
+            'type' => 'nullable|string',
         ]);
 
-        // 2. 透過帳號尋找使用者 (允許使用 username 或 email)
+        // 2. 取得機台物件 (需優先於帳密驗證，以便記錄日誌到正確機台)
-        $user = User::where('username', $validated['Su_Account'])
-            ->orWhere('email', $validated['Su_Account'])
-            ->first();
-
-        // 若無此帳號或密碼錯誤
-        if (!$user || !Hash::check($validated['Su_Password'], $user->password)) {
-            Log::warning("B000 機台登入失敗: 帳密錯誤", [
-                'account' => $validated['Su_Account'], 
-                'machine' => $validated['machine']
-            ]);
-            // 按現行設定，Java 端只認 Success 字串，其餘視為帳密錯誤
-            return response()->json(['message' => 'Failed']);
-        }
-
-        // 3. 取得機台物件
-        // 因為此 API 無狀態 (沒有登入 session)，為了避免被 global scope 擋住，直接取消所有 scope 來撈取
         $machine = Machine::withoutGlobalScopes()->where('serial_no', $validated['machine'])->first();
 
         if (!$machine) {
@@ -53,40 +38,82 @@ class MachineAuthController extends Controller
             return response()->json(['message' => 'Failed']);
         }
 
-        // 4. RBAC 權限驗證 (遵循多租戶與機台授權規範)
+        // 3. 透過帳號尋找使用者 (允許使用 username 或 email)
+        $user = User::where('username', $validated['Su_Account'])
+            ->orWhere('email', $validated['Su_Account'])
+            ->first();
+
+        // 4. 驗證密碼
+        if (!$user || !Hash::check($validated['Su_Password'], $user->password)) {
+            Log::warning("B000 機台登入失敗: 帳密錯誤", [
+                'account' => $validated['Su_Account'],
+                'machine' => $validated['machine']
+            ]);
+
+            // 寫入機台日誌
+            ProcessStateLog::dispatch(
+                $machine->id,
+                $machine->company_id,
+                __("Login failed: :account", ['account' => $validated['Su_Account']]),
+                'warning',
+                [],
+                'login'
+            );
+
+            return response()->json(['message' => 'Failed']);
+        }
+
+        // 5. RBAC 權限驗證 (遵循多租戶與機台授權規範)
+        $isAuthorized = false;
         if ($user->isSystemAdmin()) {
-            // [系統管理員] : 擁有最高權限，可登入平台下轄所有機台，直接放行
+            $isAuthorized = true;
-            
         } elseif ($user->is_admin) {
-            // [公司管理員] : 不需要檢查 machine_user 表，但【必須驗證】該機台是否隸屬於他的公司
+            if ($machine->company_id === $user->company_id) {
-            if ($machine->company_id !== $user->company_id) {
+                $isAuthorized = true;
-                Log::warning("B000 機台登入失敗: 企圖越權登入其他公司的機台", [
-                    'user_id'         => $user->id,
-                    'user_company'    => $user->company_id,
-                    'machine_company' => $machine->company_id
-                ]);
-                return response()->json(['message' => 'Forbidden']);
             }
-            
         } else {
-            // [一般租戶帳號] : （包括補貨員等）必須嚴格檢查該帳號有沒有被分配到這台機器的 machine_user 關聯授權
+            if ($user->machines()->where('machine_id', $machine->id)->exists()) {
-            if (!$user->machines()->where('machine_id', $machine->id)->exists()) {
+                $isAuthorized = true;
-                Log::warning("B000 機台登入失敗: 該帳號沒有此機台的授權", [
-                    'user_id'    => $user->id,
-                    'machine_id' => $machine->id
-                ]);
-                return response()->json(['message' => 'Forbidden']);
             }
         }
 
-        // 5. 驗證完美通過！回傳固定字串 Success 讓 Java 端放行
+        if (!$isAuthorized) {
+            Log::warning("B000 機台登入失敗: 權限不足", [
+                'user_id' => $user->id,
+                'machine_id' => $machine->id
+            ]);
+
+            ProcessStateLog::dispatch(
+                $machine->id,
+                $machine->company_id,
+                __("Unauthorized login attempt: :account", ['account' => $user->username]),
+                'warning',
+                [],
+                'login'
+            );
+
+            return response()->json(['message' => 'Forbidden']);
+        }
+
+        // 6. 驗證完美通過！
         Log::info("B000 機台登入成功", [
             'account' => $user->username,
             'machine' => $machine->serial_no
         ]);
 
+        // 寫入成功登入日誌
+        ProcessStateLog::dispatch(
+            $machine->id,
+            $machine->company_id,
+            __("User logged in: :name", ['name' => $user->name ?? $user->username]),
+            'info',
+            [],
+            'login'
+        );
+
         return response()->json([
-            'message' => 'Success'
+            'message' => 'Success',
+            'token' => $user->createToken('technician-setup', ['*'], now()->addHours(8))->plainTextToken
         ]);
     }
 }

app/Http/Controllers/Api/V1/App/MachineController.php

@@ -9,8 +9,11 @@ use App\Models\System\User;
 use App\Jobs\Machine\ProcessHeartbeat;
 use App\Jobs\Machine\ProcessTimerStatus;
 use App\Jobs\Machine\ProcessCoinInventory;
+use App\Jobs\Machine\ProcessMachineError;
+use App\Jobs\Machine\ProcessStateLog;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Facades\Cache;
 
 class MachineController extends Controller
 {
@@ -22,6 +25,69 @@ class MachineController extends Controller
         $machine = $request->get('machine');
         $data = $request->except(['machine', 'key']); // 排除 Middleware 注入的 Model 物件與認證 key
 
+        // === 狀態異動觸發 (Redis 快取免查 DB) ===
+        $cacheKey = "machine:{$machine->serial_no}:state";
+        $oldState = Cache::get($cacheKey);
+
+        $currentPage = $data['current_page'] ?? null;
+        $doorStatus = $data['door_status'] ?? null;
+        $firmwareVersion = $data['firmware_version'] ?? null;
+        $model = $data['model'] ?? null;
+
+        if ($currentPage !== null || $doorStatus !== null || $firmwareVersion !== null || $model !== null) {
+            // 更新目前狀態到 Redis (保存 1 天)
+            $newState = $oldState ?? [];
+            if ($currentPage !== null) $newState['current_page'] = $currentPage;
+            if ($doorStatus !== null) $newState['door_status'] = $doorStatus;
+            if ($firmwareVersion !== null) $newState['firmware_version'] = $firmwareVersion;
+            if ($model !== null) $newState['model'] = $model;
+
+            Cache::put($cacheKey, $newState, 86400);
+
+            // 若有歷史紀錄才進行比對 (避開 Cache Miss 造成的雪崩)
+            if ($oldState !== null) {
+                // 1. 判斷頁面是否變更
+                if ($currentPage !== null && (string)$currentPage !== (string)($oldState['current_page'] ?? '')) {
+                    // 只記錄「絕對狀態」，配合 lang 中 "Page X" 的翻譯
+                    ProcessStateLog::dispatch($machine->id, $machine->company_id, "Page {$currentPage}", 'info');
+                }
+
+                // 2. 判斷門禁是否變更 (0: 關閉, 1: 開啟)
+                if ($doorStatus !== null && (string)$doorStatus !== (string)($oldState['door_status'] ?? '')) {
+                    $doorMessage = $doorStatus == 1 ? "Door Opened" : "Door Closed";
+                    $doorLevel = 'info'; // 不論開關門皆為 info，避免觸發異常狀態
+                    ProcessStateLog::dispatch($machine->id, $machine->company_id, $doorMessage, $doorLevel);
+                }
+
+                // 3. 判斷韌體版本是否變更
+                if ($firmwareVersion !== null && (string)$firmwareVersion !== (string)($oldState['firmware_version'] ?? '')) {
+                    $oldVersion = $oldState['firmware_version'] ?? 'Unknown';
+                    // 直接在 Controller 進行翻譯並填值，確保儲存到 DB 的是最終正確字串
+                    $versionMessage = __("Firmware updated to :version", ['version' => $firmwareVersion]);
+                    ProcessStateLog::dispatch(
+                        $machine->id, 
+                        $machine->company_id, 
+                        $versionMessage, 
+                        'info',
+                        ['old' => $oldVersion, 'new' => $firmwareVersion]
+                    );
+                }
+
+                // 4. 判斷型號是否變更
+                if ($model !== null && (string)$model !== (string)($oldState['model'] ?? '')) {
+                    $oldModel = $oldState['model'] ?? 'Unknown';
+                    $modelMessage = __("Model changed to :model", ['model' => $model]);
+                    ProcessStateLog::dispatch(
+                        $machine->id, 
+                        $machine->company_id, 
+                        $modelMessage, 
+                        'info',
+                        ['old' => $oldModel, 'new' => $model]
+                    );
+                }
+            }
+        }
+
         // 異步處理狀態更新
         ProcessHeartbeat::dispatch($machine->serial_no, $data);
 
@@ -80,6 +146,114 @@ class MachineController extends Controller
         ], 202); // 202 Accepted
     }
     
+    /**
+     * B055: Get Remote Dispense Queue (POST/GET)
+     * 用於獲取雲端下發的遠端出貨指令詳情。
+     */
+    public function getDispenseQueue(Request $request)
+    {
+        $machine = $request->get('machine');
+
+        // 查找該機台狀態為「已發送 (sent)」且類型為「出貨 (dispense)」的最新指令
+        $command = \App\Models\Machine\RemoteCommand::where('machine_id', $machine->id)
+            ->where('command_type', 'dispense')
+            ->where('status', 'sent')
+            ->latest()
+            ->first();
+
+        if (!$command) {
+            return response()->json([
+                'success' => true,
+                'code' => 200,
+                'data' => []
+            ]);
+        }
+
+        // 映射 Java APP 預期格式: res1 = ID, res2 = SlotNo
+        return response()->json([
+            'success' => true,
+            'code' => 200,
+            'data' => [
+                [
+                    'res1' => (string) $command->id,
+                    'res2' => (string) ($command->payload['slot_no'] ?? ''),
+                ]
+            ]
+        ]);
+    }
+
+    /**
+     * B055: Report Remote Dispense Result (PUT)
+     * 用於機台回報遠端出貨執行的最終結果。
+     */
+    public function reportDispenseResult(Request $request, \App\Services\Machine\MachineService $machineService)
+    {
+        $commandId = $request->input('id');
+        $type = $request->input('type'); // 通常為 0
+        $stockReported = $request->input('stock'); // 機台回報的剩餘庫存
+
+        $command = \App\Models\Machine\RemoteCommand::find($commandId);
+
+        if (!$command) {
+            return response()->json([
+                'success' => false,
+                'code' => 404,
+                'message' => 'Command not found'
+            ], 404);
+        }
+
+        // 更新指令狀態 (0 代表成功)
+        $status = ($type == '0') ? 'success' : 'failed';
+        
+        $payloadUpdates = [
+            'reported_stock' => $stockReported,
+            'report_type' => $type
+        ];
+
+        // 若成功，連動更新貨道庫存
+        if ($status === 'success' && isset($command->payload['slot_no'])) {
+            $machine = $command->machine;
+            $slotNo = $command->payload['slot_no'];
+
+            $slot = $machine->slots()->where('slot_no', $slotNo)->first();
+            if ($slot) {
+                $oldStock = $slot->stock;
+                // 若 APP 回傳的庫存大於 0 則使用回傳值，否則執行扣減
+                $newStock = (int)($stockReported ?? 0);
+                if ($newStock <= 0 && $oldStock > 0) {
+                    $newStock = $oldStock - 1;
+                }
+                
+                $finalStock = max(0, $newStock);
+                $slot->update(['stock' => $finalStock]);
+
+                // 紀錄庫存變化供前端顯示
+                $payloadUpdates['old_stock'] = $oldStock;
+                $payloadUpdates['new_stock'] = $finalStock;
+                
+                // 記錄狀態變化
+                ProcessStateLog::dispatch(
+                    $machine->id,
+                    $machine->company_id,
+                    "Remote dispense successful for slot {$slotNo}",
+                    'info'
+                );
+            }
+        }
+
+        $command->update([
+            'status' => $status,
+            'executed_at' => now(),
+            'payload' => array_merge($command->payload, $payloadUpdates)
+        ]);
+
+        return response()->json([
+            'success' => true,
+            'code' => 200,
+            'message' => 'Result reported'
+        ]);
+    }
+
     /**
      * B018: Record Machine Restock/Setup Report (Asynchronous)
      */
@@ -102,35 +276,46 @@ class MachineController extends Controller
     /**
      * B017: Get Slot Info & Stock (Synchronous)
      */
+    /**
+     * B017: Get Slot Info & Stock (Synchronous - Full Sync)
+     */
     public function getSlots(Request $request)
     {
         $machine = $request->get('machine');
-        $slots = $machine->slots()->with('product')->get();
+        
+        // 依貨道編號排序 (Sorted by slot_no as requested)
+        $slots = $machine->slots()->with('product')->orderBy('slot_no')->get();
 
         // 自動轉 Success: 若機台來撈 B017，代表之前的 reload_stock 指令已成功被機台響應
+        // 同時處理 sent 與 pending 狀態，確保狀態機正確關閉
         \App\Models\Machine\RemoteCommand::where('machine_id', $machine->id)
             ->where('command_type', 'reload_stock')
-            ->where('status', 'sent')
+            ->whereIn('status', ['pending', 'sent'])
-            ->update(['status' => 'success', 'executed_at' => now()]);
+            ->update([
+                'status' => 'success', 
+                'executed_at' => now(),
+                'note' => __('Inventory synced with machine')
+            ]);
 
         return response()->json([
             'success' => true,
             'code' => 200,
             'data' => $slots->map(function ($slot) {
                 return [
-                    'slot_no' => $slot->slot_no,
+                    'tid' => $slot->slot_no,
-                    'product_id' => $slot->product_id,
+                    'num' => (int)$slot->stock,
-                    'stock' => $slot->stock,
+                    'expiry_date' => $slot->expiry_date ? $slot->expiry_date->format('Y-m-d') : null,
-                    'capacity' => $slot->capacity,
-                    'price' => $slot->price,
-                    'status' => $slot->status,
-                    'expiry_date' => $slot->expiry_date,
                     'batch_no' => $slot->batch_no,
+                    // 保留原始欄位以供除錯或未來擴充
+                    'product_id' => $slot->product_id,
+                    'capacity' => $slot->max_stock, 
+                    'status' => $slot->is_active ? '1' : '0',
                 ];
             })
         ]);
     }
 
+
     /**
      * B710: Sync Timer status (Asynchronous)
      */
@@ -207,7 +392,7 @@ class MachineController extends Controller
         $advertisements = \App\Models\Machine\MachineAdvertisement::where('machine_id', $machine->id)
             ->with([
                 'advertisement' => function ($query) {
-                    $query->active();
+                    $query->playing();
                 }
             ])
             ->get()
@@ -372,4 +557,104 @@ class MachineController extends Controller
             'data' => $products
         ]);
     }
+
+    /**
+     * B013: Report Machine Hardware Error/Status (Asynchronous)
+     */
+    public function reportError(Request $request)
+    {
+        $machine = $request->get('machine');
+        $data = $request->only(['tid', 'error_code']);
+
+        // 異步分派處理 (Dispatch to queue)
+        ProcessMachineError::dispatch($machine->serial_no, $data);
+
+        return response()->json([
+            'success' => true,
+            'code' => 200,
+            'message' => 'Error report accepted',
+        ], 202); // 202 Accepted
+    }
+
+    /**
+     * B014: Download Machine Settings & Config (Synchronous, Requires User Auth)
+     * 用於機台引導階段，同步金流、發票與機台專屬 API Token。
+     */
+    public function getSettings(Request $request)
+    {
+        $serialNo = $request->input('machine');
+        $user = $request->user();
+
+        // 1. 查找機台 (忽略全局範圍以進行認領)
+        $machine = Machine::withoutGlobalScopes()
+            ->with(['paymentConfig', 'company'])
+            ->where('serial_no', $serialNo)
+            ->first();
+
+        if (!$machine) {
+            return response()->json([
+                'success' => false,
+                'code' => 404,
+                'message' => 'Machine not found'
+            ], 404);
+        }
+
+        // 2. 權限加強驗證 (RBAC)
+        $isAuthorized = false;
+        if ($user->isSystemAdmin()) {
+            $isAuthorized = true;
+        } elseif ($machine->company_id === $user->company_id) {
+            // 公司管理員或已授權員工才能存取
+            if ($user->is_admin || $user->machines()->where('machine_id', $machine->id)->exists()) {
+                $isAuthorized = true;
+            }
+        }
+
+        if (!$isAuthorized) {
+            return response()->json([
+                'success' => false,
+                'code' => 403,
+                'message' => 'Forbidden: You do not have permission to configure this machine'
+            ], 403);
+        }
+
+        // 3. 獲取關聯設定
+        $paymentSettings = $machine->paymentConfig->settings ?? [];
+        $companySettings = $machine->company->settings ?? [];
+
+        // 4. 映射 App 預期欄位 (嚴格遵守 HttpAPI.java 結構)
+        $data = [
+            't050v01' => $machine->serial_no,
+            'api_token' => $machine->api_token, // 向 App 核發正式通訊 Token
+            
+            // 玉山支付
+            't050v41' => $paymentSettings['esun_store_id'] ?? '',
+            't050v42' => $paymentSettings['esun_term_id'] ?? '',
+            't050v43' => $paymentSettings['esun_hash'] ?? '',
+
+            // 電子發票 (綠界)
+            't050v34' => $companySettings['invoice_merchant_id'] ?? '',
+            't050v35' => $companySettings['invoice_hash_key'] ?? '',
+            't050v36' => $companySettings['invoice_hash_iv'] ?? '',
+            't050v38' => $companySettings['invoice_email'] ?? '',
+
+            // 趨勢支付 (TrendPay/Greenpay)
+            'TP_APP_ID' => $paymentSettings['tp_app_id'] ?? '',
+            'TP_APP_KEY' => $paymentSettings['tp_app_key'] ?? '',
+            'TP_PARTNER_KEY' => $paymentSettings['tp_partner_key'] ?? '',
+            
+            // 各類行動支付特店 ID
+            'TP_LINE_MERCHANT_ID' => $paymentSettings['tp_line_merchant_id'] ?? '',
+            'TP_PS_MERCHANT_ID' => $paymentSettings['tp_ps_merchant_id'] ?? '',
+            'TP_EASY_MERCHANT_ID' => $paymentSettings['tp_easy_merchant_id'] ?? '',
+            'TP_PI_MERCHANT_ID' => $paymentSettings['tp_pi_merchant_id'] ?? '',
+            'TP_JKO_MERCHANT_ID' => $paymentSettings['tp_jko_merchant_id'] ?? '',
+        ];
+
+        return response()->json([
+            'success' => true,
+            'code' => 200,
+            'data' => [$data] // App 預期的是包含單一物件的陣列
+        ]);
+    }
 }

app/Jobs/Machine/ProcessMachineError.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Jobs\Machine;
+
+use App\Models\Machine\Machine;
+use App\Services\Machine\MachineService;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+
+class ProcessMachineError implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $serialNo;
+    protected $data;
+
+    /**
+     * Create a new job instance.
+     */
+    public function __construct(string $serialNo, array $data)
+    {
+        $this->serialNo = $serialNo;
+        $this->data = $data;
+    }
+
+    /**
+     * Execute the job.
+     */
+    public function handle(MachineService $service): void
+    {
+        $machine = Machine::where('serial_no', $this->serialNo)->first();
+
+        if ($machine) {
+            $service->recordErrorLog($machine, $this->data);
+        }
+    }
+}

app/Jobs/Machine/ProcessStateLog.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Jobs\Machine;
+
+use App\Models\Machine\MachineLog;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Facades\Log;
+
+class ProcessStateLog implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    protected $machineId;
+    protected $companyId;
+    protected $message;
+    protected $level;
+    protected $type;
+    protected $context;
+
+    /**
+     * Create a new job instance.
+     */
+    public function __construct(int $machineId, ?int $companyId, string $message, string $level = 'info', array $context = [], string $type = 'status')
+    {
+        $this->machineId = $machineId;
+        $this->companyId = $companyId;
+        $this->message = $message;
+        $this->level = $level;
+        $this->context = $context;
+        $this->type = $type;
+    }
+
+    /**
+     * Execute the job.
+     */
+    public function handle(): void
+    {
+        try {
+            MachineLog::create([
+                'machine_id' => $this->machineId,
+                'company_id' => $this->companyId,
+                'type' => $this->type,
+                'level' => $this->level,
+                'message' => $this->message,
+                'context' => $this->context,
+            ]);
+        } catch (\Exception $e) {
+            Log::error("Failed to create state log for machine {$this->machineId}: " . $e->getMessage());
+            throw $e;
+        }
+    }
+}

app/Models/Machine/MachineLog.php

@@ -24,6 +24,33 @@ class MachineLog extends Model
         'context' => 'array',
     ];
 
+    protected $appends = [
+        'translated_message',
+    ];
+
+    /**
+     * 動態重組翻譯後的訊息
+     */
+    public function getTranslatedMessageAttribute(): string
+    {
+        $context = $this->context;
+
+        // 若 context 中已有翻譯標籤 (B013 封裝)，則進行動態重組
+        if (isset($context['translated_label'])) {
+            $label = __($context['translated_label']);
+            $tid = $context['tid'] ?? null;
+            $code = $context['raw_code'] ?? '0000';
+
+            if ($tid) {
+                return __('Slot') . " {$tid}: {$label} (Code: {$code})";
+            }
+            return "{$label} (Code: {$code})";
+        }
+
+        // 預設退回原始 message (支援歷史資料的翻譯判定與佔位符替換)
+        return __($this->message, $context ?? []);
+    }
+
     public function machine()
     {
         return $this->belongsTo(Machine::class);

app/Models/System/Advertisement.php

@@ -18,11 +18,15 @@ class Advertisement extends Model
         'duration',
         'url',
         'is_active',
+        'start_at',
+        'end_at',
     ];
 
     protected $casts = [
         'duration' => 'integer',
         'is_active' => 'boolean',
+        'start_at' => 'datetime',
+        'end_at' => 'datetime',
     ];
 
     /**
@@ -48,4 +52,21 @@ class Advertisement extends Model
     {
         return $query->where('is_active', true);
     }
+
+    /**
+     * Scope a query to only include advertisements that should be playing now.
+     */
+    public function scopePlaying($query)
+    {
+        $now = now();
+        return $query->where('is_active', true)
+            ->where(function ($q) use ($now) {
+                $q->whereNull('start_at')
+                    ->orWhere('start_at', '<=', $now);
+            })
+            ->where(function ($q) use ($now) {
+                $q->whereNull('end_at')
+                    ->orWhere('end_at', '>=', $now);
+            });
+    }
 }

app/Models/System/Company.php

@@ -25,17 +25,33 @@ class Company extends Model
         'status',
         'start_date',
         'end_date',
+        'warranty_start_date',
+        'warranty_end_date',
+        'software_start_date',
+        'software_end_date',
         'note',
         'settings',
     ];
 
     protected $casts = [
-        'start_date' => 'date',
+        'start_date' => 'date:Y-m-d',
-        'end_date' => 'date',
+        'end_date' => 'date:Y-m-d',
+        'warranty_start_date' => 'date:Y-m-d',
+        'warranty_end_date' => 'date:Y-m-d',
+        'software_start_date' => 'date:Y-m-d',
+        'software_end_date' => 'date:Y-m-d',
         'status' => 'integer',
         'settings' => 'array',
     ];
 
+    /**
+     * Get the contract history for the company.
+     */
+    public function contracts(): HasMany
+    {
+        return $this->hasMany(CompanyContract::class)->latest();
+    }
+
     /**
      * Get the users for the company.
      */

app/Models/System/CompanyContract.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Models\System;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class CompanyContract extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'company_id',
+        'type',
+        'start_date',
+        'end_date',
+        'warranty_start_date',
+        'warranty_end_date',
+        'software_start_date',
+        'software_end_date',
+        'note',
+        'creator_id',
+    ];
+
+    protected $casts = [
+        'start_date' => 'date:Y-m-d',
+        'end_date' => 'date:Y-m-d',
+        'warranty_start_date' => 'date:Y-m-d',
+        'warranty_end_date' => 'date:Y-m-d',
+        'software_start_date' => 'date:Y-m-d',
+        'software_end_date' => 'date:Y-m-d',
+    ];
+
+    /**
+     * Get the company that owns the contract.
+     */
+    public function company(): BelongsTo
+    {
+        return $this->belongsTo(Company::class);
+    }
+
+    /**
+     * Get the user who created the record.
+     */
+    public function creator(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'creator_id');
+    }
+}

app/Services/Machine/MachineService.php

@@ -10,6 +10,56 @@ use Carbon\Carbon;
 
 class MachineService
 {
+    /**
+     * B013: 硬體狀態代碼對照表 (Hardware Status Code Mapping)
+     */
+    public const ERROR_CODE_MAP = [
+        // 出貨狀態類 (Prefix: 04 - BUY_STATUS)
+        '0401' => ['label' => 'Dispensing in progress', 'level' => 'info'],
+        '0402' => ['label' => 'Dispense successful', 'level' => 'info'],
+        '0403' => ['label' => 'Slot jammed', 'level' => 'error'],
+        '0404' => ['label' => 'Motor not stopped', 'level' => 'warning'],
+        '0406' => ['label' => 'Slot not found', 'level' => 'error'],
+        '0407' => ['label' => 'Dispense error (0407)', 'level' => 'error'],
+        '0408' => ['label' => 'Dispense error (0408)', 'level' => 'error'],
+        '0409' => ['label' => 'Dispense error (0409)', 'level' => 'error'],
+        '040A' => ['label' => 'Dispense error (040A)', 'level' => 'error'],
+        '0410' => ['label' => 'Elevator rising', 'level' => 'info'],
+        '0411' => ['label' => 'Elevator descending', 'level' => 'info'],
+        '0412' => ['label' => 'Elevator rise error', 'level' => 'error'],
+        '0413' => ['label' => 'Elevator descent error', 'level' => 'error'],
+        '0414' => ['label' => 'Pickup door closed', 'level' => 'info'],
+        '0415' => ['label' => 'Pickup door error', 'level' => 'error'],
+        '0416' => ['label' => 'Delivery door opened', 'level' => 'info'],
+        '0417' => ['label' => 'Delivery door open error', 'level' => 'error'],
+        '0418' => ['label' => 'Delivering product', 'level' => 'info'],
+        '0419' => ['label' => 'Delivery door closed', 'level' => 'info'],
+        '0420' => ['label' => 'Delivery door close error', 'level' => 'error'],
+        '0421' => ['label' => 'Hopper empty', 'level' => 'warning'],
+        '0422' => ['label' => 'Hopper overheated', 'level' => 'warning'],
+        '0423' => ['label' => 'Hopper heating timeout', 'level' => 'error'],
+        '0424' => ['label' => 'Hopper error (0424)', 'level' => 'error'],
+        '0426' => ['label' => 'Microwave door opened', 'level' => 'info'],
+        '0427' => ['label' => 'Microwave door error', 'level' => 'error'],
+        '04FF' => ['label' => 'Dispense stopped', 'level' => 'info'],
+
+        // 貨道狀態類 (Prefix: 02 - SLOT_STATUS)
+        '0201' => ['label' => 'Slot normal', 'level' => 'info'],
+        '0202' => ['label' => 'Product empty', 'level' => 'warning'],
+        '0203' => ['label' => 'Slot empty', 'level' => 'warning'],
+        '0206' => ['label' => 'Slot not closed', 'level' => 'warning'],
+        '0207' => ['label' => 'Slot motor error (0207)', 'level' => 'error'],
+        '0208' => ['label' => 'Slot motor error (0208)', 'level' => 'error'],
+        '0209' => ['label' => 'Slot motor error (0209)', 'level' => 'error'],
+        '0212' => ['label' => 'Hopper empty (0212)', 'level' => 'warning'],
+
+        // 機台整體狀態類 (Prefix: 54 - MACHINE_STATUS)
+        '5400' => ['label' => 'Machine normal', 'level' => 'info'],
+        '5401' => ['label' => 'Elevator sensor error', 'level' => 'error'],
+        '5402' => ['label' => 'Pickup door not closed', 'level' => 'warning'],
+        '5403' => ['label' => 'Elevator failure', 'level' => 'error'],
+    ];
+
     /**
      * Update machine heartbeat and status.
      * 
@@ -178,6 +228,36 @@ class MachineService
         });
     }
 
+    /**
+     * B013: Record machine hardware error/status log with auto-translation.
+     * 
+     * @param Machine $machine
+     * @param array $data
+     * @return MachineLog
+     */
+    public function recordErrorLog(Machine $machine, array $data): MachineLog
+    {
+        $errorCode = $data['error_code'] ?? '0000';
+        $mapping = self::ERROR_CODE_MAP[$errorCode] ?? ['label' => 'Unknown Status', 'level' => 'error'];
+        
+        $slotNo = $data['tid'] ?? null;
+        $label = $mapping['label'];
+        
+        // 儲存原始英文格式作為 DB 備用，前端顯示會優先使用 model accessor 的動態翻譯內容
+        $message = $slotNo ? "Slot {$slotNo}: {$label} (Code: {$errorCode})" : "{$label} (Code: {$errorCode})";
+
+        return $machine->logs()->create([
+            'company_id' => $machine->company_id,
+            'type' => 'submachine',
+            'level' => $mapping['level'],
+            'message' => $message,
+            'context' => array_merge($data, [
+                'translated_label' => $label,
+                'raw_code' => $errorCode
+            ]),
+        ]);
+    }
+
     /**
      * Update machine slot stock (single slot).
      * Legacy support for recordLog (Existing code).

config/api-docs.php

@@ -8,6 +8,113 @@ return [
         [
             'name' => '機台核心通訊 (IoT Core)',
             'apis' => [
+                [
+                    'name' => 'B000: 維運人員登入認證 (Technician Login)',
+                    'slug' => 'b000-tech-login',
+                    'method' => 'POST',
+                    'path' => '/api/v1/app/admin/login/B000',
+                    'description' => '機台啟動引導的第一步。維運人員輸入個人帳密與機台編號進行認證，成功後核發臨時 Sanctum Token 供後續 B014 下載敏感設定使用。',
+                    'headers' => [
+                        'Content-Type' => 'application/json',
+                    ],
+                    'parameters' => [
+                        'username' => [
+                            'type' => 'string',
+                            'required' => true,
+                            'description' => '維運人員帳號',
+                            'example' => 'admin_test'
+                        ],
+                        'password' => [
+                            'type' => 'string',
+                            'required' => true,
+                            'description' => '維運人員密碼',
+                            'example' => 'password123'
+                        ],
+                        'machine' => [
+                            'type' => 'string',
+                            'required' => true,
+                            'description' => '機台序號 (Serial No)',
+                            'example' => 'SN202604130001'
+                        ],
+                    ],
+                    'response_parameters' => [
+                        'message' => [
+                            'type' => 'string',
+                            'description' => '回應訊息',
+                            'example' => 'Success'
+                        ],
+                        'token' => [
+                            'type' => 'string',
+                            'description' => '臨時身份認證 Token (Sanctum)',
+                            'example' => '1|abcdefg...'
+                        ],
+                    ],
+                    'request' => [
+                        'username' => 'admin_test',
+                        'password' => 'password123',
+                        'machine' => 'SN202604130001'
+                    ],
+                    'response' => [
+                        'message' => 'Success',
+                        'token' => '1|abcdefg...'
+                    ],
+                ],
+                [
+                    'name' => 'B014: 機台參數與金鑰下載 (Config Download)',
+                    'slug' => 'b014-config-download',
+                    'method' => 'GET',
+                    'path' => '/api/v1/app/machine/setting/B014',
+                    'description' => '機台引導階段的第二步。在人員登入後，透過此介面下載金流金鑰、電子發票設定與機台專屬通訊 Token。',
+                    'headers' => [
+                        'Authorization' => 'Bearer <user_token>',
+                        'Content-Type' => 'application/json',
+                    ],
+                    'parameters' => [
+                        'machine' => [
+                            'type' => 'string',
+                            'required' => true,
+                            'description' => '機台序號',
+                            'example' => 'SN202604130001'
+                        ],
+                    ],
+                    'response_parameters' => [
+                        'success' => [
+                            'type' => 'boolean',
+                            'description' => '是否成功',
+                            'example' => true
+                        ],
+                        'data' => [
+                            'type' => 'array',
+                            'description' => '配置物件陣列。包含：t050v01 (序號), api_token (通訊 Token), t050v41~43 (玉山設定), t050v34~38 (發票設定), TP_... (趨勢/手機支付設定)',
+                            'example' => [
+                                [
+                                    't050v01' => 'SN202604130001',
+                                    'api_token' => 'mac_token_...',
+                                    't050v41' => '80812345',
+                                    't050v34' => '2000132',
+                                    'TP_APP_ID' => 'GP_001'
+                                ]
+                            ]
+                        ],
+                    ],
+                    'request' => [],
+                    'response' => [
+                        'success' => true,
+                        'code' => 200,
+                        'data' => [
+                            [
+                                't050v01' => 'SN202604130001',
+                                'api_token' => 'mac_token_...',
+                                't050v41' => '80812345',
+                                't050v42' => '9001',
+                                't050v43' => 'hash_key',
+                                't050v34' => '2000132',
+                                'TP_APP_ID' => 'GP_001'
+                            ]
+                        ]
+                    ],
+                    'notes' => '此 API 受 auth:sanctum 保護，必須在 Header 帶上從 B000 取得的 Token。'
+                ],
                 [
                     'name' => 'B005: 廣告清單同步 (Ad Sync)',
                     'slug' => 'b005-ad-sync',
@@ -302,6 +409,189 @@ return [
                         ]
                     ],
                     'notes' => '運作邏輯 (Client-side Logic): GET 執行全量同步，App 應於收到成功回應後，先執行 deleteAll() 再進行 insertAll()。PATCH 執行增量更新，App 僅對記憶體中的既存商品進行欄位值覆蓋 (Patching)。'
+                ],
+                [
+                    'name' => 'B013: 機台故障與異常狀態上報 (Error/Status Report)',
+                    'slug' => 'b013-error-report',
+                    'method' => 'POST',
+                    'path' => '/api/v1/app/machine/error/B013',
+                    'description' => '用於接收機台發出的即時硬體狀態代碼（如卡貨、門未關）。身份由 Bearer Token 識別，回傳成功代表伺服器已將任務列入異步隊列處理。',
+                    'headers' => [
+                        'Authorization' => 'Bearer <api_token>',
+                        'Content-Type' => 'application/json',
+                    ],
+                    'parameters' => [
+                        'tid' => [
+                            'type' => 'integer',
+                            'required' => false,
+                            'description' => '涉及到之具體貨道編號 (Slot No)',
+                            'example' => 12
+                        ],
+                        'error_code' => [
+                            'type' => 'string',
+                            'required' => true,
+                            'description' => '硬體狀態代碼 (4 位 16 進位字串)',
+                            'example' => '0403'
+                        ],
+                    ],
+                    'response_parameters' => [
+                        'success' => [
+                            'type' => 'boolean',
+                            'description' => '請求是否已成功接收',
+                            'example' => true
+                        ],
+                        'code' => [
+                            'type' => 'integer',
+                            'description' => '內部業務狀態碼',
+                            'example' => 200
+                        ],
+                    ],
+                    'request' => [
+                        'tid' => 12,
+                        'error_code' => '0403',
+                    ],
+                    'response' => [
+                        'success' => true,
+                        'code' => 200,
+                        'message' => 'Error report accepted'
+                    ],
+                    'notes' => '硬體代碼對照表見後端 MachineService::ERROR_CODE_MAP 定義。
+0402: 出貨成功, 0403: 貨道卡貨, 0202: 貨道缺貨, 0415: 取貨門異常...等。'
+                ],
+                [
+                    'name' => 'B017: 貨道庫存同步 (Slot Synchronization)',
+                    'slug' => 'b017-slot-sync',
+                    'method' => 'GET',
+                    'path' => '/api/v1/app/machine/reload_msg/B017',
+                    'description' => '用於機台端獲獲取所有貨道的最新庫存、效期與狀態。通常由 B010 回傳 status: 49 時觸發。',
+                    'headers' => [
+                        'Authorization' => 'Bearer <api_token>',
+                        'Content-Type' => 'application/json',
+                    ],
+                    'parameters' => [],
+                    'response_parameters' => [
+                        'success' => [
+                            'type' => 'boolean',
+                            'description' => '是否成功',
+                            'example' => true
+                        ],
+                        'data' => [
+                            'type' => 'array',
+                            'description' => '貨道數據陣列。',
+                            'example' => [
+                                [
+                                    'tid' => '1',
+                                    'num' => 10,
+                                    'expiry_date' => '2026-12-31',
+                                    'batch_no' => 'B2026',
+                                    'status' => '1'
+                                ]
+                            ]
+                        ],
+                    ],
+                    'request' => [],
+                    'response' => [
+                        'success' => true,
+                        'code' => 200,
+                        'data' => [
+                            [
+                                'tid' => '1',
+                                'num' => 10,
+                                'expiry_date' => '2026-12-31',
+                                'batch_no' => 'B2026',
+                                'product_id' => 1,
+                                'capacity' => 15,
+                                'status' => '1'
+                            ]
+                        ]
+                    ],
+                    'notes' => 'B017 為全量同步。實作上後端會依據 slot_no 進行排序，並將相關指令狀態更新為已完成。'
+                ],
+                [
+                    'name' => 'B024: 取貨碼/通行碼驗證與消耗回報',
+                    'slug' => 'b024-access-code',
+                    'method' => 'POST/PUT',
+                    'path' => '/api/v1/app/sell/access-code/B024',
+                    'description' => '處理代碼取貨流程。POST 用於驗證碼有效性，PUT 用於回報出貨成功並消耗代碼。',
+                    'headers' => [
+                        'Authorization' => 'Bearer <api_token>',
+                        'Content-Type' => 'application/json',
+                    ],
+                    'parameters' => [
+                        'passCode' => [
+                            'type' => 'string',
+                            'description' => '取貨碼 (POST)',
+                        ],
+                        'accessCodeId' => [
+                            'type' => 'string',
+                            'description' => '代碼 ID (PUT)',
+                        ],
+                        'status' => [
+                            'type' => 'string',
+                            'description' => '出貨狀態 (PUT: 1:成功, 0:失敗)',
+                        ],
+                    ],
+                    'response_parameters' => [
+                        'res1' => ['type' => 'string', 'description' => '雲端關聯 ID'],
+                        'res3' => ['type' => 'string', 'description' => '預計出貨商品 ID'],
+                    ],
+                    'request' => [
+                        'passCode' => '12345678'
+                    ],
+                    'response' => [
+                        'success' => true,
+                        'res1' => '99',
+                        'res3' => '5'
+                    ],
+                ],
+                [
+                    'name' => 'B027: 贈品碼/優惠券驗證與消耗回報',
+                    'slug' => 'b027-freebie-code',
+                    'method' => 'POST/PUT',
+                    'path' => '/api/v1/app/sell/free-gift/B027',
+                    'description' => '處理贈品券與 0 元購活動。邏輯與 B024 相似但對象為行銷贈品。',
+                    'headers' => [
+                        'Authorization' => 'Bearer <api_token>',
+                        'Content-Type' => 'application/json',
+                    ],
+                    'parameters' => [
+                        'passCode' => [
+                            'type' => 'string',
+                            'description' => '贈品碼 (POST)',
+                        ],
+                    ],
+                    'response_parameters' => [
+                        'success' => ['type' => 'boolean', 'description' => '驗證結果'],
+                    ],
+                    'request' => [
+                        'passCode' => 'FREE888'
+                    ],
+                    'response' => [
+                        'success' => true,
+                        'message' => 'Free gift verified'
+                    ],
+                ],
+                [
+                    'name' => 'B055: 遠端指令出貨控制 (Remote Dispense)',
+                    'slug' => 'b055-remote-dispense',
+                    'method' => 'POST/PUT',
+                    'path' => '/api/v1/app/machine/dispense/B055',
+                    'description' => '遠端手動驅動機台出貨。POST 用於獲取待處理指令，PUT 用於回報出貨完成。',
+                    'headers' => [
+                        'Authorization' => 'Bearer <api_token>',
+                        'Content-Type' => 'application/json',
+                    ],
+                    'parameters' => [
+                        'id' => ['type' => 'string', 'description' => '指令 ID (PUT)'],
+                        'stock' => ['type' => 'string', 'description' => '剩餘庫存 (PUT)'],
+                    ],
+                    'request' => [],
+                    'response' => [
+                        'success' => true,
+                        'data' => [
+                            ['slot_no' => '1', 'order_id' => 'RE-123']
+                        ]
+                    ],
                 ]
             ]
         ]

database/migrations/2026_04_08_164500_add_contract_dates_to_companies_table.php

@@ -0,0 +1,36 @@
+<?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('companies', function (Blueprint $table) {
+            $table->date('warranty_start_date')->nullable()->after('end_date')->comment('保固起始日');
+            $table->date('warranty_end_date')->nullable()->after('warranty_start_date')->comment('保固結束日');
+            $table->date('software_start_date')->nullable()->after('warranty_end_date')->comment('軟體服務起始日');
+            $table->date('software_end_date')->nullable()->after('software_start_date')->comment('軟體服務結束日');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('companies', function (Blueprint $table) {
+            $table->dropColumn([
+                'warranty_start_date',
+                'warranty_end_date',
+                'software_start_date',
+                'software_end_date'
+            ]);
+        });
+    }
+};

database/migrations/2026_04_08_165000_create_company_contracts_table.php

@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('company_contracts', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('company_id')->constrained()->onDelete('cascade');
+            $table->string('type')->comment('buyout, lease');
+            $table->date('start_date')->nullable();
+            $table->date('end_date')->nullable();
+            $table->date('warranty_start_date')->nullable();
+            $table->date('warranty_end_date')->nullable();
+            $table->date('software_start_date')->nullable();
+            $table->date('software_end_date')->nullable();
+            $table->text('note')->nullable();
+            $table->foreignId('creator_id')->nullable()->constrained('users');
+            $table->timestamps();
+            
+            $table->index(['company_id', 'created_at']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('company_contracts');
+    }
+};

database/migrations/2026_04_13_110941_add_scheduling_fields_to_advertisements_table.php

@@ -0,0 +1,29 @@
+<?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('advertisements', function (Blueprint $table) {
+            $table->dateTime('start_at')->nullable()->after('url')->comment('發布時間');
+            $table->dateTime('end_at')->nullable()->after('start_at')->comment('下架時間');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('advertisements', function (Blueprint $table) {
+            $table->dropColumn(['start_at', 'end_at']);
+        });
+    }
+};

docs/api/iot-spec.md

@@ -4,6 +4,67 @@
 
 ---
 
+## 🔐 B000: 維運人員登入認證 (Technician Login)
+機台引導階段 (Provisioning) 的第一步，用於核發臨時身份 Token 以便後續下載敏感設定。
+
+### 1. API 資訊
+- **Endpoint**: `POST /api/v1/app/admin/login/B000`
+- **認證方式**: 無 (需傳入 `username`, `password`, `machine`)
+- **回應內容**: `token` (Sanctum Token)
+
+### 2. 回應範例
+```json
+{
+    "message": "Success",
+    "token": "3|abcdef1234567890..."
+}
+```
+
+---
+
+## 🔑 B014: 機台參數與金鑰下載 (Config Download)
+下載機台運作所需的支付金鑰、電子發票設定與正式通訊 Token。
+
+### 1. API 資訊
+- **Endpoint**: `POST /api/v1/app/machine/setting/B014`
+- **認證方式**: **Bearer Token** (需帶上 B000 取得的 Token)
+- **Header**: `Authorization: Bearer {token}`
+
+### 2. 請求參數
+- `machine`: 機台序號 (Serial No)
+
+### 3. 回應規格 (欄位映射)
+| 欄位 | 說明 | 來源範例 |
+| :--- | :--- | :--- |
+| `t050v01` | 機台序號 | `SN2026041301` |
+| `api_token` | **機台正式 Token** | 後續 B010/B600 認證用 |
+| `t050v41` | 玉山特店編號 | `ESUN_STORE_ID` |
+| `t050v43` | 玉山 Hash Key | `ESUN_HASH` |
+| `t050v34` | 發票特店 ID | `INV_MID` |
+| `TP_APP_ID` | 趨勢支付 AppID | `TP_APP_ID` |
+
+### 4. 回應範例 (JSON)
+```json
+{
+    "success": true,
+    "code": 200,
+    "data": [
+        {
+            "t050v01": "SN2026041301",
+            "api_token": "mac_token_...",
+            "t050v41": "8081234567",
+            "t050v42": "9001",
+            "t050v43": "password123",
+            "t050v34": "2000132",
+            "TP_APP_ID": "GREEN_001",
+            "...": "..."
+        }
+    ]
+}
+```
+
+---
+
 ## 🟢 B010: 心跳上報與狀態同步 (Heartbeat & Status)
 機台定時（建議每 5-10 秒）上送，用於確認連線狀態、溫度及門禁狀態。
 

docs/development_schedule.md

@@ -15,22 +15,34 @@ gantt
     excludes weekends
     
     section Phase 1 基礎建設
-    資料表 + IoT API + 異步管線   :active, p1, 2026-03-16, 5d
+    資料表 + IoT API + 異步管線         :done, p1, 2026-03-16, 5d
     
     section Phase 2 核心營運
-    後台核心營運頁面整合           :p2, after p1, 50d
+    帳號權限 + 資料主檔 + 機台 + 遠端 + 儀表板 :done, p2a, 2026-03-23, 30d
+    MQTT 基礎架構                        :active, mqtt, 2026-04-16, 3d
+    全域工具列與溝通系統                   :todo, toolbar, 2026-04-21, 4d
+    銷售管理                              :todo, p2d, after toolbar, 3d
+    倉庫管理                              :todo, p2f, after p2d, 6d
     
     section Phase 3 進階模組
-    進階分析與垂直模組             :p3, after p2, 30d
+    進階分析與垂直模組                     :todo, p3, after p2f, 15d
 ```
 
 ## 二、詳細時程對照表
 
 | 階段 (Phase) | 關鍵任務摘要 | 預估天數 | 預計工作日期 | 狀態 |
 | :--- | :--- | :---: | :---: | :---: |
-| **Phase 1** | 28 張資料表 Migration + B010~B710 核心 API + Redis 異步 Job | **5 工作天** | 03/16 ~ 03/20 | 進行中 |
+| **Phase 1** | 資料表 Migration + IoT 核心 API + Redis 異步 Job | **5 天** | 03/16 ~ 03/20 | ✅ 完成 |
-| **Phase 2** | **後台核心營運頁面** (帳號權限、資料設定、機台、銷售、遠端、倉庫、儀表板) | **50 工作天** | 03/23 ~ 05/29 | 規劃中 |
+| **Phase 2A** | 帳號與權限基礎 (帳號管理、子帳號、角色、RBAC) | **8 天** | 03/23 ~ 04/03 | ✅ 完成 |
-| **Phase 3** | **進階垂直模組** (分析、稽核、會員、APP、Line、預約、特殊權限) | **30 工作天** | 06/01 ~ 07/10 | 規劃中 |
+| **Phase 2B** | 基礎資料主檔 (商品、廣告、點數、識別證) | **5 天** | 04/06 ~ 04/10 | ✅ 完成 |
+| **Phase 2C** | 機台管理 (列表、日誌、權限、稼動率、效期、維修) | **7 天** | 04/13 ~ 04/23 | ✅ 完成 |
+| **Phase 2E** | 遠端管理 (庫存、重啟、出貨、鎖定等 7 項) | **8 天** | 04/30 ~ 05/11 | ✅ 完成 |
+| **Phase 2G** | 儀表板 | **2 天** | 05/28 ~ 05/29 | ✅ 完成 |
+| **MQTT** | EMQX + Go Gateway + Laravel 橋接 | **3 天** | 04/16 ~ 04/18 | 🔴 待開發 |
+| **全域工具列** | 下載中心、通知、帳號模擬、公告系統、快捷入口 | **4 天** | 04/21 ~ 04/24 | 🟡 待開發 |
+| **Phase 2D** | 銷售管理 (銷售紀錄、取貨碼、促銷、通行碼) | **3 天** | 04/25 ~ 04/29 | 🟢 待開發 |
+| **Phase 2F** | 倉庫管理 (倉庫、庫存、調撥、採購、補貨) | **6 天** | 04/30 ~ 05/07 | 🟢 待開發 |
+| **Phase 3** | 進階垂直模組 (分析、稽核、會員、APP、Line、預約) | **15 天** | 05/08 ~ 05/28 | 🔵 待開發 |
 
 ---
 
@@ -39,7 +51,7 @@ gantt
 > [!IMPORTANT]
 > 開發順序依**功能相依性**排列：先建帳號與權限基礎 → 再建商品等主檔資料 → 然後是依賴主檔的機台與銷售 → 接著是營運急需的遠端管理與倉庫管理 → 最後是匯總數據的儀表板。Phase 3 則從分析報表開始，逐步擴展至行銷與第三方聯動。
 
-### ⚡ Phase 1：基礎建設 (03/16 ~ 03/20)
+### ⚡ Phase 1：基礎建設 (03/16 ~ 03/20) ✅ 已完成
 
 | 任務類別 | 內容 | 日期 |
 | :--- | :--- | :---: |
@@ -47,10 +59,27 @@ gantt
 | IoT API 端點 | B010 心跳、B017 庫存、B055 出貨、B600/B601/B602 金流 | 03/18 - 03/19 |
 | 異步管線 | Redis Queue Job + Service 層、B650 會員驗證 | 03/20 |
 
+### 🔌 MQTT 基礎架構 (04/16 ~ 04/18) 🔴 待開發
+
+| 日期 | 任務 |
+| :---: | :--- |
+| **04/16 (三)** | EMQX 佈署至 compose.yaml + Go Gateway 上行開發 |
+| **04/17 (四)** | Go Gateway 上行完成 + 下行開發 |
+| **04/18 (五)** | Laravel mqtt:listen + MqttCommandService + 端對端測試 |
+
+### 🛠️ 全域工具列與溝通系統 (04/21 ~ 04/24) 🟡 待開發
+
+| 日期 | 任務 |
+| :---: | :--- |
+| **04/21 (一)** | ☁️ 下載任務中心 |
+| **04/22 (二)** | 🔔 通知中心 + ❓ 幫助/客服中心 |
+| **04/23 (三)** | 🎭 帳號切換與身分模擬 + 📢 系統公告管理 |
+| **04/24 (四)** | 🛡️ 登錄強制公告 + 🚀 儀表板快捷入口 |
+
 ### 🏛️ Phase 2：核心營運子選單 (03/23 ~ 05/29)
 共 51 項子選單，依功能相依性分為七個開發階段。
 
-#### 📌 A. 帳號與權限基礎 (03/23 ~ 04/03)
+#### 📌 A. 帳號與權限基礎 (03/23 ~ 04/03) ✅ 已完成
 > 為何優先：帳號、角色、權限是所有後台模組的存取控管基礎，必須最先到位。
 
 | # | 模組名稱 | 子菜單項目 | 日期 | 功能重點 |
@@ -72,7 +101,7 @@ gantt
 | 15 | | 其他功能 | 04/03 | 其餘未分類功能之權限控管 |
 | 16 | | AI智能預測 | 04/03 | AI 預測功能的存取權限設定 |
 
-#### 📌 B. 基礎資料主檔 (04/06 ~ 04/10)
+#### 📌 B. 基礎資料主檔 (04/06 ~ 04/10) ✅ 已完成
 > 為何第二：商品主檔是機台貨道、倉庫、銷售等後續模組的共同基礎資料。
 
 | # | 模組名稱 | 子菜單項目 | 日期 | 功能重點 |
@@ -83,7 +112,7 @@ gantt
 | 20 | | 點數設定 | 04/10 | 點數發放規則與兌換比例設定 |
 | 21 | | 識別證 | 04/10 | 員工/維修人員識別證管理 |
 
-#### 📌 C. 機台管理 (04/13 ~ 04/23)
+#### 📌 C. 機台管理 (04/13 ~ 04/23) ✅ 已完成
 > 為何第三：機台是核心營運實體，須在商品主檔建好後才能綁定貨道。
 
 | # | 模組名稱 | 子菜單項目 | 日期 | 功能重點 |
@@ -107,7 +136,7 @@ gantt
 | 32 | | 通行碼 | 04/29 | 通行碼發放與使用紀錄 |
 | 33 | | 來店禮 | 04/29 | 到店即贈的禮品活動設定 |
 
-#### 📌 E. 遠端管理 (04/30 ~ 05/11)
+#### 📌 E. 遠端管理 (04/30 ~ 05/11) ✅ 已完成
 > 為何第五：營運最迫切需要的即時控制能力，直接串接 Phase 1 的 B010/B055 API。
 
 | # | 模組名稱 | 子菜單項目 | 日期 | 功能重點 |
@@ -136,7 +165,7 @@ gantt
 | 49 | | 人員庫存 | 05/27 | 補貨人員攜帶庫存管理 |
 | 50 | | 回庫單 | 05/27 | 退回倉庫的商品登記與核銷 |
 
-#### 📌 G. 儀表板 (05/28 ~ 05/29)
+#### 📌 G. 儀表板 (05/28 ~ 05/29) ✅ 已完成
 > 為何最後：儀表板匯總機台、銷售、遠端指令、倉庫等全部數據，必須等上游模組完成才有意義。
 
 | # | 模組名稱 | 子菜單項目 | 日期 | 功能重點 |

docs/future_todo.md

@@ -0,0 +1,43 @@
+# Star Cloud 近期開發待辦清單 (Target Roadmap)
+
+本文件列出了 Star Cloud 系統近期優先開發的功能模組，旨在強化系統的營運溝通能力與非同步處理效率。
+
+---
+
+## 🟢 核心開發階段：全域工具列與通訊系統
+*本階段為目前唯一開發重心*
+
+### 1. 全域工具列升級 (Header Toolbar)
+| 功能項目 | 具體描述 | 預計開發時間 |
+| :--- | :--- | :--- |
+| **☁️ 下載任務中心** | 整合 Redis Queue 處理耗時報表匯出。商戶點擊匯出後背景執行，完成後透過 Header 圖示點擊下載。 | 2 天 |
+| **🔔 通知中心** | 串接 Laravel Database Notifications，顯示系統消息、機台警告與業務通知，帶有紅點提示。 | 1 天 |
+| **❓ 幫助/客服中心** | 於 Header 置入問號圖示，點擊觸發側邊抽屜 (Offcanvas)，展示 FAQ 與客服聯繫窗口。 | 0.5 天 |
+| **🎭 帳號切換與身分模擬** | **整合於頭像下拉選單**：支援「系統管理員切換租戶」與「租戶管理員切換子帳號」，提供顯眼的頂部模擬狀態橫幅。 | 1.5 天 |
+
+### 2. 公告與溝通系統 (Communication System)
+| 功能項目 | 具體描述 | 預計開發時間 |
+| :--- | :--- | :--- |
+| **📢 系統公告管理** | 建立後台發布介面，支援針對全體或特定租戶發布「一般」或「重要」公告。 | 1.5 天 |
+| **🛡️ 登錄強制公告** | 實作具備「滑動解鎖」功能的彈窗。使用者必須將公告滑到底部，解鎖按鈕後才能進入 Dashboard。 | 1 天 |
+
+### 3. 儀表板優化 (Dashboard Enhancement)
+| 功能項目 | 具體描述 | 預計開發時間 |
+| :--- | :--- | :--- |
+| **🚀 儀表板快捷入口** | 在儀表板頂部加入一排快捷圖示（如：機台管理、訂單查詢、會員中心），方便商戶快速跳轉核心功能。 | 0.5 天 |
+
+---
+
+## 🟡 第二階段：進階行銷與營運工具
+*優先順序：中 | 預計總工時：約 5 個開發日*
+
+| 功能項目 | 具體描述 | 預計開發時間 |
+| :--- | :--- | :--- |
+| **🎁 互動盲盒抽獎** | **後台端**：實作中獎機率配置、獎項庫存管理、活動排程。**終端 API**：提供給機台大螢幕 H5/React 遊戲呼叫的開獎與配置介面。 | 4 天 |
+
+---
+
+## 📝 實作標準
+1.  **UI/UX**: 必須符合 `ui-minimal-luxury` 規範（Outfit 字體、青色點綴、柔和投影）。
+2.  **安全性**: 權限控制必須嚴格過濾 `company_id`，公告需支援「已讀紀錄」追蹤。
+3.  **效能**: 下載中心必須使用非同步隊列，嚴禁在 Request 週期內執行耗時匯出。

docs/mqtt-implementation-plan.md

@@ -0,0 +1,191 @@
+# Star Cloud MQTT 基礎架構實作計畫 (Phase 1)
+
+本計畫旨在建立 Star Cloud 的高併發通訊基石，包含佈署 EMQX Broker、開發 Go MQTT Gateway，並建立與 Laravel 之間的 Redis **雙向**異步橋接機制。
+
+---
+
+## User Review Required
+
+> [!IMPORTANT]
+> **雙向通訊架構**：本計畫不只處理「機台 ➜ 雲端」的上報，也同時建立「雲端 ➜ 機台」的指令下發通道。後台管理員在按下「遠端出貨」按鈕時，Laravel 會將指令推入 Redis，由 Go Gateway 轉發至 EMQX，再即時送達機台 APP。
+
+> [!WARNING]
+> **資源配額**：Go Gateway 雖然輕量，但在 Docker 環境中仍建議設定 `mem_limit` 避免極端情況下的資源爭搶。
+
+---
+
+## 系統架構總覽
+
+```
+機台 Android APP
+     │
+     ├─ [上行] Publish ──→ EMQX ──→ Go Gateway ──→ Redis List (mqtt_incoming_jobs) ──→ Laravel mqtt:listen ──→ Job ──→ MySQL
+     │
+     └─ [下行] Subscribe ←── EMQX ←── Go Gateway ←── Redis List (mqtt_outgoing_commands) ←── Laravel MqttCommandService
+```
+
+---
+
+## Proposed Changes
+
+### 1. 基礎設施佈署 (Infrastructure)
+
+#### [MODIFY] [compose.yaml](file:///home/mama/projects/star-cloud/compose.yaml)
+- **新增 `emqx` 服務**：
+    - Image: `emqx/emqx:5.10.3`（開源版最終穩定版，Apache 2.0 授權）
+    - Ports: `1883:1883` (MQTT), `8083:8083` (WebSocket), `18083:18083` (Dashboard)
+    - 加入 `sail` 網路
+    - 配置 Redis Auth 插件環境變數，指向 `star-cloud-redis`
+- **新增 `mqtt-gateway` 服務**：
+    - 使用 `mqtt-gateway/Dockerfile` 進行 Multi-stage build
+    - 連接至 `sail` 網路
+    - 依賴 `emqx` 與 `redis`
+    - 環境變數從 `.env` 讀取
+
+#### [MODIFY] [.env](file:///home/mama/projects/star-cloud/.env)
+- 新增以下環境變數：
+```env
+# MQTT / EMQX
+MQTT_BROKER_HOST=emqx
+MQTT_BROKER_PORT=1883
+EMQX_DASHBOARD_PORT=18083
+
+# Go Gateway
+MQTT_GATEWAY_CLIENT_ID=star-cloud-gateway
+MQTT_REDIS_HOST=star-cloud-redis
+MQTT_REDIS_PORT=6379
+```
+
+---
+
+### 2. Go MQTT Gateway 開發 (The Bridge)
+
+#### [NEW] 完整目錄結構
+```
+mqtt-gateway/
+├── Dockerfile              ← Multi-stage build (builder + alpine)
+├── go.mod
+├── go.sum
+├── main.go                 ← 進入點：初始化、訊號監聽、graceful shutdown
+├── config/
+│   └── config.go           ← 讀取環境變數 (EMQX_ADDR, REDIS_ADDR 等)
+├── internal/
+│   ├── handler/
+│   │   ├── heartbeat_handler.go    ← 處理 machine/+/heartbeat
+│   │   ├── error_handler.go        ← 處理 machine/+/error
+│   │   └── transaction_handler.go  ← 處理 machine/+/transaction
+│   └── bridge/
+│       ├── redis_consumer.go       ← [下行] BLPOP mqtt_outgoing_commands，轉發至 EMQX
+│       └── redis_pusher.go         ← [上行] RPUSH mqtt_incoming_jobs
+```
+
+#### [上行邏輯] 機台 ➜ 雲端
+1. 訂閱 `machine/+/heartbeat`, `machine/+/error`, `machine/+/transaction`。
+2. 從 Topic 路徑提取 `serial_no`。
+3. 包裝成 `BridgePayload`：
+   ```json
+   {
+     "type": "heartbeat",
+     "serial_no": "M-001",
+     "payload": { "current_page": 1, "temperature": 25.5 },
+     "received_at": "2026-04-14T09:00:00+08:00"
+   }
+   ```
+4. 執行 `RPUSH mqtt_incoming_jobs {json}`。
+
+#### [下行邏輯] 雲端 ➜ 機台 (新增)
+1. Go Gateway 啟動一條 Goroutine，持續 `BLPOP mqtt_outgoing_commands`。
+2. 取得 JSON 後解析目標 `serial_no` 與 `command` 內容。
+3. Publish 至 `machine/{serial_no}/command` (QoS 1)。
+   ```json
+   {
+     "target": "M-001",
+     "command": "dispense",
+     "payload": { "slot_no": 5, "transaction_id": "T202604140001" },
+     "message_id": "MSG_123456789"
+   }
+   ```
+
+#### [NEW] mqtt-gateway/Dockerfile
+```dockerfile
+# Stage 1: Build
+FROM golang:1.23-alpine AS builder
+WORKDIR /app
+COPY go.mod go.sum ./
+RUN go mod download
+COPY . .
+RUN CGO_ENABLED=0 go build -o gateway .
+
+# Stage 2: Run
+FROM alpine:3.20
+COPY --from=builder /app/gateway /usr/local/bin/gateway
+CMD ["gateway"]
+```
+
+---
+
+### 3. Laravel 端實作
+
+#### [NEW] app/Console/Commands/ListenMqttQueue.php
+- Artisan Command: `mqtt:listen`
+- 使用 `BLPOP mqtt_incoming_jobs` 阻塞式監聽
+- 根據 `type` 分派至對應的 Laravel Job：
+    - `heartbeat` ➜ `ProcessHeartbeatJob`
+    - `error` ➜ `ProcessMachineErrorJob`
+    - `transaction` ➜ `ProcessTransactionJob`
+
+#### [NEW] app/Services/Machine/MqttCommandService.php
+- 提供 `sendCommand(string $serialNo, string $command, array $payload)` 方法
+- 將指令 JSON 推入 Redis List `mqtt_outgoing_commands`
+- 供 Controller 呼叫（例如後台管理員按下「遠端出貨」按鈕）
+
+#### [NEW] app/Jobs/Machine/ (三個 Job)
+- `ProcessHeartbeatJob.php`: 更新 `last_heard_at`、溫度、頁面碼
+- `ProcessMachineErrorJob.php`: 寫入 `machine_logs`，觸發告警通知
+- `ProcessTransactionJob.php`: 更新庫存、建立交易紀錄
+
+#### [MODIFY] [MachineAuthController.php](file:///home/mama/projects/star-cloud/app/Http/Controllers/Api/V1/App/MachineAuthController.php)
+- 在 B014 核發 `api_token` 後，同步寫入 Redis：
+  `Redis::set("machine_auth:{$serial_no}", hash('sha256', $token));`
+- Token 更新/撤銷時，同步刪除 Redis 中的對應 Key
+
+---
+
+## Architecture Decisions (Confirmed)
+
+### ✅ EMQX 版本策略
+- **統一鎖定**：開發與正式環境皆使用 `emqx/emqx:5.10.3`（開源版最後一個穩定版本）。
+- **選擇理由**：EMQX 從 5.9.0 起合併為統一版本，6.x 改用 BSL 商業授權。`5.10.3` 是純開源 (Apache 2.0) 的最終穩定版，功能完整且免授權費用。
+
+### ✅ 下行指令安全性（無需額外 OTP）
+App 連線 MQTT 時已使用 `api_token` 作為密碼完成身份認證，因此 **MQTT 連線本身即為認證通道**。安全性由以下三層保障：
+1. **連線層**：App 使用 `serial_no` + `api_token` 連線 EMQX，未通過驗證的裝置無法訂閱任何 Topic。
+2. **ACL 層**：EMQX 存取控制確保只有 Go Gateway 能 Publish 到 `machine/{id}/command`，機台 App 無法偽造指令。
+3. **冪等性層**：每條下行指令的 Payload 包含唯一的 `message_id`，App 端應記錄已執行的 ID，防止重複執行同一條指令。
+
+> [!NOTE]
+> **結論**：上行用 Token 當密碼、下行用 ACL 當門禁、`message_id` 當防重複鎖。三層防護已足夠，不需要額外的 OTP 機制。
+
+---
+
+## Verification Plan
+
+### 1. 基礎設施驗證
+- 執行 `./vendor/bin/sail up -d`
+- 造訪 `http://localhost:18083` 確認 EMQX Dashboard 正常啟動
+- 確認 Go Gateway Container 的 logs 顯示 "Connected to EMQX" 與 "Connected to Redis"
+
+### 2. 上行通訊測試 (機台 ➜ 雲端)
+- 使用 MQTTX 工具連接 `localhost:1883`
+- 發送心跳 JSON 至 `machine/TEST-001/heartbeat`
+- 檢查 Laravel 日誌確認 `mqtt:listen` 成功接收並分派 Job
+- 檢查 MySQL `machines` 表的 `last_heard_at` 是否更新
+
+### 3. 下行通訊測試 (雲端 ➜ 機台)
+- 在 MQTTX 訂閱 `machine/TEST-001/command`
+- 透過 Laravel Tinker 呼叫 `MqttCommandService::sendCommand('TEST-001', 'reboot', [])`
+- 確認 MQTTX 收到 reboot 指令的 JSON
+
+### 4. 壓力測試
+- 使用 Go Script 模擬 500 台機台同時發送心跳
+- 監控 Redis List 長度與 Laravel Worker 的處理速率

lang/en.json

@@ -17,7 +17,7 @@
     "Account updated successfully.": "Account updated successfully.",
     "Account:": "Account:",
     "accounts": "Account Management",
-    "Accounts / Machines": "Accounts / Machines",
+    "Accounts \/ Machines": "Accounts \/ Machines",
     "Action": "Action",
     "Actions": "Actions",
     "Active": "Active",
@@ -51,7 +51,7 @@
     "Advertisement Management": "Advertisement Management",
     "Advertisement updated successfully": "Advertisement updated successfully",
     "Advertisement updated successfully.": "Advertisement updated successfully.",
-    "Advertisement Video/Image": "Advertisement Video/Image",
+    "Advertisement Video\/Image": "Advertisement Video\/Image",
     "Affiliated Company": "Affiliated Company",
     "Affiliated Unit": "Company Name",
     "Affiliation": "Company Name",
@@ -85,6 +85,7 @@
     "Apply changes to all identical products in this machine": "Apply changes to all identical products in this machine",
     "Apply to all identical products in this machine": "Apply to all identical products in this machine",
     "Are you sure to delete this customer?": "Are you sure to delete this customer?",
+    "Are you sure you want to change the status of this item? This will affect its visibility on vending machines.": "Are you sure you want to change the status of this item? This will affect its visibility on vending machines.",
     "Are you sure you want to change the status of this product? Disabled products will not be visible on the machine.": "Are you sure you want to change the status of this product? Disabled products will not be visible on the machine.",
     "Are you sure you want to change the status? After disabling, this account will no longer be able to log in to the system.": "Are you sure you want to change the status? After disabling, this account will no longer be able to log in to the system.",
     "Are you sure you want to change the status? This may affect associated accounts.": "Are you sure you want to change the status? This may affect associated accounts.",
@@ -95,6 +96,7 @@
     "Are you sure you want to delete this configuration?": "您確定要刪除此金流配置嗎？",
     "Are you sure you want to delete this configuration? This action cannot be undone.": "Are you sure you want to delete this configuration? This action cannot be undone.",
     "Are you sure you want to delete this item? This action cannot be undone.": "Are you sure you want to delete this item? This action cannot be undone.",
+    "Are you sure you want to delete this product or category? This action cannot be undone.": "Are you sure you want to delete this product or category? This action cannot be undone.",
     "Are you sure you want to delete this product?": "Are you sure you want to delete this product?",
     "Are you sure you want to delete this product? All related historical translation data will also be removed.": "Are you sure you want to delete this product? All related historical translation data will also be removed.",
     "Are you sure you want to delete this role? This action cannot be undone.": "Are you sure you want to delete this role? This action cannot be undone.",
@@ -127,7 +129,7 @@
     "Back to List": "Back to List",
     "Badge Settings": "Badge Settings",
     "Barcode": "Barcode",
-    "Barcode / Material": "Barcode / Material",
+    "Barcode \/ Material": "Barcode \/ Material",
     "Basic Information": "Basic Information",
     "Basic Settings": "Basic Settings",
     "Basic Specifications": "Basic Specifications",
@@ -164,7 +166,7 @@
     "Change": "Change",
     "Change Stock": "Change Stock",
     "Channel Limits": "Channel Limits",
-    "Channel Limits (Track/Spring)": "Channel Limits (Track/Spring)",
+    "Channel Limits (Track\/Spring)": "Channel Limits (Track\/Spring)",
     "Channel Limits Configuration": "Channel Limits Configuration",
     "ChannelId": "ChannelId",
     "ChannelSecret": "ChannelSecret",
@@ -277,7 +279,7 @@
     "Dispensing": "Dispensing",
     "Duration": "Duration",
     "Duration (Seconds)": "Duration (Seconds)",
-    "e.g. 500ml / 300g": "e.g. 500ml / 300g",
+    "e.g. 500ml \/ 300g": "e.g. 500ml \/ 300g",
     "e.g. John Doe": "e.g. John Doe",
     "e.g. johndoe": "e.g. johndoe",
     "e.g. Taiwan Star": "e.g. Taiwan Star",
@@ -315,7 +317,7 @@
     "Enable Material Code": "Enable Material Code",
     "Enable Points": "Enable Points",
     "Enabled": "Enabled",
-    "Enabled/Disabled": "Enabled/Disabled",
+    "Enabled\/Disabled": "Enabled\/Disabled",
     "End Date": "End Date",
     "Engineer": "Engineer",
     "English": "English",
@@ -341,7 +343,7 @@
     "Execution Time": "Execution Time",
     "Exp": "Exp",
     "Expired": "Expired",
-    "Expired / Disabled": "Expired / Disabled",
+    "Expired \/ Disabled": "Expired \/ Disabled",
     "Expiring": "Expiring",
     "Expiry": "Expiry",
     "Expiry Date": "Expiry Date",
@@ -570,7 +572,7 @@
     "Monthly cumulative revenue overview": "Monthly cumulative revenue overview",
     "Monthly Transactions": "Monthly Transactions",
     "Multilingual Names": "Multilingual Names",
-    "N/A": "N/A",
+    "N\/A": "N\/A",
     "Name": "Name",
     "Name in English": "Name in English",
     "Name in Japanese": "Name in Japanese",
@@ -713,7 +715,7 @@
     "Position": "Position",
     "Preview": "Preview",
     "Previous": "Previous",
-    "Price / Member": "Price / Member",
+    "Price \/ Member": "Price \/ Member",
     "Pricing Information": "Pricing Information",
     "Product Count": "Product Count",
     "Product created successfully": "Product created successfully",
@@ -825,9 +827,10 @@
     "Scale level and access control": "層級與存取控制",
     "Scan this code to quickly access the maintenance form for this device.": "Scan this code to quickly access the maintenance form for this device.",
     "Search accounts...": "Search accounts...",
-    "Search by name or S/N...": "Search by name or S/N...",
+    "Search by name or S\/N...": "Search by name or S\/N...",
     "Search cargo lane": "Search cargo lane",
     "Search Company Title...": "Search Company Title...",
+    "Search categories...": "Search categories...",
     "Search company...": "Search company...",
     "Search configurations...": "Search configurations...",
     "Search customers...": "Search customers...",
@@ -880,7 +883,6 @@
     "Showing :from to :to of :total items": "Showing :from to :to of :total items",
     "Sign in to your account": "Sign in to your account",
     "Signed in as": "Signed in as",
-    "Slot": "Slot",
     "Slot Mechanism (default: Conveyor, check for Spring)": "Slot Mechanism (default: Conveyor, check for Spring)",
     "Slot No": "Slot No",
     "Slot Status": "Slot Status",
@@ -902,7 +904,7 @@
     "Start Date": "Start Date",
     "Statistics": "Statistics",
     "Status": "Status",
-    "Status / Temp / Sub / Card / Scan": "Status / Temp / Sub / Card / Scan",
+    "Status \/ Temp \/ Sub \/ Card \/ Scan": "Status \/ Temp \/ Sub \/ Card \/ Scan",
     "Stock": "Stock",
     "Stock & Expiry": "Stock & Expiry",
     "Stock & Expiry Management": "Stock & Expiry Management",
@@ -1052,5 +1054,112 @@
     "You cannot delete your own account.": "You cannot delete your own account.",
     "Your email address is unverified.": "Your email address is unverified.",
     "Your recent account activity": "Your recent account activity",
-    "待填寫": "待填寫"
+    "待填寫": "待填寫",
+    "Dispensing in progress": "Dispensing in progress",
+    "Dispense successful": "Dispense successful",
+    "Slot jammed": "Slot jammed",
+    "Motor not stopped": "Motor not stopped",
+    "Slot not found": "Slot not found",
+    "Dispense error (0407)": "Dispense error (0407)",
+    "Dispense error (0408)": "Dispense error (0408)",
+    "Dispense error (0409)": "Dispense error (0409)",
+    "Dispense error (040A)": "Dispense error (040A)",
+    "Elevator rising": "Elevator rising",
+    "Elevator descending": "Elevator descending",
+    "Elevator rise error": "Elevator rise error",
+    "Elevator descent error": "Elevator descent error",
+    "Pickup door closed": "Pickup door closed",
+    "Pickup door error": "Pickup door error",
+    "Delivery door opened": "Delivery door opened",
+    "Delivery door open error": "Delivery door open error",
+    "Delivering product": "Delivering product",
+    "Delivery door closed": "Delivery door closed",
+    "Delivery door close error": "Delivery door close error",
+    "Hopper empty": "Hopper empty",
+    "Hopper overheated": "Hopper overheated",
+    "Hopper heating timeout": "Hopper heating timeout",
+    "Hopper error (0424)": "Hopper error (0424)",
+    "Microwave door opened": "Microwave door opened",
+    "Microwave door error": "Microwave door error",
+    "Dispense stopped": "Dispense stopped",
+    "Slot normal": "Slot normal",
+    "Product empty": "Product empty",
+    "Slot empty": "Slot empty",
+    "Slot not closed": "Slot not closed",
+    "Slot motor error (0207)": "Slot motor error (0207)",
+    "Slot motor error (0208)": "Slot motor error (0208)",
+    "Slot motor error (0209)": "Slot motor error (0209)",
+    "Hopper empty (0212)": "Hopper empty (0212)",
+    "Machine normal": "Machine normal",
+    "Elevator sensor error": "Elevator sensor error",
+    "Pickup door not closed": "Pickup door not closed",
+    "Elevator failure": "Elevator failure",
+    "Slot": "Slot",
+    "Page 0": "Offline",
+    "Page 1": "Home",
+    "Page 2": "Vending",
+    "Page 3": "Admin",
+    "Page 4": "Restock",
+    "Page 5": "Tutorial",
+    "Page 6": "Purchasing",
+    "Page 7": "Locked",
+    "Page 60": "Dispense Success",
+    "Page 61": "Slot Test",
+    "Page 62": "Payment Selection",
+    "Page 63": "Waiting for Payment",
+    "Page 64": "Dispensing",
+    "Page 65": "Receipt",
+    "Page 66": "Passcode",
+    "Page 67": "Pickup Code",
+    "Page 68": "Message",
+    "Page 69": "Purchase Cancelled",
+    "Page 610": "Purchase Ended",
+    "Page 611": "Store Gift",
+    "Page 612": "Dispense Failed",
+    "Door Opened": "Door Opened",
+    "Door Closed": "Door Closed",
+    "Firmware updated to :version": "Firmware updated to :version",
+    "Model changed to :model": "Model changed to :model",
+    "User logged in: :name": "User logged in: :name",
+    "Login failed: :account": "Login failed: :account",
+    "Unauthorized login attempt: :account": "Unauthorized login attempt: :account",
+    "Contract Model": "Contract Model",
+    "Warranty Service": "Warranty Service",
+    "Software Service": "Software Service",
+    "Modification History": "Modification History",
+    "No history records": "No history records",
+    "Initial contract registration": "Initial contract registration",
+    "Contract information updated": "Contract information updated",
+    "Warranty Start": "Warranty Start",
+    "Warranty End": "Warranty End",
+    "Software Start": "Software Start",
+    "Software End": "Software End",
+    "Contract History": "Contract History",
+    "Unlimited": "Unlimited",
+    "Change Note": "Change Note",
+    "Log Time": "Log Time",
+    "Service Periods": "Service Periods",
+    "Creator": "Creator",
+    "View Full History": "View Full History",
+    "Contract Start": "Contract Start",
+    "Contract End": "Contract End",
+    "Contract History Detail": "Contract History Detail",
+    "by": "by",
+    "Service Terms": "Service Periods",
+    "Contract": "Contract",
+    "Warranty": "Warranty",
+    "Software": "Software",
+    "Schedule": "Schedule",
+    "Immediate": "Immediate",
+    "Indefinite": "Indefinite",
+    "Ongoing": "Ongoing",
+    "Waiting": "Waiting",
+    "Publish Time": "Publish Time",
+    "Expired Time": "Expired Time",
+    "Inventory synced with machine": "Inventory synced with machine",
+    "Failed to load tab content": "Failed to load tab content",
+    "No machines found": "No machines found",
+    "No products found matching your criteria.": "No products found matching your criteria.",
+    "No categories found.": "No categories found.",
+    "Track Limit (Track/Spring)": "Track Limit (Track/Spring)"
 }

lang/ja.json

@@ -17,7 +17,7 @@
     "Account updated successfully.": "アカウントが正常に更新されました。",
     "Account:": "アカウント:",
     "accounts": "アカウント管理",
-    "Accounts / Machines": "アカウント / 機体",
+    "Accounts \/ Machines": "アカウント \/ 機体",
     "Action": "操作",
     "Actions": "操作",
     "Active": "有効",
@@ -51,7 +51,7 @@
     "Advertisement Management": "広告管理",
     "Advertisement updated successfully": "広告の更新に成功しました",
     "Advertisement updated successfully.": "広告の更新に成功しました。",
-    "Advertisement Video/Image": "広告動画/画像",
+    "Advertisement Video\/Image": "広告動画\/画像",
     "Affiliated Company": "所属会社",
     "Affiliated Unit": "所属会社",
     "Affiliation": "所属会社",
@@ -85,6 +85,7 @@
     "Apply changes to all identical products in this machine": "この機台の同一商品すべてに変更を適用",
     "Apply to all identical products in this machine": "この機体内のすべての同一商品に適用する",
     "Are you sure to delete this customer?": "この顧客を削除してもよろしいですか？",
+    "Are you sure you want to change the status of this item? This will affect its visibility on vending machines.": "この項目のステータスを変更してもよろしいですか？自動販売機での表示に影響します。",
     "Are you sure you want to change the status of this product? Disabled products will not be visible on the machine.": "この商品のステータスを変更してもよろしいですか？無効にすると機体に表示されなくなります。",
     "Are you sure you want to change the status? After disabling, this account will no longer be able to log in to the system.": "ステータスを変更してもよろしいですか？無効にすると、このアカウントはシステムにログインできなくなります。",
     "Are you sure you want to change the status? This may affect associated accounts.": "ステータスを変更してもよろしいですか？関連するアカウントに影響を与える可能性があります。",
@@ -95,6 +96,7 @@
     "Are you sure you want to delete this configuration?": "この設定を削除してもよろしいですか？",
     "Are you sure you want to delete this configuration? This action cannot be undone.": "この設定を削除してもよろしいですか？この操作は取り消せません。",
     "Are you sure you want to delete this item? This action cannot be undone.": "この項目を削除してもよろしいですか？この操作は取り消せません。",
+    "Are you sure you want to delete this product or category? This action cannot be undone.": "この商品またはカテゴリーを削除してもよろしいですか？この操作は取り消せません。",
     "Are you sure you want to delete this product?": "この商品を削除してもよろしいですか？",
     "Are you sure you want to delete this product? All related historical translation data will also be removed.": "この商品を削除してもよろしいですか？関連するすべての翻訳履歴データも削除されます。",
     "Are you sure you want to delete this role? This action cannot be undone.": "この権限を削除してもよろしいですか？この操作は取り消せません。",
@@ -127,7 +129,7 @@
     "Back to List": "リストに戻る",
     "Badge Settings": "バッジ設定",
     "Barcode": "バーコード",
-    "Barcode / Material": "バーコード / 素材",
+    "Barcode \/ Material": "バーコード \/ 素材",
     "Basic Information": "基本情報",
     "Basic Settings": "基本設定",
     "Basic Specifications": "基本仕様",
@@ -164,7 +166,7 @@
     "Change": "変更",
     "Change Stock": "在庫変更",
     "Channel Limits": "チャネル制限",
-    "Channel Limits (Track/Spring)": "チャネル上限（トラック/スプリング）",
+    "Channel Limits (Track\/Spring)": "チャネル上限（トラック\/スプリング）",
     "Channel Limits Configuration": "チャネル制限設定",
     "ChannelId": "チャネルID",
     "ChannelSecret": "チャネルシークレット",
@@ -277,7 +279,7 @@
     "Dispensing": "払い出し中",
     "Duration": "再生時間",
     "Duration (Seconds)": "再生時間（秒）",
-    "e.g. 500ml / 300g": "例: 500ml / 300g",
+    "e.g. 500ml \/ 300g": "例: 500ml \/ 300g",
     "e.g. John Doe": "例：山田太郎",
     "e.g. johndoe": "例：yamadataro",
     "e.g. Taiwan Star": "例：Taiwan Star",
@@ -315,7 +317,7 @@
     "Enable Material Code": "品目コードを有効にする",
     "Enable Points": "ポイントを有効にする",
     "Enabled": "有効",
-    "Enabled/Disabled": "有効/無効",
+    "Enabled\/Disabled": "有効\/無効",
     "End Date": "終了日",
     "Engineer": "エンジニア",
     "English": "英語",
@@ -341,7 +343,7 @@
     "Execution Time": "実行時間",
     "Exp": "有効期限",
     "Expired": "期限切れ",
-    "Expired / Disabled": "期限切れ / 無効",
+    "Expired \/ Disabled": "期限切れ \/ 無効",
     "Expiring": "期限間近",
     "Expiry": "期限",
     "Expiry Date": "有効期限",
@@ -569,7 +571,7 @@
     "Monthly cumulative revenue overview": "月間累積収益の概要",
     "Monthly Transactions": "月間取引数",
     "Multilingual Names": "多言語名称",
-    "N/A": "N/A",
+    "N\/A": "N\/A",
     "Name": "名前",
     "Name in English": "英語名",
     "Name in Japanese": "日本語名",
@@ -630,7 +632,7 @@
     "OEE.Hours": "時間",
     "OEE.Orders": "注文数",
     "OEE.Sales": "売上高",
-    "of": "/",
+    "of": "\/",
     "Offline": "オフライン",
     "Offline Machines": "オフライン機体",
     "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "アカウントを削除すると、そのすべてのリソースとデータが完全に削除されます。削除する前に、保存しておきたいデータをダウンロードしてください。",
@@ -712,7 +714,7 @@
     "Position": "位置",
     "Preview": "プレビュー",
     "Previous": "前へ",
-    "Price / Member": "価格 / 会員",
+    "Price \/ Member": "価格 \/ 会員",
     "Pricing Information": "価格情報",
     "Product Count": "商品数",
     "Product created successfully": "商品が正常に作成されました",
@@ -824,9 +826,10 @@
     "Scale level and access control": "規模レベルとアクセス制御",
     "Scan this code to quickly access the maintenance form for this device.": "このコードをスキャンして、端末のメンテナンスフォームに素早くアクセスします。",
     "Search accounts...": "アカウントを検索...",
-    "Search by name or S/N...": "名称または製造番号で検索...",
+    "Search by name or S\/N...": "名称または製造番号で検索...",
     "Search cargo lane": "貨道を検索",
     "Search Company Title...": "会社名を検索...",
+    "Search categories...": "カテゴリーを検索...",
     "Search company...": "会社を検索...",
     "Search configurations...": "設定を検索...",
     "Search customers...": "顧客を検索...",
@@ -901,7 +904,7 @@
     "Start Date": "開始日",
     "Statistics": "統計",
     "Status": "ステータス",
-    "Status / Temp / Sub / Card / Scan": "状態 / 温度 / 子機 / カード / スキャン",
+    "Status \/ Temp \/ Sub \/ Card \/ Scan": "状態 \/ 温度 \/ 子機 \/ カード \/ スキャン",
     "Stock": "在庫",
     "Stock & Expiry": "在庫と消費期限",
     "Stock & Expiry Management": "在庫・期限管理",
@@ -1051,5 +1054,111 @@
     "You cannot delete your own account.": "自分自身のアカウントを削除することはできません。",
     "Your email address is unverified.": "メールアドレスが未認証です。",
     "Your recent account activity": "最近のアカウントアクティビティ",
-    "待填寫": "待填寫"
+    "待填寫": "待填寫",
+    "Dispensing in progress": "商品搬送中",
+    "Dispense successful": "搬送成功",
+    "Slot jammed": "貨道詰まり (K-PDT)",
+    "Motor not stopped": "モーター停止異常",
+    "Slot not found": "指定貨道が見つかりません",
+    "Dispense error (0407)": "搬送異常 (0407)",
+    "Dispense error (0408)": "搬送異常 (0408)",
+    "Dispense error (0409)": "搬送異常 (0409)",
+    "Dispense error (040A)": "搬送異常 (040A)",
+    "Elevator rising": "昇降機上昇中",
+    "Elevator descending": "昇降機下降中",
+    "Elevator rise error": "昇降機上昇異常",
+    "Elevator descent error": "昇降機下降異常",
+    "Pickup door closed": "取出口ドア閉鎖",
+    "Pickup door error": "取出口ドア異常",
+    "Delivery door opened": "配送口ドア開放",
+    "Delivery door open error": "配送口ドア開放異常",
+    "Delivering product": "商品配送中",
+    "Delivery door closed": "配送口ドア閉鎖",
+    "Delivery door close error": "配送口ドア閉鎖異常",
+    "Hopper empty": "ホッパー空",
+    "Hopper overheated": "ホッパー過熱",
+    "Hopper heating timeout": "ホッパー加熱タイムアウト",
+    "Hopper error (0424)": "ホッパー異常 (0424)",
+    "Microwave door opened": "電子レンジドア開放",
+    "Microwave door error": "電子レンジドア異常",
+    "Dispense stopped": "搬送停止",
+    "Slot normal": "貨道正常",
+    "Product empty": "品切れ (PDT_EMPTY)",
+    "Slot empty": "貨道空 (SLOT_EMPTY)",
+    "Slot not closed": "貨道未閉鎖",
+    "Slot motor error (0207)": "貨道モーター故障 (0207)",
+    "Slot motor error (0208)": "貨道モーター故障 (0208)",
+    "Slot motor error (0209)": "貨道モーター故障 (0209)",
+    "Hopper empty (0212)": "ホッパー空 (0212)",
+    "Machine normal": "システム正常",
+    "Elevator sensor error": "昇降センサー異常",
+    "Pickup door not closed": "取出口ドア未閉鎖",
+    "Elevator failure": "昇降システム故障",
+    "Page 0": "オフライン",
+    "Page 1": "ホーム",
+    "Page 2": "販売ページ",
+    "Page 3": "管理ページ",
+    "Page 4": "補充ページ",
+    "Page 5": "チュートリアル",
+    "Page 6": "購入中",
+    "Page 7": "ロック中",
+    "Page 60": "排出成功",
+    "Page 61": "スロットテスト",
+    "Page 62": "支払い方法選択",
+    "Page 63": "支払い待ち",
+    "Page 64": "排出中",
+    "Page 65": "レシート",
+    "Page 66": "パスコード",
+    "Page 67": "受取コード",
+    "Page 68": "メッセージ",
+    "Page 69": "購入キャンセル",
+    "Page 610": "購入完了",
+    "Page 611": "来店ギフト",
+    "Page 612": "排出失敗",
+    "Door Opened": "機ドア開放",
+    "Door Closed": "機ドア閉鎖",
+    "Firmware updated to :version": "ファームウェア更新：:version",
+    "Model changed to :model": "モデル変更：:model",
+    "User logged in: :name": "ユーザーログイン：:name",
+    "Login failed: :account": "ログイン失敗：:account",
+    "Unauthorized login attempt: :account": "不許可のログイン試行：:account",
+    "Contract Model": "契約モデル",
+    "Warranty Service": "保証サービス",
+    "Software Service": "ソフトウェアサービス",
+    "Modification History": "変更履歴",
+    "No history records": "履歴なし",
+    "Initial contract registration": "初期契約登録",
+    "Contract information updated": "契約情報更新",
+    "Warranty Start": "保証開始",
+    "Warranty End": "保証終了",
+    "Software Start": "ソフト開始",
+    "Software End": "ソフト終了",
+    "Contract History": "契約履歴",
+    "Unlimited": "無期限",
+    "Change Note": "変更メモ",
+    "Log Time": "記録時間",
+    "Service Periods": "サービス期間",
+    "Creator": "作成者",
+    "View Full History": "全履歴を表示",
+    "Contract Start": "契約開始",
+    "Contract End": "契約終了",
+    "Contract History Detail": "契約履歴の詳細",
+    "by": "作成者:",
+    "Service Terms": "サービス期間",
+    "Contract": "契約",
+    "Warranty": "保証",
+    "Software": "ソフトウェア",
+    "Schedule": "スケジュール設定",
+    "Immediate": "即時",
+    "Indefinite": "無期限",
+    "Ongoing": "進行中",
+    "Waiting": "待機中",
+    "Publish Time": "公開時間",
+    "Expired Time": "終了時間",
+    "Inventory synced with machine": "在庫が機体と同期されました",
+    "Failed to load tab content": "タブコンテンツの読み込みに失敗しました",
+    "No machines found": "マシンが見つかりません",
+    "No products found matching your criteria.": "条件に一致する商品が見つかりませんでした。",
+    "No categories found.": "カテゴリーが見つかりませんでした。",
+    "Track Limit (Track/Spring)": "在庫上限 (ベルト/スプリング)"
 }

lang/zh_TW.json

@@ -17,7 +17,7 @@
     "Account updated successfully.": "帳號已成功更新。",
     "Account:": "帳號:",
     "accounts": "帳號管理",
-    "Accounts / Machines": "帳號 / 機台",
+    "Accounts \/ Machines": "帳號 \/ 機台",
     "Action": "操作",
     "Actions": "操作",
     "Active": "使用中",
@@ -51,7 +51,7 @@
     "Advertisement Management": "廣告管理",
     "Advertisement updated successfully": "廣告更新成功",
     "Advertisement updated successfully.": "廣告更新成功。",
-    "Advertisement Video/Image": "廣告影片/圖片",
+    "Advertisement Video\/Image": "廣告影片\/圖片",
     "Affiliated Company": "公司名稱",
     "Affiliated Unit": "公司名稱",
     "Affiliation": "所屬單位",
@@ -62,9 +62,11 @@
     "All": "全部",
     "All Affiliations": "所有公司",
     "All Categories": "所有分類",
+    "All Command Types": "所有指令類型",
     "All Companies": "所有公司",
     "All Levels": "所有層級",
     "All Machines": "所有機台",
+    "All Status": "所有狀態",
     "All Stable": "狀態穩定",
     "All Times System Timezone": "所有時間為系統時區",
     "Amount": "金額",
@@ -85,6 +87,7 @@
     "Apply changes to all identical products in this machine": "同步套用至此機台內的所有相同商品",
     "Apply to all identical products in this machine": "同步套用至此機台內的所有相同商品",
     "Are you sure to delete this customer?": "您確定要刪除此客戶嗎？",
+    "Are you sure you want to change the status of this item? This will affect its visibility on vending machines.": "您確定要變更此項目的狀態嗎？這將會影響其在販賣機上的顯示內容。",
     "Are you sure you want to change the status of this product? Disabled products will not be visible on the machine.": "確定要變更此商品的狀態嗎？停用的商品將不會在機台上顯示。",
     "Are you sure you want to change the status? After disabling, this account will no longer be able to log in to the system.": "您確定要變更狀態嗎？停用之後，該帳號將會立即被登出且無法再登入系統。",
     "Are you sure you want to change the status? This may affect associated accounts.": "您確定要變更狀態嗎？這可能會影響相關帳號的權限效力。",
@@ -95,6 +98,7 @@
     "Are you sure you want to delete this configuration?": "您確定要刪除此金流配置嗎？",
     "Are you sure you want to delete this configuration? This action cannot be undone.": "您確定要刪除此金流配置嗎？此操作將無法復原。",
     "Are you sure you want to delete this item? This action cannot be undone.": "確定要刪除此項目嗎？此操作無法復原。",
+    "Are you sure you want to delete this product or category? This action cannot be undone.": "您確定要刪除此商品或分類嗎？此操作將無法復原。",
     "Are you sure you want to delete this product?": "您確定要刪除此商品嗎？",
     "Are you sure you want to delete this product? All related historical translation data will also be removed.": "確定要刪除此商品嗎？所有相關的歷史翻譯數據也將被移除。",
     "Are you sure you want to delete this role? This action cannot be undone.": "您確定要刪除此角色嗎？此操作將無法復原。",
@@ -127,7 +131,7 @@
     "Back to List": "返回列表",
     "Badge Settings": "識別證",
     "Barcode": "條碼",
-    "Barcode / Material": "條碼 / 物料編碼",
+    "Barcode \/ Material": "條碼 \/ 物料編碼",
     "Basic Information": "基本資訊",
     "Basic Settings": "基本設定",
     "Basic Specifications": "基本規格",
@@ -164,7 +168,7 @@
     "Change": "更換",
     "Change Stock": "零錢庫存",
     "Channel Limits": "貨道上限",
-    "Channel Limits (Track/Spring)": "貨道上限 (履帶/彈簧)",
+    "Channel Limits (Track\/Spring)": "貨道上限 (履帶\/彈簧)",
     "Channel Limits Configuration": "貨道上限配置",
     "ChannelId": "ChannelId",
     "ChannelSecret": "ChannelSecret",
@@ -274,10 +278,11 @@
     "Discord Notifications": "Discord通知",
     "Dispense Failed": "出貨失敗",
     "Dispense Success": "出貨成功",
+    "Displaying": "目前顯示",
     "Dispensing": "出貨",
     "Duration": "時長",
     "Duration (Seconds)": "播放秒數",
-    "e.g. 500ml / 300g": "例如：500ml / 300g",
+    "e.g. 500ml \/ 300g": "例如：500ml \/ 300g",
     "e.g. John Doe": "例如：張曉明",
     "e.g. johndoe": "例如：xiaoming",
     "e.g. Taiwan Star": "例如：台灣之星",
@@ -315,7 +320,7 @@
     "Enable Material Code": "啟用物料編號",
     "Enable Points": "啟用點數規則",
     "Enabled": "已啟用",
-    "Enabled/Disabled": "啟用/停用",
+    "Enabled\/Disabled": "啟用\/停用",
     "End Date": "截止日",
     "Engineer": "維修人員",
     "English": "英文",
@@ -341,7 +346,7 @@
     "Execution Time": "執行時間",
     "Exp": "效期",
     "Expired": "已過期",
-    "Expired / Disabled": "已過期 / 停用",
+    "Expired \/ Disabled": "已過期 \/ 停用",
     "Expiring": "效期將屆",
     "Expiry": "效期",
     "Expiry Date": "有效日期",
@@ -393,7 +398,7 @@
     "Initial Role": "初始角色",
     "Installation": "裝機",
     "Invoice Status": "發票開立狀態",
-    "Items": "個項目",
+    "Items": "筆",
     "items": "筆項目",
     "Japanese": "日文",
     "JKO_MERCHANT_ID": "街口支付 商店代號",
@@ -570,7 +575,7 @@
     "Monthly cumulative revenue overview": "本月累計營收概況",
     "Monthly Transactions": "本月交易統計",
     "Multilingual Names": "多語系名稱",
-    "N/A": "不適用",
+    "N\/A": "不適用",
     "Name": "名稱",
     "Name in English": "英文名稱",
     "Name in Japanese": "日文名稱",
@@ -631,8 +636,9 @@
     "OEE.Hours": "小時",
     "OEE.Orders": "訂單",
     "OEE.Sales": "銷售",
-    "of": "總計",
+    "of": "／共",
     "Offline": "離線",
+    "of items": "筆項目",
     "Offline Machines": "離線機台",
     "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "一旦您的帳號被刪除，其所有資源和數據將被永久刪除。在刪除帳號之前，請下載您希望保留的任何數據或資訊。",
     "Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.": "帳號一旦刪除，所有關連數據將被永久移除。請輸入您的密碼以確認您希望永久刪除此帳號。",
@@ -677,7 +683,7 @@
     "Pending": "等待機台領取",
     "pending": "等待機台領取",
     "Performance": "效能 (Performance)",
-    "Permanent": "永久授權",
+    "Permanent": "永久",
     "Permanently Delete Account": "永久刪除帳號",
     "Permission Settings": "權限設定",
     "Permissions": "權限",
@@ -713,7 +719,7 @@
     "Position": "投放位置",
     "Preview": "預覽",
     "Previous": "上一頁",
-    "Price / Member": "售價 / 會員價",
+    "Price \/ Member": "售價 \/ 會員價",
     "Pricing Information": "價格資訊",
     "Product Count": "商品數量",
     "Product created successfully": "商品已成功建立",
@@ -825,9 +831,10 @@
     "Scale level and access control": "層級與存取控制",
     "Scan this code to quickly access the maintenance form for this device.": "掃描此 QR Code 即可快速進入此設備的維修單填寫頁面。",
     "Search accounts...": "搜尋帳號...",
-    "Search by name or S/N...": "搜尋名稱或序號...",
+    "Search by name or S\/N...": "搜尋名稱或序號...",
     "Search cargo lane": "搜尋貨道編號或商品名稱",
     "Search Company Title...": "搜尋公司名稱...",
+    "Search categories...": "搜尋分類...",
     "Search company...": "搜尋公司...",
     "Search configurations...": "搜尋設定...",
     "Search customers...": "搜尋客戶...",
@@ -853,6 +860,7 @@
     "Select Category": "選擇類別",
     "Select Company": "選擇公司名稱",
     "Select Company (Default: System)": "選擇公司 (預設：系統)",
+    "Select Date Range": "選擇建立日期區間",
     "Select date to sync data": "選擇日期以同步數據",
     "Select Machine": "選擇機台",
     "Select Machine to view metrics": "請選擇機台以查看指標",
@@ -876,11 +884,10 @@
     "Show": "顯示",
     "Show material code field in products": "在商品資料中顯示物料編號欄位",
     "Show points rules in products": "在商品資料中顯示點數規則相關欄位",
-    "Showing": "顯示第",
+    "Showing": "目前顯示",
     "Showing :from to :to of :total items": "顯示第 :from 到 :to 項，共 :total 項",
     "Sign in to your account": "隨時隨地掌控您的業務。",
     "Signed in as": "登入身份",
-    "Slot": "貨道",
     "Slot Mechanism (default: Conveyor, check for Spring)": "貨道機制 (預設履帶，勾選為彈簧)",
     "Slot No": "貨道編號",
     "Slot Status": "貨道效期",
@@ -902,13 +909,14 @@
     "Start Date": "起始日",
     "Statistics": "數據統計",
     "Status": "狀態",
-    "Status / Temp / Sub / Card / Scan": "狀態 / 溫度 / 下位機 / 刷卡機 / 掃碼機",
+    "Status \/ Temp \/ Sub \/ Card \/ Scan": "狀態 \/ 溫度 \/ 下位機 \/ 刷卡機 \/ 掃碼機",
     "Stock": "庫存",
     "Stock & Expiry": "庫存與效期",
     "Stock & Expiry Management": "庫存與效期管理",
     "Stock & Expiry Overview": "庫存與效期一覽",
     "Stock Management": "庫存管理單",
     "Stock Quantity": "庫存數量",
+    "Stock Update": "同步庫存",
     "Stock:": "庫存：",
     "Store Gifts": "來店禮",
     "Store ID": "商店代號",
@@ -981,7 +989,10 @@
     "Track Channel Limit": "履帶貨道上限",
     "Track device health and maintenance history": "追蹤設備健康與維修歷史",
     "Track Limit": "履帶貨道上限",
+    "Track Limit (Track/Spring)": "貨道上限(履帶/彈簧)",
     "Traditional Chinese": "繁體中文",
+    "Track": "履帶",
+    "Spring": "彈簧",
     "Transfer Audit": "調撥單",
     "Transfers": "調撥單",
     "Trigger": "觸發",
@@ -1052,5 +1063,111 @@
     "You cannot delete your own account.": "您無法刪除自己的帳號。",
     "Your email address is unverified.": "您的電子郵件地址尚未驗證。",
     "Your recent account activity": "最近的帳號活動",
-    "待填寫": "待填寫"
+    "待填寫": "待填寫",
+    "Dispensing in progress": "正在出貨中",
+    "Dispense successful": "出貨成功",
+    "Slot jammed": "貨道卡貨 (K-PDT)",
+    "Motor not stopped": "電機未停止",
+    "Slot not found": "找不到指定貨道",
+    "Dispense error (0407)": "出貨過程異常 (0407)",
+    "Dispense error (0408)": "出貨過程異常 (0408)",
+    "Dispense error (0409)": "出貨過程異常 (0409)",
+    "Dispense error (040A)": "出貨過程異常 (040A)",
+    "Elevator rising": "升降平台上升中",
+    "Elevator descending": "升降平台下降中",
+    "Elevator rise error": "升降平台上升異常",
+    "Elevator descent error": "升降平台下降異常",
+    "Pickup door closed": "取貨門已關閉",
+    "Pickup door error": "取貨門運作異常",
+    "Delivery door opened": "送貨門開啟",
+    "Delivery door open error": "送貨門開啟異常",
+    "Delivering product": "正在送出商品",
+    "Delivery door closed": "送貨門關閉",
+    "Delivery door close error": "送貨門關閉異常",
+    "Hopper empty": "料斗箱空",
+    "Hopper overheated": "料斗箱過熱",
+    "Hopper heating timeout": "料斗箱加熱逾時",
+    "Hopper error (0424)": "料斗箱異常 (0424)",
+    "Microwave door opened": "微波爐門開啟",
+    "Microwave door error": "微波爐門異常",
+    "Dispense stopped": "出貨停止",
+    "Slot normal": "貨道正常",
+    "Product empty": "貨道缺貨 (PDT_EMPTY)",
+    "Slot empty": "貨道空 (SLOT_EMPTY)",
+    "Slot not closed": "貨道未關閉",
+    "Slot motor error (0207)": "貨道電機故障 (0207)",
+    "Slot motor error (0208)": "貨道電機故障 (0208)",
+    "Slot motor error (0209)": "貨道電機故障 (0209)",
+    "Hopper empty (0212)": "料斗空 (0212)",
+    "Machine normal": "機台系統正常",
+    "Elevator sensor error": "升降箱感測異常",
+    "Pickup door not closed": "取貨門未關閉",
+    "Elevator failure": "升降系統故障",
+    "Slot": "貨道",
+    "Page 0": "離線",
+    "Page 1": "主頁面",
+    "Page 2": "販賣頁",
+    "Page 3": "管理頁",
+    "Page 4": "補貨頁",
+    "Page 5": "教學頁",
+    "Page 6": "購買中",
+    "Page 7": "鎖定頁",
+    "Page 60": "出貨成功",
+    "Page 61": "貨道測試",
+    "Page 62": "付款選擇",
+    "Page 63": "等待付款",
+    "Page 64": "出貨",
+    "Page 65": "收據簽單",
+    "Page 66": "通行碼",
+    "Page 67": "取貨碼",
+    "Page 68": "訊息顯示",
+    "Page 69": "取消購買",
+    "Page 610": "購買結束",
+    "Page 611": "來店禮",
+    "Page 612": "出貨失敗",
+    "Door Opened": "機門已開啟",
+    "Door Closed": "機門已關閉",
+    "Firmware updated to :version": "韌體版本更新：:version",
+    "Model changed to :model": "型號變更：:model",
+    "User logged in: :name": "使用者登入：:name",
+    "Login failed: :account": "登入失敗：:account",
+    "Unauthorized login attempt: :account": "越權登入嘗試：:account",
+    "Contract Model": "合約模式",
+    "Warranty Service": "保固服務",
+    "Software Service": "軟體服務",
+    "Modification History": "異動歷程",
+    "No history records": "尚無歷史紀錄",
+    "Initial contract registration": "初始合約註冊",
+    "Contract information updated": "合約資訊已更新",
+    "Warranty Start": "保固起始",
+    "Warranty End": "保固結束",
+    "Software Start": "軟體起始",
+    "Software End": "軟體結束",
+    "Contract History": "合約歷程",
+    "Unlimited": "無限期",
+    "Change Note": "異動備註",
+    "Log Time": "記錄時間",
+    "Service Periods": "服務區間",
+    "Creator": "建立者",
+    "View Full History": "查看完整歷程",
+    "Contract Start": "合約起始",
+    "Contract End": "合約結束",
+    "Contract History Detail": "合約歷程詳情",
+    "by": "由",
+    "Service Terms": "服務期程",
+    "Contract": "合約",
+    "Warranty": "保固",
+    "Software": "軟體",
+    "Schedule": "排程區間",
+    "Immediate": "立即",
+    "Indefinite": "無限期",
+    "Ongoing": "進行中",
+    "Waiting": "等待中",
+    "Publish Time": "發布時間",
+    "Expired Time": "下架時間",
+    "Inventory synced with machine": "庫存已與機台同步",
+    "Failed to load tab content": "載入分頁內容失敗",
+    "No machines found": "未找到機台",
+    "No products found matching your criteria.": "找不到符合條件的商品。",
+    "No categories found.": "找不到分類。"
 }

package-lock.json

@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "flatpickr": "^4.6.13",
                 "pptxgenjs": "^4.0.1"
             },
             "devDependencies": {
@@ -1506,6 +1507,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/flatpickr": {
+            "version": "4.6.13",
+            "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+            "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+            "license": "MIT"
+        },
         "node_modules/follow-redirects": {
             "version": "1.15.11",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",

package.json

@@ -19,6 +19,7 @@
         "vite": "^5.0.0"
     },
     "dependencies": {
+        "flatpickr": "^4.6.13",
         "pptxgenjs": "^4.0.1"
     }
 }

resources/css/app.css

@@ -1,3 +1,5 @@
+@import 'flatpickr/dist/flatpickr.min.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -155,6 +157,17 @@
     [x-cloak] {
         display: none !important;
     }
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .hide-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .hide-scrollbar {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
 }
 
 @layer components {
@@ -318,3 +331,219 @@
         @apply py-2.5 text-sm !important;
     }
 }
+    /* Flatpickr Luxury Theme Overrides */
+    .flatpickr-calendar {
+        border: 1px solid #e2e8f0 !important;
+        border-radius: 1.25rem !important;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+        background: #ffffff !important;
+        padding: 4px !important;
+    }
+
+    .dark .flatpickr-calendar {
+        background: #1e293b !important;
+        border-color: #334155 !important;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
+    }
+
+    .flatpickr-day {
+        color: #475569 !important;
+        border-radius: 12px !important;
+        font-weight: 500 !important;
+    }
+
+    .dark .flatpickr-day {
+        color: #cbd5e1 !important;
+    }
+
+    .flatpickr-day.prevMonthDay, 
+    .flatpickr-day.nextMonthDay {
+        color: #cbd5e1 !important;
+        opacity: 0.3;
+    }
+
+    .dark .flatpickr-day.prevMonthDay, 
+    .dark .flatpickr-day.nextMonthDay {
+        color: #475569 !important;
+        opacity: 0.8;
+    }
+
+    .flatpickr-day.today {
+        border-color: #06b6d4 !important;
+        color: #06b6d4 !important;
+    }
+
+    .flatpickr-day.selected,
+    .flatpickr-day.startRange,
+    .flatpickr-day.endRange {
+        background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
+        border-color: transparent !important;
+        color: white !important;
+        box-shadow: 0 8px 15px -3px rgba(6, 182, 212, 0.4) !important;
+        z-index: 10;
+    }
+
+    .flatpickr-day.inRange {
+        background: #ecfeff !important;
+        border-color: transparent !important;
+        box-shadow: -5px 0 0 #ecfeff, 5px 0 0 #ecfeff !important;
+        color: #0891b2 !important;
+    }
+
+    .dark .flatpickr-day.inRange {
+        background: rgba(6, 182, 212, 0.15) !important;
+        box-shadow: -5px 0 0 rgba(6, 182, 212, 0.15), 5px 0 0 rgba(6, 182, 212, 0.15) !important;
+        color: #22d3ee !important;
+    }
+
+    .flatpickr-day:not(.selected):hover {
+        background: #f1f5f9 !important;
+    }
+
+    .dark .flatpickr-day:not(.selected):hover {
+        background: #334155 !important;
+    }
+
+    /* Weekdays & Header */
+    .flatpickr-weekday {
+        color: #94a3b8 !important;
+        font-weight: 800 !important;
+        font-size: 11px !important;
+    }
+
+    .dark .flatpickr-weekday {
+        color: #475569 !important;
+    }
+
+    .flatpickr-months .flatpickr-month {
+        color: #1e293b !important;
+        fill: currentColor !important;
+    }
+
+    .dark .flatpickr-months .flatpickr-month {
+        color: #f8fafc !important;
+    }
+
+    .flatpickr-prev-month, 
+    .flatpickr-next-month {
+        color: #1e293b !important;
+        fill: currentColor !important;
+        @apply transition-colors duration-200 !important;
+    }
+
+    .dark .flatpickr-prev-month, 
+    .dark .flatpickr-next-month {
+        color: #cbd5e1 !important;
+    }
+
+    .flatpickr-prev-month:hover, 
+    .flatpickr-next-month:hover {
+        color: #06b6d4 !important;
+    }
+
+    .flatpickr-current-month .flatpickr-monthDropdown-months {
+        font-weight: 800 !important;
+        @apply bg-transparent dark:bg-slate-800 text-slate-900 dark:text-slate-100 !important;
+        border: none !important;
+        border-radius: 6px !important;
+        padding: 2px 4px !important;
+        cursor: pointer !important;
+    }
+
+    .flatpickr-monthDropdown-month {
+        @apply bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 !important;
+    }
+
+    /* Time Section */
+    .flatpickr-time {
+        border-top: 1px solid #f1f5f9 !important;
+        margin-top: 8px !important;
+        padding-top: 8px !important;
+    }
+
+    .dark .flatpickr-time {
+        border-top-color: #334155 !important;
+    }
+
+    .flatpickr-time input {
+        color: #1e293b !important;
+        font-weight: 800 !important;
+        border-radius: 8px !important;
+    }
+
+    .dark .flatpickr-time input {
+        color: #f8fafc !important;
+    }
+
+    .flatpickr-time input:hover,
+    .flatpickr-time input:focus {
+        background: #f1f5f9 !important;
+    }
+
+    .dark .flatpickr-time input:hover,
+    .dark .flatpickr-time input:focus {
+        background: #334155 !important;
+    }
+
+    .dark .flatpickr-time .flatpickr-am-pm {
+        color: #f8fafc !important;
+    }
+
+    /* Time Stepper Arrows & Separator */
+    .flatpickr-time .numInputWrapper span.arrowUp:after {
+        border-bottom-color: #94a3b8 !important;
+    }
+    
+    .flatpickr-time .numInputWrapper span.arrowUp:hover:after {
+        border-bottom-color: #06b6d4 !important;
+    }
+
+    .flatpickr-time .numInputWrapper span.arrowDown:after {
+        border-top-color: #94a3b8 !important;
+    }
+
+    .flatpickr-time .numInputWrapper span.arrowDown:hover:after {
+        border-top-color: #06b6d4 !important;
+    }
+
+    .dark .flatpickr-time .numInputWrapper span.arrowUp:after {
+        border-bottom-color: #64748b !important;
+    }
+
+    .dark .flatpickr-time .numInputWrapper span.arrowUp:hover:after {
+        border-bottom-color: #06b6d4 !important;
+    }
+
+    .dark .flatpickr-time .numInputWrapper span.arrowDown:after {
+        border-top-color: #64748b !important;
+    }
+
+    .dark .flatpickr-time .numInputWrapper span.arrowDown:hover:after {
+        border-top-color: #06b6d4 !important;
+    }
+
+    .flatpickr-time .numInputWrapper span {
+        border-color: #f1f5f9 !important;
+    }
+
+    .dark .flatpickr-time .numInputWrapper span {
+        border-color: #334155 !important;
+        background: transparent !important;
+    }
+
+    .dark .flatpickr-time .numInputWrapper span:hover {
+        background: #334155 !important;
+    }
+
+    .flatpickr-time .flatpickr-time-separator {
+        color: #94a3b8 !important;
+    }
+
+    .dark .flatpickr-time .flatpickr-time-separator {
+        color: #64748b !important;
+    }
+
+    .flatpickr-weekdays {
+        background: transparent !important;
+    }
+

resources/js/app.js

@@ -3,11 +3,32 @@ import './bootstrap';
 import Alpine from 'alpinejs';
 import collapse from '@alpinejs/collapse';
 
+// 初始化 Preline UI
+import 'preline';
+
+// 引入 Flatpickr 與語系
+import flatpickr from "flatpickr";
+import { MandarinTraditional } from "flatpickr/dist/l10n/zh-tw.js";
+import { Japanese } from "flatpickr/dist/l10n/ja.js";
+
+const docLang = document.documentElement.lang.toLowerCase();
+
+if (docLang.includes('zh')) {
+    flatpickr.localize(MandarinTraditional);
+    window.flatpickrLocale = MandarinTraditional;
+} else if (docLang.includes('ja')) {
+    flatpickr.localize(Japanese);
+    window.flatpickrLocale = Japanese;
+} else {
+    // English is the default in flatpickr
+    window.flatpickrLocale = 'default';
+}
+
+window.flatpickr = flatpickr;
+
 Alpine.plugin(collapse);
 
 window.Alpine = Alpine;
 
+// 確保其他套件都初始化完成後再啟動 Alpine
 Alpine.start();
-
-// 初始化 Preline UI
-import 'preline';

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

@@ -71,6 +71,7 @@ $baseRoute = 'admin.data-config.advertisements';
                             @endif
                             <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">{{ __('Type') }}</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">{{ __('Duration') }}</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">{{ __('Schedule') }}</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">{{ __('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">{{ __('Actions') }}</th>
                         </tr>
@@ -104,15 +105,34 @@ $baseRoute = 'admin.data-config.advertisements';
                                     {{ __($ad->type) }}
                                 </span>
                             </td>
-                            <td class="px-6 py-4 text-center whitespace-nowrap text-sm font-black text-slate-700 dark:text-slate-200">
+                            <td class="px-6 py-4 text-center whitespace-nowrap text-sm font-mono font-bold text-slate-700 dark:text-slate-200">
                                 {{ $ad->duration }}s
                             </td>
+                            <td class="px-6 py-4 text-center whitespace-nowrap">
+                                <div class="flex flex-col items-center gap-0.5">
+                                    <span class="text-[11px] font-mono font-bold text-slate-500 dark:text-slate-400 uppercase tracking-tight">{{ __('From') }}: {{ $ad->start_at?->format('Y-m-d H:i') ?? __('Immediate') }}</span>
+                                    <span class="text-[11px] font-mono font-bold text-slate-500 dark:text-slate-400 uppercase tracking-tight">{{ __('To') }}: {{ $ad->end_at?->format('Y-m-d H:i') ?? __('Indefinite') }}</span>
+                                </div>
+                            </td>
                             <td class="px-6 py-4 text-center">
-                                @if($ad->is_active)
+                                @php
-                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">{{ __('Active') }}</span>
+                                    $now = now();
-                                @else
+                                    $isStarted = !$ad->start_at || $ad->start_at <= $now;
-                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
+                                    $isExpired = $ad->end_at && $ad->end_at < $now;
-                                @endif
+                                    $isPlaying = $ad->is_active && $isStarted && !$isExpired;
+                                @endphp
+                                
+                                <div class="flex flex-col items-center gap-1">
+                                    @if(!$ad->is_active)
+                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black bg-slate-500/10 text-slate-500 border border-slate-500/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
+                                    @elseif($isExpired)
+                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">{{ __('Expired') }}</span>
+                                    @elseif(!$isStarted)
+                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black bg-amber-500/10 text-amber-500 border border-amber-500/20 tracking-widest uppercase">{{ __('Waiting') }}</span>
+                                    @else
+                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">{{ __('Ongoing') }}</span>
+                                    @endif
+                                </div>
                             </td>
                             <td class="px-6 py-4 text-right">
                                 <div class="flex justify-end items-center gap-2">
@@ -211,7 +231,7 @@ $baseRoute = 'admin.data-config.advertisements';
                                         </button>
                                         <div class="flex-1 min-w-0 flex flex-col justify-center cursor-pointer group-hover:text-cyan-500 transition-colors" @click="openPreview(assign.advertisement)">
                                             <p class="text-xs font-black text-slate-700 dark:text-white truncate transition-colors" x-text="assign.advertisement.name"></p>
-                                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter mt-0.5" x-text="assign.advertisement.duration + 's'"></p>
+                                            <p class="text-[11px] font-mono font-bold text-slate-400 uppercase tracking-tight mt-0.5" x-text="assign.advertisement.duration + 's'"></p>
                                         </div>
                                         <button @click="removeAssignment(assign.id)" class="p-1.5 text-slate-300 hover:text-rose-500 transition-colors">
                                             <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
@@ -324,7 +344,7 @@ $baseRoute = 'admin.data-config.advertisements';
                     <span class="w-1.5 h-1.5 rounded-full bg-white/20"></span>
                     <span class="text-cyan-400 font-black tracking-widest text-xs uppercase" x-text="(currentSequenceIndex + 1) + ' / ' + sequenceAds.length"></span>
                     <span class="w-1.5 h-1.5 rounded-full bg-white/20"></span>
-                    <span class="text-white/80 font-bold tracking-widest text-xs tabular-nums" x-text="Math.ceil(sequenceRemainingTime) + 's'"></span>
+                    <span class="text-white/80 font-mono font-bold tracking-tight text-xs tabular-nums" x-text="Math.ceil(sequenceRemainingTime) + 's'"></span>
                 </div>
                 
                 <div class="flex items-center gap-2">
@@ -385,7 +405,9 @@ $baseRoute = 'admin.data-config.advertisements';
                 type: 'image',
                 duration: 15,
                 is_active: true,
-                url: ''
+                url: '',
+                start_at: '',
+                end_at: ''
             },
             
             // Assign Modal
@@ -604,6 +626,17 @@ $baseRoute = 'admin.data-config.advertisements';
                 }
             },
 
+            formatDateForInput(dateStr) {
+                if (!dateStr) return '';
+                const date = new Date(dateStr);
+                const year = date.getFullYear();
+                const month = String(date.getMonth() + 1).padStart(2, '0');
+                const day = String(date.getDate()).padStart(2, '0');
+                const hours = String(date.getHours()).padStart(2, '0');
+                const minutes = String(date.getMinutes()).padStart(2, '0');
+                return `${year}/${month}/${day} ${hours}:${minutes}`;
+            },
+
             async submitAssignment() {
                 try {
                     const response = await fetch(this.urls.assign, {
@@ -650,6 +683,14 @@ $baseRoute = 'admin.data-config.advertisements';
                             if (document.querySelector('#ad_company_select')) {
                                 window.HSSelect.getInstance('#ad_company_select')?.setValue(this.adForm.company_id || '');
                             }
+                            
+                            // 確保 Flatpickr 實例同步顯示目前的時間值
+                            if (this.$refs.startAtPicker?._flatpickr) {
+                                this.$refs.startAtPicker._flatpickr.setDate(this.adForm.start_at);
+                            }
+                            if (this.$refs.endAtPicker?._flatpickr) {
+                                this.$refs.endAtPicker._flatpickr.setDate(this.adForm.end_at);
+                            }
                         });
                     }
                 });
@@ -685,7 +726,7 @@ $baseRoute = 'admin.data-config.advertisements';
             
             openAddModal() {
                 this.adFormMode = 'add';
-                this.adForm = { id: null, company_id: '', name: '', type: 'image', duration: 15, is_active: true, url: '' };
+                this.adForm = { id: null, company_id: '', name: '', type: 'image', duration: 15, is_active: true, url: '', start_at: '', end_at: '' };
                 this.fileName = '';
                 this.mediaPreview = null;
                 this.isAdModalOpen = true;
@@ -693,7 +734,11 @@ $baseRoute = 'admin.data-config.advertisements';
             
             openEditModal(ad) {
                 this.adFormMode = 'edit';
-                this.adForm = { ...ad };
+                this.adForm = { 
+                    ...ad,
+                    start_at: this.formatDateForInput(ad.start_at),
+                    end_at: this.formatDateForInput(ad.end_at)
+                };
                 this.fileName = '';
                 this.mediaPreview = ad.url; // Use existing URL as preview
                 this.isAdModalOpen = true;

resources/views/admin/ads/partials/ad-modal.blade.php

@@ -94,6 +94,51 @@
                     </div>
                 </div>
 
+                <!-- Scheduling -->
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="space-y-2">
+                        <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">
+                            {{ __('Publish Time') }}
+                        </label>
+                        <div class="relative group/input">
+                            <input type="text" name="start_at" x-ref="startAtPicker" x-model="adForm.start_at"
+                                   x-init="flatpickr($refs.startAtPicker, { 
+                                       enableTime: true, 
+                                       dateFormat: 'Y/m/d H:i', 
+                                       time_24hr: true,
+                                       locale: window.flatpickrLocale,
+                                       onClose: (selectedDates, dateStr) => { adForm.start_at = dateStr; }
+                                   })"
+                                   class="w-full h-12 bg-slate-50 dark:bg-slate-800/50 border-none rounded-xl px-4 pr-10 text-sm font-bold text-slate-800 dark:text-white focus:ring-2 focus:ring-cyan-500/20 transition-all placeholder:text-slate-400"
+                                   placeholder="YYYY/MM/DD HH:MM">
+                            <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 group-hover/input:text-cyan-500 transition-colors pointer-events-none">
+                                <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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" /></svg>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="space-y-2">
+                        <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">
+                            {{ __('Expired Time') }}
+                        </label>
+                        <div class="relative group/input">
+                            <input type="text" name="end_at" x-ref="endAtPicker" x-model="adForm.end_at"
+                                   x-init="flatpickr($refs.endAtPicker, { 
+                                       enableTime: true, 
+                                       dateFormat: 'Y/m/d H:i', 
+                                       time_24hr: true,
+                                       locale: window.flatpickrLocale,
+                                       onClose: (selectedDates, dateStr) => { adForm.end_at = dateStr; }
+                                   })"
+                                   class="w-full h-12 bg-slate-50 dark:bg-slate-800/50 border-none rounded-xl px-4 pr-10 text-sm font-bold text-slate-800 dark:text-white focus:ring-2 focus:ring-cyan-500/20 transition-all placeholder:text-slate-400"
+                                   placeholder="YYYY/MM/DD HH:MM">
+                            <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 group-hover/input:text-cyan-500 transition-colors pointer-events-none">
+                                <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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" /></svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
                 <!-- File Upload (Luxury UI Pattern) -->
                 <div class="space-y-2">
                     <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">

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

@@ -3,6 +3,11 @@
 @section('content')
 <div class="space-y-2 pb-20" x-data="{ 
     tab: '{{ $tab }}',
+    tabLoading: false,
+    machineSearch: '',
+    modelSearch: '',
+    permissionSearch: '',
+    permissionCompanyId: '{{ request('company_id') }}',
     showCreateMachineModal: false,
     showPhotoModal: false,
     showDetailDrawer: false,
@@ -180,7 +185,9 @@
         .then(data => {
             if (data.success) {
                 window.dispatchEvent(new CustomEvent('toast', { detail: { message: data.message, type: 'success' } }));
-                setTimeout(() => window.location.reload(), 500);
+                this.showPermissionModal = false;
+                // SPA 模式：重新載入 permissions Tab 內容
+                setTimeout(() => this.searchInTab('permissions'), 300);
             } else {
                 throw new Error(data.error || 'Update failed');
             }
@@ -188,6 +195,113 @@
         .catch(e => {
             window.dispatchEvent(new CustomEvent('toast', { detail: { message: e.message, type: 'error' } }));
         });
+    },
+    // === 搜尋/分頁 AJAX（僅在搜尋或換頁時觸發，Tab 切換不走此路） ===
+    async searchInTab(tabName, extraQuery = '') {
+        this.tabLoading = true;
+        const searchMap = { machines: this.machineSearch, models: this.modelSearch, permissions: this.permissionSearch };
+        const search = searchMap[tabName] || '';
+        let qs = `tab=${tabName}&_ajax=1`;
+        if (search) qs += `&search=${encodeURIComponent(search)}`;
+        if (tabName === 'permissions' && this.permissionCompanyId) qs += `&company_id=${this.permissionCompanyId}`;
+        if (extraQuery) qs += extraQuery;
+
+        // 同步 URL（不含 _ajax）
+        const visibleQs = qs.replace(/&?_ajax=1/, '');
+        history.pushState({}, '', `{{ route('admin.basic-settings.machines.index') }}?${visibleQs}`);
+
+        try {
+            const res = await fetch(
+                `{{ route('admin.basic-settings.machines.index') }}?${qs}`,
+                { headers: { 'X-Requested-With': 'XMLHttpRequest' } }
+            );
+            const html = await res.text();
+            const ref = this.$refs[tabName + 'Content'];
+            if (ref) {
+                ref.innerHTML = html;
+                this.$nextTick(() => {
+                    Alpine.initTree(ref);
+                    this.bindPaginationLinks(ref, tabName);
+                    if (window.HSStaticMethods) {
+                        setTimeout(() => window.HSStaticMethods.autoInit(), 100);
+                    }
+                });
+            }
+        } catch(e) {
+            console.error('Search failed:', e);
+            window.dispatchEvent(new CustomEvent('toast', { detail: { message: '{{ __('Failed to load tab content') }}', type: 'error' } }));
+        } finally {
+            this.tabLoading = false;
+        }
+    },
+    // 攔截分頁連結，改為 AJAX 請求
+    bindPaginationLinks(container, tabName) {
+        if (!container) return;
+        container.querySelectorAll('a[href]').forEach(a => {
+            const href = a.getAttribute('href');
+            if (!href || href.startsWith('#') || href.startsWith('javascript:')) return;
+            try {
+                const url = new URL(href, window.location.origin);
+                if (!url.searchParams.has('page') || a.closest('td.px-6')) return;
+                a.addEventListener('click', (e) => {
+                    if (a.title) return; // 排除 action 按鈕
+                    e.preventDefault();
+                    const page = url.searchParams.get('page') || 1;
+                    const perPage = url.searchParams.get('per_page') || '';
+                    let extra = `&page=${page}`;
+                    if (perPage) extra += `&per_page=${perPage}`;
+                    this.searchInTab(tabName, extra);
+                });
+            } catch(err) {}
+        });
+        // 攔截分頁 <select> (快速跳頁 & 每頁筆數)
+        container.querySelectorAll('select[onchange]').forEach(sel => {
+            const origOnchange = sel.getAttribute('onchange');
+            sel.removeAttribute('onchange');
+            sel.addEventListener('change', () => {
+                const val = sel.value;
+                try {
+                    if (val.startsWith('http') || val.startsWith('/')) {
+                        const url = new URL(val, window.location.origin);
+                        const page = url.searchParams.get('page') || 1;
+                        const perPage = url.searchParams.get('per_page') || '';
+                        let extra = `&page=${page}`;
+                        if (perPage) extra += `&per_page=${perPage}`;
+                        this.searchInTab(tabName, extra);
+                    } else if (origOnchange && origOnchange.includes('per_page')) {
+                        this.searchInTab(tabName, `&per_page=${val}`);
+                    }
+                } catch(err) {
+                    if (origOnchange) new Function(origOnchange).call(sel);
+                }
+            });
+        });
+    },
+    init() {
+        // 觸發頂部進度條
+        this.$watch('tabLoading', (val) => {
+            const bar = document.getElementById('top-loading-bar');
+            if (bar) {
+                if (val) bar.classList.add('loading');
+                else bar.classList.remove('loading');
+            }
+        });
+        // 首次載入時綁定每個 Tab 的分頁連結
+        this.$nextTick(() => {
+            ['machines', 'models', 'permissions'].forEach(t => {
+                const ref = this.$refs[t + 'Content'];
+                if (ref) this.bindPaginationLinks(ref, t);
+            });
+        });
+        // Tab 切換時同步 URL
+        this.$watch('tab', (newTab) => {
+            history.pushState({}, '', `{{ route('admin.basic-settings.machines.index') }}?tab=${newTab}`);
+        });
+        // 瀏覽器上一頁/下一頁
+        window.addEventListener('popstate', () => {
+            const url = new URL(window.location.href);
+            this.tab = url.searchParams.get('tab') || 'machines';
+        });
     }
 }" @execute-regenerate.window="executeRegeneration($event.detail)">
     <!-- 1. Header Area -->
@@ -197,417 +311,86 @@
             <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Management of operational parameters and models') }}</p>
         </div>
         <div class="flex items-center gap-3">
-            @if($tab === 'machines')
+            <button x-show="tab === 'machines'" x-cloak @click="showCreateMachineModal = true" class="btn-luxury-primary flex items-center gap-2">
-            <button @click="showCreateMachineModal = true" 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>{{ __('Add Machine') }}</span>
             </button>
-            @elseif($tab === 'models')
+            <button x-show="tab === 'models'" x-cloak @click="showCreateModelModal = true" class="btn-luxury-primary flex items-center gap-2">
-            <button @click="showCreateModelModal = true" 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>{{ __('Add Machine Model') }}</span>
             </button>
-            @endif
         </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">
-        <a href="{{ route('admin.basic-settings.machines.index', ['tab' => 'machines']) }}"
+        <button @click="tab = 'machines'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all {{ $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="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') }}
-        </a>
+        </button>
-        <a href="{{ route('admin.basic-settings.machines.index', ['tab' => 'models']) }}"
+        <button @click="tab = 'models'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all {{ $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="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') }}
-        </a>
+        </button>
-        <a href="{{ route('admin.basic-settings.machines.index', ['tab' => 'permissions']) }}"
+        <button @click="tab = 'permissions'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all {{ $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="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') }}
-        </a>
+        </button>
     </div>
 
     <!-- 2. Main Content Card -->
-    <div class="luxury-card rounded-3xl p-8 animate-luxury-in mt-6">
+    <div class="luxury-card rounded-3xl p-8 animate-luxury-in mt-6 relative overflow-hidden">
-        <!-- Toolbar & Filters -->
+        <!-- Spinner Overlay -->
-        <div class="flex items-center justify-between mb-8">
+        <div x-show="tabLoading" 
-            <div class="flex items-center gap-4">
+            x-transition:enter="transition ease-out duration-300"
-                <form method="GET" action="{{ route('admin.basic-settings.machines.index') }}" class="relative group">
+            x-transition:enter-start="opacity-0"
-                    <input type="hidden" name="tab" value="{{ $tab }}">
+            x-transition:enter-end="opacity-100"
-                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+            x-transition:leave="transition ease-in duration-200"
-                        <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
+            x-transition:leave-start="opacity-100"
-                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+            x-transition:leave-end="opacity-0"
-                            stroke-linejoin="round">
+            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>
-                            <circle cx="11" cy="11" r="8"></circle>
+            <div class="relative w-16 h-16 mb-4 flex items-center justify-center">
-                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                <div class="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-500 border-r-cyan-500/30 animate-spin"></div>
-                        </svg>
+                <div class="absolute inset-2 rounded-full border border-cyan-500/10 animate-spin" style="animation-duration: 3s; direction: reverse;"></div>
-                    </span>
+                <div class="relative w-8 h-8 flex items-center justify-center">
-                    <input type="text" name="search" value="{{ request('search') }}"
+                    <svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        placeholder="{{ $tab === 'machines' ? __('Search machines...') : ($tab === 'models' ? __('Search models...') : __('Search accounts...')) }}"
+                        <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" />
-                        class="luxury-input py-2.5 pl-12 pr-6 block w-64">
+                    </svg>
-                </form>
-
-                @if($tab === 'permissions' && auth()->user()->isSystemAdmin())
-                <div class="w-72">
-                    <form method="GET" action="{{ route('admin.basic-settings.machines.index') }}">
-                        <input type="hidden" name="tab" value="permissions">
-                        <input type="hidden" name="search" value="{{ request('search') }}">
-                        <x-searchable-select name="company_id" :options="$companies" :selected="request('company_id')"
-                            :placeholder="__('All Companies')" onchange="this.form.submit()" />
-                    </form>
                 </div>
-                @endif
             </div>
+            <p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">{{ __('Loading Data') }}...</p>
         </div>
 
-        @if($tab === 'machines')
+        <div :class="tabLoading ? 'opacity-30 pointer-events-none transition-opacity duration-300' : 'transition-opacity duration-300'">
-        <!-- Machine Table -->
+            <!-- Machines Tab -->
-        <div class="overflow-x-auto">
+            <div x-show="tab === 'machines'" x-cloak>
-            <table class="w-full text-left border-separate border-spacing-y-0">
+                <div x-ref="machinesContent">
-                <thead>
+                    @include('admin.basic-settings.machines.partials.tab-machines')
-                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
+                </div>
-                        <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">
-                            {{ __('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">
-                            {{ __('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">
-                            {{ __('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">
-                            {{ __('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">
-                            {{ __('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">
-                        <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">
-                                    @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>
-                                    @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">
-                                        {{ $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>
-                                </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">
-                                {{ $machine->machineModel->name ?? '--' }}
-                            </span>
-                        </td>
-                        <td class="px-6 py-6">
-                            @php
-                            $isOnline = $machine->last_heartbeat_at && $machine->last_heartbeat_at->diffInSeconds() < 30;
-                                @endphp <div class="flex items-center gap-2.5">
-                                <div class="relative flex h-2.5 w-2.5">
-                                    @if($isOnline)
-                                    <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>
-                                    @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 {{ $isOnline ? 'text-emerald-500' : 'text-slate-500 dark:text-slate-400' }}">
-                                    {{ $isOnline ? __('Online') : __('Offline') }}
-                                </span>
-        </div>
-        </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>
             </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">
-                {{ $machine->company->name ?? __('System') }}
-            </span>
-        </td>
-        <td class="px-6 py-6 text-right flex items-center justify-end gap-2">
-            <button @click="openMaintenanceQr(@js($machine->only(['name', 'serial_no'])))"
-                class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 dark:hover:bg-emerald-500/10 border border-transparent hover:border-emerald-500/20 transition-all inline-flex group/btn"
-                title="{{ __('Maintenance QR Code') }}">
-                <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" />
-                </svg>
-            </button>
-            <button @click="openPhotoModal(@js($machine->only(['id', 'name', 'image_urls'])))"
-                class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-transparent hover:border-cyan-500/20 transition-all inline-flex group/btn"
-                title="{{ __('Machine Images') }}">
-                <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" />
-                </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"
-                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" />
-                </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"
-                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>
-        </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>
-        @endforelse
-        </tbody>
-        </table>
-    </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>
 
-    @elseif($tab === 'permissions')
+            <!-- Models Tab -->
-    <!-- Permissions Table -->
+            <div x-show="tab === 'models'" x-cloak>
-    <div class="overflow-x-auto">
+                <div x-ref="modelsContent">
-        <table class="w-full text-left border-separate border-spacing-y-0">
+                    @include('admin.basic-settings.machines.partials.tab-models')
-            <thead>
+                </div>
-                <tr class="bg-slate-50/50 dark:bg-slate-900/10">
+            </div>
-                    <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">
-                        {{ __('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">
-                        {{ __('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">
-                        {{ __('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">
-                    <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">
-                                <svg class="size-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" />
-                                </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>
-                            </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">
-                            {{ $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">
-                            @forelse($user->machines as $m)
-                            <div
-                                class="flex flex-col 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-[11px] font-black text-slate-700 dark:text-slate-200 leading-tight">{{
-                                    $m->name }}</span>
-                                <span class="text-[9px] font-mono font-bold text-cyan-500 tracking-tighter mt-0.5 opacity-80">{{
-                                    $m->serial_no }}</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>
-                            @endforelse
-                        </div>
-                    </td>
-                    <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">
-                            <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" />
-                            </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="size-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>
-                @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">
-        @if($users_list)
-            {{ $users_list->appends(['tab' => 'permissions'])->links('vendor.pagination.luxury') }}
-        @endif
-    </div>
 
-    @else
+            <!-- Permissions Tab -->
-    <!-- Model Table -->
+            <div x-show="tab === 'permissions'" x-cloak>
-    <div class="overflow-x-auto">
+                <div x-ref="permissionsContent">
-        <table class="w-full text-left border-separate border-spacing-y-0">
+                    @include('admin.basic-settings.machines.partials.tab-permissions')
-            <thead>
+                </div>
-                <tr class="bg-slate-50/50 dark:bg-slate-900/10">
+            </div>
-                    <th
+        </div>
-                        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">
-                        {{ __('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">
-                        {{ __('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">
-                        {{ __('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">
-                    <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" />
-                                </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">
-                                {{ $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">
-                            {{ $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">
-                            {{ $model->updated_at->format('Y/m/d H:i') }}
-                        </div>
-                    </td>
-                    <td class="px-6 py-6 text-right space-x-2">
-                        <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"
-                                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" />
-                                </svg>
-                            </button>
-
-                            <form :id="'delete-model-form-' + {{ $model->id }}"
-                                action="{{ route('admin.basic-settings.machine-models.destroy', $model) }}"
-                                method="POST" class="inline">
-                                @csrf
-                                @method('DELETE')
-                                <button type="button"
-                                    @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>
-                                </button>
-                            </form>
-                        </div>
-                    </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>
-                @endforelse
-            </tbody>
-        </table>
     </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>
-    @endif
-</div>
 
 <!-- Modals & Drawers -->
 

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

@@ -0,0 +1,166 @@
+{{-- 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">
+            <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
+                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                    stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+            </span>
+            <input type="text" x-model="machineSearch"
+                placeholder="{{ __('Search machines...') }}"
+                class="luxury-input py-2.5 pl-12 pr-6 block w-64">
+        </form>
+    </div>
+</div>
+
+{{-- Machine Table --}}
+<div class="overflow-x-auto">
+    <table class="w-full text-left border-separate border-spacing-y-0">
+        <thead>
+            <tr class="bg-slate-50/50 dark:bg-slate-900/10">
+                <th
+                    class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
+                    {{ __('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">
+                    {{ __('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">
+                    {{ __('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">
+                    {{ __('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">
+                    {{ __('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">
+                    {{ __('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">
+                <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">
+                            @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>
+                            @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">
+                                {{ $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>
+                        </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">
+                        {{ $machine->machineModel->name ?? '--' }}
+                    </span>
+                </td>
+                <td class="px-6 py-6">
+                    @php
+                    $isOnline = $machine->last_heartbeat_at && $machine->last_heartbeat_at->diffInSeconds() < 30;
+                        @endphp <div class="flex items-center gap-2.5">
+                        <div class="relative flex h-2.5 w-2.5">
+                            @if($isOnline)
+                            <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>
+                            @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 {{ $isOnline ? 'text-emerald-500' : 'text-slate-500 dark:text-slate-400' }}">
+                            {{ $isOnline ? __('Online') : __('Offline') }}
+                        </span>
+    </div>
+    </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>
+        </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">
+            {{ $machine->company->name ?? __('System') }}
+        </span>
+    </td>
+    <td class="px-6 py-6 text-right flex items-center justify-end gap-2">
+        <button @click="openMaintenanceQr(@js($machine->only(['name', 'serial_no'])))"
+            class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 dark:hover:bg-emerald-500/10 border border-transparent hover:border-emerald-500/20 transition-all inline-flex group/btn"
+            title="{{ __('Maintenance QR Code') }}">
+            <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" />
+            </svg>
+        </button>
+        <button @click="openPhotoModal(@js($machine->only(['id', 'name', 'image_urls'])))"
+            class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-transparent hover:border-cyan-500/20 transition-all inline-flex group/btn"
+            title="{{ __('Machine Images') }}">
+            <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" />
+            </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"
+            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" />
+            </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"
+            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>
+    </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>
+    @endforelse
+    </tbody>
+    </table>
+</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

@@ -0,0 +1,115 @@
+{{-- 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">
+            <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
+                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                    stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+            </span>
+            <input type="text" x-model="modelSearch"
+                placeholder="{{ __('Search models...') }}"
+                class="luxury-input py-2.5 pl-12 pr-6 block w-64">
+        </form>
+    </div>
+</div>
+
+{{-- Model Table --}}
+<div class="overflow-x-auto">
+    <table class="w-full text-left border-separate border-spacing-y-0">
+        <thead>
+            <tr class="bg-slate-50/50 dark:bg-slate-900/10">
+                <th
+                    class="px-6 py-4 text-[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">
+                    {{ __('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">
+                    {{ __('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">
+                    {{ __('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">
+                <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" />
+                            </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">
+                            {{ $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">
+                        {{ $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">
+                        {{ $model->updated_at->format('Y/m/d H:i') }}
+                    </div>
+                </td>
+                <td class="px-6 py-6 text-right space-x-2">
+                    <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"
+                            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" />
+                            </svg>
+                        </button>
+
+                        <form :id="'delete-model-form-' + {{ $model->id }}"
+                            action="{{ route('admin.basic-settings.machine-models.destroy', $model) }}"
+                            method="POST" class="inline">
+                            @csrf
+                            @method('DELETE')
+                            <button type="button"
+                                @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>
+                            </button>
+                        </form>
+                    </div>
+                </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>
+            @endforelse
+        </tbody>
+    </table>
+</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

@@ -0,0 +1,130 @@
+{{-- 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">
+            <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
+                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                    stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+            </span>
+            <input type="text" x-model="permissionSearch"
+                placeholder="{{ __('Search accounts...') }}"
+                class="luxury-input py-2.5 pl-12 pr-6 block w-64">
+        </form>
+
+        @if(auth()->user()->isSystemAdmin())
+        <div class="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>
+</div>
+
+{{-- Permissions Table --}}
+<div class="overflow-x-auto">
+    <table class="w-full text-left border-separate border-spacing-y-0">
+        <thead>
+            <tr class="bg-slate-50/50 dark:bg-slate-900/10">
+                <th
+                    class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
+                    {{ __('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">
+                    {{ __('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">
+                    {{ __('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">
+                    {{ __('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">
+                <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">
+                            <svg class="size-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" />
+                            </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>
+                        </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">
+                        {{ $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">
+                        @forelse($user->machines as $m)
+                        <div
+                            class="flex flex-col 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-[11px] font-black text-slate-700 dark:text-slate-200 leading-tight">{{
+                                $m->name }}</span>
+                            <span class="text-[9px] font-mono font-bold text-cyan-500 tracking-tighter mt-0.5 opacity-80">{{
+                                $m->serial_no }}</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>
+                        @endforelse
+                    </div>
+                </td>
+                <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">
+                        <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" />
+                        </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="size-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>
+            @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">
+    @if($users_list)
+        {{ $users_list->appends(['tab' => 'permissions'])->links('vendor.pagination.luxury') }}
+    @endif
+</div>

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

@@ -2,8 +2,11 @@
 
 @section('content')
 <div class="space-y-6" x-data="{ 
+
     showModal: false, 
+    showHistoryModal: false, 
     editing: false, 
+    sidebarView: 'detail', 
     currentCompany: {
         id: '',
         name: '',
@@ -16,6 +19,10 @@
         contact_email: '',
         start_date: '',
         end_date: '',
+        warranty_start_date: '',
+        warranty_end_date: '',
+        software_start_date: '',
+        software_end_date: '',
         status: 1,
         note: '',
         settings: {
@@ -28,7 +35,10 @@
         this.currentCompany = { 
             id: '', name: '', code: '', original_type: 'lease', current_type: 'lease',
             tax_id: '', contact_name: '', contact_phone: '', 
-            contact_email: '', start_date: '', end_date: '', status: 1, note: '',
+            contact_email: '', start_date: '', end_date: '', 
+            warranty_start_date: '', warranty_end_date: '',
+            software_start_date: '', software_end_date: '',
+            status: 1, note: '',
             settings: { enable_material_code: false, enable_points: false }
         };
         this.showModal = true;
@@ -39,6 +49,10 @@
             ...company,
             start_date: company.start_date ? company.start_date.substring(0, 10) : '',
             end_date: company.end_date ? company.end_date.substring(0, 10) : '',
+            warranty_start_date: company.warranty_start_date ? company.warranty_start_date.substring(0, 10) : '',
+            warranty_end_date: company.warranty_end_date ? company.warranty_end_date.substring(0, 10) : '',
+            software_start_date: company.software_start_date ? company.software_start_date.substring(0, 10) : '',
+            software_end_date: company.software_end_date ? company.software_end_date.substring(0, 10) : '',
             settings: {
                 enable_material_code: company.settings?.enable_material_code || false,
                 enable_points: company.settings?.enable_points || false
@@ -57,9 +71,13 @@
     detailCompany: {
         id: '', name: '', code: '', original_type: 'lease', current_type: 'lease',
         tax_id: '', contact_name: '', contact_phone: '', contact_email: '', 
-        start_date: '', end_date: '', status: 1, note: '',
+        start_date: '', end_date: '', 
+        warranty_start_date: '', warranty_end_date: '',
+        software_start_date: '', software_end_date: '',
+        status: 1, note: '',
         settings: { enable_material_code: false, enable_points: false },
-        users_count: 0, machines_count: 0
+        users_count: 0, machines_count: 0,
+        contracts: []
     },
     openDetailSidebar(company) {
         this.detailCompany = { 
@@ -69,15 +87,40 @@
                 enable_points: company.settings?.enable_points || false
             }
         };
+        this.sidebarView = 'detail';
         this.showDetail = true;
     },
+    openHistorySidebar(company) {
+        this.detailCompany = { 
+            ...company,
+            settings: {
+                enable_material_code: company.settings?.enable_material_code || false,
+                enable_points: company.settings?.enable_points || false
+            }
+        };
+        this.sidebarView = 'history';
+        this.showDetail = true;
+    },
+    openFullHistory() {
+        this.showHistoryModal = true;
+    },
+    openHistory(company) {
+        this.detailCompany = { 
+            ...company,
+            settings: {
+                enable_material_code: company.settings?.enable_material_code || false,
+                enable_points: company.settings?.enable_points || false
+            }
+        };
+        this.showHistoryModal = true;
+    },
     submitConfirmedForm() {
         if (this.statusToggleSource === 'list') {
             this.$refs.statusToggleForm.submit();
         } else {
             this.$refs.companyForm.submit();
         }
-    }
+    },
 }">
     <!-- Header -->
     <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
@@ -164,7 +207,7 @@
                             {{ __('Accounts / Machines') }}</th>
                         <th
                             class="px-6 py-4 text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">
-                            {{ __('Contract Period') }}</th>
+                            {{ __('Service Terms') }}</th>
                         <th
                             class="px-6 py-4 text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-right">
                             {{ __('Actions') }}</th>
@@ -235,20 +278,53 @@
                                 </div>
                             </div>
                         </td>
-                        <td class="px-6 py-6 text-center text-slate-500 dark:text-slate-400">
+                        <td class="px-6 py-6 border-b border-slate-50 dark:border-slate-800/50">
-                            <div class="flex flex-col items-center gap-1.5 font-mono">
+                            <div class="flex flex-col gap-2.5 min-w-[200px] mx-auto w-fit">
-                                <div class="flex items-center gap-2 min-w-[130px] justify-center">
+                                <!-- Contract Period (Only for Lease) -->
-                                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">{{ __('From:') }}</span>
+                                @if($company->current_type === 'lease')
-                                    <span class="text-[13px] font-bold tracking-tighter text-slate-600 dark:text-slate-300">
+                                <div class="flex items-center gap-3 group/term">
-                                        {{ $company->start_date ? $company->start_date->format('Y-m-d') : '--' }}
+                                    <span class="px-2 py-0.5 rounded-md bg-blue-500/10 text-blue-600 text-[10px] font-black border border-blue-500/20 group-hover/term:bg-blue-500 group-hover/term:text-white transition-all tracking-wider whitespace-nowrap min-w-[42px] text-center">
+                                        {{ __('Contract') }}
                                     </span>
+                                    <div class="flex items-center gap-1.5 font-mono text-[11px] font-bold">
+                                        <span class="text-slate-400">{{ $company->start_date ? $company->start_date->format('Y-m-d') : '--' }}</span>
+                                        <span class="text-slate-300">~</span>
+                                        <span class="{{ $company->end_date && $company->end_date->isPast() ? 'text-rose-500 shadow-sm shadow-rose-500/10' : 'text-slate-600 dark:text-slate-300' }}">
+                                            {{ $company->end_date ? $company->end_date->format('Y-m-d') : __('Permanent') }}
+                                        </span>
+                                    </div>
                                 </div>
-                                <div class="flex items-center gap-2 min-w-[130px] justify-center">
+                                @endif
-                                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">{{ __('To:') }}</span>
+
-                                    <span class="text-[13px] font-bold tracking-tighter {{ $company->end_date && $company->end_date->isPast() ? 'text-rose-500' : 'text-slate-800 dark:text-slate-200' }}">
+                                @if($company->current_type === 'buyout')
-                                        {{ $company->end_date ? $company->end_date->format('Y-m-d') : __('Permanent') }}
+                                <!-- Warranty Period -->
+                                <div class="flex items-center gap-3 group/term">
+                                    <span class="px-2 py-0.5 rounded-md bg-amber-500/10 text-amber-600 text-[10px] font-black border border-amber-500/20 group-hover/term:bg-amber-500 group-hover/term:text-white transition-all tracking-wider whitespace-nowrap min-w-[42px] text-center">
+                                        {{ __('Warranty') }}
                                     </span>
+                                    <div class="flex items-center gap-1.5 font-mono text-[11px] font-bold">
+                                        <span class="text-slate-400">{{ $company->warranty_start_date ? $company->warranty_start_date->format('Y-m-d') : '--' }}</span>
+                                        <span class="text-slate-300">~</span>
+                                        <span class="{{ $company->warranty_end_date && $company->warranty_end_date->isPast() ? 'text-rose-500 shadow-sm shadow-rose-500/10' : 'text-slate-500 dark:text-slate-400' }}">
+                                            {{ $company->warranty_end_date ? $company->warranty_end_date->format('Y-m-d') : '--' }}
+                                        </span>
+                                    </div>
                                 </div>
+
+                                <!-- Software Period -->
+                                <div class="flex items-center gap-3 group/term">
+                                    <span class="px-2 py-0.5 rounded-md bg-purple-500/10 text-purple-600 text-[10px] font-black border border-purple-500/20 group-hover/term:bg-purple-500 group-hover/term:text-white transition-all tracking-wider whitespace-nowrap min-w-[42px] text-center">
+                                        {{ __('Software') }}
+                                    </span>
+                                    <div class="flex items-center gap-1.5 font-mono text-[11px] font-bold">
+                                        <span class="text-slate-400">{{ $company->software_start_date ? $company->software_start_date->format('Y-m-d') : '--' }}</span>
+                                        <span class="text-slate-300">~</span>
+                                        <span class="{{ $company->software_end_date && $company->software_end_date->isPast() ? 'text-rose-500 shadow-sm shadow-rose-500/10' : 'text-slate-500 dark:text-slate-400' }}">
+                                            {{ $company->software_end_date ? $company->software_end_date->format('Y-m-d') : '--' }}
+                                        </span>
+                                    </div>
+                                </div>
+                                @endif
                             </div>
                         </td>
                         <td class="px-6 py-6 text-right">
@@ -447,11 +523,11 @@
                                 <input type="text" name="tax_id" x-model="currentCompany.tax_id"
                                     class="luxury-input w-full">
                             </div>
-                            <div class="grid grid-cols-2 gap-3">
+                            <div class="grid grid-cols-2 gap-3" x-show="currentCompany.current_type === 'lease'">
                                 <div class="space-y-2">
                                     <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
                                         __('Start Date') }} <span class="text-rose-500 ml-0.5">*</span></label>
-                                    <input type="date" name="start_date" x-model="currentCompany.start_date" required
+                                    <input type="date" name="start_date" x-model="currentCompany.start_date" :required="currentCompany.current_type === 'lease'"
                                         class="luxury-input w-full px-2">
                                 </div>
                                 <div class="space-y-2">
@@ -462,6 +538,38 @@
                                 </div>
                             </div>
                         </div>
+
+                        <!-- Buyout Specific Dates -->
+                        <div x-show="currentCompany.current_type === 'buyout'" x-transition class="space-y-4 pt-2">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div class="grid grid-cols-2 gap-3">
+                                    <div class="space-y-2">
+                                        <label class="text-[10px] font-black text-amber-600 uppercase tracking-widest pl-1">{{ __('Warranty Start') }}</label>
+                                        <input type="date" name="warranty_start_date" x-model="currentCompany.warranty_start_date"
+                                            class="luxury-input w-full px-2 border-amber-100 dark:border-amber-900/30">
+                                    </div>
+                                    <div class="space-y-2">
+                                        <label class="text-[10px] font-black text-amber-600 uppercase tracking-widest pl-1">{{ __('Warranty End') }}</label>
+                                        <input type="date" name="warranty_end_date" x-model="currentCompany.warranty_end_date"
+                                            class="luxury-input w-full px-2 border-amber-100 dark:border-amber-900/30">
+                                    </div>
+                                </div>
+                                <div class="grid grid-cols-2 gap-3">
+                                    <div class="space-y-2">
+                                        <label class="text-[10px] font-black text-indigo-600 uppercase tracking-widest pl-1">{{ __('Software Start') }}</label>
+                                        <input type="date" name="software_start_date" x-model="currentCompany.software_start_date"
+                                            class="luxury-input w-full px-2 border-indigo-100 dark:border-indigo-900/30">
+                                    </div>
+                                    <div class="space-y-2">
+                                        <label class="text-[10px] font-black text-indigo-600 uppercase tracking-widest pl-1">{{ __('Software End') }}</label>
+                                        <input type="date" name="software_end_date" x-model="currentCompany.software_end_date"
+                                            class="luxury-input w-full px-2 border-indigo-100 dark:border-indigo-900/30">
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Keep hidden start_date for buyout as well if needed by backend -->
+                            <input type="hidden" name="start_date" :value="currentCompany.start_date" x-if="currentCompany.current_type === 'buyout' && !currentCompany.start_date">
+                        </div>
                     </div>
 
                     <!-- Admin Account Section (Account Creation) - Only show when creating -->
@@ -652,7 +760,7 @@
                         <!-- Header -->
                         <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">
                             <div>
-                                <h2 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Customer Details') }}</h2>
+                                <h2 class="text-xl font-black text-slate-800 dark:text-white tracking-tight" x-text="sidebarView === 'history' ? '{{ __('Contract History Detail') }}' : '{{ __('Customer Details') }}'"></h2>
                                 <div class="flex items-center gap-2 mt-1">
                                     <p class="text-xs font-bold text-slate-400 uppercase tracking-[0.2em]" x-text="detailCompany.name"></p>
                                     <span class="text-xs font-mono font-black text-cyan-500 px-1.5 py-0.5 bg-cyan-500/10 rounded" x-text="detailCompany.code"></span>
@@ -666,7 +774,19 @@
                         </div>
 
                         <!-- Body -->
-                        <div class="flex-1 overflow-y-auto px-8 py-8 space-y-8 custom-scrollbar">
+                        <div class="flex-1 overflow-y-auto px-8 pt-4 pb-8 space-y-5 custom-scrollbar">
+                          <!-- Tab Switcher -->
+                          <div class="flex gap-1 p-1 bg-slate-100 dark:bg-slate-800/60 rounded-xl">
+                              <button @click="sidebarView = 'detail'" 
+                                  :class="sidebarView === 'detail' ? 'bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'"
+                                  class="flex-1 py-2.5 px-3 text-xs font-black uppercase tracking-[0.15em] rounded-lg transition-all">{{ __('Customer Details') }}</button>
+                              <button @click="sidebarView = 'history'" 
+                                  :class="sidebarView === 'history' ? 'bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'"
+                                  class="flex-1 py-2.5 px-3 text-xs font-black uppercase tracking-[0.15em] rounded-lg transition-all">{{ __('Contract History Detail') }}</button>
+                          </div>
+
+                          <!-- Detail View -->
+                          <div x-show="sidebarView === 'detail'" class="space-y-8">
                             <!-- Validity & Status Section -->
                             <section class="space-y-4">
                                 <h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{ __('Account Status') }}</h3>
@@ -690,38 +810,56 @@
                                     </div>
                                     
                                     <!-- Business Type -->
-                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 space-y-4">
-                                        <h4 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] mb-4">{{ __('Business Type') }}</h4>
+                                        <div class="flex justify-between items-start pb-3 border-b border-slate-100/50 dark:border-slate-800/50">
-                                        <div class="space-y-4">
+                                            <div>
-                                            <div class="flex items-center justify-between">
+                                                <h4 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em]">{{ __('Contract Model') }}</h4>
-                                                <span class="text-[11px] font-bold text-slate-400">{{ __('Original:') }}</span>
-                                                <span class="px-2.5 py-1 rounded-lg text-[11px] font-bold uppercase tracking-widest"
-                                                    :class="detailCompany.original_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600'"
-                                                    x-text="detailCompany.original_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
-                                            </div>
-                                            <div class="flex items-center justify-between">
-                                                <span class="text-[11px] font-bold text-slate-400">{{ __('Current:') }}</span>
-                                                <span class="px-2.5 py-1 rounded-lg text-[11px] font-bold uppercase tracking-widest"
-                                                    :class="detailCompany.current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600 border border-amber-500/20' : 'bg-blue-500/10 text-blue-600 border border-blue-500/20'"
-                                                    x-text="detailCompany.current_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
                                             </div>
+                                            <span :class="detailCompany.current_type === 'lease' ? 'text-blue-500 bg-blue-500/10' : 'text-amber-500 bg-amber-500/10'" 
+                                                class="text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-lg">
+                                                <span x-text="detailCompany.current_type === 'lease' ? '{{ __('Lease') }}' : '{{ __('Buyout') }}'"></span>
+                                            </span>
                                         </div>
+                                        
+                                        <!-- Lease Info Display -->
+                                        <template x-if="detailCompany.current_type === 'lease'">
+                                            <div class="grid grid-cols-2 gap-4">
+                                                <div class="space-y-1">
+                                                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">{{ __('Start Date') }}</p>
+                                                    <p class="text-xs font-black text-slate-700 dark:text-slate-200" x-text="detailCompany.start_date?.substring(0, 10) || '-'"></p>
+                                                </div>
+                                                <div class="space-y-1">
+                                                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">{{ __('End Date') }}</p>
+                                                    <p class="text-xs font-black text-slate-800 dark:text-white" x-text="detailCompany.end_date?.substring(0, 10) || '{{ __('Unlimited') }}'"></p>
+                                                </div>
+                                            </div>
+                                        </template>
+
+                                        <!-- Buyout Info Display -->
+                                        <template x-if="detailCompany.current_type === 'buyout'">
+                                            <div class="space-y-4">
+                                                <div class="grid grid-cols-1 gap-3">
+                                                    <div class="p-3 bg-amber-50/30 dark:bg-amber-500/5 rounded-xl border border-amber-100/50 dark:border-amber-500/10">
+                                                        <p class="text-[9px] font-black text-amber-600 uppercase tracking-widest">{{ __('Warranty Service') }}</p>
+                                                        <div class="flex items-center gap-2 mt-1">
+                                                            <span class="text-xs font-black text-slate-700 dark:text-slate-200" x-text="detailCompany.warranty_start_date?.substring(0, 10) || '-'"></span>
+                                                            <span class="text-slate-400">~</span>
+                                                            <span class="text-xs font-black text-slate-800 dark:text-white" x-text="detailCompany.warranty_end_date?.substring(0, 10) || '-'"></span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="p-3 bg-indigo-50/30 dark:bg-indigo-500/5 rounded-xl border border-indigo-100/50 dark:border-indigo-500/10">
+                                                        <p class="text-[9px] font-black text-indigo-600 uppercase tracking-widest">{{ __('Software Service') }}</p>
+                                                        <div class="flex items-center gap-2 mt-1">
+                                                            <span class="text-xs font-black text-slate-700 dark:text-slate-200" x-text="detailCompany.software_start_date?.substring(0, 10) || '-'"></span>
+                                                            <span class="text-slate-400">~</span>
+                                                            <span class="text-xs font-black text-slate-800 dark:text-white" x-text="detailCompany.software_end_date?.substring(0, 10) || '-'"></span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </template>
                                     </div>
 
-                                    <!-- Contract Period -->
-                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
-                                        <h4 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] mb-4">{{ __('Contract Period') }}</h4>
-                                        <div class="space-y-3 font-mono">
-                                            <div class="flex items-center gap-3">
-                                                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter min-w-[32px]">{{ __('From:') }}</span>
-                                                <div class="text-[13px] font-bold tracking-tighter text-slate-700 dark:text-slate-200" x-text="detailCompany.start_date || '--'"></div>
-                                            </div>
-                                            <div class="flex items-center gap-3">
-                                                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter min-w-[32px]">{{ __('To:') }}</span>
-                                                <div class="text-[13px] font-bold tracking-tighter text-slate-800 dark:text-white" :class="detailCompany.end_date_expired ? 'text-rose-500' : ''" x-text="detailCompany.end_date || '{{ __('Permanent') }}'"></div>
-                                            </div>
-                                        </div>
-                                    </div>
                                 </div>
                             </section>
 
@@ -803,6 +941,82 @@
                                     <p class="text-sm font-bold text-slate-600 dark:text-slate-400 leading-relaxed italic" x-text="detailCompany.note"></p>
                                 </div>
                             </section>
+                          </div>
+
+                          <!-- History View -->
+                          <div x-show="sidebarView === 'history'" class="space-y-6">
+                            <template x-for="(contract, index) in (detailCompany.contracts || [])" :key="contract.id">
+                                <div class="bg-slate-50/50 dark:bg-slate-800/30 rounded-2xl border border-slate-100 dark:border-slate-800/80 overflow-hidden">
+                                    <!-- Card Header -->
+                                    <div class="px-5 py-3 bg-white dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
+                                        <div class="flex items-center gap-2.5">
+                                            <div class="size-7 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[9px] font-black text-slate-500" x-text="'#' + (detailCompany.contracts.length - index)"></div>
+                                            <div>
+                                                <p class="text-[10px] font-black text-slate-700 dark:text-slate-200" x-text="new Date(contract.created_at).toLocaleString()"></p>
+                                                <div class="flex items-center gap-1.5 mt-0.5">
+                                                    <span :class="contract.type === 'lease' ? 'text-blue-500 bg-blue-500/10' : 'text-amber-500 bg-amber-500/10'" 
+                                                        class="text-[8px] font-black uppercase tracking-wider px-1.5 py-0.5 rounded"
+                                                        x-text="contract.type === 'lease' ? '{{ __('Lease') }}' : '{{ __('Buyout') }}'"></span>
+                                                    <span class="text-[9px] text-slate-400">{{ __('by') }} <span class="text-slate-600 dark:text-slate-300" x-text="contract.creator?.name || 'System'"></span></span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <template x-if="index === 0">
+                                            <span class="px-2 py-0.5 bg-emerald-500 text-white text-[8px] font-black uppercase tracking-widest rounded-full">{{ __('Current') }}</span>
+                                        </template>
+                                    </div>
+
+                                    <!-- Card Body -->
+                                    <div class="p-5 space-y-4">
+                                        <!-- Lease dates -->
+                                        <template x-if="contract.type === 'lease'">
+                                            <div class="grid grid-cols-2 gap-4">
+                                                <div class="space-y-1.5">
+                                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('Contract Start') }}</p>
+                                                    <p class="text-sm font-black text-slate-700 dark:text-white font-mono" x-text="contract.start_date?.substring(0, 10) || '-'"></p>
+                                                </div>
+                                                <div class="space-y-1.5">
+                                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('Contract End') }}</p>
+                                                    <p class="text-sm font-black text-slate-700 dark:text-white font-mono" x-text="contract.end_date?.substring(0, 10) || '{{ __('Unlimited') }}'"></p>
+                                                </div>
+                                            </div>
+                                        </template>
+                                        <!-- Buyout dates -->
+                                        <template x-if="contract.type === 'buyout'">
+                                            <div class="grid grid-cols-1 gap-4">
+                                                <div class="p-4 bg-amber-50/40 dark:bg-amber-500/5 rounded-2xl border border-amber-100/50 dark:border-amber-500/10">
+                                                    <p class="text-[10px] font-black text-amber-600 uppercase tracking-widest mb-2">{{ __('Warranty Service') }}</p>
+                                                    <div class="flex items-center gap-2">
+                                                        <span class="text-sm font-black text-slate-700 dark:text-slate-200 font-mono" x-text="contract.warranty_start_date?.substring(0, 10) || '-'"></span>
+                                                        <span class="text-slate-400 font-bold">~</span>
+                                                        <span class="text-sm font-black text-slate-800 dark:text-white font-mono" x-text="contract.warranty_end_date?.substring(0, 10) || '-'"></span>
+                                                    </div>
+                                                </div>
+                                                <div class="p-4 bg-indigo-50/40 dark:bg-indigo-500/5 rounded-2xl border border-indigo-100/50 dark:border-indigo-500/10">
+                                                    <p class="text-[10px] font-black text-indigo-600 uppercase tracking-widest mb-2">{{ __('Software Service') }}</p>
+                                                    <div class="flex items-center gap-2">
+                                                        <span class="text-sm font-black text-slate-700 dark:text-slate-200 font-mono" x-text="contract.software_start_date?.substring(0, 10) || '-'"></span>
+                                                        <span class="text-slate-400 font-bold">~</span>
+                                                        <span class="text-sm font-black text-slate-800 dark:text-white font-mono" x-text="contract.software_end_date?.substring(0, 10) || '-'"></span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </template>
+                                        <!-- Note -->
+                                        <div class="pt-2 border-t border-slate-100/50 dark:border-slate-800/50" x-show="contract.note">
+                                            <p class="text-[9px] font-bold text-slate-400 italic" x-text="contract.note"></p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+
+                            <div x-show="!(detailCompany.contracts || []).length" class="py-12 text-center">
+                                <div class="size-14 rounded-2xl bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center mx-auto mb-3 border border-slate-100 dark:border-slate-800">
+                                    <svg class="size-7 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18c-2.305 0-4.408.867-6 2.292m0-14.25v14.25" /></svg>
+                                </div>
+                                <p class="text-xs font-black text-slate-400 uppercase tracking-[0.2em]">{{ __('No history records') }}</p>
+                            </div>
+                          </div>
                         </div>
 
                         <!-- Footer -->
@@ -815,7 +1029,7 @@
                 </div>
             </div>
         </div>
-    </template>
+
 </div>
 
 <style>

resources/views/admin/data-config/accounts.blade.php

@@ -95,7 +95,10 @@ $roleSelectConfig = [
                             <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 md:w-80 luxury-input" placeholder="{{ __('Search roles...') }}">
+                    <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 roles...') }}"
+                        @keydown.enter="$el.form.submit()">
                 </div>
 
                 @if(auth()->user()->isSystemAdmin())
@@ -106,6 +109,7 @@ $roleSelectConfig = [
                 </div>
                 @endif
                 <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
+                <button type="submit" class="hidden"></button>
             </form>
 
             <div class="overflow-x-auto">
@@ -211,7 +215,8 @@ $roleSelectConfig = [
                     </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 users...') }}">
+                        placeholder="{{ __('Search users...') }}"
+                        @keydown.enter="$el.form.submit()">
                 </div>
 
                 @if(auth()->user()->isSystemAdmin())
@@ -222,6 +227,7 @@ $roleSelectConfig = [
                 </div>
                 @endif
                 <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
+                <button type="submit" class="hidden"></button>
             </form>
 
             <div class="overflow-x-auto">

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

@@ -24,17 +24,17 @@
             selectedMachine: null,
             slots: [],
             inventorySlots: [],
+            currentPage: 1,
+            lastPage: 1,
 
             init() {
-                const d = new Date();
+                const now = new Date();
-                const today = [
+                const pad = (n) => String(n).padStart(2, '0');
-                    d.getFullYear(),
+                const formatDate = (date, time) => `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())} ${time}`;
-                    String(d.getMonth() + 1).padStart(2, '0'),
+                
-                    String(d.getDate()).padStart(2, '0')
+                this.startDate = formatDate(now, '00:00');
-                ].join('-');
+                this.endDate = formatDate(now, '23:59');
-                this.startDate = today;
+                this.$watch('activeTab', () => this.fetchLogs(1));
-                this.endDate = today;
-                this.$watch('activeTab', () => this.fetchLogs());
             },
 
             async openLogPanel(id, sn, name) {
@@ -54,15 +54,21 @@
             },
 
 
-            async fetchLogs() {
+            async fetchLogs(page = 1) {
                 this.loading = true;
+                this.currentPage = page;
                 try {
-                    let url = '/admin/machines/' + this.currentMachineId + '/logs-ajax?type=' + this.activeTab;
+                    let url = '/admin/machines/' + this.currentMachineId + '/logs-ajax?type=' + this.activeTab + '&page=' + page;
                     if (this.startDate) url += '&start_date=' + this.startDate;
                     if (this.endDate) url += '&end_date=' + this.endDate;
+                    
                     const res = await fetch(url);
                     const data = await res.json();
-                    if (data.success) this.logs = data.data.data || data.data || [];
+                    if (data.success) {
+                        this.logs = data.data || [];
+                        this.currentPage = data.pagination.current_page;
+                        this.lastPage = data.pagination.last_page;
+                    }
                 } catch (e) { console.error('fetchLogs error:', e); }
                 finally { this.loading = false; }
             },
@@ -100,6 +106,13 @@
                 finally { this.inventoryLoading = false; }
             },
 
+            formatDateTime(dateStr) {
+                if (!dateStr) return '--';
+                const d = new Date(dateStr);
+                const pad = (n) => String(n).padStart(2, '0');
+                return `${d.getFullYear()}/${pad(d.getMonth() + 1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+            },
+
             getSlotColorClass(slot) {
                 if (!slot.expiry_date) return 'bg-slate-50/50 dark:bg-slate-800/50 text-slate-400 border-slate-200/60 dark:border-slate-700/50';
                 const todayStr = new Date().toISOString().split('T')[0];
@@ -390,19 +403,35 @@
                                     <label
                                         class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.1em] whitespace-nowrap">{{
                                         __('From') }}</label>
-                                    <input type="date" x-model="startDate" @change="fetchLogs()"
+                                    <input type="text" x-ref="startDatePicker" x-model="startDate" 
-                                        class="luxury-input text-[11px] h-9 sm:h-8 py-0 w-full sm:w-32 bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700">
+                                        x-init="flatpickr($refs.startDatePicker, { 
+                                            enableTime: true, 
+                                            dateFormat: 'Y/m/d H:i', 
+                                            time_24hr: true,
+                                            locale: window.flatpickrLocale,
+                                            defaultDate: startDate,
+                                            onClose: (selectedDates, dateStr) => { startDate = dateStr; fetchLogs(1); }
+                                        })"
+                                        class="luxury-input text-[11px] h-9 sm:h-8 py-0 w-full sm:w-44 bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700">
                                 </div>
                                 <div class="flex flex-col sm:flex-row sm:items-center gap-1.5 sm:gap-2">
                                     <label
                                         class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.1em] whitespace-nowrap">{{
                                         __('To') }}</label>
-                                    <input type="date" x-model="endDate" @change="fetchLogs()"
+                                    <input type="text" x-ref="endDatePicker" x-model="endDate" 
-                                        class="luxury-input text-[11px] h-9 sm:h-8 py-0 w-full sm:w-32 bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700">
+                                        x-init="flatpickr($refs.endDatePicker, { 
+                                            enableTime: true, 
+                                            dateFormat: 'Y/m/d H:i', 
+                                            time_24hr: true,
+                                            locale: window.flatpickrLocale,
+                                            defaultDate: endDate,
+                                            onClose: (selectedDates, dateStr) => { endDate = dateStr; fetchLogs(1); }
+                                        })"
+                                        class="luxury-input text-[11px] h-9 sm:h-8 py-0 w-full sm:w-44 bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700">
                                 </div>
                             </div>
                             <div class="flex justify-start sm:justify-end">
-                                <button @click="startDate = ''; endDate = ''; fetchLogs()"
+                                <button @click="startDate = ''; endDate = ''; fetchLogs(1)"
                                     class="text-[10px] font-bold text-cyan-600 dark:text-cyan-400 uppercase tracking-widest hover:text-cyan-500 transition-colors flex items-center gap-1.5">
                                     <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                         stroke-width="2.5">
@@ -419,7 +448,7 @@
                     <!-- Body / Navigation Tabs -->
                     <div class="flex-1 flex flex-col min-h-0">
                         <div
-                            class="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-10 px-6 sm:px-8 overflow-x-auto hide-scrollbar">
+                            class="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-10 px-6 sm:px-8 overflow-x-auto overflow-y-hidden hide-scrollbar">
                             <nav class="-mb-px flex space-x-6 sm:space-x-8" aria-label="Tabs">
                                 <button @click="activeTab = 'status'"
                                     :class="{'border-cyan-500 text-cyan-600 dark:text-cyan-400': activeTab === 'status', 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 dark:hover:text-slate-300': activeTab !== 'status'}"
@@ -486,7 +515,7 @@
                                                         class="group hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-all">
                                                         <td class="px-6 py-4">
                                                             <div class="text-[12px] font-bold text-slate-600 dark:text-slate-300"
-                                                                x-text="new Date(log.created_at).toLocaleString()">
+                                                                x-text="formatDateTime(log.created_at)">
                                                             </div>
                                                         </td>
                                                         <td class="px-6 py-4 text-center">
@@ -501,7 +530,7 @@
                                                         </td>
                                                         <td class="px-6 py-4">
                                                             <p class="text-[13px] font-medium text-slate-700 dark:text-slate-200 truncate max-w-md"
-                                                                :title="log.message" x-text="log.message"></p>
+                                                                :title="log.translated_message || log.message" x-text="log.translated_message || log.message"></p>
                                                         </td>
                                                     </tr>
                                                 </template>
@@ -517,7 +546,7 @@
                                                 <div class="flex items-center justify-between mb-2">
                                                     <span
                                                         class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest"
-                                                        x-text="new Date(log.created_at).toLocaleString()"></span>
+                                                        x-text="formatDateTime(log.created_at)"></span>
                                                     <span :class="{
                                                         'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border-cyan-500/20': log.level === 'info',
                                                         'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20': log.level === 'warning',
@@ -528,7 +557,7 @@
                                                     </span>
                                                 </div>
                                                 <p class="text-[13px] font-bold text-slate-700 dark:text-slate-200 line-clamp-3 leading-relaxed"
-                                                    x-text="log.message"></p>
+                                                    x-text="log.translated_message || log.message"></p>
                                             </div>
                                         </template>
                                     </div>
@@ -554,6 +583,33 @@
                                             </div>
                                         </div>
                                     </template>
+
+                                    <!-- Pagination Footer -->
+                                    <div x-show="logs.length > 0" class="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/30 border-t border-slate-200 dark:border-slate-800 flex items-center justify-between">
+                                        <div class="flex items-center gap-4">
+                                            <button @click="fetchLogs(currentPage - 1)" 
+                                                :disabled="currentPage <= 1"
+                                                class="p-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed hover:text-cyan-500 hover:border-cyan-500/30 transition-all shadow-sm">
+                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" />
+                                                </svg>
+                                            </button>
+                                            
+                                            <div class="flex items-center gap-1.5">
+                                                <span class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-widest" x-text="currentPage"></span>
+                                                <span class="text-[10px] font-black text-slate-300 dark:text-slate-600 uppercase">/</span>
+                                                <span class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest" x-text="lastPage"></span>
+                                            </div>
+
+                                            <button @click="fetchLogs(currentPage + 1)" 
+                                                :disabled="currentPage >= lastPage"
+                                                class="p-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed hover:text-cyan-500 hover:border-cyan-500/30 transition-all shadow-sm">
+                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
                                 </div>
 
                             </div>

resources/views/admin/permission/roles.blade.php

@@ -61,7 +61,10 @@
                             <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 md:w-80 luxury-input" placeholder="{{ __('Search roles...') }}">
+                    <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 roles...') }}"
+                        @keydown.enter="$el.form.submit()">
                 </div>
 
                 @if(auth()->user()->isSystemAdmin())
@@ -79,6 +82,7 @@
                 </div>
                 @endif
                 <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
+                <button type="submit" class="hidden"></button>
             </form>
         </div>
 

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

@@ -17,7 +17,7 @@ $roleSelectConfig = [
 @section('content')
 <div class="space-y-2 pb-20" 
      x-data="productManager"
-     data-categories="{{ json_encode($categories) }}"
+     data-categories="{{ json_encode($categories->items()) }}"
      data-settings="{{ json_encode($companySettings) }}"
      data-errors="{{ json_encode($errors->any()) }}"
      data-store-url="{{ route($baseRoute . '.store') }}"
@@ -69,223 +69,73 @@ $roleSelectConfig = [
 
     <!-- Tab Contents -->
     <div class="mt-6">
-
-
         <!-- Products Tab -->
-        <div x-show="activeTab === 'products'" class="luxury-card rounded-3xl p-8 animate-luxury-in" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" x-cloak>
+        <div x-show="activeTab === 'products'" 
-        <!-- Filters & Search -->
+             class="luxury-card rounded-3xl p-6 animate-luxury-in relative min-h-[300px]" 
-        <form action="{{ route($routeName) }}" method="GET" class="flex flex-col md:flex-row md:items-center gap-4 mb-10">
+             x-transition:enter="transition ease-out duration-300" 
-            <div class="relative group">
+             x-transition:enter-start="opacity-0 translate-y-4" 
-                <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+             x-transition:enter-end="opacity-100 translate-y-0" 
-                    <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" stroke-linecap="round" stroke-linejoin="round">
+             x-cloak>
-                        <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            
-                    </svg>
+            <!-- Loading Overlay (Products) -->
-                </span>
+            <div x-show="tabLoading === 'products'" x-transition:enter="transition ease-out duration-300"
-                <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 products...') }}">
+                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 rounded-3xl"
+                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" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-14v10l-8-4m16 4l-8 4m0-10l-8 4" />
+                        </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>
 
-            @if(auth()->user()->isSystemAdmin())
+            <div id="tab-products-container" class="relative">
-            <div class="relative min-w-[200px]">
+                @include('admin.products.partials.tab-products')
-                <x-searchable-select name="company_id" :options="$companies" :selected="request('company_id')" :placeholder="__('All Companies')" onchange="this.form.submit()" />
             </div>
-            @endif
-        </form>
-
-        <!-- Table -->
-        <div class="overflow-x-auto">
-            <table class="w-full text-left border-separate border-spacing-y-0">
-                <thead>
-                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
-                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Product 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">{{ __('Barcode') }}</th>
-                        @if(auth()->user()->isSystemAdmin())
-                        <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">{{ __('Company') }}</th>
-                        @endif
-                        <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">{{ __('Sale Price') }}</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">{{ __('Channel Limits (Track/Spring)') }}</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">{{ __('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">{{ __('Actions') }}</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
-                    @forelse($products as $product)
-                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
-                        <td class="px-6 py-6 cursor-pointer group/info" @click="viewProductDetail(@js($product))" title="{{ __('View Details') }}">
-                            <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 border border-slate-200 dark:border-slate-700 group-hover/info:bg-cyan-500 group-hover/info:text-white group-hover/info:border-cyan-500 shadow-sm group-hover/info:shadow-cyan-500/50 transition-all duration-300 overflow-hidden">
-                                    @if($product->image_url)
-                                        <img src="{{ $product->image_url }}" class="w-full h-full object-cover">
-                                    @else
-                                        <svg class="size-5" 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>
-                                    @endif
-                                </div>
-                                <div class="flex flex-col">
-                                    <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover/info:text-cyan-600 dark:group-hover/info:text-cyan-400 transition-colors">{{ $product->localized_name }}</span>
-                                    <div class="flex flex-wrap items-center gap-1.5 mt-1">
-                                        @php
-                                            $catName = $product->category->localized_name ?? __('Uncategorized');
-                                        @endphp
-                                        <span class="text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded transition-colors group-hover/info:text-slate-600 dark:group-hover/info:text-slate-300">{{ $catName }}</span>
-                                        @if(($companySettings['enable_material_code'] ?? false) && isset($product->metadata['material_code']))
-                                            <span class="text-[10px] font-bold text-emerald-500/80 uppercase tracking-widest bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">#{{ $product->metadata['material_code'] }}</span>
-                                        @endif
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                        <td class="px-6 py-6 whitespace-nowrap">
-                            <span class="text-sm font-mono font-black text-slate-700 dark:text-slate-200 tracking-tight">{{ $product->barcode ?: '-' }}</span>
-                        </td>
-                        @if(auth()->user()->isSystemAdmin())
-                        <td class="px-6 py-6 text-center">
-                            <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-slate-200 transition-colors">{{ $product->company->name ?? '-' }}</span>
-                        </td>
-                        @endif
-                        <td class="px-6 py-6 text-center whitespace-nowrap">
-                            <span class="text-sm font-black text-slate-800 dark:text-white">${{ number_format($product->price, 0) }}</span>
-                        </td>
-                        <td class="px-6 py-6 text-center whitespace-nowrap">
-                            <span class="text-sm font-black text-indigo-500 dark:text-indigo-400">{{ $product->track_limit }}</span>
-                            <span class="text-xs font-bold text-slate-400 mx-1">/</span>
-                            <span class="text-sm font-black text-amber-500 dark:text-amber-400">{{ $product->spring_limit }}</span>
-                        </td>
-                        <td class="px-6 py-6 text-center">
-                            @if($product->is_active)
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">{{ __('Active') }}</span>
-                            @else
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
-                            @endif
-                        </td>
-                        <td class="px-6 py-6 text-right">
-                            <div class="flex justify-end items-center gap-2">
-                                @if($product->is_active)
-                                    <button type="button" 
-                                            @click="toggleFormAction = '{{ route($baseRoute . '.status.toggle', $product->id) }}'; isStatusConfirmOpen = true"
-                                            class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 transition-all border border-transparent hover:border-amber-500/20" 
-                                            title="{{ __('Disable') }}">
-                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" /></svg>
-                                    </button>
-                                @else
-                                    <button type="button" 
-                                            @click="toggleFormAction = '{{ route($baseRoute . '.status.toggle', $product->id) }}'; $nextTick(() => $refs.statusToggleForm.submit())"
-                                            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="{{ __('Enable') }}">
-                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" /></svg>
-                                    </button>
-                                @endif
-                                <a href="{{ route($baseRoute . '.edit', $product->id) }}" 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="{{ __('Edit') }}">
-                                    <svg class="size-4" 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 type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 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="{{ __('Delete') }}">
-                                    <svg class="size-4" 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 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
-                                </button>
-                                <button type="button" @click="viewProductDetail(@js($product))" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20" title="{{ __('View Details') }}">
-                                    <svg class="size-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 010-.644C3.67 8.5 7.652 5 12 5c4.418 0 8.401 3.5 10.014 6.722a1.012 1.012 0 010 .644C20.33 15.5 16.348 19 12 19c-4.412 0-8.401-3.5-10.014-6.722z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    @empty
-                    <tr>
-                        <td colspan="5" class="px-6 py-32 text-center text-slate-400 italic">{{ __('No products found matching your criteria.') }}</td>
-                    </tr>
-                    @endforelse
-                </tbody>
-            </table>
         </div>
 
-        <!-- Pagination -->
+        <!-- Category Tab -->
-        <div class="mt-8">
+        <div x-show="activeTab === 'categories'" 
-            {{ $products->links() }}
+             class="luxury-card rounded-3xl p-6 animate-luxury-in relative min-h-[300px]" 
+             x-transition:enter="transition ease-out duration-300" 
+             x-transition:enter-start="opacity-0 translate-y-4" 
+             x-transition:enter-end="opacity-100 translate-y-0" 
+             x-cloak>
+            
+            <!-- Loading Overlay (Categories) -->
+            <div x-show="tabLoading === 'categories'" 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 rounded-3xl"
+                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" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                        </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 id="tab-categories-container" class="relative">
+                @include('admin.products.partials.tab-categories')
+            </div>
         </div>
     </div>
 
-    <!-- Category Tab -->
-    <div x-show="activeTab === 'categories'" class="luxury-card rounded-3xl p-8 animate-luxury-in" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" x-cloak>
-        <div class="overflow-x-auto">
-            <table class="w-full text-left border-separate border-spacing-y-0">
-                <thead>
-                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
-                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Category Name') }}</th>
-                        @if(auth()->user()->isSystemAdmin())
-                            <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">{{ __('Company') }}</th>
-                        @endif
-                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
-                    @forelse($categories as $category)
-                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
-                        <td class="px-6 py-6">
-                            <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 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="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v13.5A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V9.432a2.25 2.25 0 00-.659-1.591l-4.182-4.182A2.25 2.25 0 0014.568 3h-5z" />
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12h-6m6 4h-6m6-8h-6" />
-                                    </svg>
-                                </div>
-                                <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">
-                                    {{ $category->localized_name }}
-                                </span>
-                            </div>
-                        </td>
-                        @if(auth()->user()->isSystemAdmin())
-                        <td class="px-6 py-6 text-center">
-                            <span class="text-xs font-bold text-slate-500 dark:text-slate-400">{{ $category->company->name ?? __('System Default') }}</span>
-                        </td>
-                        @endif
-                        <td class="px-6 py-6 text-right">
-                            <div class="flex justify-end items-center gap-2">
-                                <button type="button" @click="openCategoryModal(@js($category))" 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="{{ __('Edit') }}">
-                                    <svg class="size-4" 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>
-                                </button>
-                                <button type="button" @click="confirmDelete('{{ route('admin.data-config.product-categories.destroy', $category->id) }}')" class="p-2.5 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="{{ __('Delete') }}">
-                                    <svg class="size-4" 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 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    @empty
-                    <tr class="animate-luxury-in">
-                        <td colspan="{{ auth()->user()->isSystemAdmin() ? 3 : 2 }}" class="px-6 py-20 text-center">
-                            <div class="flex flex-col items-center justify-center space-y-4">
-                                <div class="w-16 h-16 rounded-3xl bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center text-slate-300 dark:text-slate-700 shadow-inner">
-                                    <svg class="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /></svg>
-                                </div>
-                                <p class="text-slate-400 font-bold tracking-widest text-sm uppercase">{{ __('No categories found.') }}</p>
-                            </div>
-                        </td>
-                    </tr>
-                    @endforelse
-                </tbody>
-            </table>
-        </div>
-    </div>
-
-
-
-    <!-- Delete Confirm Modal -->
-    <x-delete-confirm-modal 
-        :title="__('Delete Product Confirmation')"
-        :message="__('Are you sure you want to delete this product? All related historical translation data will also be removed.')" 
-    />
-
-    <!-- Status Toggle Modal -->
-    <x-status-confirm-modal 
-        :title="__('Disable Product Confirmation')" 
-        :message="__('Are you sure you want to change the status of this product? Disabled products will not be visible on the machine.')" 
-    />
-
-    <form x-ref="statusToggleForm" :action="toggleFormAction" method="POST" class="hidden">
-        @csrf
-        @method('PATCH')
-    </form>
-
-    <form x-ref="deleteForm" :action="deleteFormAction" method="POST" class="hidden">
-        @csrf
-        @method('DELETE')
-    </form>
-
     <!-- Category Modal -->
     <div x-show="isCategoryModalOpen" class="fixed inset-0 z-[110] 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">
@@ -534,6 +384,21 @@ $roleSelectConfig = [
             </div>
         </div>
 
+        <!-- Modals -->
+        <x-delete-confirm-modal 
+            :title="__('Confirm Deletion')" 
+            :message="__('Are you sure you want to delete this product or category? This action cannot be undone.')" 
+        />
+        <x-status-confirm-modal 
+            :title="__('Confirm Status Change')" 
+            :message="__('Are you sure you want to change the status of this item? This will affect its visibility on vending machines.')" 
+        />
+
+        <form x-ref="statusToggleForm" :action="toggleFormAction" method="POST" class="hidden">
+            @csrf
+            @method('PATCH')
+        </form>
+
         <!-- Image Zoom Modal -->
         <div x-show="isImageZoomed" 
              x-transition:enter="ease-out duration-300"
@@ -570,28 +435,32 @@ $roleSelectConfig = [
             isDetailOpen: false,
             isImageZoomed: false,
             isStatusConfirmOpen: false,
+            isDeleteConfirmOpen: false,
             isCategoryModalOpen: false,
             activeTab: '{{ request("tab", "products") }}',
+            tabLoading: null,
+            loading: false,
             categoryModalMode: 'create',
             categoryFormAction: '',
             deleteFormAction: '',
             toggleFormAction: '',
             selectedProduct: null,
             categories: [],
+            companies: [],
             categoryFormFields: {
                 names: { zh_TW: '', en: '', ja: '' },
                 company_id: ''
             },
 
-            submitConfirmedForm() {
-                this.$refs.statusToggleForm.submit();
-            },
-
             init() {
                 this.categories = JSON.parse(this.$el.dataset.categories || '[]');
                 this.companies = @js($companies);
                 
-                // Watch for category modal opening to sync searchable select
+                // Initial binding
+                this.bindPaginationLinks('#tab-products-container', 'products');
+                this.bindPaginationLinks('#tab-categories-container', 'categories');
+
+                // Watch for category modal updates
                 this.$watch('isCategoryModalOpen', (value) => {
                     if (value && document.getElementById('category_company_select_wrapper')) {
                         this.$nextTick(() => {
@@ -599,6 +468,154 @@ $roleSelectConfig = [
                         });
                     }
                 });
+
+                // Sync top loading bar
+                this.$watch('tabLoading', (val) => {
+                    const bar = document.getElementById('top-loading-bar');
+                    if (bar) {
+                        if (val) bar.classList.add('loading');
+                        else bar.classList.remove('loading');
+                    }
+                });
+
+                // Sync global loading to top bar as well
+                this.$watch('loading', (val) => {
+                    const bar = document.getElementById('top-loading-bar');
+                    if (bar) {
+                        if (val) bar.classList.add('loading');
+                        else if (!this.tabLoading) bar.classList.remove('loading');
+                    }
+                });
+
+                // Sync tab to URL (Clean up parameters from other tabs when switching)
+                this.$watch('activeTab', (val) => {
+                    const url = new URL(window.location.origin + window.location.pathname);
+                    url.searchParams.set('tab', val);
+                    window.history.pushState({}, '', url);
+                });
+            },
+
+            async fetchTabData(tab, url = null) {
+                this.tabLoading = tab;
+                
+                const container = document.getElementById('tab-' + tab + '-container');
+                
+                // If no URL is provided, build one from the current tab's form
+                if (!url) {
+                    const form = container?.querySelector('form');
+                    // Start with a clean set of parameters, only keeping the current tab
+                    let params = new URLSearchParams();
+                    params.set('tab', tab);
+                    params.set('_ajax', '1');
+                    
+                    if (form) {
+                        const formData = new FormData(form);
+                        formData.forEach((value, key) => {
+                            if (value.trim() !== '') {
+                                params.set(key, value);
+                            }
+                        });
+                    }
+                    
+                    url = `${window.location.pathname}?${params.toString()}`;
+                } else {
+                    // Ensure URL has tab and _ajax params
+                    const urlObj = new URL(url, window.location.origin);
+                    urlObj.searchParams.set('tab', tab);
+                    urlObj.searchParams.set('_ajax', '1');
+                    url = urlObj.toString();
+                }
+
+                try {
+                    const response = await fetch(url, {
+                        headers: { 
+                            'X-Requested-With': 'XMLHttpRequest',
+                            'Accept': 'application/json'
+                        }
+                    });
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        if (container) {
+                            container.innerHTML = data.html;
+                            
+                            // Re-init Alpine components in the dynamic content
+                            if (window.Alpine) {
+                                window.Alpine.initTree(container);
+                            }
+                            
+                            // Re-bind pagination events
+                            this.bindPaginationLinks('#tab-' + tab + '-container', tab);
+                        }
+                        
+                        // Update browser URL (without _ajax)
+                        const historyUrl = new URL(url, window.location.origin);
+                        historyUrl.searchParams.delete('_ajax');
+                        window.history.pushState({}, '', historyUrl);
+                    }
+                } catch (error) {
+                    console.error('Fetch error:', error);
+                    if (window.showToast) window.showToast('{{ __("Failed to load data") }}', 'error');
+                } finally {
+                    this.tabLoading = null;
+                }
+            },
+
+            handleFilterSubmit(tab) {
+                // Clear page when searching
+                const url = new URL(window.location.href);
+                const pageKey = tab === 'products' ? 'product_page' : 'category_page';
+                url.searchParams.delete(pageKey);
+                
+                this.fetchTabData(tab);
+            },
+
+            bindPaginationLinks(containerSelector, tab) {
+                this.$nextTick(() => {
+                    const container = document.querySelector(containerSelector);
+                    if (!container) return;
+
+                    // Re-init Preline components (Selects etc.)
+                    if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
+                        window.HSStaticMethods.autoInit();
+                    }
+
+                    // 1. Intercept Standard Links
+                    container.querySelectorAll('nav a, .pagination a').forEach(link => {
+                        // Prevent multiple bindings
+                        if (link.dataset.ajaxBound) return;
+                        link.dataset.ajaxBound = 'true';
+
+                        link.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            this.fetchTabData(tab, link.href);
+                        });
+                    });
+
+                    // 2. Intercept Dropdown Changes (Per Page / Page Jump)
+                    container.querySelectorAll('select[onchange]').forEach(sel => {
+                        const originalOnchange = sel.getAttribute('onchange');
+                        if (originalOnchange) {
+                            sel.removeAttribute('onchange'); // Prevent default behavior
+                            
+                            sel.addEventListener('change', (e) => {
+                                let newUrl;
+                                // Simple page jump: value is usually the URL
+                                if (sel.value.includes('?')) {
+                                    newUrl = sel.value;
+                                } else {
+                                    // Per page limit change: needs to build URL
+                                    const params = new URLSearchParams(window.location.search);
+                                    params.set('per_page', sel.value);
+                                    const pageKey = tab === 'products' ? 'product_page' : 'category_page';
+                                    params.delete(pageKey); // Reset to page 1
+                                    newUrl = window.location.pathname + '?' + params.toString();
+                                }
+                                this.fetchTabData(tab, newUrl);
+                            });
+                        }
+                    });
+                });
             },
 
             updateCategoryCompanySelect() {
@@ -627,7 +644,6 @@ $roleSelectConfig = [
                 
                 selectEl.setAttribute('data-hs-select', JSON.stringify(config));
                 
-                // Default System option
                 const defaultOpt = document.createElement('option');
                 defaultOpt.value = "";
                 defaultOpt.textContent = "{{ __('System Default (Common)') }}";
@@ -635,7 +651,6 @@ $roleSelectConfig = [
                 if (!this.categoryFormFields.company_id) defaultOpt.selected = true;
                 selectEl.appendChild(defaultOpt);
                 
-                // Company options
                 this.companies.forEach(company => {
                     const opt = document.createElement('option');
                     opt.value = company.id;
@@ -658,10 +673,7 @@ $roleSelectConfig = [
                 });
             },
             
-            confirmDelete(action) {
+
-                this.deleteFormAction = action;
-                this.isDeleteConfirmOpen = true;
-            },
 
             viewProductDetail(product) {
                 this.selectedProduct = product;
@@ -690,6 +702,84 @@ $roleSelectConfig = [
                 this.isCategoryModalOpen = true;
             },
 
+            confirmDelete(action) {
+                this.deleteFormAction = action;
+                this.isDeleteConfirmOpen = true;
+            },
+
+            toggleStatus(actionUrl) {
+                this.toggleFormAction = actionUrl;
+                this.isStatusConfirmOpen = true;
+            },
+
+            async submitConfirmedForm() {
+                if (this.isStatusConfirmOpen) {
+                    this.isStatusConfirmOpen = false;
+                    this.loading = true;
+                    try {
+                        const response = await fetch(this.toggleFormAction, {
+                            method: 'POST',
+                            headers: {
+                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+                                'Accept': 'application/json',
+                                'Content-Type': 'application/x-www-form-urlencoded',
+                                'X-Requested-With': 'XMLHttpRequest'
+                            },
+                            body: new URLSearchParams({
+                                '_method': 'PATCH'
+                            })
+                        });
+                        const data = await response.json();
+                        if (data.success) {
+                            await this.fetchTabData(this.activeTab);
+                            if (window.showToast) window.showToast(data.message, 'success');
+                        } else {
+                            if (window.showToast) window.showToast(data.message || 'Error', 'error');
+                        }
+                    } catch (error) {
+                        console.error('Status toggle error:', error);
+                        if (window.showToast) window.showToast('{{ __("Operation failed") }}', 'error');
+                    } finally {
+                        this.loading = false;
+                    }
+                }
+            },
+
+            confirmDelete(actionUrl) {
+                this.deleteFormAction = actionUrl;
+                this.isDeleteConfirmOpen = true;
+            },
+
+            async deleteItem() {
+                this.isDeleteConfirmOpen = false;
+                this.loading = true;
+                try {
+                    const response = await fetch(this.deleteFormAction, {
+                        method: 'POST',
+                        headers: {
+                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+                            'Accept': 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest'
+                        },
+                        body: new URLSearchParams({
+                            '_method': 'DELETE'
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        await this.fetchTabData(this.activeTab);
+                        if (window.showToast) window.showToast(data.message, 'success');
+                    } else {
+                        if (window.showToast) window.showToast(data.message || 'Error', 'error');
+                    }
+                } catch (error) {
+                    console.error('Delete error:', error);
+                    if (window.showToast) window.showToast('{{ __("Operation failed") }}', 'error');
+                } finally {
+                    this.loading = false;
+                }
+            },
+
             getCategoryName(id) {
                 const category = this.categories.find(c => c.id == id);
                 return category ? (category.name || "{{ __('Uncategorized') }}") : "{{ __('Uncategorized') }}";

resources/views/admin/products/partials/tab-categories.blade.php

@@ -0,0 +1,84 @@
+<div class="relative">
+    <form @submit.prevent="handleFilterSubmit('categories')" id="categories-filter-form" class="mb-8 flex flex-wrap items-center gap-4">
+        <!-- Search Input -->
+        <div class="relative group">
+            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 group-focus-within:text-cyan-500 transition-colors">
+                <svg class="size-4" 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>
+            </div>
+            <input type="text" name="category_search" value="{{ request('category_search', request('tab') === 'categories' ? request('category_search') : '') }}" 
+                   class="bg-slate-50 dark:bg-slate-900/50 border-none rounded-xl py-3 pl-10 pr-4 text-sm font-bold text-slate-700 dark:text-slate-200 focus:ring-2 focus:ring-cyan-500/20 w-64 transition-all shadow-sm"
+                   placeholder="{{ __('Search categories...') }}">
+        </div>
+
+        @if(auth()->user()->isSystemAdmin())
+        <div class="relative min-w-[200px]">
+            <x-searchable-select name="category_company_id" 
+                :options="$companies"
+                :selected="request('category_company_id')"
+                :placeholder="__('All Companies')"
+                @change="handleFilterSubmit('categories')"
+            />
+        </div>
+        @endif
+        
+        <input type="hidden" name="tab" value="categories">
+    </form>
+    <div class="overflow-x-auto luxury-scrollbar">
+        <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">{{ __('Category Name') }}</th>
+                    @if(auth()->user()->isSystemAdmin())
+                        <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">{{ __('Company') }}</th>
+                    @endif
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
+                @forelse($categories as $category)
+                <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+                    <td class="px-6 py-5">
+                        <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 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="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v13.5A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V9.432a2.25 2.25 0 00-.659-1.591l-4.182-4.182A2.25 2.25 0 0014.568 3h-5z" />
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12h-6m6 4h-6m6-8h-6" />
+                                </svg>
+                            </div>
+                            <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">
+                                {{ $category->localized_name }}
+                            </span>
+                        </div>
+                    </td>
+                    @if(auth()->user()->isSystemAdmin())
+                    <td class="px-6 py-5 text-center">
+                        <span class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{ $category->company->name ?? __('System Default') }}</span>
+                    </td>
+                    @endif
+                    <td class="px-6 py-5 text-right">
+                        <div class="flex justify-end items-center gap-2">
+                            <button type="button" @click="openCategoryModal(@js($category))" 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="{{ __('Edit') }}">
+                                <svg class="size-4" 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>
+                            </button>
+                            <button type="button" @click="confirmDelete('{{ route('admin.data-config.product-categories.destroy', $category->id) }}')" class="p-2.5 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="{{ __('Delete') }}">
+                                <svg class="size-4" 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 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                @empty
+                <tr>
+                    <td colspan="{{ auth()->user()->isSystemAdmin() ? 3 : 2 }}" class="px-6 py-20 text-center text-slate-400 italic font-bold tracking-widest small-caps">
+                        {{ __('No categories found.') }}
+                    </td>
+                </tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination -->
+    <div class="mt-6 py-6 border-t border-slate-50 dark:border-slate-800/50">
+        {{ $categories->links('vendor.pagination.luxury') }}
+    </div>
+</div>

resources/views/admin/products/partials/tab-products.blade.php

@@ -0,0 +1,144 @@
+@php
+    $baseRoute = 'admin.data-config.products';
+@endphp
+
+<div class="relative">
+    <!-- Filters & Search -->
+    <form @submit.prevent="handleFilterSubmit('products')" id="products-filter-form" class="flex flex-col md:flex-row md:items-center gap-4 mb-6">
+        <div class="relative group">
+            <button type="submit" class="absolute inset-y-0 left-0 flex items-center pl-4 z-10 text-slate-400 group-focus-within:text-cyan-500 transition-colors">
+                <svg class="size-4" 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>
+            </button>
+            <input type="text" name="product_search" value="{{ request('product_search') }}" 
+                class="py-2.5 pl-12 pr-6 block w-full md:w-80 luxury-input" placeholder="{{ __('Search products...') }}">
+            <button type="submit" class="hidden"></button>
+        </div>
+
+        @if(auth()->user()->isSystemAdmin())
+        <div class="relative min-w-[200px]">
+            <x-searchable-select name="product_company_id" :options="$companies" :selected="request('product_company_id')" :placeholder="__('All Companies')" @change="handleFilterSubmit('products')" />
+        </div>
+        @endif
+        
+        <input type="hidden" name="tab" value="products">
+    </form>
+
+    <!-- Table -->
+    <div class="overflow-x-auto luxury-scrollbar">
+        <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">{{ __('Product 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">{{ __('Barcode') }}</th>
+                    @if(auth()->user()->isSystemAdmin())
+                    <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">{{ __('Company') }}</th>
+                    @endif
+                    <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">{{ __('Sale Price') }}</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">{{ __('Track Limit (Track/Spring)') }}</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">{{ __('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">{{ __('Actions') }}</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
+                @forelse($products as $product)
+                <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+                    <td class="px-6 py-5 cursor-pointer group/info" @click="viewProductDetail(@js($product))" title="{{ __('View Details') }}">
+                        <div class="flex items-center gap-x-4">
+                            <div class="w-12 h-12 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/info:bg-cyan-500 group-hover/info:text-white group-hover/info:border-cyan-500 shadow-sm group-hover/info:shadow-cyan-500/50 transition-all duration-300 overflow-hidden relative">
+                                @if($product->image_url)
+                                    <img src="{{ $product->image_url }}" class="w-full h-full object-cover">
+                                @else
+                                    <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><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>
+                                @endif
+                            </div>
+                            <div class="flex flex-col">
+                                <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover/info:text-cyan-600 dark:group-hover/info:text-cyan-400 transition-colors leading-tight">{{ $product->localized_name }}</span>
+                                <div class="flex flex-wrap items-center gap-1.5 mt-1.5">
+                                    @php
+                                        $catName = $product->category->localized_name ?? __('Uncategorized');
+                                    @endphp
+                                    <span class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.14em] bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200/60 dark:border-slate-700/60 px-2.5 py-1 rounded-lg backdrop-blur-sm transition-all duration-300 group-hover/info:bg-cyan-500/10 group-hover/info:border-cyan-500/20 group-hover/info:text-cyan-500 group-hover/info:shadow-sm group-hover/info:shadow-cyan-500/10">{{ $catName }}</span>
+                                    @if(($companySettings['enable_material_code'] ?? false) && isset($product->metadata['material_code']))
+                                        <span class="text-[10px] font-black text-emerald-500/90 uppercase tracking-widest bg-emerald-500/10 px-2 py-0.5 rounded-lg border border-emerald-500/20 shadow-sm shadow-emerald-500/5">#{{ $product->metadata['material_code'] }}</span>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-6 py-5 whitespace-nowrap">
+                        <span class="text-sm font-mono font-bold text-slate-600 dark:text-slate-300 tracking-tight">{{ $product->barcode ?: '-' }}</span>
+                    </td>
+                    @if(auth()->user()->isSystemAdmin())
+                    <td class="px-6 py-5 text-center">
+                        <span class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest group-hover:text-slate-600 dark:group-hover:text-slate-300 transition-colors">{{ $product->company->name ?? '-' }}</span>
+                    </td>
+                    @endif
+                    <td class="px-6 py-5 text-center whitespace-nowrap">
+                        <span class="text-sm font-black text-slate-800 dark:text-white leading-none">${{ number_format($product->price, 0) }}</span>
+                    </td>
+                    <td class="px-6 py-5">
+                        <div class="flex items-center justify-center gap-2 font-black">
+                            <span class="text-base text-indigo-500 dark:text-indigo-400">
+                                {{ $product->track_limit ?: 0 }}
+                            </span>
+                            <span class="text-xs text-slate-300 dark:text-slate-700">/</span>
+                            <span class="text-base text-amber-500 dark:text-amber-500">
+                                {{ $product->spring_limit ?: 0 }}
+                            </span>
+                        </div>
+                    </td>
+                    <td class="px-6 py-5 text-center">
+                        @if($product->is_active)
+                            <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase shadow-sm shadow-emerald-500/5">{{ __('Active') }}</span>
+                        @else
+                            <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-slate-400/10 text-slate-400 border border-slate-400/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
+                        @endif
+                    </td>
+                    <td class="px-6 py-5 text-right">
+                        <div class="flex justify-end items-center gap-2">
+                            @if($product->is_active)
+                                <button type="button" 
+                                        @click="toggleStatus('{{ route($baseRoute . '.status.toggle', $product->id) }}')"
+                                        class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 transition-all border border-transparent hover:border-amber-500/20" 
+                                        title="{{ __('Disable') }}">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" /></svg>
+                                </button>
+                            @else
+                                <button type="button" 
+                                        @click="toggleStatus('{{ route($baseRoute . '.status.toggle', $product->id) }}')"
+                                        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="{{ __('Enable') }}">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" /></svg>
+                                </button>
+                            @endif
+                            <a href="{{ route($baseRoute . '.edit', $product->id) }}" 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="{{ __('Edit') }}">
+                                <svg class="size-4" 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 type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 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="{{ __('Delete') }}">
+                                <svg class="size-4" 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 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
+                            </button>
+                            <button type="button" @click="viewProductDetail({{ json_encode($product) }})" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20" title="{{ __('View') }}">
+                                <svg class="size-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-.644C3.67 8.5 7.652 6 12 6c4.348 0 8.33 2.5 9.964 5.678.134.263.134.561 0 .824C20.33 15.5 16.348 18 12 18c-4.348 0-8.33-2.5-9.964-5.678Z" />
+                                    <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="7" class="px-6 py-20 text-center text-slate-400 italic font-bold tracking-widest small-caps">{{ __('No products found matching your criteria.') }}</td>
+                </tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+    
+    <!-- Pagination -->
+    <div class="mt-6 py-6 border-t border-slate-50 dark:border-slate-800/50">
+        {{ $products->links('vendor.pagination.luxury') }}
+    </div>
+</div>

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

@@ -0,0 +1,260 @@
+<!-- Loading Overlay -->
+<div x-show="tabLoading === 'history'" 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>
+
+        <!-- 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]">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                        <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                            stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        </svg>
+                    </span>
+                    <input type="text" name="search" value="{{ request('search') }}"
+                        placeholder="{{ __('Search machines...') }}"
+                        class="luxury-input py-2.5 pl-12 pr-6 block w-full">
+                </div>
+
+                <!-- Date Range -->
+                <div class="relative group flex-[2] min-w-[340px]" x-data="{ 
+                    fp: null,
+                    startDate: '{{ request('start_date') }}',
+                    endDate: '{{ request('end_date') }}'
+                 }" x-init="fp = flatpickr($refs.dateRange, { 
+                    mode: 'range',
+                    dateFormat: 'Y-m-d H:i', enableTime: true, time_24hr: true,
+                    defaultHour: 0,
+                    defaultMinute: 0,
+                    locale: 'zh_tw',
+                    defaultDate: startDate && endDate ? [startDate, endDate] : (startDate ? [startDate] : []),
+                    onChange: function(selectedDates, dateStr, instance) {
+                        if (selectedDates.length === 2) {
+                            $refs.startDate.value = instance.formatDate(selectedDates[0], 'Y-m-d H:i');
+                            $refs.endDate.value = instance.formatDate(selectedDates[1], 'Y-m-d H:i');
+                        } else if (selectedDates.length === 0) {
+                            $refs.startDate.value = '';
+                            $refs.endDate.value = '';
+                        }
+                    }
+                 })">
+                    <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" />
+                        </svg>
+                    </span>
+                    <input type="hidden" name="start_date" x-ref="startDate"
+                        value="{{ request('start_date') }}">
+                    <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">
+                </div>
+
+                <!-- Command Type -->
+                <div class="flex-[0.8] min-w-[160px]">
+                    <x-searchable-select name="command_type" :options="[
+                        'reboot' => __('Machine Reboot'),
+                        'reboot_card' => __('Card Reader Reboot'),
+                        'checkout' => __('Remote Settlement'),
+                        'lock' => __('Lock Page Lock'),
+                        'unlock' => __('Lock Page Unlock'),
+                        'change' => __('Remote Change'),
+                        'dispense' => __('Remote Dispense'),
+                    ]" :selected="request('command_type')" :placeholder="__('All Command Types')"
+                        :hasSearch="false"
+                     @change="searchInTab('history')" />
+                </div>
+
+                <!-- Status -->
+                <div class="flex-[0.8] min-w-[160px]">
+                    <x-searchable-select name="status" :options="[
+                        'pending' => __('Pending'),
+                        'sent' => __('Sent'),
+                        'success' => __('Success'),
+                        'failed' => __('Failed'),
+                        'superseded' => __('Superseded'),
+                    ]" :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" />
+                        </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" />
+                        </svg>
+                    </button>
+                </div>
+            </form>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="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>
+                        <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 whitespace-nowrap">
+                            {{ __('Creation Time') }}</th>
+                        <th
+                            class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center whitespace-nowrap">
+                            {{ __('Picked up Time') }}</th>
+                        <th
+                            class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
+                            {{ __('Command Type') }}</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">
+                            {{ __('Operator') }}</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">
+                            {{ __('Status') }}</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
+                    @foreach ($history as $item)
+                    <tr
+                        class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+                        <td class="px-6 py-6 cursor-pointer" @click="selectMachine({{ Js::from($item->machine) }})">
+                            <div class="flex items-center gap-4">
+                                <div
+                                    class="w-12 h-12 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 overflow-hidden 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-6 h-6 shrink-0" fill="none" stroke="currentColor"
+                                            viewBox="0 0 24 24" stroke-width="2">
+                                            <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>
+                                    <div
+                                        class="text-[17px] font-black text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">
+                                        {{ $item->machine->name }}</div>
+                                    <div
+                                        class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">
+                                        {{ $item->machine->serial_no }}</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td
+                            class="px-6 py-6 font-mono text-xs font-black text-slate-400 tracking-widest whitespace-nowrap text-center">
+                            <div class="flex flex-col">
+                                <span>{{ $item->created_at->format('Y/m/d') }}</span>
+                                <span class="text-[15px] font-bold text-slate-500 dark:text-slate-400">{{ $item->created_at->format('H:i:s')
+                                    }}</span>
+                            </div>
+                        </td>
+                        <td
+                            class="px-6 py-6 font-mono text-xs font-black text-slate-400 tracking-widest whitespace-nowrap text-center">
+                            @if($item->executed_at)
+                            <div class="flex flex-col text-cyan-600/80 dark:text-cyan-400/60">
+                                <span>{{ $item->executed_at->format('Y/m/d') }}</span>
+                                <span class="text-[15px] font-bold">{{ $item->executed_at->format('H:i:s')
+                                    }}</span>
+                            </div>
+                            @else
+                            <span class="text-slate-300 dark:text-slate-700">-</span>
+                            @endif
+                        </td>
+                        <td class="px-6 py-6">
+                            <div class="flex flex-col min-w-[200px]">
+                                <span
+                                    class="text-sm font-black text-slate-700 dark:text-slate-300 tracking-tight"
+                                    x-text="getCommandName({{ Js::from($item->command_type) }})"></span>
+                                <div class="flex flex-col gap-0.5 mt-1">
+                                    <span x-show="getPayloadDetails({{ Js::from($item) }})"
+                                        class="text-[11px] 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"
+                                        x-text="getPayloadDetails({{ Js::from($item) }})"></span>
+                                    @if($item->note)
+                                    <span class="text-[10px] text-slate-400 italic pl-1"
+                                        x-text="translateNote({{ Js::from($item->note) }})"></span>
+                                    @endif
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-6 whitespace-nowrap">
+                            <div class="flex items-center gap-2">
+                                <div
+                                    class="w-6 h-6 rounded-full bg-cyan-500/10 flex items-center justify-center text-[10px] 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-600 dark:text-slate-300">{{
+                                    $item->user ? $item->user->name : __('System') }}</span>
+                            </div>
+                        </td>
+                        <td class="px-6 py-6 text-center">
+                            <div class="flex flex-col items-center gap-1.5">
+                                <div class="inline-flex items-center px-4 py-1.5 rounded-full border text-[10px] font-black uppercase tracking-widest shadow-sm"
+                                    :class="getCommandBadgeClass({{ Js::from($item->status) }})">
+                                    <div class="w-1.5 h-1.5 rounded-full mr-2" :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>
+                        </td>
+                    </tr>
+                    @endforeach
+                    @if($history->isEmpty())
+                    <tr>
+                        <td colspan="6" class="px-6 py-20 text-center">
+                            <div class="flex flex-col items-center gap-3">
+                                <div
+                                    class="w-16 h-16 rounded-full bg-slate-50 dark:bg-slate-900/50 flex items-center justify-center text-slate-200 dark:text-slate-800">
+                                    <svg class="w-8 h-8" fill="none" stroke="currentColor"
+                                        viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            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>
+                                <p class="text-slate-400 font-bold tracking-widest uppercase text-xs">{{
+                                    __('No records found') }}</p>
+                            </div>
+                        </td>
+                    </tr>
+                    @endif
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Pagination Area -->
+        <div class="mt-8">
+            {{ $history->appends(request()->query())->links('vendor.pagination.luxury') }}
+        </div>

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

@@ -0,0 +1,190 @@
+{{-- 庫存操作紀錄 Partial (AJAX 可替換) --}}
+<!-- Filters Area -->
+<div class="mb-8">
+    <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]">
+            <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
+                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                    stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+            </span>
+            <input type="text" name="search" value="{{ request('search') }}" x-model="historySearch"
+                placeholder="{{ __('Search machines...') }}" class="luxury-input py-2.5 pl-12 pr-6 block w-full">
+        </div>
+
+        <!-- Date Range -->
+        <div class="relative group flex-[2] min-w-[340px]" 
+             x-data="{ 
+                fp: null,
+                startDate: '{{ request('start_date') }}',
+                endDate: '{{ request('end_date') }}'
+             }" 
+             x-init="fp = flatpickr($refs.dateRange, { 
+                mode: 'range',
+                dateFormat: 'Y-m-d H:i', enableTime: true, time_24hr: true,
+                defaultHour: 0,
+                defaultMinute: 0,
+                locale: 'zh_tw',
+                defaultDate: startDate && endDate ? [startDate, endDate] : (startDate ? [startDate] : []),
+                onChange: function(selectedDates, dateStr, instance) {
+                    if (selectedDates.length === 2) {
+                        $refs.startDate.value = instance.formatDate(selectedDates[0], 'Y-m-d H:i');
+                        $refs.endDate.value = instance.formatDate(selectedDates[1], 'Y-m-d H:i');
+                        historyStartDate = $refs.startDate.value;
+                        historyEndDate = $refs.endDate.value;
+                    } else if (selectedDates.length === 0) {
+                        $refs.startDate.value = '';
+                        $refs.endDate.value = '';
+                        historyStartDate = '';
+                        historyEndDate = '';
+                    }
+                }
+             })">
+            <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" /></svg>
+            </span>
+            <input type="hidden" name="start_date" x-ref="startDate" value="{{ request('start_date') }}">
+            <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">
+        </div>
+
+        <!-- Status -->
+        <div class="flex-1 min-w-[160px]" @change="
+            historyStatus = $event.target.value === ' ' ? '' : $event.target.value;
+            searchInTab();
+        ">
+            <x-searchable-select 
+                name="status" 
+                :options="[
+                    'pending' => __('Pending'),
+                    'sent' => __('Sent'),
+                    'success' => __('Success'),
+                    'failed' => __('Failed'),
+                    'superseded' => __('Superseded'),
+                ]" 
+                :selected="request('status')" 
+                :placeholder="__('All Status')"
+                :hasSearch="false"
+            />
+        </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" /></svg>
+            </button>
+            <button type="button" @click="historySearch = ''; historyStartDate = ''; historyEndDate = ''; historyStatus = ''; searchInTab()" 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" /></svg>
+            </button>
+        </div>
+    </form>
+</div>
+<div class="overflow-x-auto">
+    <table class="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>
+                <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 whitespace-nowrap">{{ __('Creation Time') }}</th>
+                <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center whitespace-nowrap">{{ __('Picked up Time') }}</th>
+                <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Command Type') }}</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">{{ __('Operator') }}</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">{{ __('Status') }}</th>
+            </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
+            @foreach ($history as $item)
+                <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+                    <td class="px-6 py-6 cursor-pointer" @click="selectMachine(@js($item->machine))">
+                        <div class="flex items-center gap-4">
+                            <div class="w-12 h-12 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 overflow-hidden">
+                                <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="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>
+                                <div class="text-[17px] font-black text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">{{ $item->machine->name }}</div>
+                                <div class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">{{ $item->machine->serial_no }}</div>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-6 py-6 font-mono text-xs font-black text-slate-400 tracking-widest whitespace-nowrap text-center">
+                        <div class="flex flex-col">
+                            <span>{{ $item->created_at->format('Y/m/d') }}</span>
+                            <span class="text-[15px] font-bold text-slate-500 dark:text-slate-400">{{ $item->created_at->format('H:i:s') }}</span>
+                        </div>
+                    </td>
+                    <td class="px-6 py-6 font-mono text-xs font-black text-slate-400 tracking-widest whitespace-nowrap text-center">
+                        @if($item->executed_at)
+                            <div class="flex flex-col text-cyan-600/80 dark:text-cyan-400/60">
+                                <span>{{ $item->executed_at->format('Y/m/d') }}</span>
+                                <span class="text-[15px] font-bold">{{ $item->executed_at->format('H:i:s') }}</span>
+                            </div>
+                        @else
+                            <span class="text-slate-300 dark:text-slate-700">-</span>
+                        @endif
+                    </td>
+                    <td class="px-6 py-6">
+                        <div class="flex flex-col min-w-[200px]">
+                            <span class="text-sm font-black text-slate-700 dark:text-slate-300 tracking-tight" x-text="getCommandName(@js($item->command_type))"></span>
+                            <div class="flex flex-col gap-0.5 mt-1">
+                                <span x-show="getPayloadDetails(@js($item))" class="text-[11px] 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" x-text="getPayloadDetails(@js($item))"></span>
+                                @if($item->note)
+                                    <span class="text-[10px] text-slate-400 italic pl-1" x-text="translateNote(@js($item->note))"></span>
+                                @endif
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-6 py-6 whitespace-nowrap">
+                        <div class="flex items-center gap-2">
+                            <div class="w-6 h-6 rounded-full bg-cyan-500/10 flex items-center justify-center text-[10px] 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-600 dark:text-slate-300">{{ $item->user ? $item->user->name : __('System') }}</span>
+                        </div>
+                    </td>
+                    <td class="px-6 py-6 text-center">
+                        <div class="flex flex-col items-center gap-1.5">
+                            <div class="inline-flex items-center px-4 py-1.5 rounded-full border text-[10px] font-black uppercase tracking-widest shadow-sm"
+                                 :class="getCommandBadgeClass(@js($item->status))">
+                                <div class="w-1.5 h-1.5 rounded-full mr-2" 
+                                     :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>
+                    </td>
+                </tr>
+            @endforeach
+            @if($history->isEmpty())
+                <tr>
+                    <td colspan="6" class="px-6 py-20 text-center">
+                        <div class="flex flex-col items-center gap-3">
+                            <div class="w-16 h-16 rounded-full bg-slate-50 dark:bg-slate-900/50 flex items-center justify-center text-slate-200 dark:text-slate-800">
+                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" 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>
+                            <p class="text-slate-400 font-bold tracking-widest uppercase text-xs">{{ __('No records found') }}</p>
+                        </div>
+                    </td>
+                </tr>
+            @endif
+        </tbody>
+    </table>
+</div>
+
+<!-- Pagination Area -->
+<div class="mt-8">
+    {{ $history->appends(request()->query())->links('vendor.pagination.luxury') }}
+</div>

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

@@ -0,0 +1,152 @@
+<!-- Loading Overlay -->
+<div x-show="tabLoading === 'list'" 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>
+
+        <!-- Filters Area -->
+        <div class="flex items-center justify-between mb-8">
+            <form @submit.prevent="searchInTab('list')" class="relative group">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                    <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
+                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                </span>
+                <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('Search machines...') }}"
+                    class="luxury-input py-2.5 pl-12 pr-6 block w-72">
+            </form>
+        </div>
+
+        <div class="overflow-x-auto pb-4">
+            <table class="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">
+                            {{ __('Machine Information') }}</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">
+                            {{ __('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-center">
+                            {{ __('Last Communication') }}</th>
+                        <th
+                            class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">
+                            {{ __('Actions') }}</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
+                    @foreach($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 cursor-pointer" @click="selectMachine({{ Js::from($machine) }})">
+                                <div class="flex items-center gap-4">
+                                    <div
+                                        class="w-12 h-12 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-6 h-6 shrink-0" fill="none" stroke="currentColor"
+                                                viewBox="0 0 24 24" stroke-width="1.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>
+                                        <div class="text-[17px] font-black 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="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">
+                                            {{ $machine->serial_no }}</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-6 text-center">
+                                <div class="flex items-center justify-center">
+                                    @if($machine->status === 'online' || !$machine->status)
+                                        <div
+                                            class="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+                                            <div class="relative flex h-2 w-2">
+                                                <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 w-2 bg-emerald-500"></span>
+                                            </div>
+                                            <span
+                                                class="text-[10px] 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-3 py-1.5 rounded-full bg-slate-500/10 border border-slate-500/20">
+                                            <div class="h-2 w-2 rounded-full bg-slate-400"></div>
+                                            <span
+                                                class="text-[10px] font-black text-slate-500 dark:text-slate-400 tracking-[0.1em] uppercase">{{
+                                                __('Offline') }}</span>
+                                        </div>
+                                    @else
+                                        <div
+                                            class="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-rose-500/10 border border-rose-500/20">
+                                            <div class="relative flex h-2 w-2">
+                                                <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-2 w-2 bg-rose-500"></span>
+                                            </div>
+                                            <span
+                                                class="text-[10px] font-black text-rose-600 dark:text-rose-400 tracking-[0.1em] uppercase">{{
+                                                __('Abnormal') }}</span>
+                                        </div>
+                                    @endif
+                                </div>
+                            </td>
+                            <td class="px-6 py-6 text-center">
+                                <template x-data="{ heartbeat: {{ Js::from($machine->last_heartbeat_at) }} }">
+                                    <div class="flex flex-col items-center">
+                                        <span class="text-sm font-black text-slate-700 dark:text-slate-200"
+                                            x-text="formatTime(heartbeat)"></span>
+                                        <span
+                                            class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5"
+                                            x-text="heartbeat ? heartbeat.split('T')[0] : '--'"></span>
+                                    </div>
+                                </template>
+                            </td>
+                            <td class="px-6 py-6 text-right">
+                                <button @click="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') }}">
+                                    <svg class="size-4" 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>
+                                </button>
+                            </td>
+                        </tr>
+                    @endforeach
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Pagination Area -->
+        <div class="mt-8">
+            {{ $machines->appends(request()->query())->links('vendor.pagination.luxury') }}
+        </div>

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

@@ -0,0 +1,124 @@
+<div class="overflow-x-auto pb-4">
+    <table class="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">
+                    {{ __('Machine Information') }}</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">
+                    {{ __('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-center">
+                    {{ __('Alerts') }}</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">
+                    {{ __('Last Sync') }}</th>
+                <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">
+                    {{ __('Actions') }}</th>
+            </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
+            @forelse($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 cursor-pointer" @click="selectMachine({{ Js::from($machine) }})">
+                        <div class="flex items-center gap-4">
+                            <div class="w-12 h-12 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">
+                                @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-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                                        <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>
+                                <div class="text-[17px] font-black 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="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">
+                                    {{ $machine->serial_no }}</div>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-6 py-6 text-center">
+                        <div class="flex justify-center">
+                            @if($machine->status === 'online' || !$machine->status)
+                                <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+                                    <div class="relative flex h-2 w-2">
+                                        <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 w-2 bg-emerald-500"></span>
+                                    </div>
+                                    <span class="text-[10px] 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-3 py-1.5 rounded-full bg-slate-500/10 border border-slate-500/20">
+                                    <div class="h-2 w-2 rounded-full bg-slate-400"></div>
+                                    <span class="text-[10px] 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-3 py-1.5 rounded-full bg-rose-500/10 border border-rose-500/20">
+                                    <div class="relative flex h-2 w-2">
+                                        <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-2 w-2 bg-rose-500"></span>
+                                    </div>
+                                    <span class="text-[10px] font-black text-rose-600 dark:text-rose-400 tracking-[0.1em] uppercase">{{ __('Abnormal') }}</span>
+                                </div>
+                            @endif
+                        </div>
+                    </td>
+                    <td class="px-6 py-6 text-center">
+                        <div class="flex flex-col items-center gap-1.5">
+                            @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-[11px] font-bold text-slate-400 dark:text-slate-600 uppercase tracking-[0.1em]">{{ __('All Stable') }}</span>
+                            @endif
+                        </div>
+                    </td>
+                    <td class="px-6 py-6 text-center">
+                        <div class="flex flex-col items-center">
+                            <span class="text-sm font-black text-slate-700 dark:text-slate-200"
+                                x-text="formatTime({{ Js::from($machine->last_heartbeat_at) }})"></span>
+                            <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">
+                                {{ $machine->last_heartbeat_at ? \Illuminate\Support\Carbon::parse($machine->last_heartbeat_at)->format('Y-m-d') : '--' }}
+                            </span>
+                        </div>
+                    </td>
+                    <td class="px-6 py-6 text-right">
+                        <button @click="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') }}">
+                            <svg class="size-4" 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>
+                        </button>
+                    </td>
+                </tr>
+            @empty
+                <tr>
+                    <td colspan="5" class="px-6 py-20 text-center">
+                        <div class="flex flex-col items-center gap-3">
+                            <div class="w-16 h-16 rounded-full bg-slate-50 dark:bg-slate-900/50 flex items-center justify-center text-slate-200 dark:text-slate-800">
+                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <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" />
+                                </svg>
+                            </div>
+                            <p class="text-slate-400 font-bold tracking-widest uppercase text-xs">{{ __('No machines found') }}</p>
+                        </div>
+                    </td>
+                </tr>
+            @endforelse
+        </tbody>
+    </table>
+</div>
+
+{{-- 標準化分頁底欄 --}}
+<div class="mt-8">
+    {{ $machines->appends(request()->except('machine_page'))->links('vendor.pagination.luxury') }}
+</div>

resources/views/components/searchable-select.blade.php

@@ -22,6 +22,7 @@
         "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>',
         "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-[100] 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>'

resources/views/vendor/pagination/luxury.blade.php

@@ -11,13 +11,13 @@
                         $limits = [10, 25, 50, 100];
                     @endphp
                     <select onchange="const params = new URLSearchParams(window.location.search); params.set('per_page', this.value); params.delete('page'); window.location.href = window.location.pathname + '?' + params.toString();" 
-                        class="h-7 pl-2 pr-8 rounded-lg bg-white dark:bg-slate-800 border-none text-[11px] font-black text-slate-600 dark:text-slate-300 appearance-none focus:ring-4 focus:ring-cyan-500/10 outline-none transition-all cursor-pointer shadow-sm leading-none py-0">
+                        class="h-7 pl-2 pr-7 rounded-lg bg-white dark:bg-slate-800 border-none text-[11px] font-black text-slate-600 dark:text-slate-300 appearance-none focus:ring-4 focus:ring-cyan-500/10 outline-none transition-all cursor-pointer shadow-sm leading-none py-0 !bg-none">
                         @foreach($limits as $l)
                             <option value="{{ $l }}" {{ $currentLimit == $l ? 'selected' : '' }}>{{ $l }}</option>
                         @endforeach
                     </select>
-                    <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none opacity-40 group-hover:opacity-100 transition-opacity">
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-1.5 pointer-events-none text-cyan-500/50 group-hover:text-cyan-500 transition-colors">
-                        <svg class="size-3 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
+                        <svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
                     </div>
                 </div>
             </div>
@@ -52,7 +52,7 @@
             {{-- Unified Quick Jump Selection (Desktop & Mobile) --}}
             <div class="relative group">
                 <select onchange="window.location.href = this.value" 
-                    class="h-9 pl-4 pr-10 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-[11px] sm:text-xs font-black text-slate-600 dark:text-slate-300 appearance-none focus:ring-4 focus:ring-cyan-500/10 focus:border-cyan-500 outline-none transition-all cursor-pointer shadow-sm hover:border-slate-300 dark:hover:border-slate-600 {{ $paginator->lastPage() <= 1 ? 'opacity-50 cursor-not-allowed pointer-events-none' : '' }}"
+                    class="h-9 pl-4 pr-10 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-[11px] sm:text-xs font-black text-slate-600 dark:text-slate-300 appearance-none focus:ring-4 focus:ring-cyan-500/10 focus:border-cyan-500 outline-none transition-all cursor-pointer shadow-sm hover:border-slate-300 dark:hover:border-slate-600 !bg-none {{ $paginator->lastPage() <= 1 ? 'opacity-50 cursor-not-allowed pointer-events-none' : '' }}"
                     {{ $paginator->lastPage() <= 1 ? 'disabled' : '' }}>
                     @for ($i = 1; $i <= $paginator->lastPage(); $i++)
                         <option value="{{ $paginator->url($i) }}" {{ $i == $paginator->currentPage() ? 'selected' : '' }}>
@@ -60,8 +60,8 @@
                         </option>
                     @endfor
                 </select>
-                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none opacity-40 group-hover:opacity-100 transition-opacity">
+                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-cyan-500/50 group-hover:text-cyan-500 transition-colors">
-                    <svg class="size-3.5 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
+                    <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
                 </div>
             </div>
 

routes/api.php

@@ -51,12 +51,15 @@ Route::prefix('v1')->middleware(['throttle:api'])->group(function () {
     // 機台管理員 B000 登入驗證 (由於此階段機台未帶 Token 無法通過 iot.auth)
     Route::prefix('app')->group(function () {
         Route::post('admin/login/B000', [\App\Http\Controllers\Api\V1\App\MachineAuthController::class, 'loginB000'])->middleware('throttle:30,1');
+        
+        // 機台啟動引導與參數下載 (需人員登入 Token)
+        Route::middleware('auth:sanctum')->get('machine/setting/B014', [App\Http\Controllers\Api\V1\App\MachineController::class, 'getSettings']);
     });
 
     Route::prefix('app')->middleware(['iot.auth', 'throttle:100,1'])->group(function () {
         // 心跳與狀態 (B010, B017, B710, B220)
         Route::post('machine/status/B010', [App\Http\Controllers\Api\V1\App\MachineController::class, 'heartbeat']);
-        Route::post('machine/reload_msg/B017', [App\Http\Controllers\Api\V1\App\MachineController::class, 'getSlots']);
+        Route::get('machine/reload_msg/B017', [App\Http\Controllers\Api\V1\App\MachineController::class, 'getSlots']);
         Route::post('machine/timer/B710', [App\Http\Controllers\Api\V1\App\MachineController::class, 'syncTimer']);
         Route::post('machine/coins/B220', [App\Http\Controllers\Api\V1\App\MachineController::class, 'syncCoinInventory']);
         Route::post('machine/member/verify/B650', [App\Http\Controllers\Api\V1\App\MachineController::class, 'verifyMember']);
@@ -68,6 +71,13 @@ Route::prefix('v1')->middleware(['throttle:api'])->group(function () {
         // 統一商品主檔 API (B012 整合版)
         Route::match(['get', 'patch'], 'machine/products/B012', [App\Http\Controllers\Api\V1\App\MachineController::class, 'getProducts']);
 
+        // 機台故障與異常上報 (B013)
+        Route::post('machine/error/B013', [App\Http\Controllers\Api\V1\App\MachineController::class, 'reportError']);
+
+        // 遠端指令出貨控制 (B055)
+        Route::get('machine/dispense/B055', [App\Http\Controllers\Api\V1\App\MachineController::class, 'getDispenseQueue']);
+        Route::put('machine/dispense/B055', [App\Http\Controllers\Api\V1\App\MachineController::class, 'reportDispenseResult']);
+
         // 交易、發票與出貨 (B600, B601, B602)
         Route::post('machine/restock/B018', [App\Http\Controllers\Api\V1\App\MachineController::class, 'recordRestock']);
         Route::post('B600', [App\Http\Controllers\Api\V1\App\TransactionController::class, 'store']);