ui(orders/new): '한정 잔여' → '출고 가능 N개' 배지로 강조

- 카드/리스트 모두: 작은 회색 텍스트 → 에메랄드 배경 테두리 배지로 변경
- 표현: '한정 잔여 N / M' → '출고 가능 N(단위)  / 한정 M'
- 잔여 0 이면 로즈 배경으로 시각 차별
- limit_qty 없는 품목은 표시 안 함 (무제한, 기존 동작 유지)

계산식 그대로: limit_qty - reserved_qty (사이클 누적 합산)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chpark
2026-06-01 00:38:13 +09:00
parent adcc7e3b48
commit 36edafcf16
+9 -6
View File
@@ -734,11 +734,13 @@ function ItemsBrowse() {
)}
{(() => {
const remain = cycleRemainOf(it);
return remain != null ? (
<div className={`text-[10px] font-bold mb-0.5 tabular-nums ${remain <= 0 ? "text-rose-600" : "text-amber-700"}`}>
{fmt(remain)} / {fmt(Number(it.LIMIT_QTY ?? 0))}
if (remain == null) return null;
return (
<div className={`text-[11px] font-extrabold mb-1 tabular-nums px-1.5 py-0.5 rounded border ${remain <= 0 ? "bg-rose-50 text-rose-700 border-rose-200" : "bg-emerald-50 text-emerald-700 border-emerald-300"}`}>
{fmt(remain)}{it.UNIT}
<span className="text-[9px] font-semibold text-slate-500 ml-1">/ {fmt(Number(it.LIMIT_QTY ?? 0))}</span>
</div>
) : null;
);
})()}
{maxQ > 0 && !unlimitedQty && (
<div className="text-[9px] text-sky-700 mb-0.5">1 {fmt(maxQ)}</div>
@@ -873,8 +875,9 @@ function ListView({ items, cart, unlimitedQty, onAdd, onPlus, onMinus, onSetQty,
{it.REQUIRES_DELIVERY === "Y" && <span className="ml-1 px-1 py-0.5 rounded bg-orange-100 text-orange-700 text-[9px] font-bold"></span>}
</div>
{lim > 0 && (
<div className={`text-[10px] font-bold tabular-nums ${cycleRemain <= 0 ? "text-rose-600" : "text-amber-700"}`}>
{fmt(cycleRemain)} / {fmt(lim)}
<div className={`inline-block text-[10px] font-extrabold tabular-nums mt-0.5 px-1.5 py-0.5 rounded border ${cycleRemain <= 0 ? "bg-rose-50 text-rose-700 border-rose-200" : "bg-emerald-50 text-emerald-700 border-emerald-300"}`}>
{fmt(cycleRemain)}{it.UNIT}
<span className="text-[9px] font-semibold text-slate-500 ml-1">/ {fmt(lim)}</span>
</div>
)}
{inCart > 0 && <div className="text-[10px] text-emerald-700 font-bold"> {inCart}</div>}