772c7a62e8
1. 優化「目前庫存」分頁：修復平板模式下卡片展開導致的高度拉伸問題，並確保 Alpine.js 變數 (localCardOpen) 作用域隔離。 2. 優化「異動紀錄」分頁：將時間戳記從獨立行移入 2x2 內容網格，補上「時間」標題並修正字體顏色。 3. 優化「進貨單管理」分頁：卡片日期顯示格式修正為完整時分秒 (Y-m-d H:i:s)。 4. 統一搜尋佈局：將庫存管理各分頁與機台補貨單的「搜尋」與「重置」按鈕群組化，確保在窄螢幕換行時能保持連動。 5. 修正進貨單詳情：優化側邊欄 (Slide-over) 的資料載入邏輯與多語系顯示。
548 lines
35 KiB
PHP
548 lines
35 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<div class="space-y-4 pb-20" x-data="{
|
|
viewMode: '{{ request('machine_id') ? 'detail' : 'list' }}',
|
|
displayMode: 'table', {{-- grid or table --}}
|
|
selectedMachine: null,
|
|
slots: [],
|
|
loading: false,
|
|
|
|
async init() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const machineId = urlParams.get('machine_id');
|
|
if (machineId) {
|
|
await this.viewSlots({id: machineId});
|
|
}
|
|
},
|
|
|
|
async viewSlots(machine) {
|
|
this.selectedMachine = machine;
|
|
this.viewMode = 'detail';
|
|
this.loading = true;
|
|
this.slots = [];
|
|
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('machine_id', machine.id);
|
|
window.history.pushState({}, '', url);
|
|
|
|
try {
|
|
const res = await fetch(`/admin/warehouses/machine-inventory/${machine.id}/slots`);
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
this.slots = data.slots || [];
|
|
this.selectedMachine = data.machine;
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
} catch(e) {
|
|
console.error('Fetch error:', e);
|
|
this.slots = [];
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
backToList() {
|
|
this.viewMode = 'list';
|
|
this.selectedMachine = null;
|
|
this.slots = [];
|
|
const url = new URL(window.location);
|
|
url.searchParams.delete('machine_id');
|
|
window.history.pushState({}, '', url);
|
|
},
|
|
|
|
get activeSlotsCount() { return this.slots.filter(s => s.product_id != null).length; },
|
|
get emptySlotsCount() { return this.slots.filter(s => s.product_id == null).length; },
|
|
get highStockSlotsCount() {
|
|
return this.slots.filter(s => s.product_id != null && (s.stock / (s.max_stock || 1)) >= 0.5).length;
|
|
},
|
|
get totalStock() { return this.slots.reduce((acc, s) => acc + (parseInt(s.stock) || 0), 0); },
|
|
get totalCapacity() { return this.slots.reduce((acc, s) => acc + (parseInt(s.max_stock) || 10), 0); },
|
|
get overallFillRate() {
|
|
if (this.totalCapacity === 0) return 0;
|
|
return Math.round((this.totalStock / this.totalCapacity) * 100);
|
|
},
|
|
|
|
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';
|
|
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';
|
|
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';
|
|
}
|
|
}">
|
|
{{-- Header --}}
|
|
<div class="flex items-center gap-4">
|
|
<template x-if="viewMode === 'detail'">
|
|
<button @click="backToList()"
|
|
class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all border border-slate-200/50 dark:border-slate-700/50 shadow-sm hover:shadow-md active:scale-95">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{
|
|
__('Machine Inventory Overview') }}</h1>
|
|
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{
|
|
__('Real-time slot-level inventory across all machines') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- List Mode --}}
|
|
<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">
|
|
<div class="flex flex-wrap items-center justify-between gap-4 mb-8">
|
|
<form action="{{ route('admin.warehouses.machine-inventory') }}" method="GET"
|
|
class="flex flex-wrap items-center gap-4 flex-1">
|
|
<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">
|
|
<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') }}"
|
|
class="py-2.5 pl-12 pr-6 block w-full luxury-input"
|
|
placeholder="{{ __('Search machines...') }}">
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 flex-none ml-auto sm:ml-0">
|
|
<button type="submit"
|
|
class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 group transition-all active:scale-95"
|
|
title="{{ __('Search') }}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button type="button" @click="
|
|
$el.closest('form').querySelectorAll('input[type=text]').forEach(i => i.value = '');
|
|
$el.closest('form').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"
|
|
title="{{ __('Reset') }}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-separate border-spacing-y-0">
|
|
<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
|
|
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 class="mt-6 pt-6 border-t border-slate-50 dark:border-slate-800/50">{{
|
|
$machines->links('vendor.pagination.luxury') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Detail Mode --}}
|
|
<div x-show="viewMode === 'detail'" class="space-y-8 animate-luxury-in" x-cloak>
|
|
<!-- Statistics Dashboard -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
|
|
<!-- Left: Overall Progress -->
|
|
<div
|
|
class="lg:col-span-5 luxury-card rounded-[2.5rem] p-10 flex items-center justify-center relative overflow-hidden group">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700">
|
|
</div>
|
|
<div class="relative flex flex-col items-center">
|
|
<div class="relative w-48 h-48">
|
|
<!-- SVG Circle Progress -->
|
|
<svg class="w-full h-full -rotate-90 transform" viewBox="0 0 100 100">
|
|
<circle class="text-slate-100 dark:text-slate-700/50 stroke-current" stroke-width="10"
|
|
fill="transparent" r="40" cx="50" cy="50"></circle>
|
|
<circle class="text-emerald-500 stroke-current transition-all duration-1000 ease-out"
|
|
stroke-width="10" stroke-dasharray="251.2"
|
|
:stroke-dashoffset="251.2 - (251.2 * Math.min(overallFillRate, 100)) / 100"
|
|
stroke-linecap="round" fill="transparent" r="40" cx="50" cy="50"></circle>
|
|
</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span class="text-5xl font-black text-slate-800 dark:text-white tracking-tighter"
|
|
x-text="overallFillRate + '%'"></span>
|
|
<span class="text-sm font-black text-slate-400 uppercase tracking-[0.2em] mt-1"
|
|
x-text="totalStock + ' / ' + totalCapacity"></span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 text-center">
|
|
<span class="text-base font-black text-slate-500 uppercase tracking-[0.3em]">{{ __('總庫存量')
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Stats Cards -->
|
|
<div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
<!-- Machine Info Card -->
|
|
<div
|
|
class="sm:col-span-2 luxury-card rounded-[2rem] p-6 border-slate-200/50 dark:border-slate-800/50 flex items-center justify-between">
|
|
<div class="flex items-center gap-6">
|
|
<div
|
|
class="w-16 h-16 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 overflow-hidden">
|
|
<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-8 h-8" 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>
|
|
<h2 x-text="selectedMachine?.name"
|
|
class="text-2xl font-black text-slate-800 dark:text-white tracking-tight leading-tight">
|
|
</h2>
|
|
<span x-text="selectedMachine?.serial_no"
|
|
class="text-sm font-mono font-bold text-slate-400 uppercase tracking-widest mt-1 block"></span>
|
|
</div>
|
|
</div>
|
|
<div class="hidden sm:flex items-center gap-4">
|
|
<div class="text-right">
|
|
<span class="text-sm font-black text-slate-400 uppercase tracking-widest block mb-1">{{
|
|
__('Location') }}</span>
|
|
<span x-text="selectedMachine?.location || '{{ __('No Location') }}'"
|
|
class="text-base font-bold text-slate-600 dark:text-slate-300"></span>
|
|
</div>
|
|
<a :href="'{{ route('admin.warehouses.replenishments') }}?auto_machine_id=' + selectedMachine?.id"
|
|
class="px-4 py-2.5 rounded-xl text-xs font-black bg-cyan-500/10 text-cyan-500 border border-cyan-500/20 hover:bg-cyan-500 hover:text-white transition-all flex items-center gap-2 uppercase tracking-widest">
|
|
<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>
|
|
{{ __('Auto Replenishment') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Slots -->
|
|
<div
|
|
class="luxury-card rounded-[2rem] p-6 border-emerald-500/10 bg-emerald-500/[0.02] hover:translate-y-0 transition-transform duration-300">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div
|
|
class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-500">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-2xl font-black text-emerald-600 dark:text-emerald-400"
|
|
x-text="activeSlotsCount"></span>
|
|
</div>
|
|
<span class="text-sm font-black text-slate-500 uppercase tracking-widest">{{ __('Active Slots')
|
|
}}</span>
|
|
</div>
|
|
|
|
<!-- Empty Slots -->
|
|
<div
|
|
class="luxury-card rounded-[2rem] p-6 border-slate-500/10 bg-slate-500/[0.02] hover:translate-y-0 transition-transform duration-300">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div
|
|
class="w-10 h-10 rounded-xl bg-slate-500/10 flex items-center justify-center text-slate-500">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
|
|
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-2xl font-black text-slate-600 dark:text-slate-400"
|
|
x-text="emptySlotsCount"></span>
|
|
</div>
|
|
<span class="text-sm font-black text-slate-500 uppercase tracking-widest">{{ __('Empty Slots')
|
|
}}</span>
|
|
</div>
|
|
|
|
<!-- High Stock -->
|
|
<div
|
|
class="luxury-card rounded-[2rem] p-6 border-cyan-500/10 bg-cyan-500/[0.02] sm:col-span-2 hover:translate-y-0 transition-transform duration-300">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="w-10 h-10 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-500">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
|
|
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-black text-slate-500 uppercase tracking-widest">{{ __('Stock Level
|
|
> 50%') }}</span>
|
|
</div>
|
|
<span class="text-2xl font-black text-cyan-600 dark:text-cyan-400"
|
|
x-text="highStockSlotsCount"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cabinet Control & Display Toggle -->
|
|
<div class="flex items-center justify-between px-4">
|
|
<div class="flex items-center gap-6">
|
|
<button @click="displayMode = 'table'"
|
|
:class="displayMode === 'table' ? 'text-cyan-500 bg-cyan-500/10' : 'text-slate-400 hover:text-slate-600'"
|
|
class="flex items-center gap-2 px-4 py-2 rounded-xl transition-all font-black text-sm uppercase tracking-widest">
|
|
<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="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
|
</svg>
|
|
{{ __('Table View') }}
|
|
</button>
|
|
<button @click="displayMode = 'grid'"
|
|
:class="displayMode === 'grid' ? 'text-cyan-500 bg-cyan-500/10' : 'text-slate-400 hover:text-slate-600'"
|
|
class="flex items-center gap-2 px-4 py-2 rounded-xl transition-all font-black text-sm uppercase tracking-widest">
|
|
<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="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>
|
|
{{ __('Grid View') }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span>
|
|
<span class="text-sm font-black text-slate-400 uppercase tracking-widest">{{ __('Expired') }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
|
|
<span class="text-sm font-black text-slate-400 uppercase tracking-widest">{{ __('Low Stock')
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid View -->
|
|
<div x-show="displayMode === 'grid'" class="space-y-6">
|
|
<div
|
|
class="luxury-card rounded-[2.5rem] p-8 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-[400px] hover:translate-y-0 transition-transform duration-300">
|
|
<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="w-12 h-12 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin">
|
|
</div>
|
|
</div>
|
|
|
|
<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 :class="getSlotColorClass(slot)"
|
|
class="min-h-[260px] rounded-[2.5rem] p-5 flex flex-col items-center justify-center border-2 transition-all duration-500 group relative hover:scale-105 hover:-translate-y-1 hover:shadow-xl">
|
|
|
|
<div
|
|
class="absolute top-4 left-5 px-3 py-1 rounded-xl bg-slate-900/5 dark:bg-white/10 backdrop-blur-md">
|
|
<span class="text-sm font-black tracking-tighter text-slate-800 dark:text-white"
|
|
x-text="slot.slot_no"></span>
|
|
</div>
|
|
|
|
<div class="relative w-16 h-16 mb-4 mt-2">
|
|
<div
|
|
class="absolute inset-0 rounded-2xl bg-white/20 dark:bg-slate-900/40 backdrop-blur-xl border border-white/30 overflow-hidden shadow-inner">
|
|
<template x-if="slot.product && slot.product.image_url">
|
|
<img :src="slot.product.image_url" class="w-full h-full object-cover">
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center w-full">
|
|
<div class="text-base font-black truncate w-full opacity-90 tracking-tight"
|
|
x-text="slot.product?.name || '{{ __('Empty') }}'"></div>
|
|
<div class="flex items-baseline justify-center gap-1 mt-2">
|
|
<span class="text-2xl font-black tracking-tighter" x-text="slot.stock"></span>
|
|
<span class="text-sm font-black opacity-30">/</span>
|
|
<span class="text-sm font-bold opacity-50" x-text="slot.max_stock"></span>
|
|
</div>
|
|
<div class="text-sm font-black tracking-widest opacity-40 uppercase mt-2"
|
|
x-text="slot.expiry_date || '----/--/--'"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table View -->
|
|
<div x-show="displayMode === 'table'" class="animate-luxury-in" x-cloak>
|
|
<div
|
|
class="luxury-card rounded-[2.5rem] overflow-hidden border-slate-200/50 dark:border-slate-800/50 shadow-xl hover:translate-y-0 transition-transform duration-300">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="bg-slate-50 dark:bg-slate-900/50">
|
|
<th class="px-8 py-5 text-sm font-black text-slate-400 uppercase tracking-[0.2em]">{{
|
|
__('Slot') }}</th>
|
|
<th class="px-8 py-5 text-sm font-black text-slate-400 uppercase tracking-[0.2em]">{{
|
|
__('Product') }}</th>
|
|
<th class="px-8 py-5 text-sm font-black text-slate-400 uppercase tracking-[0.2em]">{{
|
|
__('Barcode') }}</th>
|
|
<th
|
|
class="px-8 py-5 text-sm font-black text-slate-400 uppercase tracking-[0.2em] text-center">
|
|
{{ __('Stock Level') }} / {{ __('Max Stock') }}</th>
|
|
<th
|
|
class="px-8 py-5 text-sm font-black text-slate-400 uppercase tracking-[0.2em] text-right">
|
|
{{ __('Sale Price') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/40">
|
|
<template x-for="slot in slots" :key="slot.id">
|
|
<tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors">
|
|
<td class="px-8 py-6">
|
|
<span
|
|
class="px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-600 dark:text-slate-300"
|
|
x-text="slot.slot_no"></span>
|
|
</td>
|
|
<td class="px-8 py-6">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="w-12 h-12 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800 flex items-center justify-center overflow-hidden">
|
|
<template x-if="slot.product?.image_url">
|
|
<img :src="slot.product.image_url" class="w-full h-full object-cover">
|
|
</template>
|
|
</div>
|
|
<div>
|
|
<div class="text-base font-black text-slate-800 dark:text-slate-200"
|
|
x-text="slot.product?.name || '{{ __('Empty Slot') }}'"></div>
|
|
<div class="text-sm font-bold text-slate-400 uppercase tracking-widest mt-1"
|
|
x-text="slot.expiry_date ? '{{ __('Expiry') }}: ' + slot.expiry_date : ''">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-8 py-6">
|
|
<span class="text-sm font-mono font-bold text-slate-400"
|
|
x-text="slot.product?.barcode || '--'"></span>
|
|
</td>
|
|
<td class="px-8 py-6 text-center">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<span class="text-lg font-black"
|
|
:class="slot.stock <= 2 ? 'text-rose-500' : 'text-slate-700 dark:text-slate-200'"
|
|
x-text="slot.stock"></span>
|
|
<span class="text-xs font-bold text-slate-300">/</span>
|
|
<span class="text-sm font-bold text-slate-400" x-text="slot.max_stock"></span>
|
|
</div>
|
|
</td>
|
|
<td class="px-8 py-6 text-right">
|
|
<span class="text-base font-black text-emerald-500"
|
|
x-text="'$' + Math.floor(slot.product?.price || 0)"></span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection |