@dssp/dkpi 1.0.0-alpha.6 → 1.0.0-alpha.60

package/dist-client/pages/sv-project-detail.js

@@ -0,0 +1,1081 @@
+import { __decorate, __metadata } from "tslib";
+import { navigate, PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { PROJECT_STATE } from './sv-project-list';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+import '../components/kpi-boxplot-chart';
+import '../components/kpi-single-boxplot-chart';
+import '../components/kpi-radar-chart';
+import '../components/kpi-lookup-chart';
+let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(PageView) {
+    constructor() {
+        super(...arguments);
+        this.project = {};
+        this.kpiComprehensiveStats = [];
+        this.kpiYComprehensiveStats = [];
+        this.projectXKpiValues = [];
+        this.showLookupChart = false;
+        this.selectedKpi = null;
+    }
+    get context() {
+        var _a;
+        return {
+            title: this.project ? `프로젝트 상세 정보 - ${(_a = this.project) === null || _a === void 0 ? void 0 : _a.name}` : '프로젝트 상세 정보'
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return html `
+      <div content>
+        <div left>
+          <div class="card">
+            <div class="card-title">
+              <div>${this.project.name}</div>
+              <div class="triangle"></div>
+            </div>
+
+            <div class="top-info" style="margin-top: 10px;">
+              <img pic src=${((_a = this.project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || '/assets/images/project-image.png'} alt="project" />
+              <div class="info">
+                <div class="row">
+                  <div class="label">• 주소</div>
+                  <div class="value">${(_b = this.project.buildingComplex) === null || _b === void 0 ? void 0 : _b.address}</div>
+                </div>
+                <div class="row">
+                  <div class="label">• 공사기간</div>
+                  <div class="value">${this.project.startDate} ~ ${this.project.endDate}</div>
+                </div>
+                <div class="row">
+                  <div class="label">• 현장상태</div>
+                  <div class="value status-value">${PROJECT_STATE[this.project.state]}</div>
+                </div>
+                <div class="row">
+                  <div class="label">• 요청상세</div>
+                  <div class="value bold">000</div>
+                </div>
+                <div class="row">
+                  <div class="label">• 알람</div>
+                  <div class="value">000</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="detail-grid">
+              <div class="grid-item row">
+                <div class="label">• 공사비</div>
+                <div class="value">${((_d = (_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.constructionCost) === null || _d === void 0 ? void 0 : _d.toLocaleString()) || '-'} 원</div>
+              </div>
+              <div class="grid-item row">
+                <div class="label">• 연면적</div>
+                <div class="value">${((_f = (_e = this.project.buildingComplex) === null || _e === void 0 ? void 0 : _e.area) === null || _f === void 0 ? void 0 : _f.toLocaleString()) || '-'} ㎡</div>
+              </div>
+              <div class="grid-item row">
+                <div class="label">• 용적률</div>
+                <div class="value">000 %</div>
+              </div>
+              <div class="grid-item row">
+                <div class="label">• 투입인력</div>
+                <div class="value">000 명</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-title">
+              <div>입력 대기 중</div>
+              <div class="triangle"></div>
+            </div>
+            <div class="sub-desc">
+              현재 입력 기한이 도래했거나, 입력이 지연되고 있는 KPI 항목입니다. 해당 항목에 대한 데이터를 입력 해 주시기 바랍니다.
+            </div>
+
+            <div class="list-block">
+              <div class="list-title">• 입력 대기 중 2건</div>
+              <div class="list-text"># 2033312-Y5.1 : 검수자재 불합격률</div>
+              <div class="list-text"># 2033312-Y5.1 : 품질시험 불합격 건수</div>
+            </div>
+            <div class="list-block">
+              <div class="list-title">• 입력 기한 초과 1건</div>
+              <div class="list-text">
+                # 2033312-Y5.2 : 검측 불합격률 <span class="warn">2025.2.12 <md-icon>report</md-icon></span>
+              </div>
+            </div>
+            <div class="list-block">
+              <div class="list-title">• 입력 예정 4건</div>
+              <div class="list-text"># 2033320-Y4.32 : 연면적 대비 공기입력</div>
+              <div class="list-text"># 2012345-Y4.32 : 책임감리원의 일정성과 수준 평가</div>
+              <div class="list-text"># 2035641-Y5.22 : 설계 변경에 따른 공기 증감률</div>
+              <div class="list-text"># 2096412-Y5.31 : 현장별 일정 이탈 수준</div>
+            </div>
+            <div class="list-block">
+              <div class="list-title">• 입력 기한 없음 3건</div>
+              <div class="list-text"># 2033320-Y4.32 : 연면적 대비 공기입력</div>
+              <div class="list-text"># 2012345-Y4.32 : 책임감리원의 일정성과 수준 평가</div>
+              <div class="list-text"># 2035641-Y5.22 : 설계 변경에 따른 공기 증감률</div>
+            </div>
+          </div>
+        </div>
+
+        <div right>
+          ${html `
+            <div class="button-line">
+              <div class="ghost-btn" @click=${() => navigate(`project-update/${this.project.id}`)}>
+                <md-icon slot="">assignment</md-icon>
+                <div>프로젝트 수정</div>
+              </div>
+              <div class="ghost-btn" @click=${() => navigate(`project-complete/${this.project.id}`)}>
+                <md-icon slot="">assignment_turned_in</md-icon>
+                <div>프로젝트 완공 처리</div>
+              </div>
+            </div>
+          `}
+
+          <div class="card kpi-box">
+            <div class="kpi-header">
+              <div>
+                <div>종합 KPI</div>
+                <div class="triangle"></div>
+              </div>
+              <div class="kpi-desc">프로젝트의 6개 성과를 종합한 종합 KPI포인트와 각 지표별 분포</div>
+            </div>
+
+            <div class="kpi-summary">
+              <div class="mini-boxplot" title="boxplot placeholder">
+                <div class="boxplot-area">
+                  <kpi-single-boxplot-chart .data=${this.getBoxPlotDataForProject(this.project)}></kpi-single-boxplot-chart>
+                </div>
+
+                <div class="boxplot-point">
+                  <div class="value">${(_h = (_g = this.project.kpi) === null || _g === void 0 ? void 0 : _g.toFixed(1)) !== null && _h !== void 0 ? _h : '-'}</div>
+                  <div class="label">Point</div>
+                </div>
+              </div>
+
+              <div class="spider-area">
+                <sv-kpi-radar-chart
+                  .data=${this.getRadarChartData().data}
+                  .categories=${this.getRadarChartData().categories}
+                  .currentGroup=${'프로젝트성과'}
+                ></sv-kpi-radar-chart>
+              </div>
+            </div>
+          </div>
+
+          <div class="card group-box">
+            <div class="kpi-header">
+              <div>
+                <div>그룹별 분포</div>
+                <div class="triangle"></div>
+              </div>
+            </div>
+            <div class="desc">
+              Boxplot(박스플롯)은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치 등)를 보여줍니다.
+              박스는 중앙 50% 구간, 수염은 전체 범위, 굵은 검정색 가로선은 중앙값(메디안), 초록색 원은 평균값(Mean)을 의미합니다.
+              이 프로젝트의 값은 진한 오렌지색 원으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수 있습니다.
+            </div>
+            <div class="group-chart">
+              <sv-kpi-boxplot-chart .data=${this.getYKpiBoxplotData()}></sv-kpi-boxplot-chart>
+            </div>
+          </div>
+
+          <div class="metrics-card">
+            <div class="metrics-header">
+              <div class="title">
+                <span>그룹별 상세 매트릭 데이터</span>
+                <div class="triangle"></div>
+              </div>
+            </div>
+            <div class="desc">
+              프로젝트의 6개 성과별 상세 주요 매트릭 데이터 (각 세부 항목을 클릭하시면 평가 기준표를 확인할 수 있습니다)
+            </div>
+            <div class="metrics-content">
+              ${Object.values(this.getMetricGroups()).map(group => html `
+                  <div class="metric-group">
+                    <div class="metric-group-header">
+                      <div class="metric-group-icon"></div>
+                      <span>${group.name}</span>
+                    </div>
+                    <div class="metric-items">
+                      ${group.metrics.map(metric => html `
+                          <div class="metric-item">
+                            <span
+                              class="metric-label"
+                              @click=${() => this._onMetricLabelClick(metric)}
+                              title="클릭하시면 평가 기준표를 확인할 수 있습니다"
+                            >
+                              ${metric.label}
+                            </span>
+                            <span class="metric-value">${metric.value}</span>
+                          </div>
+                        `)}
+                    </div>
+                  </div>
+                `)}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      ${this.showLookupChart && this.selectedKpi
+            ? html `
+            <div class="popup-overlay" @click=${this._closePopup}>
+              <div class="popup-content" @click=${(e) => e.stopPropagation()}>
+                <div class="popup-header">
+                  <div class="popup-title">${this.selectedKpi.kpiName} - Lookup Table</div>
+                  <button class="popup-close" @click=${this._closePopup}>×</button>
+                </div>
+                <div class="popup-chart-container">
+                  <kpi-lookup-chart
+                    .grades=${this.selectedKpi.grades || []}
+                    .value=${this.selectedKpi.value}
+                    unit=${this.selectedKpi.unit || ''}
+                    kpiName=${this.selectedKpi.kpiName || ''}
+                  ></kpi-lookup-chart>
+                </div>
+              </div>
+            </div>
+          `
+            : ''}
+    `;
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.initProject(lifecycle.resourceId);
+            this.getKpiComprehensiveStats();
+            this.getKpiYComprehensiveStats();
+            if (lifecycle.resourceId) {
+                this.getProjectXKpiValues(lifecycle.resourceId);
+            }
+        }
+    }
+    async initProject(projectId = '') {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query Project($id: String!) {
+          project(id: $id) {
+            id
+            name
+            state
+            startDate
+            endDate
+            projectType
+            mainPhoto {
+              fullpath
+            }
+            totalProgress
+            weeklyProgress
+            kpi
+            kpiValues {
+              kpiName
+              value
+            }
+            inspPassRate
+            robotProgressRate
+            structuralSafetyRate
+            robotCount
+            buildingComplex {
+              id
+              address
+              latitude
+              longitude
+              area
+              clientCompany
+              constructionCompany
+              supervisoryCompany
+              designCompany
+              drawing {
+                id
+                name
+                fullpath
+              }
+              constructionType
+              constructionCost
+              etc
+              notice
+              householdCount
+              buildingCount
+              virtualTourLink
+              buildings {
+                id
+                name
+                floorCount
+              }
+            }
+          }
+        }
+      `,
+            variables: { id: projectId }
+        });
+        if (response.errors)
+            return;
+        this.project = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.project) || {};
+        this.updateContext();
+    }
+    async getKpiComprehensiveStats() {
+        try {
+            const response = await client.query({
+                query: gql `
+          query GetKpiZValueComprehensiveStats {
+            totalKpiZValueComprehensiveStats {
+              minVal
+              q1Val
+              medVal
+              q3Val
+              maxVal
+            }
+          }
+        `
+            });
+            this.kpiComprehensiveStats = response.data.totalKpiZValueComprehensiveStats || [];
+            console.log('KPI Z-Value Comprehensive Stats:', this.kpiComprehensiveStats);
+        }
+        catch (error) {
+            console.error('Failed to fetch KPI comprehensive stats:', error);
+            this.kpiComprehensiveStats = [];
+        }
+    }
+    async getKpiYComprehensiveStats() {
+        try {
+            const response = await client.query({
+                query: gql `
+          query GetKpiYValueComprehensiveStats {
+            totalKpiYValueComprehensiveStats {
+              kpiName
+              minVal
+              q1Val
+              medVal
+              q3Val
+              maxVal
+              avgVal
+              projectCount
+            }
+          }
+        `
+            });
+            this.kpiYComprehensiveStats = response.data.totalKpiYValueComprehensiveStats || [];
+            console.log('KPI Y-Value Comprehensive Stats:', this.kpiYComprehensiveStats);
+        }
+        catch (error) {
+            console.error('Failed to fetch KPI Y comprehensive stats:', error);
+            this.kpiYComprehensiveStats = [];
+        }
+    }
+    async getProjectXKpiValues(projectId) {
+        try {
+            const response = await client.query({
+                query: gql `
+          query GetProjectXKpiValues($projectId: String!) {
+            projectXKpiValues(projectId: $projectId) {
+              id
+              value
+              valueDate
+              kpi {
+                id
+                name
+                description
+              }
+            }
+          }
+        `,
+                variables: { projectId }
+            });
+            this.projectXKpiValues = response.data.projectXKpiValues || [];
+            console.log('Project X KPI Values:', this.projectXKpiValues);
+        }
+        catch (error) {
+            console.error('Failed to fetch project X KPI values:', error);
+            this.projectXKpiValues = [];
+        }
+    }
+    _onMetricLabelClick(metric) {
+        // metric.pattern을 사용하여 X-KPI 조회
+        if (!metric.pattern) {
+            console.warn('No pattern found for metric:', metric);
+            return;
+        }
+        // X-KPI 이름 패턴 (예: X11, X12, X21, ...)
+        const kpiNamePattern = metric.pattern;
+        // 해당 KPI 정보 조회
+        this._fetchKpiWithGradesByPattern(kpiNamePattern, metric.label);
+    }
+    async _fetchKpiWithGradesByPattern(kpiNamePattern, displayName) {
+        var _a, _b;
+        try {
+            // X-KPI 이름 패턴으로 전체 이름 찾기 (projectXKpiValues에서)
+            const kpiValue = this.projectXKpiValues.find(kv => { var _a; return ((_a = kv.kpi) === null || _a === void 0 ? void 0 : _a.name) && kv.kpi.name.includes(kpiNamePattern); });
+            if (!kpiValue || !kpiValue.kpi) {
+                console.warn(`No KPI found for pattern: ${kpiNamePattern}`);
+                return;
+            }
+            // GraphQL로 KPI 상세 정보 (grades 포함) 조회
+            const response = await client.query({
+                query: gql `
+          query Kpi($id: String!) {
+            kpi(id: $id) {
+              id
+              name
+              grades
+              vizMeta
+            }
+          }
+        `,
+                variables: { id: kpiValue.kpi.id }
+            });
+            if (response.errors || !((_a = response.data) === null || _a === void 0 ? void 0 : _a.kpi)) {
+                console.error('KPI not found or error:', response.errors);
+                return;
+            }
+            const kpi = response.data.kpi;
+            // grades가 없으면 경고
+            if (!kpi.grades || kpi.grades.length === 0) {
+                console.warn(`No grades found for KPI: ${kpiValue.kpi.name}`);
+                // 그래도 팝업은 띄워서 "No grade data available" 메시지 표시
+            }
+            this.selectedKpi = {
+                kpiName: displayName,
+                grades: kpi.grades || [],
+                value: kpiValue.value || null,
+                unit: ((_b = kpi.vizMeta) === null || _b === void 0 ? void 0 : _b.unit) || ''
+            };
+            this.showLookupChart = true;
+        }
+        catch (error) {
+            console.error('Error fetching KPI:', error);
+        }
+    }
+    _closePopup() {
+        this.showLookupChart = false;
+        this.selectedKpi = null;
+    }
+    getMetricValue(kpiNamePattern) {
+        const kpiValue = this.projectXKpiValues.find(kv => { var _a; return ((_a = kv.kpi) === null || _a === void 0 ? void 0 : _a.name) && kv.kpi.name.includes(kpiNamePattern); });
+        const value = (kpiValue === null || kpiValue === void 0 ? void 0 : kpiValue.value) || 0;
+        // 정수면 그대로, 소수면 최대 3자리까지만 표시
+        if (Number.isInteger(value)) {
+            return value.toString();
+        }
+        else {
+            return value.toFixed(3).replace(/\.?0+$/, '');
+        }
+    }
+    getMetricGroups() {
+        return {
+            Y1: {
+                name: '일정성과 (Y1)',
+                metrics: [
+                    { label: '연면적 대비 공사기간', pattern: 'X11', value: this.getMetricValue('X11') },
+                    { label: '설계변경 공기 증감률', pattern: 'X12', value: this.getMetricValue('X12') },
+                    { label: '일정 이탈 수준', pattern: 'X13', value: this.getMetricValue('X13') },
+                    { label: '일정성과 수준 평가', pattern: 'X14', value: this.getMetricValue('X14') }
+                ]
+            },
+            Y2: {
+                name: '비용성과 (Y2)',
+                metrics: [
+                    { label: '연면적 대비 공사비', pattern: 'X21', value: this.getMetricValue('X21') },
+                    { label: '설계변경 공사비 증감', pattern: 'X22', value: this.getMetricValue('X22') },
+                    { label: '일정성과 수준 평가', pattern: 'X23', value: this.getMetricValue('X23') }
+                ]
+            },
+            Y3: {
+                name: '품질성과 (Y3)',
+                metrics: [
+                    { label: '품질시험 불합격률', pattern: 'X31', value: this.getMetricValue('X31') },
+                    { label: '검수자재 불합격률', pattern: 'X32', value: this.getMetricValue('X32') },
+                    { label: '검측 불합격률', pattern: 'X33', value: this.getMetricValue('X33') },
+                    { label: '품질 SL-PA 결과', pattern: 'X34', value: this.getMetricValue('X34') },
+                    { label: '품질성과 수준 평가', pattern: 'X35', value: this.getMetricValue('X35') }
+                ]
+            },
+            Y4: {
+                name: '안전성과 (Y4)',
+                metrics: [
+                    { label: '재해율', pattern: 'X41', value: this.getMetricValue('X41') },
+                    { label: '재해강도율', pattern: 'X42', value: this.getMetricValue('X42') },
+                    { label: '안전 SL-PA 결과', pattern: 'X43', value: this.getMetricValue('X43') },
+                    { label: '안전성과 수준 평가', pattern: 'X44', value: this.getMetricValue('X44') }
+                ]
+            },
+            Y5: {
+                name: '환경성과 (Y5)',
+                metrics: [
+                    { label: '건설폐기물 발생량', pattern: 'X51', value: this.getMetricValue('X51') },
+                    { label: '환경성과 수준 평가', pattern: 'X52', value: this.getMetricValue('X52') }
+                ]
+            },
+            Y6: {
+                name: '생산성 성과 (Y6)',
+                metrics: [
+                    { label: '투입인력 생산성', pattern: 'X61', value: this.getMetricValue('X61') },
+                    { label: '생산성성과 수준 평가', pattern: 'X62', value: this.getMetricValue('X62') }
+                ]
+            }
+        };
+    }
+    getYKpiBoxplotData() {
+        // KPI 카테고리 매핑 (Y-category KPI names to display categories)
+        const categoryMapping = {
+            Y01_productivity: '생산성과',
+            Y02_schedule: '일정성과',
+            Y03_cost: '비용성과',
+            Y04_quality: '품질성과',
+            Y05_safety: '안전성과',
+            Y06_environment: '환경성과'
+        };
+        const data = [];
+        // Y-KPI 카테고리별로 통합된 통계 생성
+        this.kpiYComprehensiveStats.forEach(stat => {
+            const category = categoryMapping[stat.kpiName] || stat.kpiName;
+            data.push({
+                org: category, // org 필드 사용 (boxplot 차트가 기대하는 필드명)
+                min: stat.minVal * 20,
+                max: stat.maxVal * 20,
+                q1: stat.q1Val * 20,
+                q3: stat.q3Val * 20,
+                median: stat.medVal * 20,
+                mean: stat.avgVal * 20,
+                value: this.getProjectYKpiValue(stat.kpiName) // 현재 프로젝트의 실제 Y-KPI 값
+            });
+        });
+        return data.sort((a, b) => a.org.localeCompare(b.org));
+    }
+    getProjectYKpiValue(kpiName) {
+        var _a, _b;
+        // 현재 프로젝트의 kpiValues 배열에서 해당 KPI 값을 찾습니다
+        const kpiValue = (_b = (_a = this.project) === null || _a === void 0 ? void 0 : _a.kpiValues) === null || _b === void 0 ? void 0 : _b.find(kv => kv.kpiName === kpiName);
+        return (kpiValue === null || kpiValue === void 0 ? void 0 : kpiValue.value) || 0;
+    }
+    getRadarChartData() {
+        // KPI 카테고리 매핑 (Y-category KPI names to display categories)
+        const categoryMapping = {
+            Y01_productivity: '생산성',
+            Y02_schedule: '일정',
+            Y03_cost: '비용',
+            Y04_quality: '품질',
+            Y05_safety: '안전',
+            Y06_environment: '환경'
+        };
+        const data = [];
+        const categories = [];
+        // Create baseline data from comprehensive stats (using avgVal as baseline)
+        this.kpiYComprehensiveStats.forEach(stat => {
+            const category = categoryMapping[stat.kpiName] || stat.kpiName;
+            if (!categories.includes(category)) {
+                categories.push(category);
+            }
+            // Add baseline average
+            data.push({
+                org: '기준평균',
+                category,
+                value: Math.round(stat.avgVal * 20) // Scale to match expected range
+            });
+            // Add current project performance (using project's individual values)
+            // For now, using avgVal + some variation as placeholder
+            data.push({
+                org: '프로젝트성과',
+                category,
+                value: this.getProjectYKpiValue(stat.kpiName)
+            });
+        });
+        return {
+            data,
+            categories: categories.length > 0
+                ? categories
+                : ['Y1. 일정성과', 'Y2. 비용성과', 'Y3. 품질성과', 'Y4. 안전성과', 'Y5. 환경성과', 'Y6. 생산성성과']
+        };
+    }
+    getBoxPlotDataForProject(project) {
+        var _a;
+        // 프로젝트의 지역(geo_group)에 해당하는 통계 찾기
+        const stats = (_a = this.kpiComprehensiveStats) === null || _a === void 0 ? void 0 : _a[0];
+        if (!stats) {
+            // 전체 통계의 평균값 사용 또는 기본값 반환
+            const defaultStats = this.kpiComprehensiveStats.length > 0 ? this.kpiComprehensiveStats[0] : null;
+            if (defaultStats) {
+                return {
+                    min: defaultStats.minVal,
+                    max: defaultStats.maxVal,
+                    mean: (defaultStats.q1Val + defaultStats.q3Val) / 2,
+                    median: defaultStats.medVal,
+                    q1: defaultStats.q1Val,
+                    q3: defaultStats.q3Val,
+                    value: project.kpi || 0
+                };
+            }
+            // 완전한 기본값
+            return {
+                min: 0,
+                max: 100,
+                mean: 50,
+                median: 50,
+                q1: 25,
+                q3: 75,
+                value: project.kpi || 0
+            };
+        }
+        return {
+            min: stats.minVal * 20,
+            max: stats.maxVal * 20,
+            mean: ((stats.q1Val + stats.q3Val) / 2) * 20, // 대략적 평균값
+            median: stats.medVal * 20,
+            q1: stats.q1Val * 20,
+            q3: stats.q3Val * 20,
+            value: project.kpi || 0
+        };
+    }
+};
+SvProjectDetailPage.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+
+        width: 100%;
+        height: 100%;
+        background-color: var(--md-sys-color-background, #f6f6f6);
+      }
+
+      /* content layout */
+      div[content] {
+        display: flex;
+        gap: 35px;
+        padding: 25px;
+      }
+      div[left] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+      div[right] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        padding: 0 1px;
+      }
+
+      /* card */
+      .card {
+        background: #ffffff;
+        border-radius: 10px;
+        padding: 15px;
+        box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);
+      }
+      .card-title {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        color: #35618e;
+        font-weight: 700;
+      }
+      .triangle {
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 8px solid #35618e;
+      }
+
+      /* left top info box */
+      .bold {
+        font-weight: bold;
+      }
+      .top-info {
+        display: flex;
+        gap: 10px;
+      }
+      .top-info img[pic] {
+        width: 284px;
+        height: 160px;
+        object-fit: fill;
+        background: #e5e7eb;
+      }
+      .top-info .info {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        padding: 10px 0;
+        flex: 1;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .label {
+        min-width: fit-content;
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+      }
+      .value {
+        color: #333;
+        font-size: 16px;
+      }
+      .status-value {
+        color: #4cbb49;
+        font-weight: 700;
+      }
+
+      .address {
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+      }
+
+      .detail-grid {
+        display: grid;
+        grid-template-columns: 284px 1fr;
+        gap: 15px 10px;
+        padding: 5px 0;
+      }
+      .detail-grid .grid-item .label {
+        width: auto;
+      }
+
+      /* left second card (requests) */
+      .sub-desc {
+        color: #35618e;
+        font-size: 14px;
+        letter-spacing: -0.05em;
+        margin-bottom: 8px;
+      }
+      .list-block {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        padding: 5px 25px;
+      }
+      .list-title {
+        color: #212529;
+        font-weight: 700;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+      }
+      .list-text {
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+        margin-left: 8px;
+      }
+      .list-text .warn {
+        margin-left: 10px;
+        color: #e13232;
+
+        md-icon {
+          font-size: 17px;
+          width: 13px;
+          height: 13px;
+        }
+      }
+
+      /* right buttons */
+      .button-line {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+      }
+      .ghost-btn {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        padding: 5px 10px;
+        background: #35618e;
+        color: #ffffff;
+        border-radius: 5px;
+        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+
+        /* Material Symbols Outlined (stroke style) */
+        md-icon {
+          font-variation-settings:
+            'FILL' 0,
+            'wght' 300,
+            'GRAD' 0,
+            'opsz' 24;
+        }
+      }
+
+      /* right KPI box */
+      .kpi-box {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 15px;
+        max-height: 420px;
+        min-width: 560px;
+      }
+      .kpi-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #35618e;
+        font-weight: 700;
+        font-size: 20px;
+        letter-spacing: -0.05em;
+      }
+      .kpi-header div {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+      .kpi-desc {
+        color: #35618e;
+        font-size: 13px;
+        letter-spacing: -0.05em;
+      }
+      .kpi-summary {
+        display: flex;
+        align-items: center;
+        padding: 0 30px;
+        max-height: 360px;
+        gap: 20px;
+      }
+      .mini-boxplot {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        position: relative;
+        min-width: 120px;
+      }
+      .boxplot-area {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: #ffffff;
+      }
+
+      .boxplot-point {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #35618e;
+      }
+      .boxplot-point .value {
+        font-size: 42px;
+        font-weight: 800;
+        color: #35618e;
+        border-radius: 6px;
+      }
+      .boxplot-point .label {
+        font-size: 14px;
+        font-weight: 300;
+        width: auto;
+      }
+
+      /* spider chart placeholder */
+      .spider-area {
+        flex: 5;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        height: 100%;
+      }
+
+      /* group distribution */
+      .group-box .desc {
+        color: #35618e;
+        font-size: 13px;
+        letter-spacing: -0.05em;
+        margin-top: 4px;
+      }
+      .group-chart {
+        height: 300px;
+        margin-top: 25px;
+      }
+
+      kpi-single-boxplot-chart {
+        flex: 1;
+      }
+
+      /* KPI 메트릭 데이터 카드 */
+      .metrics-card {
+        background: #ffffff;
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);
+        max-width: 100%;
+        overflow: hidden;
+      }
+      .metrics-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .metrics-header .title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #35618e;
+        font-weight: 700;
+        font-size: 18px;
+      }
+      .metrics-card .desc {
+        color: #35618e;
+        font-size: 13px;
+        letter-spacing: -0.05em;
+        margin-top: 4px;
+        margin-bottom: 15px;
+      }
+      .metrics-content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .metric-group {
+        border-bottom: 1px dotted #ddd;
+        padding-bottom: 12px;
+      }
+      .metric-group:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+      .metric-group-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+        color: #35618e;
+        font-weight: 600;
+        font-size: 16px;
+      }
+      .metric-group-icon {
+        width: 20px;
+        height: 20px;
+        background: #35618e;
+        border-radius: 3px;
+        position: relative;
+      }
+      .metric-group-icon::before {
+        content: '✓';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+      }
+      .metric-items {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 8px 16px;
+        padding-left: 28px;
+      }
+      .metric-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 14px;
+      }
+      .metric-label {
+        color: #333;
+        flex: 1;
+      }
+      .metric-value {
+        color: #35618e;
+        font-weight: 600;
+        min-width: 40px;
+        text-align: right;
+      }
+
+      /* Popup overlay */
+      .popup-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+      }
+      .popup-content {
+        background: white;
+        border-radius: 12px;
+        padding: 24px;
+        max-width: 800px;
+        width: 90%;
+        max-height: 80vh;
+        overflow-y: auto;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      }
+      .popup-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        padding-bottom: 16px;
+        border-bottom: 2px solid #e0e0e0;
+      }
+      .popup-title {
+        font-size: 20px;
+        font-weight: 700;
+        color: #35618e;
+      }
+      .popup-close {
+        cursor: pointer;
+        font-size: 24px;
+        color: #999;
+        background: none;
+        border: none;
+        padding: 4px 8px;
+      }
+      .popup-close:hover {
+        color: #333;
+      }
+      .popup-chart-container {
+        min-height: 400px;
+        height: 500px;
+      }
+      .metric-label {
+        cursor: pointer;
+      }
+      .metric-label:hover {
+        opacity: 0.7;
+        text-decoration: underline;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectDetailPage.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "kpiComprehensiveStats", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "kpiYComprehensiveStats", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "projectXKpiValues", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], SvProjectDetailPage.prototype, "showLookupChart", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectDetailPage.prototype, "selectedKpi", void 0);
+SvProjectDetailPage = __decorate([
+    customElement('sv-project-detail')
+], SvProjectDetailPage);
+export { SvProjectDetailPage };
+//# sourceMappingURL=sv-project-detail.js.map