@things-factory/kpi 9.0.41 → 9.0.42

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

@@ -1,7 +1,6 @@
 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';
@@ -34,65 +33,68 @@ let KpiOverview = class KpiOverview extends PageView {
         this.error = null;
     }
     static { this.styles = css `
+    :host {
+      display: block;
+      background: #f6f6f6;
+      box-sizing: border-box;
+      padding: 16px 24px;
+    }
     .overview-container {
-      display: flex;
-      gap: 32px;
-      background: #f7f5fa;
-      border-radius: 20px;
-      padding: 32px;
-      margin-bottom: 24px;
-      align-items: stretch;
+      display: block;
+      margin: 8px 0 24px 0;
     }
     .overview-left {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+      display: block;
     }
     .overview-title {
-      font-size: 2.8rem;
-      font-weight: bold;
-      margin-bottom: 24px;
+      color: #0c4da2;
+      font-size: 1.125rem;
+      font-weight: 700;
+      letter-spacing: -0.05em;
+      margin: 0 0 8px 0;
     }
     .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);
+      font-size: 0.875rem;
+      color: #212529;
+      letter-spacing: -0.05em;
+      line-height: 1;
     }
     .group-tabs {
       display: flex;
-      gap: 8px;
-      margin: 0 0 16px 0;
-      justify-content: center;
+      margin: 8px 0 0 0;
+      justify-content: flex-start;
     }
     .group-tab {
-      padding: 10px 28px;
-      border-radius: 16px 16px 0 0;
-      background: #eee;
+      padding: 10px 15px;
+      border-radius: 8px 8px 0 0;
+      background: rgba(46, 164, 223, 0.1);
       cursor: pointer;
-      font-size: 1.1rem;
-      font-weight: 500;
+      font-size: 1rem;
+      font-weight: 400;
       border: none;
       outline: none;
       transition: background 0.2s;
     }
     .group-tab[selected] {
-      background: #d6d6f7;
-      color: #222;
-      font-weight: bold;
+      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;
@@ -117,59 +119,133 @@ let KpiOverview = class KpiOverview extends PageView {
     }
     .main-content {
       display: flex;
-      gap: 32px;
-      margin-top: 32px;
-      align-items: flex-start;
-      justify-content: center;
+      gap: 0;
+      align-items: stretch;
+      justify-content: stretch;
+      background: #fff;
+      border: 2px solid #0c4da2;
+      overflow: hidden;
     }
     .markdown {
       background: #fff;
-      border-radius: 12px;
-      padding: 40px 32px;
+      padding: 25px;
       min-height: 240px;
-      flex: 2;
-      font-size: 2rem;
-      color: #222;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      flex: 1 1 auto;
+      font-size: 0.875rem;
+      color: #212529;
+    }
+    .markdown p {
+      line-height: 1.7142857142857142;
+      margin: 0 0 12px 0;
     }
     .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);
+      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 {
-      font-weight: bold;
-      margin-bottom: 12px;
-      font-size: 1.2rem;
+      color: #0c4da2;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 20px;
+      margin-bottom: 15px;
+      margin-top: 3px;
     }
     .toc-list {
-      margin: 0 0 16px 0;
+      margin: 0 0 8px 0;
       padding: 0;
       list-style: none;
     }
     .toc-list li {
-      margin-bottom: 6px;
+      margin-bottom: 10px;
     }
     .toc-btn {
       display: block;
-      margin: 12px 0;
-      padding: 8px 16px;
-      border: 1px solid #aaa;
-      border-radius: 8px;
-      background: #fff;
-      color: #333;
+      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: #f0f0f0;
+      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() {
@@ -193,25 +269,18 @@ let KpiOverview = class KpiOverview extends PageView {
             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];
-        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 />
-            주요 지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
+            건설현장 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요
+            지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
           </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 `
@@ -229,27 +298,39 @@ let KpiOverview = class KpiOverview extends PageView {
       </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 && Array.isArray(kpi.grades) && kpi.grades.length > 0
-            ? 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 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">
-          <div class="toc-title">목차</div>
+          <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" @click=${() => (this.selectedKpi = i)}>${k.name}</button></li>
+                <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>
+          `
+            : ''}
     `;
     }
 };

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

@@ -1 +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: 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    .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\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 && Array.isArray(kpi.grades) && kpi.grades.length > 0\n            ? html`<div style=\"margin-top:32px;\">\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        </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"]}
+{"version":3,"file":"kpi-overview.js","sourceRoot":"","sources":["../../../client/pages/kpi/kpi-overview.ts"],"names":[],"mappings":"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","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"]}