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

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

@@ -0,0 +1,271 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { marked } from 'marked'
+import { PageView, store } from '@operato/shell'
+import { i18next, localize } 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
+          }
+        }
+      }
+    }
+  }
+`
+
+@customElement('kpi-overview')
+export class KpiOverview extends PageView {
+  static 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')
+    }
+  }
+
+  @state() selectedGroup = 0
+  @state() selectedKpi = 0
+  @state() kpiCategories: any[] = []
+  @state() loading = true
+  @state() error: Error | null = null
+
+  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] as any
+    const kpi = group?.kpis?.[this.selectedKpi] as any
+    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>
+    `
+  }
+}

package/client/pages/kpi-category/kpi-category-list-page.ts

@@ -23,7 +23,6 @@ import { KpiCategoryImporter } from './kpi-category-importer'
 
 @customElement('kpi-category-list-page')
 export class KpiCategoryListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -34,8 +33,8 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
 
         width: 100%;
 
-        --grid-record-emphasized-background-color: #8B0000;
-        --grid-record-emphasized-color: #FF6B6B;
+        --grid-record-emphasized-background-color: #8b0000;
+        --grid-record-emphasized-color: #ff6b6b;
       }
 
       ox-grist {
@@ -62,7 +61,7 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
 
   get context() {
     return {
-      title: i18next.t('title.kpi-category list'),
+      title: i18next.t('title.kpi category list'),
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
@@ -88,7 +87,7 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
         }
       ],
       exportable: {
-        name: i18next.t('title.kpi-category list'),
+        name: i18next.t('title.kpi category list'),
         data: this.exportHandler.bind(this)
       },
       importable: {
@@ -101,11 +100,7 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>
@@ -121,7 +116,6 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
                 <md-icon>add</md-icon>
               </button>
             </ox-record-creator>
-
           </div>
         </div>
       </ox-grist>
@@ -131,8 +125,8 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
   async pageInitialized(lifecycle: any) {
     this.gristConfig = {
       list: {
-        fields: ['name', 'description'],
-        details: ['active', 'updatedAt']
+        fields: ['name', 'description', 'active', 'parent', 'createdAt', 'updatedAt', 'creator', 'updater'],
+        details: ['name', 'description', 'active', 'parent', 'createdAt', 'updatedAt', 'creator', 'updater']
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
@@ -140,55 +134,60 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
         {
           type: 'string',
           name: 'name',
-          header: i18next.t('field.name'),
-          record: {
-            editable: true
-          },
+          header: '이름',
+          record: { editable: true },
           filter: 'search',
           sortable: true,
-          width: 150
+          width: 120
         },
         {
           type: 'string',
           name: 'description',
           header: i18next.t('field.description'),
-          record: {
-            editable: true
-          },
+          record: { editable: true },
           filter: 'search',
           width: 200
         },
+        {
+          type: 'string',
+          name: 'parent',
+          header: '상위분류',
+          record: { editable: false, renderer: (v, c, r) => r.parent?.name },
+          width: 120
+        },
         {
           type: 'checkbox',
           name: 'active',
           label: true,
           header: i18next.t('field.active'),
-          record: {
-            editable: true
-          },
+          record: { editable: true },
           filter: true,
           sortable: true,
           width: 60
         },
-        {
-          type: 'resource-object',
-          name: 'updater',
-          header: i18next.t('field.updater'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 120
-        },
+        { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },
         {
           type: 'datetime',
           name: 'updatedAt',
           header: i18next.t('field.updated_at'),
-          record: {
-            editable: false
-          },
+          record: { editable: false },
           sortable: true,
           width: 180
+        },
+        {
+          type: 'resource-object',
+          name: 'creator',
+          header: '생성자',
+          record: { editable: false, renderer: (v, c, r) => r.creator?.name },
+          width: 120
+        },
+        {
+          type: 'resource-object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          record: { editable: false, renderer: (v, c, r) => r.updater?.name },
+          sortable: true,
+          width: 120
         }
       ],
       rows: {
@@ -197,11 +196,7 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
           multiple: true
         }
       },
-      sorters: [
-        {
-          name: 'name'
-        }
-      ]
+      sorters: [{ name: 'name' }]
     }
   }
 
@@ -355,12 +350,7 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
 
   async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
+    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(kpiCategory => {
       let tempObj = {}
@@ -389,10 +379,9 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
         title: i18next.t('title.import kpi-category')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

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

@@ -0,0 +1,114 @@
+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-alert-panel')
+export class KpiAlertPanel extends LitElement {
+  static styles = css`
+    .alert-container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      margin-bottom: 16px;
+    }
+    .alert-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+    .alert-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .alert-item {
+      padding: 10px 0;
+      border-bottom: 1px solid #eee;
+      font-size: 1.1rem;
+      color: #d32f2f;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .alert-icon {
+      font-size: 1.3rem;
+      color: #d32f2f;
+    }
+  `
+
+  @state() alerts: Array<{ level: string; message: string; kpi?: { name: string }; createdAt: string }> = []
+  @state() loading = true
+  @state() error = ''
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.fetchAlerts()
+  }
+
+  async fetchAlerts() {
+    this.loading = true
+    this.error = ''
+    try {
+      const response = await client.query({
+        query: gql`
+          query {
+            kpiAlerts {
+              id
+              message
+              level
+              createdAt
+              kpi {
+                name
+              }
+            }
+          }
+        `
+      })
+      this.alerts = response.data.kpiAlerts || []
+    } catch (e) {
+      this.error = 'KPI 알림 데이터를 불러오지 못했습니다.'
+    } finally {
+      this.loading = false
+    }
+  }
+
+  getIcon(level: string) {
+    switch (level) {
+      case 'critical':
+        return '❗'
+      case 'warning':
+        return '⚠️'
+      case 'info':
+      default:
+        return 'ℹ️'
+    }
+  }
+
+  render() {
+    if (this.loading) {
+      return html`<div class="alert-container">로딩 중...</div>`
+    }
+    if (this.error) {
+      return html`<div class="alert-container">${this.error}</div>`
+    }
+    return html`
+      <div class="alert-container">
+        <div class="alert-title">KPI 알림/상태/이상감지</div>
+        <ul class="alert-list">
+          ${this.alerts.length === 0
+            ? html`<li class="alert-item"><span class="alert-icon">✅</span> <span>이상/경고 없음</span></li>`
+            : this.alerts.map(
+                a => html`
+                  <li class="alert-item">
+                    <span class="alert-icon">${this.getIcon(a.level)}</span>
+                    <span>${a.kpi?.name ? `[${a.kpi.name}] ` : ''}${a.message}</span>
+                  </li>
+                `
+              )}
+        </ul>
+      </div>
+    `
+  }
+}