@things-factory/kpi 10.1.248 → 10.1.249

package/dist-client/pages/kpi/kpi-list-page.js

@@ -0,0 +1,948 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/data-grist/ox-filters-form.js';
+import '@operato/data-grist/ox-record-creator.js';
+import './kpi-viz-editor.js';
+import './kpi-grade-editor.js';
+import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
+import { PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { DataGrist } from '@operato/data-grist';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { notify, openPopup } from '@operato/layout';
+import { OxPrompt } from '@operato/popup';
+import { isMobileDevice } from '@operato/utils';
+import { p13n } from '@operato/p13n';
+import gql from 'graphql-tag';
+/**
+ * KPI scoreType — value → score 변환 방식 (null이면 미설정)
+ *
+ * DIRECT  — value = score, 변환 없음
+ * FORMULA — scoreFormula 수식으로 변환
+ * LOOKUP  — grade table(1D)로 변환
+ * CUSTOM  — 2D 룩업 등 특수 변환
+ */
+export const KPI_SCORE_TYPE = {
+    DIRECT: 'DIRECT',
+    FORMULA: 'FORMULA',
+    LOOKUP: 'LOOKUP',
+    CUSTOM: 'CUSTOM'
+};
+/**
+ * KPI valueType — value 획득 방식
+ *
+ * MEASURED   — 외부 시스템 수집 측정값
+ * ASSESSED   — 감리자 직접 평가 (1~5)
+ * CALCULATED — formula 자동 계산
+ * COMPOSITE  — 다차원 복합 입력
+ */
+export const KPI_VALUE_TYPE = {
+    MEASURED: 'MEASURED',
+    ASSESSED: 'ASSESSED',
+    CALCULATED: 'CALCULATED',
+    COMPOSITE: 'COMPOSITE'
+};
+export function inferScoreType(kpi) {
+    if (kpi.scoreType)
+        return kpi.scoreType;
+    if (kpi.scoreFormula)
+        return KPI_SCORE_TYPE.FORMULA;
+    if (kpi.grades && typeof kpi.grades === 'object' && !Array.isArray(kpi.grades))
+        return KPI_SCORE_TYPE.CUSTOM;
+    if (Array.isArray(kpi.grades) && kpi.grades.length > 0)
+        return KPI_SCORE_TYPE.LOOKUP;
+    return KPI_SCORE_TYPE.DIRECT;
+}
+import { KpiImporter } from './kpi-importer';
+import { KpiGradeEditor } from './kpi-grade-editor';
+import { KpiVizEditor } from './kpi-viz-editor';
+let KpiListPage = class KpiListPage extends p13n(localize(i18next)(ScopedElementsMixin(PageView))) {
+    constructor() {
+        super(...arguments);
+        this.mode = isMobileDevice() ? 'CARD' : 'GRID';
+        this.availableVariables = [];
+        this.availableVariablesLoaded = false;
+        this.hierarchicalView = false;
+    }
+    static { this.styles = [
+        /* The work surface frame for a list screen (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
+        ScrollbarStyles,
+        CommonGristStyles,
+        CommonHeaderStyles,
+        css `
+      :host {
+        --grid-record-emphasized-background-color: #8b0000;
+        --grid-record-emphasized-color: #ff6b6b;
+      }
+
+      ox-filters-form {         flex: 1;
+ }
+    `
+    ]; }
+    static get scopedElements() {
+        return { 'kpi-importer': KpiImporter,
+            'kpi-grade-editor': KpiGradeEditor,
+            'kpi-viz-editor': KpiVizEditor
+        };
+    }
+    async getAvailableKpiMetricVariables(currentKpi) {
+        if (!currentKpi || currentKpi.isLeaf) {
+            if (this.availableVariablesLoaded) {
+                return this.availableVariables;
+            }
+            const response = await client.query({ query: gql `
+          query {             kpiMetrics {               items {                 name
+                description
+                unit
+ }
+ }
+ }
+        `
+            });
+            this.availableVariables = (response.data.kpiMetrics.items || []).map(metric => ({ name: metric.name,
+                description: metric.description,
+                type: 'kpi-metric',
+                unit: metric.unit
+            }));
+            this.availableVariablesLoaded = true;
+            return this.availableVariables;
+        }
+        // 부모 KPI인 경우: 자식 KPI를 변수로 사용
+        try {
+            const response = await client.query({ query: gql `
+          query ($id: String!) {             kpi(id: $id) {               children {                 id
+                name
+                description
+ }
+ }
+ }
+        `,
+                variables: { id: currentKpi.id
+                }
+            });
+            return (response.data.kpi.children || []).map(childKpi => ({ name: childKpi.name,
+                description: childKpi.description,
+                type: 'child-kpi'
+            }));
+        }
+        catch (error) {
+            console.error('Failed to fetch child KPIs:', error);
+            return [];
+        }
+    }
+    get context() {
+        return { title: i18next.t('title.kpi list'),
+            search: { handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist.searchText },
+            filter: { handler: () => {
+                    this.grist.toggleHeadroom();
+                }
+            },
+            help: 'kpi/kpi',
+            actions: [
+                { title: this.hierarchicalView ? 'List View' : 'Tree View',
+                    action: this._toggleHierarchicalView.bind(this),
+                    icon: this.hierarchicalView ? 'list' : 'account_tree'
+                },
+                { title: i18next.t('button.save'),
+                    action: this._updateKpi.bind(this),
+                    ...CommonButtonStyles.save
+                },
+                { title: i18next.t('button.delete'),
+                    action: this._deleteKpi.bind(this),
+                    ...CommonButtonStyles.delete
+                }
+            ],
+            exportable: { name: i18next.t('title.kpi list'),
+                data: this.exportHandler.bind(this)
+            },
+            importable: { handler: this.importHandler.bind(this)
+            } };
+    }
+    render() {
+        const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID');
+        return html `
+      <ox-grist class="page-fill"
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+
+            <div id="modes">
+              <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+              <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+              <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+            </div>
+
+            <ox-record-creator id="add" .callback=${this.creationCallback.bind(this)}>
+              <button>
+                <md-icon>add</md-icon>
+              </button>
+            </ox-record-creator>
+          </div>
+        </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+      </ox-grist>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchKpiMetrics();
+    }
+    async pageInitialized(lifecycle) {
+        this.gristConfig = { list: { fields: ['name', 'description'],
+                details: [
+                    'name',
+                    'description',
+                    'formula',
+                    'active',
+                    'state',
+                    'vizType',
+                    'schedule',
+                    'scheduleId',
+                    'timezone',
+                    'version',
+                    'createdAt',
+                    'updatedAt',
+                    'creator',
+                    'updater',
+                    'thumbnail'
+                ]
+            },
+            columns: [
+                { type: 'gutter', gutterName: 'sequence' },
+                { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                // KPI 실적값 계산 버튼 추가
+                { type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'calculate',
+                    title: '실적값 계산',
+                    handlers: { click: (columns, data, column, record, rowIndex) => {
+                            this._calculateKpiValue(record);
+                        }
+                    }
+                },
+                { type: 'string',
+                    name: 'name',
+                    header: '이름',
+                    record: { editable: true },
+                    filter: 'search',
+                    sortable: true,
+                    width: 120
+                },
+                { type: 'string',
+                    name: 'description',
+                    header: i18next.t('field.description'),
+                    record: { editable: true },
+                    filter: 'search',
+                    width: 200
+                },
+                { type: 'resource-object',
+                    name: 'parent',
+                    label: true,
+                    header: '상위 KPI',
+                    record: { editable: true,
+                        options: { title: i18next.t('title.lookup KPI'),
+                            queryName: 'kpis',
+                            basicArgs: { filters: [{ name: 'isLeaf', operator: 'eq', value: false }]
+                            }
+                        }
+                    },
+                    width: 200
+                },
+                { type: 'boolean',
+                    name: 'isLeaf',
+                    header: '리프 KPI',
+                    record: { editable: true },
+                    width: 100
+                },
+                { type: 'formula',
+                    name: 'formula',
+                    header: '산식',
+                    record: { editable: true,
+                        availableVariables: async (value, column, record) => {
+                            if (!record || record.isLeaf) {
+                                return await this.getAvailableKpiMetricVariables(record);
+                            }
+                            // 부모 KPI인 경우: 자식 KPI를 변수로 사용
+                            return (record.children || []).map(child => ({ name: child.name,
+                                description: child.description || child.name,
+                                type: 'child-kpi',
+                                unit: ''
+                            }));
+                        }
+                    },
+                    width: 320 },
+                { type: 'select',
+                    name: 'periodType',
+                    header: '계산주기',
+                    record: { editable: true,
+                        options: [
+                            { value: '', display: '' },
+                            { value: 'DAY', display: '일' },
+                            { value: 'WEEK', display: '주' },
+                            { value: 'MONTH', display: '월' },
+                            { value: 'QUARTER', display: '분기' },
+                            { value: 'YEAR', display: '년' },
+                            { value: 'RANGE', display: '범위' },
+                            { value: 'ALLTIME', display: '전체' }
+                        ]
+                    },
+                    width: 80
+                },
+                { type: 'formula',
+                    name: 'scoreFormula',
+                    header: '성과점수수식',
+                    record: { editable: true,
+                        availableVariables: async (value, column, record) => {
+                            if (record.isLeaf) {
+                                return [
+                                    { name: 'value',
+                                        description: 'KPI 실적값',
+                                        type: 'kpi-value',
+                                        unit: ''
+                                    }
+                                ];
+                            }
+                            // 부모 이면 자식 KPI들을 변수로 사용
+                            return record.children.map(child => ({ name: child.name,
+                                description: child.description || child.name,
+                                type: 'kpi-score',
+                                unit: ''
+                            }));
+                        },
+                        includeDefaultFunctions: false,
+                        availableFunctions: [
+                            { name: 'INTEGRATE()',
+                                description: '수치 적분',
+                                template: 'INTEGRATE({func}, {a}, {b}, {n})',
+                                syntax: 'INTEGRATE(func, a, b, n)',
+                                parameters: ['func - 적분할 함수', 'a - 하한값', 'b - 상한값', 'n - 분할 수 (기본값: 1000)'],
+                                returnType: 'number',
+                                help: '사다리꼴 적분법을 사용하여 수치 적분을 계산합니다.',
+                                examples: ['INTEGRATE(x => x*x, 0, 1, 1000)', 'INTEGRATE([효율성], 0, 1)']
+                            },
+                            { name: 'BETA_FUNCTION()',
+                                description: '베타 함수',
+                                template: 'BETA_FUNCTION({x}, {alpha}, {beta})',
+                                syntax: 'BETA_FUNCTION(x, alpha, beta)',
+                                parameters: ['x - 변수 (0 ≤ x ≤ 1)', 'alpha - 첫 번째 모수', 'beta - 두 번째 모수'],
+                                returnType: 'number',
+                                help: '베타 분포 함수를 계산합니다. t^(α-1) × (1-t)^(β-1)',
+                                examples: ['BETA_FUNCTION(0.5, 2, 3)', 'BETA_FUNCTION([품질지수], 3, 2)']
+                            },
+                            { name: 'INCOMPLETE_BETA()',
+                                description: '불완전 베타 함수',
+                                template: 'INCOMPLETE_BETA({x}, {alpha}, {beta})',
+                                syntax: 'INCOMPLETE_BETA(x, alpha, beta)',
+                                parameters: ['x - 상한값 (0 ≤ x ≤ 1)', 'alpha - 첫 번째 모수', 'beta - 두 번째 모수'],
+                                returnType: 'number',
+                                help: '불완전 베타 함수를 수치 적분으로 계산합니다.',
+                                examples: ['INCOMPLETE_BETA(0.7, 2, 3)', 'INCOMPLETE_BETA([목표달성률]/100, 2, 3)']
+                            },
+                            { name: 'COMPLETE_BETA()',
+                                description: '완전 베타 함수',
+                                template: 'COMPLETE_BETA({alpha}, {beta})',
+                                syntax: 'COMPLETE_BETA(alpha, beta)',
+                                parameters: ['alpha - 첫 번째 모수', 'beta - 두 번째 모수'],
+                                returnType: 'number',
+                                help: '완전 베타 함수 B(α,β)를 계산합니다.',
+                                examples: ['COMPLETE_BETA(2, 3)', 'COMPLETE_BETA(3, 2)']
+                            },
+                            { name: 'PERFORMANCE_INDEX()',
+                                description: '성과 지수',
+                                template: 'PERFORMANCE_INDEX({x}, {alpha1}, {beta1}, {alpha2}, {beta2})',
+                                syntax: 'PERFORMANCE_INDEX(x, alpha1, beta1, alpha2, beta2)',
+                                parameters: [
+                                    'x - 성과 값 (0 ≤ x ≤ 1)',
+                                    'alpha1, beta1 - 분자 베타 함수 모수',
+                                    'alpha2, beta2 - 분모 베타 함수 모수'
+                                ],
+                                returnType: 'number',
+                                help: '성과 지수를 계산합니다: 1 - (불완전 베타 / 완전 베타)',
+                                examples: ['PERFORMANCE_INDEX(0.8, 2, 3, 2, 3)', 'PERFORMANCE_INDEX([성과점수]/100, 2, 3, 2, 3)']
+                            },
+                            { name: 'EXP()',
+                                description: '지수 함수',
+                                template: 'EXP({x})',
+                                syntax: 'EXP(x)',
+                                parameters: ['x - 지수'],
+                                returnType: 'number',
+                                help: '자연상수 e의 x제곱을 계산합니다.',
+                                examples: ['EXP(1)', 'EXP([효율성])']
+                            },
+                            { name: 'LOG()',
+                                description: '자연 로그',
+                                template: 'LOG({x})',
+                                syntax: 'LOG(x)',
+                                parameters: ['x - 로그를 취할 값'],
+                                returnType: 'number',
+                                help: '자연 로그 ln(x)를 계산합니다.',
+                                examples: ['LOG(2.718)', 'LOG([성과점수])']
+                            },
+                            { name: 'POW()',
+                                description: '거듭제곱',
+                                template: 'POW({x}, {y})',
+                                syntax: 'POW(x, y)',
+                                parameters: ['x - 밑수', 'y - 지수'],
+                                returnType: 'number',
+                                help: 'x의 y제곱을 계산합니다.',
+                                examples: ['POW(2, 3)', 'POW([효율성], 2)']
+                            },
+                            { name: 'EXPONENTIAL_DECAY()',
+                                description: '지수 감쇠',
+                                template: 'EXPONENTIAL_DECAY({value}, {scale}, {power})',
+                                syntax: 'EXPONENTIAL_DECAY(value, scale, power)',
+                                parameters: ['value - 입력 값', 'scale - 스케일 파라미터', 'power - 지수 파라미터'],
+                                returnType: 'number',
+                                help: '지수 감쇠 함수 exp(-(value/scale)^power)를 계산합니다.',
+                                examples: ['EXPONENTIAL_DECAY(50, 100, 2)', 'EXPONENTIAL_DECAY([목표달성률], 50, 2)']
+                            }
+                        ] },
+                    width: 200 },
+                { type: 'string',
+                    name: 'grades',
+                    header: '성과지수 Lookup',
+                    record: { editable: false,
+                        renderer: (v, c, r) => this.renderGradesCell(r)
+                    },
+                    width: 150
+                },
+                {
+                    type: 'select',
+                    name: 'scoreType',
+                    header: 'Score 산정',
+                    record: {
+                        editable: true,
+                        options: [
+                            { value: '', display: '(미설정)' },
+                            { value: 'DIRECT', display: 'DIRECT (변환없음)' },
+                            { value: 'FORMULA', display: 'FORMULA (수식)' },
+                            { value: 'LOOKUP', display: 'LOOKUP (등급표)' },
+                            { value: 'CUSTOM', display: 'CUSTOM (특수)' }
+                        ]
+                    },
+                    width: 130
+                },
+                {
+                    type: 'select',
+                    name: 'valueType',
+                    header: 'Value 획득',
+                    record: {
+                        editable: true,
+                        options: [
+                            { value: '', display: '(미설정)' },
+                            { value: 'MEASURED', display: 'MEASURED (외부수집)' },
+                            { value: 'ASSESSED', display: 'ASSESSED (감리자평가)' },
+                            { value: 'CALCULATED', display: 'CALCULATED (산식)' },
+                            { value: 'COMPOSITE', display: 'COMPOSITE (복합)' }
+                        ]
+                    },
+                    width: 140
+                },
+                { type: 'number',
+                    name: 'weight',
+                    header: '가중치',
+                    record: { editable: true },
+                    filter: true,
+                    sortable: true,
+                    width: 80
+                },
+                { type: 'checkbox',
+                    name: 'active',
+                    label: true,
+                    header: i18next.t('field.active'),
+                    record: { editable: true },
+                    filter: true,
+                    sortable: true,
+                    width: 60
+                },
+                { type: 'string', name: 'state', header: '상태', record: { editable: false }, width: 100 },
+                { type: 'string',
+                    name: 'vizType',
+                    hidden: true,
+                    header: '시각화 설정',
+                    record: { editable: false,
+                        renderer: (v, c, r) => {
+                            const vizType = r.vizType || 'CARD';
+                            const vizMeta = r.vizMeta || {};
+                            const color = vizMeta.color || '#2196f3';
+                            const icon = vizMeta.icon || 'dashboard';
+                            return html `
+                <div style="display:flex;align-items:center;gap:8px;">
+                  <span style="color:${color};cursor:pointer;" @click=${() => this._editViz(r)}> ${vizType} </span>
+                  <md-icon style="color:${color};font-size:16px;cursor:pointer;" @click=${() => this._editViz(r)}>
+                    ${icon}
+                  </md-icon>
+                </div>
+              `;
+                        }
+                    },
+                    width: 150
+                },
+                { type: 'crontab', name: 'schedule', header: '스케줄', record: { editable: true }, width: 120 },
+                { type: 'string', name: 'scheduleId', header: '스케줄ID', record: { editable: false }, width: 120 },
+                { type: 'timezone', name: 'timezone', header: '타임존', record: { editable: true }, width: 120 },
+                { type: 'number', name: 'version', header: '버전', record: { editable: false }, width: 80 },
+                { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },
+                { type: 'datetime',
+                    name: 'updatedAt',
+                    header: i18next.t('field.updated_at'),
+                    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
+                },
+                { type: 'string', name: 'thumbnail', header: '썸네일', record: { editable: false }, width: 120 }
+            ],
+            rows: { appendable: false,
+                selectable: { multiple: true
+                }
+            },
+            sorters: [{ name: 'name' }] };
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) { // do something here when this page just became as active
+        }
+    }
+    async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
+        if (this.hierarchicalView) {
+            return this.fetchHierarchicalData();
+        }
+        const response = await client.query({ query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: kpis(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
+              name
+              description
+              active
+              formula
+              periodType
+              scoreType
+              valueType
+              scoreFormula
+              grades
+              vizType
+              vizMeta
+              weight
+              schedule
+              scheduleId
+              timezone
+              version
+              parent {                 id
+                name
+ }
+              children {                 id
+                name
+                description
+ }
+              isLeaf
+              updater {                 id
+                name
+ }
+              updatedAt
+              creator {                 id
+                name
+ }
+              createdAt
+ }
+            total
+ }
+ }
+      `,
+            variables: { filters,
+                pagination: { page, limit },
+                sortings
+            }
+        });
+        return { total: response.data.responses.total || 0,
+            records: response.data.responses.items || []
+        };
+    }
+    async fetchKpiMetrics() {
+        const response = await client.query({ query: gql `
+        query {           kpiMetrics {             items {               name
+              description
+              unit
+ }
+ }
+ }
+      `
+        });
+        if (!response.errors) {
+            this.availableVariables = (response.data.kpiMetrics.items || []).map(metric => ({ name: metric.name,
+                description: metric.description,
+                type: 'kpi-metric',
+                unit: metric.unit
+            }));
+        }
+    }
+    async _deleteKpi() {
+        if (await OxPrompt.open({ title: i18next.t('text.are_you_sure'),
+            text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        })) {
+            const ids = this.grist.selected.map(record => record.id);
+            if (ids && ids.length > 0) {
+                const response = await client.mutate({ mutation: gql `
+            mutation ($ids: [String!]!) {               deleteKpis(ids: $ids)
+ }
+          `,
+                    variables: { ids
+                    }
+                });
+                if (!response.errors) {
+                    this.grist.fetch();
+                    notify({ message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+                    });
+                }
+            }
+        }
+    }
+    async _updateKpi() {
+        let patches = this.grist.dirtyRecords;
+        if (patches && patches.length) {
+            patches = patches.map(patch => {
+                let patchField = patch.id ? { id: patch.id } : {};
+                const dirtyFields = patch.__dirtyfields__;
+                for (let key in dirtyFields) {
+                    patchField[key] = dirtyFields[key].after;
+                }
+                patchField.cuFlag = patch.__dirty__;
+                return patchField;
+            });
+            const response = await client.mutate({ mutation: gql `
+          mutation ($patches: [KpiPatch!]!) {             updateMultipleKpi(patches: $patches) {               name
+ }
+ }
+        `,
+                variables: { patches
+                }
+            });
+            if (!response.errors) {
+                this.grist.fetch();
+            }
+        }
+    }
+    async creationCallback(kpi) {
+        try {
+            const response = await client.query({ query: gql `
+          mutation ($kpi: NewKpi!) {             createKpi(kpi: $kpi) {               id
+ }
+ }
+        `,
+                variables: { kpi
+                },
+                context: { hasUpload: true
+                }
+            });
+            if (!response.errors) {
+                this.grist.fetch();
+                document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data_created_successfully')
+                    }
+                }));
+            }
+            return true;
+        }
+        catch (ex) {
+            console.error(ex);
+            document.dispatchEvent(new CustomEvent('notify', { detail: { type: 'error',
+                    message: i18next.t('text.error')
+                }
+            }));
+            return false;
+        }
+    }
+    async exportHandler() {
+        const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records;
+        const targetFieldSet = new Set(['id', 'name', 'description', 'active']);
+        return exportTargets.map(kpi => {
+            let tempObj = {};
+            for (const field of targetFieldSet) {
+                tempObj[field] = kpi[field];
+            }
+            return tempObj;
+        });
+    }
+    async importHandler(records) {
+        const popup = openPopup(html `
+        <kpi-importer
+          .kpis=${records}
+          @imported=${() => {
+            history.back();
+            this.grist.fetch();
+        }}
+        ></kpi-importer>
+      `, { backdrop: true,
+            size: 'large',
+            title: i18next.t('title.import kpi')
+        });
+        popup.onclosed = () => {
+            this.grist.fetch();
+        };
+    }
+    /**
+     * grades 셀 렌더러. 서브클래스에서 override 가능.
+     * CUSTOM scoreType은 renderCustomGradesCell()로 위임.
+     */
+    renderGradesCell(kpi) {
+        const scoreType = inferScoreType(kpi);
+        let label;
+        let hasGrades;
+        switch (scoreType) {
+            case KPI_SCORE_TYPE.LOOKUP:
+                hasGrades = Array.isArray(kpi.grades) && kpi.grades.length > 0;
+                label = hasGrades ? `${kpi.grades.length}개 등급 설정됨` : '등급 설정 없음';
+                break;
+            case KPI_SCORE_TYPE.DIRECT:
+                // valueType으로 세분화 표시
+                if (kpi.valueType === KPI_VALUE_TYPE.ASSESSED) {
+                    return html `<span style="color:#2196f3">평가형 (1~5)</span>`;
+                }
+                if (kpi.valueType === KPI_VALUE_TYPE.CALCULATED) {
+                    return html `<span style="color:#888">산식 계산</span>`;
+                }
+                return html `<span style="color:#888">직접 (value=score)</span>`;
+            case KPI_SCORE_TYPE.FORMULA:
+                return html `<span style="color:#888">산식 변환</span>`;
+            case KPI_SCORE_TYPE.CUSTOM:
+                return this.renderCustomGradesCell(kpi);
+            default:
+                if (!scoreType) {
+                    return html `<span style="color:#ccc">미설정</span>`;
+                }
+                hasGrades = false;
+                label = '등급 설정 없음';
+        }
+        return html `<span
+      style="color:${hasGrades ? '#4caf50' : '#999'};cursor:pointer;"
+      @click=${() => this._editGrades(kpi)}
+      >${label}</span
+    >`;
+    }
+    /**
+     * CUSTOM scoreType의 grades 셀 렌더링. 서브클래스에서 override하여 구현.
+     */
+    renderCustomGradesCell(kpi) {
+        return html `<span style="color:#999;cursor:pointer;" @click=${() => this._editGrades(kpi)}>커스텀 설정됨</span>`;
+    }
+    /**
+     * 등급 편집 팝업. CUSTOM 타입은 _editCustomGrades()로 위임. 서브클래스에서 override 가능.
+     */
+    async _editGrades(kpi) {
+        if (!kpi.id) {
+            notify({ message: 'KPI를 먼저 저장한 후에 등급 설정을 할 수 있습니다.' });
+            return;
+        }
+        const scoreType = inferScoreType(kpi);
+        if (scoreType === KPI_SCORE_TYPE.CUSTOM) {
+            await this._editCustomGrades(kpi);
+            return;
+        }
+        if (scoreType !== KPI_SCORE_TYPE.LOOKUP)
+            return;
+        const popup = await openPopup(html ` <kpi-grade-editor .kpi=${kpi}></kpi-grade-editor> `, {
+            title: `${kpi.name} - 등급 설정`,
+            size: 'large'
+        });
+        popup.onclosed = () => { this.grist.fetch(); };
+    }
+    /**
+     * CUSTOM scoreType의 등급 편집 팝업. 서브클래스에서 override하여 구현.
+     */
+    async _editCustomGrades(kpi) {
+        notify({ message: '커스텀 등급 편집기가 필요합니다.' });
+    }
+    async _editViz(kpi) {
+        const popup = await openPopup(html `
+        <kpi-viz-editor
+          .kpi=${kpi}
+          .onSave=${(vizType, vizMeta) => this._onVizUpdated(kpi.id, vizType, vizMeta)}
+          .onCancel=${() => popup.close()}
+        ></kpi-viz-editor>
+      `, { title: `${kpi.name} - 시각화 설정`,
+            size: 'large'
+        });
+    }
+    async _onVizUpdated(kpiId, vizType, vizMeta) {
+        try {
+            const response = await client.mutate({ mutation: gql `
+          mutation ($id: String!, $patch: KpiPatch!) {             updateKpi(id: $id, patch: $patch) {               id
+              name
+              vizType
+              vizMeta
+ }
+ }
+        `,
+                variables: { id: kpiId,
+                    patch: { vizType, vizMeta }
+                }
+            });
+            if (!response.errors) {
+                this.grist.fetch();
+                notify({ message: '시각화 설정이 성공적으로 업데이트되었습니다.'
+                });
+            }
+        }
+        catch (error) {
+            notify({ message: '시각화 설정 업데이트 중 오류가 발생했습니다.'
+            });
+        }
+    }
+    async _calculateKpiValue(kpi) {
+        try {
+            const response = await client.mutate({ mutation: gql `
+          mutation ($kpiId: String!) {             calculateKpiValue(kpiId: $kpiId) {               id
+              value
+              valueDate
+              org
+ }
+ }
+        `,
+                variables: { kpiId: kpi.id
+                }
+            });
+            if (!response.errors) {
+                notify({ message: 'KPI 실적값이 성공적으로 계산되었습니다.' });
+                this.grist.fetch();
+            }
+        }
+        catch (error) {
+            notify({ message: 'KPI 실적값 계산 중 오류가 발생했습니다.' });
+        }
+    }
+    _toggleHierarchicalView() {
+        this.hierarchicalView = !this.hierarchicalView;
+        this.grist.fetch();
+    }
+    async fetchHierarchicalData() {
+        const response = await client.query({ query: gql `
+        query {           kpiTree {             id
+            name
+            description
+            active
+            formula
+            periodType
+            scoreType
+            scoreFormula
+            grades
+            vizType
+            vizMeta
+            weight
+            schedule
+            scheduleId
+            timezone
+            version
+            parent {               id
+              name
+ }
+            children {               id
+              name
+              description
+              active
+              isLeaf
+              weight
+              children {                 id
+                name
+                description
+                active
+                isLeaf
+                weight
+                children {                   id
+                  name
+                  description
+                  active
+                  isLeaf
+                  weight
+ }
+ }
+ }
+            isLeaf
+            updater {               id
+              name
+ }
+            updatedAt
+            creator {               id
+              name
+ }
+            createdAt
+ }
+ }
+      `
+        });
+        const flattenedRecords = this.flattenTreeData(response.data.kpiTree);
+        return { total: flattenedRecords.length,
+            records: flattenedRecords
+        };
+    }
+    flattenTreeData(treeData, level = 0) {
+        const flattened = [];
+        for (const item of treeData) {
+            const flattenedItem = { ...item,
+                __level: level,
+                __hasChildren: item.children && item.children.length > 0,
+                __expanded: true
+            };
+            // Add indentation to name for visual hierarchy
+            flattenedItem.name = '  '.repeat(level) + (level > 0 ? '└ ' : '') + item.name;
+            flattened.push(flattenedItem);
+            if (item.children && item.children.length > 0) {
+                flattened.push(...this.flattenTreeData(item.children, level + 1));
+            }
+        }
+        return flattened;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], KpiListPage.prototype, "gristConfig", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiListPage.prototype, "mode", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], KpiListPage.prototype, "grist", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiListPage.prototype, "availableVariables", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiListPage.prototype, "availableVariablesLoaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiListPage.prototype, "hierarchicalView", void 0);
+KpiListPage = __decorate([
+    customElement('kpi-list-page')
+], KpiListPage);
+export { KpiListPage };
+//# sourceMappingURL=kpi-list-page.js.map