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

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

@@ -0,0 +1,78 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+@customElement('kpi-value-entry')
+export class KpiValueEntry extends LitElement {
+  static styles = css`
+    .entry-container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      margin-bottom: 16px;
+    }
+    .entry-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+    .entry-form {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+    .entry-input {
+      padding: 8px 12px;
+      border-radius: 8px;
+      border: 1px solid #ccc;
+      font-size: 1rem;
+      width: 120px;
+    }
+    .entry-btn {
+      padding: 8px 20px;
+      border-radius: 8px;
+      background: #3a3ad6;
+      color: #fff;
+      border: none;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .entry-btn:hover {
+      background: #2222aa;
+    }
+    .entry-note {
+      font-size: 0.95rem;
+      color: #888;
+      margin-top: 8px;
+    }
+  `
+
+  @state() value = ''
+
+  render() {
+    return html`
+      <div class="entry-container">
+        <div class="entry-title">KPI 실적 수동입력/자동집계</div>
+        <form class="entry-form" @submit=${this.onSubmit}>
+          <input
+            class="entry-input"
+            type="text"
+            .value=${this.value}
+            @input=${e => (this.value = e.target.value)}
+            placeholder="실적값 입력"
+          />
+          <button class="entry-btn" type="submit">저장</button>
+        </form>
+        <div class="entry-note">자동집계는 스케줄에 따라 별도 처리됩니다.</div>
+      </div>
+    `
+  }
+
+  onSubmit(e: Event) {
+    e.preventDefault()
+    // TODO: 저장 로직 구현
+    alert(`입력값: ${this.value}`)
+    this.value = ''
+  }
+}

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

@@ -23,7 +23,6 @@ import { KpiGradeImporter } from './kpi-grade-importer'
 
 @customElement('kpi-grade-list-page')
 export class KpiGradeListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -34,8 +33,8 @@ export class KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
 
         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 KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
 
   get context() {
     return {
-      title: i18next.t('title.kpi-grade list'),
+      title: i18next.t('title.kpi grade list'),
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
@@ -88,7 +87,7 @@ export class KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
         }
       ],
       exportable: {
-        name: i18next.t('title.kpi-grade list'),
+        name: i18next.t('title.kpi grade list'),
         data: this.exportHandler.bind(this)
       },
       importable: {
@@ -101,11 +100,7 @@ export class KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
     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 KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
                 <md-icon>add</md-icon>
               </button>
             </ox-record-creator>
-
           </div>
         </div>
       </ox-grist>
@@ -131,64 +125,70 @@ export class KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
   async pageInitialized(lifecycle: any) {
     this.gristConfig = {
       list: {
-        fields: ['name', 'description'],
-        details: ['active', 'updatedAt']
+        fields: [
+          'kpi',
+          'version',
+          'name',
+          'description',
+          'minValue',
+          'maxValue',
+          'score',
+          'color',
+          'active',
+          'createdAt',
+          'updatedAt',
+          'creator',
+          'updater'
+        ],
+        details: [
+          'kpi',
+          'version',
+          'name',
+          'description',
+          'minValue',
+          'maxValue',
+          'score',
+          'color',
+          'active',
+          'createdAt',
+          'updatedAt',
+          'creator',
+          'updater'
+        ]
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
         {
           type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: {
-            editable: true
-          },
-          filter: 'search',
-          sortable: true,
+          name: 'kpi',
+          header: 'KPI',
+          record: { editable: false, renderer: (v, c, r) => r.kpi?.name },
           width: 150
         },
+        { type: 'number', name: 'version', header: '버전', record: { editable: false }, width: 80 },
+        { type: 'string', name: 'name', header: '등급명', record: { editable: true }, width: 120 },
+        { type: 'string', name: 'description', header: '설명', record: { editable: true }, width: 200 },
+        { type: 'number', name: 'minValue', header: '최소값', record: { editable: true }, width: 100 },
+        { type: 'number', name: 'maxValue', header: '최대값', record: { editable: true }, width: 100 },
+        { type: 'number', name: 'score', header: '점수', record: { editable: true }, width: 80 },
+        { type: 'string', name: 'color', header: '색상', record: { editable: true }, width: 80 },
+        { type: 'checkbox', name: 'active', label: true, header: '활성', record: { editable: true }, width: 60 },
+        { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },
+        { type: 'datetime', name: 'updatedAt', header: '수정일', record: { editable: false }, width: 180 },
         {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: {
-            editable: true
-          },
-          filter: 'search',
-          width: 200
-        },
-        {
-          type: 'checkbox',
-          name: 'active',
-          label: true,
-          header: i18next.t('field.active'),
-          record: {
-            editable: true
-          },
-          filter: true,
-          sortable: true,
-          width: 60
+          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
-          },
-          sortable: true,
+          header: '수정자',
+          record: { editable: false, renderer: (v, c, r) => r.updater?.name },
           width: 120
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated_at'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 180
         }
       ],
       rows: {
@@ -197,11 +197,7 @@ export class KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
           multiple: true
         }
       },
-      sorters: [
-        {
-          name: 'name'
-        }
-      ]
+      sorters: [{ name: 'name' }]
     }
   }
 
