@things-factory/kpi 10.1.246 → 10.1.248

package/dist-client/pages/kpi/kpi-overview.js

@@ -1,361 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { html, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { PageView } from '@operato/shell';
-import { i18next } from '@operato/i18n';
-import { client } from '@operato/graphql';
-import gql from 'graphql-tag';
-const GET_KPI_OVERVIEW = gql `
-  query {
-    kpiCategories: kpisLevel1 {
-      id
-      name
-      description
-      active
-      kpis: children {
-        id
-        name
-        description
-        formula
-        active
-        grades
-      }
-    }
-  }
-`;
-let KpiOverview = class KpiOverview extends PageView {
-    constructor() {
-        super(...arguments);
-        this.selectedGroup = 0;
-        this.selectedKpi = 0;
-        this.kpiCategories = [];
-        this.loading = true;
-        this.error = null;
-    }
-    static { this.styles = css `
-    :host {
-      display: block;
-      background: #f6f6f6;
-      box-sizing: border-box;
-      padding: 16px 24px;
-    }
-    .overview-container {
-      display: block;
-      margin: 8px 0 24px 0;
-    }
-    .overview-left {
-      display: block;
-    }
-    .overview-title {
-      color: #0c4da2;
-      font-size: 1.125rem;
-      font-weight: 700;
-      letter-spacing: -0.05em;
-      margin: 0 0 8px 0;
-    }
-    .overview-desc {
-      font-size: 0.875rem;
-      color: #212529;
-      letter-spacing: -0.05em;
-      line-height: 1;
-    }
-    .group-tabs {
-      display: flex;
-      margin: 8px 0 0 0;
-      justify-content: flex-start;
-    }
-    .group-tab {
-      padding: 10px 15px;
-      border-radius: 8px 8px 0 0;
-      background: rgba(46, 164, 223, 0.1);
-      cursor: pointer;
-      font-size: 1rem;
-      font-weight: 400;
-      border: none;
-      outline: none;
-      transition: background 0.2s;
-    }
-    .group-tab[selected] {
-      background: #0c4da2;
-      color: #ffffff;
-      font-weight: 700;
-      box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
-    }
-    .tab-icon {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      border-radius: 2px;
-      background: #35618e;
-      vertical-align: middle;
-    }
-    .group-tab[selected] .tab-icon {
-      background: #ffffff;
-    }
-    .tab-label {
-      margin-left: 6px;
-      vertical-align: middle;
-    }
-    .kpi-list {
-      display: flex;
-      gap: 8px;
-      margin: 0 0 32px 0;
-      justify-content: center;
-    }
-    .kpi-item {
-      padding: 8px 20px;
-      border-radius: 12px;
-      background: #f5f5f5;
-      cursor: pointer;
-      font-size: 1rem;
-      border: none;
-      outline: none;
-      transition: background 0.2s;
-    }
-    .kpi-item[selected] {
-      background: #bdf;
-      color: #222;
-      font-weight: bold;
-    }
-    .main-content {
-      display: flex;
-      gap: 0;
-      align-items: stretch;
-      justify-content: stretch;
-      background: #fff;
-      border: 2px solid #0c4da2;
-      overflow: hidden;
-    }
-    .markdown {
-      background: #fff;
-      padding: 25px;
-      min-height: 240px;
-      flex: 1 1 auto;
-      font-size: 0.875rem;
-      color: #212529;
-    }
-    .markdown p {
-      line-height: 1.7142857142857142;
-      margin: 0 0 12px 0;
-    }
-    .toc {
-      flex: 0 0 240px;
-      background: linear-gradient(180deg, rgba(137, 204, 237, 0.2) 0%, rgba(137, 204, 237, 0) 100%);
-      border-left: 1px solid rgba(46, 164, 223, 0.1);
-      padding: 30px 15px;
-      font-size: 1rem;
-      color: #212529;
-    }
-    .toc img {
-      width: 25px;
-      height: 25px;
-    }
-    .submenu-header {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      margin-bottom: 14px;
-    }
-    .submenu-icon {
-      width: 25.5px;
-      height: 28.67px;
-      border-radius: 2px;
-      background: #02a8a2;
-      flex: 0 0 auto;
-    }
-    .submenu-title {
-      font-weight: 700;
-      font-size: 1.25rem;
-      color: #0c4da2;
-    }
-    .toc-title {
-      color: #0c4da2;
-      font-size: 20px;
-      font-weight: 700;
-      line-height: 20px;
-      margin-bottom: 15px;
-      margin-top: 3px;
-    }
-    .toc-list {
-      margin: 0 0 8px 0;
-      padding: 0;
-      list-style: none;
-    }
-    .toc-list li {
-      margin-bottom: 10px;
-    }
-    .toc-btn {
-      display: block;
-      margin: 0;
-      padding: 8px 0 8px 12px;
-      border: none;
-      border-left: 3px solid transparent;
-      border-radius: 0;
-      background: transparent;
-      color: #212529;
-      cursor: pointer;
-      font-size: 1rem;
-      text-align: left;
-      transition: background 0.2s;
-    }
-    .toc-btn:hover {
-      background: rgba(0, 0, 0, 0.03);
-    }
-    .toc-btn[selected] {
-      border-left-color: #4cbb49;
-      font-weight: 700;
-      color: #212529;
-    }
-    .kpi-title {
-      font-size: 1.125rem;
-      font-weight: 700;
-      margin-bottom: 8px;
-      color: #02a8a2;
-    }
-    .kpi-formula {
-      margin: 3px 0 20px 0;
-      font-weight: 700;
-      color: #212529;
-    }
-    .subtitle {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      margin-top: 20px;
-      font-weight: 700;
-      color: #0c4da2;
-    }
-    .subtitle img {
-      width: 15px;
-      height: 15px;
-    }
-    .subtitle-icon {
-      width: 20px;
-      height: 20px;
-      border-radius: 2px;
-      background: #02a8a2;
-      flex: 0 0 auto;
-    }
-    .grades-section {
-      margin-top: 16px;
-      background: #fff;
-      border-radius: 8px;
-      padding: 16px;
-      border: 2px solid #0c4da2;
-    }
-    .grades-section b {
-      display: block;
-      margin-bottom: 8px;
-    }
-  `; }
-    get context() {
-        return {
-            title: i18next.t('title.kpi overview')
-        };
-    }
-    async firstUpdated() {
-        try {
-            const { data } = await client.query({ query: GET_KPI_OVERVIEW });
-            this.kpiCategories = data.kpiCategories;
-            this.loading = false;
-        }
-        catch (e) {
-            this.error = e instanceof Error ? e : new Error(String(e));
-            this.loading = false;
-        }
-    }
-    render() {
-        if (this.error)
-            return html `<div>에러: ${this.error?.message}</div>`;
-        if (!this.kpiCategories.length)
-            return html `<div>KPI 카테고리가 없습니다.</div>`;
-        const selctedY = this.kpiCategories?.[this.selectedGroup] || '';
-        const group = this.kpiCategories[this.selectedGroup];
-        const kpi = group?.kpis?.[this.selectedKpi];
-        return html `
-      <div class="overview-container">
-        <div class="overview-left">
-          <div class="overview-title">KPI개요</div>
-          <div class="overview-desc">
-            건설현장 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요
-            지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
-          </div>
-        </div>
-      </div>
-      <div class="group-tabs">
-        ${this.kpiCategories.map((g, i) => html `
-            <button
-              class="group-tab"
-              ?selected=${i === this.selectedGroup}
-              @click=${() => {
-            this.selectedGroup = i;
-            this.selectedKpi = 0;
-        }}
-            >
-              ${g.name}
-            </button>
-          `)}
-      </div>
-      <div class="main-content">
-        <div class="markdown">
-          <div class="kpi-title">${kpi?.name || ''}</div>
-          <div>${kpi?.description || ''}</div>
-          ${kpi?.formula
-            ? html `
-                <div class="subtitle"><img src="/assets/images/green-calendar.svg" />주요산식</div>
-                <div class="kpi-formula">${kpi?.formula}</div>
-              `
-            : ''}
-        </div>
-        <div class="toc">
-          <img src="/assets/images/green-calendar.svg" />
-          <div class="toc-title">${selctedY.name} 지표</div>
-          <ul class="toc-list">
-            ${group?.kpis?.map((k, i) => html `
-                <li>
-                  <button class="toc-btn" ?selected=${i === this.selectedKpi} @click=${() => (this.selectedKpi = i)}>
-                    ${k.name}
-                  </button>
-                </li>
-              `)}
-          </ul>
-        </div>
-      </div>
-      ${kpi?.grades && Array.isArray(kpi.grades) && kpi.grades.length > 0
-            ? html `
-            <div class="grades-section">
-              <b>등급 구간</b>
-              <ul>
-                ${kpi.grades.map((g) => html `<li>${g.name}: ${g.minValue}~${g.maxValue} (${g.description || ''})</li>`)}
-              </ul>
-            </div>
-          `
-            : ''}
-    `;
-    }
-};
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], KpiOverview.prototype, "selectedGroup", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], KpiOverview.prototype, "selectedKpi", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiOverview.prototype, "kpiCategories", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], KpiOverview.prototype, "loading", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], KpiOverview.prototype, "error", void 0);
-KpiOverview = __decorate([
-    customElement('kpi-overview')
-], KpiOverview);
-export { KpiOverview };
-//# sourceMappingURL=kpi-overview.js.map

