feat: [자재투입] 배정완료 뱃지 토글 필터 — 미배정 항목만 표시

- 배정완료 뱃지 클릭 시 미배정 그룹만 필터링 (토글)
- 다시 클릭하면 전체 표시
- 뱃지 텍스트: "미배정 N건" / "N / M 배정완료" 전환
This commit is contained in:
김보곤
2026-03-22 17:28:39 +09:00
parent 149cf8e923
commit d1c2ea2199

View File

@@ -87,6 +87,7 @@ export function MaterialInputModal({
const [manualAllocations, setManualAllocations] = useState<Map<string, number>>(new Map());
const [isLoading, setIsLoading] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [showUnfulfilledOnly, setShowUnfulfilledOnly] = useState(false);
const materialsLoadedRef = useRef(false);
// 재공품 여부 판별 — 재공품이면 검색 시 원자재(RM)만 조회
@@ -538,13 +539,18 @@ export function MaterialInputModal({
}).length;
const total = materialGroups.length;
return (
<span className={cn(
"text-xs font-semibold px-2.5 py-1 rounded-full",
fulfilled === total ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700"
)}>
<button
onClick={() => setShowUnfulfilledOnly(prev => !prev)}
className={cn(
"text-xs font-semibold px-2.5 py-1 rounded-full cursor-pointer transition-colors",
showUnfulfilledOnly
? "bg-amber-200 text-amber-800 ring-2 ring-amber-400"
: fulfilled === total ? "bg-emerald-100 text-emerald-700 hover:bg-emerald-200" : "bg-amber-100 text-amber-700 hover:bg-amber-200"
)}
>
{fulfilled === total ? <Check className="h-3 w-3 inline mr-0.5" /> : null}
{fulfilled} / {total}
</span>
{showUnfulfilledOnly ? `미배정 ${total - fulfilled}` : `${fulfilled} / ${total} 배정완료`}
</button>
);
})()}
</div>
@@ -642,7 +648,13 @@ export function MaterialInputModal({
</div>
) : (
<div className="space-y-4 flex-1 overflow-y-auto min-h-0">
{materialGroups.map((group, groupIdx) => {
{materialGroups.filter((group) => {
if (!showUnfulfilledOnly) return true;
const target = getGroupTargetQty(group);
if (target <= 0 && group.alreadyInputted <= 0) return false;
const allocated = group.lots.reduce((sum, lot) => sum + (allocations.get(getLotKey(lot, group.groupKey)) || 0), 0);
return allocated < target;
}).map((group, groupIdx) => {
// 같은 카테고리 내 순번 계산 (①②③...)
const categoryIndex = group.category
? materialGroups.slice(0, groupIdx).filter(g => g.category === group.category).length