[FEAT] 新增員工卡管理模組與 B012 API 文檔完善
1. 新增員工卡 (staff_cards) 與員工卡感應日誌 (staff_card_logs) 模型與遷移檔。 2. 實作 StaffCardController 與相關管理介面，支援狀態切換與 CRUD。 3. 擴充 routes/web.php 加入員工卡管理路由。 4. 更新 api-docs.php 文檔，補全 B012 (Unified Sync) 的商品同步回應範例。 5. 實作 PaymentTypeSeeder 並整合至 DatabaseSeeder 以標準化支付類型。 6. 優化銷售中心訂單標籤與倉庫機台庫存顯示邏輯。 7. 側邊欄選單加入員工卡管理入口。 8. 重構 TransactionService 以支援員工卡工作階段 (session_token) 驗證。
This commit is contained in:
sky121113
parent
81314c20b3
commit
15b975efac
@ -72,8 +72,8 @@ trigger: always_on
|
|||||||
### 5.1 MQTT 通訊端點 (高頻與事件驅動)
|
### 5.1 MQTT 通訊端點 (高頻與事件驅動)
|
||||||
以下高頻或即時事件，未來將**全面改採 MQTT 協議**，透過 EMQX 與 Go Gateway 橋接：
|
以下高頻或即時事件，未來將**全面改採 MQTT 協議**，透過 EMQX 與 Go Gateway 橋接：
|
||||||
1. **心跳事件**：機台發布至 `machine/{serial_no}/heartbeat`。
|
1. **心跳事件**：機台發布至 `machine/{serial_no}/heartbeat`。
|
||||||
2. **B013 (錯誤與狀態)**：機台發布至 `machine/{serial_no}/error`。
|
2. **異常與狀態 (B013)**：機台發布至 `machine/{serial_no}/error`。
|
||||||
3. **B600 / B602 (交易紀錄)**：機台發布至 `machine/{serial_no}/transaction`。
|
3. **交易紀錄 (B600/B602)**：機台發布至 `machine/{serial_no}/transaction`，推薦使用 `action: finalize` 整合上報。
|
||||||
|
|
||||||
處理管線：
|
處理管線：
|
||||||
`機台 ➜ EMQX ➜ Go Gateway ➜ Redis List (mqtt_incoming_jobs) ➜ Laravel daemon (mqtt:listen) ➜ Job 異步寫入 DB`
|
`機台 ➜ EMQX ➜ Go Gateway ➜ Redis List (mqtt_incoming_jobs) ➜ Laravel daemon (mqtt:listen) ➜ Job 異步寫入 DB`
|
||||||
|
|||||||
@ -329,7 +329,7 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
|
|||||||
| `2` | 電子票證 | 包含悠遊卡、一卡通等 |
|
| `2` | 電子票證 | 包含悠遊卡、一卡通等 |
|
||||||
| `3` | 掃碼支付 | 一般掃碼支付 |
|
| `3` | 掃碼支付 | 一般掃碼支付 |
|
||||||
| `4` | 投幣機支付 | 實體紙鈔機 |
|
| `4` | 投幣機支付 | 實體紙鈔機 |
|
||||||
| `5` | 通關密碼 | |
|
| `5` | 通行碼 | 原「通關密碼」 |
|
||||||
| `6` | 取貨碼 | |
|
| `6` | 取貨碼 | |
|
||||||
| `7` | 來店禮 | |
|
| `7` | 來店禮 | |
|
||||||
| `8` | 問卷 | |
|
| `8` | 問卷 | |
|
||||||
@ -341,6 +341,7 @@ description: 本技能規範定義了 Star Cloud 系統中所有機台 (IoT) 與
|
|||||||
| `33` | TapPay - Pi 拍錢包 | |
|
| `33` | TapPay - Pi 拍錢包 | |
|
||||||
| `34` | TapPay - 全盈+PAY | |
|
| `34` | TapPay - 全盈+PAY | |
|
||||||
| `40` | 會員驗證取貨商品 | |
|
| `40` | 會員驗證取貨商品 | |
|
||||||
|
| `41` | 員工卡 | |
|
||||||
| `50` ~ `54` | 線下付款 + TapPay | `50`=線下+30, `51`=線下+31... `54`=線下+34 |
|
| `50` ~ `54` | 線下付款 + TapPay | `50`=線下+30, `51`=線下+31... `54`=線下+34 |
|
||||||
| `60` | 點數 / 優惠卷全額折抵 | 點數全額折抵出貨 或 優惠卷全額折抵出貨 |
|
| `60` | 點數 / 優惠卷全額折抵 | 點數全額折抵出貨 或 優惠卷全額折抵出貨 |
|
||||||
| `61` ~ `69` | 會員 + X | `61`=會員+1, `62`=會員+2... `69`=會員+9 |
|
| `61` ~ `69` | 會員 + X | `61`=會員+1, `62`=會員+2... `69`=會員+9 |
|
||||||
|
|||||||
@ -19,7 +19,7 @@ description: 規範智能販賣機與 Cloud 平台間的高頻通訊處理流程
|
|||||||
4. **Model (儲存層)**：執行資料存取。
|
4. **Model (儲存層)**：執行資料存取。
|
||||||
|
|
||||||
### 1.2 MQTT 管線 (高頻/即時操作)
|
### 1.2 MQTT 管線 (高頻/即時操作)
|
||||||
適用於 B010 (心跳), B013 (異常), B600/B601/B602 (交易生命週期) 等高頻或即時性端點：
|
適用於 `heartbeat` (心跳), `error` (異常), `transaction` (交易生命週期: `create`, `finalize` 等) 等高頻或即時性端點：
|
||||||
1. **Go Gateway (接收層)**：訂閱 EMQX Topic，提取 `serial_no`，包裝成標準 JSON。
|
1. **Go Gateway (接收層)**：訂閱 EMQX Topic，提取 `serial_no`，包裝成標準 JSON。
|
||||||
2. **Redis List (橋接層)**：Go 執行 `RPUSH starcloud_database_mqtt_incoming_jobs {json}`。
|
2. **Redis List (橋接層)**：Go 執行 `RPUSH starcloud_database_mqtt_incoming_jobs {json}`。
|
||||||
3. **Laravel `mqtt:listen` (消費層)**：常駐指令 `BLPOP` 取出 JSON，根據 `type` 分派至對應 Job。
|
3. **Laravel `mqtt:listen` (消費層)**：常駐指令 `BLPOP` 取出 JSON，根據 `type` 分派至對應 Job。
|
||||||
@ -90,9 +90,10 @@ public function handle(MachineService $service): void
|
|||||||
|
|
||||||
### 常見端點處理模式
|
### 常見端點處理模式
|
||||||
1. **$SYS Events**：由 Broker 自動觸發，走 **MQTT 管線**。用於毫秒級更新機台的 `online/offline` 狀態與 `last_heartbeat_at`。
|
1. **$SYS Events**：由 Broker 自動觸發，走 **MQTT 管線**。用於毫秒級更新機台的 `online/offline` 狀態與 `last_heartbeat_at`。
|
||||||
2. **B010 (心跳)**：高頻點，走 **MQTT 管線** (`machine/+/heartbeat`)。更新 `last_heartbeat_at` 與感測器快照。
|
2. **heartbeat (心跳)**：原 B010。高頻點，走 **MQTT 管線** (`machine/+/heartbeat`)。更新 `last_heartbeat_at` 與感測器快照。
|
||||||
3. **B013 (異常)**：事件驅動點，走 **MQTT 管線** (`machine/+/error`)。寫入 `machine_logs` 並觸發告警。
|
3. **error (異常)**：原 B013。事件驅動點，走 **MQTT 管線** (`machine/+/error`)。寫入 `machine_logs` 並觸發告警。
|
||||||
4. **B600/B601/B602 (交易生命週期)**：高價值點，走 **MQTT 管線** (`machine/+/transaction`)。透過 `action` 欄位區分 `create` (交易建立) / `invoice` (發票) / `dispense` (出貨結果)。
|
4. **transaction (交易生命週期)**：原 B600/B601/B602。高價值點，走 **MQTT 管線** (`machine/+/transaction`)。透過 `action` 欄位區分 `create` (建立) / `finalize` (完成統整) / `dispense` (出貨結果)。
|
||||||
|
- **員工卡/通行碼**：應透過 `action: finalize` 且 `amount: 0` 並帶入對應 `payment_type` (如 41: 員工卡) 進行交易錄入。
|
||||||
5. **B012 (商品同步)**：大資料量，走 **HTTP 管線**。應確保 Service 層具備緩存 (Cache) 機制。
|
5. **B012 (商品同步)**：大資料量，走 **HTTP 管線**。應確保 Service 層具備緩存 (Cache) 機制。
|
||||||
6. **B055 (遠端出貨)**：雲端下發指令，走 **MQTT 下行管線** (`machine/{id}/command`)。
|
6. **B055 (遠端出貨)**：雲端下發指令，走 **MQTT 下行管線** (`machine/{id}/command`)。
|
||||||
|
|
||||||
|
|||||||
@ -30,15 +30,15 @@ class RemoteController extends Controller
|
|||||||
|
|
||||||
// --- 1. 機台列表處理 (New Command Tab) ---
|
// --- 1. 機台列表處理 (New Command Tab) ---
|
||||||
$machineQuery = Machine::withCount(['slots'])->orderBy('last_heartbeat_at', 'desc')->orderBy('id', 'desc');
|
$machineQuery = Machine::withCount(['slots'])->orderBy('last_heartbeat_at', 'desc')->orderBy('id', 'desc');
|
||||||
|
|
||||||
if ($request->filled('search') && $request->input('tab') === 'list') {
|
if ($request->filled('search') && $request->input('tab') === 'list') {
|
||||||
$search = $request->input('search');
|
$search = $request->input('search');
|
||||||
$machineQuery->where(function ($q) use ($search) {
|
$machineQuery->where(function ($q) use ($search) {
|
||||||
$q->where('name', 'like', "%{$search}%")
|
$q->where('name', 'like', "%{$search}%")
|
||||||
->orWhere('serial_no', 'like', "%{$search}%");
|
->orWhere('serial_no', 'like', "%{$search}%");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$machines = $machineQuery->paginate($request->input('per_page', 10), ['*'], 'machine_page');
|
$machines = $machineQuery->paginate($request->input('per_page', 10), ['*'], 'machine_page');
|
||||||
|
|
||||||
// --- 2. 歷史紀錄處理 (Operation Records Tab) ---
|
// --- 2. 歷史紀錄處理 (Operation Records Tab) ---
|
||||||
@ -102,7 +102,7 @@ class RemoteController extends Controller
|
|||||||
if ($request->has('tab')) {
|
if ($request->has('tab')) {
|
||||||
$tab = $request->input('tab');
|
$tab = $request->input('tab');
|
||||||
$viewPath = $tab === 'list' ? 'admin.remote.partials.tab-machines-index' : 'admin.remote.partials.tab-history-index';
|
$viewPath = $tab === 'list' ? 'admin.remote.partials.tab-machines-index' : 'admin.remote.partials.tab-history-index';
|
||||||
|
|
||||||
return response()->json([
|
return response()->json([
|
||||||
'success' => true,
|
'success' => true,
|
||||||
'html' => view($viewPath, [
|
'html' => view($viewPath, [
|
||||||
|
|||||||
@ -47,19 +47,7 @@ class SalesController extends Controller
|
|||||||
'end_date' => $endDate,
|
'end_date' => $endDate,
|
||||||
],
|
],
|
||||||
'machines' => Machine::select('id', 'name', 'serial_no')->get(),
|
'machines' => Machine::select('id', 'name', 'serial_no')->get(),
|
||||||
'paymentTypes' => [
|
'paymentTypes' => Order::getPaymentTypeLabels(),
|
||||||
1 => '信用卡',
|
|
||||||
2 => '電子票證',
|
|
||||||
3 => '掃碼支付',
|
|
||||||
4 => '紙鈔機',
|
|
||||||
9 => '零錢',
|
|
||||||
30 => 'LINE Pay',
|
|
||||||
31 => '街口支付',
|
|
||||||
32 => '悠遊付',
|
|
||||||
33 => 'Pi 拍錢包',
|
|
||||||
34 => '全盈+PAY',
|
|
||||||
60 => '點數/優惠券',
|
|
||||||
],
|
|
||||||
];
|
];
|
||||||
|
|
||||||
// 1. 建立基本查詢 (套用共用過濾器：機台、日期)
|
// 1. 建立基本查詢 (套用共用過濾器：機台、日期)
|
||||||
@ -144,11 +132,7 @@ class SalesController extends Controller
|
|||||||
'success' => true,
|
'success' => true,
|
||||||
'html' => view('admin.sales.partials.order-detail-panel', [
|
'html' => view('admin.sales.partials.order-detail-panel', [
|
||||||
'order' => $order,
|
'order' => $order,
|
||||||
'paymentTypes' => [
|
'paymentTypes' => Order::getPaymentTypeLabels()
|
||||||
1 => '信用卡', 2 => '電子票證', 3 => '掃碼支付', 4 => '紙鈔機', 9 => '零錢',
|
|
||||||
30 => 'LINE Pay', 31 => '街口支付', 32 => '悠遊付', 33 => 'Pi 拍錢包', 34 => '全盈+PAY',
|
|
||||||
60 => '點數/優惠券',
|
|
||||||
]
|
|
||||||
])->render()
|
])->render()
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|||||||
144
app/Http/Controllers/Admin/StaffCardController.php
Normal file
144
app/Http/Controllers/Admin/StaffCardController.php
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Controllers\Admin;
|
||||||
|
|
||||||
|
use App\Http\Controllers\Controller;
|
||||||
|
use App\Models\StaffCard;
|
||||||
|
use App\Models\StaffCardLog;
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use Illuminate\Support\Facades\DB;
|
||||||
|
|
||||||
|
class StaffCardController extends Controller
|
||||||
|
{
|
||||||
|
public function index(Request $request)
|
||||||
|
{
|
||||||
|
$tab = $request->get('tab', 'staff_list');
|
||||||
|
$isSystemAdmin = auth()->user()->isSystemAdmin();
|
||||||
|
|
||||||
|
$companies = [];
|
||||||
|
if ($isSystemAdmin) {
|
||||||
|
$companies = \App\Models\System\Company::active()->orderBy('name')->get();
|
||||||
|
}
|
||||||
|
|
||||||
|
$cardsQuery = StaffCard::with('lastMachine')
|
||||||
|
->when($request->search, function ($q) use ($request) {
|
||||||
|
$q->where(function ($sq) use ($request) {
|
||||||
|
$sq->where('name', 'like', "%{$request->search}%")
|
||||||
|
->orWhere('employee_id', 'like', "%{$request->search}%")
|
||||||
|
->orWhere('card_uid', 'like', "%{$request->search}%");
|
||||||
|
});
|
||||||
|
})
|
||||||
|
->when($isSystemAdmin && $request->company_id, function ($q) use ($request) {
|
||||||
|
$q->where('company_id', $request->company_id);
|
||||||
|
});
|
||||||
|
|
||||||
|
$logsQuery = StaffCardLog::with(['staffCard', 'machine'])
|
||||||
|
->when($request->log_search, function ($q) use ($request) {
|
||||||
|
$q->whereHas('staffCard', function ($sq) use ($request) {
|
||||||
|
$sq->where('name', 'like', "%{$request->log_search}%")
|
||||||
|
->orWhere('employee_id', 'like', "%{$request->log_search}%")
|
||||||
|
->orWhere('card_uid', 'like', "%{$request->log_search}%");
|
||||||
|
});
|
||||||
|
})
|
||||||
|
->when($isSystemAdmin && $request->log_company_id, function ($q) use ($request) {
|
||||||
|
$q->where('company_id', $request->log_company_id);
|
||||||
|
});
|
||||||
|
|
||||||
|
$staffPerPage = $request->input('staff_per_page', 10);
|
||||||
|
$usagePerPage = $request->input('usage_per_page', 10);
|
||||||
|
|
||||||
|
if ($request->ajax() && $request->has('_ajax')) {
|
||||||
|
if ($tab === 'staff_list') {
|
||||||
|
$cards = $cardsQuery->latest()->paginate($staffPerPage, ['*'], 'staff_page');
|
||||||
|
return response()->json([
|
||||||
|
'success' => true,
|
||||||
|
'html' => view('admin.data-config.staff-cards.partials.tab-staff-list', compact('cards', 'companies'))->render()
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
$logs = $logsQuery->latest()->paginate($usagePerPage, ['*'], 'usage_page');
|
||||||
|
return response()->json([
|
||||||
|
'success' => true,
|
||||||
|
'html' => view('admin.data-config.staff-cards.partials.tab-usage-logs', compact('logs', 'companies'))->render()
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$cards = $cardsQuery->latest()->paginate($staffPerPage, ['*'], 'staff_page');
|
||||||
|
$logs = $logsQuery->latest()->paginate($usagePerPage, ['*'], 'usage_page');
|
||||||
|
|
||||||
|
|
||||||
|
return view('admin.data-config.staff-cards.index', compact('cards', 'logs', 'tab', 'companies'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function store(Request $request)
|
||||||
|
{
|
||||||
|
$validated = $request->validate([
|
||||||
|
'company_id' => 'nullable|exists:companies,id',
|
||||||
|
'employee_id' => 'required|string|max:50',
|
||||||
|
'name' => 'required|string|max:100',
|
||||||
|
'card_uid' => 'required|string|max:100',
|
||||||
|
'status' => 'nullable|string|in:active,inactive',
|
||||||
|
'notes' => 'nullable|string',
|
||||||
|
]);
|
||||||
|
|
||||||
|
$validated['status'] = $request->get('status', 'active');
|
||||||
|
|
||||||
|
$card = StaffCard::create($validated);
|
||||||
|
|
||||||
|
if ($request->ajax()) {
|
||||||
|
return response()->json([
|
||||||
|
'success' => true,
|
||||||
|
'message' => __('Staff card created successfully'),
|
||||||
|
'data' => $card
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return redirect()->route('admin.data-config.staff-cards.index')->with('success', __('Staff card created successfully'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function update(Request $request, StaffCard $staffCard)
|
||||||
|
{
|
||||||
|
$validated = $request->validate([
|
||||||
|
'company_id' => 'nullable|exists:companies,id',
|
||||||
|
'employee_id' => 'required|string|max:50',
|
||||||
|
'name' => 'required|string|max:100',
|
||||||
|
'card_uid' => 'required|string|max:100',
|
||||||
|
'status' => 'nullable|string|in:active,inactive',
|
||||||
|
'notes' => 'nullable|string',
|
||||||
|
]);
|
||||||
|
|
||||||
|
$validated['status'] = $request->get('status', $staffCard->status);
|
||||||
|
|
||||||
|
$staffCard->update($validated);
|
||||||
|
|
||||||
|
if ($request->ajax()) {
|
||||||
|
return response()->json([
|
||||||
|
'success' => true,
|
||||||
|
'message' => __('Staff card updated successfully'),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return redirect()->route('admin.data-config.staff-cards.index')->with('success', __('Staff card updated successfully'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function destroy(StaffCard $staffCard)
|
||||||
|
{
|
||||||
|
$staffCard->delete();
|
||||||
|
|
||||||
|
return response()->json([
|
||||||
|
'success' => true,
|
||||||
|
'message' => __('Staff card deleted successfully'),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function toggleStatus(StaffCard $staffCard)
|
||||||
|
{
|
||||||
|
$staffCard->status = $staffCard->status === 'active' ? 'inactive' : 'active';
|
||||||
|
$staffCard->save();
|
||||||
|
|
||||||
|
return response()->json([
|
||||||
|
'success' => true,
|
||||||
|
'message' => __('Status updated successfully'),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -586,9 +586,17 @@ class WarehouseController extends Controller
|
|||||||
->paginate($request->input('per_page', 10))
|
->paginate($request->input('per_page', 10))
|
||||||
->withQueryString();
|
->withQueryString();
|
||||||
|
|
||||||
|
if ($request->ajax()) {
|
||||||
|
return response()->json([
|
||||||
|
'success' => true,
|
||||||
|
'html' => view('admin.warehouses.partials.list-machines', compact('machines'))->render()
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
return view('admin.warehouses.machine-inventory', compact('machines'));
|
return view('admin.warehouses.machine-inventory', compact('machines'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* AJAX：取得單台機台貨道詳情
|
* AJAX：取得單台機台貨道詳情
|
||||||
*/
|
*/
|
||||||
|
|||||||
45
app/Models/StaffCard.php
Normal file
45
app/Models/StaffCard.php
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Models;
|
||||||
|
|
||||||
|
use App\Traits\TenantScoped;
|
||||||
|
use App\Models\Machine\Machine;
|
||||||
|
use Illuminate\Database\Eloquent\Model;
|
||||||
|
use Illuminate\Database\Eloquent\Relations\HasMany;
|
||||||
|
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||||
|
|
||||||
|
class StaffCard extends Model
|
||||||
|
{
|
||||||
|
use TenantScoped;
|
||||||
|
|
||||||
|
protected $fillable = [
|
||||||
|
'company_id',
|
||||||
|
'employee_id',
|
||||||
|
'name',
|
||||||
|
'card_uid',
|
||||||
|
'status',
|
||||||
|
'notes',
|
||||||
|
'last_used_at',
|
||||||
|
'last_machine_id',
|
||||||
|
];
|
||||||
|
|
||||||
|
protected $casts = [
|
||||||
|
'last_used_at' => 'datetime',
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取得此卡片的刷卡紀錄
|
||||||
|
*/
|
||||||
|
public function logs(): HasMany
|
||||||
|
{
|
||||||
|
return $this->hasMany(StaffCardLog::class);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取得最後一次使用的機台
|
||||||
|
*/
|
||||||
|
public function lastMachine(): BelongsTo
|
||||||
|
{
|
||||||
|
return $this->belongsTo(Machine::class, 'last_machine_id');
|
||||||
|
}
|
||||||
|
}
|
||||||
44
app/Models/StaffCardLog.php
Normal file
44
app/Models/StaffCardLog.php
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Models;
|
||||||
|
|
||||||
|
use App\Traits\TenantScoped;
|
||||||
|
use App\Models\Machine\Machine;
|
||||||
|
use Illuminate\Database\Eloquent\Model;
|
||||||
|
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||||
|
|
||||||
|
class StaffCardLog extends Model
|
||||||
|
{
|
||||||
|
use TenantScoped;
|
||||||
|
|
||||||
|
public $timestamps = false;
|
||||||
|
|
||||||
|
protected $fillable = [
|
||||||
|
'company_id',
|
||||||
|
'staff_card_id',
|
||||||
|
'machine_id',
|
||||||
|
'action_type',
|
||||||
|
'raw_data',
|
||||||
|
];
|
||||||
|
|
||||||
|
protected $casts = [
|
||||||
|
'raw_data' => 'array',
|
||||||
|
'created_at' => 'datetime',
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取得關聯的員工卡片
|
||||||
|
*/
|
||||||
|
public function staffCard(): BelongsTo
|
||||||
|
{
|
||||||
|
return $this->belongsTo(StaffCard::class);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取得刷卡的機台
|
||||||
|
*/
|
||||||
|
public function machine(): BelongsTo
|
||||||
|
{
|
||||||
|
return $this->belongsTo(Machine::class);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -46,8 +46,67 @@ class Order extends Model
|
|||||||
'payment_at' => 'datetime',
|
'payment_at' => 'datetime',
|
||||||
'machine_time' => 'datetime',
|
'machine_time' => 'datetime',
|
||||||
'metadata' => 'array',
|
'metadata' => 'array',
|
||||||
|
'payment_type' => 'integer',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取得所有支付類型的對照標籤
|
||||||
|
*/
|
||||||
|
public static function getPaymentTypeLabels(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
1 => __('Credit Card'),
|
||||||
|
2 => __('E-Ticket (EasyCard/iPass)'),
|
||||||
|
3 => __('QR Code Payment'),
|
||||||
|
4 => __('Bill Acceptor'),
|
||||||
|
5 => __('Pass Code'), // 使用者要求由「通關密碼」改為「通行碼」
|
||||||
|
6 => __('Pickup Code'),
|
||||||
|
7 => __('Welcome Gift'),
|
||||||
|
8 => __('Questionnaire'),
|
||||||
|
9 => __('Coin Acceptor'),
|
||||||
|
21 => __('Offline + 1'),
|
||||||
|
22 => __('Offline + 2'),
|
||||||
|
23 => __('Offline + 3'),
|
||||||
|
24 => __('Offline + 4'),
|
||||||
|
25 => __('Offline + 9'),
|
||||||
|
30 => 'LINE Pay',
|
||||||
|
31 => __('JKO Pay'),
|
||||||
|
32 => __('Easy Wallet'),
|
||||||
|
33 => 'Pi Pay',
|
||||||
|
34 => 'PlusPay',
|
||||||
|
40 => __('Member Verify Pickup'),
|
||||||
|
41 => __('Staff Card'),
|
||||||
|
50 => __('Offline + LINE Pay'),
|
||||||
|
51 => __('Offline + JKO Pay'),
|
||||||
|
52 => __('Offline + Easy Wallet'),
|
||||||
|
53 => __('Offline + Pi Pay'),
|
||||||
|
54 => __('Offline + PlusPay'),
|
||||||
|
60 => __('Points/Voucher'),
|
||||||
|
61 => __('Member + 1'),
|
||||||
|
62 => __('Member + 2'),
|
||||||
|
63 => __('Member + 3'),
|
||||||
|
64 => __('Member + 4'),
|
||||||
|
65 => __('Member + 5'),
|
||||||
|
66 => __('Member + 6'),
|
||||||
|
67 => __('Member + 7'),
|
||||||
|
68 => __('Member + 8'),
|
||||||
|
69 => __('Member + 9'),
|
||||||
|
90 => __('Member + LINE Pay'),
|
||||||
|
91 => __('Member + JKO Pay'),
|
||||||
|
92 => __('Member + Easy Wallet'),
|
||||||
|
93 => __('Member + Pi Pay'),
|
||||||
|
94 => __('Member + PlusPay'),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取得目前的支付類型標籤 (Accessor)
|
||||||
|
*/
|
||||||
|
public function getPaymentTypeLabelAttribute(): string
|
||||||
|
{
|
||||||
|
return self::getPaymentTypeLabels()[$this->payment_type] ?? __('Unknown');
|
||||||
|
}
|
||||||
|
|
||||||
public function machine()
|
public function machine()
|
||||||
{
|
{
|
||||||
return $this->belongsTo(Machine::class);
|
return $this->belongsTo(Machine::class);
|
||||||
|
|||||||
@ -4,11 +4,10 @@ namespace App\Models\Transaction;
|
|||||||
|
|
||||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||||
use Illuminate\Database\Eloquent\Model;
|
use Illuminate\Database\Eloquent\Model;
|
||||||
use Illuminate\Database\Eloquent\SoftDeletes;
|
|
||||||
|
|
||||||
class PaymentType extends Model
|
class PaymentType extends Model
|
||||||
{
|
{
|
||||||
use HasFactory, SoftDeletes;
|
use HasFactory;
|
||||||
|
|
||||||
protected $fillable = [
|
protected $fillable = [
|
||||||
'name',
|
'name',
|
||||||
|
|||||||
@ -44,7 +44,7 @@ class TransactionService
|
|||||||
'change_amount' => $data['change_amount'] ?? 0,
|
'change_amount' => $data['change_amount'] ?? 0,
|
||||||
'points_used' => $data['points_used'] ?? 0,
|
'points_used' => $data['points_used'] ?? 0,
|
||||||
'original_amount' => $data['original_amount'] ?? $data['total_amount'],
|
'original_amount' => $data['original_amount'] ?? $data['total_amount'],
|
||||||
'payment_type' => $data['payment_type'] ?? 0,
|
'payment_type' => (int)($data['payment_type'] ?? 0),
|
||||||
'payment_status' => $data['payment_status'] ?? 1,
|
'payment_status' => $data['payment_status'] ?? 1,
|
||||||
'payment_request' => $data['payment_request'] ?? null,
|
'payment_request' => $data['payment_request'] ?? null,
|
||||||
'payment_response' => $data['payment_response'] ?? null,
|
'payment_response' => $data['payment_response'] ?? null,
|
||||||
@ -181,6 +181,11 @@ class TransactionService
|
|||||||
// 1. Process Order (B600)
|
// 1. Process Order (B600)
|
||||||
$orderData = $data['order'];
|
$orderData = $data['order'];
|
||||||
$orderData['serial_no'] = $serialNo;
|
$orderData['serial_no'] = $serialNo;
|
||||||
|
|
||||||
|
// 確保提取 payment_type (可能在 root 或 order 內)
|
||||||
|
if (!isset($orderData['payment_type']) && isset($data['payment_type'])) {
|
||||||
|
$orderData['payment_type'] = $data['payment_type'];
|
||||||
|
}
|
||||||
$order = $this->processTransaction($orderData);
|
$order = $this->processTransaction($orderData);
|
||||||
|
|
||||||
// 2. Record Invoice (B601) - Optional
|
// 2. Record Invoice (B601) - Optional
|
||||||
|
|||||||
@ -253,7 +253,7 @@ return [
|
|||||||
],
|
],
|
||||||
'data' => [
|
'data' => [
|
||||||
'type' => 'array',
|
'type' => 'array',
|
||||||
'description' => '商品明細物件陣列',
|
'description' => '商品明細物件陣列。欄位包含：t060v00(ID), t060v01(名稱), t060v03(規格), t060v06(圖片), t060v09(售價), t060v11(預設上限), spring_limit(彈簧上限), track_limit(履帶上限)',
|
||||||
'example' => [
|
'example' => [
|
||||||
[
|
[
|
||||||
't060v00' => '1',
|
't060v00' => '1',
|
||||||
@ -267,7 +267,7 @@ return [
|
|||||||
't060v30' => 20.0,
|
't060v30' => 20.0,
|
||||||
't063v03' => 25.0,
|
't063v03' => 25.0,
|
||||||
't060v40' => 'Buy 1 Get 1',
|
't060v40' => 'Buy 1 Get 1',
|
||||||
't060v41' => 'SKU-001',
|
't060v41' => 'SKU-COKE-001',
|
||||||
'spring_limit' => 10,
|
'spring_limit' => 10,
|
||||||
'track_limit' => 15
|
'track_limit' => 15
|
||||||
]
|
]
|
||||||
@ -275,6 +275,28 @@ return [
|
|||||||
]
|
]
|
||||||
],
|
],
|
||||||
'request' => [],
|
'request' => [],
|
||||||
|
'response' => [
|
||||||
|
'success' => true,
|
||||||
|
'code' => 200,
|
||||||
|
'data' => [
|
||||||
|
[
|
||||||
|
't060v00' => '1',
|
||||||
|
't060v01' => '可口可樂 330ml',
|
||||||
|
't060v01_en' => 'Coca Cola 330ml',
|
||||||
|
't060v01_jp' => 'コカコーラ 330ml',
|
||||||
|
't060v03' => '經典原味，冰涼好滋味',
|
||||||
|
't060v06' => 'https://cloud.star.com/storage/products/coke.png',
|
||||||
|
't060v09' => 25.0,
|
||||||
|
't060v11' => 10,
|
||||||
|
't060v30' => 20.0,
|
||||||
|
't063v03' => 25.0,
|
||||||
|
't060v40' => '買一送一活動中',
|
||||||
|
't060v41' => 'SKU-COKE-001',
|
||||||
|
'spring_limit' => 10,
|
||||||
|
'track_limit' => 15
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'name' => 'B650: 會員身分驗證 (Member Verification)',
|
'name' => 'B650: 會員身分驗證 (Member Verification)',
|
||||||
@ -510,7 +532,7 @@ return [
|
|||||||
'order.original_amount' => ['type' => 'numeric', 'description' => '(選填) 原始標價金額', 'required' => false],
|
'order.original_amount' => ['type' => 'numeric', 'description' => '(選填) 原始標價金額', 'required' => false],
|
||||||
'order.discount_amount' => ['type' => 'numeric', 'description' => '(選填) 折扣金額，預設 0', 'required' => false],
|
'order.discount_amount' => ['type' => 'numeric', 'description' => '(選填) 折扣金額，預設 0', 'required' => false],
|
||||||
'order.points_used' => ['type' => 'integer', 'description' => '(選填) 使用點數，預設 0', 'required' => false],
|
'order.points_used' => ['type' => 'integer', 'description' => '(選填) 使用點數，預設 0', 'required' => false],
|
||||||
'order.payment_type' => ['type' => 'integer', 'description' => "(必填) 支付類型代碼：\n1:信用卡, 2:悠遊卡/一卡通, 3:掃碼支付, 4:紙鈔機, 5:通關密碼, 6:取貨碼, 7:來店禮, 8:問卷, 9:零錢。\n21~25:線下付款+X (21:線下+1, 22:線下+2, 23:線下+3, 24:線下+4, 25:線下+9)。\n30:TapPay-Line, 31:TapPay-街口, 32:TapPay-悠遊付, 33:TapPay-Pi, 34:TapPay-全盈+。\n40:會員驗證取貨商品。\n50~54:線下付款+TapPay (50:線下+30, 51:線下+31, 52:線下+32, 53:線下+33, 54:線下+34)。\n60:點數/優惠卷全額折抵。61~69:會員+X (61:會員+1...69:會員+9)。\n90~94:會員+TapPay (90:會員+30...94:會員+34)。"],
|
'order.payment_type' => ['type' => 'integer', 'description' => "(必填) 支付類型代碼：\n1:信用卡, 2:悠遊卡/一卡通, 3:掃碼支付, 4:紙鈔機, 5:通行碼, 6:取貨碼, 7:來店禮, 8:問卷, 9:零錢, 41:員工卡。\n21~25:線下付款+X (21:線下+1, 22:線下+2, 23:線下+3, 24:線下+4, 25:線下+9)。\n30:LINE Pay, 31:街口, 32:悠遊付, 33:Pi, 34:全盈+。\n40:會員驗證取貨商品。\n50~54:線下付款+TapPay (50:線下+30, 51:線下+31, 52:線下+32, 53:線下+33, 54:線下+34)。\n60:點數/優惠卷全額折抵。61~69:會員+X (61:會員+1...69:會員+9)。\n90~94:會員+TapPay (90:會員+30...94:會員+34)。"],
|
||||||
'order.payment_status' => ['type' => 'integer', 'description' => '(必填) 支付狀態 (1:成功)'],
|
'order.payment_status' => ['type' => 'integer', 'description' => '(必填) 支付狀態 (1:成功)'],
|
||||||
'order.payment_request' => ['type' => 'string', 'description' => '(選填) 金流請求原始字串', 'required' => false],
|
'order.payment_request' => ['type' => 'string', 'description' => '(選填) 金流請求原始字串', 'required' => false],
|
||||||
'order.payment_response' => ['type' => 'string', 'description' => '(選填) 金流回應原始字串', 'required' => false],
|
'order.payment_response' => ['type' => 'string', 'description' => '(選填) 金流回應原始字串', 'required' => false],
|
||||||
|
|||||||
@ -0,0 +1,35 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Database\Migrations\Migration;
|
||||||
|
use Illuminate\Database\Schema\Blueprint;
|
||||||
|
use Illuminate\Support\Facades\Schema;
|
||||||
|
|
||||||
|
return new class extends Migration
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Run the migrations.
|
||||||
|
*/
|
||||||
|
public function up(): void
|
||||||
|
{
|
||||||
|
Schema::create('staff_cards', function (Blueprint $table) {
|
||||||
|
$table->id();
|
||||||
|
$table->unsignedBigInteger('company_id')->index()->comment('租戶ID');
|
||||||
|
$table->string('employee_id')->index()->comment('員工編號');
|
||||||
|
$table->string('name')->comment('員工姓名');
|
||||||
|
$table->string('card_uid')->index()->comment('IC卡物理卡號');
|
||||||
|
$table->string('status')->default('active')->comment('狀態: active/inactive');
|
||||||
|
$table->text('notes')->nullable()->comment('備註');
|
||||||
|
$table->timestamp('last_used_at')->nullable()->comment('最後使用時間');
|
||||||
|
$table->unsignedBigInteger('last_machine_id')->nullable()->comment('最後使用機台');
|
||||||
|
$table->timestamps();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reverse the migrations.
|
||||||
|
*/
|
||||||
|
public function down(): void
|
||||||
|
{
|
||||||
|
Schema::dropIfExists('staff_cards');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<?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('staff_card_logs', function (Blueprint $table) {
|
||||||
|
$table->id();
|
||||||
|
$table->unsignedBigInteger('staff_card_id')->index()->comment('員工卡片ID');
|
||||||
|
$table->unsignedBigInteger('machine_id')->index()->nullable()->comment('機台ID');
|
||||||
|
$table->string('action_type')->default('swipe')->comment('動作類型');
|
||||||
|
$table->json('raw_data')->nullable()->comment('原始API資料');
|
||||||
|
$table->timestamp('created_at')->useCurrent()->comment('發生時間');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reverse the migrations.
|
||||||
|
*/
|
||||||
|
public function down(): void
|
||||||
|
{
|
||||||
|
Schema::dropIfExists('staff_card_logs');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -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('staff_cards', function (Blueprint $table) {
|
||||||
|
$table->unsignedBigInteger('company_id')->nullable()->change();
|
||||||
|
});
|
||||||
|
|
||||||
|
Schema::table('staff_card_logs', function (Blueprint $table) {
|
||||||
|
$table->unsignedBigInteger('company_id')->nullable()->index()->after('id')->comment('租戶ID');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reverse the migrations.
|
||||||
|
*/
|
||||||
|
public function down(): void
|
||||||
|
{
|
||||||
|
Schema::table('staff_card_logs', function (Blueprint $table) {
|
||||||
|
$table->dropColumn('company_id');
|
||||||
|
});
|
||||||
|
|
||||||
|
Schema::table('staff_cards', function (Blueprint $table) {
|
||||||
|
$table->unsignedBigInteger('company_id')->nullable(false)->change();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
28
database/seeders/PaymentTypeSeeder.php
Normal file
28
database/seeders/PaymentTypeSeeder.php
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Database\Seeders;
|
||||||
|
|
||||||
|
use Illuminate\Database\Seeder;
|
||||||
|
use App\Models\Transaction\PaymentType;
|
||||||
|
use App\Models\Transaction\Order;
|
||||||
|
|
||||||
|
class PaymentTypeSeeder extends Seeder
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Run the database seeds.
|
||||||
|
*/
|
||||||
|
public function run(): void
|
||||||
|
{
|
||||||
|
$types = Order::getPaymentTypeLabels();
|
||||||
|
|
||||||
|
foreach ($types as $code => $name) {
|
||||||
|
PaymentType::updateOrCreate(
|
||||||
|
['code' => $code],
|
||||||
|
[
|
||||||
|
'name' => $name,
|
||||||
|
'is_active' => true,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -171,6 +171,30 @@
|
|||||||
"Back to History": "返回紀錄",
|
"Back to History": "返回紀錄",
|
||||||
"Back to List": "返回列表",
|
"Back to List": "返回列表",
|
||||||
"Badge Settings": "識別證",
|
"Badge Settings": "識別證",
|
||||||
|
"Staff Identification Management": "員工識別管理",
|
||||||
|
"Staff List": "員工列表",
|
||||||
|
"Usage Logs": "使用日誌",
|
||||||
|
"Employee ID": "員工編號",
|
||||||
|
"IC Card UID": "IC 卡號",
|
||||||
|
"Last Used": "最後使用",
|
||||||
|
"Manage employee IC cards and track usage logs.": "管理員工 IC 卡並追蹤使用日誌。",
|
||||||
|
"Search by ID or Name...": "搜尋員工編號或姓名...",
|
||||||
|
"Search by ID, Name or UID...": "搜尋員工編號、姓名或卡號...",
|
||||||
|
"No staff cards found": "找不到員工識別卡",
|
||||||
|
"No usage logs found": "找不到使用日誌",
|
||||||
|
"Time": "時間",
|
||||||
|
"Employee": "員工",
|
||||||
|
"Action": "操作",
|
||||||
|
"Machine": "機台",
|
||||||
|
"Add Staff Card": "新增員工識別卡",
|
||||||
|
"Edit Staff Card": "編輯員工識別卡",
|
||||||
|
"Staff Name": "員工姓名",
|
||||||
|
"Never Used": "從未使用",
|
||||||
|
"No staff cards found.": "找不到員工識別卡。",
|
||||||
|
"No usage logs found.": "找不到使用日誌。",
|
||||||
|
"Staff card created successfully": "員工識別卡建立成功",
|
||||||
|
"Staff card updated successfully": "員工識別卡更新成功",
|
||||||
|
"Staff card deleted successfully": "員工識別卡刪除成功",
|
||||||
"Barcode": "條碼",
|
"Barcode": "條碼",
|
||||||
"Barcode / Material": "條碼 / 物料編碼",
|
"Barcode / Material": "條碼 / 物料編碼",
|
||||||
"Basic Information": "基本資訊",
|
"Basic Information": "基本資訊",
|
||||||
@ -1821,5 +1845,24 @@
|
|||||||
"visit_gift": "來店禮",
|
"visit_gift": "來店禮",
|
||||||
"vs Yesterday": "較昨日",
|
"vs Yesterday": "較昨日",
|
||||||
"warehouses": "倉庫管理",
|
"warehouses": "倉庫管理",
|
||||||
"待填寫": "待填寫"
|
"待填寫": "待填寫",
|
||||||
}
|
"Manage employee IC cards and track usage logs.": "管理員工 IC 卡並追蹤使用日誌。",
|
||||||
|
"Search by ID or Name": "搜尋員工編號或姓名",
|
||||||
|
"Search by ID, Name or UID": "搜尋員工編號、姓名或卡號",
|
||||||
|
"Search by ID or Name...": "搜尋員工編號或姓名...",
|
||||||
|
"Search by ID, Name or UID...": "搜尋員工編號、姓名或卡號...",
|
||||||
|
"No staff cards found": "找不到員工識別卡",
|
||||||
|
"No usage logs found": "找不到使用日誌",
|
||||||
|
"Affiliated Company": "所屬公司",
|
||||||
|
"All Companies": "所有公司",
|
||||||
|
"Select Company": "選擇公司",
|
||||||
|
"Unknown Machine": "未知機台",
|
||||||
|
"Time": "時間",
|
||||||
|
"Employee": "員工",
|
||||||
|
"Action": "操作",
|
||||||
|
"Unknown": "未知",
|
||||||
|
"e.g., S001": "例：S001",
|
||||||
|
"e.g., John Doe": "例：王小明",
|
||||||
|
"e.g., 12345678": "例：12345678",
|
||||||
|
"Optional notes...": "備註內容（選填）..."
|
||||||
|
}
|
||||||
|
|||||||
@ -348,6 +348,8 @@
|
|||||||
},
|
},
|
||||||
init() {
|
init() {
|
||||||
// 觸發頂部進度條
|
// 觸發頂部進度條
|
||||||
|
// Sync top loading bar (Removed for tab/pagination to reduce visual noise as requested)
|
||||||
|
/*
|
||||||
this.$watch('tabLoading', (val) => {
|
this.$watch('tabLoading', (val) => {
|
||||||
const bar = document.getElementById('top-loading-bar');
|
const bar = document.getElementById('top-loading-bar');
|
||||||
if (bar) {
|
if (bar) {
|
||||||
@ -355,6 +357,7 @@
|
|||||||
else bar.classList.remove('loading');
|
else bar.classList.remove('loading');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
// 首次載入時綁定每個 Tab 的分頁連結
|
// 首次載入時綁定每個 Tab 的分頁連結
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
['machines', 'models', 'permissions', 'system_settings'].forEach(t => {
|
['machines', 'models', 'permissions', 'system_settings'].forEach(t => {
|
||||||
|
|||||||
424
resources/views/admin/data-config/staff-cards/index.blade.php
Normal file
424
resources/views/admin/data-config/staff-cards/index.blade.php
Normal file
@ -0,0 +1,424 @@
|
|||||||
|
@extends('layouts.admin')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<div class="space-y-2 pb-20" x-data="staffCardManager" data-cards="{{ json_encode($cards->items()) }}"
|
||||||
|
data-logs="{{ json_encode($logs->items()) }}" data-index-url="{{ route('admin.data-config.staff-cards.index') }}">
|
||||||
|
|
||||||
|
{{-- Page Header --}}
|
||||||
|
<x-page-header :title="__('Staff Identification Management')"
|
||||||
|
:subtitle="__('Manage employee IC cards and track usage logs.')">
|
||||||
|
<template x-if="activeTab === 'staff_list'">
|
||||||
|
<button @click="openStaffModal()" type="button"
|
||||||
|
class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm sm:text-base">{{ __('Add Staff Card') }}</span>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</x-page-header>
|
||||||
|
|
||||||
|
{{-- Tab Navigation --}}
|
||||||
|
<x-tab-nav>
|
||||||
|
<x-tab-nav-item value="staff_list" :label="__('Staff List')" />
|
||||||
|
<x-tab-nav-item value="usage_logs" :label="__('Usage Logs')" />
|
||||||
|
</x-tab-nav>
|
||||||
|
|
||||||
|
{{-- Tab Contents --}}
|
||||||
|
|
||||||
|
{{-- Staff List Tab --}}
|
||||||
|
<div x-show="activeTab === 'staff_list'"
|
||||||
|
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 --}}
|
||||||
|
<x-luxury-spinner show="tabLoading === 'staff_list'" z-index="z-20">
|
||||||
|
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||||
|
</svg>
|
||||||
|
</x-luxury-spinner>
|
||||||
|
|
||||||
|
<div id="tab-staff_list-container" class="relative">
|
||||||
|
@include('admin.data-config.staff-cards.partials.tab-staff-list')
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Usage Logs Tab --}}
|
||||||
|
<div x-show="activeTab === 'usage_logs'"
|
||||||
|
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 --}}
|
||||||
|
<x-luxury-spinner show="tabLoading === 'usage_logs'" z-index="z-20">
|
||||||
|
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</x-luxury-spinner>
|
||||||
|
|
||||||
|
<div id="tab-usage_logs-container" class="relative">
|
||||||
|
@include('admin.data-config.staff-cards.partials.tab-usage-logs')
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Modals & Slide-overs --}}
|
||||||
|
<!-- Add/Edit Staff Modal -->
|
||||||
|
<div x-show="isStaffModalOpen" 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">
|
||||||
|
<div x-show="isStaffModalOpen" x-transition:enter="ease-out duration-300"
|
||||||
|
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||||
|
class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm"
|
||||||
|
@click="isStaffModalOpen = false"></div>
|
||||||
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
|
||||||
|
<div x-show="isStaffModalOpen" x-transition:enter="ease-out duration-300"
|
||||||
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||||
|
class="inline-block w-full max-w-lg p-8 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-900 shadow-2xl rounded-3xl border border-slate-100 dark:border-white/10">
|
||||||
|
<div class="flex justify-between items-center mb-8">
|
||||||
|
<h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight"
|
||||||
|
x-text="staffModalMode === 'create' ? '{{ __('Add Staff Card') }}' : '{{ __('Edit Staff Card') }}'">
|
||||||
|
</h3>
|
||||||
|
<button @click="isStaffModalOpen = false"
|
||||||
|
class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form @submit.prevent="submitStaffForm" class="space-y-6">
|
||||||
|
<div class="space-y-5 px-1">
|
||||||
|
@if(auth()->user()->isSystemAdmin())
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
|
{{ __('Affiliated Company') }} <span class="text-rose-500">*</span>
|
||||||
|
</label>
|
||||||
|
<x-searchable-select name="company_id" id="modal-company-id" :options="$companies"
|
||||||
|
:placeholder="__('Select Company')"
|
||||||
|
@change="staffFormFields.company_id = $event.target.value" required />
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
|
{{ __('Employee ID') }} <span class="text-rose-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="text" x-model="staffFormFields.employee_id"
|
||||||
|
class="luxury-input w-full focus:ring-emerald-500/20 focus:border-emerald-500"
|
||||||
|
placeholder="{{ __('e.g., S001') }}" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
|
{{ __('Staff Name') }} <span class="text-rose-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="text" x-model="staffFormFields.name" class="luxury-input w-full"
|
||||||
|
placeholder="{{ __('e.g., John Doe') }}" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
|
{{ __('IC Card UID') }} <span class="text-rose-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="text" x-model="staffFormFields.card_uid" class="luxury-input w-full"
|
||||||
|
placeholder="{{ __('e.g., 12345678') }}" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
|
{{ __('Notes') }}
|
||||||
|
</label>
|
||||||
|
<textarea x-model="staffFormFields.notes" class="luxury-input w-full h-24 resize-none"
|
||||||
|
placeholder="{{ __('Optional notes...') }}"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
|
{{ __('Status') }}
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center gap-6 p-1">
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<input type="radio" x-model="staffFormFields.status" value="active"
|
||||||
|
class="w-4 h-4 text-emerald-600 bg-slate-100 border-slate-300 focus:ring-emerald-500 focus:ring-2 dark:bg-slate-800 dark:border-slate-700">
|
||||||
|
<span
|
||||||
|
class="text-sm font-bold text-slate-600 dark:text-slate-400 group-hover:text-emerald-500 transition-colors">{{
|
||||||
|
__('Active') }}</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<input type="radio" x-model="staffFormFields.status" value="inactive"
|
||||||
|
class="w-4 h-4 text-rose-600 bg-slate-100 border-slate-300 focus:ring-rose-500 focus:ring-2 dark:bg-slate-800 dark:border-slate-700">
|
||||||
|
<span
|
||||||
|
class="text-sm font-bold text-slate-600 dark:text-slate-400 group-hover:text-rose-500 transition-colors">{{
|
||||||
|
__('Disabled') }}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-end gap-4 mt-12 pt-6 border-t border-slate-100 dark:border-white/5">
|
||||||
|
<button type="button" @click="isStaffModalOpen = false"
|
||||||
|
class="px-6 py-2.5 text-sm font-black text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 uppercase tracking-widest transition-all">
|
||||||
|
{{ __('Cancel') }}
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn-luxury-primary px-10 py-3 shadow-lg"
|
||||||
|
:class="staffModalMode === 'create' ? 'bg-emerald-600 hover:bg-emerald-700 shadow-emerald-500/20' : 'bg-cyan-600 hover:bg-cyan-700 shadow-cyan-500/20'">
|
||||||
|
<span
|
||||||
|
x-text="staffModalMode === 'create' ? '{{ __('Create') }}' : '{{ __('Save Changes') }}'"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Delete Confirm Modal --}}
|
||||||
|
<x-delete-confirm-modal :title="__('Confirm Deletion')"
|
||||||
|
:message="__('Are you sure you want to delete this staff card? This action cannot be undone.')" />
|
||||||
|
|
||||||
|
{{-- Status Toggle Modal --}}
|
||||||
|
<x-status-confirm-modal :title="__('Confirm Status Change')"
|
||||||
|
:message="__('Are you sure you want to change the status of this card? Disabled cards cannot be used for login.')" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@section('scripts')
|
||||||
|
<script>
|
||||||
|
document.addEventListener('alpine:init', () => {
|
||||||
|
Alpine.data('staffCardManager', () => ({
|
||||||
|
activeTab: '{{ $tab }}',
|
||||||
|
tabLoading: null,
|
||||||
|
loading: false,
|
||||||
|
isStaffModalOpen: false,
|
||||||
|
isDeleteConfirmOpen: false,
|
||||||
|
isStatusConfirmOpen: false,
|
||||||
|
staffModalMode: 'create',
|
||||||
|
staffFormFields: { id: null, company_id: '', employee_id: '', name: '', card_uid: '', status: 'active', notes: '' },
|
||||||
|
deleteFormAction: '',
|
||||||
|
toggleFormAction: '',
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.bindPaginationLinks('#tab-staff_list-container', 'staff_list');
|
||||||
|
this.bindPaginationLinks('#tab-usage_logs-container', 'usage_logs');
|
||||||
|
|
||||||
|
this.$watch('activeTab', (val) => {
|
||||||
|
const url = new URL(window.location.origin + window.location.pathname);
|
||||||
|
url.searchParams.set('tab', val);
|
||||||
|
window.history.pushState({}, '', url);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$watch('loading', (val) => {
|
||||||
|
const bar = document.getElementById('top-loading-bar');
|
||||||
|
if (bar) {
|
||||||
|
if (val) bar.classList.add('loading');
|
||||||
|
else bar.classList.remove('loading');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async fetchTabData(tab, url = null) {
|
||||||
|
this.tabLoading = tab;
|
||||||
|
const container = document.getElementById('tab-' + tab + '-container');
|
||||||
|
|
||||||
|
if (!url) {
|
||||||
|
const form = container?.querySelector('form');
|
||||||
|
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 {
|
||||||
|
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;
|
||||||
|
if (window.Alpine) window.Alpine.initTree(container);
|
||||||
|
this.bindPaginationLinks('#tab-' + tab + '-container', tab);
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
bindPaginationLinks(containerSelector, tab) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const container = document.querySelector(containerSelector);
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
|
||||||
|
window.HSStaticMethods.autoInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove old listener if exists to prevent duplicates
|
||||||
|
if (container._ajaxNavigateHandler) {
|
||||||
|
container.removeEventListener('ajax:navigate', container._ajaxNavigateHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new handler
|
||||||
|
container._ajaxNavigateHandler = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const url = e.detail.url;
|
||||||
|
if (url) {
|
||||||
|
this.fetchTabData(tab, url);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Listen for the custom event emitted by luxury pagination
|
||||||
|
container.addEventListener('ajax:navigate', container._ajaxNavigateHandler);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleFilterSubmit(tab) {
|
||||||
|
this.fetchTabData(tab);
|
||||||
|
},
|
||||||
|
|
||||||
|
openStaffModal(card = null) {
|
||||||
|
if (card) {
|
||||||
|
this.staffModalMode = 'edit';
|
||||||
|
this.staffFormFields = {
|
||||||
|
id: card.id,
|
||||||
|
company_id: card.company_id || '',
|
||||||
|
employee_id: card.employee_id,
|
||||||
|
name: card.name,
|
||||||
|
card_uid: card.card_uid,
|
||||||
|
status: card.status || 'active',
|
||||||
|
notes: card.notes
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.staffModalMode = 'create';
|
||||||
|
this.staffFormFields = {
|
||||||
|
id: null,
|
||||||
|
company_id: '{{ auth()->user()->company_id ?? "" }}',
|
||||||
|
employee_id: '',
|
||||||
|
name: '',
|
||||||
|
card_uid: '',
|
||||||
|
status: 'active',
|
||||||
|
notes: ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
this.isStaffModalOpen = true;
|
||||||
|
|
||||||
|
// Re-init Preline select or set value after modal opens
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const select = HSSelect.getInstance('#modal-company-id', true);
|
||||||
|
if (select) {
|
||||||
|
select.setValue(this.staffFormFields.company_id || ' ');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitStaffForm() {
|
||||||
|
const url = this.staffModalMode === 'create'
|
||||||
|
? `{{ route('admin.data-config.staff-cards.store') }}`
|
||||||
|
: `{{ url('admin/data-config/staff-cards') }}/${this.staffFormFields.id}`;
|
||||||
|
|
||||||
|
const method = this.staffModalMode === 'create' ? 'POST' : 'PUT';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-Requested-With': 'XMLHttpRequest'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ ...this.staffFormFields, _method: method })
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
if (data.success) {
|
||||||
|
this.isStaffModalOpen = false;
|
||||||
|
await this.fetchTabData('staff_list');
|
||||||
|
if (window.showToast) window.showToast(data.message, 'success');
|
||||||
|
} else {
|
||||||
|
if (window.showToast) window.showToast(data.message || 'Error', 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Submit error:', error);
|
||||||
|
if (window.showToast) window.showToast('{{ __("Operation failed") }}', 'error');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmDelete(actionUrl) {
|
||||||
|
this.deleteFormAction = actionUrl;
|
||||||
|
this.isDeleteConfirmOpen = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteItem() {
|
||||||
|
// This is called by the modal form if we want to use AJAX
|
||||||
|
// But the component has a standard form submit.
|
||||||
|
// We'll intercept it if we want, or just let it reload.
|
||||||
|
// Given the products example, they use fetch in submitConfirmedForm.
|
||||||
|
// Wait, delete-confirm-modal in components uses a FORM.
|
||||||
|
// I'll just let it submit and reload for now, or update it to AJAX.
|
||||||
|
},
|
||||||
|
|
||||||
|
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',
|
||||||
|
'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');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Status toggle error:', error);
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endsection
|
||||||
@ -0,0 +1,285 @@
|
|||||||
|
<div class="relative">
|
||||||
|
<!-- Toolbar & Filters -->
|
||||||
|
<div class="flex items-center justify-between mb-8">
|
||||||
|
<div class="flex items-center gap-6 w-full">
|
||||||
|
<form @submit.prevent="handleFilterSubmit('staff_list')" id="staff-list-filter-form"
|
||||||
|
class="flex flex-wrap items-center gap-4 w-full">
|
||||||
|
|
||||||
|
<!-- Search Group -->
|
||||||
|
<div class="relative group w-full sm:w-72">
|
||||||
|
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
||||||
|
<svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
|
||||||
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||||
|
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 by ID, Name or UID...') }}"
|
||||||
|
class="luxury-input py-2.5 pl-11 pr-4 block w-full text-sm font-bold">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if(auth()->user()->isSystemAdmin())
|
||||||
|
<div class="relative w-full sm:w-64 flex-none">
|
||||||
|
<x-searchable-select
|
||||||
|
name="company_id"
|
||||||
|
:options="$companies"
|
||||||
|
:selected="request('company_id')"
|
||||||
|
:placeholder="__('All Companies')"
|
||||||
|
@change="handleFilterSubmit('staff_list')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 ml-auto sm:ml-0">
|
||||||
|
<button type="submit"
|
||||||
|
class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
|
||||||
|
title="{{ __('Search') }}">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button type="button" @click="fetchTabData('staff_list', '{{ route('admin.data-config.staff-cards.index', ['tab' => 'staff_list']) }}')"
|
||||||
|
class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95 border border-slate-200 dark:border-slate-700"
|
||||||
|
title="{{ __('Reset') }}">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="hidden" name="tab" value="staff_list">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Data Table --}}
|
||||||
|
<div class="hidden xl:block 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">
|
||||||
|
{{ __('Employee ID') }}
|
||||||
|
</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">
|
||||||
|
{{ __('Staff 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">
|
||||||
|
{{ __('IC Card UID') }}
|
||||||
|
</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">
|
||||||
|
{{ __('Last Used') }}
|
||||||
|
</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($cards as $card)
|
||||||
|
<tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<span class="font-black text-slate-900 dark:text-white font-mono tracking-wider">{{ $card->employee_id }}</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">{{ $card->name }}</span>
|
||||||
|
@if($card->notes)
|
||||||
|
<span class="text-xs font-bold text-slate-400 truncate max-w-[200px] mt-0.5">{{ $card->notes }}</span>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<code class="px-2.5 py-1 bg-slate-100 dark:bg-white/5 rounded-lg text-slate-600 dark:text-slate-400 text-xs font-black font-mono tracking-widest">{{ $card->card_uid }}</code>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6 text-center">
|
||||||
|
<x-status-badge :status="$card->status" size="sm" />
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
@if($card->last_used_at)
|
||||||
|
<span class="text-xs font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest">{{ $card->last_used_at->format('Y-m-d H:i') }}</span>
|
||||||
|
@if($card->lastMachine)
|
||||||
|
<div class="flex items-center gap-1.5 text-xs font-bold text-slate-400">
|
||||||
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||||
|
</svg>
|
||||||
|
<span class="truncate max-w-[120px]">{{ $card->lastMachine->name }}</span>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
@else
|
||||||
|
<span class="text-xs font-bold text-slate-300 italic">{{ __('Never Used') }}</span>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6 text-right">
|
||||||
|
<div class="flex justify-end items-center gap-2">
|
||||||
|
@if($card->status === 'active')
|
||||||
|
<button type="button"
|
||||||
|
@click="toggleStatus('{{ route('admin.data-config.staff-cards.status.toggle', $card) }}')"
|
||||||
|
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="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<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('admin.data-config.staff-cards.status.toggle', $card) }}')"
|
||||||
|
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="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<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
|
||||||
|
<button type="button" @click="openStaffModal({{ json_encode($card) }})"
|
||||||
|
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="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>
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
@click="confirmDelete('{{ route('admin.data-config.staff-cards.destroy', $card) }}')"
|
||||||
|
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 duration-200 border border-transparent hover:border-rose-500/20"
|
||||||
|
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 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
|
||||||
|
<x-empty-state mode="table" :colspan="6" :message="__('No staff cards found')" />
|
||||||
|
@endforelse
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Card View -->
|
||||||
|
<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
@forelse($cards as $card)
|
||||||
|
<div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
|
||||||
|
<!-- Card Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4 mb-6">
|
||||||
|
<div class="flex items-center gap-4 min-w-0">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 shadow-sm shrink-0">
|
||||||
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="min-w-0">
|
||||||
|
<h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate tracking-tight">
|
||||||
|
{{ $card->name }}
|
||||||
|
</h3>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">
|
||||||
|
{{ $card->employee_id }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<x-status-badge :status="$card->status" size="sm" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Info Grid -->
|
||||||
|
<div class="grid grid-cols-1 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
|
||||||
|
{{ __('IC Card UID') }}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm font-mono font-bold text-slate-700 dark:text-slate-300 truncate">
|
||||||
|
{{ $card->card_uid }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
@if($card->notes)
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
|
||||||
|
{{ __('Notes') }}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm font-bold text-slate-500 dark:text-slate-400">
|
||||||
|
{{ $card->notes }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
|
||||||
|
{{ __('Last Used') }}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm font-bold text-slate-600 dark:text-slate-300">
|
||||||
|
@if($card->last_used_at)
|
||||||
|
{{ $card->last_used_at->format('Y-m-d H:i') }}
|
||||||
|
@if($card->lastMachine)
|
||||||
|
<span class="text-xs text-slate-400 ml-1">({{ $card->lastMachine->name }})</span>
|
||||||
|
@endif
|
||||||
|
@else
|
||||||
|
<span class="text-slate-300 italic">{{ __('Never Used') }}</span>
|
||||||
|
@endif
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Buttons -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
@if($card->status === 'active')
|
||||||
|
<button type="button"
|
||||||
|
@click="toggleStatus('{{ route('admin.data-config.staff-cards.status.toggle', $card) }}')"
|
||||||
|
class="p-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:bg-amber-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
|
||||||
|
title="{{ __('Disable') }}">
|
||||||
|
<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="M15.75 5.25v13.5m-7.5-13.5v13.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
@else
|
||||||
|
<button type="button"
|
||||||
|
@click="toggleStatus('{{ route('admin.data-config.staff-cards.status.toggle', $card) }}')"
|
||||||
|
class="p-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:bg-emerald-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
|
||||||
|
title="{{ __('Enable') }}">
|
||||||
|
<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="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
|
||||||
|
<button type="button" @click="openStaffModal({{ json_encode($card) }})"
|
||||||
|
class="p-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
|
||||||
|
title="{{ __('Edit') }}">
|
||||||
|
<svg class="w-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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" @click="confirmDelete('{{ route('admin.data-config.staff-cards.destroy', $card) }}')"
|
||||||
|
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:bg-rose-500 hover:text-white font-bold text-xs transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
|
||||||
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 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>
|
||||||
|
{{ __('Delete') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@empty
|
||||||
|
<x-empty-state :message="__('No staff cards found')" />
|
||||||
|
@endforelse
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Pagination --}}
|
||||||
|
<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
|
||||||
|
{{ $cards->appends(request()->query())->links('vendor.pagination.luxury', [
|
||||||
|
'per_page_param' => 'staff_per_page',
|
||||||
|
'page_param' => 'staff_page',
|
||||||
|
]) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
<div class="relative">
|
||||||
|
<!-- Toolbar & Filters -->
|
||||||
|
<div class="flex items-center justify-between mb-8">
|
||||||
|
<div class="flex items-center gap-6 w-full">
|
||||||
|
<form @submit.prevent="handleFilterSubmit('usage_logs')" id="usage-logs-filter-form"
|
||||||
|
class="flex flex-wrap items-center gap-4 w-full">
|
||||||
|
|
||||||
|
<!-- Search Group -->
|
||||||
|
<div class="relative group w-full sm:w-72">
|
||||||
|
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
||||||
|
<svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
|
||||||
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||||
|
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="log_search" value="{{ request('log_search') }}"
|
||||||
|
placeholder="{{ __('Search by ID, Name or UID...') }}"
|
||||||
|
class="luxury-input py-2.5 pl-11 pr-4 block w-full text-sm font-bold">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if(auth()->user()->isSystemAdmin())
|
||||||
|
<div class="relative w-full sm:w-64 flex-none">
|
||||||
|
<x-searchable-select
|
||||||
|
name="log_company_id"
|
||||||
|
:options="$companies"
|
||||||
|
:selected="request('log_company_id')"
|
||||||
|
:placeholder="__('All Companies')"
|
||||||
|
@change="handleFilterSubmit('usage_logs')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 ml-auto sm:ml-0">
|
||||||
|
<button type="submit"
|
||||||
|
class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
|
||||||
|
title="{{ __('Search') }}">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button type="button" @click="fetchTabData('usage_logs', '{{ route('admin.data-config.staff-cards.index', ['tab' => 'usage_logs']) }}')"
|
||||||
|
class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95 border border-slate-200 dark:border-slate-700"
|
||||||
|
title="{{ __('Reset') }}">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="hidden" name="tab" value="usage_logs">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Data Table --}}
|
||||||
|
<div class="hidden xl:block 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">
|
||||||
|
{{ __('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">
|
||||||
|
{{ __('Employee') }}
|
||||||
|
</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">
|
||||||
|
{{ __('IC Card UID') }}
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||||
|
{{ __('Machine') }}
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||||
|
{{ __('Action') }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
||||||
|
@forelse($logs as $log)
|
||||||
|
<tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<span class="text-xs font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest">{{ $log->created_at->format('Y-m-d H:i:s') }}</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">{{ $log->staffCard?->name ?? __('Unknown') }}</span>
|
||||||
|
<span class="text-xs font-bold text-slate-400 font-mono tracking-tight mt-0.5">{{ $log->staffCard?->employee_id ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<code class="px-2.5 py-1 bg-slate-100 dark:bg-white/5 rounded-lg text-slate-600 dark:text-slate-400 text-xs font-black font-mono tracking-widest">{{ $log->staffCard?->card_uid ?? '-' }}</code>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">{{ $log->machine?->name ?? __('Unknown Machine') }}</span>
|
||||||
|
<span class="text-xs font-bold text-slate-400 font-mono tracking-tighter">{{ $log->machine?->serial_no ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-6">
|
||||||
|
<x-status-badge :status="$log->action_type" size="sm" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@empty
|
||||||
|
<x-empty-state mode="table" :colspan="5" :message="__('No usage logs found')" />
|
||||||
|
@endforelse
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Card View -->
|
||||||
|
<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
@forelse($logs as $log)
|
||||||
|
<div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
|
||||||
|
<!-- Card Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4 mb-6">
|
||||||
|
<div class="flex items-center gap-4 min-w-0">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 shadow-sm shrink-0">
|
||||||
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="min-w-0">
|
||||||
|
<h3 class="text-xs font-black text-slate-600 dark:text-slate-300 font-mono tracking-widest truncate">
|
||||||
|
{{ $log->created_at->format('Y-m-d H:i:s') }}
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm font-extrabold text-slate-800 dark:text-slate-100 truncate tracking-tight">
|
||||||
|
{{ $log->staffCard?->name ?? __('Unknown') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<x-status-badge :status="$log->action_type" size="sm" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Info Grid -->
|
||||||
|
<div class="grid grid-cols-1 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
|
||||||
|
{{ __('Machine') }}
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-bold text-slate-700 dark:text-slate-300">
|
||||||
|
{{ $log->machine?->name ?? __('Unknown Machine') }}
|
||||||
|
</span>
|
||||||
|
<span class="text-xs font-mono font-bold text-slate-400">({{ $log->machine?->serial_no ?? '-' }})</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
|
||||||
|
{{ __('IC Card UID') }}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm font-mono font-bold text-slate-700 dark:text-slate-300 truncate">
|
||||||
|
{{ $log->staffCard?->card_uid ?? '-' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@empty
|
||||||
|
<x-empty-state :message="__('No usage logs found')" />
|
||||||
|
@endforelse
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Pagination --}}
|
||||||
|
<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
|
||||||
|
{{ $logs->appends(request()->query())->links('vendor.pagination.luxury', [
|
||||||
|
'per_page_param' => 'usage_per_page',
|
||||||
|
'page_param' => 'usage_page',
|
||||||
|
]) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -5,31 +5,28 @@ $routeName = request()->route()->getName();
|
|||||||
$baseRoute = 'admin.data-config.products';
|
$baseRoute = 'admin.data-config.products';
|
||||||
|
|
||||||
$roleSelectConfig = [
|
$roleSelectConfig = [
|
||||||
"placeholder" => __('Select Category'),
|
"placeholder" => __('Select Category'),
|
||||||
"hasSearch" => true,
|
"hasSearch" => true,
|
||||||
"searchPlaceholder" => __('Search Category...'),
|
"searchPlaceholder" => __('Search Category...'),
|
||||||
"toggleClasses" => "hs-select-toggle luxury-select-toggle",
|
"toggleClasses" => "hs-select-toggle luxury-select-toggle",
|
||||||
"dropdownClasses" => "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-2xl mt-2 z-[100]",
|
"dropdownClasses" => "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10
|
||||||
"optionClasses" => "hs-select-option py-2.5 px-3 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-between",
|
rounded-xl shadow-2xl mt-2 z-[100]",
|
||||||
|
"optionClasses" => "hs-select-option py-2.5 px-3 text-sm text-slate-800 dark:text-slate-300 cursor-pointer
|
||||||
|
hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-between",
|
||||||
];
|
];
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="space-y-2 pb-20"
|
<div class="space-y-2 pb-20" x-data="productManager" data-categories="{{ json_encode($categories->items()) }}"
|
||||||
x-data="productManager"
|
data-settings="{{ json_encode($companySettings) }}" data-errors="{{ json_encode($errors->any()) }}"
|
||||||
data-categories="{{ json_encode($categories->items()) }}"
|
data-store-url="{{ route($baseRoute . '.store') }}" data-index-url="{{ route($baseRoute . '.index') }}">
|
||||||
data-settings="{{ json_encode($companySettings) }}"
|
|
||||||
data-errors="{{ json_encode($errors->any()) }}"
|
|
||||||
data-store-url="{{ route($baseRoute . '.store') }}"
|
|
||||||
data-index-url="{{ route($baseRoute . '.index') }}">
|
|
||||||
|
|
||||||
{{-- Page Header --}}
|
{{-- Page Header --}}
|
||||||
<x-page-header
|
<x-page-header :title="__('Product Management')"
|
||||||
:title="__('Product Management')"
|
:subtitle="__('Manage your catalog, prices, and multilingual details.')">
|
||||||
:subtitle="__('Manage your catalog, prices, and multilingual details.')"
|
|
||||||
>
|
|
||||||
<template x-if="activeTab === 'products'">
|
<template x-if="activeTab === 'products'">
|
||||||
<a href="{{ route($baseRoute . '.create') }}" class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
|
<a href="{{ route($baseRoute . '.create') }}"
|
||||||
|
class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
<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" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||||
</svg>
|
</svg>
|
||||||
@ -37,7 +34,8 @@ $roleSelectConfig = [
|
|||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="activeTab === 'categories'">
|
<template x-if="activeTab === 'categories'">
|
||||||
<button @click="openCategoryModal()" type="button" class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
|
<button @click="openCategoryModal()" type="button"
|
||||||
|
class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
<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" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||||
</svg>
|
</svg>
|
||||||
@ -48,24 +46,22 @@ $roleSelectConfig = [
|
|||||||
|
|
||||||
{{-- Tab Navigation --}}
|
{{-- Tab Navigation --}}
|
||||||
<x-tab-nav>
|
<x-tab-nav>
|
||||||
<x-tab-nav-item value="products" :label="__('Product List')" />
|
<x-tab-nav-item value="products" :label="__('Product List')" />
|
||||||
<x-tab-nav-item value="categories" :label="__('Category Management')" />
|
<x-tab-nav-item value="categories" :label="__('Category Management')" />
|
||||||
</x-tab-nav>
|
</x-tab-nav>
|
||||||
|
|
||||||
{{-- Tab Contents --}}
|
{{-- Tab Contents --}}
|
||||||
|
|
||||||
{{-- Products Tab --}}
|
{{-- Products Tab --}}
|
||||||
<div x-show="activeTab === 'products'"
|
<div x-show="activeTab === 'products'" class="luxury-card rounded-3xl p-6 animate-luxury-in relative min-h-[300px]"
|
||||||
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="transition ease-out duration-300"
|
x-transition:enter-end="opacity-100 translate-y-0" x-cloak>
|
||||||
x-transition:enter-start="opacity-0 translate-y-4"
|
|
||||||
x-transition:enter-end="opacity-100 translate-y-0"
|
|
||||||
x-cloak>
|
|
||||||
|
|
||||||
{{-- Loading Overlay (Products) --}}
|
{{-- Loading Overlay (Products) --}}
|
||||||
<x-luxury-spinner show="tabLoading === 'products'" z-index="z-20">
|
<x-luxury-spinner show="tabLoading === 'products'" z-index="z-20">
|
||||||
<svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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" />
|
<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>
|
</svg>
|
||||||
</x-luxury-spinner>
|
</x-luxury-spinner>
|
||||||
|
|
||||||
@ -76,16 +72,15 @@ $roleSelectConfig = [
|
|||||||
|
|
||||||
{{-- Categories Tab --}}
|
{{-- Categories Tab --}}
|
||||||
<div x-show="activeTab === 'categories'"
|
<div x-show="activeTab === 'categories'"
|
||||||
class="luxury-card rounded-3xl p-6 animate-luxury-in relative min-h-[300px]"
|
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="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4"
|
||||||
x-transition:enter-start="opacity-0 translate-y-4"
|
x-transition:enter-end="opacity-100 translate-y-0" x-cloak>
|
||||||
x-transition:enter-end="opacity-100 translate-y-0"
|
|
||||||
x-cloak>
|
|
||||||
|
|
||||||
{{-- Loading Overlay (Categories) --}}
|
{{-- Loading Overlay (Categories) --}}
|
||||||
<x-luxury-spinner show="tabLoading === 'categories'" z-index="z-20">
|
<x-luxury-spinner show="tabLoading === 'categories'" z-index="z-20">
|
||||||
<svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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" />
|
<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>
|
</svg>
|
||||||
</x-luxury-spinner>
|
</x-luxury-spinner>
|
||||||
|
|
||||||
@ -97,15 +92,32 @@ $roleSelectConfig = [
|
|||||||
<!-- Category Modal -->
|
<!-- Category Modal -->
|
||||||
<div x-show="isCategoryModalOpen" class="fixed inset-0 z-[110] overflow-y-auto" x-cloak>
|
<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">
|
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||||
<div x-show="isCategoryModalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="isCategoryModalOpen = false"></div>
|
<div x-show="isCategoryModalOpen" x-transition:enter="ease-out duration-300"
|
||||||
|
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||||
|
x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100"
|
||||||
|
x-transition:leave-end="opacity-0"
|
||||||
|
class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm"
|
||||||
|
@click="isCategoryModalOpen = false"></div>
|
||||||
|
|
||||||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
|
||||||
|
|
||||||
<div x-show="isCategoryModalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block w-full max-w-lg p-8 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-900 shadow-2xl rounded-3xl border border-slate-100 dark:border-white/10">
|
<div x-show="isCategoryModalOpen" x-transition:enter="ease-out duration-300"
|
||||||
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||||
|
x-transition:leave="ease-in duration-200"
|
||||||
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
||||||
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
|
class="inline-block w-full max-w-lg p-8 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-900 shadow-2xl rounded-3xl border border-slate-100 dark:border-white/10">
|
||||||
<div class="flex justify-between items-center mb-8">
|
<div class="flex justify-between items-center mb-8">
|
||||||
<h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight" x-text="categoryModalMode === 'create' ? '{{ __('Add Category') }}' : '{{ __('Edit Category') }}'"></h3>
|
<h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight"
|
||||||
<button @click="isCategoryModalOpen = false" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
x-text="categoryModalMode === 'create' ? '{{ __('Add Category') }}' : '{{ __('Edit Category') }}'">
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
</h3>
|
||||||
|
<button @click="isCategoryModalOpen = false"
|
||||||
|
class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -118,15 +130,18 @@ $roleSelectConfig = [
|
|||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<!-- 1. Company Selection (If Admin) -->
|
<!-- 1. Company Selection (If Admin) -->
|
||||||
@if(auth()->user()->isSystemAdmin())
|
@if(auth()->user()->isSystemAdmin())
|
||||||
<div class="p-6 bg-slate-50 dark:bg-slate-800/30 rounded-3xl border border-slate-100 dark:border-white/5 space-y-3">
|
<div
|
||||||
<label class="block text-sm font-black text-slate-700 dark:text-slate-200 px-1">{{ __('Affiliated Company') }}</label>
|
class="p-6 bg-slate-50 dark:bg-slate-800/30 rounded-3xl border border-slate-100 dark:border-white/5 space-y-3">
|
||||||
|
<label class="block text-sm font-black text-slate-700 dark:text-slate-200 px-1">{{
|
||||||
|
__('Affiliated Company') }}</label>
|
||||||
|
|
||||||
<!-- Searchable Select Wrapper -->
|
<!-- Searchable Select Wrapper -->
|
||||||
<div id="category_company_select_wrapper" class="relative">
|
<div id="category_company_select_wrapper" class="relative">
|
||||||
<!-- Will be hydrated by JS -->
|
<!-- Will be hydrated by JS -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-1">{{ __('Type to search or leave blank for system defaults.') }}</p>
|
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-1">{{ __('Type
|
||||||
|
to search or leave blank for system defaults.') }}</p>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@ -134,39 +149,47 @@ $roleSelectConfig = [
|
|||||||
<div class="space-y-5 px-1">
|
<div class="space-y-5 px-1">
|
||||||
<!-- zh_TW -->
|
<!-- zh_TW -->
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
{{ __('Category Name (zh_TW)') }} <span class="text-rose-500">*</span>
|
{{ __('Category Name (zh_TW)') }} <span class="text-rose-500">*</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="names[zh_TW]" x-model="categoryFormFields.names.zh_TW" class="luxury-input w-full focus:ring-emerald-500/20 focus:border-emerald-500" placeholder="{{ __('e.g., Beverage') }}" required>
|
<input type="text" name="names[zh_TW]" x-model="categoryFormFields.names.zh_TW"
|
||||||
|
class="luxury-input w-full focus:ring-emerald-500/20 focus:border-emerald-500"
|
||||||
|
placeholder="{{ __('e.g., Beverage') }}" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- en -->
|
<!-- en -->
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
{{ __('Category Name (en)') }}
|
{{ __('Category Name (en)') }}
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="names[en]" x-model="categoryFormFields.names.en" class="luxury-input w-full" placeholder="{{ __('e.g., Drinks') }}">
|
<input type="text" name="names[en]" x-model="categoryFormFields.names.en"
|
||||||
|
class="luxury-input w-full" placeholder="{{ __('e.g., Drinks') }}">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ja -->
|
<!-- ja -->
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
<label
|
||||||
|
class="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||||||
{{ __('Category Name (ja)') }}
|
{{ __('Category Name (ja)') }}
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="names[ja]" x-model="categoryFormFields.names.ja" class="luxury-input w-full" placeholder="{{ __('e.g., お飲み物') }}">
|
<input type="text" name="names[ja]" x-model="categoryFormFields.names.ja"
|
||||||
|
class="luxury-input w-full" placeholder="{{ __('e.g., お飲み物') }}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center justify-end gap-4 mt-12 pt-6 border-t border-slate-100 dark:border-white/5">
|
<div
|
||||||
<button type="button" @click="isCategoryModalOpen = false"
|
class="flex items-center justify-end gap-4 mt-12 pt-6 border-t border-slate-100 dark:border-white/5">
|
||||||
|
<button type="button" @click="isCategoryModalOpen = false"
|
||||||
class="px-6 py-2.5 text-sm font-black text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 uppercase tracking-widest transition-all">
|
class="px-6 py-2.5 text-sm font-black text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 uppercase tracking-widest transition-all">
|
||||||
{{ __('Cancel') }}
|
{{ __('Cancel') }}
|
||||||
</button>
|
</button>
|
||||||
<button type="submit"
|
<button type="submit" class="btn-luxury-primary px-10 py-3 shadow-lg"
|
||||||
class="btn-luxury-primary px-10 py-3 shadow-lg"
|
|
||||||
:class="categoryModalMode === 'create' ? 'bg-emerald-600 hover:bg-emerald-700 shadow-emerald-500/20' : 'bg-cyan-600 hover:bg-cyan-700 shadow-cyan-500/20'">
|
:class="categoryModalMode === 'create' ? 'bg-emerald-600 hover:bg-emerald-700 shadow-emerald-500/20' : 'bg-cyan-600 hover:bg-cyan-700 shadow-cyan-500/20'">
|
||||||
<span x-text="categoryModalMode === 'create' ? '{{ __('Create') }}' : '{{ __('Save Changes') }}'"></span>
|
<span
|
||||||
|
x-text="categoryModalMode === 'create' ? '{{ __('Create') }}' : '{{ __('Save Changes') }}'"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@ -175,39 +198,34 @@ $roleSelectConfig = [
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Product Detail Slide-over -->
|
<!-- Product Detail Slide-over -->
|
||||||
<div x-show="isDetailOpen"
|
<div x-show="isDetailOpen" class="fixed inset-0 z-[100] overflow-hidden" x-cloak role="dialog" aria-modal="true">
|
||||||
class="fixed inset-0 z-[100] overflow-hidden"
|
|
||||||
x-cloak
|
|
||||||
role="dialog" aria-modal="true">
|
|
||||||
|
|
||||||
<!-- Backdrop -->
|
<!-- Backdrop -->
|
||||||
<div x-show="isDetailOpen"
|
<div x-show="isDetailOpen" x-transition:enter="ease-in-out duration-500" x-transition:enter-start="opacity-0"
|
||||||
x-transition:enter="ease-in-out duration-500"
|
x-transition:enter-end="opacity-100" x-transition:leave="ease-in-out duration-500"
|
||||||
x-transition:enter-start="opacity-0"
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
|
||||||
x-transition:enter-end="opacity-100"
|
class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" @click="isDetailOpen = false">
|
||||||
x-transition:leave="ease-in-out duration-500"
|
</div>
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
|
|
||||||
@click="isDetailOpen = false"></div>
|
|
||||||
|
|
||||||
<div class="fixed inset-y-0 right-0 max-w-full flex">
|
<div class="fixed inset-y-0 right-0 max-w-full flex">
|
||||||
<!-- Panel -->
|
<!-- Panel -->
|
||||||
<div x-show="isDetailOpen"
|
<div x-show="isDetailOpen"
|
||||||
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
|
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||||
x-transition:enter-start="translate-x-full"
|
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
|
||||||
x-transition:enter-end="translate-x-0"
|
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
|
||||||
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
|
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
|
||||||
x-transition:leave-start="translate-x-0"
|
class="relative w-screen max-w-md" @click.stop>
|
||||||
x-transition:leave-end="translate-x-full"
|
|
||||||
class="relative w-screen max-w-md"
|
<div
|
||||||
@click.stop>
|
class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-200 dark:border-white/10 overflow-y-auto luxury-scrollbar">
|
||||||
|
<div
|
||||||
<div class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-200 dark:border-white/10 overflow-y-auto luxury-scrollbar">
|
class="px-6 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between sticky top-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-20">
|
||||||
<div class="px-6 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between sticky top-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-20">
|
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-xl font-black text-slate-800 dark:text-white">{{ __('Product Details') }}</h2>
|
<h2 class="text-xl font-black text-slate-800 dark:text-white">{{ __('Product Details') }}
|
||||||
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1" x-text="(selectedProduct?.localized_name || selectedProduct?.name) + ' (' + getCategoryName(selectedProduct?.category_id) + ')'"></p>
|
</h2>
|
||||||
|
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1"
|
||||||
|
x-text="(selectedProduct?.localized_name || selectedProduct?.name) + ' (' + getCategoryName(selectedProduct?.category_id) + ')'">
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button @click="isDetailOpen = false"
|
<button @click="isDetailOpen = false"
|
||||||
class="p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
|
class="p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
|
||||||
@ -221,112 +239,172 @@ $roleSelectConfig = [
|
|||||||
<div class="flex-1 overflow-y-auto px-6 py-8 space-y-8 custom-scrollbar">
|
<div class="flex-1 overflow-y-auto px-6 py-8 space-y-8 custom-scrollbar">
|
||||||
<!-- Header Status Info (Minimized) -->
|
<!-- Header Status Info (Minimized) -->
|
||||||
<div class="flex items-center gap-3 animate-luxury-in">
|
<div class="flex items-center gap-3 animate-luxury-in">
|
||||||
<span class="px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest border transition-all duration-300"
|
<span
|
||||||
:class="selectedProduct?.is_active ? 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20 shadow-sm shadow-emerald-500/10' : 'bg-slate-500/10 text-slate-500 border-slate-500/20'">
|
class="px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest border transition-all duration-300"
|
||||||
<span x-text="selectedProduct?.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
|
:class="selectedProduct?.is_active ? 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20 shadow-sm shadow-emerald-500/10' : 'bg-slate-500/10 text-slate-500 border-slate-500/20'">
|
||||||
|
<span
|
||||||
|
x-text="selectedProduct?.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
|
||||||
</span>
|
</span>
|
||||||
<span class="text-xs font-bold text-slate-400 dark:text-slate-300" x-text="'ID: #' + (selectedProduct?.id || '-')"></span>
|
<span class="text-xs font-bold text-slate-400 dark:text-slate-300"
|
||||||
|
x-text="'ID: #' + (selectedProduct?.id || '-')"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-8">
|
<div class="space-y-8">
|
||||||
<!-- Image Section (Square) -->
|
<!-- Image Section (Square) -->
|
||||||
<template x-if="selectedProduct?.image_url">
|
<template x-if="selectedProduct?.image_url">
|
||||||
<section class="animate-luxury-in">
|
<section class="animate-luxury-in">
|
||||||
<h3 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.3em] mb-4">{{ __('Product Image') }}</h3>
|
<h3 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.3em] mb-4">
|
||||||
<div @click="isImageZoomed = true"
|
{{ __('Product Image') }}</h3>
|
||||||
class="max-w-xs mx-auto aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 overflow-hidden border border-slate-100 dark:border-white/5 shadow-lg group relative cursor-zoom-in">
|
<div @click="isImageZoomed = true"
|
||||||
<img :src="selectedProduct.image_url" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
|
class="max-w-xs mx-auto aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 overflow-hidden border border-slate-100 dark:border-white/5 shadow-lg group relative cursor-zoom-in">
|
||||||
<div class="absolute inset-0 bg-slate-950/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
<img :src="selectedProduct.image_url"
|
||||||
<div class="p-3 rounded-full bg-white/20 backdrop-blur-md text-white border border-white/30 scale-50 group-hover:scale-100 transition-all duration-500 shadow-2xl">
|
class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
|
||||||
<svg class="w-6 h-6 shadow-glow" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" /></svg>
|
<div
|
||||||
|
class="absolute inset-0 bg-slate-950/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
class="p-3 rounded-full bg-white/20 backdrop-blur-md text-white border border-white/30 scale-50 group-hover:scale-100 transition-all duration-500 shadow-2xl">
|
||||||
|
<svg class="w-6 h-6 shadow-glow" fill="none" stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" />
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<section class="space-y-4 animate-luxury-in" style="animation-delay: 100ms">
|
<section class="space-y-4 animate-luxury-in" style="animation-delay: 100ms">
|
||||||
<h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Identity & Codes') }}</h3>
|
<h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Identity
|
||||||
|
& Codes') }}</h3>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
<div
|
||||||
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Barcode') }}</span>
|
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
||||||
<div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.barcode || '-'"></div>
|
<span
|
||||||
|
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
|
||||||
|
__('Barcode') }}</span>
|
||||||
|
<div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200"
|
||||||
|
x-text="selectedProduct?.barcode || '-'"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
<div
|
||||||
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Specification') }}</span>
|
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
||||||
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.spec || '-'"></div>
|
<span
|
||||||
|
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
|
||||||
|
__('Specification') }}</span>
|
||||||
|
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200"
|
||||||
|
x-text="selectedProduct?.spec || '-'"></div>
|
||||||
</div>
|
</div>
|
||||||
<template x-if="selectedProduct?.metadata?.material_code">
|
<template x-if="selectedProduct?.metadata?.material_code">
|
||||||
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
<div
|
||||||
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Material Code') }}</span>
|
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
||||||
<div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.metadata?.material_code"></div>
|
<span
|
||||||
|
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
|
||||||
|
__('Material Code') }}</span>
|
||||||
|
<div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200"
|
||||||
|
x-text="selectedProduct?.metadata?.material_code"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
<div
|
||||||
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Manufacturer') }}</span>
|
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
||||||
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.manufacturer || '-'"></div>
|
<span
|
||||||
|
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
|
||||||
|
__('Manufacturer') }}</span>
|
||||||
|
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200"
|
||||||
|
x-text="selectedProduct?.manufacturer || '-'"></div>
|
||||||
</div>
|
</div>
|
||||||
<template x-if="selectedProduct?.company?.name">
|
<template x-if="selectedProduct?.company?.name">
|
||||||
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
<div
|
||||||
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Company') }}</span>
|
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
|
||||||
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.company?.name"></div>
|
<span
|
||||||
|
class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
|
||||||
|
__('Company') }}</span>
|
||||||
|
<div class="text-[15px] font-bold text-slate-700 dark:text-slate-200"
|
||||||
|
x-text="selectedProduct?.company?.name"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Pricing Section -->
|
<!-- Pricing Section -->
|
||||||
<section class="space-y-4 animate-luxury-in" style="animation-delay: 200ms">
|
<section class="space-y-4 animate-luxury-in" style="animation-delay: 200ms">
|
||||||
<h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{ __('Pricing Information') }}</h3>
|
<h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{
|
||||||
<div class="luxury-card divide-y divide-slate-50 dark:divide-white/5 overflow-hidden border border-slate-100 dark:border-white/5 shadow-sm">
|
__('Pricing Information') }}</h3>
|
||||||
<div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
<div
|
||||||
|
class="luxury-card divide-y divide-slate-50 dark:divide-white/5 overflow-hidden border border-slate-100 dark:border-white/5 shadow-sm">
|
||||||
|
<div
|
||||||
|
class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
||||||
<span class="text-[15px] font-bold text-slate-500">{{ __('Sale Price') }}</span>
|
<span class="text-[15px] font-bold text-slate-500">{{ __('Sale Price') }}</span>
|
||||||
<span class="text-lg font-black text-slate-800 dark:text-white">$<span x-text="formatNumber(selectedProduct?.price)"></span></span>
|
<span class="text-lg font-black text-slate-800 dark:text-white">$<span
|
||||||
|
x-text="formatNumber(selectedProduct?.price)"></span></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
<div
|
||||||
<span class="text-[15px] font-bold text-slate-500">{{ __('Member Price') }}</span>
|
class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
||||||
<span class="text-lg font-black text-emerald-500">$<span x-text="formatNumber(selectedProduct?.member_price)"></span></span>
|
<span class="text-[15px] font-bold text-slate-500">{{ __('Member Price')
|
||||||
|
}}</span>
|
||||||
|
<span class="text-lg font-black text-emerald-500">$<span
|
||||||
|
x-text="formatNumber(selectedProduct?.member_price)"></span></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
<div
|
||||||
|
class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
|
||||||
<span class="text-[15px] font-bold text-slate-400">{{ __('Cost') }}</span>
|
<span class="text-[15px] font-bold text-slate-400">{{ __('Cost') }}</span>
|
||||||
<span class="text-sm font-bold text-slate-500 tracking-tight">$<span x-text="formatNumber(selectedProduct?.cost)"></span></span>
|
<span class="text-sm font-bold text-slate-500 tracking-tight">$<span
|
||||||
|
x-text="formatNumber(selectedProduct?.cost)"></span></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Storage & Limits -->
|
<!-- Storage & Limits -->
|
||||||
<section class="space-y-4 animate-luxury-in" style="animation-delay: 300ms">
|
<section class="space-y-4 animate-luxury-in" style="animation-delay: 300ms">
|
||||||
<h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Channel Limits Configuration') }}</h3>
|
<h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Channel
|
||||||
<div class="luxury-card p-6 border border-slate-100 dark:border-white/5 space-y-6 shadow-sm">
|
Limits Configuration') }}</h3>
|
||||||
|
<div
|
||||||
|
class="luxury-card p-6 border border-slate-100 dark:border-white/5 space-y-6 shadow-sm">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<div class="space-y-1">
|
<div class="space-y-1">
|
||||||
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Track Limit') }}</p>
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{
|
||||||
<p class="text-3xl font-black text-indigo-500 tracking-tighter" x-text="selectedProduct?.track_limit || '0'"></p>
|
__('Track Limit') }}</p>
|
||||||
|
<p class="text-3xl font-black text-indigo-500 tracking-tighter"
|
||||||
|
x-text="selectedProduct?.track_limit || '0'"></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-10 w-px bg-slate-100 dark:bg-white/10"></div>
|
<div class="h-10 w-px bg-slate-100 dark:bg-white/10"></div>
|
||||||
<div class="space-y-1 text-right">
|
<div class="space-y-1 text-right">
|
||||||
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Spring Limit') }}</p>
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{
|
||||||
<p class="text-3xl font-black text-amber-500 tracking-tighter" x-text="selectedProduct?.spring_limit || '0'"></p>
|
__('Spring Limit') }}</p>
|
||||||
|
<p class="text-3xl font-black text-amber-500 tracking-tighter"
|
||||||
|
x-text="selectedProduct?.spring_limit || '0'"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Loyalty Points -->
|
<!-- Loyalty Points -->
|
||||||
<section class="space-y-4 animate-luxury-in" style="animation-delay: 400ms">
|
<section class="space-y-4 animate-luxury-in" style="animation-delay: 400ms">
|
||||||
<h3 class="text-xs font-black text-rose-500 uppercase tracking-[0.3em]">{{ __('Loyalty & Features') }}</h3>
|
<h3 class="text-xs font-black text-rose-500 uppercase tracking-[0.3em]">{{ __('Loyalty &
|
||||||
|
Features') }}</h3>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||||
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
<div
|
||||||
<span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Full Points') }}</span>
|
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
||||||
<div class="text-lg font-black text-rose-500 font-mono" x-text="selectedProduct?.metadata?.points_full || '0'"></div>
|
<span
|
||||||
|
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{
|
||||||
|
__('Full Points') }}</span>
|
||||||
|
<div class="text-lg font-black text-rose-500 font-mono"
|
||||||
|
x-text="selectedProduct?.metadata?.points_full || '0'"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
<div
|
||||||
<span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points') }}</span>
|
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
||||||
<div class="text-lg font-black text-indigo-500 font-mono" x-text="selectedProduct?.metadata?.points_half || '0'"></div>
|
<span
|
||||||
|
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{
|
||||||
|
__('Half Points') }}</span>
|
||||||
|
<div class="text-lg font-black text-indigo-500 font-mono"
|
||||||
|
x-text="selectedProduct?.metadata?.points_half || '0'"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
<div
|
||||||
<span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points Amount') }}</span>
|
class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
|
||||||
<div class="text-lg font-black text-emerald-500 font-mono" x-text="selectedProduct?.metadata?.points_half_amount || '0'"></div>
|
<span
|
||||||
|
class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{
|
||||||
|
__('Half Points Amount') }}</span>
|
||||||
|
<div class="text-lg font-black text-emerald-500 font-mono"
|
||||||
|
x-text="selectedProduct?.metadata?.points_half_amount || '0'"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -335,22 +413,20 @@ $roleSelectConfig = [
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
|
<div
|
||||||
<button @click="isDetailOpen = false" class="w-full btn-luxury-ghost">{{ __('Close Panel') }}</button>
|
class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
|
||||||
|
<button @click="isDetailOpen = false" class="w-full btn-luxury-ghost">{{ __('Close Panel')
|
||||||
|
}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modals -->
|
<!-- Modals -->
|
||||||
<x-delete-confirm-modal
|
<x-delete-confirm-modal :title="__('Confirm Deletion')"
|
||||||
:title="__('Confirm Deletion')"
|
:message="__('Are you sure you want to delete this product or category? This action cannot be undone.')" />
|
||||||
: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.')" />
|
||||||
<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">
|
<form x-ref="statusToggleForm" :action="toggleFormAction" method="POST" class="hidden">
|
||||||
@csrf
|
@csrf
|
||||||
@ -358,25 +434,26 @@ $roleSelectConfig = [
|
|||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!-- Image Zoom Modal -->
|
<!-- Image Zoom Modal -->
|
||||||
<div x-show="isImageZoomed"
|
<div x-show="isImageZoomed" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
|
||||||
x-transition:enter="ease-out duration-300"
|
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
|
||||||
x-transition:enter-start="opacity-0"
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
|
||||||
x-transition:enter-end="opacity-100"
|
class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl"
|
||||||
x-transition:leave="ease-in duration-200"
|
@keydown.escape.window="isImageZoomed = false" x-cloak>
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
<button @click="isImageZoomed = false"
|
||||||
class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl"
|
class="absolute top-6 right-6 p-3 rounded-full bg-white/10 text-white hover:bg-white/20 transition-all border border-white/10 active:scale-95">
|
||||||
@keydown.escape.window="isImageZoomed = false"
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
x-cloak>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
<button @click="isImageZoomed = false" class="absolute top-6 right-6 p-3 rounded-full bg-white/10 text-white hover:bg-white/20 transition-all border border-white/10 active:scale-95">
|
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="relative max-w-5xl w-full aspect-square md:aspect-auto md:max-h-[90vh] flex items-center justify-center" @click.away="isImageZoomed = false">
|
<div class="relative max-w-5xl w-full aspect-square md:aspect-auto md:max-h-[90vh] flex items-center justify-center"
|
||||||
<img :src="selectedProduct?.image_url" class="max-w-full max-h-full rounded-[2.5rem] shadow-2xl border border-white/10 animate-luxury-in">
|
@click.away="isImageZoomed = false">
|
||||||
|
<img :src="selectedProduct?.image_url"
|
||||||
<div class="absolute bottom-[-4rem] left-1/2 -translate-x-1/2 text-white/60 text-sm font-bold tracking-widest uppercase animate-luxury-in" style="animation-delay: 200ms">
|
class="max-w-full max-h-full rounded-[2.5rem] shadow-2xl border border-white/10 animate-luxury-in">
|
||||||
|
|
||||||
|
<div class="absolute bottom-[-4rem] left-1/2 -translate-x-1/2 text-white/60 text-sm font-bold tracking-widest uppercase animate-luxury-in"
|
||||||
|
style="animation-delay: 200ms">
|
||||||
<span x-text="selectedProduct?.localized_name || selectedProduct?.name"></span>
|
<span x-text="selectedProduct?.localized_name || selectedProduct?.name"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -413,7 +490,7 @@ $roleSelectConfig = [
|
|||||||
init() {
|
init() {
|
||||||
this.categories = JSON.parse(this.$el.dataset.categories || '[]');
|
this.categories = JSON.parse(this.$el.dataset.categories || '[]');
|
||||||
this.companies = @js($companies);
|
this.companies = @js($companies);
|
||||||
|
|
||||||
// Initial binding
|
// Initial binding
|
||||||
this.bindPaginationLinks('#tab-products-container', 'products');
|
this.bindPaginationLinks('#tab-products-container', 'products');
|
||||||
this.bindPaginationLinks('#tab-categories-container', 'categories');
|
this.bindPaginationLinks('#tab-categories-container', 'categories');
|
||||||
@ -427,7 +504,8 @@ $roleSelectConfig = [
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Sync top loading bar
|
// Sync top loading bar (Removed for tab/pagination to reduce visual noise as requested)
|
||||||
|
/*
|
||||||
this.$watch('tabLoading', (val) => {
|
this.$watch('tabLoading', (val) => {
|
||||||
const bar = document.getElementById('top-loading-bar');
|
const bar = document.getElementById('top-loading-bar');
|
||||||
if (bar) {
|
if (bar) {
|
||||||
@ -435,13 +513,14 @@ $roleSelectConfig = [
|
|||||||
else bar.classList.remove('loading');
|
else bar.classList.remove('loading');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
// Sync global loading to top bar as well
|
// Sync global loading to top bar as well
|
||||||
this.$watch('loading', (val) => {
|
this.$watch('loading', (val) => {
|
||||||
const bar = document.getElementById('top-loading-bar');
|
const bar = document.getElementById('top-loading-bar');
|
||||||
if (bar) {
|
if (bar) {
|
||||||
if (val) bar.classList.add('loading');
|
if (val) bar.classList.add('loading');
|
||||||
else if (!this.tabLoading) bar.classList.remove('loading');
|
else bar.classList.remove('loading');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -455,9 +534,9 @@ $roleSelectConfig = [
|
|||||||
|
|
||||||
async fetchTabData(tab, url = null) {
|
async fetchTabData(tab, url = null) {
|
||||||
this.tabLoading = tab;
|
this.tabLoading = tab;
|
||||||
|
|
||||||
const container = document.getElementById('tab-' + tab + '-container');
|
const container = document.getElementById('tab-' + tab + '-container');
|
||||||
|
|
||||||
// If no URL is provided, build one from the current tab's form
|
// If no URL is provided, build one from the current tab's form
|
||||||
if (!url) {
|
if (!url) {
|
||||||
const form = container?.querySelector('form');
|
const form = container?.querySelector('form');
|
||||||
@ -465,7 +544,7 @@ $roleSelectConfig = [
|
|||||||
let params = new URLSearchParams();
|
let params = new URLSearchParams();
|
||||||
params.set('tab', tab);
|
params.set('tab', tab);
|
||||||
params.set('_ajax', '1');
|
params.set('_ajax', '1');
|
||||||
|
|
||||||
if (form) {
|
if (form) {
|
||||||
const formData = new FormData(form);
|
const formData = new FormData(form);
|
||||||
formData.forEach((value, key) => {
|
formData.forEach((value, key) => {
|
||||||
@ -474,7 +553,7 @@ $roleSelectConfig = [
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
url = `${window.location.pathname}?${params.toString()}`;
|
url = `${window.location.pathname}?${params.toString()}`;
|
||||||
} else {
|
} else {
|
||||||
// Ensure URL has tab and _ajax params
|
// Ensure URL has tab and _ajax params
|
||||||
@ -486,26 +565,26 @@ $roleSelectConfig = [
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(url, {
|
const response = await fetch(url, {
|
||||||
headers: {
|
headers: {
|
||||||
'X-Requested-With': 'XMLHttpRequest',
|
'X-Requested-With': 'XMLHttpRequest',
|
||||||
'Accept': 'application/json'
|
'Accept': 'application/json'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
if (container) {
|
if (container) {
|
||||||
container.innerHTML = data.html;
|
container.innerHTML = data.html;
|
||||||
|
|
||||||
// Re-init Alpine components in the dynamic content
|
// Re-init Alpine components in the dynamic content
|
||||||
if (window.Alpine) {
|
if (window.Alpine) {
|
||||||
window.Alpine.initTree(container);
|
window.Alpine.initTree(container);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Re-bind pagination events
|
// Re-bind pagination events
|
||||||
this.bindPaginationLinks('#tab-' + tab + '-container', tab);
|
this.bindPaginationLinks('#tab-' + tab + '-container', tab);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update browser URL (without _ajax)
|
// Update browser URL (without _ajax)
|
||||||
const historyUrl = new URL(url, window.location.origin);
|
const historyUrl = new URL(url, window.location.origin);
|
||||||
historyUrl.searchParams.delete('_ajax');
|
historyUrl.searchParams.delete('_ajax');
|
||||||
@ -524,7 +603,7 @@ $roleSelectConfig = [
|
|||||||
const url = new URL(window.location.href);
|
const url = new URL(window.location.href);
|
||||||
const pageKey = tab === 'products' ? 'product_page' : 'category_page';
|
const pageKey = tab === 'products' ? 'product_page' : 'category_page';
|
||||||
url.searchParams.delete(pageKey);
|
url.searchParams.delete(pageKey);
|
||||||
|
|
||||||
this.fetchTabData(tab);
|
this.fetchTabData(tab);
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -555,7 +634,7 @@ $roleSelectConfig = [
|
|||||||
const originalOnchange = sel.getAttribute('onchange');
|
const originalOnchange = sel.getAttribute('onchange');
|
||||||
if (originalOnchange) {
|
if (originalOnchange) {
|
||||||
sel.removeAttribute('onchange'); // Prevent default behavior
|
sel.removeAttribute('onchange'); // Prevent default behavior
|
||||||
|
|
||||||
sel.addEventListener('change', (e) => {
|
sel.addEventListener('change', (e) => {
|
||||||
let newUrl;
|
let newUrl;
|
||||||
// Simple page jump: value is usually the URL
|
// Simple page jump: value is usually the URL
|
||||||
@ -580,13 +659,13 @@ $roleSelectConfig = [
|
|||||||
const wrapper = document.getElementById('category_company_select_wrapper');
|
const wrapper = document.getElementById('category_company_select_wrapper');
|
||||||
if (!wrapper) return;
|
if (!wrapper) return;
|
||||||
wrapper.innerHTML = '';
|
wrapper.innerHTML = '';
|
||||||
|
|
||||||
const selectEl = document.createElement('select');
|
const selectEl = document.createElement('select');
|
||||||
selectEl.name = 'company_id';
|
selectEl.name = 'company_id';
|
||||||
const uniqueId = 'cat-company-' + Date.now();
|
const uniqueId = 'cat-company-' + Date.now();
|
||||||
selectEl.id = uniqueId;
|
selectEl.id = uniqueId;
|
||||||
selectEl.className = 'hidden';
|
selectEl.className = 'hidden';
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
"placeholder": "{{ __('Select Company (Default: System)') }}",
|
"placeholder": "{{ __('Select Company (Default: System)') }}",
|
||||||
"hasSearch": true,
|
"hasSearch": true,
|
||||||
@ -599,16 +678,16 @@ $roleSelectConfig = [
|
|||||||
"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",
|
"optionClasses": "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
|
||||||
"optionTemplate": '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
|
"optionTemplate": '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
|
||||||
};
|
};
|
||||||
|
|
||||||
selectEl.setAttribute('data-hs-select', JSON.stringify(config));
|
selectEl.setAttribute('data-hs-select', JSON.stringify(config));
|
||||||
|
|
||||||
const defaultOpt = document.createElement('option');
|
const defaultOpt = document.createElement('option');
|
||||||
defaultOpt.value = "";
|
defaultOpt.value = "";
|
||||||
defaultOpt.textContent = "{{ __('System Default (Common)') }}";
|
defaultOpt.textContent = "{{ __('System Default (Common)') }}";
|
||||||
defaultOpt.setAttribute('data-title', defaultOpt.textContent);
|
defaultOpt.setAttribute('data-title', defaultOpt.textContent);
|
||||||
if (!this.categoryFormFields.company_id) defaultOpt.selected = true;
|
if (!this.categoryFormFields.company_id) defaultOpt.selected = true;
|
||||||
selectEl.appendChild(defaultOpt);
|
selectEl.appendChild(defaultOpt);
|
||||||
|
|
||||||
this.companies.forEach(company => {
|
this.companies.forEach(company => {
|
||||||
const opt = document.createElement('option');
|
const opt = document.createElement('option');
|
||||||
opt.value = company.id;
|
opt.value = company.id;
|
||||||
@ -617,20 +696,20 @@ $roleSelectConfig = [
|
|||||||
if (String(this.categoryFormFields.company_id) === String(company.id)) opt.selected = true;
|
if (String(this.categoryFormFields.company_id) === String(company.id)) opt.selected = true;
|
||||||
selectEl.appendChild(opt);
|
selectEl.appendChild(opt);
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.appendChild(selectEl);
|
wrapper.appendChild(selectEl);
|
||||||
|
|
||||||
selectEl.addEventListener('change', (e) => {
|
selectEl.addEventListener('change', (e) => {
|
||||||
this.categoryFormFields.company_id = e.target.value;
|
this.categoryFormFields.company_id = e.target.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
|
if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
|
||||||
window.HSStaticMethods.autoInit(['select']);
|
window.HSStaticMethods.autoInit(['select']);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
viewProductDetail(product) {
|
viewProductDetail(product) {
|
||||||
@ -756,4 +835,4 @@ $roleSelectConfig = [
|
|||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
@ -82,7 +82,8 @@
|
|||||||
this.bindPaginationLinks(this.$refs.listContent, 'list');
|
this.bindPaginationLinks(this.$refs.listContent, 'list');
|
||||||
});
|
});
|
||||||
|
|
||||||
// 同步頂部進度條
|
// 同步頂部進度條 (Removed for tab/pagination to reduce visual noise as requested)
|
||||||
|
/*
|
||||||
this.$watch('tabLoading', (val) => {
|
this.$watch('tabLoading', (val) => {
|
||||||
const bar = document.getElementById('top-loading-bar');
|
const bar = document.getElementById('top-loading-bar');
|
||||||
if (bar) {
|
if (bar) {
|
||||||
@ -90,6 +91,7 @@
|
|||||||
else bar.classList.remove('loading');
|
else bar.classList.remove('loading');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
if (initialMachineId) {
|
if (initialMachineId) {
|
||||||
const machine = this.machines.data.find(m => m.id == initialMachineId);
|
const machine = this.machines.data.find(m => m.id == initialMachineId);
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
{{-- 庫存操作紀錄 Partial (AJAX 可替換) --}}
|
{{-- 庫存操作紀錄 Partial (AJAX 可替換) --}}
|
||||||
<!-- Filters Area -->
|
<!-- Filters Area -->
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<form method="GET" action="{{ route('admin.remote.stock') }}" class="flex flex-wrap items-center gap-4" @submit.prevent="searchInTab()">
|
<form method="GET" action="{{ route('admin.remote.stock') }}" class="flex flex-wrap items-center gap-4"
|
||||||
|
@submit.prevent="searchInTab()">
|
||||||
<!-- Search Box -->
|
<!-- Search Box -->
|
||||||
<div class="relative group flex-[1.5] min-w-[200px]">
|
<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">
|
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
||||||
@ -17,13 +18,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Date Range -->
|
<!-- Date Range -->
|
||||||
<div class="relative group flex-[2] min-w-[340px]"
|
<div class="relative group flex-[2] min-w-[340px]" x-data="{
|
||||||
x-data="{
|
|
||||||
fp: null,
|
fp: null,
|
||||||
startDate: '{{ request('start_date') }}',
|
startDate: '{{ request('start_date') }}',
|
||||||
endDate: '{{ request('end_date') }}'
|
endDate: '{{ request('end_date') }}'
|
||||||
}"
|
}" x-init="fp = flatpickr($refs.dateRange, {
|
||||||
x-init="fp = flatpickr($refs.dateRange, {
|
|
||||||
mode: 'range',
|
mode: 'range',
|
||||||
dateFormat: 'Y-m-d H:i', enableTime: true, time_24hr: true,
|
dateFormat: 'Y-m-d H:i', enableTime: true, time_24hr: true,
|
||||||
defaultHour: 0,
|
defaultHour: 0,
|
||||||
@ -44,14 +43,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})">
|
})">
|
||||||
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 text-slate-400 group-focus-within:text-cyan-500 transition-colors">
|
<span
|
||||||
<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>
|
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>
|
</span>
|
||||||
<input type="hidden" name="start_date" x-ref="startDate" value="{{ request('start_date') }}">
|
<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="hidden" name="end_date" x-ref="endDate" value="{{ request('end_date') }}">
|
||||||
<input type="text" x-ref="dateRange"
|
<input type="text" x-ref="dateRange"
|
||||||
value="{{ request('start_date') && request('end_date') ? request('start_date') . ' 至 ' . request('end_date') : (request('start_date') ?: '') }}"
|
value="{{ request('start_date') && request('end_date') ? request('start_date') . ' 至 ' . request('end_date') : (request('start_date') ?: '') }}"
|
||||||
placeholder="{{ __('Select Date Range') }}" class="luxury-input py-2.5 pl-12 pr-6 block w-full cursor-pointer">
|
placeholder="{{ __('Select Date Range') }}"
|
||||||
|
class="luxury-input py-2.5 pl-12 pr-6 block w-full cursor-pointer">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Status -->
|
<!-- Status -->
|
||||||
@ -59,28 +63,31 @@
|
|||||||
historyStatus = $event.target.value === ' ' ? '' : $event.target.value;
|
historyStatus = $event.target.value === ' ' ? '' : $event.target.value;
|
||||||
searchInTab();
|
searchInTab();
|
||||||
">
|
">
|
||||||
<x-searchable-select
|
<x-searchable-select name="status" :options="[
|
||||||
name="status"
|
|
||||||
:options="[
|
|
||||||
'pending' => __('Pending'),
|
'pending' => __('Pending'),
|
||||||
'sent' => __('Sent'),
|
'sent' => __('Sent'),
|
||||||
'success' => __('Success'),
|
'success' => __('Success'),
|
||||||
'failed' => __('Failed'),
|
'failed' => __('Failed'),
|
||||||
'superseded' => __('Superseded'),
|
'superseded' => __('Superseded'),
|
||||||
]"
|
]" :selected="request('status')" :placeholder="__('All Status')" :hasSearch="false" />
|
||||||
:selected="request('status')"
|
|
||||||
:placeholder="__('All Status')"
|
|
||||||
:hasSearch="false"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<div class="flex items-center gap-2">
|
<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">
|
<button type="submit"
|
||||||
<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>
|
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>
|
||||||
<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">
|
<button type="button"
|
||||||
<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>
|
@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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@ -89,99 +96,126 @@
|
|||||||
<table class="hidden xl:table w-full text-left border-separate border-spacing-y-0 text-sm">
|
<table class="hidden xl:table w-full text-left border-separate border-spacing-y-0 text-sm">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
|
<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
|
||||||
<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>
|
class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center whitespace-nowrap">{{ __('Picked up Time') }}</th>
|
{{ __('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">{{ __('Command Type') }}</th>
|
<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>
|
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">
|
||||||
<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>
|
{{ __('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>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
||||||
@foreach ($history as $item)
|
@foreach ($history as $item)
|
||||||
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
|
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
|
||||||
<td class="px-6 py-6 cursor-pointer" @click="selectMachine(@js($item->machine))">
|
<td class="px-6 py-6 cursor-pointer" @click="selectMachine(@js($item->machine))">
|
||||||
<div class="flex items-center gap-4">
|
<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">
|
<div
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
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">
|
||||||
<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 class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||||
</svg>
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
</div>
|
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" />
|
||||||
<div>
|
</svg>
|
||||||
<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>
|
</div>
|
||||||
</td>
|
<div>
|
||||||
<td class="px-6 py-6 font-mono text-xs font-black text-slate-400 tracking-widest whitespace-nowrap text-center">
|
<div
|
||||||
<div class="flex flex-col">
|
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">
|
||||||
<span>{{ $item->created_at->format('Y/m/d') }}</span>
|
{{ $item->machine->name }}</div>
|
||||||
<span class="text-[15px] font-bold text-slate-500 dark:text-slate-400">{{ $item->created_at->format('H:i:s') }}</span>
|
<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>
|
</div>
|
||||||
<td class="px-6 py-6 font-mono text-xs font-black text-slate-400 tracking-widest whitespace-nowrap text-center">
|
</td>
|
||||||
@if($item->executed_at)
|
<td
|
||||||
<div class="flex flex-col text-cyan-600/80 dark:text-cyan-400/60">
|
class="px-6 py-6 font-mono text-xs font-black text-slate-400 tracking-widest whitespace-nowrap text-center">
|
||||||
<span>{{ $item->executed_at->format('Y/m/d') }}</span>
|
<div class="flex flex-col">
|
||||||
<span class="text-[15px] font-bold">{{ $item->executed_at->format('H:i:s') }}</span>
|
<span>{{ $item->created_at->format('Y/m/d') }}</span>
|
||||||
</div>
|
<span class="text-[15px] font-bold text-slate-500 dark:text-slate-400">{{
|
||||||
@else
|
$item->created_at->format('H:i:s') }}</span>
|
||||||
<span class="text-slate-300 dark:text-slate-700">-</span>
|
</div>
|
||||||
@endif
|
</td>
|
||||||
</td>
|
<td
|
||||||
<td class="px-6 py-6">
|
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 min-w-[200px]">
|
@if($item->executed_at)
|
||||||
<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 text-cyan-600/80 dark:text-cyan-400/60">
|
||||||
<div class="flex flex-col gap-0.5 mt-1">
|
<span>{{ $item->executed_at->format('Y/m/d') }}</span>
|
||||||
<span x-show="getPayloadDetails(@js($item))"
|
<span class="text-[15px] font-bold">{{ $item->executed_at->format('H:i:s') }}</span>
|
||||||
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"
|
</div>
|
||||||
:class="{'line-through opacity-60': @js($item->status) === 'failed'}"
|
@else
|
||||||
x-text="getPayloadDetails(@js($item))"></span>
|
<span class="text-slate-300 dark:text-slate-700">-</span>
|
||||||
@if($item->note)
|
@endif
|
||||||
<span class="text-[10px] text-slate-400 italic pl-1" x-text="translateNote(@js($item->note))"></span>
|
</td>
|
||||||
@endif
|
<td class="px-6 py-6">
|
||||||
</div>
|
<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"
|
||||||
|
:class="{'line-through opacity-60': @js($item->status) === 'failed'}"
|
||||||
|
x-text="getPayloadDetails(@js($item))"></span>
|
||||||
|
@if($item->note)
|
||||||
|
<span class="text-[10px] text-slate-400 italic pl-1"
|
||||||
|
x-text="translateNote(@js($item->note))"></span>
|
||||||
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
<td class="px-6 py-6 whitespace-nowrap">
|
</td>
|
||||||
<div class="flex items-center gap-2">
|
<td class="px-6 py-6 whitespace-nowrap">
|
||||||
<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">
|
<div class="flex items-center gap-2">
|
||||||
{{ mb_substr($item->user ? $item->user->name : __('System'), 0, 1) }}
|
<div
|
||||||
</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">
|
||||||
<span class="text-sm font-bold text-slate-600 dark:text-slate-300">{{ $item->user ? $item->user->name : __('System') }}</span>
|
{{ mb_substr($item->user ? $item->user->name : __('System'), 0, 1) }}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
<span class="text-sm font-bold text-slate-600 dark:text-slate-300">{{ $item->user ?
|
||||||
<td class="px-6 py-6 text-center">
|
$item->user->name : __('System') }}</span>
|
||||||
<div class="flex flex-col items-center gap-1.5">
|
</div>
|
||||||
<div class="inline-flex items-center px-4 py-1.5 rounded-full border text-[10px] font-black uppercase tracking-widest shadow-sm"
|
</td>
|
||||||
:class="getCommandBadgeClass(@js($item->status))">
|
<td class="px-6 py-6 text-center">
|
||||||
<div class="w-1.5 h-1.5 rounded-full mr-2"
|
<div class="flex flex-col items-center gap-1.5">
|
||||||
:class="{
|
<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-amber-500 animate-pulse': @js($item->status) === 'pending',
|
||||||
'bg-cyan-500': @js($item->status) === 'sent',
|
'bg-cyan-500': @js($item->status) === 'sent',
|
||||||
'bg-emerald-500': @js($item->status) === 'success',
|
'bg-emerald-500': @js($item->status) === 'success',
|
||||||
'bg-rose-500': @js($item->status) === 'failed',
|
'bg-rose-500': @js($item->status) === 'failed',
|
||||||
'bg-slate-400': @js($item->status) === 'superseded'
|
'bg-slate-400': @js($item->status) === 'superseded'
|
||||||
}"></div>
|
}"></div>
|
||||||
<span x-text="getCommandStatus(@js($item->status))"></span>
|
<span x-text="getCommandStatus(@js($item->status))"></span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</td>
|
||||||
|
</tr>
|
||||||
@endforeach
|
@endforeach
|
||||||
@if($history->isEmpty())
|
@if($history->isEmpty())
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="6" class="px-6 py-20 text-center">
|
<td colspan="6" class="px-6 py-20 text-center">
|
||||||
<div class="flex flex-col items-center gap-3">
|
<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">
|
<div
|
||||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
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">
|
||||||
<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 class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</svg>
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
</div>
|
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" />
|
||||||
<p class="text-slate-400 font-bold tracking-widest uppercase text-xs">{{ __('No records found') }}</p>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
<p class="text-slate-400 font-bold tracking-widest uppercase text-xs">{{ __('No records found')
|
||||||
</tr>
|
}}</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
@endif
|
@endif
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -191,22 +225,29 @@
|
|||||||
{{-- Mobile Card View --}}
|
{{-- Mobile Card View --}}
|
||||||
<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
@forelse ($history as $item)
|
@forelse ($history as $item)
|
||||||
<div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group"
|
<div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group"
|
||||||
@click="selectMachine(@js($item->machine))">
|
@click="selectMachine(@js($item->machine))">
|
||||||
<div class="flex items-start justify-between gap-4 mb-6">
|
<div class="flex items-start justify-between gap-4 mb-6">
|
||||||
<div class="flex items-center gap-4 min-w-0">
|
<div class="flex items-center gap-4 min-w-0">
|
||||||
<div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
|
<div
|
||||||
|
class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
|
||||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
|
<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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="min-w-0 flex-1">
|
<div class="min-w-0 flex-1">
|
||||||
<h3 class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 tracking-tight group-hover:text-cyan-600 transition-colors tracking-tight">{{ $item->machine->name }}</h3>
|
<h3
|
||||||
<p class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">{{ $item->machine->serial_no }}</p>
|
class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 tracking-tight group-hover:text-cyan-600 transition-colors tracking-tight">
|
||||||
|
{{ $item->machine->name }}</h3>
|
||||||
|
<p
|
||||||
|
class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">
|
||||||
|
{{ $item->machine->serial_no }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<div class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black border tracking-widest uppercase shadow-sm" :class="getCommandBadgeClass(@js($item->status))">
|
<div class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black border tracking-widest uppercase shadow-sm"
|
||||||
|
:class="getCommandBadgeClass(@js($item->status))">
|
||||||
<div class="w-1.5 h-1.5 rounded-full mr-1.5" :class="{
|
<div class="w-1.5 h-1.5 rounded-full mr-1.5" :class="{
|
||||||
'bg-amber-500 animate-pulse': @js($item->status) === 'pending',
|
'bg-amber-500 animate-pulse': @js($item->status) === 'pending',
|
||||||
'bg-cyan-500': @js($item->status) === 'sent',
|
'bg-cyan-500': @js($item->status) === 'sent',
|
||||||
@ -221,12 +262,14 @@
|
|||||||
|
|
||||||
<div class="grid grid-cols-1 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
|
<div class="grid grid-cols-1 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Command Type') }}</p>
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Command Type') }}
|
||||||
|
</p>
|
||||||
<div class="flex flex-col gap-1.5">
|
<div class="flex flex-col gap-1.5">
|
||||||
<span class="text-sm font-bold text-slate-700 dark:text-slate-300 tracking-tight" x-text="getCommandName(@js($item->command_type))"></span>
|
<span class="text-sm font-bold text-slate-700 dark:text-slate-300 tracking-tight"
|
||||||
|
x-text="getCommandName(@js($item->command_type))"></span>
|
||||||
<div class="flex flex-wrap gap-1">
|
<div class="flex flex-wrap gap-1">
|
||||||
<span x-show="getPayloadDetails(@js($item))"
|
<span x-show="getPayloadDetails(@js($item))"
|
||||||
class="text-[10px] font-bold text-cyan-600 dark:text-cyan-400/80 bg-cyan-500/5 px-2 py-0.5 rounded-md border border-cyan-500/10 w-fit"
|
class="text-[10px] font-bold text-cyan-600 dark:text-cyan-400/80 bg-cyan-500/5 px-2 py-0.5 rounded-md border border-cyan-500/10 w-fit"
|
||||||
:class="{'line-through opacity-60': @js($item->status) === 'failed'}"
|
:class="{'line-through opacity-60': @js($item->status) === 'failed'}"
|
||||||
x-text="getPayloadDetails(@js($item))"></span>
|
x-text="getPayloadDetails(@js($item))"></span>
|
||||||
@if($item->note)
|
@if($item->note)
|
||||||
@ -237,19 +280,25 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Creation Time') }}</p>
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Creation
|
||||||
|
Time') }}</p>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-sm font-bold text-slate-700 dark:text-slate-200">{{ $item->created_at->format('Y-m-d') }}</span>
|
<span class="text-sm font-bold text-slate-700 dark:text-slate-200">{{
|
||||||
<span class="text-[10px] font-mono text-slate-400">{{ $item->created_at->format('H:i:s') }}</span>
|
$item->created_at->format('Y-m-d') }}</span>
|
||||||
|
<span class="text-[10px] font-mono text-slate-400">{{ $item->created_at->format('H:i:s')
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Operator') }}</p>
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Operator') }}
|
||||||
|
</p>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<div class="w-5 h-5 rounded-full bg-cyan-500/10 flex items-center justify-center text-[9px] font-black text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">
|
<div
|
||||||
|
class="w-5 h-5 rounded-full bg-cyan-500/10 flex items-center justify-center text-[9px] font-black text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">
|
||||||
{{ mb_substr($item->user ? $item->user->name : __('System'), 0, 1) }}
|
{{ mb_substr($item->user ? $item->user->name : __('System'), 0, 1) }}
|
||||||
</div>
|
</div>
|
||||||
<span class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ $item->user ? $item->user->name : __('System') }}</span>
|
<span class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ $item->user ?
|
||||||
|
$item->user->name : __('System') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -257,8 +306,11 @@
|
|||||||
|
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<button type="button" @click.stop="selectMachine(@js($item->machine))"
|
<button type="button" @click.stop="selectMachine(@js($item->machine))"
|
||||||
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-[10px] sm:text-xs tracking-widest hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
|
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-[10px] sm:text-xs tracking-widest hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
|
||||||
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
|
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||||
|
</svg>
|
||||||
{{ __('Manage') }}
|
{{ __('Manage') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -266,14 +318,11 @@
|
|||||||
@empty
|
@empty
|
||||||
<x-empty-state
|
<x-empty-state
|
||||||
icon="<path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'/>"
|
icon="<path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'/>"
|
||||||
:title="__('No records found')"
|
:title="__('No records found')" :subtitle="''" class="md:col-span-2" />
|
||||||
:subtitle="''"
|
|
||||||
class="md:col-span-2"
|
|
||||||
/>
|
|
||||||
@endforelse
|
@endforelse
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Pagination Area -->
|
<!-- Pagination Area -->
|
||||||
<div class="mt-8">
|
<div class="mt-8">
|
||||||
{{ $history->appends(request()->query())->links('vendor.pagination.luxury') }}
|
{{ $history->appends(request()->query())->links('vendor.pagination.luxury') }}
|
||||||
</div>
|
</div>
|
||||||
@ -41,7 +41,8 @@
|
|||||||
if (this.$refs.historyContent) this.bindPaginationLinks(this.$refs.historyContent, 'history');
|
if (this.$refs.historyContent) this.bindPaginationLinks(this.$refs.historyContent, 'history');
|
||||||
if (this.$refs.machinesContent) this.bindPaginationLinks(this.$refs.machinesContent, 'machines');
|
if (this.$refs.machinesContent) this.bindPaginationLinks(this.$refs.machinesContent, 'machines');
|
||||||
});
|
});
|
||||||
// 觸發進度條
|
// 觸發進度條 (Removed for tab/pagination to reduce visual noise as requested)
|
||||||
|
/*
|
||||||
this.$watch('tabLoading', (val) => {
|
this.$watch('tabLoading', (val) => {
|
||||||
const bar = document.getElementById('top-loading-bar');
|
const bar = document.getElementById('top-loading-bar');
|
||||||
if (bar) {
|
if (bar) {
|
||||||
@ -49,95 +50,99 @@
|
|||||||
else bar.classList.remove('loading');
|
else bar.classList.remove('loading');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
},
|
},
|
||||||
|
|
||||||
// === AJAX 搜尋/分頁 ===
|
/**
|
||||||
async searchInTab(tab = 'history', extraQuery = '') {
|
* AJAX 抓取資料並更新 DOM
|
||||||
|
*/
|
||||||
|
async fetchUrl(tab, url) {
|
||||||
this.tabLoading = true;
|
this.tabLoading = true;
|
||||||
let qs = `_ajax=1&tab=${tab}`;
|
|
||||||
|
|
||||||
if (tab === 'machines') {
|
|
||||||
if (this.machineSearch) qs += `&machine_search=${encodeURIComponent(this.machineSearch)}`;
|
|
||||||
} else {
|
|
||||||
if (this.historySearch) qs += `&search=${encodeURIComponent(this.historySearch)}`;
|
|
||||||
if (this.historyStartDate) qs += `&start_date=${encodeURIComponent(this.historyStartDate)}`;
|
|
||||||
if (this.historyEndDate) qs += `&end_date=${encodeURIComponent(this.historyEndDate)}`;
|
|
||||||
if (this.historyStatus) qs += `&status=${encodeURIComponent(this.historyStatus)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (extraQuery) qs += extraQuery;
|
|
||||||
|
|
||||||
// 同步 URL（不含 _ajax）
|
|
||||||
const visibleQs = qs.replace(/&?_ajax=1/, '');
|
|
||||||
history.pushState({}, '', `{{ route('admin.remote.stock') }}${visibleQs ? '?' + visibleQs : ''}`);
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(
|
const ajaxUrl = new URL(url, window.location.origin);
|
||||||
`{{ route('admin.remote.stock') }}?${qs}`,
|
ajaxUrl.searchParams.set('_ajax', '1');
|
||||||
{ headers: { 'X-Requested-With': 'XMLHttpRequest' } }
|
ajaxUrl.searchParams.set('tab', tab);
|
||||||
);
|
|
||||||
|
const res = await fetch(ajaxUrl.toString(), {
|
||||||
|
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) throw new Error('Network response was not ok');
|
||||||
|
|
||||||
const html = await res.text();
|
const html = await res.text();
|
||||||
const ref = (tab === 'machines') ? this.$refs.machinesContent : this.$refs.historyContent;
|
const ref = (tab === 'machines') ? this.$refs.machinesContent : this.$refs.historyContent;
|
||||||
|
|
||||||
if (ref) {
|
if (ref) {
|
||||||
ref.innerHTML = html;
|
ref.innerHTML = html;
|
||||||
|
|
||||||
|
// 同步更新 URL (移除 _ajax 參數)
|
||||||
|
const visibleUrl = new URL(url, window.location.origin);
|
||||||
|
visibleUrl.searchParams.delete('_ajax');
|
||||||
|
history.pushState({}, '', visibleUrl.toString());
|
||||||
|
|
||||||
|
// 重新綁定分頁與初始化 UI
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
Alpine.initTree(ref);
|
Alpine.initTree(ref);
|
||||||
this.bindPaginationLinks(ref, tab);
|
this.bindPaginationLinks(ref, tab);
|
||||||
if (window.HSStaticMethods) {
|
if (window.HSStaticMethods && typeof window.HSStaticMethods.autoInit === 'function') {
|
||||||
setTimeout(() => window.HSStaticMethods.autoInit(), 100);
|
window.HSStaticMethods.autoInit();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (error) {
|
||||||
console.error('Search failed:', e);
|
console.error('Fetch error:', error);
|
||||||
window.dispatchEvent(new CustomEvent('toast', { detail: { message: '{{ __('Failed to load content') }}', type: 'error' } }));
|
|
||||||
} finally {
|
} finally {
|
||||||
this.tabLoading = false;
|
this.tabLoading = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 攔截分頁連結
|
async searchInTab(tab = 'history') {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
|
||||||
|
if (tab === 'machines') {
|
||||||
|
if (this.machineSearch) params.set('machine_search', this.machineSearch);
|
||||||
|
} else {
|
||||||
|
if (this.historySearch) params.set('search', this.historySearch);
|
||||||
|
if (this.historyStartDate) params.set('start_date', this.historyStartDate);
|
||||||
|
if (this.historyEndDate) params.set('end_date', this.historyEndDate);
|
||||||
|
if (this.historyStatus) params.set('status', this.historyStatus);
|
||||||
|
// 如果有其他參數可以在此加入
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `{{ route('admin.remote.stock') }}?${params.toString()}`;
|
||||||
|
await this.fetchUrl(tab, url);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 監聽分頁事件
|
||||||
bindPaginationLinks(container, tab) {
|
bindPaginationLinks(container, tab) {
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
|
// 監聽容器上的 ajax:navigate 事件，這是 luxury 分頁模板發出的
|
||||||
|
container.addEventListener('ajax:navigate', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (e.detail && e.detail.url) {
|
||||||
|
this.fetchUrl(tab, e.detail.url);
|
||||||
|
}
|
||||||
|
}, { once: true }); // 確保只綁定一次
|
||||||
|
|
||||||
|
// 兼容處理：攔截 a[href] 點擊
|
||||||
container.querySelectorAll('a[href]').forEach(a => {
|
container.querySelectorAll('a[href]').forEach(a => {
|
||||||
const href = a.getAttribute('href');
|
const href = a.getAttribute('href');
|
||||||
if (!href || href.startsWith('#') || href.startsWith('javascript:')) return;
|
if (!href || href.startsWith('#') || href.startsWith('javascript:')) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const url = new URL(href, window.location.origin);
|
const url = new URL(href, window.location.origin);
|
||||||
const pageKey = (tab === 'machines') ? 'machine_page' : 'history_page';
|
const pageKey = (tab === 'machines') ? 'machine_page' : 'history_page';
|
||||||
if (!url.searchParams.has(pageKey) || a.closest('td.px-6')) return;
|
|
||||||
|
|
||||||
a.addEventListener('click', (e) => {
|
// 只處理分頁連結
|
||||||
if (a.title) return;
|
if (url.searchParams.has(pageKey) && !a.closest('td.px-6')) {
|
||||||
e.preventDefault();
|
a.addEventListener('click', (e) => {
|
||||||
const page = url.searchParams.get(pageKey) || 1;
|
if (a.title || a.hasAttribute('onclick')) return;
|
||||||
const perPage = url.searchParams.get('per_page') || '';
|
e.preventDefault();
|
||||||
let extra = `&${pageKey}=${page}`;
|
this.fetchUrl(tab, href);
|
||||||
if (perPage) extra += `&per_page=${perPage}`;
|
});
|
||||||
this.searchInTab(tab, extra);
|
}
|
||||||
});
|
} catch (e) {}
|
||||||
} catch (err) { }
|
|
||||||
});
|
|
||||||
|
|
||||||
container.querySelectorAll('select[onchange]').forEach(sel => {
|
|
||||||
const origOnchange = sel.getAttribute('onchange');
|
|
||||||
sel.removeAttribute('onchange');
|
|
||||||
sel.addEventListener('change', () => {
|
|
||||||
const val = sel.value;
|
|
||||||
const pageKey = (tab === 'machines') ? 'machine_page' : 'history_page';
|
|
||||||
try {
|
|
||||||
if (val.startsWith('http') || val.startsWith('/')) {
|
|
||||||
const url = new URL(val, window.location.origin);
|
|
||||||
const page = url.searchParams.get(pageKey) || 1;
|
|
||||||
const perPage = url.searchParams.get('per_page') || '';
|
|
||||||
let extra = `&${pageKey}=${page}`;
|
|
||||||
if (perPage) extra += `&per_page=${perPage}`;
|
|
||||||
this.searchInTab(tab, extra);
|
|
||||||
} else if (origOnchange && origOnchange.includes('per_page')) {
|
|
||||||
this.searchInTab(tab, `&per_page=${val}`);
|
|
||||||
}
|
|
||||||
} catch (err) { }
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -294,47 +299,47 @@
|
|||||||
return user ? user.name : {{ Js::from(__('System')) }};
|
return user ? user.name : {{ Js::from(__('System')) }};
|
||||||
},
|
},
|
||||||
|
|
||||||
getPayloadDetails(item) {
|
getPayloadDetails(item) {
|
||||||
if (item.command_type === 'reload_stock' && item.payload) {
|
if (item.command_type === 'reload_stock' && item.payload) {
|
||||||
const p = item.payload;
|
const p = item.payload;
|
||||||
let details = `{{ __('Slot') }} ${p.slot_no}: `;
|
let details = `{{ __('Slot') }} ${p.slot_no}: `;
|
||||||
|
|
||||||
if (p.old.stock !== p.new.stock) {
|
if (p.old.stock !== p.new.stock) {
|
||||||
details += `{{ __('Stock') }} ${p.old.stock} → ${p.new.stock}`;
|
details += `{{ __('Stock') }} ${p.old.stock} → ${p.new.stock}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (p.old.expiry_date !== p.new.expiry_date) {
|
if (p.old.expiry_date !== p.new.expiry_date) {
|
||||||
if (p.old.stock !== p.new.stock) details += ', ';
|
if (p.old.stock !== p.new.stock) details += ', ';
|
||||||
details += `{{ __('Expiry') }} ${p.old.expiry_date || 'N/A'} → ${p.new.expiry_date || 'N/A'}`;
|
details += `{{ __('Expiry') }} ${p.old.expiry_date || 'N/A'} → ${p.new.expiry_date || 'N/A'}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (p.old.batch_no !== p.new.batch_no) {
|
if (p.old.batch_no !== p.new.batch_no) {
|
||||||
if (p.old.stock !== p.new.stock || p.old.expiry_date !== p.new.expiry_date) details += ', ';
|
if (p.old.stock !== p.new.stock || p.old.expiry_date !== p.new.expiry_date) details += ', ';
|
||||||
details += `{{ __('Batch') }} ${p.old.batch_no || 'N/A'} → ${p.new.batch_no || 'N/A'}`;
|
details += `{{ __('Batch') }} ${p.old.batch_no || 'N/A'} → ${p.new.batch_no || 'N/A'}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return details;
|
return details;
|
||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
},
|
},
|
||||||
|
|
||||||
formatTime(dateStr) {
|
formatTime(dateStr) {
|
||||||
if (!dateStr) return '--';
|
if (!dateStr) return '--';
|
||||||
const date = new Date(dateStr);
|
const date = new Date(dateStr);
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const diffSeconds = Math.floor((now - date) / 1000);
|
const diffSeconds = Math.floor((now - date) / 1000);
|
||||||
|
|
||||||
if (diffSeconds < 0) return date.toISOString().split('T')[0];
|
if (diffSeconds < 0) return date.toISOString().split('T')[0];
|
||||||
if (diffSeconds < 60) return "{{ __('Just now') }}";
|
if (diffSeconds < 60) return "{{ __('Just now') }}";
|
||||||
|
|
||||||
const diffMinutes = Math.floor(diffSeconds / 60);
|
const diffMinutes = Math.floor(diffSeconds / 60);
|
||||||
if (diffMinutes < 60) return diffMinutes + " {{ __('mins ago') }}";
|
if (diffMinutes < 60) return diffMinutes + " {{ __('mins ago') }}";
|
||||||
|
|
||||||
const diffHours = Math.floor(diffMinutes / 60);
|
const diffHours = Math.floor(diffMinutes / 60);
|
||||||
if (diffHours < 24) return diffHours + " {{ __('hours ago') }}";
|
if (diffHours < 24) return diffHours + " {{ __('hours ago') }}";
|
||||||
|
|
||||||
return date.toISOString().split('T')[0] + ' ' + date.toTimeString().split(' ')[0].substring(0, 5);
|
return date.toISOString().split('T')[0] + ' ' + date.toTimeString().split(' ')[0].substring(0, 5);
|
||||||
},
|
},
|
||||||
|
|
||||||
translateNote(note) {
|
translateNote(note) {
|
||||||
if (!note) return '';
|
if (!note) return '';
|
||||||
@ -344,23 +349,22 @@
|
|||||||
};
|
};
|
||||||
return translations[note] || note;
|
return translations[note] || note;
|
||||||
}
|
}
|
||||||
|
};
|
||||||
};
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="space-y-2 pb-20" x-data="stockApp('{{ $selectedMachine ? $selectedMachine->id : '' }}')"
|
<div class="space-y-2 pb-20" x-data="stockApp('{{ $selectedMachine ? $selectedMachine->id : '' }}')"
|
||||||
@keydown.escape.window="showEditModal = false">
|
@keydown.escape.window="showEditModal = false">
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<x-page-header
|
<x-page-header :title="__($title ?? 'Stock & Expiry Management')"
|
||||||
:title="__($title ?? 'Stock & Expiry Management')"
|
:subtitle="__($subtitle ?? 'Manage inventory and monitor expiry dates across all machines')">
|
||||||
:subtitle="__($subtitle ?? 'Manage inventory and monitor expiry dates across all machines')"
|
|
||||||
>
|
|
||||||
<x-slot:back>
|
<x-slot:back>
|
||||||
<template x-if="viewMode === 'detail'">
|
<template x-if="viewMode === 'detail'">
|
||||||
<button @click="backToList()"
|
<button @click="backToList()"
|
||||||
class="p-2 sm:p-2.5 rounded-xl bg-white dark:bg-slate-800 text-slate-500 border border-slate-200/60 dark:border-slate-700/60 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-all active:scale-95 shrink-0">
|
class="p-2 sm:p-2.5 rounded-xl bg-white dark:bg-slate-800 text-slate-500 border border-slate-200/60 dark:border-slate-700/60 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-all active:scale-95 shrink-0">
|
||||||
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||||
|
stroke-width="2.5">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
@ -372,7 +376,7 @@
|
|||||||
<template x-if="viewMode !== 'detail'">
|
<template x-if="viewMode !== 'detail'">
|
||||||
<x-tab-nav model="viewMode">
|
<x-tab-nav model="viewMode">
|
||||||
<x-tab-nav-item value="history" :label="__('Operation Records')" model="viewMode" />
|
<x-tab-nav-item value="history" :label="__('Operation Records')" model="viewMode" />
|
||||||
<x-tab-nav-item value="list" :label="__('Adjust Stock & Expiry')" model="viewMode" />
|
<x-tab-nav-item value="list" :label="__('Adjust Stock & Expiry')" model="viewMode" />
|
||||||
</x-tab-nav>
|
</x-tab-nav>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -425,24 +429,29 @@
|
|||||||
<div class="space-y-6 animate-luxury-in">
|
<div class="space-y-6 animate-luxury-in">
|
||||||
<div class="luxury-card rounded-3xl p-8 overflow-hidden relative">
|
<div class="luxury-card rounded-3xl p-8 overflow-hidden relative">
|
||||||
<!-- AJAX Spinner (Machine List) -->
|
<!-- AJAX Spinner (Machine List) -->
|
||||||
<div x-show="tabLoading"
|
<div x-show="tabLoading" x-transition:enter="transition ease-out duration-300"
|
||||||
x-transition:enter="transition ease-out duration-300"
|
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||||
x-transition:enter-start="opacity-0"
|
x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
|
||||||
x-transition:enter-end="opacity-100"
|
x-transition:leave-end="opacity-0"
|
||||||
x-transition:leave="transition ease-in duration-200"
|
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-transition:leave-start="opacity-100"
|
x-cloak>
|
||||||
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="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
|
||||||
<div class="absolute inset-2 rounded-full border border-cyan-500/10 animate-spin" style="animation-duration: 3s; direction: reverse;"></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">
|
<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">
|
<svg class="w-6 h-6 text-cyan-500 animate-pulse" fill="none" stroke="currentColor"
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">{{ __('Loading Data') }}...</p>
|
<p
|
||||||
|
class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] animate-pulse">
|
||||||
|
{{ __('Loading Data') }}...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Filters Area -->
|
<!-- Filters Area -->
|
||||||
@ -456,13 +465,13 @@
|
|||||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<input type="text" x-model="machineSearch"
|
<input type="text" x-model="machineSearch" placeholder="{{ __('Search machines...') }}"
|
||||||
placeholder="{{ __('Search machines...') }}"
|
|
||||||
class="luxury-input py-2.5 pl-12 pr-6 block w-72">
|
class="luxury-input py-2.5 pl-12 pr-6 block w-72">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="tabLoading ? 'opacity-30 pointer-events-none transition-opacity duration-300' : 'transition-opacity duration-300'">
|
<div
|
||||||
|
:class="tabLoading ? 'opacity-30 pointer-events-none transition-opacity duration-300' : 'transition-opacity duration-300'">
|
||||||
<div x-ref="machinesContent">
|
<div x-ref="machinesContent">
|
||||||
@include('admin.remote.partials.tab-machines', ['machines' => $machines])
|
@include('admin.remote.partials.tab-machines', ['machines' => $machines])
|
||||||
</div>
|
</div>
|
||||||
@ -580,15 +589,21 @@
|
|||||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-6 relative z-10"
|
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-6 relative z-10"
|
||||||
x-show="!loading">
|
x-show="!loading">
|
||||||
<template x-for="slot in slots" :key="slot.id">
|
<template x-for="slot in slots" :key="slot.id">
|
||||||
<div @click="openEdit(slot)" :class="[getSlotColorClass(slot), slot.is_pending ? 'opacity-50 cursor-not-allowed grayscale-[0.5]' : 'cursor-pointer hover:scale-[1.08] hover:-translate-y-3 hover:shadow-2xl active:scale-[0.98]']"
|
<div @click="openEdit(slot)"
|
||||||
|
:class="[getSlotColorClass(slot), slot.is_pending ? 'opacity-50 cursor-not-allowed grayscale-[0.5]' : 'cursor-pointer hover:scale-[1.08] hover:-translate-y-3 hover:shadow-2xl active:scale-[0.98]']"
|
||||||
class="min-h-[300px] rounded-[2.5rem] p-5 flex flex-col items-center justify-center border-2 transition-all duration-500 group relative">
|
class="min-h-[300px] rounded-[2.5rem] p-5 flex flex-col items-center justify-center border-2 transition-all duration-500 group relative">
|
||||||
|
|
||||||
<!-- Pending Overlay -->
|
<!-- Pending Overlay -->
|
||||||
<template x-if="slot.is_pending">
|
<template x-if="slot.is_pending">
|
||||||
<div class="absolute inset-0 z-30 flex items-center justify-center bg-white/10 dark:bg-slate-900/10 backdrop-blur-[1px] rounded-[2.5rem]">
|
<div
|
||||||
|
class="absolute inset-0 z-30 flex items-center justify-center bg-white/10 dark:bg-slate-900/10 backdrop-blur-[1px] rounded-[2.5rem]">
|
||||||
<div class="flex flex-col items-center gap-2">
|
<div class="flex flex-col items-center gap-2">
|
||||||
<div class="w-8 h-8 border-2 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin"></div>
|
<div
|
||||||
<span class="text-[8px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-widest">{{ __('Syncing') }}</span>
|
class="w-8 h-8 border-2 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin">
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-[8px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-widest">{{
|
||||||
|
__('Syncing') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -53,7 +53,7 @@
|
|||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{ __('Payment Type') }}</p>
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{ __('Payment Type') }}</p>
|
||||||
<p class="text-sm font-extrabold text-slate-700 dark:text-slate-200">
|
<p class="text-sm font-extrabold text-slate-700 dark:text-slate-200">
|
||||||
{{ $paymentTypes[$order->payment_type] ?? __('Unknown') }}
|
{{ $order->payment_type_label }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -166,7 +166,7 @@
|
|||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="text-[10px] px-2 py-0.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 font-black uppercase tracking-widest border border-slate-200 dark:border-slate-700">
|
class="text-[10px] px-2 py-0.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 font-black uppercase tracking-widest border border-slate-200 dark:border-slate-700">
|
||||||
{{ $paymentTypes[$order->payment_type] ?? 'Unknown' }}
|
{{ $order->payment_type_label }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@if($order->discount_amount > 0)
|
@if($order->discount_amount > 0)
|
||||||
|
|||||||
@ -21,10 +21,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- List Mode --}}
|
{{-- List Mode --}}
|
||||||
<div x-show="viewMode === 'list'" class="space-y-6 animate-luxury-in" x-cloak>
|
<div x-show="viewMode === 'list'" class="space-y-6 animate-luxury-in" x-cloak
|
||||||
<div class="luxury-card rounded-3xl p-8 hover:translate-y-0 transition-transform duration-300">
|
x-ref="machineList"
|
||||||
<div class="flex flex-wrap items-center justify-between gap-4 mb-8">
|
@ajax:navigate.window="if($event.detail.url.includes('machine_id=') === false && viewMode === 'list') { $event.preventDefault(); fetchPage($event.detail.url); }">
|
||||||
|
<div class="luxury-card rounded-3xl p-8 hover:translate-y-0 transition-transform duration-300 relative overflow-hidden">
|
||||||
|
{{-- AJAX Loading Overlay --}}
|
||||||
|
<x-luxury-spinner show="loading" />
|
||||||
|
|
||||||
|
<div class="flex flex-wrap items-center justify-between gap-4 mb-8" :class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': loading }">
|
||||||
<form action="{{ route('admin.warehouses.machine-inventory') }}" method="GET"
|
<form action="{{ route('admin.warehouses.machine-inventory') }}" method="GET"
|
||||||
|
@submit.prevent="fetchPage($el.action + '?' + new URLSearchParams(new FormData($el)).toString())"
|
||||||
class="flex flex-wrap items-center gap-4 flex-1">
|
class="flex flex-wrap items-center gap-4 flex-1">
|
||||||
<div class="relative group w-full sm:w-72">
|
<div class="relative group w-full sm:w-72">
|
||||||
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
||||||
@ -52,7 +58,7 @@
|
|||||||
|
|
||||||
<button type="button" @click="
|
<button type="button" @click="
|
||||||
$el.closest('form').querySelectorAll('input[type=text]').forEach(i => i.value = '');
|
$el.closest('form').querySelectorAll('input[type=text]').forEach(i => i.value = '');
|
||||||
$el.closest('form').submit();
|
$el.closest('form').dispatchEvent(new Event('submit'));
|
||||||
"
|
"
|
||||||
class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 group transition-all active:scale-95"
|
class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 group transition-all active:scale-95"
|
||||||
title="{{ __('Reset') }}">
|
title="{{ __('Reset') }}">
|
||||||
@ -66,194 +72,9 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hidden xl:block overflow-x-auto">
|
<div x-ref="listContent" :class="{ 'opacity-30 pointer-events-none transition-opacity duration-300': loading }">
|
||||||
<table class="w-full text-left border-separate border-spacing-y-0">
|
@include('admin.warehouses.partials.list-machines', ['machines' => $machines])
|
||||||
<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 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
|
||||||
{{ __('Machine') }}</th>
|
|
||||||
<th
|
|
||||||
class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
|
||||||
{{ __('Serial No.') }}</th>
|
|
||||||
<th
|
|
||||||
class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
|
|
||||||
{{ __('Slots') }}</th>
|
|
||||||
<th
|
|
||||||
class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
|
|
||||||
{{ __('Total Stock') }}</th>
|
|
||||||
<th
|
|
||||||
class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
|
|
||||||
{{ __('Stock Rate') }}</th>
|
|
||||||
<th
|
|
||||||
class="px-6 py-4 text-xs font-bold text-slate-500 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)
|
|
||||||
@php
|
|
||||||
$maxStock = $machine->slots->sum('max_stock') ?: 1;
|
|
||||||
$currentStock = (int)($machine->total_stock ?? 0);
|
|
||||||
$fillRate = round(($currentStock / $maxStock) * 100);
|
|
||||||
$fillColor = $fillRate >= 50 ? 'emerald' : ($fillRate >= 20 ? 'amber' : 'rose');
|
|
||||||
@endphp
|
|
||||||
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300 cursor-pointer"
|
|
||||||
@click="viewSlots({{ json_encode($machine->only(['id', 'name', 'serial_no'])) }})">
|
|
||||||
<td class="px-6 py-5">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all overflow-hidden shadow-sm border border-slate-200 dark:border-slate-700">
|
|
||||||
@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-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
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>
|
|
||||||
<span
|
|
||||||
class="font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{
|
|
||||||
$machine->name }}</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-5">
|
|
||||||
<span
|
|
||||||
class="font-mono font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest text-sm group-hover:text-cyan-500/70 transition-colors">{{
|
|
||||||
$machine->serial_no }}</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-5 text-center">
|
|
||||||
<span class="font-black text-slate-800 dark:text-white">{{ $machine->total_slots ?? 0
|
|
||||||
}}</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-5 text-center">
|
|
||||||
<span class="font-black text-slate-800 dark:text-white">{{ $currentStock }}</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-5 text-center">
|
|
||||||
<div class="flex items-center justify-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-24 h-2 bg-slate-100 dark:bg-slate-700/50 rounded-full overflow-hidden shadow-inner">
|
|
||||||
<div class="h-full bg-{{ $fillColor }}-500 rounded-full transition-all duration-500"
|
|
||||||
style="width: {{ $fillRate }}%;"></div>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm font-black text-{{ $fillColor }}-500 w-8">{{ $fillRate
|
|
||||||
}}%</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-5 text-right">
|
|
||||||
<div class="flex items-center justify-end gap-2">
|
|
||||||
<a href="{{ route('admin.warehouses.replenishments') }}?auto_machine_id={{ $machine->id }}"
|
|
||||||
@click.stop
|
|
||||||
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="{{ __('Auto Replenishment') }}">
|
|
||||||
<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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
{{-- 庫存流水帳按鈕 --}}
|
|
||||||
<button @click.stop="openMovements({{ json_encode($machine->only(['id', 'name', 'serial_no'])) }})"
|
|
||||||
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="{{ __('Stock Movement Log') }}">
|
|
||||||
<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="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25Z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
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="{{ __('View Slots') }}">
|
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.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 11-6 0 3 3 0 016 0z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
@empty
|
|
||||||
<tr>
|
|
||||||
<td colspan="6" class="px-6 py-24 text-center text-slate-400 font-bold italic">{{ __('No
|
|
||||||
machines found') }}</td>
|
|
||||||
</tr>
|
|
||||||
@endforelse
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Card View (Mobile & Tablet) --}}
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:hidden gap-6">
|
|
||||||
@forelse($machines as $machine)
|
|
||||||
@php
|
|
||||||
$maxStock = $machine->slots->sum('max_stock') ?: 1;
|
|
||||||
$currentStock = (int)($machine->total_stock ?? 0);
|
|
||||||
$fillRate = round(($currentStock / $maxStock) * 100);
|
|
||||||
$fillColor = $fillRate >= 50 ? 'emerald' : ($fillRate >= 20 ? 'amber' : 'rose');
|
|
||||||
@endphp
|
|
||||||
<div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group"
|
|
||||||
@click="viewSlots({{ json_encode($machine->only(['id', 'name', 'serial_no'])) }})">
|
|
||||||
<div class="flex items-start justify-between gap-4 mb-6">
|
|
||||||
<div class="flex items-center gap-4 min-w-0">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
|
|
||||||
@if($machine->image_urls && isset($machine->image_urls[0]))
|
|
||||||
<img src="{{ $machine->image_urls[0] }}" class="w-full h-full object-cover">
|
|
||||||
@else
|
|
||||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
||||||
</svg>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
<div class="min-w-0 flex-1 cursor-pointer">
|
|
||||||
<h3 class="text-base sm:text-lg font-black text-slate-800 dark:text-slate-100 break-all group-hover:text-cyan-600 transition-colors tracking-tight">{{ $machine->name }}</h3>
|
|
||||||
<p class="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-widest truncate mt-0.5">{{ $machine->serial_no }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="shrink-0">
|
|
||||||
<span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black bg-{{ $fillColor }}-500/10 text-{{ $fillColor }}-500 border border-{{ $fillColor }}-500/20 tracking-widest uppercase shadow-sm">
|
|
||||||
{{ $fillRate }}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
|
|
||||||
<div>
|
|
||||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Total Slots') }}</p>
|
|
||||||
<p class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ $machine->total_slots ?? 0 }}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Total Stock') }}</p>
|
|
||||||
<p class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ $currentStock }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-2 pt-2">
|
|
||||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">{{ __('Stock Rate') }}</p>
|
|
||||||
<div class="w-full h-2 bg-slate-100 dark:bg-slate-700/50 rounded-full overflow-hidden shadow-inner">
|
|
||||||
<div class="h-full bg-{{ $fillColor }}-500 rounded-full transition-all duration-500"
|
|
||||||
style="width: {{ $fillRate }}%;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<button type="button" @click.stop="viewSlots({{ json_encode($machine->only(['id', 'name', 'serial_no'])) }})"
|
|
||||||
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-black text-[10px] sm:text-xs tracking-widest hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
|
|
||||||
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="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>
|
|
||||||
{{ __('Details') }}
|
|
||||||
</button>
|
|
||||||
<a href="{{ route('admin.warehouses.replenishments') }}?auto_machine_id={{ $machine->id }}" @click.stop
|
|
||||||
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-cyan-500/10 text-cyan-500 font-black text-xs uppercase tracking-widest hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-cyan-500/20 shadow-sm">
|
|
||||||
<svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
|
|
||||||
{{ __('Replenish') }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@empty
|
|
||||||
<div class="col-span-full py-20 text-center flex flex-col items-center gap-4 bg-white/50 dark:bg-slate-900/50 rounded-3xl border border-slate-100 dark:border-slate-800/50 luxury-card">
|
|
||||||
<p class="text-slate-400 font-extrabold tracking-widest uppercase text-xs">{{ __('No machines found') }}</p>
|
|
||||||
</div>
|
|
||||||
@endforelse
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6 pt-6 border-t border-slate-50 dark:border-slate-800/50">{{
|
|
||||||
$machines->links('vendor.pagination.luxury') }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1158,7 +979,32 @@ document.addEventListener('alpine:init', () => {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async fetchPage(url) {
|
||||||
|
this.loading = true;
|
||||||
|
try {
|
||||||
|
const res = await fetch(url, {
|
||||||
|
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.success) {
|
||||||
|
this.$refs.listContent.innerHTML = data.html;
|
||||||
|
window.history.pushState({}, '', url);
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
|
||||||
|
window.HSStaticMethods.autoInit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Fetch page error:', e);
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
movementTypeBadge(type) {
|
movementTypeBadge(type) {
|
||||||
|
|
||||||
const colors = {
|
const colors = {
|
||||||
replenishment: 'emerald',
|
replenishment: 'emerald',
|
||||||
pickup: 'indigo',
|
pickup: 'indigo',
|
||||||
|
|||||||
@ -0,0 +1,175 @@
|
|||||||
|
<div class="space-y-6">
|
||||||
|
{{-- Table View (Desktop) --}}
|
||||||
|
<div class="hidden xl:block 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">
|
||||||
|
{{ __('Machine') }}</th>
|
||||||
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||||
|
{{ __('Serial No.') }}</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">
|
||||||
|
{{ __('Slots') }}</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">
|
||||||
|
{{ __('Total Stock') }}</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">
|
||||||
|
{{ __('Stock Rate') }}</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)
|
||||||
|
@php
|
||||||
|
$maxStock = $machine->slots->sum('max_stock') ?: 1;
|
||||||
|
$currentStock = (int)($machine->total_stock ?? 0);
|
||||||
|
$fillRate = round(($currentStock / $maxStock) * 100);
|
||||||
|
$fillColor = $fillRate >= 50 ? 'emerald' : ($fillRate >= 20 ? 'amber' : 'rose');
|
||||||
|
@endphp
|
||||||
|
<tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200 cursor-pointer"
|
||||||
|
@click="viewSlots({{ json_encode($machine->only(['id', 'name', 'serial_no'])) }})">
|
||||||
|
<td class="px-6 py-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all overflow-hidden shadow-sm border border-slate-200 dark:border-slate-700">
|
||||||
|
@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 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
<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 leading-tight">{{ $machine->name }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-5 whitespace-nowrap">
|
||||||
|
<span class="font-mono font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest text-sm group-hover:text-cyan-500/70 transition-colors">{{ $machine->serial_no }}</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-5 text-center">
|
||||||
|
<span class="text-sm font-black text-slate-800 dark:text-white">{{ $machine->total_slots ?? 0 }}</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-5 text-center">
|
||||||
|
<span class="text-sm font-black text-slate-800 dark:text-white">{{ $currentStock }}</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-5 text-center whitespace-nowrap">
|
||||||
|
<div class="flex items-center justify-center gap-3">
|
||||||
|
<div class="w-24 h-2 bg-slate-100 dark:bg-slate-700/50 rounded-full overflow-hidden shadow-inner">
|
||||||
|
<div class="h-full bg-{{ $fillColor }}-500 rounded-full transition-all duration-500"
|
||||||
|
style="width: {{ $fillRate }}%;"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-black text-{{ $fillColor }}-500 w-8">{{ $fillRate }}%</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-5 text-right">
|
||||||
|
<div class="flex items-center justify-end gap-2">
|
||||||
|
<a href="{{ route('admin.warehouses.replenishments') }}?auto_machine_id={{ $machine->id }}"
|
||||||
|
@click.stop
|
||||||
|
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="{{ __('Auto Replenishment') }}">
|
||||||
|
<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 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
{{-- 庫存流水帳按鈕 --}}
|
||||||
|
<button @click.stop="openMovements({{ json_encode($machine->only(['id', 'name', 'serial_no'])) }})"
|
||||||
|
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="{{ __('Stock Movement Log') }}">
|
||||||
|
<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="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
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="{{ __('View Slots') }}">
|
||||||
|
<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 010-.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 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@empty
|
||||||
|
<x-empty-state mode="table" :colspan="6" :message="__('No machines found')" />
|
||||||
|
@endforelse
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Card View (Mobile & Tablet) --}}
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:hidden gap-6">
|
||||||
|
@forelse($machines as $machine)
|
||||||
|
@php
|
||||||
|
$maxStock = $machine->slots->sum('max_stock') ?: 1;
|
||||||
|
$currentStock = (int)($machine->total_stock ?? 0);
|
||||||
|
$fillRate = round(($currentStock / $maxStock) * 100);
|
||||||
|
$fillColor = $fillRate >= 50 ? 'emerald' : ($fillRate >= 20 ? 'amber' : 'rose');
|
||||||
|
@endphp
|
||||||
|
<div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group"
|
||||||
|
@click="viewSlots({{ json_encode($machine->only(['id', 'name', 'serial_no'])) }})">
|
||||||
|
<div class="flex items-start justify-between gap-4 mb-6">
|
||||||
|
<div class="flex items-center gap-4 min-w-0">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
|
||||||
|
@if($machine->image_urls && isset($machine->image_urls[0]))
|
||||||
|
<img src="{{ $machine->image_urls[0] }}" class="w-full h-full object-cover">
|
||||||
|
@else
|
||||||
|
<svg class="w-7 h-7 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
<div class="min-w-0 flex-1 cursor-pointer">
|
||||||
|
<h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate group-hover:text-cyan-600 transition-colors tracking-tight">{{ $machine->name }}</h3>
|
||||||
|
<p class="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-widest truncate mt-1">{{ $machine->serial_no }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shrink-0">
|
||||||
|
<span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black bg-{{ $fillColor }}-500/10 text-{{ $fillColor }}-500 border border-{{ $fillColor }}-500/20 tracking-widest uppercase shadow-sm">
|
||||||
|
{{ $fillRate }}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Total Slots') }}</p>
|
||||||
|
<p class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ $machine->total_slots ?? 0 }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Total Stock') }}</p>
|
||||||
|
<p class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ $currentStock }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2 pt-2">
|
||||||
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">{{ __('Stock Rate') }}</p>
|
||||||
|
<div class="w-full h-2 bg-slate-100 dark:bg-slate-700/50 rounded-full overflow-hidden shadow-inner">
|
||||||
|
<div class="h-full bg-{{ $fillColor }}-500 rounded-full transition-all duration-500"
|
||||||
|
style="width: {{ $fillRate }}%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button type="button" @click.stop="viewSlots({{ json_encode($machine->only(['id', 'name', 'serial_no'])) }})"
|
||||||
|
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200 dark:border-slate-700 shadow-sm">
|
||||||
|
<svg class="w-3.5 h-3.5 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>
|
||||||
|
{{ __('Details') }}
|
||||||
|
</button>
|
||||||
|
<a href="{{ route('admin.warehouses.replenishments') }}?auto_machine_id={{ $machine->id }}" @click.stop
|
||||||
|
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-cyan-500/10 text-cyan-500 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-cyan-500/20 shadow-sm">
|
||||||
|
<svg class="w-3.5 h-3.5 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
|
||||||
|
{{ __('Replenish') }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@empty
|
||||||
|
<div class="col-span-full">
|
||||||
|
<x-empty-state :message="__('No machines found')" />
|
||||||
|
</div>
|
||||||
|
@endforelse
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 pt-6 border-t border-slate-50 dark:border-slate-800/50">
|
||||||
|
{{ $machines->links('vendor.pagination.luxury') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -291,9 +291,9 @@
|
|||||||
@endcan
|
@endcan
|
||||||
|
|
||||||
@can('menu.data-config.badges')
|
@can('menu.data-config.badges')
|
||||||
<li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.data-config.badges') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.data-config.badges') }}">
|
<li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.data-config.staff-cards.*') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.data-config.staff-cards.index') }}">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" /></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
|
||||||
<span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Badge Settings') }}</span>
|
<span class="whitespace-nowrap overflow-hidden transition-all duration-300" :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">{{ __('Staff Identification Management') }}</span>
|
||||||
</a></li>
|
</a></li>
|
||||||
@endcan
|
@endcan
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -189,7 +189,8 @@ Route::middleware(['auth', 'verified', 'tenant.access'])->prefix('admin')->name(
|
|||||||
Route::put('/sub-account-roles/{id}', [App\Http\Controllers\Admin\PermissionController::class, 'updateRole'])->name('sub-account-roles.update')->middleware('can:menu.data-config.sub-accounts');
|
Route::put('/sub-account-roles/{id}', [App\Http\Controllers\Admin\PermissionController::class, 'updateRole'])->name('sub-account-roles.update')->middleware('can:menu.data-config.sub-accounts');
|
||||||
Route::delete('/sub-account-roles/{id}', [App\Http\Controllers\Admin\PermissionController::class, 'destroyRole'])->name('sub-account-roles.destroy')->middleware('can:menu.data-config.sub-accounts');
|
Route::delete('/sub-account-roles/{id}', [App\Http\Controllers\Admin\PermissionController::class, 'destroyRole'])->name('sub-account-roles.destroy')->middleware('can:menu.data-config.sub-accounts');
|
||||||
Route::get('/points', [App\Http\Controllers\Admin\DataConfigController::class, 'points'])->name('points');
|
Route::get('/points', [App\Http\Controllers\Admin\DataConfigController::class, 'points'])->name('points');
|
||||||
Route::get('/badges', [App\Http\Controllers\Admin\DataConfigController::class, 'badges'])->name('badges');
|
Route::resource('staff-cards', App\Http\Controllers\Admin\StaffCardController::class);
|
||||||
|
Route::patch('staff-cards/{staffCard}/toggle-status', [App\Http\Controllers\Admin\StaffCardController::class, 'toggleStatus'])->name('staff-cards.status.toggle');
|
||||||
});
|
});
|
||||||
|
|
||||||
// 10. 遠端管理
|
// 10. 遠端管理
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user