mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[STYLE] 修復機台庫存管理功能並全面升級極簡奢華風 UI
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 56s
Details

Browse Source 
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:
sky121113
2026-04-01 15:26:21 +08:00
parent 7c47ad67fa
commit 969e4df629
10 changed files with 1139 additions and 987 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
resources/views/admin/machines/index.blade.php
View File

@@ -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;
await this.openCabinet(this.selectedMachine.id);
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">
@@ -332,243 +327,6 @@ window.machineApp = function(initialTab) {
{{ $machines->appends(request()->query())->links('vendor.pagination.luxury') }}
</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;"
@@ -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,11 +685,19 @@ window.machineApp = function(initialTab) {
</div>
<!-- Input Fields -->
<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 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>