164 lines
9.7 KiB
TypeScript
164 lines
9.7 KiB
TypeScript
import { state } from '../../core/state';
|
|
import { SoftwareAsset } from '../../core/excelHandler';
|
|
import { openSwDashboardDetail, openSwUsageDetail, openCloudDashboardDetail } from '../../components/Modal/DashboardDetailModal';
|
|
import { normalizeDate } from '../../core/utils';
|
|
|
|
declare var Chart: any;
|
|
|
|
export function renderSwDashboard(container: HTMLElement) {
|
|
let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
|
|
let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
|
|
|
|
let subCost2026 = 0;
|
|
let permCost2026 = 0;
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
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);
|
|
|
|
// 통합 SW 데이터 (클라우드 제외)
|
|
const allSw = [...state.masterData.subSw, ...state.masterData.permSw];
|
|
|
|
allSw.forEach(sw => {
|
|
const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
|
|
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
|
|
const priceStr = sw.금액 ? String(sw.금액).replace(/,/g, '') : '0';
|
|
const price = parseInt(priceStr, 10) || 0;
|
|
|
|
if (sw.type === '구독SW') {
|
|
subQty += qty; subUsed += assigned; subTotal++;
|
|
if (isSWExpiring(sw)) subExp++;
|
|
} else if (sw.type === '영구SW') {
|
|
permQty += qty; permUsed += assigned; permTotal++;
|
|
if (isSWExpiring(sw)) permExp++;
|
|
}
|
|
|
|
// 초기 도입 비용 (2026년 구매건)
|
|
if (sw.구매일 && sw.구매일.startsWith('2026')) {
|
|
if (sw.type === '구독SW') subCost2026 += price;
|
|
else if (sw.type === '영구SW') permCost2026 += price;
|
|
|
|
if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
|
|
if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
|
|
}
|
|
});
|
|
|
|
// 누적 추가 비용 집계 (2026년 계약 업데이트 로그 기반)
|
|
if (state.masterData.logs) {
|
|
state.masterData.logs.forEach(log => {
|
|
if (log.date && log.date.startsWith('2026') && log.cost) {
|
|
const asset = allSw.find(a => a.id === log.assetId);
|
|
if (asset) {
|
|
const cost = Number(log.cost) || 0;
|
|
if (asset.type === '구독SW') subCost2026 += cost;
|
|
else if (asset.type === '영구SW') permCost2026 += cost;
|
|
|
|
if (costByCorp[asset.법인] !== undefined) costByCorp[asset.법인] += cost;
|
|
if (asset.분야 && costByCat[asset.분야] !== undefined) costByCat[asset.분야] += cost;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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="view-container">
|
|
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
|
|
|
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
|
<div class="dashboard-card" data-action="sub-usage" style="cursor:pointer; min-height:auto;">
|
|
<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="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${subPer}%</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: var(--dash-primary);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-card" data-action="perm-usage" style="cursor:pointer; min-height:auto;">
|
|
<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="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${permPer}%</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: var(--dash-primary);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
|
<div class="dashboard-card" data-action="sub-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
|
|
<div style="flex:1;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정<br><span style="font-size:0.8rem;font-weight:400;color:var(--text-muted);">(30일 이내)</span></span>
|
|
<div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${subExp}개 제품</div>
|
|
</div>
|
|
<div style="width: 50px; height: 50px; 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: 40px; height: 40px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
|
<span style="font-size: 0.75rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-card" data-action="perm-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
|
|
<div style="flex:1;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정<br><span style="font-size:0.8rem;font-weight:400;color:var(--text-muted);">(30일 이내)</span></span>
|
|
<div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${permExp}개 제품</div>
|
|
</div>
|
|
<div style="width: 50px; height: 50px; 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: 40px; height: 40px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
|
<span style="font-size: 0.75rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
|
|
|
|
<div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
|
|
<div class="dashboard-card" style="min-height:auto;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 누적 비용 (2026)</span>
|
|
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">갱신 및 추가 비용 합계</div>
|
|
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${subCost2026.toLocaleString()}</div>
|
|
<div style="width: 100%; height: 4px; background-color: var(--primary-color); border-radius: 2px; margin-top: 0.5rem;"></div>
|
|
</div>
|
|
<div class="dashboard-card" style="min-height:auto;">
|
|
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 SW 누적 비용 (2026)</span>
|
|
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">유지보수 및 신규 도입 합계</div>
|
|
<div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${permCost2026.toLocaleString()}</div>
|
|
<div style="width: 100%; height: 4px; background-color: #3b82f6; border-radius: 2px; margin-top: 0.5rem;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
|
|
container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.subSw));
|
|
container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.permSw));
|
|
container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.subSw.filter(sw => isSWExpiring(sw))));
|
|
container.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => openSwDashboardDetail('유지보수 만료 예정 목록', state.masterData.permSw.filter(sw => isSWExpiring(sw))));
|
|
}
|
|
|
|
function isSWExpiring(sw: SoftwareAsset) {
|
|
if (sw.type === '구독SW' && sw.만료일) {
|
|
const endMs = new Date(normalizeDate(sw.만료일)).getTime();
|
|
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
|
return diffDays >= 0 && diffDays <= 30;
|
|
} else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
|
|
try {
|
|
const parts = sw.비고.split('~');
|
|
if (parts.length > 1) {
|
|
const endMs = new Date(normalizeDate(parts[1].trim())).getTime();
|
|
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
|
return diffDays >= 0 && diffDays <= 30;
|
|
}
|
|
} catch { return false; }
|
|
}
|
|
return false;
|
|
}
|