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

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

@@ -0,0 +1,305 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+import { state } from 'lit/decorators.js';
+import './kpi-performance-summary';
+import './kpi-grade-visualization';
+import './kpi-history-viewer';
+import './kpi-list-summary';
+import './kpi-value-entry';
+import './kpi-alert-panel';
+let KpiDashboardPage = class KpiDashboardPage extends PageView {
+    constructor() {
+        super(...arguments);
+        this.categories = [];
+        this.loading = true;
+        this.error = '';
+        this.alerts = [];
+        this.showHistoryModal = false;
+        this.modalHistories = [];
+        this.modalKpiName = '';
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+      }
+      .dashboard-root {
+        flex: 1;
+        padding: 24px;
+      }
+      .category-section {
+        margin-bottom: 40px;
+      }
+      .category-title {
+        font-size: 1.3rem;
+        font-weight: bold;
+        margin-bottom: 16px;
+      }
+      .kpi-cards {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+      }
+      .kpi-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 24px 32px;
+        min-width: 220px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: 8px;
+        border: 1px solid #ececec;
+      }
+      .kpi-name {
+        font-size: 1.1rem;
+        font-weight: 500;
+        margin-bottom: 8px;
+      }
+      .kpi-value {
+        font-size: 2.2rem;
+        font-weight: bold;
+        color: #3a3ad6;
+        margin-bottom: 4px;
+      }
+      .kpi-target {
+        font-size: 1rem;
+        color: #888;
+      }
+    `
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchCategories();
+    }
+    async fetchCategories() {
+        this.loading = true;
+        this.error = '';
+        try {
+            const response = await client.query({
+                query: gql `
+          query {
+            kpiCategories {
+              items {
+                id
+                name
+                kpis {
+                  id
+                  name
+                  value {
+                    value
+                    valueDate
+                  }
+                  targetValue
+                  unit
+                  grades {
+                    name
+                    minValue
+                    maxValue
+                    score
+                    color
+                  }
+                  histories(limit: 1) {
+                    version
+                    updatedAt
+                    updater {
+                      name
+                    }
+                  }
+                }
+              }
+            }
+            kpiAlerts {
+              id
+              kpi {
+                id
+              }
+              message
+              level
+              createdAt
+            }
+          }
+        `
+            });
+            this.categories = response.data.kpiCategories.items || [];
+            this.alerts = response.data.kpiAlerts || [];
+        }
+        catch (e) {
+            this.error = 'KPI 카테고리 데이터를 불러오지 못했습니다.';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    async openHistoryModal(kpi) {
+        // 전체 이력 fetch (limit 없이)
+        try {
+            const response = await client.query({
+                query: gql `
+          query ($kpiId: String!) {
+            kpi(id: $kpiId) {
+              name
+              histories {
+                version
+                updatedAt
+                updater {
+                  name
+                }
+              }
+            }
+          }
+        `,
+                variables: { kpiId: kpi.id }
+            });
+            this.modalHistories = response.data.kpi.histories || [];
+            this.modalKpiName = response.data.kpi.name || '';
+            this.showHistoryModal = true;
+        }
+        catch (e) {
+            alert('이력 데이터를 불러오지 못했습니다.');
+        }
+    }
+    closeHistoryModal() {
+        this.showHistoryModal = false;
+        this.modalHistories = [];
+        this.modalKpiName = '';
+    }
+    get context() {
+        return {
+            title: 'KPI 대시보드',
+            description: '조직 KPI 실적, 등급, 이력, 시각화 등 KPI 전용 대시보드'
+        };
+    }
+    render() {
+        if (this.loading)
+            return nothing;
+        if (this.error)
+            return html `<div>${this.error}</div>`;
+        return html `
+      <div class="dashboard-root">
+        ${this.showHistoryModal
+            ? html `
+              <div
+                style="position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);z-index:1000;display:flex;align-items:center;justify-content:center;"
+              >
+                <div
+                  style="background:#fff;padding:32px 40px;border-radius:16px;min-width:340px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:0 4px 24px rgba(0,0,0,0.15);"
+                >
+                  <div style="font-size:1.2rem;font-weight:bold;margin-bottom:16px;">
+                    ${this.modalKpiName} 변경 이력
+                  </div>
+                  <ul style="padding:0;list-style:none;">
+                    ${this.modalHistories.length === 0
+                ? html `<li style="color:#bbb;">이력이 없습니다.</li>`
+                : this.modalHistories.map(h => html `<li style="margin-bottom:8px;">
+                              v${h.version} (${h.updatedAt?.slice(0, 10) ?? ''} ${h.updater?.name ?? ''})
+                            </li>`)}
+                  </ul>
+                  <button style="margin-top:16px;padding:6px 18px;" @click=${() => this.closeHistoryModal()}>
+                    닫기
+                  </button>
+                </div>
+              </div>
+            `
+            : nothing}
+        ${this.categories.map(cat => html `
+            <div class="category-section">
+              <div class="category-title">${cat.name}</div>
+              <div class="kpi-cards">
+                ${(cat.kpis || []).map(kpi => html `
+                    <div class="kpi-card">
+                      <div class="kpi-name">${kpi.name}</div>
+                      <div class="kpi-value">${kpi.value?.value ?? '데이터 없음'}${kpi.unit ?? ''}</div>
+                      <div class="kpi-target">목표: ${kpi.targetValue ?? '-'}${kpi.unit ?? ''}</div>
+                      <!-- 등급 시각화 -->
+                      <div style="margin-top:8px;">
+                        <b>등급:</b>
+                        ${(kpi.grades || []).map(g => html `<span
+                              style="display:inline-block;margin-right:8px;padding:2px 8px;border-radius:8px;background:${g.color ??
+            '#eee'};color:#222;font-size:0.95em;"
+                              >${g.name}(${g.minValue}~${g.maxValue}${kpi.unit ?? ''}, ${g.score ?? ''}점)</span
+                            >`)}
+                      </div>
+                      <!-- 최근 변경 이력(1건만) -->
+                      <div style="margin-top:8px;font-size:0.95em;color:#888;">
+                        <b>최근 변경:</b>
+                        ${kpi.histories && kpi.histories.length > 0
+            ? html `<span style="margin-right:8px;"
+                              >v${kpi.histories[0].version} (${kpi.histories[0].updatedAt?.slice(0, 10) ?? ''}
+                              ${kpi.histories[0].updater?.name ?? ''})</span
+                            >`
+            : html `<span style="color:#bbb">없음</span>`}
+                        <button
+                          style="margin-left:8px;font-size:0.95em;padding:2px 8px;"
+                          @click=${() => this.openHistoryModal(kpi)}
+                        >
+                          더보기
+                        </button>
+                      </div>
+                      <!-- 경고/알림 -->
+                      <div style="margin-top:8px;">
+                        ${this.alerts.filter(a => a.kpi?.id === kpi.id).length > 0
+            ? this.alerts
+                .filter(a => a.kpi?.id === kpi.id)
+                .map(a => html `<span
+                                    style="display:inline-block;margin-right:8px;padding:2px 8px;border-radius:8px;background:${a.level ===
+                'critical'
+                ? '#ffb3b3'
+                : a.level === 'warning'
+                    ? '#ffe082'
+                    : '#e0e0e0'};color:#b71c1c;font-size:0.95em;"
+                                    >${a.message}</span
+                                  >`)
+            : html `<span style="color:#4caf50;font-size:0.95em;">이상/경고 없음</span>`}
+                      </div>
+                    </div>
+                  `)}
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiDashboardPage.prototype, "categories", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardPage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardPage.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiDashboardPage.prototype, "alerts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], KpiDashboardPage.prototype, "showHistoryModal", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiDashboardPage.prototype, "modalHistories", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], KpiDashboardPage.prototype, "modalKpiName", void 0);
+KpiDashboardPage = __decorate([
+    customElement('kpi-dashboard')
+], KpiDashboardPage);
+export { KpiDashboardPage };
+//# sourceMappingURL=kpi-dashboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-dashboard.js","sourceRoot":"","sources":["../../../client/pages/kpi-dashboard/kpi-dashboard.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, nothing } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { state } from 'lit/decorators.js'\n\nimport './kpi-performance-summary'\nimport './kpi-grade-visualization'\nimport './kpi-history-viewer'\nimport './kpi-list-summary'\nimport './kpi-value-entry'\nimport './kpi-alert-panel'\n\n@customElement('kpi-dashboard')\nexport class KpiDashboardPage extends PageView {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n      }\n      .dashboard-root {\n        flex: 1;\n        padding: 24px;\n      }\n      .category-section {\n        margin-bottom: 40px;\n      }\n      .category-title {\n        font-size: 1.3rem;\n        font-weight: bold;\n        margin-bottom: 16px;\n      }\n      .kpi-cards {\n        display: flex;\n        gap: 24px;\n        flex-wrap: wrap;\n      }\n      .kpi-card {\n        background: #fff;\n        border-radius: 12px;\n        padding: 24px 32px;\n        min-width: 220px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        margin-bottom: 8px;\n        border: 1px solid #ececec;\n      }\n      .kpi-name {\n        font-size: 1.1rem;\n        font-weight: 500;\n        margin-bottom: 8px;\n      }\n      .kpi-value {\n        font-size: 2.2rem;\n        font-weight: bold;\n        color: #3a3ad6;\n        margin-bottom: 4px;\n      }\n      .kpi-target {\n        font-size: 1rem;\n        color: #888;\n      }\n    `\n  ]\n\n  @state() categories: any[] = []\n  @state() loading = true\n  @state() error = ''\n  @state() alerts: any[] = []\n  @state() showHistoryModal: boolean = false\n  @state() modalHistories: any[] = []\n  @state() modalKpiName: string = ''\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.fetchCategories()\n  }\n\n  async fetchCategories() {\n    this.loading = true\n    this.error = ''\n    try {\n      const response = await client.query({\n        query: gql`\n          query {\n            kpiCategories {\n              items {\n                id\n                name\n                kpis {\n                  id\n                  name\n                  value {\n                    value\n                    valueDate\n                  }\n                  targetValue\n                  unit\n                  grades {\n                    name\n                    minValue\n                    maxValue\n                    score\n                    color\n                  }\n                  histories(limit: 1) {\n                    version\n                    updatedAt\n                    updater {\n                      name\n                    }\n                  }\n                }\n              }\n            }\n            kpiAlerts {\n              id\n              kpi {\n                id\n              }\n              message\n              level\n              createdAt\n            }\n          }\n        `\n      })\n      this.categories = response.data.kpiCategories.items || []\n      this.alerts = response.data.kpiAlerts || []\n    } catch (e) {\n      this.error = 'KPI 카테고리 데이터를 불러오지 못했습니다.'\n    } finally {\n      this.loading = false\n    }\n  }\n\n  async openHistoryModal(kpi) {\n    // 전체 이력 fetch (limit 없이)\n    try {\n      const response = await client.query({\n        query: gql`\n          query ($kpiId: String!) {\n            kpi(id: $kpiId) {\n              name\n              histories {\n                version\n                updatedAt\n                updater {\n                  name\n                }\n              }\n            }\n          }\n        `,\n        variables: { kpiId: kpi.id }\n      })\n      this.modalHistories = response.data.kpi.histories || []\n      this.modalKpiName = response.data.kpi.name || ''\n      this.showHistoryModal = true\n    } catch (e) {\n      alert('이력 데이터를 불러오지 못했습니다.')\n    }\n  }\n  closeHistoryModal() {\n    this.showHistoryModal = false\n    this.modalHistories = []\n    this.modalKpiName = ''\n  }\n\n  get context() {\n    return {\n      title: 'KPI 대시보드',\n      description: '조직 KPI 실적, 등급, 이력, 시각화 등 KPI 전용 대시보드'\n    } as any\n  }\n\n  render() {\n    if (this.loading) return nothing\n    if (this.error) return html`<div>${this.error}</div>`\n    return html`\n      <div class=\"dashboard-root\">\n        ${this.showHistoryModal\n          ? html`\n              <div\n                style=\"position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);z-index:1000;display:flex;align-items:center;justify-content:center;\"\n              >\n                <div\n                  style=\"background:#fff;padding:32px 40px;border-radius:16px;min-width:340px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:0 4px 24px rgba(0,0,0,0.15);\"\n                >\n                  <div style=\"font-size:1.2rem;font-weight:bold;margin-bottom:16px;\">\n                    ${this.modalKpiName} 변경 이력\n                  </div>\n                  <ul style=\"padding:0;list-style:none;\">\n                    ${this.modalHistories.length === 0\n                      ? html`<li style=\"color:#bbb;\">이력이 없습니다.</li>`\n                      : this.modalHistories.map(\n                          h =>\n                            html`<li style=\"margin-bottom:8px;\">\n                              v${h.version} (${h.updatedAt?.slice(0, 10) ?? ''} ${h.updater?.name ?? ''})\n                            </li>`\n                        )}\n                  </ul>\n                  <button style=\"margin-top:16px;padding:6px 18px;\" @click=${() => this.closeHistoryModal()}>\n                    닫기\n                  </button>\n                </div>\n              </div>\n            `\n          : nothing}\n        ${this.categories.map(\n          cat => html`\n            <div class=\"category-section\">\n              <div class=\"category-title\">${cat.name}</div>\n              <div class=\"kpi-cards\">\n                ${(cat.kpis || []).map(\n                  kpi => html`\n                    <div class=\"kpi-card\">\n                      <div class=\"kpi-name\">${kpi.name}</div>\n                      <div class=\"kpi-value\">${kpi.value?.value ?? '데이터 없음'}${kpi.unit ?? ''}</div>\n                      <div class=\"kpi-target\">목표: ${kpi.targetValue ?? '-'}${kpi.unit ?? ''}</div>\n                      <!-- 등급 시각화 -->\n                      <div style=\"margin-top:8px;\">\n                        <b>등급:</b>\n                        ${(kpi.grades || []).map(\n                          g =>\n                            html`<span\n                              style=\"display:inline-block;margin-right:8px;padding:2px 8px;border-radius:8px;background:${g.color ??\n                              '#eee'};color:#222;font-size:0.95em;\"\n                              >${g.name}(${g.minValue}~${g.maxValue}${kpi.unit ?? ''}, ${g.score ?? ''}점)</span\n                            >`\n                        )}\n                      </div>\n                      <!-- 최근 변경 이력(1건만) -->\n                      <div style=\"margin-top:8px;font-size:0.95em;color:#888;\">\n                        <b>최근 변경:</b>\n                        ${kpi.histories && kpi.histories.length > 0\n                          ? html`<span style=\"margin-right:8px;\"\n                              >v${kpi.histories[0].version} (${kpi.histories[0].updatedAt?.slice(0, 10) ?? ''}\n                              ${kpi.histories[0].updater?.name ?? ''})</span\n                            >`\n                          : html`<span style=\"color:#bbb\">없음</span>`}\n                        <button\n                          style=\"margin-left:8px;font-size:0.95em;padding:2px 8px;\"\n                          @click=${() => this.openHistoryModal(kpi)}\n                        >\n                          더보기\n                        </button>\n                      </div>\n                      <!-- 경고/알림 -->\n                      <div style=\"margin-top:8px;\">\n                        ${this.alerts.filter(a => a.kpi?.id === kpi.id).length > 0\n                          ? this.alerts\n                              .filter(a => a.kpi?.id === kpi.id)\n                              .map(\n                                a =>\n                                  html`<span\n                                    style=\"display:inline-block;margin-right:8px;padding:2px 8px;border-radius:8px;background:${a.level ===\n                                    'critical'\n                                      ? '#ffb3b3'\n                                      : a.level === 'warning'\n                                        ? '#ffe082'\n                                        : '#e0e0e0'};color:#b71c1c;font-size:0.95em;\"\n                                    >${a.message}</span\n                                  >`\n                              )\n                          : html`<span style=\"color:#4caf50;font-size:0.95em;\">이상/경고 없음</span>`}\n                      </div>\n                    </div>\n                  `\n                )}\n              </div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi-dashboard/kpi-grade-visualization.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class KpiGradeVisualization extends LitElement {
+    static styles: import("lit").CSSResult;
+    grades: {
+        kpi: string;
+        grade: string;
+        color: string;
+        desc: string;
+        value: number;
+    }[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/kpi-dashboard/kpi-grade-visualization.js

@@ -0,0 +1,82 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+let KpiGradeVisualization = class KpiGradeVisualization extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.grades = [
+            { kpi: '불량률', grade: 'A', color: '#4caf50', desc: '우수', value: 0.8 },
+            { kpi: '불량률', grade: 'B', color: '#ff9800', desc: '양호', value: 1.5 },
+            { kpi: '불량률', grade: 'C', color: '#f44336', desc: '주의', value: 2.7 }
+        ];
+    }
+    static { this.styles = css `
+    .grade-container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      margin-bottom: 16px;
+    }
+    .grade-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+    .grade-cards {
+      display: flex;
+      gap: 24px;
+      flex-wrap: wrap;
+    }
+    .grade-card {
+      background: #f0f7fa;
+      border-radius: 12px;
+      padding: 20px 28px;
+      min-width: 180px;
+      flex: 1;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .grade-label {
+      font-size: 1.1rem;
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+    .grade-value {
+      font-size: 2rem;
+      font-weight: bold;
+      margin-bottom: 4px;
+    }
+    .grade-desc {
+      font-size: 1rem;
+      color: #888;
+    }
+  `; }
+    render() {
+        return html `
+      <div class="grade-container">
+        <div class="grade-title">KPI 등급/구간 시각화</div>
+        <div class="grade-cards">
+          ${this.grades.map(g => html `
+              <div class="grade-card" style="border-left: 8px solid ${g.color}">
+                <div class="grade-label">${g.kpi} - ${g.grade}등급</div>
+                <div class="grade-value" style="color:${g.color}">${g.value}</div>
+                <div class="grade-desc">${g.desc}</div>
+              </div>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiGradeVisualization.prototype, "grades", void 0);
+KpiGradeVisualization = __decorate([
+    customElement('kpi-grade-visualization')
+], KpiGradeVisualization);
+export { KpiGradeVisualization };
+//# sourceMappingURL=kpi-grade-visualization.js.map

package/dist-client/pages/kpi-dashboard/kpi-grade-visualization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-grade-visualization.js","sourceRoot":"","sources":["../../../client/pages/kpi-dashboard/kpi-grade-visualization.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGjD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QA8CI,WAAM,GAAG;YAChB,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE;YACpE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE;YACpE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE;SACrE,CAAA;IAoBH,CAAC;aArEQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ClB,AA3CY,CA2CZ;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,MAAM,CAAC,GAAG,CACf,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;sEACiD,CAAC,CAAC,KAAK;2CAClC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,KAAK;wDACL,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK;0CACjC,CAAC,CAAC,IAAI;;aAEnC,CACF;;;KAGN,CAAA;IACH,CAAC;;AAvBQ;IAAR,KAAK,EAAE;;qDAIP;AAlDU,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAsEjC","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\n@customElement('kpi-grade-visualization')\nexport class KpiGradeVisualization extends LitElement {\n  static styles = css`\n    .grade-container {\n      background: #fff;\n      border-radius: 16px;\n      padding: 32px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n      margin-bottom: 16px;\n    }\n    .grade-title {\n      font-size: 1.5rem;\n      font-weight: bold;\n      margin-bottom: 16px;\n    }\n    .grade-cards {\n      display: flex;\n      gap: 24px;\n      flex-wrap: wrap;\n    }\n    .grade-card {\n      background: #f0f7fa;\n      border-radius: 12px;\n      padding: 20px 28px;\n      min-width: 180px;\n      flex: 1;\n      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n    .grade-label {\n      font-size: 1.1rem;\n      font-weight: 500;\n      margin-bottom: 8px;\n    }\n    .grade-value {\n      font-size: 2rem;\n      font-weight: bold;\n      margin-bottom: 4px;\n    }\n    .grade-desc {\n      font-size: 1rem;\n      color: #888;\n    }\n  `\n\n  @state() grades = [\n    { kpi: '불량률', grade: 'A', color: '#4caf50', desc: '우수', value: 0.8 },\n    { kpi: '불량률', grade: 'B', color: '#ff9800', desc: '양호', value: 1.5 },\n    { kpi: '불량률', grade: 'C', color: '#f44336', desc: '주의', value: 2.7 }\n  ]\n\n  render() {\n    return html`\n      <div class=\"grade-container\">\n        <div class=\"grade-title\">KPI 등급/구간 시각화</div>\n        <div class=\"grade-cards\">\n          ${this.grades.map(\n            g => html`\n              <div class=\"grade-card\" style=\"border-left: 8px solid ${g.color}\">\n                <div class=\"grade-label\">${g.kpi} - ${g.grade}등급</div>\n                <div class=\"grade-value\" style=\"color:${g.color}\">${g.value}</div>\n                <div class=\"grade-desc\">${g.desc}</div>\n              </div>\n            `\n          )}\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi-dashboard/kpi-history-viewer.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class KpiHistoryViewer extends LitElement {
+    static styles: import("lit").CSSResult;
+    histories: {
+        date: string;
+        action: string;
+        user: string;
+        desc: string;
+    }[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/kpi-dashboard/kpi-history-viewer.js

@@ -0,0 +1,65 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+let KpiHistoryViewer = class KpiHistoryViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.histories = [
+            { date: '2024-06-01', action: 'Release', user: '홍길동', desc: '불량률 KPI 산식 변경 및 버전 Release' },
+            { date: '2024-05-15', action: 'Revert', user: '김감리', desc: '불량률 KPI 이전 버전 복원' },
+            { date: '2024-05-01', action: 'Release', user: '홍길동', desc: '불량률 KPI 신규 등록 및 Release' }
+        ];
+    }
+    static { this.styles = css `
+    .history-container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      margin-bottom: 16px;
+    }
+    .history-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+    .history-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .history-item {
+      padding: 12px 0;
+      border-bottom: 1px solid #eee;
+      font-size: 1.1rem;
+    }
+    .history-meta {
+      color: #888;
+      font-size: 0.95rem;
+    }
+  `; }
+    render() {
+        return html `
+      <div class="history-container">
+        <div class="history-title">KPI 이력/버전 관리</div>
+        <ul class="history-list">
+          ${this.histories.map(h => html `
+              <li class="history-item">
+                <div>${h.action} - ${h.desc}</div>
+                <div class="history-meta">${h.date} / ${h.user}</div>
+              </li>
+            `)}
+        </ul>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiHistoryViewer.prototype, "histories", void 0);
+KpiHistoryViewer = __decorate([
+    customElement('kpi-history-viewer')
+], KpiHistoryViewer);
+export { KpiHistoryViewer };
+//# sourceMappingURL=kpi-history-viewer.js.map

package/dist-client/pages/kpi-dashboard/kpi-history-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-history-viewer.js","sourceRoot":"","sources":["../../../client/pages/kpi-dashboard/kpi-history-viewer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGjD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QA8BI,cAAS,GAAG;YACnB,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,4BAA4B,EAAE;YAC1F,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE;YAC/E,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,yBAAyB,EAAE;SACxF,CAAA;IAmBH,CAAC;aApDQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BlB,AA3BY,CA2BZ;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;;uBAEE,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,IAAI;4CACC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,IAAI;;aAEjD,CACF;;;KAGN,CAAA;IACH,CAAC;;AAtBQ;IAAR,KAAK,EAAE;;mDAIP;AAlCU,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAqD5B","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\n@customElement('kpi-history-viewer')\nexport class KpiHistoryViewer extends LitElement {\n  static styles = css`\n    .history-container {\n      background: #fff;\n      border-radius: 16px;\n      padding: 32px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n      margin-bottom: 16px;\n    }\n    .history-title {\n      font-size: 1.5rem;\n      font-weight: bold;\n      margin-bottom: 16px;\n    }\n    .history-list {\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    }\n    .history-item {\n      padding: 12px 0;\n      border-bottom: 1px solid #eee;\n      font-size: 1.1rem;\n    }\n    .history-meta {\n      color: #888;\n      font-size: 0.95rem;\n    }\n  `\n\n  @state() histories = [\n    { date: '2024-06-01', action: 'Release', user: '홍길동', desc: '불량률 KPI 산식 변경 및 버전 Release' },\n    { date: '2024-05-15', action: 'Revert', user: '김감리', desc: '불량률 KPI 이전 버전 복원' },\n    { date: '2024-05-01', action: 'Release', user: '홍길동', desc: '불량률 KPI 신규 등록 및 Release' }\n  ]\n\n  render() {\n    return html`\n      <div class=\"history-container\">\n        <div class=\"history-title\">KPI 이력/버전 관리</div>\n        <ul class=\"history-list\">\n          ${this.histories.map(\n            h => html`\n              <li class=\"history-item\">\n                <div>${h.action} - ${h.desc}</div>\n                <div class=\"history-meta\">${h.date} / ${h.user}</div>\n              </li>\n            `\n          )}\n        </ul>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi-dashboard/kpi-list-summary.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class KpiListSummary extends LitElement {
+    static styles: import("lit").CSSResult;
+    kpis: Array<{
+        name: string;
+        desc: string;
+    }>;
+    loading: boolean;
+    error: string;
+    connectedCallback(): void;
+    fetchKpis(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/kpi-dashboard/kpi-list-summary.js

@@ -0,0 +1,115 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+let KpiListSummary = class KpiListSummary extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.kpis = [];
+        this.loading = true;
+        this.error = '';
+    }
+    static { this.styles = css `
+    .list-container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      margin-bottom: 16px;
+    }
+    .list-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+    .kpi-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .kpi-item {
+      padding: 10px 0;
+      border-bottom: 1px solid #eee;
+      font-size: 1.1rem;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .kpi-item:hover {
+      background: #f0f0f0;
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchKpis();
+    }
+    async fetchKpis() {
+        this.loading = true;
+        this.error = '';
+        try {
+            const response = await client.query({
+                query: gql `
+          query {
+            kpis {
+              items {
+                id
+                name
+                description
+                formula
+              }
+              total
+            }
+          }
+        `
+            });
+            this.kpis = (response.data.kpis.items || []).map(kpi => ({
+                name: kpi.name,
+                desc: kpi.formula || kpi.description || ''
+            }));
+        }
+        catch (e) {
+            this.error = 'KPI 목록을 불러오지 못했습니다.';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        if (this.loading) {
+            return html `<div class="list-container">로딩 중...</div>`;
+        }
+        if (this.error) {
+            return html `<div class="list-container">${this.error}</div>`;
+        }
+        return html `
+      <div class="list-container">
+        <div class="list-title">KPI 목록/검색/상세</div>
+        <ul class="kpi-list">
+          ${this.kpis.map(kpi => html `
+              <li class="kpi-item">
+                <div><b>${kpi.name}</b></div>
+                <div style="font-size:0.95rem;color:#888;">${kpi.desc}</div>
+              </li>
+            `)}
+        </ul>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiListSummary.prototype, "kpis", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiListSummary.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiListSummary.prototype, "error", void 0);
+KpiListSummary = __decorate([
+    customElement('kpi-list-summary')
+], KpiListSummary);
+export { KpiListSummary };
+//# sourceMappingURL=kpi-list-summary.js.map

package/dist-client/pages/kpi-dashboard/kpi-list-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-list-summary.js","sourceRoot":"","sources":["../../../client/pages/kpi-dashboard/kpi-list-summary.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,GAAG,MAAM,aAAa,CAAA;AAGtB,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QA+BI,SAAI,GAA0C,EAAE,CAAA;QAChD,YAAO,GAAG,IAAI,CAAA;QACd,UAAK,GAAG,EAAE,CAAA;IA4DrB,CAAC;aA5FQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,AA5BY,CA4BZ;IAMD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,SAAS,EAAE,CAAA;IAClB,CAAC;IAED,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QACf,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;SAYT;aACF,CAAC,CAAA;YACF,IAAI,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACvD,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,IAAI,EAAE,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,WAAW,IAAI,EAAE;aAC3C,CAAC,CAAC,CAAA;QACL,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAA;QACpC,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,2CAA2C,CAAA;QACxD,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,QAAQ,CAAA;QAC9D,CAAC;QACD,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,IAAI,CAAC,GAAG,CACb,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEG,GAAG,CAAC,IAAI;6DAC2B,GAAG,CAAC,IAAI;;aAExD,CACF;;;KAGN,CAAA;IACH,CAAC;;AA7DQ;IAAR,KAAK,EAAE;8BAAO,KAAK;4CAAqC;AAChD;IAAR,KAAK,EAAE;;+CAAe;AACd;IAAR,KAAK,EAAE;;6CAAW;AAjCR,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA6F1B","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\n\n@customElement('kpi-list-summary')\nexport class KpiListSummary extends LitElement {\n  static styles = css`\n    .list-container {\n      background: #fff;\n      border-radius: 16px;\n      padding: 32px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n      margin-bottom: 16px;\n    }\n    .list-title {\n      font-size: 1.5rem;\n      font-weight: bold;\n      margin-bottom: 16px;\n    }\n    .kpi-list {\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    }\n    .kpi-item {\n      padding: 10px 0;\n      border-bottom: 1px solid #eee;\n      font-size: 1.1rem;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n    .kpi-item:hover {\n      background: #f0f0f0;\n    }\n  `\n\n  @state() kpis: Array<{ name: string; desc: string }> = []\n  @state() loading = true\n  @state() error = ''\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.fetchKpis()\n  }\n\n  async fetchKpis() {\n    this.loading = true\n    this.error = ''\n    try {\n      const response = await client.query({\n        query: gql`\n          query {\n            kpis {\n              items {\n                id\n                name\n                description\n                formula\n              }\n              total\n            }\n          }\n        `\n      })\n      this.kpis = (response.data.kpis.items || []).map(kpi => ({\n        name: kpi.name,\n        desc: kpi.formula || kpi.description || ''\n      }))\n    } catch (e) {\n      this.error = 'KPI 목록을 불러오지 못했습니다.'\n    } finally {\n      this.loading = false\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return html`<div class=\"list-container\">로딩 중...</div>`\n    }\n    if (this.error) {\n      return html`<div class=\"list-container\">${this.error}</div>`\n    }\n    return html`\n      <div class=\"list-container\">\n        <div class=\"list-title\">KPI 목록/검색/상세</div>\n        <ul class=\"kpi-list\">\n          ${this.kpis.map(\n            kpi => html`\n              <li class=\"kpi-item\">\n                <div><b>${kpi.name}</b></div>\n                <div style=\"font-size:0.95rem;color:#888;\">${kpi.desc}</div>\n              </li>\n            `\n          )}\n        </ul>\n      </div>\n    `\n  }\n}\n"]}