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

package/client/pages/kpi-dashboard/kpi-dashboard.ts

@@ -0,0 +1,285 @@
+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'
+
+@customElement('kpi-dashboard')
+export class KpiDashboardPage extends PageView {
+  static 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;
+      }
+    `
+  ]
+
+  @state() categories: any[] = []
+  @state() loading = true
+  @state() error = ''
+  @state() alerts: any[] = []
+  @state() showHistoryModal: boolean = false
+  @state() modalHistories: any[] = []
+  @state() modalKpiName: string = ''
+
+  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 전용 대시보드'
+    } as any
+  }
+
+  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>
+    `
+  }
+}

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

@@ -0,0 +1,75 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+@customElement('kpi-grade-visualization')
+export class KpiGradeVisualization extends LitElement {
+  static 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;
+    }
+  `
+
+  @state() 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 }
+  ]
+
+  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>
+    `
+  }
+}

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

@@ -0,0 +1,58 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+@customElement('kpi-history-viewer')
+export class KpiHistoryViewer extends LitElement {
+  static 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;
+    }
+  `
+
+  @state() 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' }
+  ]
+
+  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>
+    `
+  }
+}

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

@@ -0,0 +1,100 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+@customElement('kpi-list-summary')
+export class KpiListSummary extends LitElement {
+  static 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;
+    }
+  `
+
+  @state() kpis: Array<{ name: string; desc: string }> = []
+  @state() loading = true
+  @state() error = ''
+
+  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>
+    `
+  }
+}

package/client/pages/kpi-dashboard/kpi-performance-summary.ts

@@ -0,0 +1,124 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+@customElement('kpi-performance-summary')
+export class KpiPerformanceSummary extends LitElement {
+  static styles = css`
+    .summary-container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      margin-bottom: 16px;
+    }
+    .summary-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+    .kpi-cards {
+      display: flex;
+      gap: 24px;
+      flex-wrap: wrap;
+    }
+    .kpi-card {
+      background: #f7f7fa;
+      border-radius: 12px;
+      padding: 24px 32px;
+      min-width: 220px;
+      flex: 1;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .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;
+    }
+  `
+
+  @state() kpis: Array<{ name: string; value: string | number; target: string | number; unit: string }> = []
+  @state() loading = true
+  @state() error = ''
+
+  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
+                value {
+                  value
+                  valueDate
+                }
+                targetValue
+                unit
+              }
+              total
+            }
+          }
+        `
+      })
+      this.kpis = (response.data.kpis.items || []).map(kpi => ({
+        name: kpi.name,
+        value: kpi.value?.value ?? '-',
+        target: kpi.targetValue ?? '-',
+        unit: kpi.unit ?? ''
+      }))
+    } catch (e) {
+      this.error = 'KPI 데이터를 불러오지 못했습니다.'
+    } finally {
+      this.loading = false
+    }
+  }
+
+  render() {
+    if (this.loading) {
+      return html`<div class="summary-container">로딩 중...</div>`
+    }
+    if (this.error) {
+      return html`<div class="summary-container">${this.error}</div>`
+    }
+    return html`
+      <div class="summary-container">
+        <div class="summary-title">KPI 실적 현황</div>
+        <div class="kpi-cards">
+          ${this.kpis.map(
+            kpi => html`
+              <div class="kpi-card">
+                <div class="kpi-name">${kpi.name}</div>
+                <div class="kpi-value">${kpi.value}${kpi.unit}</div>
+                <div class="kpi-target">목표: ${kpi.target}${kpi.unit}</div>
+              </div>
+            `
+          )}
+        </div>
+      </div>
+    `
+  }
+}