414 lines
21 KiB
TypeScript
414 lines
21 KiB
TypeScript
import { state } from '../state';
|
|
import { HardwareAsset, SoftwareAsset } from '../excelHandler';
|
|
|
|
declare var Chart: any;
|
|
|
|
/**
|
|
* 대시보드 렌더링 메인 함수
|
|
*/
|
|
export function renderDashboard(mainContent: HTMLElement) {
|
|
mainContent.innerHTML = '';
|
|
|
|
// 기존 차트 리소스 해제
|
|
state.activeCharts.forEach(c => {
|
|
if (c && typeof c.destroy === 'function') c.destroy();
|
|
});
|
|
state.activeCharts = [];
|
|
|
|
if (state.activeCategory === 'hw') {
|
|
renderHwDashboard(mainContent);
|
|
} else {
|
|
renderSwDashboard(mainContent);
|
|
}
|
|
}
|
|
|
|
// --- 하드웨어 대시보드 ---
|
|
function renderHwDashboard(container: HTMLElement) {
|
|
const types = ['개인PC', '서버', '스토리지', '전산비품'];
|
|
const units = ['대', '대', '대', '개'];
|
|
const groups: any = {};
|
|
|
|
types.forEach(t => { groups[t] = { idle: [], active: [], aged: [], normal: [] }; });
|
|
|
|
state.masterData.hw.forEach(a => {
|
|
if (!groups[a.type]) return;
|
|
if (isHwIdle(a)) groups[a.type].idle.push(a);
|
|
else groups[a.type].active.push(a);
|
|
|
|
const ageY = getHwAgeYears(a);
|
|
const isAged = a.type === '전산비품' ? ageY >= 3 : ageY >= 5;
|
|
if (isAged) groups[a.type].aged.push(a);
|
|
else groups[a.type].normal.push(a);
|
|
});
|
|
|
|
// 사용현황 카드 생성
|
|
let usageCards = '';
|
|
types.forEach((t, i) => {
|
|
const total = groups[t].idle.length + groups[t].active.length;
|
|
const used = groups[t].active.length;
|
|
const per = total > 0 ? Math.round((used / total) * 100) : 0;
|
|
const barColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
|
|
|
|
usageCards += `
|
|
<div class="dashboard-card" data-action="idle" data-type="${t}" style="padding: 1.25rem 1.5rem; cursor:pointer;">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 0.5rem;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 사용현황</span>
|
|
</div>
|
|
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">
|
|
${total}${units[i]} 중 ${used}${units[i]} 사용 중 · 유휴 ${groups[t].idle.length}${units[i]}
|
|
</div>
|
|
<div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 0.5rem;">
|
|
<div style="font-size: 2rem; font-weight:700; color:${barColor}; line-height:1;">${per}%</div>
|
|
<div style="font-size:0.75rem; color:${per >= 50 ? '#4a8220' : 'var(--dash-danger)'}; background:${per >= 50 ? 'var(--dash-light)' : '#fef2f2'}; padding:4px 8px; border-radius:4px; font-weight:500;">
|
|
${per >= 50 ? '잘 사용하고 있어요' : '점검이 필요합니다'}
|
|
</div>
|
|
</div>
|
|
<div style="width:100%; height:4px; background-color:var(--border-color); border-radius:2px; overflow:hidden; margin-top:0.25rem;">
|
|
<div style="width:${per}%; height:100%; background-color:${barColor};"></div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
// 노후화 카드 생성
|
|
let agedCards = '';
|
|
types.forEach((t, i) => {
|
|
const total = groups[t].aged.length + groups[t].normal.length;
|
|
const agedCount = groups[t].aged.length;
|
|
const agedPer = total > 0 ? Math.round((agedCount / total) * 100) : 0;
|
|
const threshold = t === '전산비품' ? '3년' : '5년';
|
|
|
|
agedCards += `
|
|
<div class="dashboard-card" data-action="aged" data-type="${t}" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
|
|
<div style="flex:1;">
|
|
<div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 노후화 현황</span>
|
|
<span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">${threshold} 초과</span>
|
|
</div>
|
|
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
|
|
전체 ${total}${units[i]} 중 ${agedCount}${units[i]} 노후 장비
|
|
</div>
|
|
<div style="font-size: 1.5rem; font-weight:700; color:${agedCount > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${agedCount}${units[i]}</div>
|
|
</div>
|
|
<div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${agedPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
|
<div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
|
<span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${agedPer}%</span>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
container.innerHTML = `
|
|
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">사용현황</h3>
|
|
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">${usageCards}</div>
|
|
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">노후화 자산 비율</h3>
|
|
<div class="dashboard-layout-2col">${agedCards}</div>
|
|
`;
|
|
|
|
// 클릭 이벤트 바인딩
|
|
container.querySelectorAll('[data-action="idle"]').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
const t = card.getAttribute('data-type')!;
|
|
openDashboardDetail(`[${t}] 유휴 자산 목록`, groups[t].idle);
|
|
});
|
|
});
|
|
container.querySelectorAll('[data-action="aged"]').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
const t = card.getAttribute('data-type')!;
|
|
openDashboardDetail(`[${t}] 노후 장비 목록`, groups[t].aged);
|
|
});
|
|
});
|
|
}
|
|
|
|
// --- 소프트웨어 대시보드 ---
|
|
function renderSwDashboard(container: HTMLElement) {
|
|
let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
|
|
let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
|
|
|
|
const currentYear = new Date().getFullYear().toString();
|
|
const corps = ['한맥', '삼안', '바론'];
|
|
const categories = ['업무공통', '개발S/W', '디자인', '설계S/W'];
|
|
|
|
const costByCorp: Record<string, number> = { '한맥': 0, '삼안': 0, '바론': 0 };
|
|
const costByCat: Record<string, number> = {};
|
|
categories.forEach(c => costByCat[c] = 0);
|
|
|
|
state.masterData.sw.forEach(sw => {
|
|
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
|
|
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
|
|
const priceStr = sw.금액 ? sw.금액.replace(/,/g, '') : '0';
|
|
const price = parseInt(priceStr, 10) || 0;
|
|
|
|
if (sw.type === '구독SW') {
|
|
subQty += qty; subUsed += assigned; subTotal++;
|
|
if (isSWExpiring(sw)) subExp++;
|
|
} else {
|
|
permQty += qty; permUsed += assigned; permTotal++;
|
|
if (isSWExpiring(sw)) permExp++;
|
|
}
|
|
|
|
// 오늘이 속해있는 년도(2026)의 사용 금액 합계
|
|
if (sw.구매일 && sw.구매일.startsWith(currentYear)) {
|
|
if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
|
|
if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
|
|
}
|
|
});
|
|
|
|
const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
|
|
const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
|
|
const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
|
|
const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
|
|
|
|
container.innerHTML = `
|
|
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
|
<div class="dashboard-card" data-action="sub-usage" style="padding: 1.25rem 1.5rem; cursor:pointer;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 소프트웨어 사용정보</span>
|
|
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${subQty}개의 제품 중 ${subUsed}개 사용 중</div>
|
|
<div style="display:flex; justify-content:space-between; align-items:flex-end;">
|
|
<div style="font-size: 2rem; font-weight:700; color:${subPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)'};">${subPer}%</div>
|
|
</div>
|
|
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
|
<div style="width: ${subPer}%; height: 100%; background-color: ${subPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)'};"></div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-card" data-action="perm-usage" style="padding: 1.25rem 1.5rem; cursor:pointer;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 소프트웨어 사용정보</span>
|
|
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${permQty}개의 제품 중 ${permUsed}개 사용 중</div>
|
|
<div style="display:flex; justify-content:space-between; align-items:flex-end;">
|
|
<div style="font-size: 2rem; font-weight:700; color:${permPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)'};">${permPer}%</div>
|
|
</div>
|
|
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
|
<div style="width: ${permPer}%; height: 100%; background-color: ${permPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)'};"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
|
<div class="dashboard-card" data-action="sub-exp" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
|
|
<div style="flex:1;">
|
|
<div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정</span>
|
|
<span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">30일 이내</span>
|
|
</div>
|
|
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
|
|
전체 ${subTotal}개 제품 중 ${subExp}개 만료 예정
|
|
</div>
|
|
<div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${subExp}개</div>
|
|
</div>
|
|
<div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
|
<div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
|
<span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-card" data-action="perm-exp" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
|
|
<div style="flex:1;">
|
|
<div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정</span>
|
|
<span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">30일 이내</span>
|
|
</div>
|
|
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
|
|
전체 ${permTotal}개 제품 중 ${permExp}개 만료 예정
|
|
</div>
|
|
<div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${permExp}개</div>
|
|
</div>
|
|
<div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
|
<div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
|
<span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">${currentYear}년 소프트웨어 도입 비용</h3>
|
|
<div class="dashboard-layout-2col">
|
|
<div class="dashboard-card" style="padding: 1.5rem;">
|
|
<h4 style="margin: 0 0 1rem 0; font-size: 0.9375rem; color: var(--text-main);">법인별 도입 금액 (원)</h4>
|
|
<canvas id="chart-cost-corp" style="max-height: 250px;"></canvas>
|
|
</div>
|
|
<div class="dashboard-card" style="padding: 1.5rem;">
|
|
<h4 style="margin: 0 0 1rem 0; font-size: 0.9375rem; color: var(--text-main);">분야별 도입 금액 (원)</h4>
|
|
<canvas id="chart-cost-cat" style="max-height: 250px;"></canvas>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 차트 생성
|
|
setTimeout(() => {
|
|
const ctxCorp = (document.getElementById('chart-cost-corp') as HTMLCanvasElement)?.getContext('2d');
|
|
const ctxCat = (document.getElementById('chart-cost-cat') as HTMLCanvasElement)?.getContext('2d');
|
|
|
|
if (ctxCorp && typeof Chart !== 'undefined') {
|
|
const chartCorp = new Chart(ctxCorp, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: corps,
|
|
datasets: [{
|
|
label: '도입 금액',
|
|
data: corps.map(c => costByCorp[c]),
|
|
backgroundColor: '#3b82f6',
|
|
borderRadius: 4,
|
|
barThickness: 20 // 막대 두께 줄임
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { callback: (v: any) => v.toLocaleString() },
|
|
grid: { display: false } // 가로줄 삭제
|
|
},
|
|
x: {
|
|
grid: { display: false }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
state.activeCharts.push(chartCorp);
|
|
}
|
|
|
|
if (ctxCat && typeof Chart !== 'undefined') {
|
|
const chartCat = new Chart(ctxCat, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: categories,
|
|
datasets: [{
|
|
label: '도입 금액',
|
|
data: categories.map(c => costByCat[c]),
|
|
backgroundColor: '#10b981',
|
|
borderRadius: 4,
|
|
barThickness: 20 // 막대 두께 줄임
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { callback: (v: any) => v.toLocaleString() },
|
|
grid: { display: false } // 가로줄 삭제
|
|
},
|
|
x: {
|
|
grid: { display: false }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
state.activeCharts.push(chartCat);
|
|
}
|
|
}, 0);
|
|
|
|
// 클릭 이벤트 바인딩
|
|
container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => {
|
|
openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '구독SW'));
|
|
});
|
|
container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => {
|
|
openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '영구SW'));
|
|
});
|
|
container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => {
|
|
openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '구독SW' && isSWExpiring(sw)));
|
|
});
|
|
container.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => {
|
|
openSwDashboardDetail('유지보수 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '영구SW' && isSWExpiring(sw)));
|
|
});
|
|
}
|
|
|
|
// --- 공통 헬퍼 함수들 ---
|
|
function isHwIdle(a: HardwareAsset) {
|
|
if (a.type === '개인PC') return !a.사용자 || a.사용자.trim() === '' || a.사용자.trim() === '-';
|
|
if (a.type === '스토리지') return !a.담당자_정 || a.담당자_정.trim() === '' || a.담당자_정.trim() === '-';
|
|
return !a.관리자 || a.관리자.trim() === '' || a.관리자.trim() === '-';
|
|
}
|
|
|
|
function getHwAgeYears(a: HardwareAsset) {
|
|
if (!a.구매일) return 0;
|
|
return (Date.now() - new Date(a.구매일).getTime()) / (1000 * 60 * 60 * 24 * 365.25);
|
|
}
|
|
|
|
function isSWExpiring(sw: SoftwareAsset) {
|
|
if (sw.type === '구독SW' && sw.구독일) {
|
|
const parts = sw.구독일.split('~');
|
|
if (parts.length > 1) {
|
|
const endStr = parts[1].trim();
|
|
const endMs = new Date(endStr.replace(/\./g, '-')).getTime();
|
|
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
|
return diffDays >= 0 && diffDays <= 30;
|
|
}
|
|
} else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
|
|
const endStr = sw.비고.split('~')[1].trim();
|
|
const endMs = new Date(endStr.replace(/\./g, '-')).getTime();
|
|
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
|
return diffDays >= 0 && diffDays <= 30;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// --- 대시보드 상세 모달 제어 (main.ts의 함수 재사용 또는 이동 필요) ---
|
|
// 일단 main.ts에 있는 함수를 전역에서 가져와 쓸 수 없으므로, 여기서 직접 정의하거나 main.ts에서 export 해야 합니다.
|
|
// 구조 개선을 위해 main.ts에서 이 함수들도 DashboardView로 옮기는 것이 좋습니다.
|
|
|
|
function openDashboardDetail(title: string, list: HardwareAsset[]) {
|
|
const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
|
|
const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
|
|
const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
|
|
const thead = tbody.closest('table')!.querySelector('thead')!;
|
|
|
|
titleEl.textContent = title;
|
|
thead.innerHTML = `<tr><th>No</th><th>유형</th><th>자산코드</th><th>명칭/모델</th><th>위치</th><th>담당/사용자</th><th>구매일</th><th>금액</th></tr>`;
|
|
tbody.innerHTML = '';
|
|
if (list.length === 0) {
|
|
tbody.innerHTML = `<tr><td colspan="8" style="text-align:center;">해당 조건의 자산이 없습니다.</td></tr>`;
|
|
} else {
|
|
list.forEach((asset, idx) => {
|
|
let manager = asset.관리자 || asset.사용자 || asset.담당자_정 || '-';
|
|
let name = asset.명칭 || asset.모델명 || '-';
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `<td>${idx+1}</td><td>${asset.type}</td><td>${asset.자산코드}</td><td>${name}</td><td>${asset.위치||'-'}</td><td>${manager}</td><td>${asset.구매일||'-'}</td><td>${asset.금액||'-'}</td>`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
|
|
const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
|
|
const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
|
|
const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
|
|
const thead = tbody.closest('table')!.querySelector('thead')!;
|
|
|
|
titleEl.textContent = title;
|
|
thead.innerHTML = `<tr><th>No</th><th>유형</th><th>법인</th><th>제품명</th><th>수량</th><th>금액</th></tr>`;
|
|
tbody.innerHTML = '';
|
|
list.forEach((sw, idx) => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `<td>${idx+1}</td><td>${sw.type}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${sw.수량}</td><td>${sw.금액}</td>`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
|
|
const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
|
|
const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
|
|
const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
|
|
const thead = tbody.closest('table')!.querySelector('thead')!;
|
|
|
|
titleEl.textContent = title;
|
|
thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`;
|
|
tbody.innerHTML = '';
|
|
list.forEach((sw, idx) => {
|
|
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
|
|
const avail = (typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10)) - assigned;
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `<td>${idx+1}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${sw.수량}</td><td>${assigned}</td><td>${avail}</td>`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
|