[STYLE] 修復機台庫存管理功能並全面升級極簡奢華風 UI
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 56s
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 56s
1. [FIX] 修復 MachineController 500 錯誤：注入缺失的 MachineService 執行個體。 2. [STYLE] 貨道卡片重構：改為垂直堆疊佈局，移除冗餘標籤，並優化庫存 (x/y) 與效期格式。 3. [STYLE] 極致化間距調優：壓縮全域 Padding 與 Gap，並將貨道編號絕對定位於頂部，提升顯示密度。 4. [FIX] 穩定性修復：解決 Alpine.js 在返回列表時的 selectedMachine 空值存取報錯。 5. [STYLE] UI 細節修飾：隱藏輸入框微調箭頭，強化編號字體粗細與位置精準度。 6. [DOCS] 翻譯同步：更新 zh_TW, en, ja 翻譯檔中關於庫存與貨道的語系 Key。 7. [FEAT] 整合遠端管理模組：新增並導航至 resources/views/admin/remote/stock.blade.php。
This commit is contained in:
@@ -3,14 +3,16 @@
|
||||
namespace App\Http\Controllers\Admin;
|
||||
|
||||
use App\Models\Machine\Machine;
|
||||
use App\Services\Machine\MachineService;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\View\View;
|
||||
|
||||
class MachineController extends AdminController
|
||||
{
|
||||
public function __construct(protected MachineService $machineService) {}
|
||||
|
||||
public function index(Request $request): View
|
||||
{
|
||||
$tab = $request->input('tab', 'list');
|
||||
$per_page = $request->input('per_page', 10);
|
||||
|
||||
$query = Machine::query();
|
||||
@@ -23,27 +25,13 @@ class MachineController extends AdminController
|
||||
});
|
||||
}
|
||||
|
||||
// 統一預加載貨道統計資料 (無論在哪一個頁籤)
|
||||
$machines = $query->withCount(['slots as total_slots'])
|
||||
->withCount(['slots as expired_count' => function ($q) {
|
||||
$q->where('expiry_date', '<', now()->toDateString());
|
||||
}])
|
||||
->withCount(['slots as pending_count' => function ($q) {
|
||||
$q->whereNull('expiry_date');
|
||||
}])
|
||||
->withCount(['slots as warning_count' => function ($q) {
|
||||
$q->whereBetween('expiry_date', [now()->toDateString(), now()->addDays(7)->toDateString()]);
|
||||
}])
|
||||
// 只有在機台列表且有狀態篩選時才套用狀態過濾
|
||||
->when($request->status && $tab === 'list', function ($q, $status) {
|
||||
return $q->where('status', $status);
|
||||
})
|
||||
->orderBy("last_heartbeat_at", "desc")
|
||||
// 預加載統計資料
|
||||
$machines = $query->orderBy("last_heartbeat_at", "desc")
|
||||
->orderBy("id", "desc")
|
||||
->paginate($per_page)
|
||||
->withQueryString();
|
||||
|
||||
return view('admin.machines.index', compact('machines', 'tab'));
|
||||
return view('admin.machines.index', compact('machines'));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -132,32 +120,23 @@ class MachineController extends AdminController
|
||||
}
|
||||
|
||||
/**
|
||||
* AJAX: 更新貨道效期
|
||||
* AJAX: 更新貨道資訊 (庫存、效期、批號)
|
||||
*/
|
||||
public function updateSlotExpiry(Request $request, Machine $machine)
|
||||
{
|
||||
$request->validate([
|
||||
$validated = $request->validate([
|
||||
'slot_no' => 'required|integer',
|
||||
'stock' => 'nullable|integer|min:0',
|
||||
'expiry_date' => 'nullable|date',
|
||||
'batch_no' => 'nullable|string|max:50',
|
||||
'apply_all_same_product' => 'boolean'
|
||||
]);
|
||||
|
||||
$slotNo = $request->slot_no;
|
||||
$expiryDate = $request->expiry_date;
|
||||
$applyAll = $request->apply_all_same_product ?? false;
|
||||
|
||||
$slot = $machine->slots()->where('slot_no', $slotNo)->firstOrFail();
|
||||
$slot->update(['expiry_date' => $expiryDate]);
|
||||
|
||||
if ($applyAll && $slot->product_id) {
|
||||
$machine->slots()
|
||||
->where('product_id', $slot->product_id)
|
||||
->update(['expiry_date' => $expiryDate]);
|
||||
}
|
||||
$this->machineService->updateSlot($machine, $validated);
|
||||
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => __('Expiry updated successfully.')
|
||||
'message' => __('Slot updated successfully.')
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -8,11 +8,23 @@ use Illuminate\Http\Request;
|
||||
class RemoteController extends Controller
|
||||
{
|
||||
// 機台庫存
|
||||
public function stock()
|
||||
public function stock(Request $request)
|
||||
{
|
||||
return view('admin.placeholder', [
|
||||
'title' => '遠端修改機台庫存',
|
||||
'description' => '遠端修改機台庫存數量',
|
||||
$machines = \App\Models\Machine\Machine::withCount([
|
||||
'slots as slots_count',
|
||||
'slots as low_stock_count' => function ($query) {
|
||||
$query->where('stock', '<=', 5);
|
||||
}
|
||||
])->orderBy('name')->get();
|
||||
$selectedMachine = null;
|
||||
|
||||
if ($request->has('machine_id')) {
|
||||
$selectedMachine = \App\Models\Machine\Machine::find($request->machine_id);
|
||||
}
|
||||
|
||||
return view('admin.remote.stock', [
|
||||
'machines' => $machines,
|
||||
'selectedMachine' => $selectedMachine,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -91,6 +91,43 @@ class MachineService
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update machine slot stock, expiry, and batch.
|
||||
*
|
||||
* @param Machine $machine
|
||||
* @param array $data
|
||||
* @return void
|
||||
*/
|
||||
public function updateSlot(Machine $machine, array $data): void
|
||||
{
|
||||
DB::transaction(function () use ($machine, $data) {
|
||||
$slotNo = $data['slot_no'];
|
||||
$stock = $data['stock'] ?? null;
|
||||
$expiryDate = $data['expiry_date'] ?? null;
|
||||
$batchNo = $data['batch_no'] ?? null;
|
||||
$applyAllSame = $data['apply_all_same_product'] ?? false;
|
||||
|
||||
$slot = $machine->slots()->where('slot_no', $slotNo)->with('product')->firstOrFail();
|
||||
|
||||
if ($applyAllSame && $slot->product_id) {
|
||||
// 更新該機台內所有相同商品的貨道
|
||||
$machine->slots()->where('product_id', $slot->product_id)->update([
|
||||
'stock' => $stock !== null ? (int)$stock : DB::raw('stock'),
|
||||
'expiry_date' => $expiryDate,
|
||||
'batch_no' => $batchNo,
|
||||
]);
|
||||
} else {
|
||||
// 僅更新單一貨道
|
||||
$updateData = [
|
||||
'expiry_date' => $expiryDate,
|
||||
'batch_no' => $batchNo,
|
||||
];
|
||||
if ($stock !== null) $updateData['stock'] = (int)$stock;
|
||||
$slot->update($updateData);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update machine slot stock (single slot).
|
||||
* Legacy support for recordLog (Existing code).
|
||||
|
||||
109
lang/en.json
109
lang/en.json
@@ -348,6 +348,7 @@
|
||||
"Machine Status": "Machine Status",
|
||||
"Machine Status List": "Machine Status List",
|
||||
"Machine Stock": "Machine Stock",
|
||||
"Machine Stock Management": "Machine Stock Management",
|
||||
"Machine Utilization": "Machine Utilization",
|
||||
"Machine created successfully.": "Machine created successfully.",
|
||||
"Machine images updated successfully.": "Machine images updated successfully.",
|
||||
@@ -385,6 +386,7 @@
|
||||
"Member Price": "Member Price",
|
||||
"Member System": "Member System",
|
||||
"Membership Tiers": "Membership Tiers",
|
||||
"Member Status": "Member Status",
|
||||
"Menu Permissions": "Menu Permissions",
|
||||
"Merchant IDs": "Merchant IDs",
|
||||
"Merchant payment gateway settings management": "Merchant payment gateway settings management",
|
||||
@@ -796,98 +798,19 @@
|
||||
"menu.reservation": "Reservation System",
|
||||
"menu.sales": "Sales Management",
|
||||
"menu.special-permission": "Special Permission",
|
||||
"Qty": "Qty",
|
||||
"Exp": "Exp",
|
||||
"Low": "Low",
|
||||
"Back to List": "Back to List",
|
||||
"Confirm Changes": "Confirm Changes",
|
||||
"Max Capacity:": "Max Capacity:",
|
||||
"Clear": "Clear",
|
||||
"Max": "Max",
|
||||
"Edit Slot": "Edit Slot",
|
||||
"Stock Quantity": "Stock Quantity",
|
||||
"Loading Cabinet...": "Loading Cabinet...",
|
||||
"Monitor and manage stock levels across your fleet": "Monitor and manage stock levels across your fleet",
|
||||
"Search by name or S/N...": "Search by name or S/N...",
|
||||
"menu.warehouses": "Warehouse Management",
|
||||
"min": "min",
|
||||
"of": "of",
|
||||
"permissions": "Permission Settings",
|
||||
"permissions.accounts": "帳號管理",
|
||||
"permissions.companies": "客戶管理",
|
||||
"permissions.roles": "角色權限管理",
|
||||
"remote": "Remote Management",
|
||||
"reservation": "Reservation System",
|
||||
"roles": "Role Permissions",
|
||||
"s": "s",
|
||||
"sales": "Sales Management",
|
||||
"special-permission": "Special Permission",
|
||||
"super-admin": "超級管理員",
|
||||
"to": "to",
|
||||
"user": "一般用戶",
|
||||
"vs Yesterday": "vs Yesterday",
|
||||
"warehouses": "Warehouse Management",
|
||||
"待填寫": "Pending",
|
||||
"Advertisement List": "Advertisement List",
|
||||
"Machine Advertisement Settings": "Machine Advertisement Settings",
|
||||
"Add Advertisement": "Add Advertisement",
|
||||
"Edit Advertisement": "Edit Advertisement",
|
||||
"Delete Advertisement": "Delete Advertisement",
|
||||
"Duration": "Duration",
|
||||
"15 Seconds": "15 Seconds",
|
||||
"30 Seconds": "30 Seconds",
|
||||
"60 Seconds": "60 Seconds",
|
||||
"Position": "Position",
|
||||
"Standby Ad": "Standby Ad",
|
||||
"Assign Advertisement": "Assign Advertisement",
|
||||
"Please select a machine first": "Please select a machine first",
|
||||
"Advertisement created successfully": "Ad created successfully",
|
||||
"Advertisement updated successfully": "Ad updated successfully",
|
||||
"Advertisement deleted successfully": "Ad deleted successfully",
|
||||
"Advertisement assigned successfully": "Ad assigned successfully",
|
||||
"Vending": "Vending",
|
||||
"Visit Gift": "Visit Gift",
|
||||
"Standby": "Standby",
|
||||
"Advertisement Video/Image": "Ad Video/Image",
|
||||
"Sort Order": "Sort Order",
|
||||
"Date Range": "Date Range",
|
||||
"Manage ad materials and machine playback settings": "Manage ad materials and machine playback settings",
|
||||
"Preview": "Preview",
|
||||
"No advertisements found.": "No advertisements found.",
|
||||
"vending": "Vending Page",
|
||||
"visit_gift": "Visit Gift",
|
||||
"standby": "Standby AD",
|
||||
"No assignments": "No assignments",
|
||||
"Please select a machine to view and manage its advertisements.": "Please select a machine to view and manage its advertisements.",
|
||||
"Delete Advertisement Confirmation": "Delete Advertisement Confirmation",
|
||||
"Are you sure you want to delete this advertisement? This will also remove all assignments to machines.": "Are you sure you want to delete this advertisement? This will also remove all assignments to machines.",
|
||||
"Manage your ad material details": "Manage your ad material details",
|
||||
"Material Name": "Material Name",
|
||||
"Enter ad material name": "Enter ad material name",
|
||||
"Material Type": "Material Type",
|
||||
"Duration (Seconds)": "Duration (Seconds)",
|
||||
"Seconds": "Seconds",
|
||||
"Upload Image": "Upload Image",
|
||||
"Upload Video": "Upload Video",
|
||||
"Active Status": "Active Status",
|
||||
"Save Material": "Save Material",
|
||||
"Select a material to play on this machine": "Select a material to play on this machine",
|
||||
"Target Position": "Target Position",
|
||||
"Select Material": "Select Material",
|
||||
"Please select a material": "Please select a material",
|
||||
"Playback Order": "Playback Order",
|
||||
"Smallest number plays first.": "Smallest number plays first.",
|
||||
"Confirm Assignment": "Confirm Assignment",
|
||||
"Are you sure you want to remove this assignment?": "Are you sure you want to remove this assignment?",
|
||||
"image": "Image",
|
||||
"video": "Video",
|
||||
"Search Machine...": "Search Machine...",
|
||||
"Advertisement created successfully.": "Advertisement created successfully.",
|
||||
"Advertisement updated successfully.": "Advertisement updated successfully.",
|
||||
"Advertisement deleted successfully.": "Advertisement deleted successfully.",
|
||||
"Cannot delete advertisement being used by machines.": "Cannot delete advertisement being used by machines.",
|
||||
"Advertisement assigned successfully.": "Advertisement assigned successfully.",
|
||||
"Assignment removed successfully.": "Assignment removed successfully.",
|
||||
"Max 5MB": "Max 5MB",
|
||||
"Max 50MB": "Max 50MB",
|
||||
"Select...": "Select...",
|
||||
"Ad Settings": "Ad Settings",
|
||||
"System Default (All Companies)": "System Default (All Companies)",
|
||||
"No materials available": "No materials available",
|
||||
"Search...": "Search...",
|
||||
"Add Category": "Add Category",
|
||||
"Category Management": "Category Management",
|
||||
"Category Name": "Category Name",
|
||||
"Manage your catalog, categories, and inventory settings.": "Manage your catalog, categories, and inventory settings.",
|
||||
"Multilingual Names": "Multilingual Names",
|
||||
"Barcode / Material": "Barcode / Material",
|
||||
"Product List": "Product List",
|
||||
"Product Count": "Product Count"
|
||||
"min": "min"
|
||||
}
|
||||
1093
lang/ja.json
1093
lang/ja.json
File diff suppressed because it is too large
Load Diff
@@ -355,6 +355,7 @@
|
||||
"Machine Status": "機台狀態",
|
||||
"Machine Status List": "機台運行狀態列表",
|
||||
"Machine Stock": "機台庫存",
|
||||
"Machine Stock Management": "機台庫存管理",
|
||||
"Machine Utilization": "機台稼動率",
|
||||
"Machine created successfully.": "機台已成功建立。",
|
||||
"Machine images updated successfully.": "機台圖片已成功更新。",
|
||||
@@ -828,8 +829,29 @@
|
||||
"menu.reservation": "預約管理",
|
||||
"menu.sales": "銷售報表",
|
||||
"menu.special-permission": "特殊權限",
|
||||
"menu.warehouses": "倉儲管理",
|
||||
"Machine Inventory": "Machine Inventory",
|
||||
"Low Stock": "Low Stock",
|
||||
"Batch Number": "Batch Number",
|
||||
"Apply changes to all identical products in this machine": "Apply changes to all identical products in this machine",
|
||||
"menu.warehouses": "Warehouse Management",
|
||||
"min": "分",
|
||||
"Qty": "數量",
|
||||
"Exp": "效期",
|
||||
"Low": "低庫存",
|
||||
"Back to List": "返回列表",
|
||||
"Confirm Changes": "確認變更",
|
||||
"Max Capacity:": "最大容量：",
|
||||
"Clear": "清除",
|
||||
"Max": "最大",
|
||||
"Edit Slot": "編輯貨道",
|
||||
"Stock Quantity": "庫存數量",
|
||||
"Loading Cabinet...": "正在載入貨道...",
|
||||
"Monitor and manage stock levels across your fleet": "監控並管理所有機台的庫存水位",
|
||||
"Search by name or S/N...": "搜尋名稱或序號...",
|
||||
"Machine Inventory": "機台庫存",
|
||||
"Low Stock": "低庫存",
|
||||
"Batch Number": "批號",
|
||||
"Apply changes to all identical products in this machine": "同步套用至此機台內的所有相同商品",
|
||||
"of": "總計",
|
||||
"permissions": "權限設定",
|
||||
"permissions.accounts": "帳號管理",
|
||||
|
||||
@@ -219,6 +219,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Images & Primary System Settings -->
|
||||
<div class="w-full lg:w-96 space-y-8 order-1 lg:order-2 lg:sticky top-24">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
@section('content')
|
||||
<script>
|
||||
window.machineApp = function(initialTab) {
|
||||
window.machineApp = function() {
|
||||
return {
|
||||
showLogPanel: false,
|
||||
activeTab: 'status',
|
||||
@@ -14,7 +14,7 @@ window.machineApp = function(initialTab) {
|
||||
loading: false,
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
tab: initialTab || 'machines',
|
||||
tab: 'list',
|
||||
viewMode: 'fleet',
|
||||
selectedMachine: null,
|
||||
slots: [],
|
||||
@@ -95,19 +95,29 @@ window.machineApp = function(initialTab) {
|
||||
this.updating = true;
|
||||
try {
|
||||
const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
||||
const res = await fetch('/admin/machines/' + this.selectedMachine.id + '/slots/expiry', {
|
||||
const machineId = this.selectedMachine ? this.selectedMachine.id : this.currentMachineId;
|
||||
const res = await fetch('/admin/machines/' + machineId + '/slots/expiry', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
|
||||
body: JSON.stringify({
|
||||
slot_no: this.selectedSlot.slot_no,
|
||||
expiry_date: this.tempExpiry,
|
||||
stock: this.selectedSlot.stock,
|
||||
batch_no: this.selectedSlot.batch_no,
|
||||
apply_all_same_product: this.applyToAllSame
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
this.showExpiryModal = false;
|
||||
if (this.selectedMachine) {
|
||||
await this.openCabinet(this.selectedMachine.id);
|
||||
} else {
|
||||
// Refresh slots in offcanvas
|
||||
const slotRes = await fetch(`/api/v1/machines/${machineId}/slots`);
|
||||
const slotData = await slotRes.json();
|
||||
this.slots = slotData.slots;
|
||||
}
|
||||
}
|
||||
} catch(e) { console.error('saveExpiry error:', e); }
|
||||
finally { this.updating = false; }
|
||||
@@ -130,14 +140,14 @@ window.machineApp = function(initialTab) {
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="space-y-2 pb-20" x-data="machineApp('{{ $tab }}')"
|
||||
<div class="space-y-4 pb-20 mt-4" x-data="machineApp()"
|
||||
@keydown.escape.window="showExpiryModal = false; showLogPanel = false">
|
||||
<!-- Top Header & Actions -->
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div>
|
||||
<h1 x-text="tab === 'list' ? '{{ __('Machine List') }}' : '{{ __('Expiry Management') }}'"
|
||||
class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300">
|
||||
<h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300">
|
||||
{{ __('Machine List') }}
|
||||
</h1>
|
||||
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
|
||||
{{ __('Manage your machine fleet and operational data') }}
|
||||
@@ -146,23 +156,8 @@ window.machineApp = function(initialTab) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs Switcher (Standard Position) -->
|
||||
<div
|
||||
class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50">
|
||||
<button @click="tab = 'list'; viewMode = 'fleet'; selectedMachine = null; window.history.replaceState(null, '', '?tab=list' + (new URLSearchParams(window.location.search).get('search') ? '&search=' + new URLSearchParams(window.location.search).get('search') : ''))"
|
||||
:class="tab === 'list' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
|
||||
class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all">
|
||||
{{ __('Machine List') }}
|
||||
</button>
|
||||
<button @click="tab = 'expiry'; viewMode = 'fleet'; selectedMachine = null; window.history.replaceState(null, '', '?tab=expiry' + (new URLSearchParams(window.location.search).get('search') ? '&search=' + new URLSearchParams(window.location.search).get('search') : ''))"
|
||||
:class="tab === 'expiry' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
|
||||
class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all">
|
||||
{{ __('Expiry Management') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Main Card (Machine List Tab) -->
|
||||
<div x-show="tab === 'list'" class="luxury-card rounded-3xl p-8 animate-luxury-in overflow-hidden mt-6">
|
||||
<!-- Main Card (Machine List) -->
|
||||
<div class="luxury-card rounded-3xl p-8 animate-luxury-in overflow-hidden mt-6">
|
||||
<!-- Filters Area -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<form method="GET" action="{{ route('admin.machines.index') }}" class="relative group">
|
||||
@@ -333,243 +328,6 @@ window.machineApp = function(initialTab) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="tab === 'expiry'">
|
||||
<!-- Expiry Management Tab Content -->
|
||||
<div class="animate-luxury-in mt-6">
|
||||
<!-- viewMode: fleet (機台列表概覽) -->
|
||||
<div x-show="viewMode === 'fleet'"
|
||||
class="luxury-card rounded-3xl p-8 overflow-hidden border border-slate-200 dark:border-slate-800 animate-luxury-in">
|
||||
<!-- Filters Area (Matches Machine List Style) -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<form method="GET" action="{{ route('admin.machines.index') }}" class="relative group">
|
||||
<input type="hidden" name="tab" value="expiry">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
||||
<svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" x2="16.65" x2="16.65"></line>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" name="search" value="{{ request('search') }}"
|
||||
placeholder="{{ __('Search machines by name or serial...') }}"
|
||||
class="luxury-input py-2.5 pl-12 pr-6 block w-72 transition-all">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto pb-4">
|
||||
<table class="w-full text-left border-separate border-spacing-y-0 text-sm whitespace-nowrap">
|
||||
<thead>
|
||||
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
|
||||
<th
|
||||
class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15rem] border-b border-slate-100 dark:border-slate-800">
|
||||
{{ __('Machine Information') }}</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">
|
||||
{{ __('Total Slots') }}</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">
|
||||
{{ __('Expired') }}</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">
|
||||
{{ __('Warning') }}</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">
|
||||
{{ __('Pending') }}</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">
|
||||
{{ __('Risk') }}</th>
|
||||
<th
|
||||
class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15rem] border-b border-slate-100 dark:border-slate-800 text-right">
|
||||
{{ __('Actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
||||
@foreach ($machines as $machine)
|
||||
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
|
||||
<td class="px-6 py-6">
|
||||
<div class="flex items-center gap-4 cursor-pointer group/info"
|
||||
@click="openCabinet('{{ $machine->id }}')">
|
||||
<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 overflow-hidden group-hover/info:bg-cyan-500 group-hover/info:text-white transition-all duration-300 shadow-sm relative">
|
||||
@if(isset($machine->image_urls[0]))
|
||||
<img src="{{ $machine->image_urls[0] }}"
|
||||
class="w-full h-full object-cover group-hover/info:scale-110 transition-transform duration-500">
|
||||
@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="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="text-base font-extrabold text-slate-800 dark:text-slate-100 tracking-tight group-hover/info:text-cyan-600 dark:group-hover/info:text-cyan-400 transition-colors">
|
||||
{{ $machine->name }}</div>
|
||||
<div
|
||||
class="text-[11px] font-mono font-bold text-slate-400 dark:text-slate-500 tracking-widest uppercase mt-0.5">
|
||||
<span>{{ $machine->serial_no }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-6 text-center">
|
||||
<span class="text-xl font-black text-slate-700 dark:text-slate-200">{{
|
||||
$machine->total_slots }}</span>
|
||||
</td>
|
||||
<td class="px-6 py-6 text-center">
|
||||
<div
|
||||
class="inline-flex items-baseline gap-1 {{ $machine->expired_count > 0 ? 'text-rose-600' : 'text-slate-300 dark:text-slate-700' }}">
|
||||
<span class="text-xl font-black">{{ $machine->expired_count }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-6 text-center">
|
||||
<div
|
||||
class="inline-flex items-baseline gap-1 {{ $machine->warning_count > 0 ? 'text-amber-600' : 'text-slate-300 dark:text-slate-700' }}">
|
||||
<span class="text-xl font-black">{{ $machine->warning_count }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-6 text-center">
|
||||
<div class="inline-flex items-baseline gap-1 text-slate-400">
|
||||
<span class="text-xl font-black">{{ $machine->pending_count }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-6 text-center">
|
||||
@if($machine->expired_count > 0)
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-rose-500/10 text-rose-600 dark:text-rose-400 text-[12px] font-black uppercase tracking-widest border border-rose-500/20 animate-pulse">
|
||||
<div class="h-1.5 w-1.5 rounded-full bg-rose-500"></div>
|
||||
{{ __('Critical') }}
|
||||
</span>
|
||||
@elseif($machine->warning_count > 0)
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-amber-500/10 text-amber-600 dark:text-amber-400 text-[12px] font-black uppercase tracking-widest border border-amber-500/20">
|
||||
<div class="h-1.5 w-1.5 rounded-full bg-amber-500"></div>
|
||||
{{ __('Warning') }}
|
||||
</span>
|
||||
@else
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-[12px] font-black uppercase tracking-widest border border-emerald-500/20">
|
||||
<div class="h-1.5 w-1.5 rounded-full bg-emerald-500/50"></div>
|
||||
{{ __('Optimal') }}
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-6 py-6 text-right font-display whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button type="button" @click="openCabinet('{{ $machine->id }}')"
|
||||
class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-transparent hover:border-cyan-500/20 transition-all inline-flex group/btn tooltip shadow-sm"
|
||||
title="{{ __('Manage Expiry') }}">
|
||||
<svg class="w-4 h-4 stroke-[2.5] group-hover/btn:scale-110 transition-transform"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- viewMode: cabinet (單機視覺化) -->
|
||||
<div x-show="viewMode === 'cabinet'" class="space-y-3" style="display: none;">
|
||||
<!-- Simple Stats Bar -->
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-6 px-5 py-4 luxury-card rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-3 h-3 rounded-full bg-rose-500 shadow-lg shadow-rose-500/30"></span>
|
||||
<span class="text-xs font-bold text-slate-500 uppercase tracking-widest">{{ __('Expired') }}</span>
|
||||
<span class="text-lg font-black text-rose-600" x-text="slots.filter(s => {
|
||||
if(!s.expiry_date) return false;
|
||||
const todayStr = new Date().toISOString().split('T')[0];
|
||||
return s.expiry_date < todayStr;
|
||||
}).length"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-3 h-3 rounded-full bg-amber-500 shadow-lg shadow-amber-500/30"></span>
|
||||
<span class="text-xs font-bold text-slate-500 uppercase tracking-widest">{{ __('Warning') }}</span>
|
||||
<span class="text-lg font-black text-amber-600" x-text="slots.filter(s => {
|
||||
if(!s.expiry_date) return false;
|
||||
const todayStr = new Date().toISOString().split('T')[0];
|
||||
if (s.expiry_date < todayStr) return false; // 排除已過期
|
||||
const d = new Date(todayStr);
|
||||
const expiry = new Date(s.expiry_date);
|
||||
const diffDays = Math.round((expiry - d) / (1000 * 60 * 60 * 24));
|
||||
return diffDays <= 7;
|
||||
}).length"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span
|
||||
class="w-3 h-3 rounded-full bg-slate-200 dark:bg-slate-700 border border-slate-300 dark:border-slate-600"></span>
|
||||
<span class="text-xs font-bold text-slate-500 uppercase tracking-widest">{{ __('Pending') }}</span>
|
||||
<span class="text-lg font-black text-slate-400"
|
||||
x-text="slots.filter(s => !s.expiry_date).length"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visualization Grid (櫃位圖) -->
|
||||
<div
|
||||
class="luxury-card rounded-[2rem] p-6 sm:p-8 border border-slate-200 dark:border-slate-800 bg-slate-50/30 dark:bg-slate-900/20 relative overflow-hidden">
|
||||
<!-- Background Decorative Pattern -->
|
||||
<div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none"
|
||||
style="background-image: radial-gradient(#00d2ff 1px, transparent 1px); background-size: 32px 32px;">
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4 sm:gap-6 relative z-10">
|
||||
<template x-for="slot in slots" :key="slot.id">
|
||||
<div @click="openSlotEdit(slot)" :class="getSlotColorClass(slot)"
|
||||
class="aspect-[3/4] rounded-2xl p-4 flex flex-col items-center justify-between border transition-all duration-500 cursor-pointer hover:scale-[1.05] hover:-translate-y-1.5 hover:shadow-xl group active:scale-[0.95]">
|
||||
|
||||
<div class="w-full flex justify-between items-start">
|
||||
<span
|
||||
class="text-[10px] font-black px-2 py-0.5 rounded-full bg-white/20 uppercase tracking-tighter"
|
||||
x-text="slot.slot_no"></span>
|
||||
<template x-if="!slot.expiry_date">
|
||||
<span class="w-2 h-2 rounded-full bg-white/40 animate-pulse"></span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Product Image/Icon -->
|
||||
<div
|
||||
class="w-12 h-12 sm:w-16 sm:h-16 rounded-2xl bg-white/10 flex items-center justify-center p-2 mb-2 overflow-hidden backdrop-blur-md">
|
||||
<template x-if="slot.product && slot.product.image_url">
|
||||
<img :src="slot.product.image_url" class="w-full h-full object-contain">
|
||||
</template>
|
||||
<template x-if="!slot.product || !slot.product.image_url">
|
||||
<svg class="w-6 h-6 stroke-[1.5]" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
|
||||
</svg>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="text-center w-full">
|
||||
<template x-if="slot.product">
|
||||
<div class="text-[11px] sm:text-[12px] font-black truncate w-full mb-1 opacity-90"
|
||||
x-text="slot.product.name"></div>
|
||||
</template>
|
||||
<div class="text-[14px] font-black tracking-tighter whitespace-nowrap"
|
||||
x-text="slot.expiry_date ? slot.expiry_date : '{{ __('Pending') }}'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="viewMode === 'fleet'" class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
|
||||
{{ $machines->appends(request()->query())->links('vendor.pagination.luxury') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Offcanvas Log Panel -->
|
||||
<div x-show="showLogPanel" class="fixed inset-0 z-[100] overflow-hidden" style="display: none;"
|
||||
aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
|
||||
@@ -890,10 +648,10 @@ window.machineApp = function(initialTab) {
|
||||
<div class="w-8 h-8 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
{{ __('Edit Expiry') }}
|
||||
{{ __('Edit Stock & Expiry') }}
|
||||
</h3>
|
||||
<button @click="showExpiryModal = false" class="text-slate-400 hover:text-slate-600 transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -927,12 +685,20 @@ window.machineApp = function(initialTab) {
|
||||
</div>
|
||||
|
||||
<!-- Input Fields -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">{{
|
||||
__('Stock') }}</label>
|
||||
<input type="number" x-model="selectedSlot.stock"
|
||||
class="luxury-input w-full py-2.5 px-4 text-base font-black" placeholder="0">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">{{
|
||||
__('Expiry Date') }}</label>
|
||||
<input type="date" x-model="tempExpiry"
|
||||
class="luxury-input w-full py-2.5 px-4 text-base font-black">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">{{
|
||||
|
||||
492
resources/views/admin/remote/stock.blade.php
Normal file
492
resources/views/admin/remote/stock.blade.php
Normal file
@@ -0,0 +1,492 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('content')
|
||||
<script>
|
||||
window.stockApp = function(initialMachineId) {
|
||||
return {
|
||||
machines: @json($machines),
|
||||
searchQuery: '',
|
||||
selectedMachine: null,
|
||||
slots: [],
|
||||
viewMode: initialMachineId ? 'detail' : 'list',
|
||||
loading: false,
|
||||
updating: false,
|
||||
|
||||
// Modal State
|
||||
showEditModal: false,
|
||||
selectedSlot: null,
|
||||
formData: {
|
||||
stock: 0,
|
||||
expiry_date: '',
|
||||
batch_no: '',
|
||||
apply_all_same_product: false
|
||||
},
|
||||
|
||||
async init() {
|
||||
if (initialMachineId) {
|
||||
const machine = this.machines.find(m => m.id == initialMachineId);
|
||||
if (machine) {
|
||||
await this.selectMachine(machine);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async selectMachine(machine) {
|
||||
this.selectedMachine = machine;
|
||||
this.viewMode = 'detail';
|
||||
this.loading = true;
|
||||
this.slots = [];
|
||||
|
||||
// Update URL without refresh
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set('machine_id', machine.id);
|
||||
window.history.pushState({}, '', url);
|
||||
|
||||
try {
|
||||
const res = await fetch(`/admin/machines/${machine.id}/slots-ajax`);
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
this.slots = data.slots;
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Fetch slots error:', e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
backToList() {
|
||||
this.viewMode = 'list';
|
||||
this.selectedMachine = null;
|
||||
this.selectedSlot = null;
|
||||
this.slots = [];
|
||||
|
||||
// Clear machine_id from URL
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.delete('machine_id');
|
||||
window.history.pushState({}, '', url);
|
||||
},
|
||||
|
||||
openEdit(slot) {
|
||||
this.selectedSlot = slot;
|
||||
this.formData = {
|
||||
stock: slot.stock || 0,
|
||||
expiry_date: slot.expiry_date ? slot.expiry_date.split('T')[0] : '',
|
||||
batch_no: slot.batch_no || '',
|
||||
apply_all_same_product: false
|
||||
};
|
||||
this.showEditModal = true;
|
||||
},
|
||||
|
||||
async saveChanges() {
|
||||
this.updating = true;
|
||||
try {
|
||||
const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
||||
const res = await fetch(`/admin/machines/${this.selectedMachine.id}/slots/expiry`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
|
||||
body: JSON.stringify({
|
||||
slot_no: this.selectedSlot.slot_no,
|
||||
...this.formData
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
this.showEditModal = false;
|
||||
// Refresh cabinet
|
||||
await this.selectMachine(this.selectedMachine);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Save error:', e);
|
||||
} finally {
|
||||
this.updating = false;
|
||||
}
|
||||
},
|
||||
|
||||
getSlotColorClass(slot) {
|
||||
if (!slot.expiry_date) return 'bg-slate-50/50 dark:bg-slate-800/50 text-slate-400 border-slate-200/60 dark:border-slate-700/50';
|
||||
const todayStr = new Date().toISOString().split('T')[0];
|
||||
const expiryStr = slot.expiry_date;
|
||||
if (expiryStr < todayStr) {
|
||||
return 'bg-rose-50/60 dark:bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-200 dark:border-rose-500/30 shadow-sm shadow-rose-500/5';
|
||||
}
|
||||
const diffDays = Math.round((new Date(expiryStr) - new Date(todayStr)) / 86400000);
|
||||
if (diffDays <= 7) {
|
||||
return 'bg-amber-50/60 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/30 shadow-sm shadow-amber-500/5';
|
||||
}
|
||||
return 'bg-emerald-50/60 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/30 shadow-sm shadow-emerald-500/5';
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="space-y-4 pb-20 mt-4"
|
||||
x-data="stockApp('{{ $selectedMachine ? $selectedMachine->id : '' }}')"
|
||||
@keydown.escape.window="showEditModal = false">
|
||||
|
||||
<!-- Master View: Machine List -->
|
||||
<template x-if="viewMode === 'list'">
|
||||
<div class="space-y-6 animate-luxury-in">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300">
|
||||
{{ __('Machine Stock') }}
|
||||
</h1>
|
||||
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
|
||||
{{ __('Monitor and manage stock levels across your fleet') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="relative group max-w-md">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 transition-transform duration-300 group-focus-within:scale-110">
|
||||
<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">
|
||||
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" x-model="searchQuery"
|
||||
class="luxury-input w-full pl-11 py-3 text-sm focus:ring-cyan-500/20"
|
||||
placeholder="{{ __('Search by name or S/N...') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<template x-for="machine in machines.filter(m =>
|
||||
m.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
m.serial_no.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)" :key="machine.id">
|
||||
<div @click="selectMachine(machine)"
|
||||
class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/60 dark:border-slate-800/60 hover:border-cyan-500/50 hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 cursor-pointer group flex flex-col justify-between h-full relative overflow-hidden">
|
||||
|
||||
<!-- Background Glow -->
|
||||
<div class="absolute -right-10 -top-10 w-32 h-32 bg-cyan-500/5 rounded-full blur-3xl group-hover:bg-cyan-500/10 transition-colors"></div>
|
||||
|
||||
<div class="flex items-start gap-5 relative z-10">
|
||||
<div class="w-20 h-20 rounded-2xl bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-400 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-inner group-hover:scale-110 transition-transform duration-500 shrink-0">
|
||||
<template x-if="machine.image_urls && machine.image_urls[0]">
|
||||
<img :src="machine.image_urls[0]" class="w-full h-full object-cover">
|
||||
</template>
|
||||
<template x-if="!machine.image_urls || !machine.image_urls[0]">
|
||||
<svg class="w-8 h-8 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
|
||||
</svg>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 x-text="machine.name" class="text-2xl font-black text-slate-800 dark:text-white truncate"></h3>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span x-text="machine.serial_no" class="text-xs font-mono font-bold text-cyan-600 dark:text-cyan-400 tracking-widest uppercase"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-700"></span>
|
||||
<span x-text="machine.location || '{{ __('No Location') }}'" class="text-xs font-bold text-slate-400 uppercase tracking-widest truncate"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex items-center justify-between relative z-10">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-black text-slate-400 uppercase tracking-widest">{{ __('Total Slots') }}</span>
|
||||
<span class="text-xl font-black text-slate-700 dark:text-slate-300" x-text="machine.slots_count || '--'"></span>
|
||||
</div>
|
||||
<div class="w-px h-6 bg-slate-100 dark:bg-slate-800"></div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-xs font-black text-rose-500 uppercase tracking-widest">{{ __('Low Stock') }}</span>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></div>
|
||||
</div>
|
||||
<span class="text-xl font-black text-slate-700 dark:text-slate-300" x-text="machine.low_stock_count || '0'"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-12 h-12 rounded-full bg-white dark:bg-slate-900 flex items-center justify-center text-slate-400 dark:text-slate-500 border border-slate-200/60 dark:border-slate-700/50 shadow-sm group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 transition-all duration-300 transform group-hover:translate-x-1 group-hover:shadow-lg group-hover:shadow-cyan-500/30">
|
||||
<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="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Detail View: Cabinet Management -->
|
||||
<template x-if="viewMode === 'detail'">
|
||||
<div class="space-y-6 animate-luxury-in">
|
||||
<!-- Page Header -->
|
||||
<div class="flex items-center gap-4 mb-2 px-1">
|
||||
<button @click="backToList()"
|
||||
class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all border border-slate-200/50 dark:border-slate-700/50 shadow-sm hover:shadow-md active:scale-95">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">
|
||||
{{ __('Machine Stock') }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Machine Header Info -->
|
||||
<div class="luxury-card rounded-[2.5rem] p-8 md:p-10 flex flex-col md:flex-row md:items-center justify-between gap-8 border border-slate-200/60 dark:border-slate-800/60">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="w-24 h-24 rounded-3xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 overflow-hidden shadow-inner">
|
||||
<template x-if="selectedMachine?.image_urls && selectedMachine?.image_urls[0]">
|
||||
<img :src="selectedMachine.image_urls[0]" class="w-full h-full object-cover">
|
||||
</template>
|
||||
<template x-if="!selectedMachine?.image_urls || !selectedMachine?.image_urls[0]">
|
||||
<svg class="w-12 h-12 stroke-[1.2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<h1 x-text="selectedMachine?.name" class="text-4xl font-black text-slate-800 dark:text-white tracking-tighter leading-tight"></h1>
|
||||
<div class="flex items-center gap-4 mt-3">
|
||||
<span x-text="selectedMachine?.serial_no" class="px-3 py-1 rounded-lg bg-cyan-500/10 text-cyan-500 text-xs font-mono font-bold uppercase tracking-widest border border-cyan-500/20"></span>
|
||||
<div class="flex items-center gap-2 text-slate-400 uppercase tracking-widest text-[10px] font-black">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span x-text="selectedMachine?.location || '{{ __('No Location') }}'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-5">
|
||||
<div class="px-7 py-4 rounded-[1.75rem] bg-slate-50 dark:bg-slate-800/50 flex flex-col items-center min-w-[120px] border border-slate-100 dark:border-slate-800/50">
|
||||
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Total Slots') }}</span>
|
||||
<span class="text-3xl font-black text-slate-700 dark:text-slate-200" x-text="slots.length"></span>
|
||||
</div>
|
||||
<div class="px-7 py-4 rounded-[1.75rem] bg-rose-500/5 border border-rose-500/10 flex flex-col items-center min-w-[120px]">
|
||||
<span class="text-[10px] font-black text-rose-500 uppercase tracking-widest mb-1">{{ __('Low Stock') }}</span>
|
||||
<span class="text-3xl font-black text-rose-600" x-text="slots.filter(s => s != null && s.stock <= 5).length"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cabinet Visualization Grid -->
|
||||
<div class="space-y-6">
|
||||
<!-- Status Legend -->
|
||||
<div class="flex items-center justify-between px-4">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-rose-500 shadow-lg shadow-rose-500/30"></span>
|
||||
<span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">{{ __('Expired') }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-amber-500 shadow-lg shadow-amber-500/30"></span>
|
||||
<span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">{{ __('Warning') }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-emerald-500 shadow-lg shadow-emerald-500/30"></span>
|
||||
<span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">{{ __('Normal') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="luxury-card rounded-[2.5rem] p-8 border border-slate-200/50 dark:border-slate-800/50 bg-white/30 dark:bg-slate-900/40 backdrop-blur-xl relative overflow-hidden min-h-[500px]">
|
||||
<!-- Loading Overlay -->
|
||||
<div x-show="loading" class="absolute inset-0 bg-white/60 dark:bg-slate-900/60 backdrop-blur-md z-20 flex items-center justify-center transition-all duration-500">
|
||||
<div class="flex flex-col items-center gap-6">
|
||||
<div class="w-16 h-16 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin"></div>
|
||||
<span class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.3em] ml-2 animate-pulse">{{ __('Loading Cabinet...') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background Decorative Grid -->
|
||||
<div class="absolute inset-0 opacity-[0.05] pointer-events-none"
|
||||
style="background-image: radial-gradient(#00d2ff 1.2px, transparent 1.2px); background-size: 40px 40px;">
|
||||
</div>
|
||||
|
||||
<!-- Slots Grid -->
|
||||
<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">
|
||||
<template x-for="slot in slots" :key="slot.id">
|
||||
<div @click="openEdit(slot)"
|
||||
:class="getSlotColorClass(slot)"
|
||||
class="min-h-[300px] rounded-[2.5rem] p-5 flex flex-col items-center justify-center border-2 transition-all duration-500 cursor-pointer group hover:scale-[1.08] hover:-translate-y-3 hover:shadow-2xl active:scale-[0.98] relative">
|
||||
|
||||
<!-- Slot Header (Pinned to top) -->
|
||||
<div class="absolute top-4 left-5 right-5 flex justify-between items-center z-20">
|
||||
<div class="px-2.5 py-1 rounded-xl bg-slate-900/10 dark:bg-white/10 backdrop-blur-md border border-slate-900/5 dark:border-white/10 flex-shrink-0">
|
||||
<span class="text-xs font-black uppercase tracking-tighter text-slate-800 dark:text-white" x-text="slot.slot_no"></span>
|
||||
</div>
|
||||
<template x-if="slot.stock <= 2">
|
||||
<div class="px-2.5 py-1.5 rounded-xl bg-rose-500 text-white text-[9px] font-black uppercase tracking-widest shadow-lg shadow-rose-500/30 animate-pulse whitespace-nowrap select-none">
|
||||
{{ __('Low') }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Product Image -->
|
||||
<div class="relative w-20 h-20 mb-4 mt-1">
|
||||
<div class="absolute inset-0 rounded-[2rem] bg-white/20 dark:bg-slate-900/40 backdrop-blur-xl border border-white/30 dark:border-white/5 shadow-inner group-hover:scale-105 transition-transform duration-500 overflow-hidden">
|
||||
<template x-if="slot.product && slot.product.image_url">
|
||||
<img :src="slot.product.image_url" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
</template>
|
||||
<template x-if="!slot.product">
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<svg class="w-8 h-8 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slot Info -->
|
||||
<div class="text-center w-full space-y-3">
|
||||
<template x-if="slot.product">
|
||||
<div class="text-base font-black truncate w-full opacity-90 tracking-tight" x-text="slot.product.name"></div>
|
||||
</template>
|
||||
|
||||
<div class="space-y-3">
|
||||
<!-- Stock Level -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-2xl font-black tracking-tighter leading-none" x-text="slot.stock"></span>
|
||||
<span class="text-xs font-black opacity-30">/</span>
|
||||
<span class="text-sm font-bold opacity-50" x-text="slot.max_stock || 10"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Expiry Date -->
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-base font-black tracking-tight leading-none opacity-80" x-text="slot.expiry_date ? slot.expiry_date.replace(/-/g, '/') : '----/--/--'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Integrated Edit Modal -->
|
||||
<div x-show="showEditModal"
|
||||
class="fixed inset-0 z-[100] overflow-y-auto"
|
||||
style="display: none;"
|
||||
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">
|
||||
|
||||
<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="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showEditModal = false"></div>
|
||||
|
||||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||||
|
||||
<div class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-3xl dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full overflow-visible animate-luxury-in"
|
||||
@click.away="showEditModal = false">
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h3 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight leading-none">
|
||||
{{ __('Edit Slot') }} <span x-text="selectedSlot?.slot_no || ''" class="text-cyan-500"></span>
|
||||
</h3>
|
||||
<template x-if="selectedSlot && selectedSlot.product">
|
||||
<p x-text="selectedSlot?.product?.name" class="text-base font-black text-slate-400 uppercase tracking-widest mt-3 ml-0.5"></p>
|
||||
</template>
|
||||
</div>
|
||||
<button @click="showEditModal = false"
|
||||
class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">
|
||||
<svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Form Controls -->
|
||||
<div class="space-y-6">
|
||||
<!-- Stock Count Widget -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-base font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Stock Quantity') }}</label>
|
||||
<div class="flex items-center gap-4 bg-slate-50 dark:bg-slate-900/50 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/50">
|
||||
<div class="flex-1">
|
||||
<input type="number" x-model="formData.stock" min="0" :max="selectedSlot ? selectedSlot.max_stock : 99"
|
||||
class="w-full bg-transparent border-none p-0 text-5xl font-black text-slate-800 dark:text-white focus:ring-0 placeholder-slate-200">
|
||||
<div class="text-sm font-black text-slate-400 mt-2 uppercase tracking-wider pl-0.5">
|
||||
{{ __('Max Capacity:') }} <span class="text-slate-600 dark:text-slate-300" x-text="selectedSlot?.max_stock || 0"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button @click="formData.stock = 0" class="px-5 py-3 rounded-lg bg-white dark:bg-slate-800 text-slate-400 hover:text-rose-500 border border-slate-200 dark:border-slate-700 transition-all text-sm font-black uppercase tracking-widest active:scale-95 shadow-sm">
|
||||
{{ __('Clear') }}
|
||||
</button>
|
||||
<button @click="formData.stock = selectedSlot?.max_stock || 0" class="px-5 py-3 rounded-lg bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500 hover:text-white border border-cyan-500/20 transition-all text-sm font-black uppercase tracking-widest active:scale-95 shadow-sm">
|
||||
{{ __('Max') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Expiry Date -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Expiry Date') }}</label>
|
||||
<input type="date" x-model="formData.expiry_date"
|
||||
class="luxury-input w-full py-4 px-5">
|
||||
</div>
|
||||
|
||||
<!-- Batch Number -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Batch Number') }}</label>
|
||||
<input type="text" x-model="formData.batch_no" placeholder="B2026-XXXX"
|
||||
class="luxury-input w-full py-4 px-5">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle: Apply to all -->
|
||||
<div class="pt-4 border-t border-slate-100 dark:border-slate-800/50">
|
||||
<label class="relative inline-flex items-center cursor-pointer group">
|
||||
<input type="checkbox" x-model="formData.apply_all_same_product" class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-slate-200 dark:bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500 transition-all duration-300"></div>
|
||||
<span class="ml-4 text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest group-hover:text-cyan-600 transition-colors">
|
||||
{{ __('Apply changes to all identical products in this machine') }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Actions -->
|
||||
<div class="flex justify-end gap-x-4 mt-10 pt-8 border-t border-slate-100 dark:border-slate-800/50">
|
||||
<button type="button" @click="showEditModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
|
||||
<button type="button" @click="saveChanges()" :disabled="updating" class="btn-luxury-primary px-12 min-w-[160px]">
|
||||
<div x-show="updating" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin mr-3"></div>
|
||||
<span x-text="updating ? '{{ __('Saving...') }}' : '{{ __('Confirm Changes') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Hide default number spinners */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e133; border-radius: 10px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e166; }
|
||||
</style>
|
||||
@endsection
|
||||
@@ -186,6 +186,7 @@
|
||||
'audit' => __('Audit Permissions'),
|
||||
'remote' => __('Remote Permissions'),
|
||||
'line' => __('Line Permissions'),
|
||||
'stock' => __('Machine Stock'),
|
||||
default => null,
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user