package/dist-client/pages/kpi/kpi-overview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kpi-overview.js","sourceRoot":"","sources":["../../../client/pages/kpi/kpi-overview.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiB3B,CAAA;AAGM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ;IAAlC;;QAgOI,kBAAa,GAAG,CAAC,CAAA;QACjB,gBAAW,GAAG,CAAC,CAAA;QACf,kBAAa,GAAU,EAAE,CAAA;QACzB,YAAO,GAAG,IAAI,CAAA;QACd,UAAK,GAAiB,IAAI,CAAA;IAwFrC,CAAC;aA3TQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuNlB,AAvNY,CAuNZ;IAED,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;SACvC,CAAA;IACH,CAAC;IAQD,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC;YACH,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAA;YAChE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAA;YACvC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,GAAG,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;YAC1D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA,YAAY,IAAI,CAAC,KAAK,EAAE,OAAO,QAAQ,CAAA;QAClE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,4BAA4B,CAAA;QAEvE,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;QAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAQ,CAAA;QAC3D,MAAM,GAAG,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,WAAW,CAAQ,CAAA;QAElD,OAAO,IAAI,CAAA;;;;;;;;;;;UAWL,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;;0BAGE,CAAC,KAAK,IAAI,CAAC,aAAa;uBAC3B,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;YACtB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAA;QACtB,CAAC;;gBAEC,CAAC,CAAC,IAAI;;WAEX,CACF;;;;mCAI0B,GAAG,EAAE,IAAI,IAAI,EAAE;iBACjC,GAAG,EAAE,WAAW,IAAI,EAAE;YAC3B,GAAG,EAAE,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;2CAEyB,GAAG,EAAE,OAAO;eACxC;YACH,CAAC,CAAC,EAAE;;;;mCAImB,QAAQ,CAAC,IAAI;;cAElC,KAAK,EAAE,IAAI,EAAE,GAAG,CAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;sDAE0B,CAAC,KAAK,IAAI,CAAC,WAAW,WAAW,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;sBAC7F,CAAC,CAAC,IAAI;;;eAGb,CACF;;;;QAIL,GAAG,EAAE,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YACjE,CAAC,CAAC,IAAI,CAAA;;;;kBAII,GAAG,CAAC,MAAM,CAAC,GAAG,CACd,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAA,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,WAAW,IAAI,EAAE,QAAQ,CAC3F;;;WAGN;YACH,CAAC,CAAC,EAAE;KACP,CAAA;IACH,CAAC;;AA3FQ;IAAR,KAAK,EAAE;;kDAAkB;AACjB;IAAR,KAAK,EAAE;;gDAAgB;AACf;IAAR,KAAK,EAAE;;kDAA0B;AACzB;IAAR,KAAK,EAAE;;4CAAe;AACd;IAAR,KAAK,EAAE;;0CAA2B;AApOxB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4TvB","sourcesContent":["import { html, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { PageView } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\n\nconst GET_KPI_OVERVIEW = gql`\n  query {\n    kpiCategories: kpisLevel1 {\n      id\n      name\n      description\n      active\n      kpis: children {\n        id\n        name\n        description\n        formula\n        active\n        grades\n      }\n    }\n  }\n`\n\n@customElement('kpi-overview')\nexport class KpiOverview extends PageView {\n  static styles = css`\n    :host {\n      display: block;\n      background: #f6f6f6;\n      box-sizing: border-box;\n      padding: 16px 24px;\n    }\n    .overview-container {\n      display: block;\n      margin: 8px 0 24px 0;\n    }\n    .overview-left {\n      display: block;\n    }\n    .overview-title {\n      color: #0c4da2;\n      font-size: 1.125rem;\n      font-weight: 700;\n      letter-spacing: -0.05em;\n      margin: 0 0 8px 0;\n    }\n    .overview-desc {\n      font-size: 0.875rem;\n      color: #212529;\n      letter-spacing: -0.05em;\n      line-height: 1;\n    }\n    .group-tabs {\n      display: flex;\n      margin: 8px 0 0 0;\n      justify-content: flex-start;\n    }\n    .group-tab {\n      padding: 10px 15px;\n      border-radius: 8px 8px 0 0;\n      background: rgba(46, 164, 223, 0.1);\n      cursor: pointer;\n      font-size: 1rem;\n      font-weight: 400;\n      border: none;\n      outline: none;\n      transition: background 0.2s;\n    }\n    .group-tab[selected] {\n      background: #0c4da2;\n      color: #ffffff;\n      font-weight: 700;\n      box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);\n    }\n    .tab-icon {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      border-radius: 2px;\n      background: #35618e;\n      vertical-align: middle;\n    }\n    .group-tab[selected] .tab-icon {\n      background: #ffffff;\n    }\n    .tab-label {\n      margin-left: 6px;\n      vertical-align: middle;\n    }\n    .kpi-list {\n      display: flex;\n      gap: 8px;\n      margin: 0 0 32px 0;\n      justify-content: center;\n    }\n    .kpi-item {\n      padding: 8px 20px;\n      border-radius: 12px;\n      background: #f5f5f5;\n      cursor: pointer;\n      font-size: 1rem;\n      border: none;\n      outline: none;\n      transition: background 0.2s;\n    }\n    .kpi-item[selected] {\n      background: #bdf;\n      color: #222;\n      font-weight: bold;\n    }\n    .main-content {\n      display: flex;\n      gap: 0;\n      align-items: stretch;\n      justify-content: stretch;\n      background: #fff;\n      border: 2px solid #0c4da2;\n      overflow: hidden;\n    }\n    .markdown {\n      background: #fff;\n      padding: 25px;\n      min-height: 240px;\n      flex: 1 1 auto;\n      font-size: 0.875rem;\n      color: #212529;\n    }\n    .markdown p {\n      line-height: 1.7142857142857142;\n      margin: 0 0 12px 0;\n    }\n    .toc {\n      flex: 0 0 240px;\n      background: linear-gradient(180deg, rgba(137, 204, 237, 0.2) 0%, rgba(137, 204, 237, 0) 100%);\n      border-left: 1px solid rgba(46, 164, 223, 0.1);\n      padding: 30px 15px;\n      font-size: 1rem;\n      color: #212529;\n    }\n    .toc img {\n      width: 25px;\n      height: 25px;\n    }\n    .submenu-header {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      margin-bottom: 14px;\n    }\n    .submenu-icon {\n      width: 25.5px;\n      height: 28.67px;\n      border-radius: 2px;\n      background: #02a8a2;\n      flex: 0 0 auto;\n    }\n    .submenu-title {\n      font-weight: 700;\n      font-size: 1.25rem;\n      color: #0c4da2;\n    }\n    .toc-title {\n      color: #0c4da2;\n      font-size: 20px;\n      font-weight: 700;\n      line-height: 20px;\n      margin-bottom: 15px;\n      margin-top: 3px;\n    }\n    .toc-list {\n      margin: 0 0 8px 0;\n      padding: 0;\n      list-style: none;\n    }\n    .toc-list li {\n      margin-bottom: 10px;\n    }\n    .toc-btn {\n      display: block;\n      margin: 0;\n      padding: 8px 0 8px 12px;\n      border: none;\n      border-left: 3px solid transparent;\n      border-radius: 0;\n      background: transparent;\n      color: #212529;\n      cursor: pointer;\n      font-size: 1rem;\n      text-align: left;\n      transition: background 0.2s;\n    }\n    .toc-btn:hover {\n      background: rgba(0, 0, 0, 0.03);\n    }\n    .toc-btn[selected] {\n      border-left-color: #4cbb49;\n      font-weight: 700;\n      color: #212529;\n    }\n    .kpi-title {\n      font-size: 1.125rem;\n      font-weight: 700;\n      margin-bottom: 8px;\n      color: #02a8a2;\n    }\n    .kpi-formula {\n      margin: 3px 0 20px 0;\n      font-weight: 700;\n      color: #212529;\n    }\n    .subtitle {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      margin-top: 20px;\n      font-weight: 700;\n      color: #0c4da2;\n    }\n    .subtitle img {\n      width: 15px;\n      height: 15px;\n    }\n    .subtitle-icon {\n      width: 20px;\n      height: 20px;\n      border-radius: 2px;\n      background: #02a8a2;\n      flex: 0 0 auto;\n    }\n    .grades-section {\n      margin-top: 16px;\n      background: #fff;\n      border-radius: 8px;\n      padding: 16px;\n      border: 2px solid #0c4da2;\n    }\n    .grades-section b {\n      display: block;\n      margin-bottom: 8px;\n    }\n  `\n\n  get context() {\n    return {\n      title: i18next.t('title.kpi overview')\n    }\n  }\n\n  @state() selectedGroup = 0\n  @state() selectedKpi = 0\n  @state() kpiCategories: any[] = []\n  @state() loading = true\n  @state() error: Error | null = null\n\n  async firstUpdated() {\n    try {\n      const { data } = await client.query({ query: GET_KPI_OVERVIEW })\n      this.kpiCategories = data.kpiCategories\n      this.loading = false\n    } catch (e) {\n      this.error = e instanceof Error ? e : new Error(String(e))\n      this.loading = false\n    }\n  }\n\n  render() {\n    if (this.error) return html`<div>에러: ${this.error?.message}</div>`\n    if (!this.kpiCategories.length) return html`<div>KPI 카테고리가 없습니다.</div>`\n\n    const selctedY = this.kpiCategories?.[this.selectedGroup] || ''\n    const group = this.kpiCategories[this.selectedGroup] as any\n    const kpi = group?.kpis?.[this.selectedKpi] as any\n\n    return html`\n      <div class=\"overview-container\">\n        <div class=\"overview-left\">\n          <div class=\"overview-title\">KPI개요</div>\n          <div class=\"overview-desc\">\n            건설현장 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요\n            지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.\n          </div>\n        </div>\n      </div>\n      <div class=\"group-tabs\">\n        ${this.kpiCategories.map(\n          (g, i) => html`\n            <button\n              class=\"group-tab\"\n              ?selected=${i === this.selectedGroup}\n              @click=${() => {\n                this.selectedGroup = i\n                this.selectedKpi = 0\n              }}\n            >\n              ${g.name}\n            </button>\n          `\n        )}\n      </div>\n      <div class=\"main-content\">\n        <div class=\"markdown\">\n          <div class=\"kpi-title\">${kpi?.name || ''}</div>\n          <div>${kpi?.description || ''}</div>\n          ${kpi?.formula\n            ? html`\n                <div class=\"subtitle\"><img src=\"/assets/images/green-calendar.svg\" />주요산식</div>\n                <div class=\"kpi-formula\">${kpi?.formula}</div>\n              `\n            : ''}\n        </div>\n        <div class=\"toc\">\n          <img src=\"/assets/images/green-calendar.svg\" />\n          <div class=\"toc-title\">${selctedY.name} 지표</div>\n          <ul class=\"toc-list\">\n            ${group?.kpis?.map(\n              (k, i) => html`\n                <li>\n                  <button class=\"toc-btn\" ?selected=${i === this.selectedKpi} @click=${() => (this.selectedKpi = i)}>\n                    ${k.name}\n                  </button>\n                </li>\n              `\n            )}\n          </ul>\n        </div>\n      </div>\n      ${kpi?.grades && Array.isArray(kpi.grades) && kpi.grades.length > 0\n        ? html`\n            <div class=\"grades-section\">\n              <b>등급 구간</b>\n              <ul>\n                ${kpi.grades.map(\n                  (g: any) => html`<li>${g.name}: ${g.minValue}~${g.maxValue} (${g.description || ''})</li>`\n                )}\n              </ul>\n            </div>\n          `\n        : ''}\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi/kpi-tree-page.d.ts

@@ -1,51 +0,0 @@
-import '@operato/data-tree';
-import './kpi-view';
-import { PropertyValues } from 'lit';
-import { PageView } from '@operato/shell';
-import { KpiImporter } from './kpi-importer';
-import { KpiView } from './kpi-view';
-declare const KpiTreePage_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
-export declare class KpiTreePage extends KpiTreePage_base {
-    static styles: import("lit").CSSResult[];
-    static get scopedElements(): {
-        'kpi-importer': typeof KpiImporter;
-    };
-    root?: any;
-    selected?: any;
-    kpi?: any;
-    modified: boolean;
-    appendable: boolean;
-    kpiView: KpiView;
-    get context(): {
-        title: string;
-        help: string;
-        actions: {
-            icon: string;
-            title: string;
-            action: () => Promise<void>;
-            emphasis: {
-                danger: boolean;
-            };
-        }[];
-        exportable: {
-            name: string;
-            data: () => Promise<void>;
-        };
-        importable: {
-            handler: (records: any[]) => Promise<void>;
-        };
-    };
-    render(): import("lit-html").TemplateResult<1>;
-    updated(changes: PropertyValues<this>): void;
-    onSelect(e: CustomEvent): void;
-    reset(): void;
-    create(): Promise<void>;
-    save(): Promise<void>;
-    delete(): Promise<void>;
-    pageInitialized(lifecycle: any): Promise<void>;
-    pageUpdated(changes: any, lifecycle: any): Promise<void>;
-    fetch(): Promise<void>;
-    exportHandler(): Promise<void>;
-    importHandler(records: any[]): Promise<void>;
-}
-export {};