@dssp/dkpi 1.0.0-alpha.9 → 1.0.0-alpha.90

package/dist-client/pages/kpi-admin/kpi-system-guide.js

@@ -0,0 +1,696 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+import { navigate } from '@operato/shell';
+import gql from 'graphql-tag';
+/**
+ * KPI 시스템 종합 안내 페이지
+ *
+ * DB에서 실시간으로 KPI 계층, 산식, 메트릭, scoreType/valueType 등을 조회하여
+ * 시스템 전체 구조를 한눈에 파악할 수 있는 매뉴얼 겸 라이브 대시보드.
+ */
+const GET_KPI_SYSTEM = gql `
+  query {
+    kpiRoot: kpisLevel1 {
+      id
+      name
+      description
+      formula
+      weight
+      scoreType
+      valueType
+      active
+      kpis: children {
+        id
+        name
+        description
+        formula
+        weight
+        scoreType
+        valueType
+        active
+        grades
+      }
+    }
+    kpiMetrics {
+      items {
+        id
+        name
+        unit
+        source
+        collectType
+        active
+      }
+    }
+  }
+`;
+const SCORE_TYPE_LABELS = {
+    DIRECT: { label: 'DIRECT (변환 없음)', color: '#888' },
+    FORMULA: { label: 'FORMULA (수식 변환)', color: '#9c27b0' },
+    LOOKUP: { label: 'LOOKUP (등급표)', color: '#1976d2' },
+    CUSTOM: { label: 'CUSTOM (2D 룩업)', color: '#e65100' }
+};
+/** 외부 시스템 URL 매핑 */
+const EXTERNAL_SYSTEM_URLS = {
+    '세움터(EAIS)': 'https://cloud.eais.go.kr',
+    '키스콘(KISCON)': 'https://www.kiscon.net',
+    '올바로(Allbaro)': 'https://www.allbaro.or.kr',
+    전자카드제: 'https://www.cw.or.kr'
+};
+const VALUE_TYPE_LABELS = {
+    MEASURED: { label: '외부 수집', color: '#1976d2', icon: '📡' },
+    ASSESSED: { label: '감리자 평가', color: '#2e7d32', icon: '✍️' },
+    CALCULATED: { label: '산식 계산', color: '#9c27b0', icon: '🔢' },
+    COMPOSITE: { label: '복합 입력', color: '#e65100', icon: '🔀' }
+};
+let KpiSystemGuide = class KpiSystemGuide extends PageView {
+    constructor() {
+        super(...arguments);
+        this.kpiRoot = [];
+        this.metrics = [];
+        this.loading = true;
+        this.selectedDetail = null;
+    }
+    get context() {
+        return { title: 'KPI 시스템 가이드' };
+    }
+    async firstUpdated() {
+        var _a;
+        try {
+            const { data } = await client.query({ query: GET_KPI_SYSTEM });
+            this.kpiRoot = data.kpiRoot || [];
+            this.metrics = ((_a = data.kpiMetrics) === null || _a === void 0 ? void 0 : _a.items) || [];
+        }
+        catch (e) {
+            console.error('Failed to load KPI system data:', e);
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /** 메트릭이 사용되는 KPI 목록 — 비활성 KPI/Y 그룹 제외 */
+    getMetricUsage(metricName) {
+        var _a;
+        const used = [];
+        for (const y of this.kpiRoot) {
+            if (y.active === false)
+                continue;
+            for (const x of y.kpis || []) {
+                if (x.active === false)
+                    continue;
+                if ((_a = x.formula) === null || _a === void 0 ? void 0 : _a.includes(`[${metricName}]`)) {
+                    used.push(x.name);
+                }
+            }
+        }
+        return used;
+    }
+    showDetail(item, type) {
+        this.selectedDetail = Object.assign(Object.assign({}, item), { _type: type });
+    }
+    closeDetail() {
+        this.selectedDetail = null;
+    }
+    render() {
+        if (this.loading)
+            return html `<div style="padding:40px;text-align:center;color:#888;">로딩 중...</div>`;
+        // Z 노드 (루트의 부모)
+        const allX = this.kpiRoot.flatMap((y) => (y.kpis || []).filter((x) => x.active !== false));
+        return html `
+      <div class="page-title">KPI 시스템 가이드</div>
+      <div class="page-subtitle">
+        건축프로젝트 성과평가 KPI 체계의 전체 구조, 산식, 메트릭 연관관계를 확인합니다. 모든 정보는 DB에서 실시간 조회됩니다.
+      </div>
+
+      <!-- 범례 -->
+      <div class="legend">
+        <span class="legend-title">Score 산정:</span>
+        ${Object.entries(SCORE_TYPE_LABELS).map(([, v]) => html `<span class="legend-group"><span class="badge badge-score">${v.label}</span></span>`)}
+        <span style="width:16px"></span>
+        <span class="legend-title">Value 획득:</span>
+        ${Object.entries(VALUE_TYPE_LABELS).map(([, v]) => html `<span class="legend-group">${v.icon} <span class="badge badge-value">${v.label}</span></span>`)}
+      </div>
+
+      <!-- 1. KPI 계층 구조 -->
+      <div class="tree-section">
+        <div class="section-title">📊 KPI 계층 구조 (Z → Y → X)</div>
+
+        <!-- Z 루트 -->
+        <div
+          class="z-node"
+          @click=${() => this.showDetail({
+            name: 'Z. 전체스코어',
+            description: 'Y1~Y6 가중합',
+            formula: 'Y1×w1 + Y2×w2 + ... + Y6×w6',
+            scoreType: 'DIRECT',
+            valueType: 'CALCULATED'
+        }, 'kpi')}
+        >
+          <div class="z-name">Z. 전체스코어</div>
+          <div class="z-formula">
+            =
+            ${this.kpiRoot
+            .filter((y) => y.active !== false)
+            .map((y) => `${y.name.split('.')[0]}×${y.weight}`)
+            .join(' + ')}
+          </div>
+        </div>
+
+        <!-- Y 그룹들 (비활성 Y 제외) -->
+        ${this.kpiRoot
+            .filter((y) => y.active !== false)
+            .map((y) => {
+            const activeKpis = (y.kpis || []).filter((x) => x.active !== false);
+            return html `
+              <div class="y-group">
+                <div class="y-header" @click=${() => this.showDetail(y, 'kpi')}>
+                  <span class="y-name">${y.name}</span>
+                  <span class="y-weight">가중치: ${y.weight}</span>
+                </div>
+                <div class="y-body">
+                  ${y.formula ? html `<div class="y-formula">${y.formula}</div>` : ''}
+                  <div class="x-cards">
+                    ${activeKpis.map((x) => {
+                const st = SCORE_TYPE_LABELS[x.scoreType] || { label: x.scoreType || '미설정', color: '#999' };
+                const vt = VALUE_TYPE_LABELS[x.valueType] || { label: x.valueType || '미설정', color: '#999', icon: '?' };
+                return html `
+                        <div class="x-card" @click=${() => this.showDetail(x, 'kpi')}>
+                          <div class="x-name">${x.name}</div>
+                          <div class="x-formula">${x.formula || '—'}</div>
+                          <div class="x-badges">
+                            <span class="badge badge-score">${st.label}</span>
+                            <span class="badge badge-value">${vt.icon} ${vt.label}</span>
+                          </div>
+                        </div>
+                      `;
+            })}
+                  </div>
+                </div>
+              </div>
+            `;
+        })}
+      </div>
+
+      <!-- 2. 원천 메트릭 — active=true 이면서 활성 KPI formula 에 실제 참조되는 것만 -->
+      ${(() => {
+            const usedMetrics = this.metrics
+                .filter((m) => m.active)
+                .map((m) => ({ m, usage: this.getMetricUsage(m.name) }))
+                .filter(({ usage }) => usage.length > 0);
+            return html `
+          <div class="tree-section">
+            <div class="section-title">📋 원천 메트릭 (${usedMetrics.length}개 사용)</div>
+            <div class="metrics-grid">
+              ${usedMetrics.map(({ m, usage }) => html `
+                  <div class="metric-card" @click=${() => this.showDetail(m, 'metric')}>
+                    <div class="metric-name">${m.name}</div>
+                    <div class="metric-unit">
+                      ${m.unit || '—'} ·
+                      ${m.collectType === 'EXTERNAL' && m.source
+                ? EXTERNAL_SYSTEM_URLS[m.source]
+                    ? html `<a
+                              href="${EXTERNAL_SYSTEM_URLS[m.source]}"
+                              target="_blank"
+                              rel="noopener"
+                              style="color:#1976d2;text-decoration:none;"
+                              @click=${(e) => e.stopPropagation()}
+                              >${m.source} ↗</a
+                            >`
+                    : m.source
+                : m.collectType || 'MANUAL'}
+                    </div>
+                    <div class="metric-used">→ ${usage.join(', ')}</div>
+                  </div>
+                `)}
+            </div>
+          </div>
+        `;
+        })()}
+
+      <!-- 3. 시스템 요약 -->
+      <div class="tree-section">
+        <div class="section-title">📈 시스템 요약</div>
+        <div style="display:flex;gap:16px;flex-wrap:wrap;">
+          <div style="flex:1;min-width:200px;background:#e3f2fd;padding:16px;border-radius:8px;text-align:center;">
+            <div style="font-size:2rem;font-weight:800;color:#1565c0;">${allX.length}</div>
+            <div style="font-size:0.85rem;color:#555;">X-level 지표</div>
+          </div>
+          <div style="flex:1;min-width:200px;background:#e8f5e9;padding:16px;border-radius:8px;text-align:center;">
+            <div style="font-size:2rem;font-weight:800;color:#2e7d32;">
+              ${this.kpiRoot.filter((y) => y.active !== false).length}
+            </div>
+            <div style="font-size:0.85rem;color:#555;">Y-level 영역</div>
+          </div>
+          <div style="flex:1;min-width:200px;background:#fff3e0;padding:16px;border-radius:8px;text-align:center;">
+            <div style="font-size:2rem;font-weight:800;color:#e65100;">
+              ${this.metrics.filter((m) => m.active && this.getMetricUsage(m.name).length > 0).length}
+            </div>
+            <div style="font-size:0.85rem;color:#555;">원천 메트릭</div>
+          </div>
+          <div style="flex:1;min-width:200px;background:#fce4ec;padding:16px;border-radius:8px;text-align:center;">
+            <div style="font-size:2rem;font-weight:800;color:#c62828;">
+              ${allX.filter((x) => x.valueType === 'ASSESSED').length}
+            </div>
+            <div style="font-size:0.85rem;color:#555;">감리자 평가 항목</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 팝업 -->
+      ${this.selectedDetail ? this._renderDetailPopup() : nothing}
+    `;
+    }
+    _renderDetailPopup() {
+        const d = this.selectedDetail;
+        const isKpi = d._type === 'kpi';
+        return html `
+      <div class="popup-overlay" @click=${() => this.closeDetail()}>
+        <div class="popup-box" @click=${(e) => e.stopPropagation()}>
+          <div class="popup-title">
+            <span>${d.name}</span>
+            <button class="popup-close" @click=${() => this.closeDetail()}>×</button>
+          </div>
+
+          ${d.description
+            ? html `
+                <div class="popup-row">
+                  <span class="popup-label">설명</span>
+                  <span class="popup-value">${d.description}</span>
+                </div>
+              `
+            : ''}
+          ${isKpi
+            ? html `
+                ${d.formula
+                ? html `
+                      <div class="popup-row"><span class="popup-label">산식</span></div>
+                      <div class="popup-formula">${d.formula}</div>
+                    `
+                : ''}
+                ${d.scoreType
+                ? html `
+                      <div class="popup-row">
+                        <span class="popup-label">Score 산정</span>
+                        <span class="popup-value" style="color:${(SCORE_TYPE_LABELS[d.scoreType] || {}).color || '#333'}">
+                          ${(SCORE_TYPE_LABELS[d.scoreType] || {}).label || d.scoreType}
+                        </span>
+                      </div>
+                    `
+                : ''}
+                ${d.valueType
+                ? html `
+                      <div class="popup-row">
+                        <span class="popup-label">Value 획득</span>
+                        <span class="popup-value" style="color:${(VALUE_TYPE_LABELS[d.valueType] || {}).color || '#333'}">
+                          ${(VALUE_TYPE_LABELS[d.valueType] || {}).icon || ''}
+                          ${(VALUE_TYPE_LABELS[d.valueType] || {}).label || d.valueType}
+                        </span>
+                      </div>
+                    `
+                : ''}
+                ${d.weight
+                ? html `
+                      <div class="popup-row">
+                        <span class="popup-label">가중치</span>
+                        <span class="popup-value">${d.weight}</span>
+                      </div>
+                    `
+                : ''}
+
+                <div style="margin-top:16px;padding-top:12px;border-top:1px solid #eee;">
+                  <span
+                    class="popup-link"
+                    @click=${() => {
+                this.closeDetail();
+                navigate('kpi-overview');
+            }}
+                  >
+                    → KPI 개요에서 보기
+                  </span>
+                  &nbsp;&nbsp;
+                  <span
+                    class="popup-link"
+                    @click=${() => {
+                this.closeDetail();
+                navigate('kpi-admin');
+            }}
+                  >
+                    → KPI 관리에서 편집
+                  </span>
+                </div>
+              `
+            : html `
+                <div class="popup-row">
+                  <span class="popup-label">단위</span>
+                  <span class="popup-value">${d.unit || '—'}</span>
+                </div>
+                <div class="popup-row">
+                  <span class="popup-label">수집 방식</span>
+                  <span class="popup-value">${d.collectType || 'MANUAL'}</span>
+                </div>
+                <div class="popup-row">
+                  <span class="popup-label">데이터 소스</span>
+                  <span class="popup-value">
+                    ${d.source && EXTERNAL_SYSTEM_URLS[d.source]
+                ? html `<a href="${EXTERNAL_SYSTEM_URLS[d.source]}" target="_blank" rel="noopener" style="color:#1976d2;"
+                          >${d.source} ↗</a
+                        >`
+                : d.source || '미설정'}
+                  </span>
+                </div>
+
+                <div style="margin-top:12px;">
+                  <div class="popup-label" style="margin-bottom:6px;">사용처:</div>
+                  ${this.getMetricUsage(d.name).map(kpi => html `<div style="font-size:0.85rem;color:#1976d2;margin-bottom:2px;">· ${kpi}</div>`)}
+                  ${this.getMetricUsage(d.name).length === 0 ? html `<div style="color:#ccc;font-size:0.85rem;">미사용</div>` : ''}
+                </div>
+
+                <div style="margin-top:16px;padding-top:12px;border-top:1px solid #eee;">
+                  <span
+                    class="popup-link"
+                    @click=${() => {
+                this.closeDetail();
+                navigate('kpi-metric-value-list');
+            }}
+                  >
+                    → 메트릭 값 관리
+                  </span>
+                </div>
+              `}
+        </div>
+      </div>
+    `;
+    }
+};
+KpiSystemGuide.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: block;
+        overflow-y: auto;
+        background: #f5f6fa;
+        padding: 24px;
+      }
+
+      .page-title {
+        font-size: 1.5rem;
+        font-weight: 800;
+        color: #1a237e;
+        margin-bottom: 4px;
+      }
+      .page-subtitle {
+        font-size: 0.9rem;
+        color: #666;
+        margin-bottom: 24px;
+      }
+
+      /* 계층 트리 */
+      .tree-section {
+        background: #fff;
+        border-radius: 12px;
+        padding: 24px;
+        margin-bottom: 24px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+      .section-title {
+        font-size: 1.1rem;
+        font-weight: 700;
+        color: #333;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      /* Z 루트 */
+      .z-node {
+        background: linear-gradient(135deg, #1a237e, #283593);
+        color: #fff;
+        border-radius: 10px;
+        padding: 16px 20px;
+        margin-bottom: 16px;
+        cursor: pointer;
+      }
+      .z-node:hover {
+        opacity: 0.95;
+      }
+      .z-name {
+        font-size: 1.1rem;
+        font-weight: 700;
+      }
+      .z-formula {
+        font-size: 0.8rem;
+        opacity: 0.8;
+        margin-top: 4px;
+        font-family: monospace;
+      }
+
+      /* Y 그룹 */
+      .y-group {
+        margin-bottom: 16px;
+        border: 1px solid #e0e0e0;
+        border-radius: 10px;
+        overflow: hidden;
+      }
+      .y-header {
+        background: linear-gradient(135deg, #0c4da2, #1565c0);
+        color: #fff;
+        padding: 12px 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+      }
+      .y-header:hover {
+        opacity: 0.95;
+      }
+      .y-name {
+        font-weight: 700;
+        font-size: 1rem;
+      }
+      .y-weight {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 2px 10px;
+        border-radius: 12px;
+        font-size: 0.8rem;
+      }
+      .y-body {
+        padding: 12px;
+      }
+      .y-formula {
+        font-size: 0.8rem;
+        color: #555;
+        background: #f8f9fa;
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-family: monospace;
+        margin-bottom: 10px;
+        word-break: break-all;
+      }
+
+      /* X 카드 */
+      .x-cards {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .x-card {
+        flex: 1 1 220px;
+        background: #fff;
+        border: 1px solid #e8e8e8;
+        border-radius: 8px;
+        padding: 10px 14px;
+        cursor: pointer;
+        transition: all 0.2s;
+        min-width: 200px;
+      }
+      .x-card:hover {
+        border-color: #1976d2;
+        box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
+      }
+      .x-name {
+        font-weight: 600;
+        font-size: 0.85rem;
+        color: #333;
+        margin-bottom: 4px;
+      }
+      .x-formula {
+        font-size: 0.75rem;
+        color: #888;
+        font-family: monospace;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 6px;
+      }
+      .x-badges {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+      }
+      .badge {
+        font-size: 0.65rem;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-weight: 600;
+      }
+      .badge-score {
+        background: #e3f2fd;
+        color: #1565c0;
+      }
+      .badge-value {
+        background: #e8f5e9;
+        color: #2e7d32;
+      }
+
+      /* 메트릭 섹션 */
+      .metrics-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 10px;
+      }
+      .metric-card {
+        background: #fff;
+        border: 1px solid #e8e8e8;
+        border-radius: 8px;
+        padding: 10px 14px;
+        transition: all 0.2s;
+      }
+      .metric-card:hover {
+        border-color: #4caf50;
+      }
+      .metric-name {
+        font-weight: 600;
+        font-size: 0.85rem;
+        color: #333;
+      }
+      .metric-unit {
+        font-size: 0.75rem;
+        color: #888;
+      }
+      .metric-used {
+        font-size: 0.7rem;
+        color: #1976d2;
+        margin-top: 4px;
+      }
+
+      /* 팝업 */
+      .popup-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.3);
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .popup-box {
+        background: #fff;
+        border-radius: 12px;
+        padding: 24px;
+        min-width: 400px;
+        max-width: 600px;
+        max-height: 80vh;
+        overflow-y: auto;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+      }
+      .popup-title {
+        font-size: 1.1rem;
+        font-weight: 700;
+        color: #1a237e;
+        margin-bottom: 16px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .popup-close {
+        background: none;
+        border: none;
+        font-size: 1.2rem;
+        cursor: pointer;
+        color: #999;
+      }
+      .popup-row {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 8px;
+        font-size: 0.85rem;
+      }
+      .popup-label {
+        color: #888;
+        min-width: 100px;
+        flex-shrink: 0;
+      }
+      .popup-value {
+        color: #333;
+        font-weight: 500;
+      }
+      .popup-formula {
+        background: #f5f5f5;
+        padding: 10px;
+        border-radius: 6px;
+        font-family: monospace;
+        font-size: 0.85rem;
+        margin: 8px 0;
+        word-break: break-all;
+      }
+      .popup-link {
+        color: #1976d2;
+        cursor: pointer;
+        text-decoration: underline;
+        font-size: 0.85rem;
+      }
+      .popup-link:hover {
+        color: #0d47a1;
+      }
+
+      /* 범례 */
+      .legend {
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+        margin-bottom: 20px;
+        padding: 12px 16px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+      }
+      .legend-group {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 0.8rem;
+      }
+      .legend-title {
+        font-weight: 700;
+        color: #555;
+        margin-right: 4px;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiSystemGuide.prototype, "kpiRoot", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiSystemGuide.prototype, "metrics", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiSystemGuide.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiSystemGuide.prototype, "selectedDetail", void 0);
+KpiSystemGuide = __decorate([
+    customElement('kpi-system-guide')
+], KpiSystemGuide);
+export { KpiSystemGuide };
+//# sourceMappingURL=kpi-system-guide.js.map