style: align low stock logic to stock <= max_stock * 0.2 across all views

This commit is contained in:
sky121113 2026-05-19 11:55:26 +08:00
parent 1778d48a00
commit b5259a5b28
3 changed files with 9 additions and 9 deletions

View File

@ -1153,7 +1153,7 @@
<span class="text-[9px] font-black text-rose-500 uppercase tracking-widest mb-0.5">{{
__('Low Stock') }}</span>
<span class="text-2xl font-black text-rose-600"
x-text="inventorySlots.filter(s => s != null && s.stock <= 5).length"></span>
x-text="inventorySlots.filter(s => s != null && s.max_stock > 0 && s.stock <= (s.max_stock * 0.2)).length"></span>
</div>
<div
class="px-5 py-3 rounded-2xl bg-amber-500/5 border border-amber-500/10 flex flex-col items-center min-w-[100px]">
@ -1235,7 +1235,7 @@
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">
<template x-if="slot.max_stock > 0 && slot.stock <= (slot.max_stock * 0.2)">
<div
class="px-2 py-1 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') }}

View File

@ -538,7 +538,7 @@
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>
x-text="slots.filter(s => s != null && s.max_stock > 0 && s.stock <= (s.max_stock * 0.2)).length"></span>
</div>
</div>
</div>
@ -619,7 +619,7 @@
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">
<template x-if="slot.max_stock > 0 && slot.stock <= (slot.max_stock * 0.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') }}

View File

@ -359,7 +359,7 @@
<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'"
:class="(slot.max_stock > 0 && slot.stock <= (slot.max_stock * 0.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>
@ -408,7 +408,7 @@
<div>
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Stock Level') }}</p>
<div class="flex items-baseline gap-1">
<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-lg font-black" :class="(slot.max_stock > 0 && slot.stock <= (slot.max_stock * 0.2)) ? 'text-rose-500' : 'text-slate-700 dark:text-slate-200'" x-text="slot.stock"></span>
<span class="text-[10px] font-bold text-slate-300">/</span>
<span class="text-xs font-bold text-slate-400" x-text="slot.max_stock"></span>
</div>
@ -822,7 +822,7 @@ document.addEventListener('alpine:init', () => {
const today = new Date().toISOString().split('T')[0];
if (slot.expiry_date && slot.expiry_date < today) 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';
if (!slot.product_id || parseInt(slot.stock) === 0) return 'bg-slate-50/50 dark:bg-slate-800/50 text-slate-400 border-slate-200/60 dark:border-slate-700/50';
if (parseInt(slot.stock) <= 2) 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';
if (slot.max_stock > 0 && parseInt(slot.stock) <= (parseInt(slot.max_stock) * 0.2)) 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';
const maxStock = parseInt(slot.max_stock) || 10;
if (parseInt(slot.stock) > maxStock / 2) return 'bg-cyan-50/60 dark:bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border-cyan-200 dark:border-cyan-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';
@ -833,7 +833,7 @@ document.addEventListener('alpine:init', () => {
const today = new Date().toISOString().split('T')[0];
if (slot.expiry_date && slot.expiry_date < today) return base + 'bg-rose-500/[0.06] border-rose-500/20 dark:bg-rose-500/10 dark:border-rose-500/30 hover:shadow-rose-500/10';
if (!slot.product_id || parseInt(slot.stock) === 0) return base + 'bg-slate-500/[0.06] border-slate-500/20 dark:bg-slate-500/10 dark:border-slate-500/30 hover:shadow-slate-500/10';
if (parseInt(slot.stock) <= 2) return base + 'bg-amber-500/[0.06] border-amber-500/20 dark:bg-amber-500/10 dark:border-amber-500/30 hover:shadow-amber-500/10';
if (slot.max_stock > 0 && parseInt(slot.stock) <= (parseInt(slot.max_stock) * 0.2)) return base + 'bg-amber-500/[0.06] border-amber-500/20 dark:bg-amber-500/10 dark:border-amber-500/30 hover:shadow-amber-500/10';
const maxStock = parseInt(slot.max_stock) || 10;
if (parseInt(slot.stock) > maxStock / 2) return base + 'bg-cyan-500/[0.06] border-cyan-500/20 dark:bg-cyan-500/10 dark:border-cyan-500/30 hover:shadow-cyan-500/10';
return base + 'bg-emerald-500/[0.04] border-emerald-500/10 dark:bg-emerald-500/[0.08] dark:border-emerald-500/25 hover:shadow-emerald-500/10';
@ -843,7 +843,7 @@ document.addEventListener('alpine:init', () => {
const today = new Date().toISOString().split('T')[0];
if (slot.expiry_date && slot.expiry_date < today) return 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.4)]';
if (!slot.product_id || parseInt(slot.stock) === 0) return 'bg-slate-400';
if (parseInt(slot.stock) <= 2) return 'bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]';
if (slot.max_stock > 0 && parseInt(slot.stock) <= (parseInt(slot.max_stock) * 0.2)) return 'bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]';
const maxStock = parseInt(slot.max_stock) || 10;
if (parseInt(slot.stock) > maxStock / 2) return 'bg-cyan-500 shadow-[0_0_8px_rgba(6,182,212,0.4)]';
return 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]';