Taehoon/ITAM
2
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

Style: 대시보드 UI 프리미엄 리스타일링 및 카드 구조 도입

Browse Source
This commit is contained in:
주완기
2026-06-17 09:25:16 +09:00
parent 3e69e74bc9
commit 8451101325
1 changed files with 101 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/views/Dashboard/HwDashboard.ts
View File

@@ -43,70 +43,87 @@ export function renderHwDashboard(container: HTMLElement) {
</div> </div>
<!-- 상단 섹션 (전체 높이의 약 45% 차지, stat-card와 donut/aging 나열) --> <!-- 상단 섹션 (전체 높이의 약 45% 차지, stat-card와 donut/aging 나열) -->
<div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.5rem; height: 43%; min-height: 0; flex-shrink: 0; margin-bottom: 0.1rem;"> <div style="display: grid; grid-template-columns: 1fr 1.25fr; gap: 0.75rem; height: 43%; min-height: 0; flex-shrink: 0; margin-bottom: 0.1rem;">
<!-- 상단 좌측: 핵심 지표 카드 --> <!-- 상단 좌측: 핵심 지표 4개 카드 그리드 -->
<div class="stat-card" style="background: transparent; border-radius: 0; padding: 0.5rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.8rem;"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; height: 100%;">
<!-- 1. 보유 자산 수량 --> <!-- 1. 보유 자산 수량 -->
<div style="border-right: 1px solid #EEF2F6; border-bottom: 1px solid #EEF2F6; padding-bottom: 0.4rem; padding-right: 0.8rem; display: flex; flex-direction: column; justify-content: center;"> <div id="metric-card-total" style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1rem 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: all 0.25s ease;"
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1;"> onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.06)';"
<span style="font-size: 1.05rem; font-weight: 800; color: #1E293B; white-space: nowrap;">보유 자산 수량</span> onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)';">
<div style="position: absolute; right: -12px; top: -12px; opacity: 0.07; color: #1E5149; pointer-events: none;">
<i data-lucide="laptop" style="width: 84px; height: 84px;"></i>
</div> </div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem;">
<div id="metric-total-pcs" style="font-size: 2.1rem; font-weight: 900; color: #1E5149; line-height: 1;">0대</div> <span style="display: inline-block; width: 3.5px; height: 13px; background: #1E5149; border-radius: 2px;"></span>
<span style="font-size: 0.95rem; font-weight: 800; color: #475569; letter-spacing: -0.3px;">보유 자산 수량</span>
</div> </div>
<div id="metric-total-pcs" style="font-size: 2.3rem; font-weight: 900; color: #1E5149; line-height: 1.1; margin-top: auto;">0대</div>
</div> </div>
<!-- 2. 사양 부족 --> <!-- 2. 사양 부족 -->
<div id="card-under-spec" style="border-bottom: 1px solid #EEF2F6; padding-bottom: 0.4rem; padding-left: 0.8rem; cursor: pointer; transition: opacity 0.2s; display: flex; flex-direction: column; justify-content: center;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'"> <div id="card-under-spec" style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1rem 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; cursor: pointer; transition: all 0.25s ease;"
<div style="border-left: 4px solid #EF4444; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1;"> onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.06)'; this.style.borderColor='#FCA5A5';"
<span style="font-size: 1.05rem; font-weight: 800; color: #1E293B; white-space: nowrap;">사양 부족</span> onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)'; this.style.borderColor='#E2E8F0';">
<div style="position: absolute; right: -12px; top: -12px; opacity: 0.07; color: #EF4444; pointer-events: none;">
<i data-lucide="alert-triangle" style="width: 84px; height: 84px;"></i>
</div> </div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem;">
<div id="metric-under-spec" style="font-size: 2.1rem; font-weight: 900; color: #EF4444; line-height: 1;">0대</div> <span style="display: inline-block; width: 3.5px; height: 13px; background: #EF4444; border-radius: 2px;"></span>
<span style="font-size: 0.95rem; font-weight: 800; color: #475569; letter-spacing: -0.3px;">사양 부족</span>
</div> </div>
<div id="metric-under-spec" style="font-size: 2.3rem; font-weight: 900; color: #EF4444; line-height: 1.1; margin-top: auto;">0대</div>
</div> </div>
<!-- 3. 오버 스펙 --> <!-- 3. 오버 스펙 -->
<div id="card-over-spec" style="border-right: 1px solid #EEF2F6; padding-top: 0.4rem; padding-right: 0.8rem; cursor: pointer; transition: opacity 0.2s; display: flex; flex-direction: column; justify-content: center;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'"> <div id="card-over-spec" style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1rem 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; cursor: pointer; transition: all 0.25s ease;"
<div style="border-left: 4px solid #F59E0B; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1;"> onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.06)'; this.style.borderColor='#FCD34D';"
<span style="font-size: 1.05rem; font-weight: 800; color: #1E293B; white-space: nowrap;">오버 스펙</span> onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)'; this.style.borderColor='#E2E8F0';">
<div style="position: absolute; right: -12px; top: -12px; opacity: 0.07; color: #F59E0B; pointer-events: none;">
<i data-lucide="zap" style="width: 84px; height: 84px;"></i>
</div> </div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem;">
<div id="metric-over-spec" style="font-size: 2.1rem; font-weight: 900; color: #F59E0B; line-height: 1;">0대</div> <span style="display: inline-block; width: 3.5px; height: 13px; background: #F59E0B; border-radius: 2px;"></span>
<span style="font-size: 0.95rem; font-weight: 800; color: #475569; letter-spacing: -0.3px;">오버 스펙</span>
</div> </div>
<div id="metric-over-spec" style="font-size: 2.3rem; font-weight: 900; color: #F59E0B; line-height: 1.1; margin-top: auto;">0대</div>
</div> </div>
<!-- 4. 윈도우 11 불가 PC --> <!-- 4. 윈도우 11 불가 PC -->
<div id="card-win11-incompatible" style="padding-top: 0.4rem; padding-left: 0.8rem; cursor: pointer; transition: opacity 0.2s; display: flex; flex-direction: column; justify-content: center;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'"> <div id="card-win11-incompatible" style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1rem 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; cursor: pointer; transition: all 0.25s ease;"
<div style="border-left: 4px solid #3B82F6; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1;"> onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.06)'; this.style.borderColor='#93C5FD';"
<span style="font-size: 1.05rem; font-weight: 800; color: #1E293B; white-space: nowrap;">윈도우 11 불가 PC</span> onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)'; this.style.borderColor='#E2E8F0';">
<div style="position: absolute; right: -12px; top: -12px; opacity: 0.07; color: #3B82F6; pointer-events: none;">
<i data-lucide="shield" style="width: 84px; height: 84px;"></i>
</div> </div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem;">
<div id="metric-win11-incompatible" style="font-size: 2.1rem; font-weight: 900; color: #3B82F6; line-height: 1;">0대</div> <span style="display: inline-block; width: 3.5px; height: 13px; background: #3B82F6; border-radius: 2px;"></span>
<span style="font-size: 0.95rem; font-weight: 800; color: #475569; letter-spacing: -0.3px;">윈도우 11 불가 PC</span>
</div> </div>
<div id="metric-win11-incompatible" style="font-size: 2.3rem; font-weight: 900; color: #3B82F6; line-height: 1.1; margin-top: auto;">0대</div>
</div> </div>
</div> </div>
<!-- 상단 우측: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (가로 배치) --> <!-- 상단 우측: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (두 개의 개별 카드로 배치) -->
<div style="background: transparent; border-radius: 0; padding: 0.5rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 0.8rem; min-height: 0;"> <div style="display: grid; grid-template-columns: 1fr 1.15fr; gap: 0.75rem; min-height: 0; height: 100%;">
<!-- 1열: 등급별 보유 비율 도넛 영역 --> <!-- 1열: 등급별 보유 비율 도넛 카드 -->
<div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; min-height: 0; height: 100%;"> <div style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 0.85rem 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.3rem; min-height: 0; height: 100%; transition: all 0.25s ease;"
onmouseover="this.style.boxShadow='0 8px 24px rgba(0,0,0,0.05)';" onmouseout="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)';">
<!-- 서브 제목 --> <!-- 서브 제목 -->
<div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.2rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;"> <div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.15rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
<span style="font-size: 1.15rem; font-weight: 850; color: #1E293B;">등급별 보유 비율</span> <span style="font-size: 1.1rem; font-weight: 850; color: #1E293B;">등급별 보유 비율</span>
</div> </div>
<!-- 도넛 그래프 --> <!-- 도넛 그래프 -->
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;"> <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;">
<div style="width: 105px; height: 105px; position: relative;"> <div style="width: 100px; height: 100px; position: relative;">
<canvas id="chart-overall-donut"></canvas> <canvas id="chart-overall-donut"></canvas>
</div> </div>
<!-- 커스텀 범례 --> <!-- 커스텀 범례 -->
<div style="display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; justify-content: center; align-items: center; margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: #475569; width: 100%;"> <div style="display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; justify-content: center; align-items: center; margin-top: 6px; font-size: 0.8rem; font-weight: 800; color: #64748B; width: 100%;">
<div style="display: flex; align-items: center; gap: 3px;"> <div style="display: flex; align-items: center; gap: 3px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #11302B;"></span> <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #11302B;"></span>
<span>최상급</span> <span>최상급</span>
@@ -125,24 +142,25 @@ export function renderHwDashboard(container: HTMLElement) {
</div> </div>
<div style="display: flex; align-items: center; gap: 3px;"> <div style="display: flex; align-items: center; gap: 3px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #EF4444;"></span> <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #EF4444;"></span>
<span>교체 대상</span> <span>교체</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 2열: 연도별 PC 노후도 및 예측 (표) --> <!-- 2열: 연도별 PC 노후도 및 예측 카드 -->
<div style="display: flex; flex-direction: column; min-height: 0;"> <div style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 0.85rem 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; min-height: 0; height: 100%; transition: all 0.25s ease;"
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;"> onmouseover="this.style.boxShadow='0 8px 24px rgba(0,0,0,0.05)';" onmouseout="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)';">
<span style="font-size: 1.15rem; font-weight: 850; color: #1E293B; white-space: nowrap;">연도별 PC 노후도 및 예측</span> <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; white-space: nowrap;">연도별 PC 노후도 및 예측</span>
</div> </div>
<div style="flex: 1; overflow-y: auto; min-height: 0; padding-right: 0.2rem;"> <div style="flex: 1; overflow-y: auto; min-height: 0; padding-right: 0.1rem;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem;"> <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem;">
<thead style="position: sticky; top: 0; background: white; z-index: 5;"> <thead style="position: sticky; top: 0; background: white; z-index: 5;">
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;"> <tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
<th style="padding: 6px 8px; width: 45%; font-size: 0.95rem;">구분 (연한)</th> <th style="padding: 6px 8px; width: 45%; font-size: 0.92rem; background: white;">구분 (연한)</th>
<th style="padding: 6px 8px; text-align: center; width: 25%; font-size: 0.95rem;">보유</th> <th style="padding: 6px 8px; text-align: center; width: 25%; font-size: 0.92rem; background: white;">보유</th>
<th style="padding: 6px 8px; text-align: center; width: 30%; font-size: 0.95rem;">권장 조치</th> <th style="padding: 6px 8px; text-align: center; width: 30%; font-size: 0.92rem; background: white;">권장 조치</th>
</tr> </tr>
</thead> </thead>
<tbody id="pc-aging-tbody"> <tbody id="pc-aging-tbody">
@@ -156,25 +174,26 @@ export function renderHwDashboard(container: HTMLElement) {
</div> </div>
<!-- 하단 섹션 (등급별 자산 종합 현황 + 바 그래프, 약 53% 차지) --> <!-- 하단 섹션 (등급별 자산 종합 현황 및 사양 적정성 분석 대형 카드) -->
<div style="background: transparent; border-radius: 0; padding: 0.5rem 0.25rem; border: none; display: flex; flex-direction: column; height: 53%; min-height: 0;"> <div style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1.25rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; height: 53%; min-height: 0; transition: all 0.25s ease;"
<div style="display: flex; flex-direction: column; gap: 0.5rem; justify-content: flex-start; padding-left: 0.5rem; height: 100%;"> onmouseover="this.style.boxShadow='0 8px 24px rgba(0,0,0,0.05)';" onmouseout="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)';">
<div style="display: flex; flex-direction: column; gap: 0.6rem; justify-content: flex-start; height: 100%;">
<!-- 메인 제목 --> <!-- 메인 제목 -->
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.2rem; display: flex; align-items: center; line-height: 1; height: 1.6rem; flex-shrink: 0;"> <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.1rem; display: flex; align-items: center; line-height: 1; height: 1.6rem; flex-shrink: 0;">
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합 현황 및 사양 적정성 분석</span> <span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합 현황 및 사양 적정성 분석</span>
</div> </div>
<!-- 종합 매트릭스 테이블 --> <!-- 종합 매트릭스 테이블 -->
<div style="width: 100%; overflow-y: auto; flex: 1;"> <div style="width: 100%; overflow-y: auto; flex: 1; border-radius: 8px; border: 1px solid #E2E8F0;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.1rem;"> <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.05rem;">
<thead style="position: sticky; top: 0; background: #F8FAFC; z-index: 10;"> <thead style="position: sticky; top: 0; background: #F8FAFC; z-index: 10;">
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;"> <tr style="border-bottom: 2px solid #E2E8F0; color: #475569; font-weight: 850;">
<th style="padding: 10px 8px; width: 22%; font-size: 1.1rem; background: #F8FAFC;">구분 (등급)</th> <th style="padding: 12px 10px; width: 22%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">구분 (등급)</th>
<th style="padding: 10px 8px; text-align: center; width: 11%; font-size: 1.1rem; background: #F8FAFC;">보유량</th> <th style="padding: 12px 10px; text-align: center; width: 11%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">보유량</th>
<th style="padding: 10px 8px; text-align: center; width: 11%; font-size: 1.1rem; background: #F8FAFC;">운영중</th> <th style="padding: 12px 10px; text-align: center; width: 11%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">운영중</th>
<th style="padding: 10px 8px; text-align: center; width: 11%; font-size: 1.1rem; background: #F8FAFC;">재고</th> <th style="padding: 12px 10px; text-align: center; width: 11%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">재고</th>
<th style="padding: 10px 8px; text-align: center; width: 11%; color: #EF4444; font-size: 1.1rem; background: #F8FAFC;">구매 필요</th> <th style="padding: 12px 10px; text-align: center; width: 11%; color: #EF4444; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">구매 필요</th>
<th style="padding: 10px 8px; text-align: center; width: 34%; font-size: 1.1rem; background: #F8FAFC;">사양 적정성 분석 (직무 기준)</th> <th style="padding: 12px 10px; text-align: center; width: 34%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">사양 적정성 분석 (직무 기준)</th>
</tr> </tr>
</thead> </thead>
<tbody id="pc-grade-matrix-tbody"> <tbody id="pc-grade-matrix-tbody">
@@ -386,7 +405,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
const data = matrix[gradeKey]; const data = matrix[gradeKey];
const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0; const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0;
const cellStyle = `padding: 10px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.1rem;`; const cellStyle = `padding: 10px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.05rem;`;
const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`; const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
// 사양 적정성 분석 데이터 계산 (운영중인 자산만) // 사양 적정성 분석 데이터 계산 (운영중인 자산만)
@@ -400,31 +419,31 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
let barGraphHtml = ''; let barGraphHtml = '';
if (activeCount > 0) { if (activeCount > 0) {
barGraphHtml = ` barGraphHtml = `
<div style="display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 100%;"> <div style="display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; width: 100%;">
<div style="display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: #E2E8F0; width: 100%; max-width: 220px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);"> <div style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: 100%; max-width: 220px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);">
${under > 0 ? `<div style="width: ${underPct}%; background: #EF4444; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${under}대 (${Math.round(underPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''} ${under > 0 ? `<div style="width: ${underPct}%; background: #EF4444; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${under}대 (${Math.round(underPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
${normal > 0 ? `<div style="width: ${normalPct}%; background: #1E5149; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${normal}대 (${Math.round(normalPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''} ${normal > 0 ? `<div style="width: ${normalPct}%; background: #1E5149; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${normal}대 (${Math.round(normalPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
${over > 0 ? `<div style="width: ${overPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${over}대 (${Math.round(overPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''} ${over > 0 ? `<div style="width: ${overPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${over}대 (${Math.round(overPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
</div> </div>
<div style="display: flex; gap: 8px; font-size: 0.8rem; font-weight: 750; color: #64748B;"> <div style="display: flex; gap: 6px; align-items: center;">
${under > 0 ? `<span style="color: #EF4444; cursor: pointer;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="사양 부족">부족 ${under}</span>` : ''} ${under > 0 ? `<span style="padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 800; background: #FEE2E2; color: #EF4444; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">부족 ${under}</span>` : ''}
${normal > 0 ? `<span style="color: #1E5149; cursor: pointer;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="적정">적정 ${normal}</span>` : ''} ${normal > 0 ? `<span style="padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 800; background: #D1FAE5; color: #065F46; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">적정 ${normal}</span>` : ''}
${over > 0 ? `<span style="color: #F59E0B; cursor: pointer;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="오버스펙">오버 ${over}</span>` : ''} ${over > 0 ? `<span style="padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 800; background: #FEF3C7; color: #92400E; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">오버 ${over}</span>` : ''}
</div> </div>
</div> </div>
`; `;
} else { } else {
barGraphHtml = `<span style="font-size: 0.9rem; color: #94A3B8; font-weight: 500;">운영중 자산 없음</span>`; barGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
} }
return ` return `
<tr style="border-bottom: 1px solid #F1F5F9;"> <tr style="border-bottom: 1px solid #E2E8F0;">
<td style="padding: 10px 8px; font-weight: 800; color: ${color}; font-size: 1.1rem;">${label}</td> <td style="padding: 12px 10px; font-weight: 800; color: ${color}; font-size: 1.05rem;">${label}</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:0.9rem; color:#64748B; font-weight:500;">(${totalRate}%)</span></td> <td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:0.88rem; color:#64748B; font-weight:500;">(${totalRate}%)</span></td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="active" style="${cellStyle}" ${hoverEvents}>${data.active}대</td> <td class="matrix-cell" data-grade="${gradeKey}" data-type="active" style="${cellStyle}" ${hoverEvents}>${data.active}대</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="stock" style="${cellStyle}" ${hoverEvents}>${data.stock}대</td> <td class="matrix-cell" data-grade="${gradeKey}" data-type="stock" style="${cellStyle}" ${hoverEvents}>${data.stock}대</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="under" style="${cellStyle} color: #EF4444;" ${hoverEvents}>${shortage}대</td> <td class="matrix-cell" data-grade="${gradeKey}" data-type="under" style="${cellStyle} color: #EF4444;" ${hoverEvents}>${shortage}대</td>
<td style="padding: 10px 8px; text-align: center; font-weight: 700; font-size: 1.1rem; vertical-align: middle;"> <td style="padding: 10px 8px; text-align: center; font-weight: 700; font-size: 1.05rem; vertical-align: middle;">
${barGraphHtml} ${barGraphHtml}
</td> </td>
</tr> </tr>
@@ -456,24 +475,24 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
let totBarGraphHtml = ''; let totBarGraphHtml = '';
if (totalActive > 0) { if (totalActive > 0) {
totBarGraphHtml = ` totBarGraphHtml = `
<div style="display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 100%;"> <div style="display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; width: 100%;">
<div style="display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: #E2E8F0; width: 100%; max-width: 220px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);"> <div style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: 100%; max-width: 220px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);">
${totUnder > 0 ? `<div style="width: ${totUnderPct}%; background: #EF4444; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${totUnder}대 (${Math.round(totUnderPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''} ${totUnder > 0 ? `<div style="width: ${totUnderPct}%; background: #EF4444; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${totUnder}대 (${Math.round(totUnderPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
${totNormal > 0 ? `<div style="width: ${totNormalPct}%; background: #1E5149; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${totNormal}대 (${Math.round(totNormalPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="적정" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''} ${totNormal > 0 ? `<div style="width: ${totNormalPct}%; background: #1E5149; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${totNormal}대 (${Math.round(totNormalPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="적정" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
${totOver > 0 ? `<div style="width: ${totOverPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${totOver}대 (${Math.round(totOverPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''} ${totOver > 0 ? `<div style="width: ${totOverPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${totOver}대 (${Math.round(totOverPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
</div> </div>
<div style="display: flex; gap: 8px; font-size: 0.8rem; font-weight: 750; color: #64748B;"> <div style="display: flex; gap: 6px; align-items: center;">
${totUnder > 0 ? `<span style="color: #EF4444; cursor: pointer;" class="spec-text-btn" data-grade="all" data-spec-status="사양 부족">부족 ${totUnder}</span>` : ''} ${totUnder > 0 ? `<span style="padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 800; background: #FEE2E2; color: #EF4444; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">부족 ${totUnder}</span>` : ''}
${totNormal > 0 ? `<span style="color: #1E5149; cursor: pointer;" class="spec-text-btn" data-grade="all" data-spec-status="적정">적정 ${totNormal}</span>` : ''} ${totNormal > 0 ? `<span style="padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 800; background: #D1FAE5; color: #065F46; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="all" data-spec-status="적정" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">적정 ${totNormal}</span>` : ''}
${totOver > 0 ? `<span style="color: #F59E0B; cursor: pointer;" class="spec-text-btn" data-grade="all" data-spec-status="오버스펙">오버 ${totOver}</span>` : ''} ${totOver > 0 ? `<span style="padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 800; background: #FEF3C7; color: #92400E; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">오버 ${totOver}</span>` : ''}
</div> </div>
</div> </div>
`; `;
} else { } else {
totBarGraphHtml = `<span style="font-size: 0.9rem; color: #94A3B8; font-weight: 500;">운영중 자산 없음</span>`; totBarGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
} }
const cellStyleHeader = `padding: 10px 8px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.1rem;`; const cellStyleHeader = `padding: 12px 10px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.05rem;`;
const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`; const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`;
matrixTbody.innerHTML = ` matrixTbody.innerHTML = `
@@ -483,12 +502,12 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)} ${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)}
${renderMatrixRow('replace', '교체 대상 PC (20점 미만 또는 Win11 불가)', '#EF4444', replaceShortage)} ${renderMatrixRow('replace', '교체 대상 PC (20점 미만 또는 Win11 불가)', '#EF4444', replaceShortage)}
<tr style="background: #F8FAFC; border-top: 2px solid #E2E8F0; font-weight: 800;"> <tr style="background: #F8FAFC; border-top: 2px solid #E2E8F0; font-weight: 800;">
<td style="padding: 10px 8px; color: #1E293B; font-weight: 800; font-size: 1.1rem;">합계 (Total)</td> <td style="padding: 12px 10px; color: #1E293B; font-weight: 800; font-size: 1.05rem;">합계 (Total)</td>
<td class="matrix-cell" data-grade="all" data-type="total" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalPcs}대 <span style="font-size:0.95rem; color:#64748B; font-weight:600;">(100%)</span></td> <td class="matrix-cell" data-grade="all" data-type="total" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalPcs}대 <span style="font-size:0.88rem; color:#64748B; font-weight:600;">(100%)</span></td>
<td class="matrix-cell" data-grade="all" data-type="active" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalActive}대</td> <td class="matrix-cell" data-grade="all" data-type="active" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalActive}대</td>
<td class="matrix-cell" data-grade="all" data-type="stock" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalStock}대</td> <td class="matrix-cell" data-grade="all" data-type="stock" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalStock}대</td>
<td class="matrix-cell" data-grade="all" data-type="under" style="${cellStyleHeader} color: #EF4444;" ${hoverEventsHeader}>${totalShortage}대</td> <td class="matrix-cell" data-grade="all" data-type="under" style="${cellStyleHeader} color: #EF4444;" ${hoverEventsHeader}>${totalShortage}대</td>
<td style="padding: 10px 8px; text-align: center; font-weight: 800; font-size: 1.1rem; background: #F8FAFC; vertical-align: middle;"> <td style="padding: 10px 8px; text-align: center; font-weight: 800; font-size: 1.05rem; background: #F8FAFC; vertical-align: middle;">
${totBarGraphHtml} ${totBarGraphHtml}
</td> </td>
</tr> </tr>