@dssp/dkpi 1.0.0-alpha.99 → 1.0.0

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

@@ -1,696 +0,0 @@
-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