@things-factory/kpi 1.0.0-alpha.5 → 9.0.9

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

@@ -0,0 +1,264 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { marked } from 'marked';
+import { PageView } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+let KpiOverview = class KpiOverview extends PageView {
+    constructor() {
+        super(...arguments);
+        this.selectedGroup = 0;
+        this.selectedKpi = 0;
+        this.kpiGroups = [
+            {
+                name: '일정성과 지표',
+                kpis: ['연면적 대비 공사기간', '설계변경에 따른 공기 증감률', '일정 이탈 수준', '일정성과 수준 평가']
+            },
+            {
+                name: '비용성과 지표',
+                kpis: ['연면적 대비 공사비', '설계변경에 따른 공사비 증감률', '비용성과 수준 평가']
+            },
+            {
+                name: '품질성과 지표',
+                kpis: ['품질시험 불합격률', '검수재 불합격률', '검측 불합격률', '품질 SL-PA 결과값', '품질성과 수준 평가']
+            },
+            {
+                name: '안전성과 지표',
+                kpis: ['재해율', '재해강도율', '안전 SL-PA 결과값', '안전성과 수준 평가']
+            },
+            {
+                name: '환경성과 지표',
+                kpis: ['건설폐기물 발생량', '환경성과 수준 평가']
+            },
+            {
+                name: '생산성과 지표',
+                kpis: ['투입인력 생산성', '생산성과 수준 평가']
+            }
+        ];
+        this.kpiDescriptions = {
+            '연면적 대비 공사기간': `# 연면적 대비 공사기간\n- 설명: 프로젝트의 전체 연면적 대비 실제 소요된 공사기간을 측정합니다.\n- 산식: 실제공사기간(개월) / (연면적/1000m2)\n- 데이터 표준형: 실제공사기간(개월) / (연면적/1000m2)\n- 활용: 대형 프로젝트의 일정 효율성 파악`,
+            '설계변경에 따른 공기 증감률': `# 설계변경에 따른 공기 증감률\n- 설명: 설계변경으로 인한 공기 단축 또는 증가 효과를 측정합니다.\n- 산식: (실제공사기간 - 계획공사기간) / 계획공사기간(개월)\n- 데이터 표준형: (실제공사기간 - 계획공사기간)(개월) / 계획공사기간(개월)`,
+            '일정 이탈 수준': `# 일정 이탈 수준\n- 설명: 계획 대비 실제 일정의 이탈 정도를 평가합니다.\n- 산식: Table(DART 등) 활용\n- 평가 방식: 1~5점 척도(감리자 평가)`,
+            '일정성과 수준 평가': `# 일정성과 수준 평가\n- 설명: 일정성과의 전반적인 수준을 감리자가 평가합니다.\n- 평가 방식: 감리자 1~5점 척도`,
+            '연면적 대비 공사비': `# 연면적 대비 공사비\n- 설명: 프로젝트의 전체 연면적 대비 실제 소요된 공사비를 측정합니다.\n- 산식: 실제공사비(억원) / (연면적/1000m2)\n- 데이터 표준형: 실제공사비(억원) / (연면적/1000m2)`,
+            '설계변경에 따른 공사비 증감률': `# 설계변경에 따른 공사비 증감률\n- 설명: 설계변경으로 인한 공사비 증감률을 측정합니다.\n- 산식: (실제공사비 - 계획공사비) / 계획공사비(억원)\n- 데이터 표준형: (실제공사비 - 계획공사비)(억원) / 계획공사비(억원)`,
+            '비용성과 수준 평가': `# 비용성과 수준 평가\n- 설명: 비용성과의 전반적인 수준을 감리자가 평가합니다.\n- 평가 방식: 감리자 1~5점 척도`,
+            '품질시험 불합격률': `# 품질시험 불합격률\n- 설명: 전체 품질시험 중 불합격 건수의 비율을 측정합니다.\n- 산식: 품질시험 불합격 건수(건) / (연면적/1000m2)`,
+            '검수재 불합격률': `# 검수재 불합격률\n- 설명: 검수재 중 불합격 건수의 비율을 측정합니다.\n- 산식: 검수재 불합격 건수(건) / (연면적/1000m2)`,
+            '검측 불합격률': `# 검측 불합격률\n- 설명: 전체 검측 중 불합격 건수의 비율을 측정합니다.\n- 산식: 품질검측 불합격 건수(건) / 품질검측 건수(건)`,
+            '품질 SL-PA 결과값': `# 품질 SL-PA 결과값\n- 설명: SL-PA(Safety Level - Performance Assessment)는 건설/안전 분야에서 안전관리 수준을 정량적으로 평가하는 대표 지표입니다.\n- 평가 방식: Python 활용 1~5점 척도`,
+            '품질성과 수준 평가': `# 품질성과 수준 평가\n- 설명: 품질성과의 전반적인 수준을 감리자가 평가합니다.\n- 평가 방식: 감리자 1~5점 척도`,
+            재해율: `# 재해율\n- 설명: 연간 근로자 수 대비 재해 발생 건수의 비율을 측정합니다.\n- 산식: (재해 건수(건) / 연간 근로자 수(명)) * 100`,
+            재해강도율: `# 재해강도율\n- 설명: 총 근로자 수와 연간 근로시간 대비 노동손실일수의 비율을 측정합니다.\n- 산식: (노동손실일수(일) / (총 근로자 수 * 1인당 연간 근로시간)) * 100`,
+            '안전 SL-PA 결과값': `# 안전 SL-PA 결과값\n- 설명: SL-PA(Safety Level - Performance Assessment)는 건설/안전 분야에서 **안전관리 수준**을 정량적으로 평가하는 대표 지표입니다.\n- 활용: 현장의 안전성과를 수치로 진단하고, 위험요소 개선 및 안전관리 정책 수립에 활용됩니다.\n- 평가 방식: Python 활용 1~5점 척도 (1점: 매우 미흡, 5점: 매우 우수)`,
+            '안전성과 수준 평가': `# 안전성과 수준 평가\n- 설명: 안전성과의 전반적인 수준을 감리자가 평가합니다.\n- 평가 방식: 감리자 1~5점 척도`,
+            '건설폐기물 발생량': `# 건설폐기물 발생량\n- 설명: 전체 건설폐기물 발생량을 측정합니다.\n- 산식: 총 건설 폐기물 발생량(ton) / (연면적/1000m2)`,
+            '환경성과 수준 평가': `# 환경성과 수준 평가\n- 설명: 환경성과의 전반적인 수준을 감리자가 평가합니다.\n- 평가 방식: 감리자 1~5점 척도`,
+            '투입인력 생산성': `# 투입인력 생산성\n- 설명: 투입 인력 대비 생산성을 측정합니다.\n- 산식: 투입인력(명) / (연면적/1000m2)`,
+            '생산성과 수준 평가': `# 생산성과 수준 평가\n- 설명: 생산성과의 전반적인 수준을 감리자가 평가합니다.\n- 평가 방식: 감리자 1~5점 척도`
+        };
+    }
+    static { this.styles = css `
+    .overview-container {
+      display: flex;
+      gap: 32px;
+      background: #f7f5fa;
+      border-radius: 20px;
+      padding: 32px;
+      margin-bottom: 24px;
+      align-items: stretch;
+    }
+    .overview-left {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .overview-title {
+      font-size: 2.8rem;
+      font-weight: bold;
+      margin-bottom: 24px;
+    }
+    .overview-desc {
+      font-size: 1.2rem;
+      color: #222;
+      line-height: 1.6;
+    }
+    .overview-right {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .overview-img {
+      width: 100%;
+      max-width: 420px;
+      border-radius: 12px;
+      object-fit: cover;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    }
+    .group-tabs {
+      display: flex;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      justify-content: center;
+    }
+    .group-tab {
+      padding: 10px 28px;
+      border-radius: 16px 16px 0 0;
+      background: #eee;
+      cursor: pointer;
+      font-size: 1.1rem;
+      font-weight: 500;
+      border: none;
+      outline: none;
+      transition: background 0.2s;
+    }
+    .group-tab[selected] {
+      background: #d6d6f7;
+      color: #222;
+      font-weight: bold;
+    }
+    .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: 32px;
+      margin-top: 32px;
+      align-items: flex-start;
+      justify-content: center;
+    }
+    .markdown {
+      background: #fff;
+      border-radius: 12px;
+      padding: 40px 32px;
+      min-height: 240px;
+      flex: 2;
+      font-size: 2rem;
+      color: #222;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    }
+    .toc {
+      flex: 1;
+      background: #faf9fd;
+      border-radius: 12px;
+      padding: 32px 24px;
+      font-size: 1.1rem;
+      color: #444;
+      min-width: 220px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+    }
+    .toc-title {
+      font-weight: bold;
+      margin-bottom: 12px;
+      font-size: 1.2rem;
+    }
+    .toc-list {
+      margin: 0 0 16px 0;
+      padding: 0;
+      list-style: none;
+    }
+    .toc-list li {
+      margin-bottom: 6px;
+    }
+    .toc-btn {
+      display: block;
+      margin: 12px 0;
+      padding: 8px 16px;
+      border: 1px solid #aaa;
+      border-radius: 8px;
+      background: #fff;
+      color: #333;
+      cursor: pointer;
+      font-size: 1rem;
+      text-align: left;
+      transition: background 0.2s;
+    }
+    .toc-btn:hover {
+      background: #f0f0f0;
+    }
+  `; }
+    get context() {
+        return {
+            title: i18next.t('title.kpi overview')
+        };
+    }
+    render() {
+        const group = this.kpiGroups[this.selectedGroup];
+        const kpi = group.kpis[this.selectedKpi];
+        const md = this.kpiDescriptions[kpi] || '각 지표의 주요 소개 내용을 마크다운으로 입력하세요.';
+        return html `
+      <div class="overview-container">
+        <div class="overview-left">
+          <div class="overview-title">KPI개요</div>
+          <div class="overview-desc">
+            건설현장 KPI 관리 시스템은 프로젝트 성과를 측정하고 모니터링하여 효율적인 공정 관리를 지원합니다.<br />
+            주요 지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
+          </div>
+        </div>
+        <div class="overview-right">
+          <img
+            class="overview-img"
+            src="https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=600&q=80"
+            alt="건설현장 안전"
+          />
+        </div>
+      </div>
+      <div class="group-tabs">
+        ${this.kpiGroups.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" .innerHTML=${marked(md)}></div>
+        <div class="toc">
+          <div class="toc-title">목차</div>
+          <ul class="toc-list">
+            ${group.kpis.map((k, i) => html ` <li><button class="toc-btn" @click=${() => (this.selectedKpi = i)}>${k}</button></li> `)}
+          </ul>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiOverview.prototype, "selectedGroup", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiOverview.prototype, "selectedKpi", void 0);
+KpiOverview = __decorate([
+    customElement('kpi-overview')
+], KpiOverview);
+export { KpiOverview };
+//# sourceMappingURL=kpi-overview-sample.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-overview-sample.js","sourceRoot":"","sources":["../../../client/pages/kpi/kpi-overview-sample.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAc,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAS,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,OAAO,EAAY,MAAM,eAAe,CAAA;AAG1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ;IAAlC;;QAmJI,kBAAa,GAAG,CAAC,CAAA;QACjB,gBAAW,GAAG,CAAC,CAAA;QAExB,cAAS,GAAG;YACV;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,CAAC;aACnE;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,YAAY,CAAC;aACvD;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,CAAC;aACzE;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,CAAC;aACrD;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC;aAClC;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC;aACjC;SACF,CAAA;QAED,oBAAe,GAAG;YAChB,aAAa,EAAE,2JAA2J;YAC1K,iBAAiB,EAAE,gJAAgJ;YACnK,UAAU,EAAE,gGAAgG;YAC5G,YAAY,EAAE,sEAAsE;YACpF,YAAY,EAAE,6HAA6H;YAC3I,kBAAkB,EAAE,oIAAoI;YACxJ,YAAY,EAAE,sEAAsE;YACpF,WAAW,EAAE,sFAAsF;YACnG,UAAU,EAAE,gFAAgF;YAC5F,SAAS,EAAE,gFAAgF;YAC3F,cAAc,EAAE,0IAA0I;YAC1J,YAAY,EAAE,sEAAsE;YACpF,GAAG,EAAE,qFAAqF;YAC1F,KAAK,EAAE,0GAA0G;YACjH,cAAc,EAAE,6NAA6N;YAC7O,YAAY,EAAE,sEAAsE;YACpF,WAAW,EAAE,iFAAiF;YAC9F,YAAY,EAAE,sEAAsE;YACpF,UAAU,EAAE,sEAAsE;YAClF,YAAY,EAAE,sEAAsE;SACrF,CAAA;IAqDH,CAAC;aA1PQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IlB,AA1IY,CA0IZ;IAED,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;SACvC,CAAA;IACH,CAAC;IAuDD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAChD,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QACxC,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,+BAA+B,CAAA;QAEvE,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;UAkBL,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,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;;;2CAGkC,MAAM,CAAC,EAAE,CAAC;;;;cAIvC,KAAK,CAAC,IAAI,CAAC,GAAG,CACd,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,uCAAuC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,iBAAiB,CACxG;;;;KAIR,CAAA;IACH,CAAC;;AAvGQ;IAAR,KAAK,EAAE;;kDAAkB;AACjB;IAAR,KAAK,EAAE;;gDAAgB;AApJb,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2PvB","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { marked } from 'marked'\n\nimport { PageView, store } from '@operato/shell'\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('kpi-overview')\nexport class KpiOverview extends PageView {\n  static styles = css`\n    .overview-container {\n      display: flex;\n      gap: 32px;\n      background: #f7f5fa;\n      border-radius: 20px;\n      padding: 32px;\n      margin-bottom: 24px;\n      align-items: stretch;\n    }\n    .overview-left {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n    .overview-title {\n      font-size: 2.8rem;\n      font-weight: bold;\n      margin-bottom: 24px;\n    }\n    .overview-desc {\n      font-size: 1.2rem;\n      color: #222;\n      line-height: 1.6;\n    }\n    .overview-right {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .overview-img {\n      width: 100%;\n      max-width: 420px;\n      border-radius: 12px;\n      object-fit: cover;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n    }\n    .group-tabs {\n      display: flex;\n      gap: 8px;\n      margin: 0 0 16px 0;\n      justify-content: center;\n    }\n    .group-tab {\n      padding: 10px 28px;\n      border-radius: 16px 16px 0 0;\n      background: #eee;\n      cursor: pointer;\n      font-size: 1.1rem;\n      font-weight: 500;\n      border: none;\n      outline: none;\n      transition: background 0.2s;\n    }\n    .group-tab[selected] {\n      background: #d6d6f7;\n      color: #222;\n      font-weight: bold;\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: 32px;\n      margin-top: 32px;\n      align-items: flex-start;\n      justify-content: center;\n    }\n    .markdown {\n      background: #fff;\n      border-radius: 12px;\n      padding: 40px 32px;\n      min-height: 240px;\n      flex: 2;\n      font-size: 2rem;\n      color: #222;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n    }\n    .toc {\n      flex: 1;\n      background: #faf9fd;\n      border-radius: 12px;\n      padding: 32px 24px;\n      font-size: 1.1rem;\n      color: #444;\n      min-width: 220px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);\n    }\n    .toc-title {\n      font-weight: bold;\n      margin-bottom: 12px;\n      font-size: 1.2rem;\n    }\n    .toc-list {\n      margin: 0 0 16px 0;\n      padding: 0;\n      list-style: none;\n    }\n    .toc-list li {\n      margin-bottom: 6px;\n    }\n    .toc-btn {\n      display: block;\n      margin: 12px 0;\n      padding: 8px 16px;\n      border: 1px solid #aaa;\n      border-radius: 8px;\n      background: #fff;\n      color: #333;\n      cursor: pointer;\n      font-size: 1rem;\n      text-align: left;\n      transition: background 0.2s;\n    }\n    .toc-btn:hover {\n      background: #f0f0f0;\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\n  kpiGroups = [\n    {\n      name: '일정성과 지표',\n      kpis: ['연면적 대비 공사기간', '설계변경에 따른 공기 증감률', '일정 이탈 수준', '일정성과 수준 평가']\n    },\n    {\n      name: '비용성과 지표',\n      kpis: ['연면적 대비 공사비', '설계변경에 따른 공사비 증감률', '비용성과 수준 평가']\n    },\n    {\n      name: '품질성과 지표',\n      kpis: ['품질시험 불합격률', '검수재 불합격률', '검측 불합격률', '품질 SL-PA 결과값', '품질성과 수준 평가']\n    },\n    {\n      name: '안전성과 지표',\n      kpis: ['재해율', '재해강도율', '안전 SL-PA 결과값', '안전성과 수준 평가']\n    },\n    {\n      name: '환경성과 지표',\n      kpis: ['건설폐기물 발생량', '환경성과 수준 평가']\n    },\n    {\n      name: '생산성과 지표',\n      kpis: ['투입인력 생산성', '생산성과 수준 평가']\n    }\n  ]\n\n  kpiDescriptions = {\n    '연면적 대비 공사기간': `# 연면적 대비 공사기간\\n- 설명: 프로젝트의 전체 연면적 대비 실제 소요된 공사기간을 측정합니다.\\n- 산식: 실제공사기간(개월) / (연면적/1000m2)\\n- 데이터 표준형: 실제공사기간(개월) / (연면적/1000m2)\\n- 활용: 대형 프로젝트의 일정 효율성 파악`,\n    '설계변경에 따른 공기 증감률': `# 설계변경에 따른 공기 증감률\\n- 설명: 설계변경으로 인한 공기 단축 또는 증가 효과를 측정합니다.\\n- 산식: (실제공사기간 - 계획공사기간) / 계획공사기간(개월)\\n- 데이터 표준형: (실제공사기간 - 계획공사기간)(개월) / 계획공사기간(개월)`,\n    '일정 이탈 수준': `# 일정 이탈 수준\\n- 설명: 계획 대비 실제 일정의 이탈 정도를 평가합니다.\\n- 산식: Table(DART 등) 활용\\n- 평가 방식: 1~5점 척도(감리자 평가)`,\n    '일정성과 수준 평가': `# 일정성과 수준 평가\\n- 설명: 일정성과의 전반적인 수준을 감리자가 평가합니다.\\n- 평가 방식: 감리자 1~5점 척도`,\n    '연면적 대비 공사비': `# 연면적 대비 공사비\\n- 설명: 프로젝트의 전체 연면적 대비 실제 소요된 공사비를 측정합니다.\\n- 산식: 실제공사비(억원) / (연면적/1000m2)\\n- 데이터 표준형: 실제공사비(억원) / (연면적/1000m2)`,\n    '설계변경에 따른 공사비 증감률': `# 설계변경에 따른 공사비 증감률\\n- 설명: 설계변경으로 인한 공사비 증감률을 측정합니다.\\n- 산식: (실제공사비 - 계획공사비) / 계획공사비(억원)\\n- 데이터 표준형: (실제공사비 - 계획공사비)(억원) / 계획공사비(억원)`,\n    '비용성과 수준 평가': `# 비용성과 수준 평가\\n- 설명: 비용성과의 전반적인 수준을 감리자가 평가합니다.\\n- 평가 방식: 감리자 1~5점 척도`,\n    '품질시험 불합격률': `# 품질시험 불합격률\\n- 설명: 전체 품질시험 중 불합격 건수의 비율을 측정합니다.\\n- 산식: 품질시험 불합격 건수(건) / (연면적/1000m2)`,\n    '검수재 불합격률': `# 검수재 불합격률\\n- 설명: 검수재 중 불합격 건수의 비율을 측정합니다.\\n- 산식: 검수재 불합격 건수(건) / (연면적/1000m2)`,\n    '검측 불합격률': `# 검측 불합격률\\n- 설명: 전체 검측 중 불합격 건수의 비율을 측정합니다.\\n- 산식: 품질검측 불합격 건수(건) / 품질검측 건수(건)`,\n    '품질 SL-PA 결과값': `# 품질 SL-PA 결과값\\n- 설명: SL-PA(Safety Level - Performance Assessment)는 건설/안전 분야에서 안전관리 수준을 정량적으로 평가하는 대표 지표입니다.\\n- 평가 방식: Python 활용 1~5점 척도`,\n    '품질성과 수준 평가': `# 품질성과 수준 평가\\n- 설명: 품질성과의 전반적인 수준을 감리자가 평가합니다.\\n- 평가 방식: 감리자 1~5점 척도`,\n    재해율: `# 재해율\\n- 설명: 연간 근로자 수 대비 재해 발생 건수의 비율을 측정합니다.\\n- 산식: (재해 건수(건) / 연간 근로자 수(명)) * 100`,\n    재해강도율: `# 재해강도율\\n- 설명: 총 근로자 수와 연간 근로시간 대비 노동손실일수의 비율을 측정합니다.\\n- 산식: (노동손실일수(일) / (총 근로자 수 * 1인당 연간 근로시간)) * 100`,\n    '안전 SL-PA 결과값': `# 안전 SL-PA 결과값\\n- 설명: SL-PA(Safety Level - Performance Assessment)는 건설/안전 분야에서 **안전관리 수준**을 정량적으로 평가하는 대표 지표입니다.\\n- 활용: 현장의 안전성과를 수치로 진단하고, 위험요소 개선 및 안전관리 정책 수립에 활용됩니다.\\n- 평가 방식: Python 활용 1~5점 척도 (1점: 매우 미흡, 5점: 매우 우수)`,\n    '안전성과 수준 평가': `# 안전성과 수준 평가\\n- 설명: 안전성과의 전반적인 수준을 감리자가 평가합니다.\\n- 평가 방식: 감리자 1~5점 척도`,\n    '건설폐기물 발생량': `# 건설폐기물 발생량\\n- 설명: 전체 건설폐기물 발생량을 측정합니다.\\n- 산식: 총 건설 폐기물 발생량(ton) / (연면적/1000m2)`,\n    '환경성과 수준 평가': `# 환경성과 수준 평가\\n- 설명: 환경성과의 전반적인 수준을 감리자가 평가합니다.\\n- 평가 방식: 감리자 1~5점 척도`,\n    '투입인력 생산성': `# 투입인력 생산성\\n- 설명: 투입 인력 대비 생산성을 측정합니다.\\n- 산식: 투입인력(명) / (연면적/1000m2)`,\n    '생산성과 수준 평가': `# 생산성과 수준 평가\\n- 설명: 생산성과의 전반적인 수준을 감리자가 평가합니다.\\n- 평가 방식: 감리자 1~5점 척도`\n  }\n\n  render() {\n    const group = this.kpiGroups[this.selectedGroup]\n    const kpi = group.kpis[this.selectedKpi]\n    const md = this.kpiDescriptions[kpi] || '각 지표의 주요 소개 내용을 마크다운으로 입력하세요.'\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 관리 시스템은 프로젝트 성과를 측정하고 모니터링하여 효율적인 공정 관리를 지원합니다.<br />\n            주요 지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.\n          </div>\n        </div>\n        <div class=\"overview-right\">\n          <img\n            class=\"overview-img\"\n            src=\"https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=600&q=80\"\n            alt=\"건설현장 안전\"\n          />\n        </div>\n      </div>\n      <div class=\"group-tabs\">\n        ${this.kpiGroups.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\" .innerHTML=${marked(md)}></div>\n        <div class=\"toc\">\n          <div class=\"toc-title\">목차</div>\n          <ul class=\"toc-list\">\n            ${group.kpis.map(\n              (k, i) => html` <li><button class=\"toc-btn\" @click=${() => (this.selectedKpi = i)}>${k}</button></li> `\n            )}\n          </ul>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi/kpi-overview.d.ts

@@ -0,0 +1,14 @@
+import { PageView } from '@operato/shell';
+export declare class KpiOverview extends PageView {
+    static styles: import("lit").CSSResult;
+    get context(): {
+        title: string;
+    };
+    selectedGroup: number;
+    selectedKpi: number;
+    kpiCategories: any[];
+    loading: boolean;
+    error: Error | null;
+    firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,290 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { marked } from 'marked';
+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 {
+      items {
+        id
+        name
+        description
+        active
+        kpis {
+          id
+          name
+          description
+          formula
+          active
+          grades {
+            id
+            name
+            minValue
+            maxValue
+            score
+            color
+            description
+          }
+        }
+      }
+    }
+  }
+`;
+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 `
+    .overview-container {
+      display: flex;
+      gap: 32px;
+      background: #f7f5fa;
+      border-radius: 20px;
+      padding: 32px;
+      margin-bottom: 24px;
+      align-items: stretch;
+    }
+    .overview-left {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .overview-title {
+      font-size: 2.8rem;
+      font-weight: bold;
+      margin-bottom: 24px;
+    }
+    .overview-desc {
+      font-size: 1.2rem;
+      color: #222;
+      line-height: 1.6;
+    }
+    .overview-right {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .overview-img {
+      width: 100%;
+      max-width: 420px;
+      border-radius: 12px;
+      object-fit: cover;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    }
+    .group-tabs {
+      display: flex;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      justify-content: center;
+    }
+    .group-tab {
+      padding: 10px 28px;
+      border-radius: 16px 16px 0 0;
+      background: #eee;
+      cursor: pointer;
+      font-size: 1.1rem;
+      font-weight: 500;
+      border: none;
+      outline: none;
+      transition: background 0.2s;
+    }
+    .group-tab[selected] {
+      background: #d6d6f7;
+      color: #222;
+      font-weight: bold;
+    }
+    .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: 32px;
+      margin-top: 32px;
+      align-items: flex-start;
+      justify-content: center;
+    }
+    .markdown {
+      background: #fff;
+      border-radius: 12px;
+      padding: 40px 32px;
+      min-height: 240px;
+      flex: 2;
+      font-size: 2rem;
+      color: #222;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    }
+    .toc {
+      flex: 1;
+      background: #faf9fd;
+      border-radius: 12px;
+      padding: 32px 24px;
+      font-size: 1.1rem;
+      color: #444;
+      min-width: 220px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+    }
+    .toc-title {
+      font-weight: bold;
+      margin-bottom: 12px;
+      font-size: 1.2rem;
+    }
+    .toc-list {
+      margin: 0 0 16px 0;
+      padding: 0;
+      list-style: none;
+    }
+    .toc-list li {
+      margin-bottom: 6px;
+    }
+    .toc-btn {
+      display: block;
+      margin: 12px 0;
+      padding: 8px 16px;
+      border: 1px solid #aaa;
+      border-radius: 8px;
+      background: #fff;
+      color: #333;
+      cursor: pointer;
+      font-size: 1rem;
+      text-align: left;
+      transition: background 0.2s;
+    }
+    .toc-btn:hover {
+      background: #f0f0f0;
+    }
+  `; }
+    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.items;
+            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 group = this.kpiCategories[this.selectedGroup];
+        const kpi = group?.kpis?.[this.selectedKpi];
+        const md = kpi?.description || '각 지표의 주요 소개 내용을 마크다운으로 입력하세요.';
+        return html `
+      <div class="overview-container">
+        <div class="overview-left">
+          <div class="overview-title">KPI개요</div>
+          <div class="overview-desc">
+            건설현장 KPI 관리 시스템은 프로젝트 성과를 측정하고 모니터링하여 효율적인 공정 관리를 지원합니다.<br />
+            주요 지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
+          </div>
+        </div>
+        <div class="overview-right">
+          <img
+            class="overview-img"
+            src="https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=600&q=80"
+            alt="건설현장 안전"
+          />
+        </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 style="font-size:1.5rem;font-weight:bold;margin-bottom:16px;">${kpi?.name || ''}</div>
+          <div style="margin-bottom:16px;">${kpi?.formula ? html `<b>산식:</b> ${kpi.formula}` : ''}</div>
+          <div .innerHTML=${marked(md)}></div>
+          ${kpi?.grades?.length
+            ? html `<div style="margin-top:32px;">
+                <b>등급 구간</b>
+                <ul>
+                  ${kpi.grades.map(g => html `<li>${g.name}: ${g.minValue}~${g.maxValue} (${g.description || ''})</li>`)}
+                </ul>
+              </div>`
+            : ''}
+        </div>
+        <div class="toc">
+          <div class="toc-title">목차</div>
+          <ul class="toc-list">
+            ${group?.kpis?.map((k, i) => html `
+                <li><button class="toc-btn" @click=${() => (this.selectedKpi = i)}>${k.name}</button></li>
+              `)}
+          </ul>
+        </div>
+      </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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-overview.js","sourceRoot":"","sources":["../../../client/pages/kpi/kpi-overview.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { marked } from 'marked'\nimport { PageView, store } from '@operato/shell'\nimport { i18next, localize } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\n\nconst GET_KPI_OVERVIEW = gql`\n  query {\n    kpiCategories {\n      items {\n        id\n        name\n        description\n        active\n        kpis {\n          id\n          name\n          description\n          formula\n          active\n          grades {\n            id\n            name\n            minValue\n            maxValue\n            score\n            color\n            description\n          }\n        }\n      }\n    }\n  }\n`\n\n@customElement('kpi-overview')\nexport class KpiOverview extends PageView {\n  static styles = css`\n    .overview-container {\n      display: flex;\n      gap: 32px;\n      background: #f7f5fa;\n      border-radius: 20px;\n      padding: 32px;\n      margin-bottom: 24px;\n      align-items: stretch;\n    }\n    .overview-left {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n    .overview-title {\n      font-size: 2.8rem;\n      font-weight: bold;\n      margin-bottom: 24px;\n    }\n    .overview-desc {\n      font-size: 1.2rem;\n      color: #222;\n      line-height: 1.6;\n    }\n    .overview-right {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .overview-img {\n      width: 100%;\n      max-width: 420px;\n      border-radius: 12px;\n      object-fit: cover;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n    }\n    .group-tabs {\n      display: flex;\n      gap: 8px;\n      margin: 0 0 16px 0;\n      justify-content: center;\n    }\n    .group-tab {\n      padding: 10px 28px;\n      border-radius: 16px 16px 0 0;\n      background: #eee;\n      cursor: pointer;\n      font-size: 1.1rem;\n      font-weight: 500;\n      border: none;\n      outline: none;\n      transition: background 0.2s;\n    }\n    .group-tab[selected] {\n      background: #d6d6f7;\n      color: #222;\n      font-weight: bold;\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: 32px;\n      margin-top: 32px;\n      align-items: flex-start;\n      justify-content: center;\n    }\n    .markdown {\n      background: #fff;\n      border-radius: 12px;\n      padding: 40px 32px;\n      min-height: 240px;\n      flex: 2;\n      font-size: 2rem;\n      color: #222;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n    }\n    .toc {\n      flex: 1;\n      background: #faf9fd;\n      border-radius: 12px;\n      padding: 32px 24px;\n      font-size: 1.1rem;\n      color: #444;\n      min-width: 220px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);\n    }\n    .toc-title {\n      font-weight: bold;\n      margin-bottom: 12px;\n      font-size: 1.2rem;\n    }\n    .toc-list {\n      margin: 0 0 16px 0;\n      padding: 0;\n      list-style: none;\n    }\n    .toc-list li {\n      margin-bottom: 6px;\n    }\n    .toc-btn {\n      display: block;\n      margin: 12px 0;\n      padding: 8px 16px;\n      border: 1px solid #aaa;\n      border-radius: 8px;\n      background: #fff;\n      color: #333;\n      cursor: pointer;\n      font-size: 1rem;\n      text-align: left;\n      transition: background 0.2s;\n    }\n    .toc-btn:hover {\n      background: #f0f0f0;\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.items\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 group = this.kpiCategories[this.selectedGroup] as any\n    const kpi = group?.kpis?.[this.selectedKpi] as any\n    const md = kpi?.description || '각 지표의 주요 소개 내용을 마크다운으로 입력하세요.'\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 관리 시스템은 프로젝트 성과를 측정하고 모니터링하여 효율적인 공정 관리를 지원합니다.<br />\n            주요 지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.\n          </div>\n        </div>\n        <div class=\"overview-right\">\n          <img\n            class=\"overview-img\"\n            src=\"https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=600&q=80\"\n            alt=\"건설현장 안전\"\n          />\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 style=\"font-size:1.5rem;font-weight:bold;margin-bottom:16px;\">${kpi?.name || ''}</div>\n          <div style=\"margin-bottom:16px;\">${kpi?.formula ? html`<b>산식:</b> ${kpi.formula}` : ''}</div>\n          <div .innerHTML=${marked(md)}></div>\n          ${kpi?.grades?.length\n            ? html`<div style=\"margin-top:32px;\">\n                <b>등급 구간</b>\n                <ul>\n                  ${kpi.grades.map(g => html`<li>${g.name}: ${g.minValue}~${g.maxValue} (${g.description || ''})</li>`)}\n                </ul>\n              </div>`\n            : ''}\n        </div>\n        <div class=\"toc\">\n          <div class=\"toc-title\">목차</div>\n          <ul class=\"toc-list\">\n            ${group?.kpis?.map(\n              (k, i) => html`\n                <li><button class=\"toc-btn\" @click=${() => (this.selectedKpi = i)}>${k.name}</button></li>\n              `\n            )}\n          </ul>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi-category/kpi-category-importer.js

@@ -37,6 +37,21 @@ export class KpiCategoryImporter extends LitElement {
             ]
         };
     }
+    static { this.styles = [
+        ButtonContainerStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+    ]; }
     render() {
         return html `
       <ox-grist
@@ -53,7 +68,6 @@ export class KpiCategoryImporter extends LitElement {
     `;
     }
     async save() {
-        var _a;
         const response = await client.mutate({
             mutation: gql `
         mutation importKpiCategories($kpiCategories: [KpiCategoryPatch!]!) {
@@ -62,26 +76,11 @@ export class KpiCategoryImporter extends LitElement {
       `,
             variables: { kpiCategories: this.kpiCategories }
         });
-        if ((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)
+        if (response.errors?.length)
             return;
         this.dispatchEvent(new CustomEvent('imported'));
     }
 }
-KpiCategoryImporter.styles = [
-    ButtonContainerStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: #fff;
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-    `
-];
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)