@@ -355,12 +351,7 @@ export class KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
 
   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(kpiGrade => {
       let tempObj = {}
@@ -389,10 +380,9 @@ export class KpiGradeListPage extends connect(store)(localize(i18next)(ScopedEle
         title: i18next.t('title.import kpi-grade')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

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

@@ -0,0 +1,146 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-grist'
+import { css, html } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+import { DataGrist, FetchOption } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PageView } from '@operato/shell'
+import { gql } from '@apollo/client'
+
+const KPI_HISTORY_LIST_QUERY = gql`
+  query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+    kpiHistories(params: { filters: $filters, pagination: $pagination, sortings: $sortings }) {
+      items {
+        id
+        kpi {
+          name
+        }
+        version
+        state
+        createdAt
+        updater {
+          name
+        }
+        updatedAt
+      }
+      total
+    }
+  }
+`
+
+@customElement('kpi-history-list-page')
+export class KpiHistoryListPage extends localize(i18next)(PageView) {
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+      background: #f4f6fa;
+      min-height: 100vh;
+    }
+    ox-grist {
+      overflow-y: auto;
+      flex: 1;
+      background: #fff;
+      border-radius: 8px;
+      margin: 32px auto;
+      max-width: 1200px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    }
+  `
+
+  @state() gristConfig: any = {
+    list: {
+      fields: [
+        'kpi',
+        'version',
+        'name',
+        'description',
+        'category',
+        'formula',
+        'active',
+        'state',
+        'createdAt',
+        'updatedAt',
+        'creator',
+        'updater'
+      ],
+      details: [
+        'kpi',
+        'version',
+        'name',
+        'description',
+        'category',
+        'formula',
+        'active',
+        'state',
+        'createdAt',
+        'updatedAt',
+        'creator',
+        'updater'
+      ]
+    },
+    columns: [
+      { type: 'gutter', gutterName: 'sequence', fixed: true },
+      { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
+      {
+        type: 'string',
+        name: 'kpi',
+        header: 'KPI',
+        record: { editable: false, renderer: (v, c, r) => r.kpi?.name },
+        width: 150
+      },
+      { type: 'number', name: 'version', header: '버전', record: { editable: false }, width: 80 },
+      { type: 'string', name: 'name', header: '이름', record: { editable: false }, width: 150 },
+      { type: 'string', name: 'description', header: '설명', record: { editable: false }, width: 200 },
+      {
+        type: 'string',
+        name: 'category',
+        header: '카테고리',
+        record: { editable: false, renderer: (v, c, r) => r.category?.name },
+        width: 120
+      },
+      { type: 'string', name: 'formula', header: '산식', record: { editable: false }, width: 200 },
+      { type: 'checkbox', name: 'active', label: true, header: '활성', record: { editable: false }, width: 60 },
+      { type: 'string', name: 'state', header: '상태', record: { editable: false }, width: 100 },
+      { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },
+      { type: 'datetime', name: 'updatedAt', header: '수정일', record: { editable: false }, 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: '수정자',
+        record: { editable: false, renderer: (v, c, r) => r.updater?.name },
+        width: 120
+      }
+    ]
+  }
+
+  @query('ox-grist') private grist!: DataGrist
+
+  render() {
+    return html` <ox-grist .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist> `
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
+    const response = await client.query({
+      query: KPI_HISTORY_LIST_QUERY,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      },
+      fetchPolicy: 'network-only'
+    })
+    return {
+      total: response.data.kpiHistories.total || 0,
+      records: response.data.kpiHistories.items || []
+    }
+  }
+}

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

@@ -23,7 +23,6 @@ import { KpiMetricImporter } from './kpi-metric-importer'
 
 @customElement('kpi-metric-list-page')
 export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -34,8 +33,8 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
 
         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 KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
 
   get context() {
     return {
-      title: i18next.t('title.kpi-metric list'),
+      title: i18next.t('title.kpi metric list'),
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
@@ -88,7 +87,7 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
         }
       ],
       exportable: {
-        name: i18next.t('title.kpi-metric list'),
+        name: i18next.t('title.kpi metric list'),
         data: this.exportHandler.bind(this)
       },
       importable: {
@@ -101,11 +100,7 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
     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 KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
                 <md-icon>add</md-icon>
               </button>
             </ox-record-creator>
-
           </div>
         </div>
       </ox-grist>
@@ -131,8 +125,40 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
   async pageInitialized(lifecycle: any) {
     this.gristConfig = {
       list: {
-        fields: ['name', 'description'],
-        details: ['active', 'updatedAt']
+        fields: [
+          'name',
+          'description',
+          'unit',
+          'source',
+          'dataSet',
+          'fieldName',
+          'formula',
+          'active',
+          'schedule',
+          'scheduleId',
+          'timezone',
+          'createdAt',
+          'updatedAt',
+          'creator',
+          'updater'
+        ],
+        details: [
+          'name',
+          'description',
+          'unit',
+          'source',
+          'dataSet',
+          'fieldName',
+          'formula',
+          'active',
+          'schedule',
+          'scheduleId',
+          'timezone',
+          'createdAt',
+          'updatedAt',
+          'creator',
+          'updater'
+        ]
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
@@ -140,55 +166,43 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
         {
           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: '설명', record: { editable: true }, width: 200 },
+        { type: 'string', name: 'unit', header: '단위', record: { editable: true }, width: 80 },
+        { type: 'string', name: 'source', header: '데이터출처', record: { editable: true }, width: 120 },
         {
           type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: {
-            editable: true
-          },
-          filter: 'search',
-          width: 200
+          name: 'dataSet',
+          header: '데이터셋',
+          record: { editable: false, renderer: (v, c, r) => r.dataSet?.name },
+          width: 120
         },
+        { type: 'string', name: 'fieldName', header: '필드명', record: { editable: true }, width: 120 },
+        { type: 'string', name: 'formula', header: '산식', record: { editable: true }, width: 200 },
+        { type: 'checkbox', name: 'active', label: true, header: '활성', record: { editable: true }, width: 60 },
+        { type: 'string', name: 'schedule', header: '스케줄', record: { editable: true }, width: 120 },
+        { type: 'string', name: 'scheduleId', header: '스케줄ID', record: { editable: false }, width: 120 },
+        { type: 'string', name: 'timezone', header: '타임존', record: { editable: true }, width: 100 },
+        { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },
+        { type: 'datetime', name: 'updatedAt', header: '수정일', record: { editable: false }, width: 180 },
         {
-          type: 'checkbox',
-          name: 'active',
-          label: true,
-          header: i18next.t('field.active'),
-          record: {
-            editable: true
-          },
-          filter: true,
-          sortable: true,
-          width: 60
+          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
-          },
-          sortable: true,
+          header: '수정자',
+          record: { editable: false, renderer: (v, c, r) => r.updater?.name },
           width: 120
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated_at'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 180
         }
       ],
       rows: {
@@ -197,11 +211,7 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
           multiple: true
         }
       },
-      sorters: [
-        {
-          name: 'name'
-        }
-      ]
+      sorters: [{ name: 'name' }]
     }
   }
 
@@ -355,12 +365,7 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
 
   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(kpiMetric => {
       let tempObj = {}
@@ -389,10 +394,9 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
         title: i18next.t('title.import kpi-metric')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-