SamProject/sam-react-prod
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [자재투입] 매칭 정보 말풍선 추가 (품목코드/규격/LOT 상태 표시)

Browse Source
This commit is contained in:
김보곤
2026-03-22 09:48:24 +09:00
parent e3c1b824ce
commit 695b4c305e
1 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/production/WorkerScreen/MaterialInputModal.tsx
View File

@@ -14,7 +14,7 @@
*/
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { Loader2, Check, Zap } from 'lucide-react';
import { Loader2, Check, Zap, Info } from 'lucide-react';
import { ContentSkeleton } from '@/components/ui/skeleton';
import {
Dialog,
@@ -547,6 +547,47 @@ export function MaterialInputModal({
{group.materialCode}
</span>
)}
{/* 매칭 정보 말풍선 */}
<span className="relative group/info inline-flex">
<Info className={cn(
"h-3.5 w-3.5 cursor-help",
group.lots.some(l => l.stockLotId !== null) ? "text-blue-400" : "text-red-400"
)} />
<span className="absolute left-0 top-5 z-50 hidden group-hover/info:block w-64 p-2.5 rounded-lg shadow-lg border bg-white text-xs text-gray-700 leading-relaxed">
<span className="font-semibold text-gray-900 block mb-1">자재 매칭 정보</span>
<span className="block text-[11px] text-gray-500 mb-1.5">
품목코드: {group.materialCode || '-'}<br/>
규격: {group.lots[0]?.specification || '-'}<br/>
매칭기준: 품목코드 + 규격 일치하는 입고 LOT 검색 (FIFO)
</span>
{(() => {
const availableLots = group.lots.filter(l => l.stockLotId !== null);
const noStockLots = group.lots.filter(l => l.stockLotId === null);
if (availableLots.length > 0) {
return (
<span className="block">
<span className="text-emerald-600 font-medium">
✓ {availableLots.length}건 매칭 완료
</span>
{availableLots.map((l, i) => (
<span key={i} className="block text-[11px] text-gray-500 ml-2">
LOT {l.lotNo} | 가용 {formatNumber(l.lotAvailableQty)}{group.unit} | FIFO #{l.fifoRank}
</span>
))}
</span>
);
}
return (
<span className="block text-red-600 font-medium">
✗ 매칭 가능한 입고 LOT 없음
<span className="block text-[11px] text-red-500 font-normal mt-0.5">
→ [{group.materialCode}] {group.lots[0]?.specification || ''} 자재를 입고해주세요
</span>
</span>
);
})()}
</span>
</span>
</div>
<div className="flex items-center gap-2 flex-wrap">
<span className="text-xs text-gray-500">